/* Fix for HugeIcons in navigation to inherit proper colors */
.nav-icon svg,
.nav-icon svg path,
.nav-icon svg *,
[data-v-*] svg,
[data-v-*] svg path,
[data-v-*] svg * {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
}
/* More specific targeting for Vue components */
.sidebar .nav-icon svg,
.sidebar .nav-icon svg path {
  stroke: #000000 !important;
  fill: none !important;
  color: #000000 !important;
}
/* Force color inheritance on all SVG elements */
.nav-icon > div svg,
.nav-icon > div svg path,
.nav-icon > div svg * {
  stroke: #000000 !important;
  fill: none !important;
  color: #000000 !important;
}
/* Override active state to keep black color */
.nav-link.active .nav-icon svg,
.nav-link.active .nav-icon svg path,
.nav-link.active .nav-icon > div svg,
.nav-link.active .nav-icon > div svg path {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
}
/* Override hover state to keep black color */
.nav-link:hover .nav-icon svg,
.nav-link:hover .nav-icon svg path,
.nav-link:hover .nav-icon > div svg,
.nav-link:hover .nav-icon > div svg path {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
}
/* Dark mode: the forced-black rules above are invisible on the dark sidebar
   (--cui-sidebar-bg follows --cui-body-bg = #212631). Flip the sidebar nav
   icons to the theme text color so they match the (already theme-aware) nav
   labels. Higher specificity + !important beats the light-mode black rules. */
[data-coreui-theme="dark"] .sidebar .nav-icon svg,
[data-coreui-theme="dark"] .sidebar .nav-icon svg path,
[data-coreui-theme="dark"] .sidebar .nav-icon svg *,
[data-coreui-theme="dark"] .sidebar .nav-icon > div svg,
[data-coreui-theme="dark"] .sidebar .nav-icon > div svg path,
[data-coreui-theme="dark"] .sidebar .nav-icon > div svg *,
[data-coreui-theme="dark"] .sidebar .nav-link.active .nav-icon svg,
[data-coreui-theme="dark"] .sidebar .nav-link.active .nav-icon svg path,
[data-coreui-theme="dark"] .sidebar .nav-link.active .nav-icon > div svg,
[data-coreui-theme="dark"] .sidebar .nav-link.active .nav-icon > div svg path,
[data-coreui-theme="dark"] .sidebar .nav-link:hover .nav-icon svg,
[data-coreui-theme="dark"] .sidebar .nav-link:hover .nav-icon svg path,
[data-coreui-theme="dark"] .sidebar .nav-link:hover .nav-icon > div svg,
[data-coreui-theme="dark"] .sidebar .nav-link:hover .nav-icon > div svg path {
  color: var(--cui-body-color) !important;
  stroke: var(--cui-body-color) !important;
  fill: none !important;
}
/* ─── HDR Type System — Direction A: Industrial Ledger ─────────────
   Geist for body + display, Geist Mono for numerics / IDs / dates.
   Type scale, semantic text colors, and OpenType feature presets
   live as CSS custom properties so SCSS partials and Vue components
   can share the same tokens. */
:root {
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  --feat-body:    "cv11" 1, "ss01" 1;
  --feat-num:     "tnum" 1, "zero" 1;
  --feat-display: "cv11" 1, "ss01" 1, "ss02" 1;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-md:  0.875rem;
  --text-lg:  1.0625rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --text-primary:   #1B1A17;
  --text-secondary: #475569;
  --text-tertiary:  #64748b;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;
  --text-eyebrow:   #94a3b8;

  /* Semantic surface / border tokens. Light values mirror the hardcoded
     grays the shared chrome SCSS (data-table, checkout-builder, entity-viewer)
     historically baked in, so consuming `var(--surface-*)` / `var(--border-*)`
     is a no-op in light mode. The dark overrides below flip them for
     [data-coreui-theme="dark"]. */
  --surface-card:    #ffffff;  /* card / panel / field background              */
  --surface-raised:  #fafbfc;  /* thead, row hover, image preview, disabled bg */
  --surface-page:    #ebedef;  /* page background (matches --cui-tertiary-bg)  */
  --surface-subtle:  #f1f5f9;  /* subtle fill: count chip, ghost/icon hover    */
  --border-subtle:   #e2e8f0;  /* card / table / field borders                 */
  --border-faint:    #f1f3f5;  /* interior row separators (lighter than above) */
}
/* Dark theme — override the custom token layer. CoreUI flips every --cui-*
   token automatically under this attribute; these are the app's own tokens
   that CoreUI doesn't know about. Any component already consuming var(--text-*)
   / var(--surface-*) / var(--border-*) adapts for free. Scoped to "dark" (not
   "light") so Auto-on-a-light-OS — which resolves to data-coreui-theme="auto" —
   correctly inherits the light :root defaults. */
