/* =====================================================================
   LiteLuvr Dealer Portal — design system
   Hand-authored, no build step. Load order: tokens, base, layout,
   components, pages, utilities, responsive, print.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;

    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --emerald-50:  #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-600: #059669;
    --emerald-700: #047857;

    --amber-50:  #fffbeb;
    --amber-100: #fef3c7;
    --amber-600: #d97706;
    --amber-700: #b45309;

    --rose-50:  #fff1f2;
    --rose-100: #ffe4e6;
    --rose-600: #e11d48;
    --rose-700: #be123c;

    --violet-50:  #f5f3ff;
    --violet-100: #ede9fe;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;

    --cyan-50:  #ecfeff;
    --cyan-100: #cffafe;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;

    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-600: #16a34a;
    --green-700: #15803d;

    --page-bg:     #f6f7f9;
    --surface:     #ffffff;
    --border:      #e8eaee;
    --border-soft: #f1f2f5;

    --text:        var(--slate-900);
    --text-muted:  var(--slate-500);
    --text-subtle: var(--slate-400);

    --primary:       var(--blue-600);
    --primary-hover: var(--blue-700);

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow:    0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);

    --sidebar-w: 268px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -.015em; color: var(--slate-900); }
h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 16px; line-height: 1.4; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

img, svg { max-width: 100%; vertical-align: middle; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

code, kbd, pre { font-family: var(--font-mono); font-size: .88em; }

:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--blue-100); }

.icon { width: 20px; height: 20px; flex: none; stroke-width: 1.9; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
   3. App shell
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 18px;
}

.brand-mark {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 19px;
    flex: none;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .28);
}

.brand-text { min-width: 0; }
.brand-text strong {
    display: block; font-size: 17px; font-weight: 800;
    letter-spacing: -.02em; color: var(--slate-900); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text span { display: block; font-size: 13px; font-weight: 600; color: var(--primary); }

.sidebar__scroll { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }

.nav-label {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--slate-400);
    padding: 0 10px; margin: 18px 0 8px;
}
.sidebar__scroll > .nav-label:first-child { margin-top: 4px; }

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: 10px;
    font-size: 15px; font-weight: 500;
    color: var(--slate-600);
    transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--slate-50); color: var(--slate-900); }
.nav-item.is-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.nav-item.is-active .icon { color: var(--blue-600); }
.nav-item .icon { color: var(--slate-400); }
.nav-item:hover .icon { color: var(--slate-600); }

.nav-item__badge {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--rose-600); color: #fff;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
}
.nav-item__badge--blue { background: var(--blue-600); }

.quick-stat {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 14px; margin-bottom: 8px;
    border-radius: var(--radius);
    background: var(--blue-50);
    font-size: 14px; font-weight: 600; color: var(--blue-700);
}
.quick-stat b { font-size: 18px; font-weight: 800; }
.quick-stat--neutral { background: var(--slate-50); color: var(--slate-700); }

.sidebar__footer {
    border-top: 1px solid var(--border);
    padding: 14px 16px 16px;
}

.user-chip { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.user-chip__meta { min-width: 0; }
.user-chip__meta strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--slate-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip__meta span {
    display: block; font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.avatar {
    width: 38px; height: 38px; flex: none;
    border-radius: var(--radius-pill);
    background: var(--blue-100); color: var(--blue-700);
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
}
.avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.avatar--mfg { background: var(--violet-100); color: var(--violet-700); }

.signout {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px;
    border: 0; border-radius: 10px; background: none;
    font: inherit; font-size: 14px; color: var(--slate-600);
    cursor: pointer; text-align: left;
}
.signout:hover { background: var(--slate-50); color: var(--rose-600); }

/* Main column ---------------------------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: none;
    align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
}

.icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--slate-600);
    cursor: pointer;
}
.icon-btn:hover { background: var(--slate-50); color: var(--slate-900); }

.content { flex: 1; padding: 34px 40px 56px; max-width: 1440px; width: 100%; }
.content--wide { max-width: none; }

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.page-head__text { min-width: 260px; flex: 1; }
.page-head__text p { color: var(--text-muted); font-size: 16px; margin: 6px 0 0; max-width: 46rem; }
.page-head__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent; border-radius: var(--radius);
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.btn:disabled, .btn.is-disabled { opacity: .55; pointer-events: none; }

.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, .3); }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }

.btn--secondary { background: var(--surface); color: var(--slate-700); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--slate-50); color: var(--slate-900); }

.btn--ghost { background: transparent; color: var(--slate-600); }
.btn--ghost:hover { background: var(--slate-100); color: var(--slate-900); }

.btn--danger { background: var(--rose-600); color: #fff; }
.btn--danger:hover { background: var(--rose-700); color: #fff; }

.btn--danger-soft { background: var(--rose-50); color: var(--rose-700); border-color: var(--rose-100); }
.btn--danger-soft:hover { background: var(--rose-100); }

.btn--success { background: var(--emerald-600); color: #fff; }
.btn--success:hover { background: var(--emerald-700); color: #fff; }

.btn--sm { padding: 7px 13px; font-size: 13.5px; border-radius: 9px; gap: 6px; }
.btn--xs { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   5. Cards & stats
   --------------------------------------------------------------------- */
