/* ──────────────────────────────────────────────────────────────
   Visual Overhaul — "Dashboard Cards"
   Additive, per-tile restyle (opt-in via <link> + a body.vo-* class).

   Scope is intentionally additive + isolated so it can be
   cherry-picked or dropped wholesale:
     • Loaded only on the pages in the handoff's Phase-1 scope.
     • Global rules (brand search strip) key off existing selectors
       (.usb-row / .usb-input) so search-bar.js bindings are
       untouched — visual relocation + restyle only.
     • Page-specific rules are gated under each tile's body.vo-*
       class so they neither leak to other tiles nor need !important
       to beat a tile's inline <style> (the body-class prefix raises
       specificity above the inline `#id .class` rules).

   Ported to WCS v4 from the upstream visual overhaul; adapted to
   WCS green branding.
   ────────────────────────────────────────────────────────────── */

/* ==============================================================
   TASK 1 — Global Search Strip (home + all lookup tiles)
   Re-skins the Universal Search Bar's mobile row (.usb-row,
   injected by search-bar.js after .header) into the mockup's
   brand gradient strip, and promotes it to show on desktop too so
   the strip is consistent across viewports. JS bindings to
   #usbInput are unchanged.
   ============================================================== */

.usb-row {
    /* Match the sidebar's exact fill (desktop-sidebar.css uses the same
       var: background: var(--brand-primary-dark)) so the strip and the
       sidebar read as one seamless brand block — same value in light/dark
       since brand colors aren't theme-dependent. */
    background: var(--brand-primary-dark, #15803d);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    /* keep sticky-below-header behaviour on mobile (top:3.5rem set
       in shared.css); desktop override below resets top to 0 */
}

@media (max-width: 640px) {
    .usb-row {
        padding: 8px 14px;
    }
}

/* Promote the strip onto desktop. shared.css hides .usb-row at
   >=1024px (mobile-only by default); this re-shows it so the brand
   strip lives at the top of the content area on every page. The
   .header is display:none on desktop, so the strip sits flush at
   the top of the content box (right of the fixed sidebar, which
   .app-container's padding-left already accounts for). */
@media (min-width: 1024px) {
    .usb-row {
        display: flex;
        top: 0;
    }
}

/* Input wrapper: left-aligned, capped width (mockup uses a 620px
   max). Overrides shared.css's centered (margin:0 auto) layout. */
.usb-input-wrap {
    flex: 1 1 auto;
    max-width: 620px;
    margin: 0;
}

/* Pill input — translucent dark fill, hairline border, white text. */
.usb-input {
    padding: 9px 14px 9px 38px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-size: 13px;
}

.usb-input:focus {
    background: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.40);
}

.usb-input::placeholder {
    color: rgba(255, 255, 255, 0.70);
}

.usb-input-icon {
    left: 14px;
    color: rgba(255, 255, 255, 0.70);
}

/* On desktop the mobile-style dropdown is fixed full-width
   (left:0;right:0 in shared.css). Shift its left edge past the
   fixed sidebar so results land inside the content area. JS clears
   the inline left for the .usb-row anchor, so this CSS governs. */
@media (min-width: 1024px) {
    .usb-dropdown:not(.usb-dropdown-desktop) {
        left: var(--sidebar-width, 220px);
        right: 0;
    }
}

/* Home page: the brand strip now carries search at the top of the
   content area, so retire the inline welcome-row search to avoid a
   duplicate input. (Only present on index.html; harmless elsewhere.) */
.home-search-bar {
    display: none !important;
}

/* ==============================================================
   Shared design tokens for the overhaul tiles (Dashboard Cards palette)
   Mapped onto the project's existing token names so JS-emitted DOM
   picks them up. Consumed by the vo-orders / vo-customer-inquiry /
   vo-memo-ordering rules below.
   (The item-lookup tile is intentionally NOT wired yet — its
   tile-specific rules were stripped in the blind-review cleanup and
   will return in the item-lookup JS phase.)
   ============================================================== */

/* ---- Design tokens (mockup palette) mapped onto the project's
   existing token names so the JS-emitted DOM picks them up, plus
   the new card tokens the mockup adds. Light is the default; dark
   applies via body.theme-dark and the system-dark media query,
   scoped so an explicit .theme-light always wins. ---- */
