/*
 * F4T Inventory Management — Console v2.0 design system.
 *
 * Pass 1: token layer, chrome, tabs, login overlay, toast skeleton.
 * Pass 2: component library (buttons, tags, fields, cards, tables, modals,
 *         combo, terminal, segmented, metric, progress, list, responsive).
 * Pass 3 (next): rewritten templates and tab handlers consume the above.
 */

:root {
    /* graphite (console / dark — default) */
    --bg:#0E0F11; --bg-1:#141619; --bg-2:#1A1D21; --bg-3:#22262B;
    --fg:#F5F3EE; --fg-2:#C9C5BD; --fg-3:#8B8680; --fg-4:#555049;
    --line:#2A2E34; --line-hi:#3D434B;

    /* signal */
    --red:#FF3B2E; --red-2:#FF6A5F; --red-deep:#B8231A;
    --red-wash:rgba(255,59,46,.08);

    /* semantic */
    --green:#3FD37A; --amber:#E8B14A; --blue:#6FA8FF; --violet:#B490F5;

    /* fonts */
    --f-display:'Clash Display','Space Grotesk',ui-sans-serif,sans-serif;
    --f-body:'Supreme','Space Grotesk',ui-sans-serif,system-ui,sans-serif;
    --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

    /* scale, spacing, radius, motion */
    --t-xs:11px; --t-sm:12px; --t-md:13px; --t-base:14px; --t-lg:16px;
    --t-xl:20px; --t-2xl:28px; --t-3xl:40px; --t-4xl:64px; --t-5xl:104px;
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
    --s6:32px; --s7:48px; --s8:64px; --s9:96px;
    --r:2px; --r-lg:4px;
    --dur-fast:120ms; --dur:200ms; --ease-out:cubic-bezier(.2,.7,.2,1);

    color-scheme: dark;
}

[data-surface="paper"] {
    --bg:#F1EBE0; --bg-1:#FAF6EF; --bg-2:#E8E0D1; --bg-3:#E8E0D1;
    --fg:#161514; --fg-2:#3A3633; --fg-3:#6B645D; --fg-4:#A39A8E;
    --line:rgba(22,21,20,.18); --line-hi:rgba(22,21,20,.45);
    --red:#E63027; --red-deep:#B61E17;
    --f-display:'Newsreader','Gambarino',Georgia,serif;
    --f-body:'Switzer',ui-sans-serif,system-ui,sans-serif;

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--f-body);
    font-size: var(--t-base);
    line-height: 1.45;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---- Utilities ---------------------------------------------------------- */

.hidden { display: none !important; }
.muted  { color: var(--fg-3); }
.hint   { color: var(--fg-3); font-size: var(--t-sm); }
.red    { color: var(--red); }
/* The italic skewed `4` in the wordmark. */
.skew   { display: inline-block; font-style: italic; transform: skewX(-8deg); }
.kbd {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    padding: 1px 6px;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    background: var(--bg-2);
    color: var(--fg-2);
}

/* ---- Top bar (chrome) --------------------------------------------------- */

#top-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s5);
    height: 56px;
    padding: 0 var(--s4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

#top-bar .brand {
    display: flex;
    align-items: center;
    min-width: 0;
}
#top-bar .brand-logo {
    height: 28px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.wordmark {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.01em;
    color: var(--fg);
    white-space: nowrap;
}
.wordmark .red.skew {
    color: var(--red);
}

/* Theme-swapped logo variants: grey on the dark (console) surface, black
   on the light (paper) surface. Hidden by default; toggled below. */
.logo-grey, .logo-black { display: none; }
:root .logo-grey { display: inline-block; }
[data-surface="paper"] .logo-grey { display: none; }
[data-surface="paper"] .logo-black { display: inline-block; }

#top-bar .scan-wrap {
    display: flex;
    align-items: center;
    gap: var(--s2);
    justify-self: stretch;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}
#scan-input {
    flex: 1;
    /* Let the input shrink below its intrinsic size on narrow screens
       instead of pushing the Go button off the edge. */
    min-width: 0;
    height: 40px;
    padding: 0 14px 0 40px;
    font-family: var(--f-mono);
    font-size: var(--t-md);
    letter-spacing: 0.02em;
    color: var(--fg);
    background-color: var(--bg-3);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B8680' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3 3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow   var(--dur-fast) var(--ease-out);
}
#scan-input::placeholder { color: var(--fg-4); }
#scan-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 2px var(--red-wash);
}
#scan-go {
    height: 40px;
    padding: 0 var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
#scan-go:hover { border-color: var(--red); color: var(--red); }

