/* ==================================================================================================
 * THE RFQ SCREEN ON A PHONE: the phone frame of docs/Design/vendor-portal/RFQ Quote.dc.html, with the additions
 * decision 21 of docs/Design/vendor-portal/DECISIONS.md records.
 *
 * SPLIT FROM vendor-rfq.css on 30 September 2026, because the phone frame took that sheet past the bound a single
 * file may reach (rulebook law 8). Nothing inside moved or changed: this is the tail of that sheet, linked directly
 * after it in App.razor, so every rule below meets the rules above it in the same cascade order as before.
 * ================================================================================================== */

/* ---------------------------------------------------------------- the phone frame */
@media (max-width: 700px) {
    /* THE PHONE FRAME IS ONE COLUMN THAT FILLS THE SCREEN, so the bar ends at the screen's foot even under a short
       bill. The column is a flex box, not a grid: a sticky grid item cannot leave its own row. */
    .vp-rfq {
        display: flex;
        flex-direction: column;
    }

    .vp-rfq-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* The bar stays at the foot of the screen while the page scrolls under it, so whatever is brought into view lands
       above it, never under it. vendor-rfq.js measures the bar. */
    html:has(.vp-rfq) {
        scroll-padding-block-end: var(--vp-rfq-foot, 0px);
    }

    .vp-rfq-side {
        display: contents;
    }

    /* THE DESIGN'S "QUOTE DETAILS" CARD, above the chips: what the company holds, its title and "Edit", then a summary
       of the boxes, which "Edit" swaps for the boxes themselves, and "No quote…" as a text button. The card and the bar
       take the panel's colour (DECISIONS.md item 24). */
    .vp-rfq-details {
        order: -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 14px;
        background: var(--vp-panel);
        border: 1px solid var(--vp-panel-line);
        border-radius: 10px;
    }

    .vp-rfq-status {
        order: -1;
        margin: 0;
        padding: 0 0 10px;
        border-top: 0;
        border-bottom: 1px solid var(--vp-panel-line);
    }

    .vp-rfq-details-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .vp-rfq-details-title {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
    }

    .vp-rfq-details-edit {
        min-height: 36px;
        padding: 0 10px;
        border: 1px solid #d5d0c3;
        border-radius: 7px;
        background: var(--app-paper);
        font-family: inherit;
        font-size: 12.5px;
        color: var(--app-ink);
        cursor: pointer;
    }

    .vp-rfq-details-edit:focus-visible,
    .vp-rfq-details-nq:focus-visible {
        outline: 2px solid var(--app-link);
        outline-offset: 2px;
    }

    .vp-rfq-details-sum {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 12px;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .vp-rfq-details-sum dt {
        color: var(--app-muted);
    }

    .vp-rfq-details-sum dd {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* What the vendor wrote is summarised in two lines at most; "Edit" shows all of it. */
    .vp-rfq-details-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .vp-rfq-details-bad {
        font-weight: 500;
        color: var(--app-danger);
    }

    .vp-rfq-fields {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-top: 4px;
    }

    .vp-rfq-fields > .vp-rfq-sideblock {
        padding: 0;
    }

    .vp-rfq-details:not(.vp-rfq-details-open) .vp-rfq-fields,
    .vp-rfq-details-open .vp-rfq-details-sum {
        display: none;
    }

    .vp-rfq-details-nq {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--app-danger);
        cursor: pointer;
    }

    .vp-rfq-details-nq:disabled {
        color: #6e6b64;
        cursor: not-allowed;
    }

    .vp-rfq-details-why {
        display: block;
        margin: -6px 0 0;
        font-size: 12px;
        line-height: 1.5;
        color: var(--app-muted);
    }

    /* A BOX THE VENDOR TYPES IN is a thumb's height on a phone, and its writing is 16px: an iPhone zooms the whole page
       into any box written smaller the moment it is touched, and the vendor must pinch back out after every line. */
    .vp-rfq-input {
        height: 44px;
        font-size: 16px;
    }

    .vp-rfq-area {
        font-size: 16px;
    }

    /* THE DESIGN'S BAR AT THE FOOT OF THE SCREEN: the total, the progress and the two buttons, on screen while the
       bill scrolls under it, edge to edge. It also says when the draft was saved, which the design's phone bar does
       not: without it a phone showed nothing after "Save draft". The negative margins reach past the page's own
       padding (VendorRfq.razor.css: 16px at the sides, 14px at the foot). */
    .vp-rfq-bar {
        order: 1;
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: auto -16px -14px;
        padding: 12px 16px 22px;
        border-top: 1px solid var(--vp-panel-line);
        background: var(--vp-panel);
    }

    .vp-rfq-sum {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .vp-rfq-sum > .vp-rfq-sideblock {
        padding: 0;
    }

    .vp-rfq-sum > .vp-rfq-sideblock:first-child {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    .vp-rfq-total {
        font-size: 19px;
    }

    .vp-rfq-track {
        display: none;
    }

    /* The buttons: when the draft was saved, then the reasons for a greyed one, then the secondary and the primary
       side by side, 48px, as the design's phone draws them. The desk's "No quote…" gives way to the card's, and the
       desk's attachments row to the card's own block. */
    .vp-rfq-acts {
        position: static;
        margin-top: 0;
        padding: 0;
        border-top: 0;
        background: none;
    }

    .vp-rfq-saved {
        order: -2;
    }

    .vp-rfq-acts .vp-rfq-why,
    .vp-rfq-acts .vp-rfq-blocked {
        order: -1;
    }

    .vp-rfq-acts .vp-rfq-blocked .vp-rfq-btn {
        flex: 0 0 auto;
        align-self: stretch;
        height: 44px;
    }

    .vp-rfq-acts .vp-rfq-btn {
        flex: 1 1 0;
        height: 48px;
        font-size: 14px;
    }

    .vp-rfq-acts .vp-rfq-btn-full {
        order: 1;
    }

    .vp-rfq-deskonly {
        display: none;
    }

    .vp-rfq-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .vp-rfq-chipbtn {
        height: 40px;
        border-radius: 20px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* The design draws Find and its keyboard hint on the desk frame only. */
    .vp-rfq-find,
    .vp-rfq-hint {
        display: none;
    }

    /* The design's phone bill is one card per line, not a grid: the line's number and code with the Included box
       across from them, the description, the quantity with the rate box across from it, and the amount under them.
       The same cells as the desk's row, in the card's order. */
    .vp-rfq-headrow {
        display: none;
    }

    .vp-rfq-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 6px 16px 12px;
    }

    .vp-rfq-c-num {
        order: 1;
        font-size: 12px;
    }

    /* The design writes "{number} · {code}"; the dot is drawn, never read aloud. */
    .vp-rfq-c-num::after {
        content: "\00B7";
        content: "\00B7" / "";
        margin-inline-start: 8px;
    }

    .vp-rfq-c-code {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
    }

    .vp-rfq-row .vp-rfq-c-inc {
        order: 3;
        justify-content: flex-end;
        height: auto;
        min-height: 44px;
        font-size: 12.5px;
        color: #3f3d38;
    }

    .vp-rfq-incbox {
        width: 20px;
        height: 20px;
    }

    .vp-rfq-inctext {
        display: inline;
    }

    .vp-rfq-row .vp-rfq-c-desc {
        order: 4;
        flex: 1 1 100%;
        font-size: 13.5px;
        line-height: 1.45;
    }

    .vp-rfq-c-qty {
        order: 5;
        font-size: 13px;
        color: var(--app-ink);
    }

    .vp-rfq-c-unit {
        order: 6;
        flex: 1 1 auto;
        font-size: 13px;
        color: var(--app-ink);
    }

    .vp-rfq-c-rate {
        order: 7;
    }

    .vp-rfq-c-amount {
        order: 8;
        flex: 1 1 100%;
        text-align: end;
        color: #3f3d38;
    }

    .vp-rfq-noterow {
        order: 9;
        flex: 1 1 100%;
    }

    /* A line's note controls and "Show more" are a thumb's height on a phone. */
    .vp-rfq-notebtn {
        min-height: 44px;
        font-size: 12.5px;
    }

    .vp-rfq-noterow .vp-rfq-btn,
    .vp-rfq-morebtn {
        height: 44px;
    }

    /* The design's 160 x 44 box. Its writing is 16px rather than the design's 15, for the reason given above. */
    .vp-rfq-rate {
        width: 160px;
        height: 44px;
        font-size: 16px;
    }

    /* No column head names the box on the phone, so the design writes "Rate" in it. */
    .vp-rfq-rate::placeholder {
        color: var(--app-faint);
    }

    .vp-rfq-rate:disabled::placeholder {
        color: transparent;
    }

    .vp-rfq-msg {
        padding: 24px 16px;
    }

    .vp-rfq-msg-body {
        gap: 10px;
        padding: 22px 20px;
    }

    .vp-rfq-msg-title {
        font-size: 21px;
    }

    .vp-rfq-msg-acts {
        flex-direction: column;
        margin-top: 6px;
    }

    .vp-rfq-msg-acts .vp-rfq-btn {
        width: 100%;
        height: 48px;
    }

    .vp-rfq-btn-full {
        height: 48px;
    }

    /* The design's phone draws the refusal as a bottom sheet the width of the frame, over the whole frame dimmed,
       with no note and its two buttons side by side across the sheet. The question a submit asks sits the same way. */
    .vp-rfq dialog::backdrop {
        inset-block-start: 0;
        background: rgba(20, 20, 19, 0.4);
    }

    .vp-rfq-panel[open],
    .vp-rfq-confirm[open] {
        position: fixed;
        inset-block: auto 0;
        inset-inline: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 88vh;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: none;
    }

    .vp-rfq-panel-head {
        padding: 18px 20px 14px;
    }

    /* The design's sheet has no corner close: "Keep quoting", 48 px tall, closes it, and so does Escape. The desktop
       drawer keeps its 30 px close, as the design draws it there. */
    .vp-rfq-panel-close {
        display: none;
    }

    .vp-rfq-panel-body {
        padding: 16px 20px;
    }

    /* A reason is a row a thumb chooses: 44 px on the phone, as the design's sheet draws it. */
    .vp-rfq-reason {
        min-height: 44px;
    }

    .vp-rfq-panel-aside {
        display: none;
    }

    .vp-rfq-panel-foot,
    .vp-rfq-confirm-foot {
        gap: 8px;
        padding: 12px 20px 24px;
    }

    .vp-rfq-confirm-body {
        padding: 18px 20px 8px;
    }

    .vp-rfq-confirm-title {
        font-size: 19px;
    }

    .vp-rfq-panel-foot .vp-rfq-btn,
    .vp-rfq-confirm-foot .vp-rfq-btn {
        flex: 1 1 0;
        height: 48px;
        font-size: 14px;
    }
}