body.vo-orders,
body.vo-customer-inquiry,
body.vo-memo-ordering,
body.vo-ar-lookup,
body.vo-web-access,
body.vo-price-levels,
body.vo-item-lookup {
    --background: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --surface-3: #eef2f7;
    --surface-hover: #f4f7fb;
    --row-hover: #f4f7fb;
    --border: #e0e5ec;
    --text-primary: #1a2433;
    --text-secondary: #5c6a7e;
    --text-faint: #94a3b8;
    --sku: var(--brand-primary-dark, #15803d);
    --vo-primary: var(--brand-primary, #16a34a);
    --vo-primary-dark: var(--brand-primary-dark, #15803d);
    /* Theme-independent brand-color derivatives (same in light + dark, so defined
       once here; the dark blocks below don't override them). */
    --vo-ink: var(--brand-on-primary, #ffffff);       /* readable text on a brand-color fill */
    --vo-sheen: var(--brand-primary-sheen, #1eb24f);  /* lit top stop of the New Order gradient */
    --vo-shadow: 0 4px 16px rgba(20, 35, 60, .08);
    --vo-skeleton: linear-gradient(90deg, #eef2f7 0px, #e3e9f1 200px, #eef2f7 400px);
    /* Available stock tile — light mode: deep brand-color number on a stronger tint
       (a light tint washes out on light backgrounds). */
    --avail-fg: var(--brand-primary-deep, #14532d);
    --avail-label: var(--brand-primary-dark, #15803d);
    --avail-bg: rgba(var(--brand-primary-rgb, 22, 163, 74), .18);
    --avail-border: rgba(var(--brand-primary-rgb, 22, 163, 74), .55);
    /* Status tones (badges + KPI accents) — light: darker for contrast. */
    --tone-green: #16a34a;
    --tone-amber: #b45309;
    --tone-red: #dc2626;
}

@media (prefers-color-scheme: dark) {
    body.vo-orders:not(.theme-light),
    body.vo-customer-inquiry:not(.theme-light),
    body.vo-memo-ordering:not(.theme-light),
    body.vo-ar-lookup:not(.theme-light),
    body.vo-web-access:not(.theme-light),
    body.vo-price-levels:not(.theme-light),
    body.vo-item-lookup:not(.theme-light) {
        --background: #0c1622;
        --surface: #15243a;
        --surface-2: #1b2e47;
        --surface-3: #22384f;
        --surface-hover: #1d3149;
        --row-hover: #1d3149;
        --border: #28405b;
        --text-primary: #eef3f9;
        --text-secondary: #90a4bd;
        --text-faint: #5d7290;
        --sku: var(--brand-primary-light, #bbf7d0);
        --vo-shadow: 0 6px 22px rgba(0, 0, 0, .35);
        --vo-skeleton: linear-gradient(90deg, #1b2e47 0px, #26405e 200px, #1b2e47 400px);
        /* Available tile — dark mode keeps the brand/tint treatment. */
        --avail-fg: var(--brand-primary-light, #bbf7d0);
        --avail-label: var(--brand-primary, #16a34a);
        --avail-bg: rgba(var(--brand-primary-rgb, 22, 163, 74), .12);
        --avail-border: rgba(var(--brand-primary-rgb, 22, 163, 74), .4);
        /* Status tones — dark: lighter so they read on the navy surface. */
        --tone-green: #4ade80;
        --tone-amber: #fbbf24;
        --tone-red: #f87171;
    }
}

body.vo-orders.theme-dark,
body.vo-customer-inquiry.theme-dark,
body.vo-memo-ordering.theme-dark,
body.vo-ar-lookup.theme-dark,
body.vo-web-access.theme-dark,
body.vo-price-levels.theme-dark,
body.vo-item-lookup.theme-dark {
    --background: #0c1622;
    --surface: #15243a;
    --surface-2: #1b2e47;
    --surface-3: #22384f;
    --surface-hover: #1d3149;
    --row-hover: #1d3149;
    --border: #28405b;
    --text-primary: #eef3f9;
    --text-secondary: #90a4bd;
    --text-faint: #5d7290;
    --sku: var(--brand-primary-light, #bbf7d0);
    --vo-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    --vo-skeleton: linear-gradient(90deg, #1b2e47 0px, #26405e 200px, #1b2e47 400px);
    /* Available tile — dark mode keeps the brand/tint treatment. */
    --avail-fg: var(--brand-primary-light, #bbf7d0);
    --avail-label: var(--brand-primary, #16a34a);
    --avail-bg: rgba(var(--brand-primary-rgb, 22, 163, 74), .12);
    --avail-border: rgba(var(--brand-primary-rgb, 22, 163, 74), .4);
    /* Status tones — dark. */
    --tone-green: #4ade80;
    --tone-amber: #fbbf24;
    --tone-red: #f87171;
}

/* ==============================================================
   PHASE 2 — Order-type lookup tiles (SO / Quote / Backorder)
   Shared "Dashboard Cards" treatment matching the mockup's SO
   screen. Tokens are shared with item-lookup (above). Component
   rules key off body.vo-orders — card classes are distinct per tile
   (.so-card vs .bo-card), so a single scope is safe. Where the
   tile's inline desktop CSS (.so-md-active …) has deep selectors,
   these match/exceed its depth to win the cascade.
   ============================================================== */

/* Fill width (same Fix 8 lesson): the page .main keeps margin:0 auto
   at desktop — let the order tiles fill the content area. */
@media (min-width: 1024px) {
    body.vo-orders .main {
        max-width: none;
        width: auto;
        margin: 0;
    }
}

/* ---- Segmented pill tabs (By Customer / By Item / By PO) ---- */
body.vo-orders .mode-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
}
body.vo-orders .mode-tab,
body.vo-orders .mode-tab:not(:last-child) {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    /* Keep multi-word labels (e.g. "By Customer PO") on one line so every pill
       in the row stays the same height. */
    white-space: nowrap;
}
body.vo-orders .mode-tab.active {
    background: var(--vo-primary);
    color: var(--vo-ink);
}

/* ---- Status filter pills (SO only) — horizontal segmented, brand active ---- */
body.vo-orders .filter-group {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
}
body.vo-orders .filter-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
body.vo-orders .filter-btn.active {
    background: var(--vo-primary);
    color: var(--vo-ink);
}
/* Beat the tile's deep desktop rules that stack the group vertically under a
   "STATUS" label and add connected borders — restore a single pill row. */
@media (min-width: 1024px) {
    body.vo-orders .so-toolbar-row .filter-bar .filter-group {
        flex-direction: row;
        gap: 6px;
        padding: 3px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 11px;
    }
    body.vo-orders .so-toolbar-row .filter-bar #statusFilter::before,
    body.vo-orders .so-toolbar-row .filter-bar #dropshipFilter::before {
        content: none;
    }
    body.vo-orders .so-toolbar-row .filter-bar .filter-group .filter-btn,
    body.vo-orders .so-toolbar-row .filter-bar .filter-group .filter-btn:first-of-type,
    body.vo-orders .so-toolbar-row .filter-bar .filter-group .filter-btn:last-of-type {
        border: none;
        border-radius: 8px;
        padding: 7px 13px;
    }
}

/* ---- Limit selector pills (5 / 10 / 15) ---- */
body.vo-orders .limit-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
body.vo-orders .limit-btn.active {
    background: var(--vo-primary);
    color: var(--vo-ink);
    border-color: var(--vo-primary);
}

/* ---- Search input (rounded) + brand Search button ---- */
body.vo-orders .search-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 13px;
    box-shadow: var(--vo-shadow);
}
body.vo-orders .search-input:focus {
    outline: none;
    border-color: var(--vo-primary);
}
body.vo-orders .search-button {
    background: var(--vo-primary);
    color: var(--vo-ink);
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--vo-shadow);
}
body.vo-orders .search-button:hover:not(:disabled) {
    background: var(--vo-primary-dark);
    color: var(--vo-ink);
}

/* ---- KPI summary strip (rendered by the tile JS into #resultsSummary) ---- */
body.vo-orders .vo-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
body.vo-orders .vo-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--vo-shadow);
}
body.vo-orders .vo-kpi-label {
    font-size: 11px;
    color: var(--text-secondary);
}
body.vo-orders .vo-kpi-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
body.vo-orders .vo-kpi-sub {
    font-size: 14px;
    color: var(--text-faint);
    font-weight: 500;
}
body.vo-orders .vo-kpi-amber .vo-kpi-value { color: var(--tone-amber); }
body.vo-orders .vo-kpi-red .vo-kpi-value { color: var(--tone-red); }

/* ---- Status badges as pills (green / amber / red) ---- */
body.vo-orders .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.vo-orders .status-new {
    background: rgba(34, 197, 94, .14);
    color: var(--tone-green);
    border: 1px solid rgba(34, 197, 94, .32);
}
body.vo-orders .status-backorder {
    background: rgba(217, 135, 11, .15);
    color: var(--tone-amber);
    border: 1px solid rgba(217, 135, 11, .38);
}
body.vo-orders .status-hold {
    background: rgba(239, 68, 68, .13);
    color: var(--tone-red);
    border: 1px solid rgba(239, 68, 68, .3);
}
body.vo-orders .status-shipcomplete {
    background: var(--surface-3);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ---- Load More: brand, centered, rounded ---- */
body.vo-orders .load-more-wrapper {
    display: flex;
    justify-content: center;
    padding: 6px 0 12px;
}
body.vo-orders .load-more-btn {
    background: var(--vo-primary);
    color: var(--vo-ink);
    border: none;
    border-radius: 11px;
    padding: 11px 26px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--vo-shadow);
}
body.vo-orders .load-more-btn:hover {
    background: var(--vo-primary-dark);
}

/* ==============================================================
   SO + Quote cards (.so-card …) — shared class names
   ============================================================== */

/* Single-column wide cards (override the desktop 2-col grid → mockup). */
body.vo-orders #resultsList {
    display: block;
}

body.vo-orders .so-card,
body.vo-orders .so-md-active .so-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    overflow: hidden;
    margin-bottom: 12px;
}
body.vo-orders .so-md-active .so-card:hover {
    border-color: var(--vo-primary);
}
body.vo-orders .so-card-header {
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}
body.vo-orders .so-card-header:hover {
    background: transparent;
}
body.vo-orders .so-card-toggle {
    color: var(--text-faint);
    font-size: 12px;
    margin-top: 0;
}
body.vo-orders .so-card-main {
    gap: 10px;
}
body.vo-orders .so-card-main .so-pipe {
    display: none;   /* mockup separates with spacing, not pipes */
}
body.vo-orders .so-card-so {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--sku);
    font-variant-numeric: tabular-nums;
}
body.vo-orders .so-card-detail {
    font-size: 12.5px;
    color: var(--text-secondary);
}
body.vo-orders .so-card-main .status-badge {
    margin-left: auto;   /* push status badge(s) to the right edge */
}

/* Expanded body + line table */
body.vo-orders .so-card-body {
    border-top: 1px solid var(--border);
    padding: 6px 18px 16px;
}
body.vo-orders .fulfilled-toggle {
    color: var(--vo-primary);
    background: transparent;
    border: none;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
body.vo-orders .so-line-table thead th,
body.vo-orders .so-md-active .so-line-table thead th {
    position: static;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 8px 12px;
}
body.vo-orders .so-line-table td {
    padding: 11px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
body.vo-orders .so-line-table tbody tr:nth-child(even),
body.vo-orders .so-md-active .so-line-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .02);
}
body.vo-orders .so-line-table td:first-child,
body.vo-orders .so-line-table td:first-child a {
    color: var(--sku);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* By Item flat table — same palette */
body.vo-orders .so-flat-table thead th,
body.vo-orders .so-md-active .so-flat-table thead th {
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 8px 12px;
}
body.vo-orders .so-flat-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
body.vo-orders .so-flat-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .02);
}
body.vo-orders .so-flat-table td:first-child {
    color: var(--sku);
    font-weight: 600;
}

/* ==============================================================
   PO cards (.po-card …) — same Dashboard-Cards treatment as SO/BO.
   po-lookup.js emits its own .po-card-* vocabulary (parallel to .so-card-*),
   so these mirror the SO block above. Scoped to body.vo-orders — the card
   class is unique to po-lookup, so the shared scope can't leak. po-lookup.html
   carries body class "vo-orders vo-po-lookup".
   ============================================================== */
body.vo-orders .po-card,
body.vo-orders .po-md-active .po-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    overflow: hidden;
    margin-bottom: 12px;
}
body.vo-orders .po-card:hover,
body.vo-orders .po-md-active .po-card:hover {
    border-color: var(--vo-primary);
}
body.vo-orders .po-card-header {
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}
body.vo-orders .po-card-header:hover {
    background: transparent;
}
body.vo-orders .po-card-toggle {
    color: var(--text-faint);
    font-size: 12px;
}
body.vo-orders .po-card-info {
    gap: 10px;
}
body.vo-orders .po-card-info .po-pipe {
    display: none;   /* spacing, not pipes (matches SO) */
}
body.vo-orders .po-card-po {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--sku);
    font-variant-numeric: tabular-nums;
}
body.vo-orders .po-card-detail {
    font-size: 12.5px;
    color: var(--text-secondary);
}
body.vo-orders .po-card-info .po-line-count {
    font-size: 12.5px;
    color: var(--text-faint);
}
body.vo-orders .po-card-info .status-badge {
    margin-left: auto;   /* push status badge to the right edge */
}

/* Expanded body + line table (.po-line-table: SKU | Description | Ordered | Received | BO | ETA) */
body.vo-orders .po-card-body {
    border-top: 1px solid var(--border);
    padding: 6px 18px 16px;
}
body.vo-orders .po-line-table thead th,
body.vo-orders .po-md-active .po-line-table thead th {
    position: static;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 8px 12px;
}
body.vo-orders .po-line-table td {
    padding: 11px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
body.vo-orders .po-line-table tbody tr:nth-child(even),
body.vo-orders .po-md-active .po-line-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .02);
}
body.vo-orders .po-line-table td:first-child {
    color: var(--sku);   /* SKU column */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Line confirmation status (po-lookup.js emits .confirmed-yes / .confirmed-no) */
body.vo-orders .confirmed-yes { color: var(--tone-green); font-weight: 600; }
body.vo-orders .confirmed-no  { color: var(--tone-red);   font-weight: 600; }

/* ==============================================================
   Backorder cards (.bo-card / .bo-simple-row) — cache-only tile
   ============================================================== */
body.vo-orders .bo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    padding: 14px 18px;
    margin-bottom: 12px;
}
body.vo-orders .bo-card-line1 {
    color: var(--text-primary);
}
body.vo-orders .bo-card-line1 .bo-sku-link,
body.vo-orders .bo-card-line1 > span:first-child {
    color: var(--sku);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.vo-orders .bo-card-line2 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}
body.vo-orders .bo-pipe {
    color: var(--text-faint);
}
/* Plain pipe-separated values (neutralize the desktop per-value pill bg). */
body.vo-orders .bo-md-active .bo-card .bo-card-line2 > * {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
}

/* By Item "N customers waiting" simple rows → card chips */
body.vo-orders .bo-simple-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--vo-shadow);
    padding: 12px 16px;
    margin-bottom: 10px;
}
body.vo-orders .bo-simple-row-qty {
    color: var(--sku);
    font-weight: 700;
}

/* Customer tier badge → pill (keep the tier colors) */
body.vo-orders .tier-badge {
    border-radius: 999px;
    padding: 3px 10px;
}

/* The summary wrapper now holds the KPI strip + meta — drop its old
   underline/spacing so the strip reads cleanly. */
body.vo-orders .results-summary {
    border-bottom: none;
    padding-bottom: 0;
}
body.vo-orders .bo-sort-toggle {
    color: var(--vo-primary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ==============================================================
   PHASE 3 — Customer Lookup (master-detail, Dashboard Cards)
   Mirrors the Item Lookup pattern; design tokens shared above. The
   detail panel is a 2-column card grid (Primary + Accounting, then
   Addresses + Contacts) that fills the panel width on desktop.
   ============================================================== */

/* Fill width (the Fix 8 lesson). */
@media (min-width: 1024px) {
    body.vo-customer-inquiry .main {
        max-width: none;
        width: auto;
        margin: 0;
    }
}

/* ---- Search: name on its own row; city + attached Search button below ---- */
body.vo-customer-inquiry .search-section .help-text,
body.vo-customer-inquiry .search-section .search-helper-text {
    display: none;   /* WCS helper text — hidden in the overhauled layout */
}
body.vo-customer-inquiry .search-section .search-input {
    display: block;          /* not inline-block — avoids the baseline gap */
    height: 44px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 13px;
    box-shadow: var(--vo-shadow);
}
body.vo-customer-inquiry .search-section .search-input:focus {
    outline: none;
    border-color: var(--vo-primary);
}
body.vo-customer-inquiry #searchInput {
    margin-bottom: 8px;
}
body.vo-customer-inquiry .vo-cust-searchrow {
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.vo-customer-inquiry .vo-cust-searchrow #cityInput {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 12px 0 0 12px;
    border-right: none;
}
body.vo-customer-inquiry .vo-cust-searchrow .search-button {
    flex: 0 0 auto;
    width: auto;          /* override base .search-button width:100% */
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 18px;
    border: none;
    border-radius: 0 12px 12px 0;
    background: var(--vo-primary);
    color: var(--vo-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--vo-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
body.vo-customer-inquiry .vo-cust-searchrow .search-button:hover:not(:disabled) {
    background: var(--vo-primary-dark);
}

/* ---- Result cards ---- */
body.vo-customer-inquiry #resultsSection h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 12px;
    padding: 0;
}
body.vo-customer-inquiry .result-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 14px;
    padding: 15px;
    box-shadow: var(--vo-shadow);
    margin-bottom: 10px;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
body.vo-customer-inquiry .result-item:hover {
    background: var(--row-hover);
}
body.vo-customer-inquiry .result-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}
body.vo-customer-inquiry .result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ---- Detail panel: 2-col card grid (desktop) / single col (mobile) ---- */
@media (min-width: 1024px) {
    body.vo-customer-inquiry #customerDetails {
        display: grid !important;   /* beat the .ci-md-active force-show block */
        grid-template-columns: 1fr 1fr;
        align-items: stretch;       /* equal-height rows (no ragged inter-row gaps) */
        gap: 16px;
        column-count: auto;
        background: transparent;
        border: none;
        max-width: none;
    }
    body.vo-customer-inquiry #customerDetails .section-content {
        padding: 14px 20px 20px !important;   /* beat Foundation 3 */
    }
}

