/* ============================================================
   MODERN INTERFACE — the upgraded WMS look, switched on like a theme
   ------------------------------------------------------------
   Viet, 2026-10-03: "I want to rework the whole WMS with the new fonts and page settings,
   can we make this UXUI an upgraded version of the WMS? So everything we do here will be a
   settings change, similar to themes?"

   Two independent settings:
     data-theme (dark / light / warm / sand / onyx)  = COLOURS - unchanged
     data-ui    ("modern", or absent = Classic)      = TYPE + SHAPE + NAVIGATION - this file

   Every rule below starts with html[data-ui="modern"], so Classic is exactly the WMS as it
   was. Switched in the account menu (Interface: Classic | Modern), saved per browser in
   localStorage 'titol-ui' (bootstrap in index.html, titolSetUI() there).
   Reference: Vercel's dashboard - Geist type, 14px base, quiet labels, thin-bordered cards,
   6px controls, underline tabs. The Settings left menu (js/settings-shell.js) is Modern only.
   To restyle something for Modern: add a rule here, prefixed html[data-ui="modern"].
   Colours always come from the theme tokens (--bg-*, --text-*, --accent ...), never hex.
   ============================================================ */

/* ---- Type sizes: Vercel's scale (Viet, 2026-10-03: "adjust the font size like this" ->
   "Vercel's exact sizes"). Every page sizes its text through these tokens, so this one block
   moves the whole app: labels 12px, body / tables / menus / buttons 14px, inputs 15px,
   larger text 16px, titles 20px. Classic keeps 11.5 / 12.5 / 13.6 / 14.7 / 16px. ---- */
html[data-ui="modern"] {
    --fs-2xs: 0.75rem;   /* 12px */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.75rem;    /* 12px */
    --fs-base: 0.875rem; /* 14px */
    --fs-md: 0.9375rem;  /* 15px */
    --fs-lg: 1rem;       /* 16px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-3xs: 0.6875rem; /* 11px - tiny labels */
    --fs-2xl: 1.5rem;    /* 24px - page titles, big numbers */
    --fs-3xl: 2rem;      /* 32px - hero numbers */
}

/* ---- Text size (account menu > Interface > Text size): the root font size, both interfaces.
   Not Modern-only - it is the reader's own choice. index.html titolSetTextSize(). ---- */
html[data-ts="-2"] { font-size: 88%; }
html[data-ts="-1"] { font-size: 94%; }
html[data-ts="1"] { font-size: 106%; }
html[data-ts="2"] { font-size: 112%; }

/* ---- Type: Geist everywhere; Space Mono stays wherever a page names it (ids, codes) ---- */
html[data-ui="modern"] body {
    font-family: Geist, 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html[data-ui="modern"] button,
html[data-ui="modern"] input,
html[data-ui="modern"] select,
html[data-ui="modern"] textarea { font-family: inherit; }
html[data-ui="modern"] h1,
html[data-ui="modern"] h2,
html[data-ui="modern"] h3 { letter-spacing: -0.02em; }

/* ---- Cards: thin border, 10px corners, no shadow ---- */
html[data-ui="modern"] .card {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: none;
}

/* ---- Controls: 6px corners, a calm focus ring ---- */
html[data-ui="modern"] .filter-input,
html[data-ui="modern"] .filter-select {
    border-radius: 6px;
    background: var(--bg-card);
}
html[data-ui="modern"] .filter-input:focus,
html[data-ui="modern"] .filter-select:focus {
    box-shadow: 0 0 0 1px var(--accent);
}
html[data-ui="modern"] .btn {
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* ---- Table headers: sentence case, quiet, no tracking (Vercel tables) ---- */
html[data-ui="modern"] th,
html[data-ui="modern"] .data-table th {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--text-muted);
}

/* ---- Page tab bars, Vercel's top menu (Viet, 2026-10-03: "The Top Menu should work like the Vercel Menu
   system"). Text tabs (js/vercel-tabs.js wraps a label's emoji in .vt-ico, hidden here), one rounded hover
   highlight that slides between tabs (.vt-hover, moved by vercel-tabs.js), the current tab underlined on the
   bar's own bottom line. Applies to every .data-sub-tabs bar and the Invoice Manager's .tm2-tabs. ---- */
html[data-ui="modern"] :is(.data-sub-tabs, .tm2-tabs) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 !important;
    border-bottom: 1px solid var(--border-subtle);
}
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button, .tm2-tabs > a) {
    position: relative;
    z-index: 1;
    margin: 6px 0 8px;
    padding: 6px 12px;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--text-muted);
    font-size: var(--fs-base, 0.78rem);
    font-weight: 400;
    box-shadow: none;
    transition: color .15s ease;
}
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button, .tm2-tabs > a):hover { color: var(--text-primary); }
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button, .tm2-tabs > a):is(.active, [aria-selected="true"], .on) {
    color: var(--text-primary);
    font-weight: 400;
}
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button, .tm2-tabs > a):is(.active, [aria-selected="true"], .on)::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -8px;   /* inside the bar's padding box: bars scroll sideways, so their overflow would clip it */
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}
html[data-ui="modern"] .vt-ico { display: none; }
.vt-hover { display: none; }
html[data-ui="modern"] .vt-hover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 6px;
    background: var(--bg-elevated);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, width .18s ease, opacity .15s ease;
}

/* ---- Left menu (core.js #adm-panel) and the phone bottom bar: Geist ---- */
html[data-ui="modern"] #adm-panel,
html[data-ui="modern"] #adm-panel button,
html[data-ui="modern"] #adm-panel input,
html[data-ui="modern"] #adm-bottombar { font-family: Geist, 'DM Sans', -apple-system, 'Segoe UI', sans-serif; }

/* ============================================================
   PAGE KIT (2026-10-03, Viet: "Lets go 1-7") - the pages built on js/page-template.js
   (Task Manager, Delivery Hub, Shipments, Invoice Manager, Receiving, Inventory, Reports)
   take Vercel's page anatomy: a plain title, quiet description, neutral stat cards with a
   small tone dot, sentence-case labels, light primary buttons, outlined ghost buttons.
   Their text sizes already run through the --fs-* tokens (tools/design-gate.js).
   ============================================================ */
html[data-ui="modern"] .tp-head { gap: 10px; margin-bottom: 14px; }
html[data-ui="modern"] .tp-head h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; }
html[data-ui="modern"] .tp-head .tp-ico { display: none; }
html[data-ui="modern"] .tp-head .tp-desc { color: var(--text-muted); }

html[data-ui="modern"] .tp-cards { gap: 10px; margin-bottom: 14px; }
html[data-ui="modern"] .tp-card {
    border-left: 1px solid var(--border-subtle);
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    transition: border-color .15s, background .15s;
}
html[data-ui="modern"] .tp-card:hover { border-color: var(--border-medium); }
html[data-ui="modern"] .tp-card.on { box-shadow: none; border-color: var(--text-primary); background: var(--bg-card); }
html[data-ui="modern"] .tp-card .tp-l {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html[data-ui="modern"] .tp-card .tp-l::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tp-tone);
    flex: 0 0 auto;
}
html[data-ui="modern"] .tp-card .tp-n {
    font-family: inherit;
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    /* 3.1819 (Viet, Dashboard: "center align all the cards data, leave the title left aligned"):
       the label keeps the card's left edge, the number sits centred under it */
    align-self: stretch;
    text-align: center;
}

html[data-ui="modern"] .tp-f label,
html[data-ui="modern"] .tp-table th {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Buttons: Vercel's light primary and outlined secondary */
html[data-ui="modern"] .btn-primary {
    background: var(--accent);
    color: var(--btn-primary-text);
    border: 1px solid var(--accent);
    box-shadow: none;
}
html[data-ui="modern"] .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
html[data-ui="modern"] .btn-ghost,
html[data-ui="modern"] .btn-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}
html[data-ui="modern"] .btn-ghost:hover,
html[data-ui="modern"] .btn-secondary:hover { background: var(--bg-card-hover); }

/* Shouting labels: the seven pages write many small headers inline as UPPERCASE with tracking.
   Modern reads them in sentence case like Vercel. Codes stay as typed (ids are already caps). */
