/* ============================================================
   LIBERTY DIGITIZING — Brand Design Tokens & Shared Components
   Single source of truth for ALL surfaces:
   main site / account / admin / designer / partner
   Import this FIRST, then surface-specific CSS may extend it.
   ============================================================ */

:root {
    /* Palette */
    --brand-bg: #0a0a0a;
    --brand-bg-raised: #111111;
    --brand-surface: #161616;
    --brand-surface-hover: #1c1c1c;
    --brand-gold: #d4af37;
    --brand-gold-dark: #b8941f;
    --brand-text: #f5f5f5;
    --brand-text-muted: #9a9a9a;
    --brand-border: rgba(255, 255, 255, .08);
    --brand-border-strong: rgba(255, 255, 255, .15);
    --brand-danger: #ef4444;
    --brand-success: #22c55e;

    /* Type */
    --brand-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --brand-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace;

    /* Shape & depth */
    --brand-radius: 10px;
    --brand-radius-lg: 16px;
    --brand-shadow: 0 20px 44px rgba(0, 0, 0, .22);
    --brand-shadow-sm: 0 8px 24px rgba(0, 0, 0, .3);

    /* Gold gradient used by primary buttons */
    --brand-gold-gradient: linear-gradient(145deg, var(--brand-gold), var(--brand-gold-dark));
}

/* ---------- Base ---------- */
/* .acct-body is listed here rather than repeating these four declarations in
   the panel scaffold below. It had been relying on .theme-dark for text colour
   and font, which happened to work; the send* order forms moved onto this body
   class from .brand-page, so making the two share one base is what keeps the
   panel and the order forms from drifting apart again. */
.brand-page,
.acct-body {
    background: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--brand-font);
    min-height: 100vh;
}

/* ---------- Cards ---------- */
.brand-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow);
    padding: 1.75rem;
}

.brand-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 1rem;
}

/* ---------- Buttons ---------- */
.brand-btn {
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}
.brand-btn:hover { transform: translateY(-1px); box-shadow: var(--brand-shadow-sm); }

.brand-btn-primary { background: var(--brand-gold-gradient); color: #0a0a0a; }
.brand-btn-secondary {
    background: rgba(255, 255, 255, .05);
    color: var(--brand-text);
    border: 1px solid var(--brand-border-strong);
}
.brand-btn-danger {
    background: rgba(239, 68, 68, .15);
    color: var(--brand-danger);
    border: 1px solid rgba(239, 68, 68, .4);
}

/* ---------- Forms ---------- */
.brand-input,
.brand-select,
.brand-textarea {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--brand-bg-raised);
    border: 1px solid var(--brand-border-strong);
    border-radius: 8px;
    color: var(--brand-text);
    font-family: inherit;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.brand-input:focus,
.brand-select:focus,
.brand-textarea:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .15);
}
.brand-label {
    display: block;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}

/* ---------- Auth card (login / signup / forgot) ---------- */
.brand-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212, 175, 55, .12), transparent),
        var(--brand-bg);
}
.brand-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow);
    padding: 2.5rem 2.25rem;
}
.brand-auth-logo {
    display: block;
    text-align: center;
    margin-bottom: 1.75rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-text);
    text-decoration: none;
}
.brand-auth-logo span { color: var(--brand-gold); }

/* ---------- Status pills ---------- */
.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--brand-border-strong);
    color: var(--brand-text-muted);
}
.brand-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.brand-pill-ok { color: var(--brand-success); border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .08); }
.brand-pill-warn { color: var(--brand-gold); border-color: rgba(212, 175, 55, .35); background: rgba(212, 175, 55, .08); }
.brand-pill-bad { color: var(--brand-danger); border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .08); }

/* ---------- Stat tiles ---------- */
.brand-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.brand-stat {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 1.1rem 1.25rem;
}
.brand-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--brand-gold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.brand-stat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-top: .3rem;
}

/* ---------- Tables ---------- */
.brand-table-wrap {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    overflow-x: auto;
    box-shadow: var(--brand-shadow);
}
.brand-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.brand-table th {
    position: sticky;
    top: 0;
    padding: 1rem;
    text-align: left;
    color: var(--brand-gold);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(212, 175, 55, .08);
    border-bottom: 1px solid rgba(212, 175, 55, .24);
}
.brand-table td {
    padding: 1rem;
    color: var(--brand-text);
    border-top: 1px solid var(--brand-border);
}
.brand-table tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.brand-table tbody tr:hover {
    background: rgba(212, 175, 55, .035);
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, .55);
}