/* Card chrome (all widths) */
body.vo-customer-inquiry #customerDetails .details-section {
    display: block;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--vo-shadow);
    margin: 0 0 16px;
    overflow: hidden;
}
body.vo-customer-inquiry #customerDetails .section-header {
    background: transparent;
    border: none;
}
body.vo-customer-inquiry #customerDetails .section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Customer name — large/bold */
body.vo-customer-inquiry #customerDetails .customer-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Action buttons (AR / SO / BO) centered, brand + outline */
body.vo-customer-inquiry #customerDetails .nav-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 14px;
}
body.vo-customer-inquiry #customerDetails .nav-btn-row .nav-btn {
    flex: 0 0 auto;
    background: var(--vo-primary);
    color: var(--vo-ink);
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 600;
}
body.vo-customer-inquiry #customerDetails .nav-btn-row .nav-btn:not(:first-child) {
    background: transparent;
    color: var(--vo-primary);
    border: 1px solid var(--vo-primary);
}
body.vo-customer-inquiry #customerDetails .nav-btn-row .nav-btn:hover {
    background: var(--vo-primary-dark);
    color: var(--vo-ink);
}
body.vo-customer-inquiry #customerDetails .nav-btn-row .nav-btn:not(:first-child):hover {
    background: rgba(var(--brand-primary-rgb, 22, 163, 74), .14);
    color: var(--vo-primary);
}