/* 3.1665: every page, not only the first seven (Viet: fold "LINK TO TASK" etc. into Vstyle) */
html[data-ui="modern"] .tab-content [style*="text-transform:uppercase"],
html[data-ui="modern"] .tab-content [style*="text-transform: uppercase"] {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* The pages' own header classes that shout in Classic (column heads, section heads, small field labels).
   Status pills (.db-status-label, .sd-status) and printed slips / labels keep their capitals. */
html[data-ui="modern"] :is(.db-col-head, .db-cols-pop .dbc-h,
    .sd-ctab th, .sd-sec-h, .sd-metawrap .l, .sd-foot .sd-lbl,
    .tm2-cards .tm2-card span, .tm2-rvt th, .tm2-sec, .tm2-brandpop .bp-head, .tm2-auditk, .tm2-emk,
    .rpt-cols-pop .rpc-h, #tab-reports .info-label,
    #sm-overlay .sm-v2gh, #sm-overlay .sm-caday) {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Template parts added for the Dashboard (3.1644): kicker, shortcut tiles, panels */
html[data-ui="modern"] .tp-ico { display: none; }
html[data-ui="modern"] .tp-kicker { font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-size: var(--fs-base); }
html[data-ui="modern"] .tp-tile { border-radius: 10px; box-shadow: none; transform: none; padding: 14px; }
html[data-ui="modern"] .tp-tile::before,
html[data-ui="modern"] .tp-tile::after { display: none; }
html[data-ui="modern"] .tp-tile:hover { border-color: var(--border-medium); background: var(--bg-card-hover); box-shadow: none; transform: none; }
html[data-ui="modern"] .tp-tile-ico { width: 34px; height: 34px; border-radius: 8px; font-size: var(--fs-lg); background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
html[data-ui="modern"] .tp-tile-t { font-weight: 500; font-size: var(--fs-base); }
html[data-ui="modern"] .tp-tile-arr { color: var(--text-muted); }
html[data-ui="modern"] .tp-panel { border-radius: 10px; }
html[data-ui="modern"] .tp-phead { padding: 12px 16px; }
html[data-ui="modern"] .tp-ptitle { font-size: var(--fs-base); font-weight: 600; }
html[data-ui="modern"] .tp-badge { font-family: inherit; letter-spacing: 0; font-weight: 500; background: var(--bg-elevated); color: var(--text-secondary); }
html[data-ui="modern"] .tp-pbtn { border-radius: 6px; border-color: var(--border-medium); color: var(--text-primary); background: var(--bg-card); }
html[data-ui="modern"] .tp-pbtn:hover { background: var(--bg-card-hover); border-color: var(--border-medium); color: var(--text-primary); }

/* ============================================================
   DASHBOARD OVERVIEW (Viet, 2026-10-03: "The Dashboard Grid really bothers me" -> "the whole layout").
   Modern lays the dashboard modules (dash-modules.js .dashmod[data-mod]) on one page grid like
   Vercel's overview: greeting left + the numbers right, shortcuts, the three lists (Job Queue wider),
   then calendar, brands. Customize still hides / collapses a module; the placement is fixed here.
   ============================================================ */
html[data-ui="modern"] #tab-dashboard.active {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 24px 8px;
    align-items: start;
}
html[data-ui="modern"] #tab-dashboard > * { grid-column: 1 / -1; min-width: 0; }
html[data-ui="modern"] #tab-dashboard > .dashmod > div { padding: 0 !important; }
/* the sections run in the order Customize saves (dash-modules.js) - no CSS order, so dragging works;
   only the Customize pill is pinned to the foot */
html[data-ui="modern"] #tab-dashboard > .cdash-custfoot      { order: 9; padding: 0 0 20px; }
/* 3.1689: the status cards need the full width - the greeting no longer shares its row with them */
html[data-ui="modern"] #tab-dashboard .cdash-hero-tp { margin: 0; }
html[data-ui="modern"] #tab-dashboard .cdash-hero-tp .tp-head { margin-bottom: 0; }
html[data-ui="modern"] #tab-dashboard [data-mod="kpi"] .tp-cards { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html[data-ui="modern"] #tab-dashboard [data-mod="kpi"] .tp-card { padding: 10px 14px; }

/* shortcuts: one quiet row */
html[data-ui="modern"] #tab-dashboard .tp-tiles { margin-bottom: 0; gap: 10px; }
html[data-ui="modern"] #tab-dashboard .tp-tile { padding: 10px 12px; gap: 10px; }
html[data-ui="modern"] #tab-dashboard .tp-tile-ico { width: 28px; height: 28px; font-size: var(--fs-base); }
html[data-ui="modern"] #tab-dashboard .tp-tile-s { display: none; }

/* the three lists: Job Queue wider, quiet rows */
html[data-ui="modern"] #tab-dashboard .cdash-jq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { html[data-ui="modern"] #tab-dashboard .cdash-jq-grid { grid-template-columns: 1fr; } }
html[data-ui="modern"] #tab-dashboard .cdash-jq-row { padding: 9px 16px; border-bottom-color: var(--border-subtle); }
html[data-ui="modern"] #tab-dashboard :is(.cdash-jq-tag, .cdash-jq-id, .cdash-jq-urg, .cdash-jq-st, .cdash-ship-brand, .cdash-ship-metric, .cdash-ship-date) {
    font-family: inherit;
    letter-spacing: 0;
}
html[data-ui="modern"] #tab-dashboard .cdash-jq-tag { background: var(--bg-elevated); color: var(--text-secondary); font-weight: 500; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-id { color: var(--text-primary); font-weight: 500; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-title-cell { color: var(--text-secondary); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-urg { font-weight: 500; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-urg:is([data-u="standard"], [data-u="normal"]) { visibility: hidden; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-st { text-transform: none; font-weight: 500; color: var(--text-secondary); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-st .dot { box-shadow: none; }
html[data-ui="modern"] #tab-dashboard .cdash-ship-brand { background: none; padding: 0; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-more { border-top: 1px solid var(--border-subtle); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-more a { color: var(--text-primary); }

/* ============================================================
   CALENDAR WIDGET (Viet, 2026-10-03: "Lets fix the Calendar") - calendar.js calRenderDashboardWidget,
   on the Dashboard and the expanded work-week view. Its markup is inline-styled (Classic), so the
   Modern look overrides by class with !important. Quiet card, sentence-case header, day columns as
   plain panels (today ringed), events as rows with a small type dot; no "All day" line.
   ============================================================ */
html[data-ui="modern"] .cal-w { padding: 14px 16px !important; border-radius: 10px !important; }
html[data-ui="modern"] .cal-w .cal-w-name { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-base) !important; font-weight: 600 !important; color: var(--text-primary) !important; }
html[data-ui="modern"] .cal-w .cal-w-range { font-family: inherit !important; color: var(--text-muted) !important; font-size: var(--fs-sm) !important; }
html[data-ui="modern"] .cal-w .cal-cols-btn { font-family: inherit; border-radius: 6px !important; border-color: transparent !important; background: transparent !important; color: var(--text-muted) !important; font-weight: 500 !important; padding: 3px 9px !important; }
html[data-ui="modern"] .cal-w .cal-cols-btn.is-on { background: var(--bg-elevated) !important; border-color: var(--border-medium) !important; color: var(--text-primary) !important; }
html[data-ui="modern"] .cal-w .cal-refresh,
html[data-ui="modern"] .cal-w .cal-open-tab { border-radius: 6px; }
html[data-ui="modern"] .cal-w .cal-w-grid { gap: 12px !important; margin-top: 14px !important; }

html[data-ui="modern"] .cal-w .cal-w-day { background: transparent !important; border: 1px solid var(--border-subtle) !important; border-radius: 8px !important; padding: 10px !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today { border-color: var(--border-medium) !important; background: var(--bg-card-hover) !important; }
html[data-ui="modern"] .cal-w .cal-w-dhead { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 8px !important; }
html[data-ui="modern"] .cal-w .cal-w-dlbl { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-sm) !important; color: var(--text-muted) !important; font-weight: 500 !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today .cal-w-dlbl { color: var(--text-primary) !important; font-weight: 600 !important; }
html[data-ui="modern"] .cal-w .cal-w-dnum { font-family: inherit !important; font-size: var(--fs-sm) !important; color: var(--text-muted) !important; font-weight: 500 !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today .cal-w-dnum { color: var(--text-primary) !important; }

html[data-ui="modern"] .cal-w .cal-widget-row {
    position: relative;
    border-left: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 5px 8px 5px 20px !important;
    margin-bottom: 2px !important;
    font-size: var(--fs-sm) !important;
}
html[data-ui="modern"] .cal-w .cal-widget-row::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ev, var(--text-muted));
}
html[data-ui="modern"] .cal-w .cal-widget-row:hover { background: var(--bg-elevated) !important; }
html[data-ui="modern"] .cal-w .cal-w-meta.is-allday,
html[data-ui="modern"] .cal-w .cal-w-time.is-allday { display: none !important; }
html[data-ui="modern"] .cal-w :is(.cal-w-time, .cal-w-job, .cal-w-brand) { font-family: inherit !important; }
html[data-ui="modern"] .cal-w .cal-w-brand { color: var(--text-muted) !important; font-weight: 500; margin-right: 5px !important; }
html[data-ui="modern"] .cal-w .cal-w-job { background: var(--bg-elevated) !important; }
html[data-ui="modern"] .cal-w .cal-w-title { color: var(--text-secondary) !important; }
html[data-ui="modern"] .cal-w .cal-widget-row:hover .cal-w-title { color: var(--text-primary) !important; }
html[data-ui="modern"] .cal-w .cal-w-none { opacity: 1 !important; color: var(--text-muted) !important; text-align: left !important; padding: 4px 8px !important; }
html[data-ui="modern"] .cal-w .cal-widget-more { text-align: left !important; padding: 4px 8px !important; }