.card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 16px; flex-wrap: wrap;
    padding: 20px 24px; border-bottom: 1px solid var(--border-soft);
}
.card__head h2 { font-size: 19px; min-width: 0; }
.card__body { padding: 24px; }
.card__body--flush { padding: 0; }
.card__foot { padding: 16px 24px; border-top: 1px solid var(--border-soft); background: var(--slate-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* 2×2 on a normal laptop (labels need the room next to the icon tile),
   4-across only on genuinely wide screens. */
.stat-grid {
    display: grid; gap: 20px; margin-bottom: 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1600px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The icon tile is a real grid cell, not an absolutely-positioned overlay,
   so no amount of narrowing can let the label or the value run underneath it. */
.stat {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label tile"
        "value tile"
        "foot  foot";
    column-gap: 16px;
    align-items: start;
}
.stat__label {
    grid-area: label; min-width: 0;
    margin: 0 0 10px;
    font-size: 15px; font-weight: 600; color: var(--slate-600);
}
.stat__value {
    grid-area: value; min-width: 0;
    font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    color: var(--slate-900);
    overflow-wrap: anywhere;
}
.stat__value--sm { font-size: 32px; }
.stat__foot {
    grid-area: foot; min-width: 0;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 14px 0 0; font-size: 14px; font-weight: 600;
}
.stat__foot--up   { color: var(--emerald-600); }
.stat__foot--down { color: var(--rose-600); }
.stat__foot--flat { color: var(--text-muted); }

.stat__tile {
    width: 56px; height: 56px; border-radius: 18px;
    display: grid; place-items: center;
    flex: none;
}
/* Only the tile inside a stat card takes part in that card's grid — the same
   class is reused as a plain chip elsewhere (notifications, drafts panel). */
.stat > .stat__tile { grid-area: tile; align-self: start; }
.stat__tile .icon { width: 26px; height: 26px; }
.tile-blue    { background: var(--blue-100);    color: var(--blue-600); }
.tile-amber   { background: var(--amber-100);   color: var(--amber-600); }
.tile-emerald { background: var(--emerald-100); color: var(--emerald-600); }
.tile-violet  { background: var(--violet-100);  color: var(--violet-600); }
.tile-cyan    { background: var(--cyan-100);    color: var(--cyan-600); }
.tile-rose    { background: var(--rose-100);    color: var(--rose-600); }
.tile-slate   { background: var(--slate-100);   color: var(--slate-600); }

/* Decorative corner wash, like the reference dashboard. It is positioned, so
   it would otherwise paint over the static text — the content is lifted above
   it below rather than relying on source order. */
.stat::after {
    content: ""; position: absolute; top: -34px; right: -34px;
    width: 128px; height: 128px; border-radius: 34px;
    transform: rotate(18deg); opacity: .35; pointer-events: none;
    z-index: 0;
}
.stat__label, .stat__value, .stat__foot { position: relative; z-index: 1; }
.stat--blue::after    { background: var(--blue-100); }
.stat--amber::after   { background: var(--amber-100); }
.stat--emerald::after { background: var(--emerald-100); }
.stat--violet::after  { background: var(--violet-100); }
.stat--rose::after    { background: var(--rose-100); }
.stat__tile { z-index: 1; }

/* ---------------------------------------------------------------------
   6. Pills & badges
   --------------------------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    white-space: nowrap;
}
.pill--slate   { background: var(--slate-100);   color: var(--slate-700); }
.pill--blue    { background: var(--blue-100);    color: var(--blue-700); }
.pill--amber   { background: var(--amber-100);   color: var(--amber-700); }
.pill--violet  { background: var(--violet-100);  color: var(--violet-700); }
.pill--emerald { background: var(--emerald-100); color: var(--emerald-700); }
.pill--cyan    { background: var(--cyan-100);    color: var(--cyan-700); }
.pill--green   { background: var(--green-100);   color: var(--green-700); }
.pill--rose    { background: var(--rose-100);    color: var(--rose-700); }

.pill--dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}

.ref-badge {
    display: inline-grid; place-items: center;
    padding: 8px 12px; border-radius: var(--radius);
    background: var(--blue-50); color: var(--blue-700);
    font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.label {
    display: block; margin-bottom: 7px;
    font-size: 14px; font-weight: 600; color: var(--slate-700);
}
.label .req { color: var(--rose-600); margin-left: 2px; }

.input, .select, .textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit; font-size: 15px; color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease;
    appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px var(--blue-100);
}
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--slate-50); color: var(--slate-500); cursor: not-allowed; }

.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

.input--sm, .select--sm { padding: 7px 10px; font-size: 13.5px; }
.select--sm { padding-right: 30px; background-position: right 8px center; background-size: 16px; }

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
    border-color: var(--rose-600);
}
.input.is-invalid:focus { box-shadow: 0 0 0 3px var(--rose-100); }

.field__help  { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.field__error { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--rose-600); }

.input-prefix {
    display: flex; align-items: stretch;
    border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
    background: var(--surface); overflow: hidden;
}
.input-prefix:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.input-prefix__addon {
    display: grid; place-items: center; padding: 0 12px;
    background: var(--slate-50); border-right: 1px solid var(--slate-200);
    font-size: 14px; font-weight: 600; color: var(--slate-500);
}
.input-prefix__addon--suffix { border-right: 0; border-left: 1px solid var(--slate-200); }
.input-prefix .input { border: 0; box-shadow: none; border-radius: 0; }
.input-prefix .input:focus { box-shadow: none; }

.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }

.check {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--slate-700); cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 18px; height: 18px; margin: 1px 0 0; flex: none;
    accent-color: var(--primary); cursor: pointer;
}
.check span small { display: block; color: var(--text-muted); font-size: 13px; }

.radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.radio-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 15px; border: 1px solid var(--slate-300);
    border-radius: var(--radius); cursor: pointer; background: var(--surface);
    transition: border-color .12s ease, background .12s ease;
}
.radio-card:hover { border-color: var(--slate-400); }
.radio-card input { accent-color: var(--primary); margin-top: 2px; }
.radio-card:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); }
.radio-card strong { display: block; font-size: 14.5px; font-weight: 600; }
.radio-card small { color: var(--text-muted); font-size: 13px; }

.fieldset { border: 0; margin: 0 0 28px; padding: 0; }
.fieldset__legend {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--slate-400); margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); width: 100%;
}

/* Segmented control (measurement toggle) ------------------------------- */
.segmented {
    display: inline-flex; padding: 3px; gap: 3px;
    background: var(--slate-100); border-radius: 10px;
}
.segmented label {
    padding: 7px 15px; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: var(--slate-600);
    cursor: pointer; transition: background .12s, color .12s;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--slate-900); box-shadow: var(--shadow-xs); }

/* ---------------------------------------------------------------------
   8. Tables
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
    text-align: left; padding: 12px 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--slate-500); background: var(--slate-50);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--slate-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .shrink { width: 1%; white-space: nowrap; }
.table__link { font-weight: 700; color: var(--slate-900); }
.table__link:hover { color: var(--primary); }
.table__sub { display: block; font-size: 13px; color: var(--text-muted); }

.table--compact th, .table--compact td { padding: 9px 12px; font-size: 13.5px; }

/* ---------------------------------------------------------------------
   9. Order row (dashboard / list previews)
   --------------------------------------------------------------------- */
.order-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 24px; border-bottom: 1px solid var(--border-soft);
}
.order-row:last-child { border-bottom: 0; }
.order-row:hover { background: var(--slate-50); }
.order-row__main { flex: 1; min-width: 0; }
.order-row__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-row__title strong { font-size: 15.5px; font-weight: 700; color: var(--slate-900); }
.order-row__meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 5px; font-size: 13.5px; color: var(--text-muted);
}
.order-row__meta span { display: inline-flex; align-items: center; gap: 5px; }
.order-row__value { font-weight: 700; color: var(--emerald-600); }
.order-row__actions { display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------------
   10. Tabs, filters, pagination
   --------------------------------------------------------------------- */
.tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 4px; margin-bottom: 20px;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: var(--slate-600);
}
.tab:hover { background: var(--slate-50); color: var(--slate-900); }
.tab.is-active { background: var(--blue-600); color: #fff; }
.tab.is-active .tab__count { background: rgba(255, 255, 255, .25); color: #fff; }
.tab__count {
    min-width: 20px; padding: 1px 6px; border-radius: var(--radius-pill);
    background: var(--slate-100); color: var(--slate-600);
    font-size: 11.5px; font-weight: 700; text-align: center;
}

.filter-bar {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
    padding: 18px 20px; margin-bottom: 20px;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.filter-bar .field { margin: 0; }
.filter-bar__search { flex: 1; min-width: 220px; }
.filter-bar__actions { display: flex; gap: 8px; margin-left: auto; }

.search-input { position: relative; }
.search-input .icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--slate-400); pointer-events: none;
}
.search-input .input { padding-left: 38px; }

.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 20px;
}
.pagination__info { font-size: 14px; color: var(--text-muted); }
.pagination__links { display: flex; gap: 6px; }
.page-link {
    min-width: 38px; height: 38px; padding: 0 12px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--slate-600);
    font-size: 14px; font-weight: 600;
}
.page-link:hover { background: var(--slate-50); color: var(--slate-900); }
.page-link.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.page-link.is-disabled { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------------
   11. Alerts, empty states
   --------------------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; margin-bottom: 20px;
    border-radius: var(--radius); border: 1px solid transparent;
    font-size: 14.5px; line-height: 1.55;
}
.alert .icon { margin-top: 1px; }
.alert--success { background: var(--emerald-50); border-color: var(--emerald-100); color: var(--emerald-700); }
.alert--error   { background: var(--rose-50);    border-color: var(--rose-100);    color: var(--rose-700); }
.alert--info    { background: var(--blue-50);    border-color: var(--blue-100);    color: var(--blue-800); }
.alert--warning { background: var(--amber-50);   border-color: var(--amber-100);   color: var(--amber-700); }
.alert strong { font-weight: 700; }
.alert__close { margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 0; }
.alert__close:hover { opacity: 1; }