/* ---------- Queue table system ----------
   Pixel-mirror of admin/include/admin-design-system.css
   (.queue-card / .queue-table / .queue-ref / .status-badge /
   .empty-queue + mobile data-label collapse).
   Values are copied verbatim so .queue-table computes IDENTICALLY
   on storefront/account surfaces and in the admin panel.        */

/* Card container */
.queue-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.24), 0 24px 56px rgba(0,0,0,.16);
    transition: border-color .18s ease-out, box-shadow .18s ease-out;
}

.queue-card:hover {
    border-color: rgba(212,175,55,.26);
    box-shadow: 0 10px 24px rgba(0,0,0,.26), 0 26px 60px rgba(0,0,0,.18),
        0 0 0 1px rgba(212,175,55,.06), 0 14px 44px rgba(212,175,55,.08);
}

/* Scroll wrapper */
.queue-table-wrap {
    overflow-x: auto;
}

/* Data table */
.queue-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.queue-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 1rem;
    text-align: left;
    color: #d4af37;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(212,175,55,.08);
    border-bottom: 1px solid rgba(212,175,55,.24);
    font-weight: 700;
}

.queue-table td {
    padding: 1rem;
    color: #e5e5e5;
    border-top: 1px solid rgba(255,255,255,.06);
    vertical-align: middle;
}

/* Zebra striping (kept subtler than the hover wash) */
.queue-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,.016);
}

.queue-table tr:hover td {
    background: rgba(212,175,55,.045);
}

/* Shared elevation details (mirrors admin) */
.queue-table tbody tr {
    box-shadow: inset 3px 0 0 rgba(212,175,55,0);
    transition: background .12s ease, box-shadow .12s ease;
}
.queue-table tbody tr:hover {
    box-shadow: inset 3px 0 0 rgba(212,175,55,.55);
}
.queue-table .numeric-cell,
.queue-value {
    font-variant-numeric: tabular-nums;
}