/* No right drawer in Modern (Viet, 2026-10-03: "In Modern, can we kill the Right drawer?").
   core.js #right-panel (Deliverables: exports + Scan Mode / Theme / Hard Refresh) and its tab are hidden;
   exports live on their pages, Theme in the account menu, Scan mode moved there too (auth.js #auth-mi-scan). */
html[data-ui="modern"] #right-trigger,
html[data-ui="modern"] #right-panel { display: none !important; }
html[data-ui="modern"] #app-wrapper.rpanel-open { margin-right: 0 !important; }

/* ============================================================
   VERCEL ELEMENTS (Viet, 2026-10-03: "pull in all of Vercel's styling elements? Like Alternating Rows
   in any Card"). Modern only. One token for the stripe so every list and table in a card matches.
   ============================================================ */
html[data-ui="modern"] {
    --row-stripe: color-mix(in srgb, var(--text-primary) 3%, transparent);
    --row-hover: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --focus-ring: 0 0 0 2px color-mix(in srgb, var(--text-primary) 22%, transparent);
}

/* alternating rows: tables in any card, and the card lists (dashboard panels, template table cards) */
html[data-ui="modern"] :is(.card, .tp-panel, .tp-table) tbody tr:nth-child(even) > td { background-color: var(--row-stripe); }
html[data-ui="modern"] :is(.card, .tp-panel, .tp-table) tbody tr:hover > td { background-color: var(--row-hover); }
html[data-ui="modern"] .tp-panel .cdash-jq-row:nth-child(even) { background: var(--row-stripe); }
html[data-ui="modern"] .tp-panel .cdash-jq-row:hover { background: var(--row-hover); }
html[data-ui="modern"] .tp-panel .cdash-jq-row { border-bottom: 0; }

/* table heads: quiet, on the card's own colour, a single hairline under them */
html[data-ui="modern"] :is(.card, .tp-table) thead th {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
}
html[data-ui="modern"] :is(.card, .tp-table) tbody td { border-bottom-color: transparent; }

/* inputs + selects: 6px corners, one border colour, Vercel's soft focus ring */
html[data-ui="modern"] :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input:not([type]), select, textarea):not(.adm-drill-find input) {
    border-radius: 6px;
}
html[data-ui="modern"] :is(input, select, textarea, button):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* pills / badges read as Vercel's rounded labels */
html[data-ui="modern"] :is(.badge, .status-badge, .tp-badge) { border-radius: 999px; }

/* thin, quiet scrollbars */
html[data-ui="modern"] * { scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; }
html[data-ui="modern"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-ui="modern"] ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
html[data-ui="modern"] ::-webkit-scrollbar-track { background: transparent; }

/* Job Queue card rows (3.1654): two lines, title over brand + age, one status column */
html[data-ui="modern"] #tab-dashboard .cdash-jq-row2 { padding: 10px 16px; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-t { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-sub { color: var(--text-muted); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-row2 .cdash-jq-st { color: var(--text-secondary); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-row2 .cdash-jq-urg { font-size: var(--fs-2xs); color: var(--c); }
html[data-ui="modern"] #tab-dashboard .cdash-jq-urg { text-transform: none; letter-spacing: 0; }
/* 3.1656: the three list cards are one size - equal columns, stretched to the tallest */
html[data-ui="modern"] #tab-dashboard .cdash-jq-grid > div { display: flex; min-width: 0; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-grid > div > .tp-panel { flex: 1; display: flex; flex-direction: column; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-grid .tp-pbody { flex: 1; }
html[data-ui="modern"] #tab-dashboard .cdash-jq-row2 .cdash-ship-date { color: var(--text-muted); }

/* ============================================================
   CLIENT INVENTORY in Vstyle (Viet, 2026-10-03: "#client-inv Can we give it Vercel Style?").
   The brand gallery reads like Vercel's project grid: a quiet page head, sentence-case section
   labels, and project cards - the logo on its own raised preview area, name + stats under it,
   a hairline border that brightens on hover (no lift, glow or coloured edge).
   ============================================================ */
html[data-ui="modern"] #tab-client-inv .cinv-hero { padding: 4px 0 14px; margin-bottom: 18px; }
html[data-ui="modern"] #tab-client-inv .cinv-hero-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; }
html[data-ui="modern"] #tab-client-inv .cinv-hero-sub { font-family: inherit; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text-muted); }
html[data-ui="modern"] #tab-client-inv .cinv-hero-search input { border-radius: 6px; }
html[data-ui="modern"] #tab-client-inv .cinv-section-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }

html[data-ui="modern"] #tab-client-inv .cinv-tile-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
html[data-ui="modern"] #tab-client-inv .cinv-tile {
    padding: 0;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color .15s ease;
}
html[data-ui="modern"] #tab-client-inv .cinv-tile::before { display: none; }
html[data-ui="modern"] #tab-client-inv .cinv-tile:is(:hover, :focus-visible) { transform: none; box-shadow: none; border-color: var(--border-medium); }
html[data-ui="modern"] #tab-client-inv .cinv-tile:hover .cinv-tile-media img { transform: none; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-media {
    height: 132px;
    border-radius: 0;
    padding: 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
html[data-ui="modern"] #tab-client-inv .cinv-tile-body { padding: 12px 14px 14px; gap: 4px; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-name { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.01em; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-meta { gap: 6px; color: var(--text-muted); }
html[data-ui="modern"] #tab-client-inv :is(.cinv-tile-code, .cinv-tile-units) { font-family: inherit; letter-spacing: 0; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-code { color: var(--text-secondary); font-weight: 500; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-code::after { content: ' ·'; color: var(--text-muted); }
html[data-ui="modern"] #tab-client-inv .cinv-tile-arrow { display: none; }
html[data-ui="modern"] #tab-client-inv .cinv-star-btn { top: 10px; left: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle); }
html[data-ui="modern"] #tab-client-inv .cinv-star-btn:hover { transform: none; border-color: var(--border-medium); }

/* Tab labels coloured inline (Operations: Pipeline green, AI Email Intake violet) read like every other
   tab in Vstyle (Viet, 2026-10-03: "#orders/ops-submit Convert Tab Menu to Vstyle") */
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button)[style*="color"] { color: var(--text-muted) !important; }
html[data-ui="modern"] :is(.data-sub-tab, .tm2-tabs > button)[style*="color"]:is(:hover, .active) { color: var(--text-primary) !important; }

/* Step bars (Create Pick Order: 1 Create Order / 2 Pick List / 3 Confirm & Deduct) as a Vstyle step menu:
   a numbered circle + the step name, the current step bright and underlined like a tab, done steps ticked green */
html[data-ui="modern"] .order-stepper {
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}
html[data-ui="modern"] .order-step {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-base);
    color: var(--text-muted);
}
html[data-ui="modern"] .order-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
}
html[data-ui="modern"] .order-step.active { background: transparent; color: var(--text-primary); }
html[data-ui="modern"] .order-step.active .order-step-num { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-primary); }
html[data-ui="modern"] .order-step.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -9px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}
html[data-ui="modern"] .order-step.done { background: transparent; color: var(--text-secondary); }
html[data-ui="modern"] .order-step.done .order-step-num { border-color: var(--success); color: var(--success); }

/* Create Pick Order header buttons: one primary (Place Order), the rest Vstyle secondary - no tinted fills */
html[data-ui="modern"] #tab-orders [onclick^="cordOpenForCurrentBrand"] { border-radius: 6px !important; font-weight: 500 !important; }
html[data-ui="modern"] :is(#btn-order-client-requests, #btn-order-modify) {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}
html[data-ui="modern"] :is(#btn-order-client-requests, #btn-order-modify):hover { background: var(--bg-card-hover) !important; }
/* 3.1668: brand name above the logo - it gets the card's top padding, clear of the star */
html[data-ui="modern"] #tab-client-inv .cinv-tile-name-top { padding: 14px 40px 12px; font-size: var(--fs-base); font-weight: 600; }
html[data-ui="modern"] #tab-client-inv .cinv-tile-media { border-top: 1px solid var(--border-subtle); }
html[data-ui="modern"] #tab-client-inv .cinv-tile-body { padding: 10px 14px 12px; }

/* ============================================================
   DASHBOARD TYPE SCALE (Viet, 2026-10-03: "Can we get all the Text Uniform throughout all the Cards? The sizes").
   Three steps for everything inside a card:
     card title    --fs-base, 600   (panel titles, calendar title, Brands strip title)
     item name     --fs-base, 500   (list rows, calendar events, shortcuts)
     supporting    --fs-sm,   400   (sub lines, dates, status, counts, badges, labels, buttons)
   The greeting (page title) and the big KPI numbers stay as they are.
   ============================================================ */
html[data-ui="modern"] #tab-dashboard :is(.tp-ptitle, .cal-w-name, .cdash-bm-title) {
    font-size: var(--fs-base) !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
    font-family: inherit !important; text-transform: none !important;
}
html[data-ui="modern"] #tab-dashboard :is(.cdash-jq-t, .cal-w-title, .tp-tile-t) {
    font-size: var(--fs-base) !important; font-weight: 500 !important; line-height: 1.35 !important;
}
html[data-ui="modern"] #tab-dashboard :is(.cdash-jq-sub, .cdash-ship-date, .cdash-jq-st, .cdash-jq-urg, .cdash-jq-more, .cdash-jq-more a,
        .cal-w-range, .cal-w-dlbl, .cal-w-dnum, .cal-w-brand, .cal-w-time, .cal-w-job, .cal-widget-more, .cal-w-none, .cal-cols-btn,
        .tp-badge, .tp-pbtn, .tp-l, .tp-tile-s, .cdash-bm-count, .cdash-bm-toggle, .cdash-customize, .tp-kicker) {
    font-size: var(--fs-sm) !important; font-weight: 400 !important; font-family: inherit !important; letter-spacing: 0 !important;
}
html[data-ui="modern"] #tab-dashboard .tp-kicker .cdash-wx { font-weight: 500 !important; }
html[data-ui="modern"] #tab-dashboard .tp-tile-arr { font-size: var(--fs-base) !important; }
html[data-ui="modern"] #tab-dashboard .cal-w-day.is-today .cal-w-dlbl { font-weight: 500 !important; }