.flash-stack { position: sticky; top: 12px; z-index: 25; }

.empty {
    text-align: center; padding: 56px 24px;
}
.empty__icon {
    width: 62px; height: 62px; margin: 0 auto 18px;
    border-radius: 20px; background: var(--slate-100); color: var(--slate-400);
    display: grid; place-items: center;
}
.empty__icon .icon { width: 30px; height: 30px; }
.empty h3 { font-size: 17px; margin-bottom: 6px; }
.empty p { color: var(--text-muted); max-width: 30rem; margin: 0 auto 20px; }

/* ---------------------------------------------------------------------
   12. Wizard (new order)
   --------------------------------------------------------------------- */
.wizard-steps {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.wizard-step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border-soft);
    font-size: 14.5px; font-weight: 600; color: var(--slate-500);
    box-shadow: var(--shadow-xs); cursor: pointer;
}
.wizard-step__num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--slate-100); color: var(--slate-500);
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.wizard-step.is-active { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-700); }
.wizard-step.is-active .wizard-step__num { background: var(--blue-600); color: #fff; }
.wizard-step.is-done .wizard-step__num { background: var(--emerald-600); color: #fff; }
.wizard-step.is-done { color: var(--slate-700); }
.wizard-divider { flex: 1; height: 1px; background: var(--border); min-width: 12px; }

.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; }

.wizard-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid var(--border-soft);
}