/* Row reference links */
.queue-ref {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.queue-ref:hover {
    color: #f4d76d;
}

/* Value colors */
.queue-value.paid { color: #86efac; }
.queue-value.pending { color: #fbbf24; }
.queue-value.price { color: #86efac; }
.queue-value.price-zero { color: #fbbf24; }

/* Status badges
   Palette: processing=gold · done=green · pending=amber ·
            lost/cancelled=red · paid=emerald · new=blue */
.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .32rem .7rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #86efac;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.28);
}
.status-badge.processing {
    color: #f4d76d;
    background: rgba(212,175,55,.13);
    border-color: rgba(212,175,55,.38);
}
.status-badge.new {
    color: #93c5fd;
    background: rgba(96,165,250,.12);
    border-color: rgba(96,165,250,.28);
}
.status-badge.pending {
    color: #fbbf24;
    background: rgba(251,191,36,.12);
    border-color: rgba(251,191,36,.3);
}
.status-badge.ready {
    color: #86efac;
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.28);
}
.status-badge.done {
    color: #6ee7b7;
    background: rgba(16,185,129,.13);
    border-color: rgba(16,185,129,.34);
}
.status-badge.lost,
.status-badge.cancelled {
    color: #fca5a5;
    background: rgba(239,68,68,.13);
    border-color: rgba(239,68,68,.36);
}
.status-badge.paid {
    color: #34d399;
    background: rgba(52,211,153,.11);
    border-color: rgba(52,211,153,.38);
}
.status-badge.overdue {
    color: #fca5a5;
    background: rgba(239,68,68,.13);
    border-color: rgba(239,68,68,.36);
}

/* Empty state */
.empty-queue {
    text-align: center;
    color: #999;
    padding: 3rem 1.5rem;
}
.empty-queue i {
    font-size: 1.7rem;
    color: #555;
    display: block;
    margin-bottom: .75rem;
}

/* Mobile responsive (< 760px): collapse to labeled cards */
@media (max-width: 760px) {
    .queue-table-wrap {
        overflow: visible;
    }

    .queue-table,
    .queue-table thead,
    .queue-table tbody,
    .queue-table tr,
    .queue-table td {
        display: block;
        min-width: 0;
    }

    .queue-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }

    .queue-table tr {
        margin: 1rem;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        overflow: hidden;
        background: #181818;
    }

    .queue-table td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) 1fr;
        gap: .75rem;
        padding: .85rem 1rem;
    }

    .queue-table td::before {
        content: attr(data-label);
        color: #9a9a9a;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

/* ---------- Utility ---------- */
.brand-muted { color: var(--brand-text-muted); }
.brand-mono { font-family: var(--brand-mono); }
.brand-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   CUSTOMER ACCOUNT PANEL — Phase 4
   One shell, one hero, one sidebar, one card/table DNA shared
   by every account/*.php page (rendered via account/sidebar.php).
   ============================================================ */

/* ---------- Page scaffold ---------- */
body.acct-body {
    background:
        radial-gradient(ellipse 70% 40% at 50% -10%, rgba(212, 175, 55, .07), transparent),
        var(--brand-bg);
}

/* Fixed header should not cover a service section opened from the footer/menu. */
#digitizing, #vector, #custom, #web-development, #web-designing, #seo,
#social-media, #service-pricing, #quote, #contact, #form-notice {
    scroll-margin-top: 6.5rem;
}
.acct-main-wrap {
    min-height: 100vh;
    padding-top: 2.25rem;
    padding-bottom: 3rem;
}

/* Shell: main column + sidebar column */
.acct-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    width: 100%;
    max-width: 1400px !important;
    box-sizing: border-box;
    gap: 2rem;
    align-items: flex-start;
}
.acct-main { flex: 1 1 auto; min-width: 0; }
/* NOT sticky, and the `top` offset is gone with it. Both classes here land on
   ONE element -- account/sidebar.php emits <aside class="dashboard-sidebar
   acct-side"> -- and .dashboard-sidebar below declares position:relative at the
   same (0,0,1,0) specificity but LATER in this file, so it always won. That
   left `position:relative` paired with the orphaned `top:calc(76px + 1.5rem)`
   from this rule, i.e. a plain 100px downward shove (88px at 390px, where
   --lb-topbar-h is 64px). Relative offsets don't reflow anything, so the nav
   card painted 100px below its own flow box at EVERY width: a dead gap above
   it, and below 1100px -- where it stacks above the content -- a measured 64px
   overlap into .brand-page-hero on all eleven panel pages.

   Sticky was the author's intent and it is not reachable here: .acct-shell
   computes to exactly the sidebar's own height (918px on recordsOrder), so
   there is no travel room, and body carries overflow-x:hidden -> overflow-y
   resolves to auto, making body a scroll container, so a sticky child pins to
   body's scrollport instead of the viewport. Forcing position:sticky!important
   and scrolling 600px moved the card a full -600px: no pinning at all. The
   overflow-x:hidden is load-bearing for the off-canvas drawer, so trading it
   away to win a sticky nav would be the wrong swap. position:relative stays
   because .dashboard-sidebar::before (the gold hairline) is absolute and needs
   this as its containing block. */