/* Calendar card rows read like the Job Queue rows (3.1673, Viet: "run the Calendar card so that the records
   show just like Job Queue"): title (brand taken out) over a muted line - type dot, brand, time - flat rows
   with the same stripe and hover. calendar.js draws .cal-w-v in every row; Classic keeps its own lines. */
.cal-w-v { display: none; }
html[data-ui="modern"] .cal-w .cal-w-v { display: block; min-width: 0; }
html[data-ui="modern"] .cal-w .cal-widget-row :is(.cal-w-meta, .cal-w-title) { display: none !important; }
html[data-ui="modern"] .cal-w .cal-w-day { padding: 0 !important; overflow: hidden; }
html[data-ui="modern"] .cal-w .cal-w-dhead { padding: 10px 12px 6px !important; margin: 0 !important; }
html[data-ui="modern"] .cal-w .cal-widget-row {
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
html[data-ui="modern"] .cal-w .cal-widget-row::before { display: none; }
html[data-ui="modern"] .cal-w .cal-widget-row:nth-child(even) { background: var(--row-stripe) !important; }
html[data-ui="modern"] .cal-w .cal-widget-row:hover { background: var(--row-hover) !important; }
html[data-ui="modern"] .cal-w .cal-w-vt {
    font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); line-height: 1.35;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
html[data-ui="modern"] .cal-w .cal-w-vs {
    display: flex; align-items: center; gap: 6px; margin-top: 2px;
    font-size: var(--fs-sm); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="modern"] .cal-w .cal-w-vdot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ev, var(--text-muted)); }
html[data-ui="modern"] .cal-w :is(.cal-widget-more, .cal-w-none) { padding: 8px 12px !important; }
/* 3.1676 (Viet: "remove the borders from there too"): no divider lines inside the Client Inventory brand
   card - name, logo and numbers sit on the card itself, like the Order Request brand cards */
html[data-ui="modern"] #tab-client-inv .cinv-tile-media { border-top: 0; border-bottom: 0; background: transparent; }

/* Dashboard brand slider (Viet, 2026-10-03: "remove the card container and mute the show hide"):
   the logos run on the page itself; the Show / Hide control is quiet text that brightens on hover */
html[data-ui="modern"] #tab-dashboard .cdash-bm { background: transparent; border: 0; border-radius: 0; }
html[data-ui="modern"] #tab-dashboard .cdash-bm-head { border-bottom: 0; padding: 0 0 6px; }
html[data-ui="modern"] #tab-dashboard .cdash-bm-body { padding: 4px 0; }
html[data-ui="modern"] #tab-dashboard .cdash-bm-toggle {
    border: 0 !important; background: none !important; padding: 2px 4px !important;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--text-muted) !important; opacity: .5; transition: opacity .15s ease;
}
html[data-ui="modern"] #tab-dashboard .cdash-bm-toggle:hover { opacity: 1; color: var(--text-primary) !important; }
/* 3.1679: no dates on the calendar card - the range in its header and the day numbers go; weekday names stay */
html[data-ui="modern"] .cal-w .cal-w-range { display: none !important; }
/* 3.1685 (Viet: "add the Dates back to the top of the card right aligned"): each day column shows its date,
   right-aligned on the weekday line, muted (today bright) */