/* Key/value rows */
body.vo-customer-inquiry #customerDetails .detail-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
body.vo-customer-inquiry #customerDetails .detail-row:last-child {
    border-bottom: none;
}
body.vo-customer-inquiry #customerDetails .detail-label {
    font-size: 13px;
    color: var(--text-secondary);
}
body.vo-customer-inquiry #customerDetails .detail-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Addresses / Contacts — nested sub-cards on surface-2 */
body.vo-customer-inquiry #customerDetails .address-card,
body.vo-customer-inquiry #customerDetails .contact-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
body.vo-customer-inquiry #customerDetails .address-label,
body.vo-customer-inquiry #customerDetails .contact-name {
    font-weight: 600;
    color: var(--text-primary);
}


/* ==============================================================
   PHASE 4 — Memo Ordering / SO Entry cover screen
   CSS only (so-entry.html shares its frontend with SO Entry).
   Scoped to body.vo-memo-ordering. Tokens shared above.

   The global brand search strip (.usb-row) is shown on this tile too,
   same as the other visual-overhaul tiles. (The earlier Phase-4
   "no global search strip" constraint was lifted by request — the
   strip is injected by search-bar.js after .header and re-skinned by
   the TASK 1 rules above, so nothing page-specific is needed here.)
   ============================================================== */