#top-bar .user-wrap {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2);
}
#user-display {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chrome buttons (theme toggle, account menu, sign out). */
#top-bar .user-wrap button,
#top-bar .user-wrap a#help-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    height: 28px;
    padding: 0 var(--s3);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
#top-bar .user-wrap button:hover,
#top-bar .user-wrap a#help-link:hover {
    color: var(--fg);
    border-color: var(--line-hi);
}

/* Account dropdown — consolidates the guide link, change-password and
   2FA controls behind one top-bar button. */
#account-menu { position: relative; }
#account-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s1);
    background: var(--bg-1);
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    z-index: 40;
}
#account-menu-list.hidden { display: none; }
#top-bar .user-wrap #account-menu-list button,
#top-bar .user-wrap #account-menu-list a {
    width: 100%;
    justify-content: flex-start;
    height: 32px;
}
#account-menu-btn[aria-expanded="true"] {
    color: var(--fg);
    border-color: var(--line-hi);
}

/* ---- Tabs --------------------------------------------------------------- */

#tabs {
    display: flex;
    align-items: stretch;
    height: 40px;
    padding: 0 var(--s4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 56px;
    z-index: 9;
    overflow-x: auto;
    scrollbar-width: none;
}
#tabs::-webkit-scrollbar { display: none; }

#tabs .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    height: 40px;
    padding: 0 var(--s4);
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
#tabs .tab .num {
    color: var(--red);
    font-weight: 500;
}
#tabs .tab:hover { color: var(--fg); }
#tabs .tab.active { color: var(--fg); }
#tabs .tab.active::after {
    content: "";
    position: absolute;
    left: var(--s4);
    right: var(--s4);
    bottom: -1px;
    height: 2px;
    background: var(--red);
}
/* Red dot marking the active tab, sits after the label. */
#tabs .tab.active .lbl::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: var(--s2);
    vertical-align: middle;
    background: var(--red);
    border-radius: 50%;
}

/* ---- Content ------------------------------------------------------------ */

#content {
    padding: var(--s5) var(--s4);
    max-width: 1280px;
    margin: 0 auto;
}

/* ---- Login overlay ------------------------------------------------------ */

#login-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5) var(--s4);
    z-index: 1000;
}
.login-card {
    width: 100%;
    max-width: 380px;
    padding: var(--s6) var(--s5) var(--s5);
    background: var(--bg-1);
    /* Right + bottom borders only — floor-plan corner, max 2px radius. */
    border-right: 1px solid var(--line-hi);
    border-bottom: 1px solid var(--line-hi);
    border-radius: var(--r);
}
.login-card .wordmark {
    display: block;
    margin-bottom: var(--s5);
}
.login-card .login-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: var(--s5);
}
.login-card h2 {
    margin: 0 0 var(--s5);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-3);
}
.login-card label {
    display: block;
    margin-bottom: var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
}
.login-card label input {
    display: block;
    width: 100%;
    margin-top: var(--s2);
    height: 36px;
    padding: 0 var(--s3);
    font-family: var(--f-body);
    font-size: var(--t-base);
    color: var(--fg);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow   var(--dur-fast) var(--ease-out);
    text-transform: none;
    letter-spacing: 0;
}
.login-card label input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 2px var(--red-wash);
}
.login-card #login-submit,
.btn--red {
    display: inline-block;
    width: 100%;
    height: 40px;
    margin-top: var(--s3);
    padding: 0 var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--r);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.login-card #login-submit:hover,
.btn--red:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
}
.btn--line {
    display: inline-block;
    width: 100%;
    height: 40px;
    margin-top: var(--s2);
    padding: 0 var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-2);
    background: transparent;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    cursor: pointer;
}
.btn--line:hover { color: var(--fg); border-color: var(--red); }
.login-error {
    margin: var(--s3) 0 0;
    padding: var(--s2) var(--s3);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
    color: var(--red-2, var(--red));
    background: var(--red-wash);
    border-left: 2px solid var(--red);
    border-radius: var(--r);
}

body.is-login #top-bar,
body.is-login #tabs,
body.is-login #content { display: none; }

/* ---- Toast -------------------------------------------------------------- */

#toast {
    position: fixed;
    left: 50%;
    bottom: var(--s5);
    transform: translateX(-50%) translateY(120%);
    min-width: 260px;
    max-width: 90vw;
    padding: var(--s3) var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg);
    background: var(--bg-1);
    border: 1px solid var(--line-hi);
    border-left: 1px solid var(--fg-3);
    border-radius: var(--r);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur) var(--ease-out),
                opacity   var(--dur) var(--ease-out);
    z-index: 200;
}
#toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#toast.show.success { border-left-color: var(--green); }
#toast.show.error   { border-left-color: var(--red); }
#toast.show.info    { border-left-color: var(--blue); }