html[data-ui="modern"] .cal-w .cal-w-dhead { display: flex !important; justify-content: space-between !important; align-items: baseline !important; }
html[data-ui="modern"] .cal-w .cal-w-dnum { display: inline !important; margin-left: auto; text-align: right; font-family: inherit !important; font-size: var(--fs-sm) !important; font-weight: 400 !important; color: var(--text-muted) !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today .cal-w-dnum { color: var(--text-primary) !important; font-weight: 500 !important; }

/* Calendar card as ONE card (Viet, 2026-10-03: "remove the inner card that separates the days of the week ...
   Columns become the days of the week"): the day panels lose their boxes; the grid runs edge to edge under
   the header and the days are columns split by hairlines. Today keeps a faint column tint. */
html[data-ui="modern"] .cal-w .cal-w-grid {
    gap: 0 !important;
    margin: 14px -16px -14px !important;
    border-top: 1px solid var(--border-subtle);
}
html[data-ui="modern"] .cal-w .cal-w-day {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
html[data-ui="modern"] .cal-w .cal-w-day + .cal-w-day { border-left: 1px solid var(--border-subtle) !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today { background: var(--row-stripe) !important; }
html[data-ui="modern"] .cal-w .cal-w-dhead { padding: 10px 12px 8px !important; }

/* The main Calendar page (calendar.js calMultiDayGridHTML: 3-Day / 5-Day / Week) uses the Dashboard calendar
   card's template (3.1685, Viet: "apply same template to the main calendar"): one card, days as columns split
   by hairlines, Job-Queue-style rows. Its wrapper is .cal-w.cal-w-main - no header row, so the grid is the card. */
html[data-ui="modern"] .cal-w.cal-w-main { padding: 0 !important; border: 1px solid var(--border-subtle); border-radius: 10px !important; overflow: hidden; background: var(--bg-card); }
html[data-ui="modern"] .cal-w.cal-w-main .cal-w-grid { margin: 0 !important; border-top: 0; }
html[data-ui="modern"] .cal-w.cal-w-main .cal-w-day { min-height: 60vh; }
html[data-ui="modern"] .cal-w .cal-w-day.is-drop { background: var(--row-hover) !important; }
html[data-ui="modern"] .cal-w.cal-w-main .cal-event-row { cursor: grab; }
/* 3.1687 (Viet: "alternate the days bg color to create separation"): every other day column is tinted;
   today stays the brightest column (Dashboard card + main Calendar) */
html[data-ui="modern"] .cal-w .cal-w-day:nth-child(even) { background: color-mix(in srgb, var(--text-primary) 2.5%, transparent) !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today { background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-drop { background: var(--row-hover) !important; }
/* 3.1688 (Viet: "highlight the current day if it's shown on the weekly calendar"): today's column carries a
   bright top edge, its date as a filled pill and a bright weekday name (Dashboard card + main Calendar) */
html[data-ui="modern"] .cal-w .cal-w-day.is-today { box-shadow: inset 0 2px 0 var(--text-primary); }
html[data-ui="modern"] .cal-w .cal-w-day.is-today .cal-w-dlbl { color: var(--text-primary) !important; font-weight: 600 !important; }
html[data-ui="modern"] .cal-w .cal-w-day.is-today .cal-w-dnum {
    background: var(--text-primary); color: var(--bg-primary) !important;
    border-radius: 999px; padding: 1px 8px; font-weight: 600 !important;
}
/* 3.1689: the job status cards (one per Task Manager status + Open jobs) wrap across the row */
html[data-ui="modern"] #tab-dashboard [data-mod="kpi"] .tp-cards { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; }

/* Client Inventory: pick a style to order (3.1692) - both interfaces */
.cinv-style-cell:hover { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.cinv-style-cell.is-picked { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; box-shadow: inset 3px 0 0 var(--accent); }
html[data-ui="modern"] .cinv-style-cell.is-picked { background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important; box-shadow: inset 2px 0 0 var(--text-primary); }
#cinv-ab-mid .cinv-ab-main.is-ready { opacity: 1; }


/* ============================================================
   BATCH 1 - CLIENT-FACING SERVICES PAGES IN VSTYLE (Viet, 2026-10-03: "Yes" to Batch 1)
   Quotes (quotes.js .qt-*), Rate Card (rate-card-public.js .rcp-*), Service Terms (late-fee.js .lf-*) and
   Hours & Holidays (holidays.js, template head). Same page anatomy as everything else in Vstyle:
   no boxed hero - a muted kicker, the title, a muted lede; thin-border 10px cards; light primary button,
   outlined secondary buttons; sentence-case labels; striped / hover rows.
   ============================================================ */
html[data-ui="modern"] :is(.qt-hero, .rcp-hero) {
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 0 6px !important; margin-bottom: 18px !important; align-items: flex-end !important;
}
html[data-ui="modern"] :is(.qt-hero, .rcp-hero) .k, html[data-ui="modern"] .tp-kicker {
    text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important;
    font-size: var(--fs-sm) !important; font-weight: 400 !important; color: var(--text-muted) !important;
}
html[data-ui="modern"] :is(.qt-h1, .rcp-h1, .lf-h1) { font-size: var(--fs-2xl) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
html[data-ui="modern"] :is(.qt-lede, .rcp-lede, .lf-lede) { font-size: var(--fs-base) !important; color: var(--text-muted) !important; line-height: 1.5 !important; }
html[data-ui="modern"] .lf-head { margin-bottom: 18px !important; }
html[data-ui="modern"] :is(.lf-sec .t) { font-size: var(--fs-base) !important; font-weight: 600 !important; }
html[data-ui="modern"] :is(.lf-sec .d) { color: var(--text-muted) !important; }

/* cards */
html[data-ui="modern"] :is(.qt-card, .rcp-card, .lf-card, .rcp-note) { border-radius: 10px !important; box-shadow: none !important; }
html[data-ui="modern"] #svc-holidays .card { border-radius: 10px; }
html[data-ui="modern"] :is(.qt-head, .rcp-row):hover { background: var(--row-hover) !important; }
html[data-ui="modern"] .rcp-row:nth-child(even) { background: var(--row-stripe); }
html[data-ui="modern"] .rcp-row .s { font-size: var(--fs-base) !important; font-weight: 500 !important; }
html[data-ui="modern"] .rcp-row .w { color: var(--text-secondary) !important; background: var(--bg-elevated) !important; }
html[data-ui="modern"] .rcp-ct { font-size: var(--fs-base) !important; font-weight: 600 !important; }
html[data-ui="modern"] .rcp-ic { background: var(--bg-elevated) !important; border: 1px solid var(--border-subtle) !important; }
html[data-ui="modern"] :is(.rcp-how, .qt-notes) { border-left: 0 !important; border: 1px solid var(--border-subtle) !important; background: var(--bg-secondary) !important; }

/* buttons + segmented filters */
html[data-ui="modern"] :is(.qt-btn, .rcp-btn, .rcp-tab) {
    border-radius: 6px !important; font-weight: 500 !important; font-size: var(--fs-sm) !important;
    background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; color: var(--text-primary) !important;
}
html[data-ui="modern"] :is(.qt-btn, .rcp-btn, .rcp-tab):hover { background: var(--bg-card-hover) !important; }
html[data-ui="modern"] :is(.qt-btn.ok, .rcp-btn.pri, .rcp-tab.on, .rcp-tab.active) {
    background: var(--accent) !important; border-color: var(--accent) !important; color: var(--btn-primary-text) !important;
}
html[data-ui="modern"] .qt-seg { border-radius: 8px !important; padding: 2px; gap: 2px; border-color: var(--border-subtle) !important; }
html[data-ui="modern"] .qt-seg button { border-radius: 6px !important; font-weight: 500 !important; }
html[data-ui="modern"] .qt-seg button.on { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
html[data-ui="modern"] :is(.qt-pill, .lf-pill) { font-weight: 500 !important; }
/* Batch 1 follow-up: the Services pages' small labels in sentence case, figures in Geist (ids like QT-00001 stay mono) */
html[data-ui="modern"] :is(.lf-glance .k, .rcp-how b, .lf-cl .n) { text-transform: none !important; letter-spacing: 0 !important; }
html[data-ui="modern"] :is(.lf-glance .v, .lf-ex .f, .rcp-tab .n, .qt-amt, .qt-lines) { font-family: inherit !important; letter-spacing: -0.01em !important; }
html[data-ui="modern"] #svc-holidays [style*="Space Mono"] { font-family: inherit !important; }
html[data-ui="modern"] #svc-holidays [style*="text-transform:uppercase"] { text-transform: none !important; letter-spacing: 0 !important; }

/* Batch 1 - Order Request (client-order.js #client-order-view) and Receiving Order (receiving-order.js
   #receiving-order-view) in Vstyle. Both set DM Sans inline on their container, so Geist is forced here;
   small capital labels read in sentence case, figures in Geist, size badges lighter, 10px cards / 6px controls. */
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) { font-family: Geist, 'DM Sans', -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.011em; }
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) :is(button, input, select, textarea) { font-family: inherit; }
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) [style*="text-transform:uppercase"],
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) [style*="text-transform: uppercase"] {
    text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) [style*="Space Mono"]:not([class*="id"]):not([class*="num"]) { font-family: inherit !important; letter-spacing: -0.01em !important; }
html[data-ui="modern"] #client-order-view .cord-size-badge { font-family: inherit !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) .card { border-radius: 10px; box-shadow: none; }
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) :is(input, select, textarea) { border-radius: 6px !important; }
html[data-ui="modern"] :is(#client-order-view, #receiving-order-view) button:not(.cord-btile):not(.cord-picked-chip) { border-radius: 6px; }


/* ============================================================
   BATCH 2 - INVENTORY DATA in Vstyle (Viet, 2026-10-03: "yes" - the redesign; he did not like the layout).
   #inv-data: template title (inv-template.js), one tidy toolbar (search takes the room, equal compact
   selects, Hide empty as a pill, + Add Row the one primary, the rest outlined), stat strip as template
   cards, and a calmer grid (Geist, roomier rows, stripes, quiet sticky head, dates no longer cut off).
   ============================================================ */
html[data-ui="modern"] #inv-data .inv-tp-head .tp-head { margin-bottom: 14px; }
html[data-ui="modern"] #inv-data .filters { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin-bottom: 14px !important; }
html[data-ui="modern"] #inv-data #search-input { flex: 1 1 260px; min-width: 200px !important; max-width: none !important; height: 34px; }
html[data-ui="modern"] #inv-data .filters .filter-select { flex: 0 0 auto; width: 150px !important; min-width: 0 !important; height: 34px; }
html[data-ui="modern"] #inv-data #hide-empty-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border-medium);
    border-radius: 6px; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
html[data-ui="modern"] #inv-data .filters .btn {
    height: 32px; padding: 0 12px !important; border-radius: 6px !important; font-size: var(--fs-sm) !important; font-weight: 500 !important;
    background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; color: var(--text-primary) !important;
}
html[data-ui="modern"] #inv-data .filters .btn:hover { background: var(--bg-card-hover) !important; }
html[data-ui="modern"] #inv-data .filters #btn-add-row { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--btn-primary-text) !important; }
html[data-ui="modern"] #inv-data #filtered-count { color: var(--text-muted); font-size: var(--fs-sm); }

/* stat strip -> template cards */
html[data-ui="modern"] #inv-stat-cards { gap: 12px !important; margin-bottom: 14px !important; }
html[data-ui="modern"] #inv-stat-cards > div { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-ui="modern"] #inv-stat-cards .inv-stat-card-header {
    display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "l c" "n n"; align-items: center;
    gap: 6px 8px !important; padding: 12px 14px !important; background: none !important;
}
html[data-ui="modern"] #inv-stat-cards .inv-stat-card-header > span:nth-child(1) { display: none !important; }
html[data-ui="modern"] #inv-stat-cards .inv-stat-card-header > span:nth-child(2) { grid-area: l; font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
html[data-ui="modern"] #inv-stat-cards .inv-stat-card-header > span:nth-child(3) { grid-area: n; font-family: inherit !important; font-size: var(--fs-2xl) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; text-align: left !important; }
html[data-ui="modern"] #inv-stat-cards .inv-stat-card-header > span:nth-child(4) { grid-area: c; font-size: var(--fs-2xs) !important; color: var(--text-muted) !important; }

/* the grid */
html[data-ui="modern"] #inv-flat-view { border: 1px solid var(--border-subtle); border-radius: 10px; }
html[data-ui="modern"] #inv-flat-view table :is(td, th) { font-family: inherit !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #inv-flat-view table tbody td { padding-top: 8px !important; padding-bottom: 8px !important; font-size: var(--fs-sm) !important; }
html[data-ui="modern"] #inv-flat-view table tbody tr:nth-child(even) > td { background-color: var(--row-stripe); }
html[data-ui="modern"] #inv-flat-view table tbody tr:hover > td { background-color: var(--row-hover); }
html[data-ui="modern"] #inv-flat-view table thead th { background: var(--bg-card) !important; color: var(--text-muted) !important; font-weight: 500 !important; border-bottom: 1px solid var(--border-subtle) !important; }
html[data-ui="modern"] #inv-flat-view table input[type="checkbox"] { accent-color: var(--text-primary); }
html[data-ui="modern"] #inv-data .filters :is(.filter-select, #search-input) { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px !important; box-sizing: border-box; }
/* dates (YYYY/MM/DD) fit their 85px columns: tighter side padding in the Vstyle grid, tabular figures */
html[data-ui="modern"] #inv-flat-view table tbody td { padding-left: 8px !important; padding-right: 8px !important; font-variant-numeric: tabular-nums; }
html[data-ui="modern"] #inv-flat-view table thead th { padding-left: 8px !important; padding-right: 8px !important; }

/* ============================================================
   BATCH 2 - SHIPMENT CARD in Vstyle (shipments.js .sd-*). The warm brown (--sd-brown) that tinted Carton
   Contents goes neutral; title / labels match the other pages; one light primary in the footer.
   ============================================================ */
html[data-ui="modern"] .sd-shell { border-radius: 12px !important; }
html[data-ui="modern"] .sd-title { font-weight: 600 !important; letter-spacing: -0.03em !important; }
html[data-ui="modern"] .sd-cartons {
    --sd-brown: var(--text-secondary);
    background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important;
}
html[data-ui="modern"] .sd-ctab { border-color: var(--border-subtle) !important; border-radius: 8px !important; }
html[data-ui="modern"] .sd-ctab th { background: var(--bg-card) !important; font-weight: 500 !important; }
html[data-ui="modern"] .sd-ctab tbody tr:nth-child(even) > td { background-color: var(--row-stripe); }
html[data-ui="modern"] .sd-ctab tr.sd-cfoot td { background: var(--bg-secondary) !important; }
html[data-ui="modern"] .sd-ctab .cno { font-family: inherit !important; color: var(--text-primary) !important; font-weight: 600 !important; }
html[data-ui="modern"] .sd-status { font-family: inherit !important; font-weight: 500 !important; letter-spacing: 0 !important; border-radius: 999px !important; }
html[data-ui="modern"] .sd-metawrap { background: transparent !important; }
html[data-ui="modern"] .sd-foot { padding: 8px 14px !important; gap: 6px !important; }
html[data-ui="modern"] .sd-foot .sd-lbl { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-sm) !important; color: var(--text-muted) !important; }
html[data-ui="modern"] .sd-foot :is(.btn, a.btn, button) { border-radius: 6px !important; font-weight: 500 !important; }
html[data-ui="modern"] .sd-foot :is(.btn-primary, .sd-pri) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--btn-primary-text) !important; }
html[data-ui="modern"] .sd-foot input { border-radius: 6px !important; }