/* Sticky pricing summary ---------------------------------------------- */
.price-bar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    margin: 24px -40px -56px;
    padding: 16px 40px;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
}
.price-bar__item { display: flex; flex-direction: column; gap: 2px; }
.price-bar__item span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.price-bar__item strong { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.price-bar__item--cost strong { color: var(--emerald-600); }
.price-bar__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   13. Line-item editor
   --------------------------------------------------------------------- */
.line-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 16px;
    overflow: hidden;
}
.line-item__head {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; background: var(--slate-50);
    border-bottom: 1px solid var(--border-soft);
}
.line-item__no {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--blue-600); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none;
}
.line-item__title { font-weight: 700; font-size: 15px; }
.line-item__summary { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--text-muted); }
.line-item__summary b { color: var(--slate-900); font-variant-numeric: tabular-nums; }
.line-item__body { padding: 18px; }

.line-item__toggle {
    background: none; border: 0; cursor: pointer; color: var(--slate-400);
    padding: 4px; border-radius: 6px; display: grid; place-items: center;
}
.line-item__toggle:hover { background: var(--slate-200); color: var(--slate-700); }
.line-item.is-collapsed .line-item__body { display: none; }
.line-item.is-collapsed .line-item__toggle .icon { transform: rotate(-90deg); }

.spec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.spec-grid .field { margin: 0; }

.repeat-row {
    display: grid; gap: 12px; align-items: end;
    padding: 14px; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.repeat-row .field { margin: 0; }
.repeat-row__remove { align-self: end; }

.add-row {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; width: 100%;
    border: 1px dashed var(--slate-300); border-radius: var(--radius);
    background: var(--slate-50); color: var(--slate-600);
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    cursor: pointer; justify-content: center;
}
.add-row:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-50); }

/* Sub-tabs inside the order form -------------------------------------- */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
.subtab {
    padding: 11px 16px; border: 0; background: none;
    font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--slate-500);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--slate-900); }
