/* ================================================================ the vendor's home
 *
 * APPENDED for the Vendor Home page (Vendor Home.dc.html). Nothing above this line is touched, reordered or
 * rewritten: this stylesheet is shared, and the page's own rules are namespaced vp-home-* so a rule here cannot
 * collide with one already in it.
 *
 * THE NUMBERS ARE THE DESIGN'S, transcribed from its own inline styles and its own script constants: the 58px row
 * grid, the 22px status chip, the 30px row button, the 340px notices column, the 540px message
 * card, the 320px aside placeholder. A few values are literal hex rather than the --app-* tokens above, because the
 * chip palettes below are the vendor design's own and the tokens are the operator portal's.
 *
 * DIRECTION IS LOGICAL. Every rule uses margin-inline, padding-inline and text-align: start, so the same stylesheet
 * mirrors when the frame is drawn right to left and no second stylesheet exists for Arabic.
 */
/* THE PAGE IS AS WIDE AS THE DESIGN'S FRAME (1440px), so the Find box sits on the tabs' row as the design draws it;
   at 1180px it fell to a row of its own. The page's title and summary line are gone (owner, 30 September 2026), so the
   tabs are the first thing under the bar. */
.vp-home-wide {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 26px 32px 24px;
    box-sizing: border-box;
}

.vp-home-loading-label {
    margin: 0;
    font-size: 13px;
    color: var(--app-muted);
}

/* The refresh control, at the end of the tabs' row. The design draws its refresh inside the 4d banner only; this one
   stands on the row as well, because a control that exists only after the thing it finds is no control at all. */
.vp-home-refresh {
    flex: none;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

/* ---------------------------------------------------------------- 4d, what moved */
.vp-home-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #E7D2AC;
    background: #F6EBD8;
    color: #4A340A;
}

.vp-home-banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.vp-home-banner-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.vp-home-banner-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.vp-home-banner-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid #D5D0C3;
    background: #FFFFFF;
    color: #141413;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- the two columns */
.vp-home-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.vp-home-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ---------------------------------------------------------------- the chips and the Find box */
.vp-home-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vp-home-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vp-home-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid #D5D0C3;
    background: #FFFFFF;
    color: #3F3D38;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.vp-home-chip-count {
    color: #63615B;
}

.vp-home-chip-now {
    border-color: #141413;
    background: #141413;
    color: #FAF9F5;
    font-weight: 500;
}

.vp-home-chip-now .vp-home-chip-count {
    color: #D5D0C3;
}

.vp-home-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.vp-home-find-label {
    font-size: 12px;
    color: #63615B;
}

.vp-home-find-input {
    height: 30px;
    width: 200px;
    padding: 0 10px;
    border: 1px solid #D5D0C3;
    border-radius: 7px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- 4c, the empty list */
.vp-home-empty {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid #E3DFD4;
    border-radius: 12px;
    padding: 28px;
}

.vp-home-empty-title {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 21px;
    font-weight: 500;
}

.vp-home-empty-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3F3D38;
    max-width: 620px;
}

/* ---------------------------------------------------------------- one company and its rows */
.vp-home-group {
    background: #FFFFFF;
    border: 1px solid #E3DFD4;
    border-radius: 12px;
    overflow: hidden;
}

.vp-home-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #FBFAF7;
    border-bottom: 1px solid #E3DFD4;
}

.vp-home-group-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vp-home-group-count {
    flex-shrink: 0;
    padding-top: 2px;
    font-size: 12px;
    color: #63615B;
}

.vp-home-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 190px 124px 84px;
    column-gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid #F0EDE4;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B6862;
}

.vp-home-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 190px 124px 84px;
    column-gap: 16px;
    align-items: center;
    min-height: 58px;
    padding: 8px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #F0EDE4;
}

.vp-home-group .vp-home-row:last-child {
    border-bottom: 0;
}

/* 4d. A row that arrived, moved or was cancelled while the vendor was reading. The mark is the design's own, and it is
   kept on the physical left edge exactly as the design draws it rather than being mirrored: the design's literal
   numbers are the specification here. */
.vp-home-row-changed {
    background: #FDF6E9;
    box-shadow: inset 3px 0 0 #C28A2C;
}

/* A closed or cancelled row reads quieter than one still waiting on the vendor, as the design draws it. */
.vp-home-row-quiet {
    color: #3F3D38;
}

.vp-home-cell-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vp-home-row-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #141413;
    line-height: 1.4;
    text-decoration: none;
}

.vp-home-row-title:hover {
    text-decoration: underline;
}

.vp-home-row-meta {
    font-size: 12px;
    color: #63615B;
}

.vp-home-cell-project {
    font-size: 12.5px;
    line-height: 1.45;
}

.vp-home-cell-deadline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.vp-home-deadline {
    font-size: 12.5px;
}

.vp-home-moved {
    font-size: 12px;
    color: #8C2E24;
}

.vp-home-cell-status {
    min-width: 0;
}

.vp-home-cell-action {
    display: flex;
    justify-content: flex-end;
}