/* BATCH 2 - DELIVERY HUB in Vstyle (dropoffs.js, inline-styled): toolbar buttons neutral outlined, run titles and
   section heads in white (not teal / orange / magenta), monospace labels in Geist. Status pills keep their colour. */
html[data-ui="modern"] #ops-dropoffs .btn.btn-ghost[style*="color:"] { color: var(--text-primary) !important; border-radius: 6px !important; font-weight: 500 !important; }
html[data-ui="modern"] #ops-dropoffs span[style*="font-weight:700;color:#"],
html[data-ui="modern"] #ops-dropoffs span[style*="font-weight:800"][style*="color:#"] { color: var(--text-primary) !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #ops-dropoffs span[style*="Space Mono"], html[data-ui="modern"] #ops-dropoffs div[style*="Space Mono"] { font-family: inherit !important; letter-spacing: 0 !important; }

/* ============================================================
   REPORTS - the data card fills the page (Viet, 2026-10-03: "All tabs in reports ... can we have the card use the
   vertical space at 100% to fill the page?"). Each Reports tab is a window-high column: head, stat cards and
   filters keep their size, the card holding the table takes the rest and the table scrolls inside it.
   ============================================================ */
html[data-ui="modern"] #tab-reports > .data-sub-content.active {
    display: flex !important; flex-direction: column;
    height: calc(100vh - var(--topbar-h, 56px) - 28px); min-height: 420px;
}
html[data-ui="modern"] #tab-reports > .data-sub-content.active > * { flex: 0 0 auto; }
html[data-ui="modern"] #tab-reports > .data-sub-content.active > .card:has(.table-wrap) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0 !important;
}
html[data-ui="modern"] #tab-reports > .data-sub-content.active > .card:has(.table-wrap) > * { flex: 0 0 auto; }
html[data-ui="modern"] #tab-reports > .data-sub-content.active > .card:has(.table-wrap) > .table-wrap {
    flex: 1 1 auto !important; min-height: 0; max-height: none !important; overflow: auto;
}
html[data-ui="modern"] #tab-reports .table-wrap thead th { position: sticky; top: 0; z-index: 2; }
/* Reports tables: Geist for every cell (statuses, ids, dates) like the rest of Vstyle; colours unchanged */
html[data-ui="modern"] #tab-reports .table-wrap :is(td, td *)[style*="Space Mono"],
html[data-ui="modern"] #tab-reports .table-wrap td { font-family: inherit !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #tab-reports .table-wrap tbody tr:nth-child(even) > td { background-color: var(--row-stripe); }
html[data-ui="modern"] #tab-reports .table-wrap tbody tr:hover > td { background-color: var(--row-hover); }

/* ============================================================
   SHIPMENTS TABLE in Vstyle (Viet, 2026-10-03: "#orders/ops-shipments Can we use Vstyle for the table content?")
   Geist in every cell, the tracking cell as number + quiet "Copy · Track" text links (two lines, not three),
   compact status, stripes and hover like every other table.
   ============================================================ */
html[data-ui="modern"] #ship-table :is(td, td *) { font-family: inherit !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #ship-table tbody td { vertical-align: middle !important; }
html[data-ui="modern"] #ship-table tbody tr:nth-child(even) > td { background-color: var(--row-stripe); }
html[data-ui="modern"] #ship-table tbody tr:hover > td { background-color: var(--row-hover); }
html[data-ui="modern"] #ship-table td.sc-id { font-weight: 600; color: var(--text-primary); }
html[data-ui="modern"] #ship-table td.sc-tracking > span { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
html[data-ui="modern"] #ship-table td.sc-tracking > span > span:first-child { flex: 0 0 100%; font-size: var(--fs-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="modern"] #ship-table td.sc-tracking .btn {
    padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
    font-size: var(--fs-2xs) !important; font-weight: 500 !important; color: var(--text-muted) !important; min-height: 0 !important; height: auto !important;
}
html[data-ui="modern"] #ship-table td.sc-tracking .btn:hover { color: var(--text-primary) !important; text-decoration: underline; }
html[data-ui="modern"] #ship-table td.sc-status .sc-st { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
html[data-ui="modern"] #ship-table td.sc-status .ss-sent-chip { font-size: var(--fs-2xs) !important; font-weight: 500 !important; border-radius: 999px !important; }
html[data-ui="modern"] #ship-table tbody td { overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   BATCH 2 - PROCESS PAGES in Vstyle (Viet, 2026-10-03: "Do the Process pages next"). Floor pages: bigger touch
   targets (38px controls), Geist instead of monospace, neutral cards (no coloured left edge), tables striped.
   ============================================================ */
html[data-ui="modern"] #tab-process :is(.btn, .filter-input, .filter-select, input[type="text"], input[type="number"], select) { min-height: 38px; border-radius: 6px !important; }
html[data-ui="modern"] #tab-process .btn { font-weight: 500 !important; padding-left: 14px !important; padding-right: 14px !important; }
html[data-ui="modern"] #tab-process [style*="Space Mono"]:not(svg *) { font-family: inherit !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #tab-process .card[style*="border-left:3px"] { border-left: 1px solid var(--border-subtle) !important; }
html[data-ui="modern"] #tab-process .card { border-radius: 10px; }
html[data-ui="modern"] #tab-process table tbody tr:hover > td { background-color: var(--row-hover); }
/* Development > Data: its inner tab bar (Export ... Build Log) is already the Developer group of the left menu */
html[data-ui="modern"] #dev-data-host > .data-sub-tabs { display: none !important; }

/* ============================================================
   RECEIVING DOCK in Vstyle (Viet, 2026-10-03: "Do the Receiving Dock log next").
   Every .card-title in Vstyle reads like the panel titles (14px semibold); the dock's own bits: neutral toolbar
   buttons, REC numbers as plain semibold text, ASN / Ad hoc source tags as quiet pills, row actions as
   borderless icons (Start Intake stays a real button).
   ============================================================ */