.subtab.is-active { color: var(--blue-700); border-bottom-color: var(--blue-600); }
.subtab__count {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: var(--radius-pill); background: var(--slate-100);
    font-size: 11.5px; font-weight: 700; color: var(--slate-600);
}
.subtab.is-active .subtab__count { background: var(--blue-100); color: var(--blue-700); }
.subpanel { display: none; }
.subpanel.is-active { display: block; }

/* ---------------------------------------------------------------------
   14. Order detail
   --------------------------------------------------------------------- */
/* Both tracks are min-width:0 so a wide table or a long customer name can
   never push one column over its neighbour. */
.detail-layout {
    display: grid; gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
}
.detail-layout > * { min-width: 0; }

.summary-list { display: grid; gap: 0; }
.summary-list__row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-soft);
    font-size: 14.5px;
}
.summary-list__row:last-child { border-bottom: 0; }
.summary-list__row dt { color: var(--text-muted); flex: none; }
.summary-list__row dd { margin: 0; font-weight: 600; text-align: right; color: var(--slate-900); }

.total-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 14px 0; font-size: 15px;
}
.total-row--grand { border-top: 2px solid var(--slate-200); font-size: 18px; font-weight: 800; }
.total-row--grand strong { color: var(--emerald-600); }

/* Message thread ------------------------------------------------------- */
.thread { display: flex; flex-direction: column; gap: 18px; }
.message { display: flex; gap: 12px; }
.message__body {
    flex: 1; min-width: 0;
    padding: 13px 16px; border-radius: var(--radius);
    background: var(--slate-50); border: 1px solid var(--border-soft);
}
.message__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.message__head strong { font-size: 14.5px; }
.message__head time { font-size: 12.5px; color: var(--text-subtle); }
.message__text { font-size: 14.5px; color: var(--slate-700); white-space: pre-wrap; word-break: break-word; }
.message--mine .message__body { background: var(--blue-50); border-color: var(--blue-100); }
.message--system .message__body {
    background: transparent; border: 0; border-left: 2px solid var(--slate-200);
    border-radius: 0; padding: 4px 0 4px 14px;
}
.message--system .message__text { font-size: 13.5px; color: var(--text-muted); font-style: italic; }
.message--internal .message__body { background: var(--amber-50); border-color: var(--amber-100); }

/* Timeline ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding-bottom: 18px; font-size: 14px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: ""; position: absolute; left: -24px; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--slate-300);
}
.timeline__item--current::before { border-color: var(--blue-600); background: var(--blue-600); }
.timeline__item strong { display: block; font-size: 14.5px; }
.timeline__item span { color: var(--text-muted); font-size: 13px; }

/* ---------------------------------------------------------------------
   15. Production board
   --------------------------------------------------------------------- */
.board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.board__col {
    flex: 0 0 300px; background: var(--slate-100);
    border-radius: var(--radius-lg); padding: 14px;
}
.board__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px; padding: 0 4px;
}
.board__head h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-600); }
.board__count {
    min-width: 22px; padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--surface); color: var(--slate-600);
    font-size: 12px; font-weight: 700; text-align: center;
}
.board-card {
    display: block; padding: 14px; margin-bottom: 10px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); border: 1px solid var(--border-soft);
}
.board-card:hover { box-shadow: var(--shadow); }
.board-card__ref { font-size: 13px; font-weight: 800; color: var(--blue-700); }
.board-card__customer { font-size: 14.5px; font-weight: 700; color: var(--slate-900); margin: 3px 0 6px; }
.board-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }

/* --- Production board drag and drop --------------------------------------
   The board works without JavaScript: cards are links and every rule below
   is either inert or purely decorative until production.js adds a class.
   ------------------------------------------------------------------------ */

/* The drop zone keeps a floor so an emptied column can still be dropped into. */
.board__drop { min-height: 64px; }

/* "Nothing here." is always in the markup and shows only while the column has
   no cards, so moving the last card out restores it with no extra scripting. */
.board__empty { display: none; padding: 18px 8px; margin: 0; }
.board__drop > .board__empty:only-child { display: block; }

.board-card { position: relative; padding-right: 34px; }

.board-card__grip {
    position: absolute; top: 10px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    color: var(--slate-300);
    /* Claims the gesture from the scroll container on touch devices. */
    touch-action: none;
}
.board-card:hover .board-card__grip { color: var(--slate-400); }

/* Only offered once the script is running — otherwise nothing is draggable. */
.js-board .board-card { cursor: grab; }
.js-board .board-card:active { cursor: grabbing; }

/* While a card is in the air. Selection is disabled so dragging across the
   board does not paint a text selection behind the card. */