/* The deadline, in the design's own bands: a red chip inside 24 hours, tabular muted text otherwise. There is no blue
   here — the design draws one blue countdown once with no rule anywhere for it. */
.vp-home-count {
    font-size: 12px;
    color: #63615B;
}

.vp-home-count-plain {
    color: #3F3D38;
    font-variant-numeric: tabular-nums;
}

.vp-home-count-red {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: #F7E7E4;
    color: #8C2E24;
}

/* ---------------------------------------------------------------- the status chip, the design's six words */
.vp-home-st {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.vp-home-st-new {
    background: #E5EBF1;
    color: #2F4F68;
}

.vp-home-st-prog {
    background: #F6EBD8;
    color: #6E4C0E;
}

.vp-home-st-sub {
    background: #E4EFE7;
    color: #215B41;
}

/* Selected and Not selected are drawn by the design and not reachable on this page: nothing tells a vendor how the
   company ended a request until the award exists. The two rules stand ready for it and no row can carry them. */
.vp-home-st-sel {
    background: #E4EFE7;
    color: #215B41;
}

.vp-home-st-notsel {
    background: #EEECE6;
    color: #55534D;
}

.vp-home-st-closed {
    background: #EEECE6;
    color: #55534D;
}

.vp-home-st-cancel {
    background: #F7E7E4;
    color: #8C2E24;
}

/* ---------------------------------------------------------------- the row's one action */
.vp-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.vp-home-btn-pri {
    border: 1px solid #141413;
    background: #141413;
    color: #FAF9F5;
}

.vp-home-btn-sec {
    border: 1px solid #D5D0C3;
    background: #FFFFFF;
    color: #141413;
}

/* ---------------------------------------------------------------- the notices column */
.vp-home-notices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.vp-home-notices-title {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6862;
}

.vp-home-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #E3DFD4;
    background: #FFFFFF;
    color: #141413;
}

.vp-home-note-red {
    border-color: #E6C4BD;
    background: #F7E7E4;
    color: #6E231B;
}

.vp-home-note-amber {
    border-color: #E7D2AC;
    background: #F6EBD8;
    color: #4A340A;
}

.vp-home-note-blue {
    border-color: #C9D5E1;
    background: #E5EBF1;
    color: #1F3A50;
}

.vp-home-note-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.vp-home-note-body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}

/* The design draws a notice's two actions under its body as the page's secondary buttons, in a quiet row. */
.vp-home-note-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.vp-home-coverage {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--app-muted);
}

/* ---------------------------------------------------------------- the registration card the home keeps */
.vp-home-register {
    margin-top: 2px;
}

/* ---------------------------------------------------------------- 4e and 4f, the message card */
.vp-home-msg-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.vp-home-msg {
    max-width: 540px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DFD4;
    border-radius: 12px;
    overflow: hidden;
}

.vp-home-msg-bar {
    height: 4px;
    background: #63615B;
}

.vp-home-msg-bar-red {
    background: #A8352A;
}

.vp-home-msg-bar-grey {
    background: #63615B;
}

.vp-home-msg-inner {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vp-home-kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #4D4B46;
}

.vp-home-kicker-error {
    color: #A8352A;
}

.vp-home-kicker-denied {
    color: #4D4B46;
}

.vp-home-msg-title {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
}

.vp-home-msg-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3F3D38;
}

.vp-home-msg-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vp-home-ref {
    margin: 0;
    font-size: 12px;
    color: #63615B;
}

/* ---------------------------------------------------------------- 4b, the loading skeleton
   DRAWN AND NOT REACHABLE: this front door renders the page on the server, so the read completes before the first byte
   and there is no first paint to fill in. The rules stand so the design is drawn faithfully. */
.vp-home-skel {
    background: #FFFFFF;
    border: 1px solid #E3DFD4;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vp-home-skel-aside {
    height: 320px;
}

.vp-home-skel-bar {
    display: block;
    height: 14px;
    border-radius: 6px;
    background: #E8E5DD;
}

.vp-home-skel-half {
    width: 40%;
}

.vp-home-skel-full {
    width: 80%;
    height: 12px;
}

/* ---------------------------------------------------------------- the phone shell */
@media (max-width: 700px) {
    .vp-home-wide {
        padding: 16px 16px 24px;
    }

    /* The notices come above the list, so nothing a vendor must read sits below a list that can be long. Both take the
       screen's width: the desk grid's `align-items: start` sized the list to its widest line instead (the tabs in one
       row), which pushed the page 170px past a 390px screen. */
    .vp-home-body {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: stretch;
        gap: 16px;
    }

    /* The design draws the Find box on the desk frame only. */
    .vp-home-find {
        display: none;
    }

    .vp-home-refresh {
        margin-inline-start: auto;
    }

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

    .vp-home-chip {
        height: 40px;
        border-radius: 20px;
    }

    .vp-home-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* The design draws the header row and the row's action on the desk frame only: on the phone the row is a column
       and the request's own title is the way in. */
    .vp-home-cols,
    .vp-home-cell-action {
        display: none;
    }

    /* A phone row reads from the start edge; the desk row's centring would centre each line. */
    .vp-home-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 16px;
    }
}