html[data-ui="modern"] .card-title { font-size: var(--fs-base) !important; font-weight: 600 !important; letter-spacing: -0.01em; text-transform: none !important; }
html[data-ui="modern"] #prc-receiving .btn[style*="color:var(--warning)"],
html[data-ui="modern"] #prc-receiving .btn[style*="color:var(--success)"] { color: var(--text-primary) !important; }
html[data-ui="modern"] #prc-receiving td a { text-decoration: none !important; font-weight: 600; color: var(--text-primary) !important; }
html[data-ui="modern"] #prc-receiving td a:hover { text-decoration: underline !important; }
html[data-ui="modern"] #prc-receiving td span[style^="padding:2px 6px;border-radius"][style*="background:rg"] {
    background: var(--bg-elevated) !important; color: var(--text-secondary) !important; font-weight: 500 !important;
    border-radius: 999px !important; letter-spacing: 0 !important;
}
html[data-ui="modern"] #prc-receiving td .btn.btn-ghost:not(:first-child) {
    min-height: 30px; width: 30px; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: .55; justify-content: center;
}
html[data-ui="modern"] #prc-receiving td .btn.btn-ghost:not(:first-child):hover { opacity: 1; background: var(--bg-elevated) !important; }
html[data-ui="modern"] #prc-receiving td .btn.btn-ghost:first-child { min-height: 32px; }
/* Receiving Dock follow-up: REC numbers are underlined spans, ASN tags use color-mix fills; the ASN card's Form button stays a button */
html[data-ui="modern"] #prc-receiving td span[style*="text-decoration:underline"] { text-decoration: none !important; color: var(--text-primary) !important; font-weight: 600; }
html[data-ui="modern"] #prc-receiving td span[style*="text-decoration:underline"]:hover { text-decoration: underline !important; }
html[data-ui="modern"] #prc-receiving td span[style^="padding:2px 6px;border-radius"] {   /* source tags only - status pills start with font-size and keep their colour */
    background: var(--bg-elevated) !important; color: var(--text-secondary) !important; font-weight: 500 !important; border-radius: 999px !important;
}
html[data-ui="modern"] #prc-receiving td .btn.btn-ghost:is([onclick*="Form"], [title*="orm"]) {
    width: auto; padding: 0 12px !important; border: 1px solid var(--border-medium) !important; opacity: 1; min-height: 32px;
}

/* ============================================================
   EVERY SUB-MENU PAGE in Vstyle (Viet, 2026-10-03: "I just want to apply the Vstyle to all the sub menu pages",
   Billing + Invoice Manager excepted - their own batch). The page-by-page fixes made general: Geist instead of
   inline monospace, neutral buttons (no coloured text), cards without a coloured left edge, no underline on text
   that is not a link. Label / packing-list previews keep their print fonts.
   ============================================================ */
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) [style*="Space Mono"]:not(:is(#ops-labels, #ops-packing, #prc-box-labels, svg, [class*="label-prev"], [class*="lbl-prev"]) *):not(svg) {
    font-family: inherit !important; letter-spacing: 0 !important;
}
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) .btn:is([style*="color:var(--warning)"], [style*="color:var(--success)"], [style*="color:var(--violet)"], [style*="color:var(--accent)"], [style*="color:#"]):not(.btn-primary) {
    color: var(--text-primary) !important;
}
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) .btn { border-radius: 6px !important; }
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) .card:is([style*="border-left:3px"], [style*="border-left:4px"]) { border-left: 1px solid var(--border-subtle) !important; }
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="text-decoration:underline"] { text-decoration: none !important; }
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="text-decoration:underline"]:hover { text-decoration: underline !important; }

/* ============================================================
   PASS 1 - UX review fixes (2026-10-03, Viet: "run them all and deploy")
   ============================================================ */
/* the "Update available" toast covered buttons bottom-right on most pages: a small pill in the black top bar */
html[data-ui="modern"] #titol-update-toast {
    top: 9px !important; bottom: auto !important; right: auto !important; left: 50% !important; transform: translateX(-50%);
    animation: none !important; padding: 4px 4px 4px 12px !important; border-radius: 999px !important;
    border-color: var(--border-medium) !important; box-shadow: none !important; max-width: none !important;
    font-family: inherit !important; font-size: var(--fs-sm) !important; gap: 8px !important;
}
html[data-ui="modern"] #titol-update-toast > span:first-child { display: none; }
html[data-ui="modern"] #titol-update-toast > div { display: flex; gap: 6px; align-items: baseline; }
html[data-ui="modern"] #titol-update-toast > div > div:last-child { font-family: inherit !important; }
html[data-ui="modern"] #titol-update-refresh { border-radius: 999px !important; padding: 3px 10px !important; }
/* Settings / Development tables: fill the window instead of an inline 400px box */
html[data-ui="modern"] :is(#tab-settings, #tab-dev) .table-wrap[style*="max-height"] { max-height: calc(100vh - 260px) !important; }
/* Shipments: the "Processed" chip drops its date in the table (it clipped); the full text is in its tooltip */
html[data-ui="modern"] #ship-table td.sc-status .ss-sent-chip > span { display: none; }
/* top bar + menu section labels in sentence case; the build number muted */
html[data-ui="modern"] .topbar-subtitle { text-transform: none !important; letter-spacing: 0 !important; }
html[data-ui="modern"] .topbar span[style*="letter-spacing"] { color: var(--text-muted) !important; letter-spacing: 0 !important; }
html[data-ui="modern"] #adm-panel .adm-sec { text-transform: none !important; letter-spacing: 0 !important; }
/* the stray menu toggle at the content's top-left: the Vstyle menu is always open on desktop */
@media (min-width: 761px) { html[data-ui="modern"] #panel-trigger { display: none !important; } }
/* Receiving Dock log: tighter cells so the actions fit at laptop widths */
html[data-ui="modern"] #prc-receiving table :is(td, th) { padding-left: 8px !important; padding-right: 8px !important; }
/* native controls in the dark theme */
html[data-ui="modern"] { color-scheme: dark; }
html[data-ui="modern"][data-theme="light"], html[data-ui="modern"][data-theme="sand"] { color-scheme: light; }
html[data-ui="modern"] input[type="checkbox"], html[data-ui="modern"] input[type="radio"] { accent-color: var(--text-primary); }
/* off-system accent buttons go neutral (purple Note on latest build, purple Today only, blue + ASN) */
html[data-ui="modern"] #data-buildlog button[onclick="blShowAddForm()"],
html[data-ui="modern"] #ops-dropoffs button[onclick^="doToggleHideLater"],
html[data-ui="modern"] #db-asn-btn {
    background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-medium) !important; border-radius: 6px !important;
}
/* phones: the job status cards three across, not a screenful of two-up cards */
@media (max-width: 760px) { html[data-ui="modern"] #tab-dashboard [data-mod="kpi"] .tp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* ============================================================
   PASS 2 - TASK MANAGER in Vstyle (UX review: "still looks like the old design"). Status group heads as neutral
   pills with the status colour as a dot (sentence case), brand / type pills as soft tints, Ready to close quiet.
   ============================================================ */
html[data-ui="modern"] #tab-tasks .db-status-pill {
    display: inline-flex !important; background: var(--bg-elevated) !important; color: var(--text-primary) !important;
    font-family: inherit !important; letter-spacing: 0 !important; font-weight: 600 !important; text-transform: lowercase;
    border: 1px solid var(--border-subtle); border-radius: 999px !important; padding: 2px 10px 2px 8px !important; gap: 6px;
}
html[data-ui="modern"] #tab-tasks .db-status-pill::first-letter { text-transform: uppercase; }
html[data-ui="modern"] #tab-tasks .db-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-muted)); flex: 0 0 auto; }
html[data-ui="modern"] #tab-tasks :is(.db-brand-pill, .db-job-pill):not(.db-job-pill-outline) {
    background: color-mix(in srgb, var(--c, #888) 22%, transparent) !important; color: var(--text-primary) !important;
    border-radius: 999px !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html[data-ui="modern"] #tab-tasks .db-job-pill-outline { border-radius: 999px !important; font-weight: 500 !important; }
html[data-ui="modern"] #tab-tasks .db-ready-close {
    display: inline-block; text-transform: lowercase; letter-spacing: 0 !important; font-weight: 500 !important; border-radius: 999px !important;
}
html[data-ui="modern"] #tab-tasks .db-ready-close::first-letter { text-transform: uppercase; }
html[data-ui="modern"] #tab-tasks .db-count { font-family: inherit !important; }

/* PASS 2 - one status pill shape (UX review: "status pills don't share one system"). Every small coloured pill on the
   non-billing pages (inline padding + radius + a tinted color-mix fill) takes the same shape: fully round, medium
   weight, Geist, sentence case; its colour stays. Shipments' bare status word becomes a neutral pill. */
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:2px"][style*="border-radius"][style*="background:color-mix"],
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:1px"][style*="border-radius"][style*="background:color-mix"],
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:2px"][style*="border-radius"][style*="background:rgba"],
html[data-ui="modern"] #ship-table td.sc-status .sc-st {
    display: inline-block; border-radius: 999px !important; font-weight: 500 !important; font-family: inherit !important;
    letter-spacing: 0 !important; text-transform: lowercase; line-height: 1.5;
}
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:2px"][style*="border-radius"][style*="background:color-mix"]::first-letter,
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:1px"][style*="border-radius"][style*="background:color-mix"]::first-letter,
html[data-ui="modern"] .tab-content:not(#tab-recon):not(#tab-inv) span[style*="padding:2px"][style*="border-radius"][style*="background:rgba"]::first-letter,
html[data-ui="modern"] #ship-table td.sc-status .sc-st::first-letter { text-transform: uppercase; }
html[data-ui="modern"] #ship-table td.sc-status .sc-st { padding: 1px 8px; background: var(--bg-elevated); color: var(--text-secondary); }

/* PASS 3 (UX review) - shipment card sized to its content, Delete last behind a divider; ids / status never wrap */
html[data-ui="modern"] .sd-shell { height: auto !important; max-height: calc(100vh - 32px) !important; }
html[data-ui="modern"] .sd-foot .sd-danger { order: 99; margin-left: 10px !important; position: relative; }
html[data-ui="modern"] .sd-foot .sd-danger::before { content: ''; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 1px; background: var(--border-subtle); }
html[data-ui="modern"] #ship-table td:is(.sc-id, .sc-status, .sc-date, .sc-carrier) { white-space: nowrap; }
html[data-ui="modern"] #ship-table td.sc-id { overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   PASS 4 - VSTYLE AUDIT, 2026-10-04 (Viet: "fix all the UX/UI on all pages, update with Vstyle"; the
   audit is Command Center > Audits & reviews > Vstyle Audit, public/dev/vstyle-audit.html). A probe of
   every route under Vstyle (Geist on every text node, no caps-and-tracking labels, no hand <h2>, no
   shadows) came back clean on 100 of 108 pages; the eight below still carried Classic. Same house rules
   as PASS 1-3: a container that forces DM Sans inherits Geist, shouting labels read in sentence case,
   mono caps badges become plain pills, and the pages' own classes are matched so nothing else moves.
   ============================================================ */

