/* TSP Admin design tokens + components.
 * Loaded only on /admin pages from templates/admin/layout.html.
 * Based on the Linear/Stripe/Shopify/Vercel research — dense spreadsheet
 * rows, 36px inputs. Since 2026-07 the palette follows the "Work-First"
 * design system (SO-page redesign handoff): navy #161b2e rail, green
 * #0e7c64 primary, IBM Plex Sans/Mono type. */

/* ===== Fonts — IBM Plex (OFL), self-hosted from static/fonts/ =====
   Sans is the v23 VARIABLE font: one file covers wght 100-700.
   Mono ships as three static weights (400/500/600).
   Admin-only: this file never loads on the storefront (stays Inter). */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}

:root {
    /* surface hierarchy */
    --a-canvas:        #f2f4f3;   /* Work-First canvas (superseded #f4f4f4 owner pref, 2026-07-09) */
    --a-surface:       #ffffff;
    --a-surface-2:     #f1f5f8;   /* hovered row, nav hover */
    --a-surface-sunk:  #eef2f6;   /* filter bar, toolbar bg */

    /* text */
    --a-text:          #0f1f2c;
    --a-text-2:        #3b4a58;
    --a-muted:         #64748b;
    --a-subtle:        #94a3b8;

    /* borders */
    --a-border:        #e4e9ef;
    --a-border-strong: #cbd5e1;
    --a-divider:       #eef2f6;

    /* admin accent — deep teal */
    --a-accent:        #0d7a8a;
    --a-accent-hover:  #0a6472;
    --a-accent-tint:   #e6f4f6;
    --a-accent-ring:   rgba(13, 122, 138, 0.28);

    /* sidebar (dark rail) — Work-First navy */
    --a-nav-bg:        #161b2e;
    --a-nav-bg-2:      #1f2740;
    --a-nav-text:      #9aa3bd;
    --a-nav-text-dim:  #5c667f;
    --a-nav-active:    #ffffff;
    --a-nav-accent:    #22a380;   /* Work-First green accent (was tsp-green #94d60a) */

    /* ===== Work-First design tokens (SO-redesign handoff, 2026-07) =====
       Global so later phases + other pages reuse them. */
    --w-navy:          #161b2e;   /* rail / topbar */
    --w-navy-2:        #1f2740;   /* rail hover/active */
    --w-navy-btn:      #232b47;   /* Actions button */
    --w-green:         #0e7c64;   /* primary buttons / links */
    --w-green-deep:    #0a5f4d;   /* money text, chip text */
    --w-green-bright:  #22a380;   /* success solid, segment bars */
    --w-green-so:      #149a68;   /* SO quick-create pill */
    --w-green-tint:    #e4f2ee;   /* success chip bg */
    --w-green-tint-2:  #f4faf7;   /* rail card bg */
    --w-green-border:  #bfe0d6;
    --w-ink:           #1b2724;   /* primary text */
    --w-ink-2:         #33403b;   /* secondary */
    --w-ink-3:         #4b5a54;
    --w-ink-4:         #5a6661;
    --w-muted:         #8a938e;
    --w-muted-2:       #97a09b;
    --w-faint:         #aab1ad;
    --w-faint-2:       #c2cac5;
    --w-border:        #e4e8e6;   /* card border */
    --w-border-2:      #d8ded9;   /* input/box border */
    --w-divider:       #eef1ef;
    --w-canvas:        #f2f4f3;
    --w-row-band:      #fafbfb;   /* table header / add-row band */
    --w-amber:         #9a6a1f;   --w-amber-bg: #f9f0df;  --w-amber-border: #f0e3c6;
    --w-rose:          #a8434f;   --w-rose-2: #b06a72;    --w-rose-bg: #fdf1f2;   --w-rose-border: #f5d9dc;
    --w-violet:        #6f5fc7;   --w-violet-deep: #4f3fa3; --w-violet-bg: #f4f2fc; --w-violet-tint: #f1eefb; --w-violet-border: #e0daf5;
    --w-blue:          #3355b4;   --w-blue-2: #3f6fd6;    --w-blue-qt: #3565d4;   --w-blue-tint: #ecf1fb; --w-blue-badge: #e7ecfa;
    --w-purple-cu:     #7a55d6;
    --w-yellow:        #caa53a;   --w-yellow-bg: #fdfae9; --w-yellow-border: #ecdfae;
    --w-font-sans:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --w-font-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* semantic */
    --a-success:       #047857;  --a-success-tint: #dcfce7;
    --a-warn:          #b45309;  --a-warn-tint:    #fef3c7;
    --a-danger:        #b91c1c;  --a-danger-tint:  #fee2e2;
    --a-info:          #0369a1;  --a-info-tint:    #e0f2fe;
    --a-neutral-tint:  #e2e8f0;

    /* per-section accent (set per .admin-shell[data-section=...]).
       Fallback is the default teal so anything unscoped still reads. */
    --a-section-accent:       var(--a-accent);
    --a-section-accent-tint:  var(--a-accent-tint);
}

/* Per-section colors give each major nav area its own identity — the
   active sidebar rail, topbar stripe, and page-heading underline pick
   this up so you can tell at a glance what screen you're on. */