.acct-side {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    min-width: 0;
}
@media (max-width: 1100px) {
    .acct-shell { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    /* align-items:flex-start above is there so the sidebar doesn't stretch to
       the main column's height in the row layout. Once the shell is a column,
       that same property governs the HORIZONTAL axis, so both children become
       fit-content instead of full width. .acct-side was already patched with
       width:100%; .acct-main was not, so the content column measured 818px on
       dashboard.php and 914px on profile.php inside a 960px slot — narrower
       than the sidebar sitting directly above it, which is what made the
       collapsed panel look ragged. align-self restores stretch for both. */
    .acct-main { align-self: stretch; width: 100%; }
    /* `position: static` used to live here to cancel the sticky above. It never
       applied -- .dashboard-sidebar's position:relative outranks it by source
       order on the same element -- and it is no longer needed now that the base
       rule is relative with no offset. Dropped rather than left as a lie. */
    .acct-side { grid-column: 1; grid-row: 1; width: 100%; }
    .acct-main { grid-column: 1; grid-row: 2; }
}

/* ---------- Collapsed nav: a disclosure, not a 909px wall ----------
   Once .acct-side stacks above .acct-main, its 15 links in 6 groups measured
   909px tall -- taller than a 390x844 phone viewport. .acct-main therefore
   began at y=1066 on sendOrder/sendVectorOrder/sendQuote/sendPatchOrder: a
   customer who tapped "New Order" had to scroll past a full screen of
   navigation before the form's first field appeared. That is the panel flow
   problem, and it is worst on exactly the pages a customer visits with intent.

   Two cheaper fixes were measured and rejected:

   1. Move the nav below the content. The header's off-canvas drawer carries
      storefront CTAs (Customer Login / Create Account / Quote Request / Get
      Quote), NOT account navigation, so a signed-in customer on a phone would
      have had no panel nav above the fold at all.
   2. Reflow the lists into wrapped chips. This did work -- 909px -> 644px, with
      .acct-main up to y=801 -- but the chips measured 35px tall against a 44px
      minimum touch target, and restoring 44px put the nav back near 700px. The
      height was coming from 15 rows plus 6 group titles; denser rows could not
      pay for it.

   So the nav collapses instead, and because it is closed by default on a phone
   the list inside can stay a comfortable vertical one. See account/sidebar.php:
   <details> is emitted WITH the open attribute and a small script removes it
   below 1100px, rather than emitted closed and revealed by CSS at desktop. Both
   work in Chromium; only this order degrades safely. If the script never runs,
   the nav is expanded exactly as it is today. The reverse arrangement would
   leave the desktop nav invisible on any engine that hides closed <details>
   content by a mechanism an author `display` cannot override -- and production
   is older than dev, so that risk is not worth a slightly tidier rule. */
.acct-nav-disc > summary {
    display: none;                     /* desktop: the list is simply present */
}
.acct-nav-disc[open] > summary { display: none; }

@media (max-width: 1100px) {
    .acct-nav-disc > summary,
    .acct-nav-disc[open] > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin: 0 1.05rem;
        padding: .8rem 1rem;
        min-height: 44px;
        box-sizing: border-box;
        border: 1px solid var(--brand-border-strong);
        border-radius: var(--brand-radius);
        background: rgba(255, 255, 255, .04);
        color: var(--brand-text);
        font-size: .85rem;
        font-weight: 600;
        cursor: pointer;
        list-style: none;              /* kill the default disclosure triangle */
        transition: border-color .15s ease-out, background .15s ease-out;
    }
    /* Safari draws the marker through a pseudo-element that list-style misses. */
    .acct-nav-disc > summary::-webkit-details-marker { display: none; }
    .acct-nav-disc > summary::marker { content: ''; }

    .acct-nav-disc > summary:hover {
        border-color: rgba(212, 175, 55, .3);
        background: rgba(212, 175, 55, .06);
    }
    .acct-nav-disc > summary:focus-visible {
        outline: 2px solid var(--brand-gold);
        outline-offset: 2px;
    }
    .acct-nav-toggle-chev { transition: transform .2s ease-out; color: var(--brand-gold); }
    .acct-nav-disc[open] .acct-nav-toggle-chev { transform: rotate(180deg); }

    /* The list is closed by default here, so it can afford full-size rows.
       min-height rather than padding: padding alone reached 40px and the
       44px floor is the point. (0,0,2,0) to clear .nav-link at (0,0,1,0). */
    .acct-side .nav-link { min-height: 44px; box-sizing: border-box; }
    .acct-side .sidebar-nav { padding-top: .8rem; }
}

/* ---------- Unified page hero ---------- */
.brand-page-hero { margin-bottom: 2rem; }
.brand-page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 .5rem;
}
.brand-page-hero h1 span { color: var(--brand-gold); }
.brand-page-hero p {
    color: var(--brand-text-muted);
    font-size: .95rem;
    margin: 0;
}
.brand-page-hero-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Button size modifier */
.brand-btn--sm { padding: .5rem 1rem; font-size: .8rem; }

/* ---------- Key/value detail grid (details / invoice) ---------- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem 2rem;
}
.detail-item { display: flex; flex-direction: column; gap: .35rem; }
.detail-label {
    font-weight: 700;
    color: var(--brand-gold);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.detail-value { color: var(--brand-text); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Sidebar (markup rendered by account/sidebar.php) ----------
   Class names kept stable so legacy surfaces that still include
   include/right.php render the identical navigation.               */