/* ---- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 10px 16px;
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--bg);
    background: var(--fg);
    border: 1px solid var(--fg);
    border-radius: var(--r);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--fg-2); border-color: var(--fg-2); }
.btn:active { background: var(--fg-3); border-color: var(--fg-3); }
.btn:disabled,
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Outline variant — transparent base, border-only. */
.btn.btn--line {
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 10px 16px;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--line-hi);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    font-size: var(--t-sm);
    font-weight: 400;
}
.btn.btn--line:hover { border-color: var(--fg); color: var(--fg); background: transparent; }

/* Red primary/danger variant. */
.btn.btn--red {
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 10px 16px;
    color: #fff;
    background: var(--red);
    border: 1px solid var(--red);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.btn.btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* Compact size. */
.btn--sm { padding: 8px 12px; font-size: var(--t-sm); }
.btn.btn--line.btn--sm,
.btn.btn--red.btn--sm { padding: 8px 12px; font-size: var(--t-sm); }

/* Square glyph button. */
.btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: var(--t-md);
}

/* ---- Tags --------------------------------------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    color: var(--fg-2);
    background: transparent;
    white-space: nowrap;
}
.tag::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 6px;
    background: var(--fg-3);
    border-radius: 50%;
}
.tag--red     { color: var(--fg); background: var(--red-wash); border-color: var(--red); }
.tag--red::before    { background: var(--red); }
.tag--green::before  { background: var(--green); }
.tag--amber::before  { background: var(--amber); }
.tag--blue::before   { background: var(--blue); }
.tag--violet::before { background: var(--violet); }
.tag--neutral::before{ background: var(--fg-3); }

/* ---- Fields ------------------------------------------------------------- */

.field {
    display: block;
    margin-bottom: var(--s3);
}
.field > .field__label,
.field > span:first-child {
    display: block;
    margin-bottom: var(--s1);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.field input[type=text],
.field input[type=number],
.field input[type=date],
.field input[type=datetime-local],
.field input[type=password],
.field input[type=email],
.field input[type=search],
.field input[type=file],
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    color: var(--fg);
    background: var(--bg-3);
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    outline: none;
    font-family: var(--f-mono);
    font-size: var(--t-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow   var(--dur-fast) var(--ease-out);
}
/* Textareas keep body font for long-form content. */
.field textarea { font-family: var(--f-body); font-size: var(--t-base); resize: vertical; min-height: 80px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red);
}
.field--row {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: var(--s3);
}
.field--row > .field__label,
.field--row > span:first-child { margin-bottom: 0; }
.field.error input,
.field.error select,
.field.error textarea { border-color: var(--red); }

/* ---- Cards -------------------------------------------------------------- */

.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* minmax(0, …): a plain auto column would take the min-content width
       of a wide table inside, stretching the card (and the page) instead
       of letting .table-flow scroll. Same for min-width when the card is
       itself a grid item. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    min-width: 0;
    padding: 22px 24px;
    background: var(--bg-1);
    /* Floor-plan corner: bottom-right border only. */
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r);
}
.card__eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
}
.card__title {
    font-family: var(--f-display);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--fg);
    margin: 0;
}
.card__body { min-width: 0; }
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
}
.card__head > .card__title,
.card__head > #quote-builder-title { margin-right: auto; }
.card__foot {
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}
.card--flush { padding: 0; }
.card--split {
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s5);
}