/* The cover view centers its children at content width by default — stretch
   them so the banner + orders fill the column like the buttons do. */
body.vo-memo-ordering .entry-point-view {
    align-items: stretch;
    justify-content: flex-start;
}

/* Fill width (Fix 8): drop the centered 900px caps so the cover fills. */
@media (min-width: 1024px) {
    body.vo-memo-ordering .main {
        max-width: none;
        width: auto;
        margin: 0;
    }
    body.vo-memo-ordering .entry-buttons {
        max-width: none;
        margin: 1.25rem 0;
    }
    body.vo-memo-ordering .draft-info-card {
        max-width: none;
        margin: 0 0 1.25rem;
    }
    body.vo-memo-ordering .recent-orders-section {
        max-width: none;
        margin: 0;
    }
    /* Single full-width order cards (override the 2-col grid → mockup). */
    body.vo-memo-ordering .recent-orders-list {
        display: block;
    }
    body.vo-memo-ordering .recent-orders-list > *:hover {
        transform: none;   /* use the brand left-border, not a lift */
        box-shadow: var(--vo-shadow);
    }
}

/* ---- Action buttons (New Order / In Progress) ---- */
body.vo-memo-ordering .entry-button {
    border-radius: 18px;
    box-shadow: var(--vo-shadow);
    font-weight: 600;
    transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease;
}
body.vo-memo-ordering .entry-button-primary {
    background: linear-gradient(170deg, var(--vo-sheen), var(--vo-primary-dark));
    color: #fff;
}
body.vo-memo-ordering .entry-button-primary:hover {
    background: linear-gradient(170deg, var(--vo-sheen), var(--vo-primary-dark));
    filter: brightness(1.06);
    transform: translateY(-1px);
}
body.vo-memo-ordering .entry-button-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
body.vo-memo-ordering .entry-button-secondary:hover {
    background: var(--surface);
    border-color: var(--vo-primary);
    transform: translateY(-1px);
}

/* ---- Autosave info banner ---- */
body.vo-memo-ordering .draft-info-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--vo-shadow);
    font-size: 12.5px;
    color: var(--text-secondary);
}
body.vo-memo-ordering .draft-info-emphasis {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 8px;
}
/* Brand bullets on the info lines (the heading keeps its inline ℹ). */
body.vo-memo-ordering .draft-info-line:not(.draft-info-emphasis) {
    padding-left: 2px;
}
body.vo-memo-ordering .draft-info-line:not(.draft-info-emphasis)::before {
    content: '\2022';
    color: var(--vo-primary);
    font-weight: 700;
    margin-right: 8px;
}
body.vo-memo-ordering #draftInfoCount {
    color: var(--text-faint);
}

/* ---- Submitted Orders section ---- */
body.vo-memo-ordering .recent-orders-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}
body.vo-memo-ordering .recent-orders-subtitle {
    font-size: 11.5px;
    color: var(--text-faint);
    margin: 0 0 12px;
}

/* Order cards */
body.vo-memo-ordering .recent-order-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    overflow: hidden;
    margin-bottom: 10px;
    transition: border-color 150ms ease;
}
body.vo-memo-ordering .recent-order-item:hover {
    border-left-color: var(--vo-primary);
}
body.vo-memo-ordering .recent-order-summary {
    gap: 10px;
    padding: 16px 18px;
}
/* Expand caret (no element exists — render via ::before; rotate when the
   detail's inline display flips to block on expand, detected with :has). */
body.vo-memo-ordering .recent-order-summary::before {
    content: '\25B6';
    color: var(--text-faint);
    font-size: 11px;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
body.vo-memo-ordering .recent-order-item:has(.recent-order-detail[style*="block"]) .recent-order-summary::before {
    transform: rotate(90deg);
}
body.vo-memo-ordering .recent-order-so {
    color: var(--sku);
    font-weight: 700;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}
body.vo-memo-ordering .recent-order-customer {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}
body.vo-memo-ordering .recent-order-meta {
    color: var(--text-secondary);
    font-size: 12.5px;
}
body.vo-memo-ordering .recent-order-date {
    color: var(--text-faint);
    font-size: 12px;
    margin-left: auto;
}

/* Expanded detail — labels secondary, values dominant */
body.vo-memo-ordering .recent-order-detail {
    border-top: 1px solid var(--border);
    padding: 6px 18px 16px;
}
body.vo-memo-ordering .recent-order-detail-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
body.vo-memo-ordering .recent-order-detail-row span:first-child {
    color: var(--text-secondary);
}
body.vo-memo-ordering .recent-order-detail-row span:last-child {
    color: var(--text-primary);
    font-weight: 700;
}
body.vo-memo-ordering .recent-order-lines-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 12px;
    margin-bottom: 6px;
}
body.vo-memo-ordering .recent-order-line {
    color: var(--sku);
    font-weight: 600;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
body.vo-memo-ordering .recent-order-line:last-child {
    border-bottom: none;
}
body.vo-memo-ordering .recent-order-line-empty {
    color: var(--text-faint);
    font-weight: 400;
}

/* ---- Toast — rounded, design-system error red ---- */
body.vo-memo-ordering .toast {
    border-radius: 12px;
    box-shadow: var(--vo-shadow);
}
body.vo-memo-ordering .toast-error {
    background: #dc2626;
    color: #fff;
}

/* ==============================================================
   TASK — Home tile grid: left-align to the content edge (desktop)
   The home content column centered itself through a chain of
   margin:0 auto (+ max-width:800px) on .main, #toolsContainer and
   .tools-grid, so on wide desktops the tiles floated mid-screen with
   dead space on both sides. The auto-fit/1fr grid inside that
   shrink-to-fit column also rendered an unstable card width.

   On desktop (>=1024px, where desktop-sidebar.css already makes .main
   full-width) drop the caps + auto-centering so the column starts at
   the content edge, and pin the tiles to a fixed track so they pack
   from the left and flow naturally WITHOUT the 1fr stretch — cards
   keep the design's 240px width (the original 800px / 3-column size),
   and this also stabilizes the previously-collapsing card width.
   Gap is left to home.css (1.5rem). Scoped to body.vo-home so it can't
   leak to the other tiles that load visual-overhaul.css.
   ============================================================== */
@media (min-width: 1024px) {
    body.vo-home .main {
        /* was margin:0 auto (shrink-to-fit + centered); fill the content box */
        margin-left: 0;
        margin-right: 0;
    }
    body.vo-home #toolsContainer {
        max-width: none;
        margin: 0;
    }
    body.vo-home .tools-grid {
        max-width: none;
        margin: 0;
        justify-content: start;
        grid-template-columns: repeat(auto-fill, 240px);
    }
}