.board.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.board.is-dragging .board-card { pointer-events: none; }

.board-card.is-source { opacity: .35; }

.board__col.is-valid {
    outline: 2px dashed var(--blue-200);
    outline-offset: -4px;
}
.board__col.is-invalid { opacity: .45; }
.board__col.is-over {
    background: var(--blue-50);
    outline: 2px solid var(--blue-500);
    outline-offset: -4px;
}

/* The card that follows the pointer. */
.board-ghost {
    position: fixed; z-index: 80; margin: 0;
    pointer-events: none;
    width: 272px;
    box-shadow: var(--shadow-lg);
    transform: rotate(1.5deg);
    opacity: .96;
}

/* A card mid-save, and one whose save failed and was put back. */
.board-card.is-saving { opacity: .6; }
@keyframes board-reject {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.board-card.is-rejected {
    animation: board-reject .3s ease;
    border-color: var(--rose-600);
}

/* Result toast. */
.board-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 90;
    transform: translateX(-50%);
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 18px; border-radius: var(--radius);
    background: var(--slate-900); color: #fff;
    font-size: 14px; font-weight: 600;
    box-shadow: var(--shadow-lg);
}
.board-toast--error { background: var(--rose-700); }

@media (prefers-reduced-motion: reduce) {
    .board-ghost { transform: none; }
    .board-card.is-rejected { animation: none; }
}

/* ---------------------------------------------------------------------
   16. Auth & installer pages
   --------------------------------------------------------------------- */
.auth-page {
    min-height: 100vh; display: grid; place-items: center;
    padding: 32px 20px;
    background: linear-gradient(160deg, #eef2ff 0%, #f6f7f9 45%, #f6f7f9 100%);
}
.auth-card {
    width: 100%; max-width: 430px;
    background: var(--surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); padding: 38px 36px;
}
.auth-card__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-card h1 { font-size: 23px; margin-bottom: 6px; }
.auth-card > p { color: var(--text-muted); margin-bottom: 26px; font-size: 15px; }
.auth-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--text-muted); }

.install-page { min-height: 100vh; padding: 40px 20px 72px; background: var(--page-bg); }
.install-shell { max-width: 780px; margin: 0 auto; }
.install-head { text-align: center; margin-bottom: 30px; }
.install-head h1 { font-size: 27px; margin-bottom: 8px; }
.install-head p { color: var(--text-muted); }

.check-list { display: grid; gap: 2px; }
.check-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px;
}
.check-row:last-child { border-bottom: 0; }
.check-row__state { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.check-row__state--ok   { background: var(--emerald-100); color: var(--emerald-700); }
.check-row__state--warn { background: var(--amber-100);   color: var(--amber-700); }
.check-row__state--bad  { background: var(--rose-100);    color: var(--rose-700); }
.check-row strong { flex: none; min-width: 210px; }
.check-row span { color: var(--text-muted); font-size: 13.5px; }

/* ---------------------------------------------------------------------
   17. Misc components
   --------------------------------------------------------------------- */
.inline-form { display: inline-flex; gap: 8px; align-items: center; }

.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    min-width: 210px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: none;
}
.dropdown.is-open .dropdown__menu { display: block; }
.dropdown__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
    background: none; font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--slate-700); text-align: left; cursor: pointer;
}
.dropdown__item:hover { background: var(--slate-50); color: var(--slate-900); }
.dropdown__item--danger { color: var(--rose-600); }
.dropdown__item--danger:hover { background: var(--rose-50); }
.dropdown__sep { height: 1px; background: var(--border-soft); margin: 5px 0; }

.callout {
    display: flex; gap: 14px; padding: 16px 18px;
    border-radius: var(--radius); background: var(--blue-50);
    border: 1px solid var(--blue-100); font-size: 14.5px; color: var(--blue-800);
}
.callout--amber { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-700); }
.callout--slate { background: var(--slate-50); border-color: var(--border); color: var(--slate-700); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 600; }

.legend-grid { display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); font-size: 13.5px; }
.legend-grid code { padding: 1px 6px; background: var(--slate-100); border-radius: 5px; font-weight: 700; }

/* ---------------------------------------------------------------------
   18. Utilities
   --------------------------------------------------------------------- */
.stack   { display: grid; gap: 24px; min-width: 0; }
.stack-sm { display: grid; gap: 12px; min-width: 0; }
.stack > *, .stack-sm > * { min-width: 0; }
.row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ml-auto { margin-left: auto; }
.mt-0 { margin-top: 0; }  .mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.pos-rel { position: relative; }
.text-emerald { color: var(--emerald-600); }
.text-rose { color: var(--rose-600); }
.text-blue { color: var(--blue-700); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--blue-700); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------------
   19. Responsive
   --------------------------------------------------------------------- */