/* ---- Key/value grid ----------------------------------------------------- */

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
}
.kv dt {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.kv dd { margin: 0; color: var(--fg); font-size: var(--t-md); }

/* ---- Tables ------------------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-body);
}
.table thead th {
    padding: 10px 12px;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    text-align: left;
    border-bottom: 1px solid var(--line-hi);
    background: transparent;
}
.table tbody td {
    padding: 10px 12px;
    font-size: var(--t-md);
    color: var(--fg-2);
    border-bottom: 1px solid var(--line);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-2); color: var(--fg); }
.table--rows-clickable tbody tr { cursor: pointer; }
.table .num {
    font-family: var(--f-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.table .shrink { width: 1%; white-space: nowrap; }

/* ---- Modals (overlay + dialog) ----------------------------------------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5) var(--s4);
    background: rgba(14, 15, 17, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dialog {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(92vw, 560px);
    max-width: 560px;
    max-height: 90vh;
    background: var(--bg-1);
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    overflow: hidden;
}
.dialog__eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    margin-bottom: var(--s1);
}
.dialog__head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.dialog__title {
    margin: 0;
    font-family: var(--f-display);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--fg);
}
.dialog__body {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: 70vh;
}
.dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.dialog--wide   { max-width: 880px; width: min(94vw, 880px); }
.dialog--narrow { max-width: 420px; width: min(92vw, 420px); }

/* ---- Combo (live-search dropdown) --------------------------------------- */

.combo { position: relative; }
.combo__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-1);
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    z-index: 20;
}
.combo__results:empty { display: none; }
.combo__hit {
    padding: 8px 12px;
    font-family: var(--f-mono);
    font-size: var(--t-md);
    color: var(--fg-2);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.combo__hit:last-child { border-bottom: 0; }
.combo__hit:hover,
.combo__hit.active { background: var(--red-wash); color: var(--red); }
.combo__hit .muted { color: var(--fg-3); }

/* ---- Chrome tabs / sub-nav --------------------------------------------- */

.chrome-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}
.chrome-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 10px var(--s4);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
.chrome-tabs__tab .num { color: var(--red); font-weight: 500; }
.chrome-tabs__tab:hover { color: var(--fg); }
.chrome-tabs__tab.active { color: var(--fg); border-bottom: 2px solid var(--red); }
.chrome-tabs__tab.active .lbl::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: var(--s2);
    vertical-align: middle;
    background: var(--red);
    border-radius: 50%;
}

/* Vertical rail variant (admin left nav). */
.chrome-tabs--rail {
    flex-direction: column;
    align-items: stretch;
    width: 200px;
    border-right: 1px solid var(--line);
}
.chrome-tabs--rail .chrome-tabs__tab {
    justify-content: flex-start;
    border-bottom: 0;
}
.chrome-tabs--rail .chrome-tabs__tab.active {
    border-bottom: 0;
    border-right: 2px solid var(--red);
}

/* ---- Terminal block ----------------------------------------------------- */

.terminal {
    padding: var(--s3);
    max-height: 400px;
    overflow-y: auto;
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--fg-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.terminal__line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s2);
    align-items: baseline;
}
.terminal__when {
    font-size: var(--t-xs);
    color: var(--fg-4);
    white-space: nowrap;
}
.terminal__what { color: var(--fg); }
.terminal__meta { color: var(--fg-3); }
.terminal--empty {
    color: var(--fg-3);
    font-style: italic;
    text-align: center;
}

/* ---- Segmented control -------------------------------------------------- */

.segmented {
    display: inline-flex;
    border: 1px solid var(--line-hi);
    border-radius: var(--r);
    overflow: hidden;
}
.segmented > label,
.segmented > button {
    padding: 8px 14px;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.segmented > *:last-child { border-right: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + *,
.segmented [aria-selected="true"],
.segmented .active {
    background: var(--fg);
    color: var(--bg);
}

/* ---- Metric tile -------------------------------------------------------- */

.metric {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--s1);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-1);
}
.metric__label {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
}
.metric__value {
    font-family: var(--f-display);
    font-size: var(--t-3xl);
    font-weight: 500;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ---- Progress rule ------------------------------------------------------ */

.progress-rule {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: var(--line);
}
.progress-rule__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--red);
    /* width set inline by JS */
}

/* ---- List (history / quote docs) --------------------------------------- */

.list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s3);
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.list__row:last-child { border-bottom: 0; }
.list__drag-handle {
    cursor: grab;
    color: var(--fg-3);
    user-select: none;
}
.list__drag-handle::before { content: "::"; font-family: var(--f-mono); }
.list__row.dragging { opacity: 0.5; }
.list__row.drop-target { border-top: 2px solid var(--red); }
.list--docs .list__row[draggable="true"] { cursor: grab; }

/* ---- Quote tab helpers -------------------------------------------------- */

.kv--grand {
    border-top: 1px solid var(--line);
    padding-top: var(--s3);
    margin-top: var(--s3);
}
.kv--grand dt,
.kv--grand dd {
    font-size: var(--t-xl);
    color: var(--fg);
}

.autosave-indicator {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: end;
    margin: var(--s3) 0;
}
.filter-bar .field { margin-bottom: 0; }

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s3) var(--s4);
}
.grid-2 > .span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

.quote-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
}
/* The list/builder views are .app-tab elements — the app-tab shell already
   defines their grid; don't set columns here (the ID selector would
   out-rank .app-tab--rail and flatten the rail layout). */