/* ==============================================================
   Home — carry the section-color palette down to mobile
   The --section-bg / --section-fg vars are defined in
   css/desktop-sidebar.css ONLY inside @media (min-width:1024px), and the
   base .tool-icon (css/home.css) is a flat var(--primary-green) — so below
   1024px every section's tile icons render green and the colour-coded
   identity (blue=items, green=orders, purple=customers, orange=reports) is
   lost. Re-declare the palette width-agnostically + have the tile icon read
   it at every breakpoint. Values mirror desktop-sidebar.css. Scoped to
   body.vo-home so it can't reach the [data-section] flyout/favorite tiles
   on other pages.
   ============================================================== */
body.vo-home #section-items     { --section-bg: #E6F1FB; --section-fg: #185FA5; }
body.vo-home #section-orders    { --section-bg: #E1F5EE; --section-fg: #0F6E56; }
body.vo-home #section-customers { --section-bg: #EEEDFE; --section-fg: #534AB7; }
body.vo-home #section-reports   { --section-bg: #FAEEDA; --section-fg: #854F0B; }

/* Dark mode — explicit toggle + system preference (mirrors desktop-sidebar.css) */
body.vo-home.theme-dark #section-items     { --section-bg: #0C447C; --section-fg: #85B7EB; }
body.vo-home.theme-dark #section-orders    { --section-bg: #085041; --section-fg: #5DCAA5; }
body.vo-home.theme-dark #section-customers { --section-bg: #3C3489; --section-fg: #AFA9EC; }
body.vo-home.theme-dark #section-reports   { --section-bg: #633806; --section-fg: #FAC775; }
@media (prefers-color-scheme: dark) {
    body.vo-home:not(.theme-light) #section-items     { --section-bg: #0C447C; --section-fg: #85B7EB; }
    body.vo-home:not(.theme-light) #section-orders    { --section-bg: #085041; --section-fg: #5DCAA5; }
    body.vo-home:not(.theme-light) #section-customers { --section-bg: #3C3489; --section-fg: #AFA9EC; }
    body.vo-home:not(.theme-light) #section-reports   { --section-bg: #633806; --section-fg: #FAC775; }
}

/* Tile icon reads the section palette at every breakpoint (the base
   home.css .tool-icon is flat green; only its >=1024px override reads the
   vars). body.vo-home raises specificity above both. */
body.vo-home .tool-icon {
    background: var(--section-bg, var(--primary-green));
    color: var(--section-fg, white);
}

/* ==============================================================
   PHASE 2.5 — AR Lookup (body.vo-ar-lookup)
   ar-lookup.css already keys its surfaces/borders/text off --surface /
   --border / --text-* / --surface-hover, so adding vo-ar-lookup to the
   shared token block (top of file) re-skins the tile to the Dashboard-Cards
   palette. These rules add the remaining Customer-Inquiry signatures: faint
   section labels, card shadows + rounding, an indicators panel, and search/
   results chrome. Every selector targets ar-lookup.css / ar-lookup.js DOM.
   ============================================================== */
body.vo-ar-lookup .ar-section-title {
    color: var(--text-faint);
    font-size: 11px;
    letter-spacing: .07em;
}
/* Search input + dropdown chrome (CI search styling) */
body.vo-ar-lookup .ar-search-group input {
    border-radius: 12px;
    box-shadow: var(--vo-shadow);
}
body.vo-ar-lookup .ar-search-group input:focus {
    border-color: var(--vo-primary);
}
body.vo-ar-lookup .ar-dropdown {
    border-radius: 12px;
}
/* Quick-indicators list → a card panel of key/value rows (CI detail-section) */
body.vo-ar-lookup .ar-indicators {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    padding: 2px 16px;
}
/* Invoice + payment cards — card chrome */
body.vo-ar-lookup .ar-invoice-card,
body.vo-ar-lookup .ar-payment-card {
    border-radius: 14px;
    box-shadow: var(--vo-shadow);
}
/* Surface tiles get the same soft shadow + rounding */
body.vo-ar-lookup .ar-aging-total,
body.vo-ar-lookup .ar-bucket.zero,
body.vo-ar-lookup .ar-no-invoices,
body.vo-ar-lookup .ar-no-payments {
    border-radius: 12px;
    box-shadow: var(--vo-shadow);
}
/* Toggle — rounded segmented control (active stays brand-green from base) */
body.vo-ar-lookup .ar-toggle {
    border-radius: 12px;
}
/* Overdue indicator value picks up the theme-aware red tone */
body.vo-ar-lookup .ar-ind-value.ar-overdue {
    color: var(--tone-red);
}

/* ==============================================================
   PHASE 2.5 — Web Access (body.vo-web-access)
   web-access.html's inline CSS keys off --surface/--border/--text-*, so
   adding vo-web-access to the shared token block re-skins it to the
   Dashboard-Cards palette. These rules add the CI signatures and pull the
   two off-brand (#4CAF50) buttons onto the WCS brand green. Every selector
   targets web-access.html / web-access.js DOM.
   ============================================================== */