.admin-shell[data-section="dashboard"]  { --a-section-accent: #0d7a8a; --a-section-accent-tint: #e6f4f6; }
.admin-shell[data-section="orders"]     { --a-section-accent: #4f46e5; --a-section-accent-tint: #eef2ff; }
.admin-shell[data-section="proofs"]     { --a-section-accent: #d97706; --a-section-accent-tint: #fef3c7; }
.admin-shell[data-section="customers"]  { --a-section-accent: #7c3aed; --a-section-accent-tint: #f3e8ff; }
.admin-shell[data-section="jobs"]       { --a-section-accent: #ea580c; --a-section-accent-tint: #ffedd5; }
.admin-shell[data-section="products"]   { --a-section-accent: #059669; --a-section-accent-tint: #d1fae5; }
.admin-shell[data-section="pricing"]    { --a-section-accent: #db2777; --a-section-accent-tint: #fce7f3; }
.admin-shell[data-section="workflow"]   { --a-section-accent: #8b5cf6; --a-section-accent-tint: #ede9fe; }
.admin-shell[data-section="webhooks"]   { --a-section-accent: #14b8a6; --a-section-accent-tint: #ccfbf1; }
.admin-shell[data-section="system"]     { --a-section-accent: #0891b2; --a-section-accent-tint: #cffafe; }
.admin-shell[data-section="audit"]      { --a-section-accent: #475569; --a-section-accent-tint: #e2e8f0; }

body.admin-body {
    background: var(--a-canvas);
    color: var(--a-text);
    font-family: var(--w-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    font-size: 13px;
    line-height: 1.45;
}

/* ===== Shell ===== */
.admin-shell        { min-height: 100vh; display: grid; grid-template-columns: 206px 1fr; }
.admin-shell.is-collapsed { grid-template-columns: 64px 1fr; }
@media (max-width: 900px) {
    .admin-shell, .admin-shell.is-collapsed { grid-template-columns: 64px 1fr; }
    .admin-nav .admin-nav-label { display: none; }
    .admin-nav .admin-nav-section { display: none; }
}

.admin-nav {
    background: var(--a-nav-bg);
    color: var(--a-nav-text);
    display: flex; flex-direction: column;
    padding: 14px 10px 20px;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}
.admin-nav-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px;
    color: var(--a-nav-active);
    text-decoration: none;
}
.admin-nav-brand-badge {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--a-nav-accent); color: var(--a-nav-bg);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px;
    flex-shrink: 0;
}
.admin-nav-brand-text {
    font-weight: 700; font-size: 14px;
    letter-spacing: -0.01em;
}
/* The real TSP logo PNG — 400×96, clean white-on-transparent on the
   dark sidebar. Scales to whatever the sidebar width can afford. */
.admin-nav-brand-logo {
    max-width: 100%;
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* force white on dark rail */
}
.admin-shell.is-collapsed .admin-nav-brand-logo {
    height: 28px;
}

/* Sidebar collapse toggle — positioned at the right edge of the
   nav rail so it stays reachable in both expanded and collapsed states.
   The chevron icon flips direction via inline style. */
.admin-nav-collapse-btn {
    position: absolute;
    top: 14px;
    right: 6px;
    z-index: 5;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.admin-nav-collapse-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.admin-shell.is-collapsed .admin-nav-collapse-btn {
    /* Collapsed state — center the chevron in the narrow rail. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 8px;
}
/* Hide all label text when collapsed; show titles on hover via the
   native `title=` attribute the buttons + links already carry. */
.admin-shell.is-collapsed .admin-nav-label,
.admin-shell.is-collapsed .admin-nav-section,
.admin-shell.is-collapsed .admin-nav-quicknew {
    display: none;
}
.admin-shell.is-collapsed .admin-nav {
    padding: 30px 4px 20px;
}
.admin-shell.is-collapsed .admin-nav-brand {
    justify-content: center;
    padding: 28px 4px 14px;
}
.admin-shell.is-collapsed .admin-nav-item {
    justify-content: center;
    padding: 10px 4px;
}

/* ===== Mobile nav drawer (≤640px) =====================================
   On phones the icon rail eats ~16% of the screen. Below 640px it becomes
   an off-canvas drawer toggled by the topbar hamburger, giving content the
   full width. Desktop/tablet keep the sticky rail untouched. The nav is
   position:fixed here (not sticky), so the ≤640px overflow-x:hidden safety
   net can't affect it. */
.admin-nav-hamburger {
    display: none;   /* shown only ≤640px */
    order: -2;       /* leftmost item — the conventional menu position */
    align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 2px; flex-shrink: 0;
    /* The topbar background is dark (--a-nav-bg), so the icon MUST be light —
       #fff here (var(--a-text) was dark → invisible dark-on-dark). */
    background: none; border: none; color: #fff;
    cursor: pointer; border-radius: 8px;
}
.admin-nav-hamburger:hover { background: rgba(255, 255, 255, 0.12); }
.admin-nav-backdrop { display: none; }

@media (max-width: 640px) {
    /* Content spans the full width; a stray-wide child can't jiggle the page. */
    .admin-shell, .admin-shell.is-collapsed {
        grid-template-columns: 1fr;
        overflow-x: hidden;
    }
    /* Off-canvas drawer — full labels (a real menu now, not a rail). */
    .admin-nav {
        position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
        width: 240px; max-width: 84vw; padding: 14px 10px 20px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
    }
    .admin-shell.nav-open .admin-nav { transform: translateX(0); }
    /* Re-show the labels the 900px rail hid — it's a full drawer at this size.
       The `.is-collapsed` selectors are needed too: if the desktop rail was
       left collapsed (localStorage), those higher-specificity rules would
       otherwise keep the drawer's items centered + label-less. */
    /* Scope to .admin-nav ONLY — NOT the bare .admin-nav-quicknew, which also
       matches the TOPBAR's SO/QT/CU quick-new group and would collapse it. */
    .admin-shell .admin-nav .admin-nav-label,
    .admin-shell .admin-nav .admin-nav-section,
    .admin-shell.is-collapsed .admin-nav .admin-nav-label,
    .admin-shell.is-collapsed .admin-nav .admin-nav-section { display: block; }
    .admin-shell .admin-nav-item,
    .admin-shell.is-collapsed .admin-nav-item { justify-content: flex-start; padding: 10px 12px; }
    .admin-shell.is-collapsed .admin-nav { padding: 14px 10px 20px; }
    .admin-shell.is-collapsed .admin-nav-brand { justify-content: flex-start; padding: 6px 10px 18px; }
    .admin-nav-collapse-btn { display: none; }   /* collapse toggle is N/A on mobile */
    .admin-nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 199;
        background: rgba(15, 23, 42, 0.5);
    }
    .admin-nav-hamburger { display: inline-flex; }
}

/* --- Global search (top of sidebar) ---------------------------------- */
.admin-nav-search {
    position: relative;
    padding: 4px 8px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
}
.admin-nav-search-wrap {
    position: relative;
    display: flex; align-items: center;
}
.admin-nav-search-icon {
    position: absolute;
    left: 8px;
    color: var(--a-nav-text-dim);
    pointer-events: none;
}
.admin-nav-search-input {
    flex: 1;
    height: 30px;
    padding: 0 26px 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--a-nav-text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
}
.admin-nav-search-input::placeholder {
    color: var(--a-nav-text-dim);
}
.admin-nav-search-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--a-nav-accent);
}
.admin-nav-search-clear {
    position: absolute;
    right: 4px;
    top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    border: none; background: transparent;
    color: var(--a-nav-text-dim);
    font-size: 18px; line-height: 1;
    cursor: pointer; border-radius: 4px;
}
.admin-nav-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--a-nav-text);
}
/* Teleported to <body>, so position is `fixed` (relative to viewport) and
   coordinates are bound inline by Alpine via :style. Width is fixed so
   the popup lays out predictably regardless of where it's rendered. */
.admin-nav-search-results {
    position: fixed;
    width: 567px;
    background: #fff;
    border: 1px solid var(--a-border-strong);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px;
}
/* Sectioned dropdown — one block per entity type with its own header,
   3 result rows, then a "View all" footer link. */
.admin-nav-search-section {
    border-bottom: 1px solid var(--a-divider);
    padding: 6px 0 4px 0;
}
.admin-nav-search-section:last-of-type { border-bottom: none; }
.admin-nav-search-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 10px;
    margin-bottom: 2px;
}
.admin-nav-search-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--a-muted);
}
.admin-nav-search-section-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--a-text-2);
    background: var(--a-neutral-tint);
    padding: 1px 7px;
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
}
.admin-nav-search-result {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--a-text);
    font-size: 12px;
    line-height: 1.3;
    margin: 0 4px;
}
.admin-nav-search-result.is-hover,
.admin-nav-search-result:hover {
    background: var(--a-accent-tint);
}
.admin-nav-search-label {
    font-weight: 600;
    color: var(--a-text);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.admin-nav-search-subtitle {
    color: var(--a-muted);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.admin-nav-search-viewall {
    display: block;
    padding: 5px 10px;
    margin: 0 4px;
    font-size: 11px;
    color: var(--a-accent);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}
.admin-nav-search-viewall:hover {
    background: var(--a-accent-tint);
    text-decoration: underline;
}
.admin-nav-search-allresults {
    display: block;
    padding: 8px 10px;
    margin: 4px 4px 0 4px;
    background: var(--a-canvas);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--a-accent);
    text-align: center;
    text-decoration: none;
}
.admin-nav-search-allresults:hover {
    background: var(--a-accent-tint);
}
.admin-nav-search-empty {
    padding: 4px;
}
/* Hide search input label when sidebar collapsed; icon stays as a click
   target that re-expands focus. */
.admin-shell.is-collapsed .admin-nav-search-input {
    padding-left: 8px;
    padding-right: 8px;
    text-indent: -9999px;
}
.admin-shell.is-collapsed .admin-nav-search-icon { display: none; }
.admin-shell.is-collapsed .admin-nav-search-clear { display: none; }

/* --- Quick-new sidebar buttons + Shopvox-style modals ---------------- */
.admin-nav-quicknew {
    padding: 0 8px;
    margin-bottom: 12px;
}
.admin-nav-quick-row {
    display: flex; gap: 4px;
}
.admin-nav-quick {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 6px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
    transition: filter 0.12s, transform 0.06s;
    min-width: 0;
}
.admin-nav-quick svg { flex-shrink: 0; }
.admin-nav-quick-label { white-space: nowrap; }
.admin-nav-quick-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: 12px; font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}
.admin-nav-quick:hover .admin-nav-quick-plus { background: rgba(255,255,255,0.4); }
.admin-nav-quick:hover { filter: brightness(1.12); }
.admin-nav-quick:active { transform: translateY(1px); }
.admin-nav-quick-so { background: var(--w-green-so); }    /* green — sales order */
.admin-nav-quick-qt { background: var(--w-blue-qt); }     /* blue — quote */
.admin-nav-quick-cu { background: var(--w-purple-cu); }   /* violet — customer */
.admin-shell.is-collapsed .admin-nav-quick .admin-nav-quick-label { display: none; }
.admin-shell.is-collapsed .admin-nav-quick { padding: 6px 2px; }

/* Modal overlay + card (teleported to <body>, so stands alone) */
.quick-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 60px 16px 80px 16px;  /* bottom 80px clears sticky footers / AI chat */
    z-index: 100;
    /* No overflow-y here — scroll happens INSIDE .quick-modal so the
       visible scrollbar makes the affordance obvious AND the bottom
       of the modal can't slide behind any fixed UI (AI chat box, etc).
       The overlay just centers the modal + dims the background. */
}
[x-cloak] { display: none !important; }
.quick-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 520px;
    /* Cap to viewport minus the overlay padding (60 top + 80 bottom)
       so the modal never extends past the visible area. Internal
       scrolling lives on .quick-modal-form below. */
    max-height: calc(100vh - 140px);
    display: flex; flex-direction: column;
}
.quick-modal-form {
    padding: 20px 24px 20px 24px;
    /* The form is the scrollable region — header (close X + title)
       and any footer action row will stay visible while the body
       scrolls. Visible scrollbar gives staff an obvious "more
       below" affordance. */
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}
.quick-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.quick-modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
.quick-modal-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: #64748b;
    padding: 4px 10px; border-radius: 4px;
}
.quick-modal-close:hover { background: #f1f5f9; color: #0f172a; }
.quick-modal-subtitle {
    font-size: 13px; color: #64748b;
    margin: 0 0 18px 0;
}
.quick-modal-hint {
    font-size: 11.5px; color: #94a3b8;
    margin: 4px 0 0 0;
}
.quick-modal-hint a { color: var(--a-accent, #0ea5e9); text-decoration: underline; }
.quick-modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

/* Quick-new modal: customer typeahead + contact picker (Shopvox-style) */
.qn-combo { position: relative; }
.qn-combo-input { width: 100%; }
.qn-combo-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--a-border-strong, #cbd5e1);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    max-height: 240px; overflow-y: auto;
    z-index: 120;
    padding: 4px;
}
.qn-combo-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}
.qn-combo-opt.is-highlight, .qn-combo-opt:hover {
    background: var(--a-section-accent-tint, #f1f5f9);
}
.qn-combo-create {
    border-top: 1px dashed #cbd5e1;
    color: #16a34a;
    font-weight: 600;
}

.qn-inline-create {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}

.qn-contact-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 180px; overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 4px;
}
.qn-contact-opt {
    display: flex; align-items: flex-start;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.qn-contact-opt:hover { background: #f8fafc; }
.qn-contact-opt.is-selected {
    background: #ede9fe;
    outline: 1px solid #a78bfa;
}
.qn-contact-default {
    padding: 1px 6px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 10px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
}
.qn-contact-add {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    font-size: 13px; font-weight: 600;
    color: #16a34a;
    background: transparent;
    border: 1px dashed #bbf7d0;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 4px;
}
.qn-contact-add:hover { background: #f0fdf4; }

/* --- Page header row: inline page heading + primary action buttons --- */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.admin-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 2px;
}
@media (max-width: 640px) {
    .admin-page-header { flex-direction: column; align-items: stretch; }
    .admin-page-actions { justify-content: flex-end; }
}

.admin-topbar-context {
    display: flex; align-items: center; gap: 10px;
    color: var(--a-text-2);
    font-size: 13px;
}

.admin-nav-section {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--a-nav-text-dim);
    padding: 18px 12px 6px;
}

.admin-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 500;
    color: var(--a-nav-text);
    text-decoration: none;
    position: relative;
    transition: background 0.12s, color 0.12s;
}
.admin-nav-item:hover {
    background: var(--a-nav-bg-2);
    color: var(--a-nav-active);
}
.admin-nav-item.is-active {
    background: var(--a-nav-bg-2);
    color: var(--a-nav-active);
    font-weight: 600;
}
.admin-nav-item.is-active::before {
    content: '';
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--nav-dot, var(--a-nav-accent));
}