.dashboard-sidebar {
    background: linear-gradient(145deg, #141414, #191919);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-sm);
    padding: 1.15rem 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    font-family: var(--brand-font);
}
.dashboard-sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .5), transparent);
}
.sidebar-header {
    padding: 0 1.15rem 1rem;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: .9rem;
}
.sidebar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-gold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    letter-spacing: -.01em;
}
.sidebar-nav { padding: 0 .75rem; }
.nav-group { margin-bottom: 1.1rem; }
.nav-group:last-child { margin-bottom: .4rem; }
.nav-group-title {
    font-size: .7rem;
    color: var(--brand-text-muted);
    font-weight: 700;
    margin-bottom: .45rem;
    padding: 0 .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
/* Neutralise site-wide .nav-item chrome that leaks into the sidebar */
.dashboard-sidebar .nav-item { padding: 0; background: none; overflow: visible; }
.dashboard-sidebar .nav-item::before { display: none; }
.dashboard-sidebar .nav-item:hover { background: none; transform: none; }
.nav-item { position: relative; }
.nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .8rem;
    margin: 0 .3rem;
    border-radius: var(--brand-radius);
    border: 1px solid transparent;
    color: #e0e0e0;
    font-weight: 500;
    font-size: .85rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease-out, color .15s ease-out, transform .15s ease-out, border-color .15s ease-out;
}
.nav-link:hover {
    background: rgba(212, 175, 55, .08);
    border-color: rgba(212, 175, 55, .16);
    color: var(--brand-gold);
    transform: translateX(3px);
}
.nav-link.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .09));
    border-color: rgba(212, 175, 55, .28);
    color: var(--brand-gold);
    transform: translateX(3px);
}
.nav-icon {
    font-size: .9rem;
    min-width: 18px;
    text-align: center;
}
.nav-text { flex: 1; font-weight: 500; }
.nav-badge {
    background: var(--brand-gold-gradient);
    color: #0a0a0a;
    font-size: .62rem;
    font-weight: 800;
    padding: .18rem .42rem;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.logout-link { border-top: 1px solid var(--brand-border); margin-top: .4rem; padding-top: .8rem; }
.logout-link:hover {
    background: rgba(239, 68, 68, .1) !important;
    border-color: rgba(239, 68, 68, .24);
    color: #ff6b6b !important;
}

/* Empty-state links inside queue tables */
.empty-queue a { color: var(--brand-gold); font-weight: 600; }

/* Account main column is narrower than admin's — relax table min-width.

   The media query is load-bearing, not tidiness. This selector is (0,0,2,0);
   the mobile card-collapse above sets `.queue-table { min-width: 0 }` at
   (0,0,1,0), and a media query contributes no specificity. Unbounded, this
   rule therefore won at EVERY width and held the table at 760px on a phone —
   while that same collapse block turns .queue-table-wrap to overflow:visible
   (correct: the table is meant to be labeled cards by then, not a scroller).
   With the scroll container gone and the width still pinned, .acct-main was
   measured at 762px inside a 390px viewport on recordsOrder, recordsQuote,
   recordsVectorOrder, invHistory and invoice. body has overflow-x:hidden, so
   the overhang was not scrollable — roughly 370px of every row, including the
   action buttons, was simply unreachable on mobile. Keep this bounded. */
@media (min-width: 761px) {
    .acct-main .queue-table { min-width: 760px; }
}

/* ---------- Micro utilities (account surfaces no longer load a CSS framework) ---------- */
.acct-body .mr-1 { margin-right: .25rem; }
.acct-body .mr-2 { margin-right: .5rem; }
.acct-body .text-center { text-align: center; }

/* ---------- Panel record search: one form, three optional filters ----------
   Replaced three side-by-side <form>s that each carried their own full-width
   gold submit, so the card showed three identical "Search" buttons stacked down
   a phone screen. The fields keep the auto-fit grid the old layout used -- three
   across at desktop, one per row on a phone -- and the single button sits in its
   own action row underneath with the result count beside it.
   Used by recordsOrder.php, recordsQuote.php and recordsVectorOrder.php. */
.acct-search-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.1rem;
}
.acct-search-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--brand-border);
}
/* .brand-btn is inline-block at 39px, and --sm at 31px; both sit under the 44px
   touch floor the panel nav already holds to, and this is the card's primary
   action. inline-flex rather than a min-height alone: .brand-btn centres text by
   baseline, so extra height would pool at the bottom, and the icon needs a real
   gap instead of the single literal space in the markup. */
.acct-search-actions .brand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    box-sizing: border-box;
}
/* Auto margin, not a fixed gap: the count sits hard against the buttons at
   phone width once the row wraps, and against the right edge at desktop. */
.acct-search-count {
    margin: 0 0 0 auto;
    font-size: .82rem;
    color: var(--brand-text-muted);
}
.acct-search-warn { color: var(--brand-gold); }

@media (max-width: 560px) {
    /* Stacked, the auto margin would strand the count on its own line at the
       right edge, reading as though it belonged to nothing. */
    .acct-search-count { margin-left: 0; width: 100%; }
    .acct-search-actions .brand-btn { flex: 1 1 auto; justify-content: center; }
}