body.vo-web-access .search-input {
    border-radius: 12px;
    box-shadow: var(--vo-shadow);
}
body.vo-web-access .search-input:focus {
    border-color: var(--vo-primary);
}
body.vo-web-access .wa-dropdown {
    border-radius: 12px;
}
/* Customer header + contact cards — CI card chrome */
body.vo-web-access .wa-customer-header {
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
}
body.vo-web-access .wa-customer-name {
    font-size: 22px;
}
body.vo-web-access .wa-contact-card {
    border-radius: 14px;
    box-shadow: var(--vo-shadow);
}
body.vo-web-access .wa-contact-card:hover {
    border-color: var(--vo-primary);
}
body.vo-web-access .wa-contact-role {
    border-radius: 999px;
}
/* Reset / Edit buttons → WCS brand green (base hardcodes #4CAF50) */
body.vo-web-access .wa-btn-reset,
body.vo-web-access .wa-btn-edit {
    background: var(--vo-primary);
}
body.vo-web-access .wa-btn-reset:hover:not(:disabled),
body.vo-web-access .wa-btn-edit:hover:not(:disabled) {
    background: var(--vo-primary-dark);
}

/* ==============================================================
   PHASE 2.5 — Price Levels (body.vo-price-levels)
   price-levels.html's inline CSS keys off --surface/--border/--text-*, so
   adding vo-price-levels to the shared token block re-skins it to the
   Dashboard-Cards palette. These rules add the CI signatures: search chrome,
   a customer-header card, a CI-style pricing table, and rounded action
   buttons (theme-aware red for Remove). Every selector targets
   price-levels.html / price-levels.js DOM.
   ============================================================== */
body.vo-price-levels .search-input {
    border-radius: 12px;
    box-shadow: var(--vo-shadow);
}
body.vo-price-levels .search-input:focus {
    border-color: var(--vo-primary);
}
body.vo-price-levels .pl-dropdown {
    border-radius: 12px;
}
/* Customer header as a card panel + larger name (CI detail header) */
body.vo-price-levels .pl-customer-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--vo-shadow);
    padding: 14px 18px;
}
body.vo-price-levels .pl-customer-name {
    font-size: 22px;
}
/* Pricing table — CI table header + zebra rows */
body.vo-price-levels .pl-table th {
    background: var(--surface-2);
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
}
body.vo-price-levels .pl-table tr:nth-of-type(even) td {
    background: rgba(0, 0, 0, .02);
}
/* Action buttons — rounder; Remove picks up the theme-aware red tone */
body.vo-price-levels .pl-btn-change,
body.vo-price-levels .pl-btn-remove {
    border-radius: 8px;
}
body.vo-price-levels .pl-btn-remove {
    border-color: var(--tone-red);
    color: var(--tone-red);
}

/* ==============================================================
   PHASE 2.5 FIX A — Lookup-tile toolbars: search on top, filters below
   so/bo/po each render a single-row toolbar grid (.{so,bo,po}-toolbar-row,
   defined in each tile's inline <style>). Re-flow to two rows WITHOUT new
   markup: flex-wrap the toolbar, force the active .search-section to a
   full-width top row (order:-1; flex 1 1 100%), and let the filter controls
   wrap onto the row below. Inside the search section, attach the Search
   button to the input (rounded-left input + rounded-right button).
   body.vo-orders outranks the inline .X-md-active toolbar rules. Desktop
   only (mobile already stacks). JS toggles search modes via style.display
   ''/'none', so the visible section is governed by these rules.
   ============================================================== */
@media (min-width: 1024px) {
    body.vo-orders .so-toolbar-row,
    body.vo-orders .bo-toolbar-row,
    body.vo-orders .po-toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.75rem;
    }
    /* Active search section → full-width top row + inline input/button bar */
    body.vo-orders .so-toolbar-row .search-section,
    body.vo-orders .bo-toolbar-row .search-section,
    body.vo-orders .po-toolbar-row .search-section {
        order: -1;
        flex: 1 1 100%;
        display: flex;
        align-items: stretch;
        gap: 0;
        margin: 0;
        min-width: 0;
    }
    body.vo-orders .so-toolbar-row .search-section .search-wrapper,
    body.vo-orders .bo-toolbar-row .search-section .search-wrapper,
    body.vo-orders .po-toolbar-row .search-section .search-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.vo-orders .so-toolbar-row .search-section .search-input,
    body.vo-orders .bo-toolbar-row .search-section .search-input,
    body.vo-orders .po-toolbar-row .search-section .search-input {
        border-radius: 12px 0 0 12px;
        border-right: none;
    }
    body.vo-orders .so-toolbar-row .search-section .search-button,
    body.vo-orders .bo-toolbar-row .search-section .search-button,
    body.vo-orders .po-toolbar-row .search-section .search-button {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        border-radius: 0 12px 12px 0;
        white-space: nowrap;
    }
}

/* ==============================================================
   PHASE 2.5 FIX B — Master-detail tiles: left-lock the rail (match Customer Inquiry)
   .tile-master-detail (desktop-shared.css) already gives the rail a
   border-right separator + a detail panel, but the grid is centered inside a
   capped .main — so AR Lookup / Web Access / Price Levels read as "centered"
   rather than left-locked. Customer Inquiry fills .main (its rule in PHASE 3);
   replicate that for the other three so the rail pins to the left. Desktop only.
   ============================================================== */
@media (min-width: 1024px) {
    body.vo-ar-lookup .main,
    body.vo-web-access .main,
    body.vo-price-levels .main {
        max-width: none;
        width: auto;
        margin: 0;
    }
}

/* ==============================================================
   PHASE 2.5 FIX — PO Lookup toolbar: four uniform filter groups
   Lay the toolbar out as FOUR equal groups — Search by / Status / Confirmation /
   Shipping — each with a centered uppercase label above a centered row of
   borderless, individually-rounded pills (active = brand green), no box.
   #filterBar is flattened with display:contents (po-lookup.js never toggles it)
   so its three groups become equal flex columns of the toolbar alongside the
   mode group; the mode group gets a matching "Search by" ::before label.
   Scoped to vo-po-lookup; the body element + :first/:last-of-type overrides
   outrank the inline .po-md-active segment rules. Desktop only.
   ============================================================== */