/* Stack the side column sooner: below this the middle column gets too narrow
   for the order rows to stay readable. */
@media (max-width: 1280px) {
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1180px) {
    .content { padding: 28px 28px 52px; }
    .price-bar { margin: 24px -28px -52px; padding: 16px 28px; }
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);

        /* 100vh on a phone is the *tall* viewport — the height with the
           browser's bottom toolbar hidden. The drawer was therefore taller
           than the area actually on screen, and its footer, which holds Sign
           Out, sat underneath the toolbar. dvh tracks the visible area as that
           toolbar shows and hides; vh stays as the fallback for browsers that
           do not know it. */
        height: 100vh;
        height: 100dvh;
    }
    body.nav-open .sidebar { transform: translateX(0); }

    /* The account block moves directly under the brand on a phone.
       Signing out is then the second thing in the drawer rather than the
       last, so it never means scrolling to the bottom and racing a toolbar
       that appears as you do. The nav list takes the space below it. */
    .sidebar__scroll {
        order: 1;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .sidebar__footer {
        border-top: 0;
        border-bottom: 1px solid var(--border);
        padding: 4px 16px 14px;
    }
    /* Full width and still labelled — this is meant to be easier to hit, not
       cleverer. A 44px row is a comfortable thumb target. */
    .sidebar__footer .signout {
        min-height: 44px;
        background: var(--slate-50);
        font-weight: 600;
    }
    body.nav-open::after {
        content: ""; position: fixed; inset: 0; z-index: 35;
        background: rgba(15, 23, 42, .45);
    }
    .topbar { display: flex; }
    .content { padding: 22px 20px 48px; }
    .price-bar { margin: 20px -20px -48px; padding: 14px 20px; }
    .form-grid--3, .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    h1 { font-size: 25px; }
    .content { padding: 18px 14px 44px; }
    .price-bar { margin: 18px -14px -44px; padding: 12px 14px; gap: 16px; }
    .price-bar__actions { width: 100%; margin-left: 0; }
    .price-bar__actions .btn { flex: 1; }
    .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .span-2 { grid-column: span 1; }
    .stat-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
    .stat { padding: 20px; }
    .stat__value { font-size: 34px; }
    .card__head, .card__body { padding: 16px; }
    .order-row { padding: 14px 16px; flex-wrap: wrap; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1; }
    .filter-bar { padding: 14px; }
    .filter-bar__actions { margin-left: 0; width: 100%; }
    .board__col { flex-basis: 84vw; }
}

/* ---------------------------------------------------------------------
   20. Print (screen views; the print sheet has its own stylesheet)
   --------------------------------------------------------------------- */
@media print {
    .sidebar, .topbar, .page-head__actions, .filter-bar, .tabs,
    .price-bar, .btn, .flash-stack, .dropdown, .pagination { display: none !important; }
    .content { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #d5d9e0; break-inside: avoid; }
    body { background: #fff; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   19. Document review and acceptance
   --------------------------------------------------------------------- */

/* The dealer picker on the document form: a bounded, scrollable list so a
   long roster does not push the Save button off the screen. */
.dealer-picker {
    max-height: 320px; overflow-y: auto;
    display: grid; gap: 10px;
    padding: 12px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--slate-50);
}

/* --- The reviewable pane ------------------------------------------- */
.docreview { display: block; }

.docreview__body {
    max-height: 46vh;
    max-height: 46dvh;
    overflow-y: auto;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.docreview__body:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.docreview__summary {
    margin: 0 0 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 15px; font-weight: 600; color: var(--slate-700);
}

.docreview__text {
    margin: 0 0 16px;
    font: 14.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap; word-wrap: break-word;
    color: var(--slate-800);
}

.docreview__frame {
    display: block; width: 100%; height: 520px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--slate-100);
}

.docreview__hint, .docreview__file { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.docreview__hint .icon { vertical-align: -3px; }

.docreview__end {
    margin-top: 20px; padding: 14px 16px;
    border-radius: var(--radius); background: var(--blue-50);
    border: 1px solid var(--blue-100);
    font-size: 14.5px; color: var(--slate-800);
}
.docreview__end p { margin: 0; }

.docreview__gate {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 12px 0 0; padding: 10px;
    border-radius: var(--radius);
    background: var(--amber-50); color: var(--amber-700);
    font-size: 14px; font-weight: 600;
}

/* Accepting is the expected answer, so it is the whole width and the only
   thing on show. Declining is a real, recorded decision — reachable in one
   click, but folded away so it is never the accidental one. */
.docreview__actions { margin-top: 16px; }
.docreview__accept { margin: 0; }

.docreview__deny { margin-top: 14px; }
.docreview__deny > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 2px;
    font-size: 14px; font-weight: 600; color: var(--text-muted);
    text-decoration: underline; text-underline-offset: 3px;
}
.docreview__deny > summary::-webkit-details-marker { display: none; }
.docreview__deny > summary:hover { color: var(--rose-700); }
.docreview__deny[open] > summary { color: var(--rose-700); margin-bottom: 10px; }
.docreview__deny form {
    padding: 16px; border-radius: var(--radius);
    border: 1px solid var(--rose-100); background: var(--rose-50);
}

.docreview__previous { margin: 12px 0 0; }

@media (max-width: 720px) {
    .docreview__frame { height: 380px; }
}

/* --- The blocking modal -------------------------------------------- */
body.doc-locked { overflow: hidden; }

.doc-modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
}

.doc-modal__panel {
    width: 100%; max-width: 860px;
    /* vh is the tall viewport on a phone, which would put Accept and Decline
       behind the browser toolbar — and this modal has no other way out. */
    max-height: 92vh;
    max-height: 92dvh;
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding: 26px 28px 28px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.doc-modal__head { margin-bottom: 18px; }
.doc-modal__head h2 { margin: 10px 0 6px; font-size: 22px; color: var(--slate-900); }
.doc-modal__head p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

.doc-modal__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--amber-100); color: var(--amber-700);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}