.quote-tab > #quote-list-view,
.quote-tab > #quote-builder-view {
    display: grid;
    gap: var(--s4);
}
.quote-actions {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

/* Keep the builder's action strip (Preview PDF / Copy text / Send / Cancel /
   Delete) reachable while scrolling a long quote: stick it just below the
   sticky top bar (56px) + tab nav (40px). z-index sits above cards but below
   combo dropdowns (20) and the chrome (9/10). */
#quote-builder-view .filter-strip {
    position: sticky;
    top: 96px;
    z-index: 8;
}

/* ---- Quote builder: item search, lines table --------------------------- */

/* The "Find stock item" combo sits on its own row and reads as a proper
   form field rather than a thin unlabelled box. Matches the other
   .field inputs in weight and padding. */
.qb-item-search-field { margin-bottom: var(--s3); }
.combo--lg > input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-family: var(--f-mono);
    font-size: var(--t-md);
}
.combo--lg .combo__hit {
    padding: 10px 14px;
    font-size: var(--t-md);
    display: flex;
    align-items: center;
    gap: var(--s2);
}
.combo--lg .combo__hit strong { margin-right: var(--s2); }

/* Lines table: predictable column widths so the numeric inputs never
   squeeze below a legible size, and the total column always fits a
   formatted £-figure without wrapping. Numbers are right-aligned with
   tabular figures so columns tick against each other. */
.qbl-table { table-layout: fixed; width: 100%; }
.qbl-col-no     { width: 44px; }
.qbl-col-qty    { width: 90px; }
.qbl-col-price  { width: 140px; }
.qbl-col-total  { width: 140px; }
.qbl-col-del    { width: 96px; }

.qbl-table .num-input {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 10px;
}
.qbl-table .qbl-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qbl-table .qbl-desc  { width: 100%; }
.qbl-meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: 4px;
    flex-wrap: wrap;
}
.qbl-src { font-size: var(--t-xs); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 720px) {
    #top-bar {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        height: auto;
        padding: var(--s2) var(--s3);
        gap: var(--s2);
    }
    #top-bar .brand { grid-column: 1; grid-row: 1; }
    #top-bar .wordmark { font-size: 18px; }
    #top-bar .brand-logo { height: 22px; max-width: 130px; }
    #top-bar .user-wrap {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--s1);
        min-width: 0;
    }
    #user-display { max-width: 96px; }
    #top-bar .user-wrap button { padding: 0 var(--s2); }
    #top-bar .scan-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin: 0;
    }
    #tabs { top: auto; }
    /* Keep the text labels on phones — bare index numbers are cryptic.
       The strip already scrolls horizontally; drop the numbers instead. */
    #tabs .tab .num,
    .chrome-tabs__tab .num { display: none; }
    #tabs .tab,
    .chrome-tabs__tab { padding: 0 var(--s3); }
    #content { padding: var(--s4) var(--s3); }
    .card { padding: 16px; }
    .card--split { grid-template-columns: 1fr; gap: var(--s4); }
    .overlay { padding: var(--s3) var(--s2); }
    .dialog,
    .dialog--wide,
    .dialog--narrow {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - var(--s5));
    }
    .dialog__head,
    .dialog__body { padding-left: 16px; padding-right: 16px; }
    .dialog__foot { padding: 12px 16px; }
    /* iOS Safari zooms the page when a focused control's font-size is
       below 16px. Bump form controls to 16px on touch-size screens. */
    .field input[type=text],
    .field input[type=number],
    .field input[type=date],
    .field input[type=datetime-local],
    .field input[type=password],
    .field input[type=email],
    .field input[type=search],
    .field select,
    .field textarea,
    .login-card label input,
    .input-search,
    #scan-input { font-size: 16px; }
}

@media (max-width: 700px) {
    .chrome-tabs--rail { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; }
    .chrome-tabs--rail .chrome-tabs__tab.active { border-right: 0; border-bottom: 2px solid var(--red); }
}

/* ---- Admin tab layout (Pass 3c) ---------------------------------------- */

.admin-tab {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s5);
}
.admin-panes { min-width: 0; }

.field--radio,
.field--check {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: 0;
}
.field--radio > input,
.field--check > input { margin: 0; }
.field--radio > span,
.field--check > span { margin-bottom: 0; }

.list--drag .list__row { cursor: grab; }

@media (max-width: 700px) {
    .admin-tab { grid-template-columns: 1fr; }
}

/* --- Home dashboard ------------------------------------------------------ */

.home-grid {
    display: grid;
    /* min(340px, 100%) so a viewport narrower than 340px still fits. */
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: var(--s3, 16px);
    align-items: start;
}

.home-card--link { cursor: pointer; }
.home-card--link:hover { border-color: var(--red, #c8102e); }

.home-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    font-size: 0.92em;
}