@media (min-width: 1024px) {
    /* Flatten the filter-bar wrapper so its 3 groups + the mode group are siblings */
    body.vo-po-lookup .po-toolbar-row .filter-bar {
        display: contents;
    }
    /* The four groups: equal width, centered label line above a centered pill row, no box */
    body.vo-po-lookup .po-toolbar-row .mode-tabs,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        justify-content: center;
        column-gap: 6px;
        row-gap: 6px;
        margin: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    /* Group labels — centered, on their own line above the pills. The 3 filter
       groups carry their label via the inline ::before; add a matching one for
       the mode group ("SEARCH BY"). */
    body.vo-po-lookup .po-toolbar-row .mode-tabs::before {
        content: 'Search by';
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.55;
        color: var(--text-secondary, #5c6a7e);
    }
    body.vo-po-lookup .po-toolbar-row .mode-tabs::before,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group::before {
        flex: 0 0 100%;
        text-align: center;
    }
    /* All pills (mode + filter): borderless, individually rounded, identical size;
       active = brand green. Overriding :first/:last-of-type kills the inline
       segment borders/radii that drew the group boxes. */
    body.vo-po-lookup .po-toolbar-row .mode-tab,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group .filter-btn,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group .filter-btn:first-of-type,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group .filter-btn:last-of-type {
        box-sizing: border-box;
        flex: 0 0 auto;
        height: 34px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        line-height: 1;
        border: none;
        border-radius: 999px;
        background: var(--surface-2, #f6f8fb);
        color: var(--text-secondary, #5c6a7e);
    }
    body.vo-po-lookup .po-toolbar-row .mode-tab.active,
    body.vo-po-lookup .po-toolbar-row .filter-bar .filter-group .filter-btn.active {
        background: var(--vo-primary, #16a34a);
        color: var(--vo-ink, #ffffff);
    }
}

/* ==============================================================
   PHASE 3 — Item Lookup (body.vo-item-lookup)
   item-lookup.html already uses the shared .tile-master-detail layout (rail:
   search + #resultsSection .result-item cards; detail: #itemDetails with
   .details-section / .detail-row / .stock-grid) and keys its surfaces off
   --surface/--border/--text-*. So vo-item-lookup is added to the shared token
   block (palette) and these rules add the Customer-Inquiry Dashboard-Cards
   signatures against item-lookup's REAL DOM. CSS only — the master-detail DOM
   already exists, so no JS/markup restructuring was needed for the layout.
   Every selector targets item-lookup.html / item-lookup.js output.
   ============================================================== */
/* Fill width → left-lock the rail (matches Customer Inquiry) */
@media (min-width: 1024px) {
    body.vo-item-lookup .main {
        max-width: none;
        width: auto;
        margin: 0;
    }
}
/* ---- Search: input + attached Search button ---- */
body.vo-item-lookup .search-section .help-text,
body.vo-item-lookup .search-section .search-helper-text {
    display: none;
}
body.vo-item-lookup .search-section .search-container {
    display: flex;
    align-items: stretch;
    gap: 0;
}
body.vo-item-lookup .search-section .search-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px 0 0 12px;
    border-right: none;
    color: var(--text-primary);
    box-shadow: var(--vo-shadow);
    flex: 1 1 auto;
    min-width: 0;
}
body.vo-item-lookup .search-section .search-input:focus {
    outline: none;
    border-color: var(--vo-primary);
}
body.vo-item-lookup .search-section .search-button {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    border-radius: 0 12px 12px 0;
    background: var(--vo-primary);
    color: var(--vo-ink);
    white-space: nowrap;
}
body.vo-item-lookup .search-section .search-button:hover:not(:disabled) {
    background: var(--vo-primary-dark);
}
/* ---- Result cards ---- */
body.vo-item-lookup #resultsSection h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 12px;
}
body.vo-item-lookup .result-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 14px;
    padding: 15px;
    box-shadow: var(--vo-shadow);
    margin-bottom: 10px;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
body.vo-item-lookup .result-item:hover {
    background: var(--row-hover);
    border-left-color: var(--vo-primary);
}
body.vo-item-lookup .result-sku {
    font-weight: 700;
    font-size: 14px;
    color: var(--sku);
}
body.vo-item-lookup .result-description {
    color: var(--text-primary);
    font-size: 13px;
}
body.vo-item-lookup .result-meta {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
}
/* ---- Detail panel: cards ---- */
@media (min-width: 1024px) {
    body.vo-item-lookup #itemDetails {
        max-width: none;
    }
}
body.vo-item-lookup #itemDetails .details-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--vo-shadow);
    margin: 0 0 16px;
    overflow: hidden;
}
body.vo-item-lookup #itemDetails .section-header {
    background: transparent;
    border: none;
}
body.vo-item-lookup #itemDetails .section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
}
/* Key/value rows */
body.vo-item-lookup #itemDetails .detail-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
body.vo-item-lookup #itemDetails .detail-row:last-child {
    border-bottom: none;
}
body.vo-item-lookup #itemDetails .detail-label {
    font-size: 13px;
    color: var(--text-secondary);
}
body.vo-item-lookup #itemDetails .detail-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
/* Stock grid — metric tiles */
body.vo-item-lookup #itemDetails .stock-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
body.vo-item-lookup #itemDetails .stock-label {
    color: var(--text-secondary);
}
body.vo-item-lookup #itemDetails .stock-value {
    color: var(--text-primary);
    font-weight: 700;
}

/* ==============================================================
   Recent Searches (Item Lookup + Customer Price Lookup)
   A clickable card list rendered below the search box by
   js/recent-searches.js. NOT scoped to a vo-* body class — Customer Price
   has no overhaul body class — so it uses globally-available tokens with
   safe fallbacks and renders consistently on both tiles (Item Lookup gets
   the overhaul palette; Customer Price falls back to the base theme).
   ============================================================== */
.recent-searches {
    margin: 0 0 1rem;
}
.recent-searches .rs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.recent-searches .rs-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint, #94a3b8);
}
.recent-searches .rs-empty {
    font-size: 12px;
    color: var(--text-faint, #94a3b8);
    padding: 6px 2px 2px;
}
.recent-searches .rs-clear {
    background: none;
    border: none;
    color: var(--primary-green, #16a34a);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.recent-searches .rs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.recent-searches .rs-item {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e0e5ec);
    border-radius: 10px;
    box-shadow: var(--vo-shadow, 0 4px 16px rgba(20, 35, 60, .08));
    overflow: hidden;
    transition: border-color 150ms ease;
}
.recent-searches .rs-item:hover {
    border-color: var(--primary-green, #16a34a);
}
.recent-searches .rs-item-go {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary, #1a2433);
    font-size: 13px;
    padding: 10px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-searches .rs-item-x {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-faint, #94a3b8);
    font-size: 18px;
    line-height: 1;
    padding: 0 12px;
    cursor: pointer;
}
.recent-searches .rs-item-x:hover {
    color: var(--tone-red, #dc2626);
}