/* Inside the modal the pane gets the height instead of the panel. */
.doc-modal .docreview__body { max-height: 42vh; max-height: 42dvh; }

@media (max-width: 720px) {
    .doc-modal { padding: 0; }
    .doc-modal__panel {
        max-width: none; border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
        padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

.nav-item__badge--rose { background: var(--rose-600); }

/* ---------------------------------------------------------------------
   20. Round-two additions: notices, pickers, blocked actions
   --------------------------------------------------------------------- */

/* A button that is present but refused, so the reason stays discoverable
   instead of the control simply vanishing. */
.btn.is-disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto;
    background: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-600);
    box-shadow: none;
}

/* Company heading inside the people picker. */
.picker-group {
    margin: 10px 0 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--slate-400);
}
.picker-group:first-child { margin-top: 0; }

/* Only one audience panel is relevant at a time; document-review.js swaps
   them. Both are visible with scripting off, which is a usable fallback. */
.js-audience [data-audience-panel] { display: none; }
.js-audience [data-audience-panel].is-shown { display: block; }

/* --- In-app notice modal ------------------------------------------- */
.doc-modal--notice { background: rgba(15, 23, 42, .48); }
.doc-modal__panel--sm { max-width: 520px; }
.doc-modal__badge--info { background: var(--blue-100); color: var(--blue-700); }

.notice-body {
    margin: 0 0 20px;
    font-size: 15.5px; line-height: 1.6; color: var(--slate-700);
}

.notice-actions {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   21. Resource library
   --------------------------------------------------------------------- */
.lib-heading {
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--slate-400);
    margin: 28px 0 12px;
}
.lib-heading:first-of-type { margin-top: 4px; }

.lib-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-bottom: 8px;
}

.lib-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.lib-card:hover { box-shadow: var(--shadow); }
.lib-card.is-retired { opacity: .6; }

/* The thumbnail. Images render themselves; everything else gets an icon on a
   tinted panel, which reads faster than a generic file glyph. */
.lib-card__thumb {
    position: relative; display: flex;
    align-items: center; justify-content: center;
    height: 150px; padding: 12px;
    background: var(--slate-50);
    border-bottom: 1px solid var(--border-soft);
    /* A transparent PNG or SVG logo needs something behind it. */
    background-image:
        linear-gradient(45deg, var(--slate-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--slate-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--slate-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--slate-100) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.lib-card__thumb img {
    max-width: 100%; max-height: 126px;
    object-fit: contain;
}
.lib-card__icon {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--radius);
    background: var(--blue-50); color: var(--blue-600);
}
.lib-card__ext {
    position: absolute; right: 10px; bottom: 10px;
    padding: 2px 8px; border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, .72); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}

.lib-card__body { flex: 1; padding: 14px 15px 10px; }
.lib-card__title {
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--slate-900); margin: 0 0 4px;
    overflow-wrap: anywhere;
}
.lib-card__desc {
    margin: 0 0 6px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card__meta { margin: 0; font-size: 12.5px; color: var(--text-subtle); }

.lib-card__acts {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 15px 14px;
}

/* The notice preview renders the modal in place rather than over the page. */
.doc-modal--inline {
    position: static; inset: auto; padding: 0;
    background: none; backdrop-filter: none;
    display: block;
}
.doc-modal--inline .doc-modal__panel {
    max-height: none; margin: 0 auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}