[data-coreui-theme="dark"] {
  --text-primary:   #e8eaed;
  --text-secondary: #b6bdc8;
  --text-tertiary:  #94a3b8;
  --text-muted:     #6b7685;
  --text-disabled:  #4a5260;
  --text-eyebrow:   #6b7685;

  --surface-card:    #1e242e;
  --surface-raised:  #252c38;
  --surface-page:    #15191f;
  --surface-subtle:  #272e3c;
  --border-subtle:   #2b323d;
  --border-faint:    #262d38;
}
html, body {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Project rule: body baseline is 14px. Override CoreUI's
   `--cui-body-font-size` (defaults to 1rem / 16px) so the cascade
   propagates through components that read the var — including tables
   (`.table` consumes `font-size: var(--cui-body-font-size)`). Without
   this, table cells render at 16px while explicit `font-size: 14px`
   declarations elsewhere render at 14px, producing mismatched
   line-heights (21 vs 24). Headings keep their `rem`-based sizes
   (anchored to <html>, untouched). */
:root {
  --cui-body-font-size: 14px;
  --cui-body-line-height: 1.5;
}
body {
  font-size: 14px;
  line-height: 1.5;
}
/* Force every CoreUI table cell to render at 14px / 21px line-height
   regardless of cascade quirks. Mirrors the dashboard `.dash-table`
   pattern: explicit pin at the table-cell level wins over any descendant
   that leaks a different font-size or line-height. Header cells (`th`
   inside `thead`) opt out so existing uppercase eyebrow header styles
   (smaller, letter-spaced) stay intact. */
.table > :not(caption) > * > * {
  font-size: 14px;
  line-height: 21px;
}
.table thead th {
  font-size: inherit;
  line-height: inherit;
}
code, kbd, samp, pre,
.t-mono, .t-num, .t-tnum, .t-currency, .t-id {
  font-family: var(--font-mono);
  font-feature-settings: var(--feat-num);
  font-variant-numeric: tabular-nums slashed-zero;
}
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-eyebrow);
  line-height: 1;
}
/* Dashboard widget values (CoreUI CWidgetStatsB renders the value as
   `<div class="fs-4 fw-semibold">` inside `.card-body`). Use Geist Sans
   at display weight — mono numerics are reserved for tables/ledgers
   where vertical alignment matters; here the number is the focal point
   and a heavy sans reads punchier. tabular-nums keeps digits aligned
   when values change. */
.card-body > .fs-4.fw-semibold {
  font-family: var(--font-display);
  font-feature-settings: var(--feat-display), "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: 1.625rem;
}
.cursor-pointer {
  cursor: pointer;
}
.table--header {
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}
.search__icon {
  position: absolute;
  top: 10px;
  left: 18px;
  width: 18pxWeek;
  height: 18px;
  color: gray;
 }
.search__input {
   padding-left: 34px !important;
 }
.-mt-3 {
  margin-top: -6px;
}
.Vue-Toastification__toast--error {
  background-color: #ca4040 !important;
  color: #fff;
}
.bg-disabled {
  background-color: rgb(238, 238, 238);
}
.bg-retired {
  background-color: #000000;
}
.bg-not-started {
  background-color: #FEF0C7;
}
.bg-staged {
  background-color: #717BBC;
}
.bg-assign {
  background-color: #8E44AD;
}
.bg-picked-up {
  background-color: #FDB022;
}
.bg-delivered {
  background-color: #F79009;
}
.bg-checkout {
  background-color: #FDB022;
}
.bg-returned {
  background-color: #53B1FD;
}
.bg-inspected {
  background-color: #079455;
}
.bg-lnd {
  background-color: #B42318;
}
/* Dark tweaks for the two .bg-* classes that fail on a dark surface. The rest
   are saturated solids (staged / delivered / lnd …) with their own text and
   stay legible. .bg-disabled doubles as the readonly-field background across
   the quote/invoice builders, so it must follow the dark surface ramp; black
   .bg-retired would vanish into the dark page. */
[data-coreui-theme="dark"] .bg-disabled {
  background-color: var(--surface-subtle);
}
[data-coreui-theme="dark"] .bg-retired {
  background-color: #3a4150;
}
/* HDRTable renders its header row as <CTableRow color="secondary">, whose
   .table-secondary variant hardcodes a light --cui-table-bg (#e1e4e7) that is
   NOT theme-aware. Make the header theme-aware in dark so every *bare* HDRTable
   (Dashboard recent tables, any list page not wrapped in .dt-card) gets a dark
   header instead of a white bar. dt-card tables set `thead th { background }`
   directly, which wins over --cui-table-bg, so they're unaffected. Buttons use
   .btn-secondary (not .table-secondary), so they're untouched. */
[data-coreui-theme="dark"] .table tr.table-secondary {
  --cui-table-bg: var(--surface-raised);
  --cui-table-color: var(--text-secondary);
  --cui-table-border-color: var(--border-subtle);
}
/* Active-filter chip strips. Every list filter (Quotes, Checkout, Checkin,
   Swap, Invoice, Payments, Credit Memo, Deposits, Items, Program Tracker, L&D)
   paints the strip with var(--cui-secondary-bg-subtle) — which CoreUI keeps a
   light #ced2d8 in BOTH themes, so the strip stays a bright bar in dark. Repaint
   it on the dark surface ramp. `html[...]` gives this (0,2,1) specificity so it
   beats each component's scoped `.x-filter__active[data-v]` (0,2,0) rule. */
html[data-coreui-theme="dark"] .quotes-filter__active,
html[data-coreui-theme="dark"] .checkout-filter__active,
html[data-coreui-theme="dark"] .checkin-filter__active,
html[data-coreui-theme="dark"] .swap-filter__active,
html[data-coreui-theme="dark"] .invoice-filter__active,
html[data-coreui-theme="dark"] .payments-filter__active,
html[data-coreui-theme="dark"] .credit-memo-filter__active,
html[data-coreui-theme="dark"] .deposit-filter__active,
html[data-coreui-theme="dark"] .items-filter__active,
html[data-coreui-theme="dark"] .program-tracker-filter__active,
html[data-coreui-theme="dark"] .lnd-filter__active {
  background: var(--surface-subtle);
  border-color: var(--border-subtle);
}