/* date inputs render a native calendar picker whose indicator is drawn in the
   UA's own colour -- near-black on this near-black field, i.e. invisible.
   Chromium exposes it for recolouring; the filter is the only way to reach it. */
.acct-search input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.55);
    cursor: pointer;
}
.acct-search input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) opacity(1);
}

/* ---------- Account queue tables: atomic cells and row actions ----------
   The account main column is 886px at a 1440px viewport and these tables carry
   nine columns, so table-layout:auto had ~66px of content width per column and
   broke atomic tokens across two lines: "OR-" / "9898", "2018-" / "08-24",
   "ORDER / NAME", and the row buttons stacked their icon above their label at
   59px tall. Measured on recordsOrder.php at 1440px. Only the free-text name
   column should ever wrap.

   Scoped to .acct-main rather than added to the .queue-table block above,
   which is a deliberate byte-for-byte mirror of
   admin/include/admin-design-system.css. Admin's tables are wider and carry
   more columns behind a 980px scroller; nowrapping every header there would
   lengthen a scroller nobody asked to be longer. Same reason the min-width
   override a few rules up is scoped this way. */
@media (min-width: 761px) {
    .acct-main .queue-table th,
    .acct-main .queue-table td.queue-atomic {
        white-space: nowrap;
    }
}

/* A button label broken across two lines reads as two controls. Never wanted,
   at any width -- this one is unscoped by breakpoint on purpose. */
.acct-main .queue-table .brand-btn {
    white-space: nowrap;
}

/* Below 760px each row becomes a card and these two links are the only way into
   an order, but .brand-btn--sm computes to 38px -- under the 44px touch floor
   the panel nav and the search button already hold to. Raised only inside the
   collapse: at desktop a 44px control in every row would inflate rows that are
   already 91px tall, for a pointer that does not need the target. */
@media (max-width: 760px) {
    .acct-main .queue-table td .brand-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* Neutral badge. The bare .status-badge is green -- the success colour -- so
   every cell that had no variant to reach for rendered as an achievement:
   "Edited" (meaning you have used your one edit) and a second "Delivered" in
   the Edit column beside the real one in Status. Both are the absence of an
   action, not a success. */
.status-badge.muted {
    color: #a3a3a3;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.14);
}

/* ---------- Row actions ----------
   Copied verbatim from admin/include/admin-design-system.css:416-441, the same
   pixel-mirror contract the .queue-table block above holds to. These existed
   ONLY in the admin stylesheet, so the customer records tables had reached for
   .brand-btn--sm instead -- a third treatment for one job: admin rows use quiet
   gold .queue-action links, account/dashboard.php uses a .queue-ref with two
   inline style overrides, and recordsOrder/Quote/VectorOrder used small filled
   buttons. Same row, same action, three looks across four pages. */
.queue-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.queue-action {
    color: #d4af37;
    text-decoration: none;
    font-weight: 750;
    font-size: .82rem;
    transition: color 0.15s ease-out;
}

.queue-action:hover {
    color: #f4d76d;
}

.queue-action.danger {
    color: #fca5a5;
}

.queue-action.danger:hover {
    color: #fecaca;
}

@media (max-width: 760px) {
    /* mirrors admin-design-system.css:642 */
    .queue-actions {
        justify-content: flex-start;
    }

    /* A .82rem text link is ~17px tall. Once the row is a card these links are
       the only way into an order on a phone, so they get the same 44px target
       the search button and the panel nav hold to. Column layout, not a
       min-height on the row: two 44px links side by side in a 358px card would
       leave each one an ambiguous half. */
    .acct-main .queue-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }
    .acct-main .queue-action {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: .9rem;
    }
}

/* ---------- Row counter, collapsed ----------
   A row counter orients you inside a list of rows. Once each row becomes its own
   card there is no list to be positioned in, so "# / 1" is a 54px band of a
   437px card spent on a number that means nothing on its own. Measured on
   recordsOrder.php at 390px: card 437px tall, seven bands, this one 54px.

   .numeric-cell is unambiguous here -- all six files that use it use it for a
   row counter and nothing else (dashboard, fullInvoice, the three records pages,
   admin/recordsVectorOrder_search), so this is not hiding a price or a quantity.

   Hidden, not deleted from the markup: at desktop the column is a real anchor
   when scanning a long queue, and the admin tables carry the same one. Scoped
   to .acct-main for the usual reason -- the block above is a byte-for-byte
   mirror of admin/include/admin-design-system.css. */
@media (max-width: 760px) {
    .acct-main .queue-table td.numeric-cell { display: none; }
}