/* Per-nav-item tints — icon always picks up its section color so the
   sidebar is scannable even when nothing's active. Bright/pastel shades
   because the rail bg is near-black. */
.admin-nav-item[data-section="dashboard"]  { --nav-dot: #5eead4; }  /* teal-300 */
.admin-nav-item[data-section="orders"]     { --nav-dot: #a5b4fc; }  /* indigo-300 */
.admin-nav-item[data-section="proofs"]     { --nav-dot: #fbbf24; }  /* amber-400 */
.admin-nav-item[data-section="customers"]  { --nav-dot: #c4b5fd; }  /* purple-300 */
.admin-nav-item[data-section="jobs"]       { --nav-dot: #fb923c; }  /* orange-400 */
.admin-nav-item[data-section="products"]   { --nav-dot: #34d399; }  /* emerald-400 */
.admin-nav-item[data-section="pricing"]    { --nav-dot: #f9a8d4; }  /* pink-300 */
.admin-nav-item[data-section="workflow"]   { --nav-dot: #a78bfa; }  /* violet-400 */
.admin-nav-item[data-section="webhooks"]   { --nav-dot: #5eead4; }  /* teal-300 */
.admin-nav-item[data-section="system"]     { --nav-dot: #67e8f9; }  /* cyan-300 */
.admin-nav-item[data-section="audit"]      { --nav-dot: #cbd5e1; }  /* slate-300 */
.admin-nav-item[data-section] .admin-nav-item-icon {
    color: var(--nav-dot, var(--a-nav-text));
}
/* When active, the icon stays in its section color but the label pops white. */
.admin-nav-item.is-active .admin-nav-item-icon { color: var(--nav-dot); }
.admin-nav-item-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    stroke: currentColor; stroke-width: 1.75;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.admin-nav-item-count {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    padding: 1px 6px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--a-nav-text-dim);
}

.admin-topbar {
    height: 56px;
    background: var(--a-nav-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding: 0 20px;
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 20;
    /* Thin section-accent stripe along the bottom edge so each page still
       carries its colour signal even with the dark bar overhead. */
    box-shadow: inset 0 -2px 0 var(--a-section-accent);
}
.admin-topbar-crumbs { font-size: 13px; color: var(--a-nav-text-dim); white-space: nowrap; }
.admin-topbar-crumbs a { color: var(--a-nav-text); }
.admin-topbar-crumbs a:hover { color: #fff; }
.admin-topbar-crumbs .sep { margin: 0 8px; color: var(--a-nav-text-dim); }
.admin-topbar-crumbs .current { color: #fff; font-weight: 600; }

/* --- Topbar-mounted global search ------------------------------------- */
/* Lives between the quick-new buttons (left) and the page-actions /
   spacer block (right). Flex-flow rather than absolute positioning so
   it scales with viewport width — on narrow screens (tablets, small
   laptops) it shrinks naturally instead of overlapping the buttons.
   The inner JS / Alpine wiring is unchanged. */
.admin-topbar .admin-nav-search {
    flex: 1 1 auto;
    max-width: 520px;
    min-width: 0;       /* let it shrink past content baseline */
    margin: 0 12px;
    padding: 0;
    border-bottom: none;
}
.admin-topbar .admin-nav-search-wrap { width: 100%; }
.admin-topbar .admin-nav-search-input {
    height: 38px;
    font-size: 14px;
    padding: 0 32px 0 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.admin-topbar .admin-nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
.admin-topbar .admin-nav-search-input:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}
.admin-topbar .admin-nav-search-input:focus {
    background: #fff;
    color: var(--a-text);
    border-color: var(--a-accent);
    box-shadow: 0 0 0 3px var(--a-accent-ring);
}
.admin-topbar .admin-nav-search-input:focus::placeholder {
    color: var(--a-muted);
}
.admin-topbar .admin-nav-search-icon {
    left: 12px;
    color: rgba(255, 255, 255, 0.85);
    width: 16px; height: 16px;
}
.admin-topbar .admin-nav-search-input:focus ~ .admin-nav-search-icon {
    color: var(--a-muted);
}
.admin-topbar .admin-nav-search-clear {
    right: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 22px;
}
.admin-topbar .admin-nav-search-clear:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}
/* --- Topbar-mounted quick-new buttons (far left) ---------------------- */
.admin-topbar .admin-nav-quicknew {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    /* Sits ahead of the absolute-centered search in stacking order so its
       buttons remain clickable if the layouts ever overlap on a narrow vp. */
    position: relative;
    z-index: 2;
}
.admin-topbar .admin-nav-quick-row { gap: 6px; }
.admin-topbar .admin-nav-quick {
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    gap: 6px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.admin-topbar .admin-nav-quick-label {
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* --- Topbar context + secondary text colours on the dark bar ---------- */
.admin-topbar .admin-topbar-context {
    color: rgba(255, 255, 255, 0.78);
}
.admin-topbar .admin-topbar-context a { color: #fff; }

/* Vertical divider after the crumbs, before the primary action group. */
.admin-topbar-crumbs + .admin-topbar-newgroup::before {
    content: ''; width: 1px; height: 20px;
    background: var(--a-border);
    margin-right: 4px;
}

/* Primary action cluster — always top-left, right after the crumbs.
   Uses small buttons so the topbar stays at 52px. */
.admin-topbar-newgroup {
    display: flex; align-items: center; gap: 6px;
}
.admin-topbar-spacer { flex: 1; }
.admin-topbar-secondary {
    display: flex; align-items: center; gap: 8px;
}

/* Leading icon inside admin-btn (the "+" used by the New-group). */
.admin-btn-icon {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* On narrow viewports the button labels collapse to keep the bar tidy. */
@media (max-width: 1100px) {
    .admin-topbar-newgroup .admin-btn { padding: 0 8px; }
    .admin-topbar-newgroup .admin-btn > :not(.admin-btn-icon) { display: none; }
}

.admin-main { min-width: 0; }
.admin-content {
    max-width: 1440px;
    padding: 20px 24px 48px;
}

/* ===== Typography ===== */
.admin-h-page   {
    font-size: 20px; font-weight: 700; color: var(--a-text); letter-spacing: -0.015em;
    padding-left: 10px;
    border-left: 3px solid var(--a-section-accent);
}
.admin-h-major  {
    font-size: 26px; font-weight: 800; color: var(--a-text); letter-spacing: -0.02em;
    padding-left: 12px;
    border-left: 4px solid var(--a-section-accent);
}
.admin-h-section{ font-size: 15px; font-weight: 700; color: var(--a-text); letter-spacing: -0.01em; }
.admin-muted    { color: var(--a-muted); }
.admin-text-xs  { font-size: 11px; font-weight: 500; }
.admin-text-sm  { font-size: 13px; font-weight: 500; }
.admin-label    { font-size: 12px; font-weight: 600; color: var(--a-text-2); margin-bottom: 6px; display: block; letter-spacing: 0; }

/* ===== Buttons ===== */
.admin-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px;
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.admin-btn:disabled, .admin-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.admin-btn-primary   { background: var(--a-accent); color: #fff; }
.admin-btn-primary:hover { background: var(--a-accent-hover); color: #fff; }
.admin-btn-secondary { background: var(--a-surface); color: var(--a-text); border-color: var(--a-border-strong); }
.admin-btn-secondary:hover { background: var(--a-surface-2); }
.admin-btn-ghost     { background: transparent; color: var(--a-text-2); }
.admin-btn-ghost:hover { background: var(--a-surface-2); color: var(--a-text); }
.admin-btn-danger    { background: var(--a-danger); color: #fff; }
.admin-btn-danger:hover { background: #991b1b; color: #fff; }
.admin-btn-sm        { height: 28px; padding: 0 10px; font-size: 12px; }
.admin-btn-lg        { height: 40px; padding: 0 18px; font-size: 14px; }

/* ===== Inputs ===== */
.admin-input, .admin-select, .admin-textarea {
    width: 100%;
    height: 36px; padding: 0 10px;
    font-size: 13px; font-family: inherit;
    color: var(--a-text);
    background: var(--a-surface);
    border: 1px solid var(--a-border-strong);
    border-radius: 6px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.admin-textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.admin-input:focus, .admin-select:focus, .admin-textarea:focus {
    outline: none;
    border-color: var(--a-accent);
    box-shadow: 0 0 0 3px var(--a-accent-ring);
}
.admin-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230f1f2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.admin-checkbox { accent-color: var(--a-accent); }

/* Hide native up/down spinner arrows on every number input in admin —
   staff don't click them, and they crowd narrow fields like Qty / Unit $.
   Typing the value (with auto-select on focus) is the only flow we use. */
.admin-body input[type="number"] {
    -moz-appearance: textfield;          /* Firefox */
    appearance: textfield;
}
.admin-body input[type="number"]::-webkit-outer-spin-button,
.admin-body input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;            /* Chrome / Safari / Edge */
    appearance: none;
    margin: 0;
}

/* ===== Cards =====
   Subtle drop shadow on every white-on-grey card — mirrors the look of
   the storefront (.card-tsp on shop.thesignpad.com) so admin + storefront
   feel like the same product. The shadow is intentionally tiny: a
   1px-soft separation that lifts the card off the page background
   without competing with the content inside. Cards on dark/blue
   backgrounds (proof viewer, fullscreen job board, etc.) override
   to no-shadow inline since the lift effect doesn't apply there. */
.admin-card {
    background: var(--a-surface);
    border: 1px solid var(--a-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
}
.admin-card-elevated {
    background: var(--a-surface);
    border: 1px solid var(--a-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
}
.admin-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--a-divider);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.admin-card-body  { padding: 20px; }
.admin-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--a-divider);
    background: var(--a-surface-2);
    border-radius: 0 0 10px 10px;
    font-size: 12px; color: var(--a-muted);
}

/* ===== Tables ===== */
.admin-table {
    width: 100%;
    font-size: 13px;
    background: var(--a-surface);
    border-collapse: collapse;
}
.admin-table thead th {
    height: 36px; padding: 0 14px;
    text-align: left;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--a-muted);
    background: var(--a-surface-sunk);
    border-bottom: 1px solid var(--a-border);
    white-space: nowrap;
}
.admin-table tbody td {
    height: 40px; padding: 0 14px;
    border-bottom: 1px solid var(--a-divider);
    color: var(--a-text); vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--a-surface-2); cursor: pointer; }
.admin-table tbody tr:last-child td { border-bottom: none; }

/* Status rail — the row's first cell gets a 3px left border keyed to the
   status color (Printavo / Shopify pattern). Eye scans the rail column,
   not the badge column. Combined with the dot badge it's a two-layer
   signal that reads before any text. */
.admin-table tr[data-status] > td:first-of-type {
    position: relative;
    box-shadow: inset 3px 0 0 0 var(--status-rail, transparent);
}
.admin-table tr[data-status="pending"]         { --status-rail: #94a3b8; }
.admin-table tr[data-status="in_proof"]        { --status-rail: #6d28d9; }
.admin-table tr[data-status="approved"]        { --status-rail: #047857; }
.admin-table tr[data-status="in_production"]   { --status-rail: #b45309; }
.admin-table tr[data-status="qc"]              { --status-rail: #0e7490; }
.admin-table tr[data-status="completed"]       { --status-rail: #047857; }
.admin-table tr[data-status="held"]            { --status-rail: #b91c1c; }
.admin-table tr[data-status="cancelled"]       { --status-rail: #cbd5e1; }
.admin-table tr[data-status="archived"]        { --status-rail: #cbd5e1; }

/* Inline source pill used in the Order # cell in the orders list.
   Replaces a full "Src" column (shopVOX pattern). */
.admin-src-pill {
    display: inline-block; min-width: 30px; text-align: center;
    padding: 1px 5px; margin-right: 8px;
    font-family: var(--w-font-mono);
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    border-radius: 3px; vertical-align: 1px;
}
.admin-src-pill.is-web     { background: #dbeafe; color: #1d4ed8; }
.admin-src-pill.is-sales   { background: #ede9fe; color: #6d28d9; }
.admin-src-pill.is-quote   { background: #fef3c7; color: #92400e; }
.admin-src-pill.is-invoice { background: #d1fae5; color: #065f46; }
.admin-table a { color: var(--a-text); text-decoration: none; }
.admin-table a:hover { color: var(--a-accent); }
.admin-table .col-right  { text-align: right; }
.admin-table .col-muted  { color: var(--a-muted); }
.admin-table .col-mono   { font-family: var(--w-font-mono); font-size: 12px; }

/* ===== Badges ===== */
.admin-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 8px;
    border-radius: 4px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
}
.admin-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.admin-badge.no-dot::before { display: none; }
/* Simplified status model (Lyle 2026-06-12): invoiced green, open blue,
   hold amber, cancelled red — easy scan on the orders list. */
.admin-badge-status-open          { background: var(--a-info-tint); color: var(--a-info); }
.admin-badge-status-invoiced      { background: var(--a-success-tint); color: var(--a-success); }
.admin-badge-status-hold          { background: var(--a-warn-tint); color: var(--a-warn); }
.admin-badge-status-pending       { background: var(--a-neutral-tint); color: #475569; }
.admin-badge-status-in_proof      { background: #ede9fe; color: #6d28d9; }
.admin-badge-status-approved      { background: var(--a-success-tint); color: var(--a-success); }
.admin-badge-status-in_production { background: var(--a-warn-tint); color: var(--a-warn); }
.admin-badge-status-qc            { background: #cffafe; color: #0e7490; }
.admin-badge-status-completed     { background: var(--a-success-tint); color: var(--a-success); }
.admin-badge-status-held          { background: var(--a-danger-tint); color: var(--a-danger); }
.admin-badge-status-cancelled     { background: var(--a-danger-tint); color: var(--a-danger); }
.admin-badge-status-archived      { background: var(--a-neutral-tint); color: var(--a-subtle); }
.admin-badge-status-draft         { background: var(--a-neutral-tint); color: #475569; }
.admin-badge-status-sent          { background: var(--a-info-tint); color: var(--a-info); }
.admin-badge-status-changes_requested { background: var(--a-warn-tint); color: var(--a-warn); }

/* ===== Filter disclosure (<details>) ===== */
.admin-filter-disclosure { margin-bottom: 14px; }
.admin-filter-disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 4px;
    user-select: none;
}
.admin-filter-disclosure > summary::-webkit-details-marker { display: none; }
.admin-filter-disclosure > summary::before {
    content: '▸';
    font-size: 10px; color: var(--a-muted);
    transition: transform 0.12s;
    display: inline-block;
}
.admin-filter-disclosure[open] > summary::before { transform: rotate(90deg); }
.admin-filter-disclosure > summary:hover { background: var(--a-surface-2); }

/* ===== Filter chips ===== */
.admin-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border-radius: 14px;
    font-size: 12px; font-weight: 500;
    background: var(--a-surface);
    border: 1px solid var(--a-border-strong);
    color: var(--a-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-filter-chip:hover { border-color: var(--a-accent); color: var(--a-accent); }
.admin-filter-chip.is-active {
    background: var(--a-accent-tint);
    border-color: var(--a-accent);
    color: var(--a-accent);
}
.admin-filter-chip-count {
    font-size: 11px; font-weight: 700;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    margin-left: 2px;
}
.admin-filter-chip.is-active .admin-filter-chip-count {
    background: rgba(13, 122, 138, 0.15);
}

/* ===== Toolbars ===== */
.admin-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--a-surface-sunk);
    border: 1px solid var(--a-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.admin-toolbar + .admin-card,
.admin-toolbar + .admin-table-wrap {
    border-top-left-radius: 0; border-top-right-radius: 0;
}

/* ===== Empty states ===== */
.admin-empty-state {
    text-align: center; padding: 48px 24px;
    color: var(--a-muted);
}
.admin-empty-state h3 {
    font-size: 15px; font-weight: 700;
    color: var(--a-text); margin-bottom: 6px;
}
.admin-empty-state p { font-size: 13px; max-width: 36ch; margin: 0 auto; }

/* ===== Flash / toasts ===== */
.admin-flash {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid;
}
.admin-flash-success { background: var(--a-success-tint); color: var(--a-success); border-color: #86efac; }
.admin-flash-error   { background: var(--a-danger-tint);  color: var(--a-danger);  border-color: #fca5a5; }
.admin-flash-info    { background: var(--a-info-tint);    color: var(--a-info);    border-color: #7dd3fc; }
.admin-flash-warn    { background: var(--a-warn-tint);    color: var(--a-warn);    border-color: #fcd34d; }

/* ===== Description lists ===== */
.admin-dl {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 2fr;
    gap: 0;
    font-size: 13px;
    margin: 0;
}
.admin-dl dt {
    padding: 8px 0;
    color: var(--a-muted);
    border-bottom: 1px solid var(--a-divider);
}
.admin-dl dd {
    padding: 8px 0 8px 12px;
    color: var(--a-text);
    border-bottom: 1px solid var(--a-divider);
    margin: 0;
}
.admin-dl dt:last-of-type, .admin-dl dd:last-of-type { border-bottom: none; }

/* ===== KPI cards ===== */
.admin-kpi {
    padding: 18px 20px;
    background: var(--a-surface);
    border: 1px solid var(--a-border);
    border-radius: 10px;
    text-decoration: none;
    display: block;
    transition: border-color 0.12s, background 0.12s;
}
.admin-kpi:hover { border-color: var(--a-accent); }
.admin-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--a-muted); margin-bottom: 8px; }
.admin-kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--a-text); line-height: 1; }
.admin-kpi-delta { font-size: 12px; color: var(--a-muted); margin-top: 6px; }

/* ===== Activity row (dashboard recent events) ===== */
/* Single-line row: [colored dot] [label] [detail …truncated] [actor · ago, right] */
.admin-activity-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    font-size: 13px;
    color: var(--a-text);
    text-decoration: none;
    border-bottom: 1px solid var(--a-divider);
    min-height: 32px;
}
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-row:hover { background: var(--a-surface-2); }
.admin-activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--a-subtle);
    justify-self: center;
}
.admin-activity-dot[data-entity="order"]    { background: #a5b4fc; }
.admin-activity-dot[data-entity="orders"]   { background: #a5b4fc; }
.admin-activity-dot[data-entity="proof"]    { background: #fbbf24; }
.admin-activity-dot[data-entity="proofs"]   { background: #fbbf24; }
.admin-activity-dot[data-entity="customer"] { background: #c4b5fd; }
.admin-activity-dot[data-entity="customers"]{ background: #c4b5fd; }
.admin-activity-dot[data-entity="product"]  { background: #34d399; }
.admin-activity-dot[data-entity="agent"]    { background: #67e8f9; }
.admin-activity-label { font-weight: 500; color: var(--a-text); }
.admin-activity-detail {
    margin-left: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-activity-meta {
    display: inline-flex; align-items: baseline; gap: 8px;
    white-space: nowrap;
}

/* ===== Timeline (audit / event feed) ===== */
.admin-timeline { position: relative; padding-left: 20px; }
.admin-timeline::before {
    content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px;
    width: 1px; background: var(--a-border);
}
.admin-timeline-item { position: relative; padding-bottom: 16px; }
.admin-timeline-item::before {
    content: ''; position: absolute; left: -19px; top: 4px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--a-surface); border: 2px solid var(--a-border-strong);
}
.admin-timeline-item.is-now::before { border-color: var(--a-accent); }
.admin-timeline-meta { font-size: 11px; color: var(--a-muted); }
.admin-timeline-body { font-size: 13px; color: var(--a-text); margin-top: 2px; }

/* ===== Drag-drop upload zone ===== */
.admin-dropzone {
    border: 2px dashed var(--a-border-strong);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--a-surface-sunk);
    transition: border-color 0.12s, background 0.12s;
}
.admin-dropzone.is-dropover {
    border-color: var(--a-accent);
    background: var(--a-accent-tint);
}

/* ===== Rich unified activity timeline ===== */
.admin-timeline-rich {
    list-style: none; margin: 0; padding: 0;
    position: relative;
}
.admin-timeline-rich::before {
    content: ''; position: absolute;
    left: 15px; top: 6px; bottom: 6px;
    width: 1px; background: var(--a-divider);
}
.admin-timeline-rich-item {
    position: relative;
    display: flex; gap: 12px;
    padding: 10px 0;
}
.admin-timeline-rich-icon {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    background: var(--a-neutral-tint); color: var(--a-muted);
    z-index: 1;
    border: 2px solid var(--a-surface);
}
.admin-timeline-rich-body { flex: 1; min-width: 0; padding-top: 4px; }
.admin-timeline-rich-head {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
}
.admin-timeline-rich-label {
    font-size: 13px; font-weight: 600; color: var(--a-text);
    /* Same anywhere-wrap as the meta — file-upload events embed the
       original filename (sometimes 60+ chars with underscores) and
       were pushing the row past the viewport on narrow desktops. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.admin-timeline-rich-meta {
    font-size: 11px; color: var(--a-muted);
    margin-left: auto;
    font-family: var(--w-font-mono);
    /* No nowrap — actor strings like full emails were forcing the row
       past the viewport on narrow desktops. Let them wrap if needed;
       the head's flex-wrap already drops the meta to its own line when
       cramped. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.admin-timeline-rich-detail {
    margin-top: 4px;
    font-size: 12px; color: var(--a-text-2);
    white-space: pre-wrap;
    padding: 6px 10px;
    background: var(--a-surface-sunk);
    border-left: 2px solid var(--a-border-strong);
    border-radius: 0 4px 4px 0;
}

/* ===== Utilities ===== */
.admin-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.admin-hstack { display: flex; align-items: center; gap: 8px; }
.admin-vstack { display: flex; flex-direction: column; gap: 4px; }

/* ===== Flatpickr theme override =====
   Flatpickr's stock theme is fine but doesn't match the admin's deep-teal
   accent or 6-px border-radius. These rules tune the calendar popup to feel
   like part of the admin chrome instead of a third-party widget. The native
   <input type="date"> indicator is also hidden since flatpickr swaps the
   input for an altInput. */

/* Hide native picker indicator on the underlying flatpickr-input — Chrome
   keeps showing the calendar emoji on hover otherwise. */
input.flatpickr-input::-webkit-calendar-picker-indicator { display: none; }

/* Visible "altInput" — show a small calendar icon on the right and dim the
   placeholder text so the field reads as a clickable picker even when empty.
   The class is added by the layout JS init to every flatpickr altInput. */
.admin-date-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px !important;
    cursor: pointer;
}
.admin-date-input::placeholder {
    color: var(--a-subtle);
    font-style: italic;
    opacity: 1;  /* Firefox dims by default */
}
.admin-date-input:hover {
    background-color: var(--a-surface-2) !important;
}
.admin-date-input:focus {
    background-color: var(--a-surface) !important;
}

/* The visible "altInput" inherits .admin-input via JS-injected class flow,
   but in tracking rows where the original used class="li-tr-input" or
   "admin-input", the alt mirrors that. Make sure the alt input still
   feels typeable: */
.flatpickr-input.form-control.input,
input.flatpickr-input + input.flatpickr-mobile {
    cursor: pointer;
}

/* Calendar popup container */
.flatpickr-calendar {
    border-radius: 8px !important;
    border: 1px solid var(--a-border-strong) !important;
    box-shadow: 0 10px 32px rgba(15, 31, 44, 0.12), 0 2px 6px rgba(15, 31, 44, 0.08) !important;
    font-family: inherit !important;
    padding: 4px !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--a-border-strong) !important; }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--a-border-strong) !important; }

/* Month nav */
.flatpickr-months {
    padding: 6px 4px 4px 4px;
}
.flatpickr-month {
    color: var(--a-text) !important;
    height: 36px !important;
    border-bottom: 1px solid var(--a-divider);
    margin-bottom: 4px;
}
.flatpickr-current-month {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-top: 6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--a-text) !important;
    font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--a-surface-2) !important;
    border-radius: 4px;
}
.flatpickr-prev-month, .flatpickr-next-month {
    fill: var(--a-muted) !important;
    border-radius: 6px;
    transition: background 0.12s, fill 0.12s;
    height: 30px !important;
    width: 30px !important;
    padding: 6px !important;
    top: 4px !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    background: var(--a-surface-2) !important;
    fill: var(--a-text) !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg {
    fill: inherit !important;
}

/* Weekday header — must use the SAME flex-basis as day cells so the
   columns line up perfectly. Without this, narrower day cells (with
   max-width: 38px) caused 8 days to fit per row in a 7-column header,
   so clicking what looked like Sunday was actually a different day.
   Forcing 1/7 of container width on both rows guarantees alignment. */
.flatpickr-weekdays { background: transparent !important; }
span.flatpickr-weekday {
    color: var(--a-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-width: 0 !important;
}

/* Day cells — fixed at exactly 1/7 of container width so the grid is
   always 7 columns wide, regardless of viewport. Flatpickr's default
   max-width: 39px combined with our 38px override let an 8th cell fit
   per row when the container was wider than 7 × 39px (which it is in
   this admin theme). */
.flatpickr-day {
    border-radius: 6px !important;
    color: var(--a-text) !important;
    font-size: 12px !important;
    font-weight: 500;
    border: 1px solid transparent !important;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    flex: 0 0 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    min-width: 0 !important;
    height: 34px !important;
    line-height: 32px !important;
    margin: 0 !important;
}
.flatpickr-day:hover {
    background: var(--a-accent-tint) !important;
    color: var(--a-accent-hover) !important;
    border-color: transparent !important;
}
.flatpickr-day.today {
    border-color: var(--a-accent) !important;
    color: var(--a-accent) !important;
    font-weight: 700;
}
.flatpickr-day.today:hover {
    background: var(--a-accent-tint) !important;
    color: var(--a-accent-hover) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--a-accent) !important;
    color: #fff !important;
    border-color: var(--a-accent) !important;
    font-weight: 700;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--a-subtle) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--a-subtle) !important;
    background: transparent !important;
}

/* Time picker (only shown when enableTime: true, but harmless otherwise) */
.flatpickr-time input {
    color: var(--a-text) !important;
    font-weight: 600 !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--a-surface-2) !important;
}

/* Quick-action footer injected by the layout JS — Today / Clear small
   buttons sit at the bottom of every calendar so staff can jump-to-today
   or wipe a bad date without scrubbing the input. */
.fp-quick-actions {
    display: flex; gap: 6px;
    padding: 6px;
    border-top: 1px solid var(--a-divider);
    margin-top: 4px;
}
.fp-qa-btn {
    flex: 1;
    padding: 6px 10px;
    background: var(--a-canvas);
    border: 1px solid var(--a-border);
    border-radius: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--a-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fp-qa-btn:hover {
    background: var(--a-accent-tint);
    color: var(--a-accent-hover);
    border-color: var(--a-accent);
}
.fp-qa-clear:hover {
    background: #fef2f2;
    color: var(--a-danger);
    border-color: #fecaca;
}