/* Drops (#tab-drops, drops.js): the only page still set in DM Sans, with Space Mono caps everywhere and
   its own hand-made "Drops" h1 under the template title (the template put one there in 3.1722). */
html[data-ui="modern"] #tab-drops .dp-wrap { font-family: inherit !important; }
html[data-ui="modern"] #tab-drops .dp-pagehead h1 { display: none; }
html[data-ui="modern"] #tab-drops .dp-pagehead { margin-bottom: 4px; }
html[data-ui="modern"] #tab-drops .dp-pagesub { display: none; }
html[data-ui="modern"] #tab-drops :is(.dp-seclab, .dp-stat .dp-l, .dp-stbadge, .dp-st, .dp-badge, .dp-fh, .dp-flag, .dp-btn, .dp-bcode) {
    font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-ui="modern"] #tab-drops :is(.dp-seclab, .dp-stat .dp-l, .dp-fh) { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
html[data-ui="modern"] #tab-drops .dp-stat .dp-n { font-family: inherit; font-weight: 600; }
html[data-ui="modern"] #tab-drops :is(.dp-stbadge, .dp-st, .dp-badge, .dp-flag) { border-radius: 999px; font-weight: 500; font-size: var(--fs-sm); }
html[data-ui="modern"] #tab-drops .dp-btn { border-radius: 6px; font-weight: 500; font-size: var(--fs-base); }
html[data-ui="modern"] #tab-drops .dp-bcode { font-family: "Space Mono", monospace !important; }   /* an id stays mono */

/* Bundle Builder (#bundle-builder-view, bundle-builder.js): DM Sans forced on its host, the kicker in caps */
html[data-ui="modern"] #bundle-builder-view { font-family: inherit !important; }
html[data-ui="modern"] #bundle-builder-view .bb-head h2 { font-size: var(--fs-xl, 1.15rem); font-weight: 600; letter-spacing: -0.01em; }
html[data-ui="modern"] #bundle-builder-view .bb-title { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
html[data-ui="modern"] #bundle-builder-view .bb-chip span { font-family: inherit; font-size: var(--fs-sm); }

/* Time (#orders/ops-time, employee-time.js) and the Employee Time modal: section labels shouted */
html[data-ui="modern"] :is(#emptime-mount, .ept-modal-overlay) .ept-section-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-sm); }

/* Comms Hub (#dev-team-chat, team-chat.js): section heads and the Settings labels in caps */
html[data-ui="modern"] #dev-team-chat .ch-h { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-base); color: var(--text-primary); }
html[data-ui="modern"] #dev-team-chat .ch-set label { text-transform: none; letter-spacing: 0; font-weight: 500; }
html[data-ui="modern"] #dev-team-chat .ch-pill { font-weight: 500; letter-spacing: 0; }

/* Settings > Page Templates (page-templates-admin.js): the section kicker */
html[data-ui="modern"] .pta-sec { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-sm) !important; font-weight: 500; }

/* Rates (#rates-page, settings.js rate editor): the column heads and the type cells in caps + tracking */
html[data-ui="modern"] #rates-page .rc-col-head { text-transform: none; letter-spacing: 0; font-weight: 500; }
html[data-ui="modern"] #rates-page .rc-cell-type .rc-edit { text-transform: none; letter-spacing: 0; }

/* Development > Notifications (notif-console.js): nothing under 12px in Vstyle */
html[data-ui="modern"] #dev-notify [style*="font-size:0.66rem"] { font-size: var(--fs-sm) !important; }

/* Every page: the 3.1665 rule caught inline uppercase; small inline text under 11px (muted hints, counts)
   lifts to the 12px step so nothing on a Vstyle page reads below Vercel's smallest size. */
html[data-ui="modern"] .tab-content :is([style*="font-size:0.6"], [style*="font-size:0.55"], [style*="font-size:9px"], [style*="font-size:10px"]) { font-size: var(--fs-sm) !important; }

/* ============================================================
   PASS 5 - MY NOTIFICATIONS in Vstyle (3.1818, Viet on #notifications: "Can we style this vstyle?").
   notify-prefs.js draws a centred 760px column with a big h1; in Vstyle the page fills the width like
   the other settings pages, the title and its description share one line (the page-kit head), the
   per-type checkboxes become the same switch the Email channel card already uses, and the ALWAYS
   badge reads as a plain pill. The page's own classes (np-*) are matched; Classic is untouched.
   ============================================================ */
html[data-ui="modern"] #tab-notifications .np-page { max-width: none; margin: 0; padding: 18px 22px 60px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
html[data-ui="modern"] #tab-notifications .np-page > * { flex: 0 0 100%; min-width: 0; }
html[data-ui="modern"] #tab-notifications .np-page > h1 { flex: 0 0 auto; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
html[data-ui="modern"] #tab-notifications .np-page > .np-sub { flex: 1 1 320px; margin: 0; color: var(--text-muted); }
html[data-ui="modern"] #tab-notifications .np-page > .np-card,
html[data-ui="modern"] #tab-notifications .np-page > .np-banner { margin-top: 16px; }
html[data-ui="modern"] #tab-notifications .np-card { border-radius: 10px; box-shadow: none; }
html[data-ui="modern"] #tab-notifications .np-ch { padding: 12px 16px; }
html[data-ui="modern"] #tab-notifications .np-ch-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-elevated); border-color: var(--border-subtle); font-size: var(--fs-base); }
html[data-ui="modern"] #tab-notifications .np-ch-t b { font-size: var(--fs-base); font-weight: 500; }
html[data-ui="modern"] #tab-notifications .np-na { font-weight: 500; }
/* sections: a quiet head, hairline rows, the column label in sentence case */
html[data-ui="modern"] #tab-notifications .np-sec { margin-bottom: 18px; }
html[data-ui="modern"] #tab-notifications .np-sec-h { padding: 0 0 8px; }
html[data-ui="modern"] #tab-notifications .np-sec-h b { font-size: var(--fs-base); font-weight: 600; }
html[data-ui="modern"] #tab-notifications .np-col { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
html[data-ui="modern"] #tab-notifications .np-row { padding: 10px 0; }
html[data-ui="modern"] #tab-notifications .np-row-t span { font-weight: 500; }
/* each type's checkbox is the Email card's switch (appearance:none, the same track / knob / accent) */
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; position: relative;
    background: var(--border-medium); border: 0; cursor: pointer; transition: background 0.15s; margin: 0;
}
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-medium), 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"]:checked { background: var(--accent); }
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"]:checked::after { transform: translateX(14px); }
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ui="modern"] #tab-notifications .np-tick input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
/* the ALWAYS badge: Geist, sentence case, the same pill shape as every other status */
html[data-ui="modern"] #tab-notifications .np-lock { font-family: inherit; font-size: var(--fs-sm); letter-spacing: 0; text-transform: lowercase; padding: 1px 8px; font-weight: 500; }
html[data-ui="modern"] #tab-notifications .np-lock::first-letter { text-transform: uppercase; }
html[data-ui="modern"] #tab-notifications .np-foot { margin-top: 10px; }