/* ==========================================================================
   Design System — Web fonts (Track I / I1)
   IBM Plex Sans (Latin) + IBM Plex Sans Arabic, self-hosted (woff2) under
   wwwroot/lib/fonts/ibm-plex/. SIL Open Font License 1.1 (see the LICENSE-*.txt
   files next to the fonts). No CDN — the CSP `font-src 'self'` requires self-hosting.
   `font-display: swap` shows fallback text immediately, then swaps in Plex (no FOIT).
   The Latin family is listed first in `--app-font-sans`, so European (0-9) numerals
   and Latin codes render from Plex Sans; Arabic codepoints fall through to Plex Sans
   Arabic. `unicode-range` scopes each subset to exactly what its woff2 ships, so a
   page only downloads the scripts it actually uses.
   ========================================================================== */

/* IBM Plex Sans — Latin (basic Latin + Latin-1 + punctuation, incl. digits 0-9) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans Arabic — Arabic block + presentation forms (no Latin digits here) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../lib/fonts/ibm-plex/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}


:root {
  /* ======================================================================
     Design tokens (Track I / I2) — one structured source of truth.
     Theme-independent scales live here; theme-dependent values (colors,
     shadows) are set per `body[data-theme=...]`. Tokens that derive from a
     theme (focus ring, strong border) reference theme vars via var()/
     color-mix and resolve per active theme at the point of use.
     ====================================================================== */

  /* Typography — Bilingual UI font: Latin first (European numerals + Latin
     codes), Arabic fallback. */
  --app-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (rem, 16px reference; scales with the responsive html size).
     12 / 14 / 16 / 18 / 20 / 24 / 30 / 38 px. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;

  /* Font weights + line heights. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;

  /* Spacing scale on a 4px base (rem). 4 8 12 16 20 24 32 40 48 64 80 96. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* Corner radius. sm 6px · base 8px · lg 12px · pill. */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Motion — tokens defined here; per-rule transitions adopt them in I3.
     --ease-standard stays `ease` so adopting it is value-preserving. */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
}

html {
  font-size: 14px;
}

:root,
body[data-theme="classic-teal"] {
  --app-bg: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fbfd;
  --app-border: #7c92aa;
  --app-text: #142033;
  --app-muted: #52606d;
  --app-primary: #0f766e;
  --app-primary-rgb: 15, 118, 110;
  --app-primary-hover: #0b5f59;
  --app-primary-soft: #dff7f2;
  /* Readable foreground for white-on-primary fills (badges/buttons/active
     states). Defaults to white; themes whose primary is too light for white
     text (AA < 4.5) override it to a dark ink below. */
  --app-on-primary: #ffffff;
  --app-accent: #f59e0b;
  /* Readable ink for accent-filled surfaces (AA >= 4.5 per theme). White on the amber
     accent is 2.13:1 — never guess the ink; consume this token. */
  --app-on-accent: #142033;
  --app-accent-soft: #fff4d6;
  --app-nav-bg: rgba(255, 255, 255, 0.94);
  --app-hero-bg: #123f3b;
  --app-hero-text: #f8fafc;
  --app-hero-muted: #d4f7eb;
  --app-shadow-sm: 0 8px 24px rgba(15, 35, 55, 0.08);
  --app-shadow-md: 0 14px 34px rgba(15, 35, 55, 0.12);
  --app-shadow-lg: 0 24px 60px rgba(15, 35, 55, 0.16);
  --app-shadow-color: rgba(15, 35, 55, 0.24);
  --job-active-accent: #2563eb;
  --job-neutral-accent: #64748b;
  --job-success-bg: #ecfdf3;
  --job-success-border: #bbf7d0;
  --job-success-color: #15803d;
  --job-success-accent: #16a34a;
  --job-warning-bg: #fff7e6;
  --job-warning-border: #fed7aa;
  --job-warning-color: #b45309;
  --job-warning-accent: #f59e0b;
  --job-danger-bg: #fff1f2;
  --job-danger-border: #fecdd3;
  --job-danger-color: #be123c;
  --job-danger-accent: #dc2626;
}

body[data-theme="torqar-blue"] {
  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-soft: #f1f5f9;
  --app-border: #778eaa;
  --app-text: #10243d;
  --app-muted: #566579;
  --app-primary: #235caa;
  --app-primary-rgb: 35, 92, 170;
  --app-primary-hover: #194984;
  --app-primary-soft: #e4edf8;
  --app-accent: #c65a35;
  --app-on-accent: #000000;
  --app-accent-soft: #fbeae4;
  --app-nav-bg: rgba(255, 255, 255, 0.97);
  --app-hero-bg: #10243d;
  --app-hero-text: #f8fafc;
  --app-hero-muted: #d6e4f5;
  --app-shadow-sm: 0 8px 24px rgba(16, 36, 61, 0.08);
  --app-shadow-md: 0 14px 34px rgba(16, 36, 61, 0.12);
  --app-shadow-lg: 0 24px 60px rgba(16, 36, 61, 0.16);
  --app-shadow-color: rgba(16, 36, 61, 0.24);
  --job-active-accent: #235caa;
}

body[data-theme="fresh-blue"] {
  --app-bg: #f3f8ff;
  --app-surface: #ffffff;
  --app-surface-soft: #f7fbff;
  --app-border: #6e93c1;
  --app-text: #122033;
  --app-muted: #53657a;
  --app-primary: #2563eb;
  --app-primary-rgb: 37, 99, 235;
  --app-primary-hover: #1d4ed8;
  --app-primary-soft: #e1ecff;
  --app-accent: #14b8a6;
  --app-on-accent: #122033;
  --app-accent-soft: #dffaf5;
  --app-nav-bg: rgba(255, 255, 255, 0.95);
  --app-hero-bg: #17345f;
  --app-hero-text: #f8fbff;
  --app-hero-muted: #dbeafe;
}

body[data-theme="warm-amber"] {
  --app-bg: #fff8ed;
  --app-surface: #ffffff;
  --app-surface-soft: #fffaf1;
  --app-border: #b48845;
  --app-text: #2d2014;
  --app-muted: #695746;
  --app-primary: #b45309;
  --app-primary-rgb: 180, 83, 9;
  --app-primary-hover: #92400e;
  --app-primary-soft: #ffedd5;
  --app-accent: #0f766e;
  --app-on-accent: #ffffff;
  --app-accent-soft: #dff7f2;
  --app-nav-bg: rgba(255, 252, 247, 0.96);
  --app-hero-bg: #3b2a1c;
  --app-hero-text: #fffaf0;
  --app-hero-muted: #ffedd5;
}

body[data-theme="royal-plum"] {
  --app-bg: #f8f5ff;
  --app-surface: #ffffff;
  --app-surface-soft: #fbf9ff;
  --app-border: #9985c1;
  --app-text: #201532;
  --app-muted: #625577;
  --app-primary: #7c3aed;
  --app-primary-rgb: 124, 58, 237;
  --app-primary-hover: #6d28d9;
  --app-primary-soft: #eee7ff;
  --app-accent: #ec4899;
  --app-on-accent: #201532;
  --app-accent-soft: #fce7f3;
  --app-nav-bg: rgba(255, 255, 255, 0.95);
  --app-hero-bg: #2f1a52;
  --app-hero-text: #fffaff;
  --app-hero-muted: #eee7ff;
}

body[data-theme="sage-mint"] {
  --app-bg: #f4fbf6;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fdf9;
  --app-border: #679d7b;
  --app-text: #14241c;
  --app-muted: #53685d;
  --app-primary: #2f855a;
  --app-primary-rgb: 47, 133, 90;
  --app-primary-hover: #276749;
  --app-primary-soft: #e3f6eb;
  --app-accent: #38bdf8;
  --app-on-accent: #14241c;
  --app-accent-soft: #e0f7ff;
  --app-nav-bg: rgba(250, 255, 252, 0.96);
  --app-hero-bg: #173f2c;
  --app-hero-text: #f8fff9;
  --app-hero-muted: #d9fbe8;
}

body[data-theme="ocean-cyan"] {
  --app-bg: #f1fbfd;
  --app-surface: #ffffff;
  --app-surface-soft: #f6fdff;
  --app-border: #529bad;
  --app-text: #10242c;
  --app-muted: #4f6770;
  --app-primary: #0891b2;
  --app-primary-rgb: 8, 145, 178;
  --app-on-primary: #04181f;
  --app-primary-hover: #0e7490;
  --app-primary-soft: #dff6fb;
  --app-accent: #f97316;
  --app-on-accent: #10242c;
  --app-accent-soft: #ffedd5;
  --app-nav-bg: rgba(248, 254, 255, 0.96);
  --app-hero-bg: #103a46;
  --app-hero-text: #f8fdff;
  --app-hero-muted: #cffafe;
}

body[data-theme="coral-rose"] {
  --app-bg: #fff6f6;
  --app-surface: #ffffff;
  --app-surface-soft: #fffafa;
  --app-border: #c07f81;
  --app-text: #33171b;
  --app-muted: #72575d;
  --app-primary: #e11d48;
  --app-primary-rgb: 225, 29, 72;
  --app-primary-hover: #be123c;
  --app-primary-soft: #ffe4e6;
  --app-accent: #0f766e;
  --app-on-accent: #ffffff;
  --app-accent-soft: #dff7f2;
  --app-nav-bg: rgba(255, 250, 250, 0.96);
  --app-hero-bg: #551c2a;
  --app-hero-text: #fffafb;
  --app-hero-muted: #ffe4e6;
}

body[data-theme="graphite-gold"] {
  --app-bg: #f7f7f5;
  --app-surface: #ffffff;
  --app-surface-soft: #fbfbf8;
  --app-border: #95917c;
  --app-text: #1f2328;
  --app-muted: #5f646b;
  --app-primary: #334155;
  --app-primary-rgb: 51, 65, 85;
  --app-primary-hover: #1f2937;
  --app-primary-soft: #eceff3;
  --app-accent: #d97706;
  --app-on-accent: #1f2328;
  --app-accent-soft: #fff3d6;
  --app-nav-bg: rgba(255, 255, 252, 0.96);
  --app-hero-bg: #20242c;
  --app-hero-text: #fbfbf7;
  --app-hero-muted: #fef3c7;
}

body[data-theme="dark-mode"] {
  --app-bg: #080a0c;
  --app-surface: #101316;
  --app-surface-soft: #151a1f;
  --app-border: #5d6976;
  --app-text: #f5f7f8;
  --app-muted: #a7b0ba;
  --app-primary: #2f6fc4;
  --app-primary-rgb: 47, 111, 196;
  --app-on-primary: #ffffff;
  --app-primary-hover: #4382d6;
  --app-primary-soft: #162c48;
  --app-accent: #f28a63;
  --app-on-accent: #0f172a;
  --app-accent-soft: #3a2118;
  --app-nav-bg: #000000;
  --app-hero-bg: #000000;
  --app-hero-text: #f5f7f8;
  --app-hero-muted: #c5d7ef;
  --app-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.26);
  --app-shadow-md: 0 18px 44px rgba(0, 0, 0, 0.34);
  --app-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.44);
  --app-shadow-color: rgba(0, 0, 0, 0.58);
  --job-active-accent: #4382d6;
  --job-neutral-accent: #94a3b8;
  --job-success-bg: #123524;
  --job-success-border: #226a3d;
  --job-success-color: #86efac;
  --job-success-accent: #22c55e;
  --job-warning-bg: #3b2a11;
  --job-warning-border: #8a5a18;
  --job-warning-color: #facc15;
  --job-warning-accent: #f59e0b;
  --job-danger-bg: #3f1822;
  --job-danger-border: #9f1239;
  --job-danger-color: #fda4af;
  --job-danger-accent: #fb7185;
}

body[data-theme="emerald-lime"] {
  --app-bg: #f3fbf1;
  --app-surface: #ffffff;
  --app-surface-soft: #f7fff4;
  --app-border: #709d58;
  --app-text: #132515;
  --app-muted: #536955;
  --app-primary: #16a34a;
  --app-primary-rgb: 22, 163, 74;
  --app-on-primary: #04180c;
  --app-primary-hover: #15803d;
  --app-primary-soft: #dcfce7;
  --app-accent: #84cc16;
  --app-on-accent: #132515;
  --app-accent-soft: #ecfccb;
  --app-nav-bg: rgba(250, 255, 248, 0.96);
  --app-hero-bg: #143b20;
  --app-hero-text: #f7fff4;
  --app-hero-muted: #dcfce7;
}

body[data-theme="navy-copper"] {
  --app-bg: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fbff;
  --app-border: #7f92af;
  --app-text: #111827;
  --app-muted: #566579;
  --app-primary: #1e3a8a;
  --app-primary-rgb: 30, 58, 138;
  --app-primary-hover: #1e40af;
  --app-primary-soft: #e0e7ff;
  --app-accent: #c2410c;
  --app-on-accent: #ffffff;
  --app-accent-soft: #ffedd5;
  --app-nav-bg: rgba(248, 251, 255, 0.96);
  --app-hero-bg: #13224b;
  --app-hero-text: #f8fbff;
  --app-hero-muted: #dbeafe;
}

body[data-theme="sky-violet"] {
  --app-bg: #f5f9ff;
  --app-surface: #ffffff;
  --app-surface-soft: #f9fbff;
  --app-border: #7591bb;
  --app-text: #171d33;
  --app-muted: #5b6379;
  --app-primary: #6366f1;
  --app-primary-rgb: 99, 102, 241;
  --app-primary-hover: #4f46e5;
  --app-primary-soft: #e9eaff;
  --app-accent: #0ea5e9;
  --app-on-accent: #171d33;
  --app-accent-soft: #e0f2fe;
  --app-nav-bg: rgba(250, 252, 255, 0.96);
  --app-hero-bg: #25245f;
  --app-hero-text: #fbfbff;
  --app-hero-muted: #e0e7ff;
}

body[data-theme="slate-cyan"] {
  --app-bg: #f3f7f8;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fbfc;
  --app-border: #79959f;
  --app-text: #17212b;
  --app-muted: #566875;
  --app-primary: #475569;
  --app-primary-rgb: 71, 85, 105;
  --app-primary-hover: #334155;
  --app-primary-soft: #e2e8f0;
  --app-accent: #06b6d4;
  --app-on-accent: #17212b;
  --app-accent-soft: #cffafe;
  --app-nav-bg: rgba(249, 252, 253, 0.96);
  --app-hero-bg: #1f2937;
  --app-hero-text: #f8fafc;
  --app-hero-muted: #cffafe;
}

body[data-theme="olive-sunset"] {
  --app-bg: #fbfaf2;
  --app-surface: #ffffff;
  --app-surface-soft: #fffdf4;
  --app-border: #9a925e;
  --app-text: #252313;
  --app-muted: #666345;
  --app-primary: #6b8e23;
  --app-primary-rgb: 107, 142, 35;
  --app-on-primary: #12180a;
  --app-primary-hover: #556f1c;
  --app-primary-soft: #edf6d5;
  --app-accent: #ea580c;
  --app-on-accent: #0f172a;
  --app-accent-soft: #ffedd5;
  --app-nav-bg: rgba(255, 254, 248, 0.96);
  --app-hero-bg: #334018;
  --app-hero-text: #fffdf2;
  --app-hero-muted: #fef3c7;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* AH5: comfortable one-handed touch targets on phones (>=44px) without changing desktop density. */
@media (max-width: 575.98px) {
  .btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem var(--app-focus-ring);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: var(--app-font-sans);
  background:
    radial-gradient(circle at top right, var(--app-primary-soft), transparent 30rem),
    var(--app-bg);
  color: var(--app-text);
}

body[data-theme="torqar-blue"],
body[data-theme="dark-mode"] {
  background: var(--app-bg);
}

/* Bridge the design tokens into Bootstrap so every native utility (badges,
   alerts, dropdowns, form controls, links, primary text/bg, focus rings,
   corner radii) inherits the app identity with zero markup changes (I2).
   Scoped to `body[data-theme]` (specificity 0,1,1) so it out-specifies
   Bootstrap's own `[data-bs-theme="light"|"dark"]` token block (0,1,0) — which
   the app sets on <body> next to data-theme; a bare `body` rule would lose. */
body[data-theme] {
  /* Derived theme tokens — declared here (not :root) because the themes set
     --app-primary / --app-border on <body>, so a :root-level var() would be
     stuck on the default theme. --app-focus-ring replaces the previously
     hardcoded focus-ring blue; --app-border-strong was referenced but never
     defined (latent bug). Both now resolve per active theme.
     I5 deepened per-theme --app-border ~10% toward each theme's --app-text;
     AD12 (ex-BL-135) re-derived every theme's --app-border in its own hue to
     clear the WCAG 1.4.11 3:1 non-text floor against BOTH --app-surface and
     --app-surface-soft (guarded by DesignTokenTests contrast math — do not
     lighten a theme's border without re-running it). In dark mode the value
     LIGHTENS instead so it stays visible, and the hardcoded dark control
     ladder below stays a rung crisper than the token-driven table borders.
     --app-border-strong's mix was raised
     26%->34% to firm up the high-emphasis "/" delimiter glyph that consumes it
     (site.css ~L906); it currently paints that glyph's color, not a border. */
  --app-focus-ring: var(--app-primary);
  --app-focus-ring-translucent: color-mix(in srgb, var(--app-primary), transparent 72%);
  --app-border-strong: color-mix(in srgb, var(--app-border), var(--app-text) 34%);
  --app-control-border: color-mix(in srgb, var(--app-border), var(--app-text) 48%);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: var(--app-surface-soft);
  --bs-font-sans-serif: var(--app-font-sans);
  --bs-body-font-family: var(--app-font-sans);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: var(--app-primary-rgb);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-xxl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-focus-ring-color: var(--app-focus-ring-translucent);
  /* NOTE: the *-bg-subtle / *-text-emphasis primary tokens (.alert-primary,
     active accordion header) are intentionally NOT bridged here. They need a
     mode-aware emphasis color (dark ink in light themes, light tint in dark)
     to stay AA-legible; a single var(--app-primary) drops several themes below
     4.5. Deferred to a later wave; Bootstrap's contrast-safe defaults stand. */
}

.navbar {
  background: var(--app-nav-bg) !important;
  box-shadow: 0 8px 24px rgba(15, 35, 55, 0.06);
  position: sticky;
  top: 0;
  z-index: 1040;
}

/* The staff "view-as-customer" banner must never scroll out of sight, or the operator could forget they
   are impersonating. Pin it above the sticky navbar (z-index 1040) so it stays visible for the whole session. */
.portal-impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1041;
}

.navbar-brand {
  color: var(--app-text) !important;
  /* Reserve the brand's intrinsic width. Previously `min-width: 0` let flexbox shrink the brand
     to zero when the expanded top bar ran out of room (many items + the wider English labels),
     and its `nowrap` text then spilled over the first nav links — the LTR-only overlap. Keeping
     the brand at its content width means the nav wraps onto extra rows instead (see below). */
  flex-shrink: 0;
}

.classic-brand-stack {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.55rem;
  margin-inline-end: 0.65rem;
  min-width: 0;
}

.classic-product-brand,
.classic-client-brand {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  min-width: 0;
}

.classic-product-brand {
  margin: 0;
  padding: 0.2rem 0;
  text-decoration: none;
}

.classic-client-copy strong {
  color: var(--app-text);
  line-height: 1.15;
}

.classic-product-logo,
.classic-client-logo,
.classic-brand-fallback,
.classic-client-fallback {
  align-items: center;
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 72%);
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  object-fit: contain;
}

.classic-product-logo,
.classic-brand-fallback {
  block-size: 2.65rem;
  inline-size: 4.25rem;
  padding: 0.2rem;
}

.classic-client-logo,
.classic-client-fallback {
  block-size: 2.65rem;
  inline-size: 4.25rem;
  padding: 0.2rem;
}

.classic-brand-divider {
  background: var(--app-border);
  block-size: 2rem;
  inline-size: 1px;
}

.classic-client-copy {
  display: grid;
  max-inline-size: 12rem;
  min-width: 0;
}

.classic-client-copy strong,
.classic-client-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classic-client-copy small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.app-header-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.app-header-controls > .dropdown {
  min-width: 0;
}

.app-header-controls .dropdown-menu {
  max-inline-size: calc(100vw - 1rem);
}

.app-header-controls .dropdown-toggle {
  max-width: min(16rem, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .navbar-brand {
    max-width: calc(100% - 4rem);
  }

  .navbar-toggler {
    margin-inline-start: auto;
  }

  .navbar-collapse {
    flex-basis: 100%;
    order: 4;
  }

  .app-header-controls {
    flex: 1 0 100%;
    justify-content: flex-start;
    margin-top: 0.25rem;
    order: 3;
  }

  .app-header-controls .dropdown-toggle {
    max-width: min(100%, 11.5rem);
  }
}

@media (max-width: 575.98px) {
  .app-header-controls {
    gap: 0.35rem !important;
  }

  .app-header-controls .dropdown-toggle {
    max-width: 10.75rem;
  }
}

.navbar .nav-link {
  border-radius: var(--radius-pill);
  color: var(--app-text) !important;
  font-weight: 650;
  margin-inline: 0.1rem;
  padding-inline: 0.75rem;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
  background: var(--app-primary-soft);
  color: var(--app-primary) !important;
}

.navbar .nav-link.text-danger {
  color: #dc2626 !important;
}

/* At the expanded (>=lg) breakpoint, keep identity/controls on the first row and give navigation
   the full second row. Product-admin installations expose enough modules to exceed the space left
   beside the brand; a dedicated row prevents horizontal page overflow in both RTL and LTR. */
@media (min-width: 992px) {
  body[data-intelligent-dashboard="false"] .navbar .container-fluid {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  body[data-intelligent-dashboard="false"] .classic-brand-stack {
    order: 1;
  }

  body[data-intelligent-dashboard="false"] .app-header-controls {
    margin-inline-start: auto !important;
    order: 2;
  }

  body[data-intelligent-dashboard="false"] .navbar-collapse {
    border-block-start: 1px solid var(--app-border);
    flex: 1 0 100%;
    min-width: 0;
    order: 3;
    overflow: visible;
    padding-block-start: 0.25rem;
    width: 100%;
  }

  body[data-intelligent-dashboard="false"] .navbar .navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  body[data-intelligent-dashboard="false"] .navbar .nav-link {
    font-size: 0.93rem;
    padding-inline: 0.5rem;
  }

  body[data-intelligent-dashboard="false"] .app-header-controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

.dropdown-menu {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-top: 0.45rem;
  min-width: 14rem;
  padding: 0.45rem;
  box-shadow: var(--app-shadow-md);
  z-index: 1080;
}

.navbar .app-nav-menu {
  background:
    linear-gradient(180deg, var(--app-surface), var(--app-surface-soft)),
    var(--app-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--app-shadow-lg);
  min-width: 17rem;
  overflow: hidden;
  position: relative;
}

.navbar .app-nav-menu::before {
  background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
  content: "";
  height: 3px;
  inset-inline: 0;
  position: absolute;
  top: 0;
}

.navbar .app-nav-menu .dropdown-item {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  gap: 0.55rem;
  justify-content: flex-start;
  min-height: 42px;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.navbar .app-nav-menu .dropdown-item::before {
  background: var(--app-primary);
  border-radius: var(--radius-pill);
  content: "";
  flex: 0 0 auto;
  height: 0.45rem;
  opacity: 0.55;
  width: 0.45rem;
}

.navbar .app-nav-menu .dropdown-item:hover,
.navbar .app-nav-menu .dropdown-item:focus {
  background: var(--app-primary-soft);
  border-color: color-mix(in srgb, var(--app-primary), white 72%);
  color: var(--app-primary);
  transform: translateY(-1px);
}

.navbar .app-nav-menu .dropdown-item.text-danger::before {
  background: #dc2626;
}

.navbar .app-nav-menu--product {
  max-block-size: min(72vh, 42rem);
  overflow-y: auto;
  padding: 0.7rem;
}

.navbar .app-nav-menu--product .app-nav-group {
  min-inline-size: 0;
  padding: 0.2rem;
}

.navbar .app-nav-menu--product .dropdown-header {
  align-items: center;
  color: var(--app-muted);
  display: flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  gap: 0.45rem;
  letter-spacing: 0;
  padding: 0.45rem 0.7rem 0.3rem;
  text-transform: none;
}

.navbar .app-nav-menu--product .dropdown-item {
  min-height: 38px;
  white-space: normal;
}

.dropdown-item {
  border-radius: var(--radius-sm);
  margin: 0.1rem 0.35rem;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  width: auto;
}

@media (min-width: 992px) {
  .navbar .app-nav-menu {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
  }

  .navbar .app-nav-menu.show {
    display: block;
  }

  body[data-intelligent-dashboard="false"] .navbar .app-nav-menu--product.show,
  body[data-intelligent-dashboard="false"] .navbar .nav-item.dropdown:hover > .app-nav-menu--product,
  body[data-intelligent-dashboard="false"] .navbar .nav-item.dropdown:focus-within > .app-nav-menu--product {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: min(46rem, calc(100vw - 2rem));
    max-inline-size: calc(100vw - 2rem);
  }

  html[dir="rtl"] body[data-intelligent-dashboard="false"] .navbar .app-nav-menu--product {
    left: 0 !important;
    position: absolute !important;
    right: auto !important;
    top: 100% !important;
    transform: none !important;
  }

  html[dir="ltr"] body[data-intelligent-dashboard="false"] .navbar .app-nav-menu--product {
    left: auto !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    transform: none !important;
  }

  .navbar .nav-item.dropdown:hover > .app-nav-menu {
    display: block;
  }

  .navbar .nav-link.show,
  .navbar .nav-item.dropdown:focus-within > .nav-link {
    background: var(--app-primary-soft);
    color: var(--app-primary) !important;
  }
}

.dropdown-item:active,
.dropdown-item.active {
  background: var(--app-primary);
}

/* I4: icon system — <icon name="…"> emits <svg class="bi"><use href="…/bootstrap-icons.svg#name"></svg>,
   an inline <use> against the self-hosted sprite (CSP-clean, no JS/CDN). Glyphs scale with font-size
   (1em) and inherit text colour; .bi-flip-rtl (site-rtl.css) mirrors directional icons under dir="rtl". */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.navbar-toggler .bi {
  width: 1.5rem;
  height: 1.5rem;
}

/* I6: nav-link leading glyph — a muted icon before each top-level nav label. The icon inherits the
   nav-link colour (fill: currentColor), so the active/hover colour change cascades with no extra rule. */
.nav-link__icon {
  font-size: 1.05em;
  margin-inline-end: 0.4rem;
  opacity: 0.85;
}

/* I6: account avatar — user initials in a themed circle, replacing the textual "Account" toggle.
   Keeps the dropdown caret; the accessible name lives on the button's aria-label. */
.app-avatar-btn {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  gap: 0.2rem;
  padding: 0;
}

.app-avatar {
  align-items: center;
  /* Solid --app-primary (not a primary->accent gradient): --app-on-primary is tuned to clear AA
     against --app-primary specifically, so the initials stay legible across every theme. */
  background: var(--app-primary);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-on-primary), transparent 78%);
  color: var(--app-on-primary);
  display: inline-flex;
  /* O11 (DP2=A): header avatar enlarged to 3.25rem per the owner's literal request. The header is
     not a table row, so this is outside the "avatars must not grow list rows" constraint. */
  font-size: 0.95rem;
  font-weight: 700;
  height: 3.25rem;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  min-width: 3.25rem;
  width: 3.25rem;
}

.app-avatar--photo {
  object-fit: cover;
}

.classic-product-tools {
  align-items: center;
  direction: ltr;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  margin-inline-end: auto;
}

.classic-account-menu {
  flex: 0 0 auto;
  position: relative;
}

.classic-account-menu__dropdown {
  max-inline-size: min(20rem, calc(100vw - 1rem));
  min-inline-size: 15rem;
}

html[dir="rtl"] .classic-account-menu__dropdown {
  direction: rtl;
  left: auto !important;
  right: 0 !important;
  text-align: right;
}

html[dir="ltr"] .classic-account-menu__dropdown {
  direction: ltr;
  text-align: left;
}

.app-avatar-btn:hover .app-avatar,
.app-avatar-btn:focus-visible .app-avatar {
  box-shadow: 0 0 0 0.18rem var(--app-focus-ring-translucent);
}

/* I6: flash toasts — the region is a plain positioning container (politeness lives on each toast, not
   here, to avoid a nested live region). Pinned bottom-end via position-fixed + bottom-0 end-0 (Bootstrap
   logical end -> mirrors to bottom-left under RTL) so it never overlays the sticky header controls.
   success/error are tinted via theme tokens + a fixed semantic accent. */
.app-toast-region {
  z-index: 1090;
  max-width: min(92vw, 26rem);
}

.app-toast {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-inline-start: 4px solid var(--app-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-lg);
  color: var(--app-text);
}

.app-toast__icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  margin-top: 0.05rem;
}

.app-toast--success {
  border-inline-start-color: #16a34a;
}

.app-toast--success .app-toast__icon {
  color: #16a34a;
}

.app-toast--error {
  border-inline-start-color: #dc2626;
}

.app-toast--error .app-toast__icon {
  color: #dc2626;
}

/* AH3: non-blocking advisory toast (e.g. a receive cost that deviates from the last purchase cost) —
   amber, between the green success and the red error. */
.app-toast--warning {
  border-inline-start-color: #d97706;
}

.app-toast--warning .app-toast__icon {
  color: #d97706;
}

/* I7: portal info flash toast — a polite, themed "notice" variant alongside the
   success/error toasts the staff shell already defines. */
.app-toast--info {
  border-inline-start-color: #2563eb;
}

.app-toast--info .app-toast__icon {
  color: #2563eb;
}

.theme-toggle {
  --theme-toggle-size: 2.25rem;
  align-items: center;
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  border-radius: var(--radius-pill);
  color: var(--app-primary);
  display: inline-flex;
  gap: 0;
  height: var(--theme-toggle-size);
  justify-content: center;
  min-height: var(--theme-toggle-size);
  min-width: var(--theme-toggle-size);
  padding: 0;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  width: var(--theme-toggle-size);
  white-space: nowrap;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.14rem rgba(15, 118, 110, 0.12);
  color: var(--app-primary-hover);
}

.theme-toggle[data-theme-toggle-active="true"] {
  color: var(--app-accent);
}

body[data-theme="dark-mode"] .theme-toggle:hover,
body[data-theme="dark-mode"] .theme-toggle:focus-visible {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  box-shadow: 0 0 0 0.14rem rgba(251, 191, 36, 0.16);
  color: var(--app-accent);
}

.theme-toggle__icon {
  align-items: center;
  display: inline-flex;
  height: 1.05rem;
  justify-content: center;
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  width: 1.05rem;
}

.theme-toggle__icon svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.theme-toggle__icon--sun {
  display: none;
  opacity: 0;
  transform: scale(0.86) rotate(-12deg);
}

.theme-toggle[data-theme-toggle-active="true"] .theme-toggle__icon--moon {
  display: none;
  opacity: 0;
  transform: scale(0.86) rotate(12deg);
}

.theme-toggle[data-theme-toggle-active="true"] .theme-toggle__icon--sun {
  display: inline-flex;
  opacity: 1;
  transform: scale(1) rotate(0);
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-color: var(--app-on-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-active-color: var(--app-on-primary);
}

/* Bootstrap hardcodes white (!important) on .text-bg-primary; pair it with the
   readable on-primary ink so themed status badges keep AA contrast (the recolor
   would otherwise leave white-on-light-primary, e.g. 2.5:1 in dark mode). */
.text-bg-primary {
  color: var(--app-on-primary) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--app-muted);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-bg: var(--app-surface-soft);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-hover-color: var(--app-text);
}

.form-control,
.form-select {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  border-color: var(--app-primary);
  color: var(--app-text);
}

.form-control::placeholder {
  color: var(--app-muted);
}

.date-input-wrap {
  display: block;
  position: relative;
  width: 100%;
}

.date-input-placeholder {
  color: var(--app-muted);
  direction: ltr;
  inset-inline-start: .75rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.date-input-wrap:not(.date-input-wrap--empty) .date-input-placeholder {
  display: none;
}

.date-input-wrap--empty > input[type="date"]::-webkit-datetime-edit {
  color: transparent;
}

.text-muted,
.form-text {
  color: var(--app-muted) !important;
}

.table {
  --bs-table-bg: var(--app-surface);
  --bs-table-border-color: var(--app-border);
  --bs-table-color: var(--app-text);
  --bs-table-striped-bg: var(--app-surface-soft);
  --bs-table-hover-bg: var(--app-primary-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}

.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--app-text);
}

.table tbody tr > * {
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.table tbody tr:hover > * {
  background-color: var(--bs-table-hover-bg, var(--app-primary-soft));
}

.table tbody tr:hover a {
  color: var(--app-primary);
}

/* Grid links read as plain text: the row itself (hover background + colour shift) and the trailing
   "Open" button carry the click affordance, so the default Bootstrap underline on every cell link —
   customer / vehicle name, plate cell, job-card number — is dropped for a cleaner data grid. The
   keyboard focus ring is untouched, so links stay focus-visible. Covers the plate badge too: in the
   grids where it sits inside a details link, the same rule strips the link's underline. (owner, 2026-07-25) */
.table a {
  text-decoration: none;
}

.table thead th {
  background: var(--app-surface-soft);
  color: var(--app-text);
}

.table-responsive {
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 575.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive > .table {
    min-width: 44rem;
  }

  .table-responsive > .table.table--empty {
    min-width: 100%;
  }

  .table-responsive > .table:has(thead th:last-child:empty) > :not(caption) > * > :last-child {
    background-color: var(--bs-table-bg);
    box-shadow: -0.5rem 0 0.75rem color-mix(in srgb, var(--app-shadow-color), transparent 36%);
    inset-inline-end: 0;
    min-width: 4.75rem;
    position: sticky;
    z-index: 2;
  }

  :dir(rtl) .table-responsive > .table:has(thead th:last-child:empty) > :not(caption) > * > :last-child {
    box-shadow: 0.5rem 0 0.75rem color-mix(in srgb, var(--app-shadow-color), transparent 36%);
  }
}

.cashbox-session-table {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  width: 100%;
}

.cashbox-session-table > .table {
  min-width: 58rem;
}

.denom-grid input[type="number"] {
  appearance: auto;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
}

.field-error-message {
  align-items: flex-start;
  display: flex;
  gap: 0.4rem;
  margin-block-start: 0.35rem;
}

.cashbox-session-row--surplus > * {
  background: color-mix(in srgb, var(--job-warning-bg), var(--app-surface) 58%);
}

.cashbox-session-row--surplus > :first-child {
  border-inline-start: 4px solid var(--job-warning-accent);
}

.cashbox-session-row--deficit > * {
  background: color-mix(in srgb, var(--job-danger-bg), var(--app-surface) 58%);
}

.cashbox-session-row--deficit > :first-child {
  border-inline-start: 4px solid var(--job-danger-accent);
}

.cashbox-variance {
  display: inline-flex;
  justify-content: flex-end;
}

.cashbox-variance__trigger {
  align-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--job-warning-color);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 760;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.25rem 0.55rem;
}

.cashbox-variance--deficit .cashbox-variance__trigger {
  color: var(--job-danger-color);
}

.cashbox-variance__trigger:hover,
.cashbox-variance__trigger:focus-visible {
  background: var(--job-warning-bg);
  outline: 3px solid color-mix(in srgb, currentColor, transparent 72%);
  outline-offset: 2px;
}

.cashbox-variance__popover {
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-lg, 0 1rem 2.75rem color-mix(in srgb, var(--app-shadow-color), transparent 24%));
  color: var(--app-text);
  display: none;
  inline-size: min(22rem, calc(100vw - 2rem));
  margin: 0;
  max-inline-size: calc(100vw - 2rem);
  padding: 1rem;
  position: fixed;
  z-index: 1080;
}

.cashbox-variance__popover::backdrop {
  background: transparent;
}

.cashbox-variance__popover:popover-open,
.cashbox-variance__popover.is-open {
  display: block;
}

.cashbox-variance__popover-heading {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block-end: 0.75rem;
}

.cashbox-variance__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--app-muted);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.cashbox-variance__close:hover,
.cashbox-variance__close:focus-visible {
  background: var(--app-surface-soft);
  color: var(--app-text);
}

.cashbox-variance__popover dl {
  display: grid;
  gap: 0.45rem 0.75rem;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  margin: 0;
}

.cashbox-variance__popover dt {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.cashbox-variance__popover dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .cashbox-variance__popover {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    inline-size: 100%;
    inset: auto 0 0;
    max-inline-size: 100%;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
}

.purchase-receive-row--has-return {
  --bs-table-bg: color-mix(in srgb, var(--app-accent-soft), var(--app-surface) 42%);
  --bs-table-hover-bg: color-mix(in srgb, var(--app-accent-soft), var(--app-primary-soft) 35%);
}

.purchase-receive-row--has-return > * {
  border-color: color-mix(in srgb, var(--app-accent), var(--app-border) 65%);
}

.purchase-receive-row--has-return > :first-child {
  border-inline-start: 4px solid var(--app-accent);
}

.purchase-return-badge {
  background: var(--app-accent-soft);
  border: 1px solid color-mix(in srgb, var(--app-accent), var(--app-border) 55%);
  color: var(--app-text);
  font-weight: 700;
}

.stock-comparison-row > :first-child {
  border-inline-start: 4px solid var(--app-primary);
}

.table tr.stock-comparison-group--even {
  --bs-table-bg: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 58%);
  --bs-table-hover-bg: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 38%);
}

.table tr.stock-comparison-group--odd {
  --bs-table-bg: color-mix(in srgb, var(--app-accent-soft), var(--app-surface) 62%);
  --bs-table-hover-bg: color-mix(in srgb, var(--app-accent-soft), var(--app-primary-soft) 42%);
}

.table tr.stock-comparison-group--odd > :first-child {
  border-inline-start-color: var(--app-accent);
}

.stock-comparison-part {
  display: grid;
  gap: 0.25rem;
  min-width: 220px;
}

.stock-comparison-part strong,
.stock-comparison-part__link {
  font-weight: 760;
}

.stock-comparison-part__link {
  color: var(--app-text);
  text-decoration: none;
}

.stock-comparison-part__link:hover,
.stock-comparison-part__link:focus {
  color: var(--app-primary);
  text-decoration: underline;
}

.stock-comparison-part__meta {
  align-items: center;
  color: var(--app-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.stock-comparison-part__meta > span:not(:last-child)::after {
  color: var(--app-border-strong);
  content: "/";
  margin-inline-start: 0.35rem;
}

.stock-comparison-part__meta > .badge::after {
  content: "";
  margin: 0;
}

.stock-comparison-branch {
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 65%);
  border-radius: var(--radius-pill);
  color: var(--app-primary);
  display: inline-flex;
  font-weight: 740;
  line-height: 1.2;
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

body[data-theme="dark-mode"] .text-bg-light {
  background-color: var(--app-surface-soft) !important;
  color: var(--app-text) !important;
}

body[data-theme="dark-mode"] .text-bg-secondary {
  background-color: #475569 !important;
  color: #f8fafc !important;
}

body[data-theme="dark-mode"] {
  --bs-dark-rgb: 241, 245, 249;
  color-scheme: dark;
}

body[data-theme="dark-mode"] .bg-white {
  background-color: var(--app-surface) !important;
}

body[data-theme="dark-mode"] .bg-light,
body[data-theme="dark-mode"] .bg-body-tertiary {
  background-color: var(--app-surface-soft) !important;
  color: var(--app-text) !important;
}

body[data-theme="dark-mode"] .text-dark {
  color: var(--app-text) !important;
}

.detail-facts-panel {
  background: var(--app-surface);
  border-color: var(--app-border) !important;
  color: var(--app-text);
}

.detail-facts-panel dt {
  color: var(--app-muted);
}

body[data-theme="dark-mode"] .navbar {
  border-color: var(--app-border) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark-mode"] .navbar-toggler {
  border-color: var(--app-border);
}

body[data-theme="dark-mode"] .dropdown-menu,
body[data-theme="dark-mode"] .navbar .app-nav-menu {
  background:
    linear-gradient(180deg, var(--app-surface), var(--app-surface-soft)),
    var(--app-surface);
  color: var(--app-text);
}

body[data-theme="dark-mode"] .dropdown-divider {
  border-top-color: var(--app-border);
}

body[data-theme="dark-mode"] .dropdown-item {
  color: var(--app-text);
}

body[data-theme="dark-mode"] .dropdown-item:hover,
body[data-theme="dark-mode"] .dropdown-item:focus {
  color: var(--app-text);
}

body[data-theme="dark-mode"] .btn-outline-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-bg: var(--app-surface-soft);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-hover-color: var(--app-text);
}

/* Dark controls keep a deliberate contrast rung above the quiet canvas border. */
body[data-theme="dark-mode"] .form-control,
body[data-theme="dark-mode"] .form-select {
  background-color: #0d1013;
  border-color: #46515c;
  color: var(--app-text);
}

body[data-theme="dark-mode"] .form-control:focus,
body[data-theme="dark-mode"] .form-select:focus {
  background-color: #11161c;
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.18rem rgba(47, 111, 196, 0.24);
  color: var(--app-text);
}

body[data-theme="dark-mode"] .form-control::placeholder {
  color: #929ca6;
}

body[data-theme="dark-mode"] .table-responsive {
  background: var(--app-surface);
  border-color: var(--app-border);
}

body[data-theme="dark-mode"] .table {
  --bs-table-bg: var(--app-surface);
  --bs-table-border-color: var(--app-border);
  --bs-table-color: var(--app-text);
  --bs-table-hover-bg: #182333;
  --bs-table-striped-bg: var(--app-surface-soft);
}

body[data-theme="dark-mode"] .table thead th {
  background: #151d27;
  color: #d7dce1;
}

body[data-theme="dark-mode"] .table tbody tr:hover > * {
  color: var(--app-text);
}

body[data-theme="dark-mode"] .app-card,
body[data-theme="dark-mode"] .info-panel,
body[data-theme="dark-mode"] .form-panel,
body[data-theme="dark-mode"] .filter-panel,
body[data-theme="dark-mode"] .dashboard-card,
body[data-theme="dark-mode"] .module-card,
body[data-theme="dark-mode"] .metric-card {
  background: var(--app-surface);
  border-color: #3d464f;
}

body[data-theme="dark-mode"] .info-panel h2,
body[data-theme="dark-mode"] .form-panel h2,
body[data-theme="dark-mode"] .module-card h2,
body[data-theme="dark-mode"] .section-title h2 {
  background: linear-gradient(90deg, #162c48, transparent);
  color: var(--app-text);
}

body[data-theme="dark-mode"] .report-metric {
  background: #12171c;
  border-color: #46515c;
  color: var(--app-text);
}

body[data-theme="dark-mode"] .report-metric span {
  color: #cbd2d9;
}

body[data-theme="dark-mode"] .report-metric strong {
  color: #ffffff;
}

.footer {
  background: color-mix(in srgb, var(--app-surface), transparent 8%);
}

.app-logo {
  display: inline-block;
  height: 32px;
  max-width: 160px;
  object-fit: contain;
  width: auto;
}

.workbench-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1rem;
}

.operational-action-toolbar {
  align-items: center;
  direction: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: flex-start;
  margin-block-end: 1rem;
  text-align: start;
}

.operational-action-toolbar .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  justify-content: center;
  min-block-size: 44px;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .operational-action-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operational-action-toolbar .btn {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .operational-action-toolbar__primary {
    grid-column: 1 / -1;
  }
}

.dashboard-filter--inline {
  padding-block: 0.8rem;
}

.dashboard-filter__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-filter__field {
  align-items: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.dashboard-filter__field .form-label {
  font-weight: var(--fw-semibold);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .dashboard-filter__row {
    grid-template-columns: 1fr;
  }
}

.ai-settings-return {
  display: flex;
  margin-block: 0.75rem 1rem;
}

.ai-settings-return a {
  align-items: center;
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 72%);
  border-radius: var(--radius-pill);
  color: var(--app-primary);
  display: inline-flex;
  font-weight: var(--fw-semibold);
  gap: 0.45rem;
  min-block-size: 42px;
  padding-inline: 0.9rem;
  text-decoration: none;
}

.ai-settings-hub {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-settings-hub__group h2 {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin-block-end: 0.9rem;
}

.ai-settings-hub__links {
  display: grid;
  gap: 0.55rem;
}

.ai-settings-hub__links a {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  color: var(--app-text);
  display: flex;
  font-weight: var(--fw-semibold);
  min-block-size: 44px;
  padding: 0.65rem 0.8rem;
  text-decoration: none;
}

.ai-settings-hub__links a:hover,
.ai-settings-hub__links a:focus-visible {
  background: var(--app-primary-soft);
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 60%);
  color: var(--app-primary);
}

@media (max-width: 767.98px) {
  .ai-settings-hub {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199.98px) {
  .classic-client-copy small {
    display: none;
  }

  .classic-client-copy {
    max-inline-size: 6.5rem;
  }
}

@media (max-width: 575.98px) {
  .classic-brand-stack {
    max-inline-size: calc(100% - 4rem);
  }

  .classic-client-copy,
  .classic-brand-divider {
    display: none;
  }

  .workbench-actions .btn {
    width: 100%;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.workbench {
  padding: 0.75rem 0 3rem;
}

.profile-photo-panel {
  align-items: center;
  border-block: 1px solid var(--app-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1rem;
}

.profile-photo-panel__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.profile-photo-panel__image {
  block-size: 3rem;
  border-radius: var(--radius-pill);
  inline-size: 3rem;
  object-fit: cover;
}

.workbench__intro {
  max-width: 760px;
}

.page-title {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1.5rem 0;
}

.page-title h1 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 750;
  letter-spacing: 0;
  margin: 0;
}

.page-title .lead {
  margin-bottom: 0;
}

.page-status {
  font-size: 0.95rem;
  margin-top: 0.35rem;
  white-space: nowrap;
}

.eyebrow {
  color: var(--app-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.workbench h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 750;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.workbench .lead {
  color: var(--app-muted);
  max-width: 680px;
}

.flow-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0;
}

.flow-strip span {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--app-primary);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  color: var(--app-text);
  font-weight: 650;
  min-height: 64px;
  padding: 1rem;
}

.summary-strip {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 1rem;
}

.summary-strip span {
  color: var(--app-muted);
  font-weight: 650;
}

.summary-strip strong {
  font-size: 1.25rem;
}

.summary-strip small {
  color: var(--app-muted);
}

.module-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* I9 — unified card contract. `.app-card` is the canonical surface; the legacy
   names are retained as aliases so existing markup keeps working during the
   migration. Per-variant layout/typography stays on each name below. */
.app-card,
.dashboard-card,
.module-card,
.info-panel,
.form-panel,
.mfa-setup-card,
.mfa-verification-panel {
  background: linear-gradient(180deg, var(--app-surface), var(--app-surface-soft));
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  color: var(--app-text);
  min-width: 0;
  padding: 1.25rem;
}

.dashboard-card {
  display: grid;
  gap: 0.5rem;
  min-height: 150px;
  text-decoration: none;
}

.dashboard-card:hover {
  border-color: var(--app-primary);
  color: var(--app-text);
  transform: translateY(-1px);
}

.dashboard-card span {
  align-self: start;
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), white 72%);
  border-radius: var(--radius-pill);
  color: var(--app-primary);
  display: inline-flex;
  font-weight: 650;
  padding: 0.35rem 0.65rem;
  width: fit-content;
}

.dashboard-card strong {
  font-size: 2rem;
  line-height: 1;
}

.dashboard-card small {
  color: var(--app-muted);
  font-size: 0.9rem;
}

.module-card {
  min-height: 180px;
}

.module-card h2 {
  align-items: center;
  background: linear-gradient(90deg, var(--app-primary-soft), transparent);
  border-inline-start: 4px solid var(--app-primary);
  border-radius: var(--radius);
  color: var(--app-text);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
}

.module-card p {
  color: var(--app-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.details-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-panel h2,
.form-panel h2 {
  align-items: center;
  background: linear-gradient(90deg, var(--app-primary-soft), transparent);
  border-inline-start: 4px solid var(--app-primary);
  border-radius: var(--radius);
  color: var(--app-text);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.lookup-field {
  position: relative;
}

/* O2: lookup paired with an inline "+" quick-create button. The field grows; the dropdown stays
   anchored to the field (which keeps its own positioning context), the button sits inline-end. */
.lookup-field-group {
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}

.lookup-field-group > .lookup-field {
  flex: 1 1 auto;
  min-width: 0;
}

.lookup-create-btn {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
}

.lookup-create-btn[hidden] {
  display: none !important;
}

.quick-create-owner-field {
  min-width: 0;
}

.quick-create-owner-error:not(.d-none) {
  display: block;
  margin-block-start: 0.35rem;
}

.lookup-results {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  left: 0;
  /* OP-039 — floor the dropdown width so a plate badge (116px) + subtitle + branch pill fit even when
     the search field is narrow (e.g. a col-md-4 filter); with left:0 + right:0 the box grows toward the
     inline-end (LTR keeps left, RTL keeps right), and 96vw keeps it on-screen at the edges. */
  min-width: min(20rem, 96vw);
  /* Taller cap so plate-badge rows (~54px) still show ~6 results, not ~2.5, for fast scanning (M1). */
  max-height: 22.5rem;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 1080;
}

.lookup-result {
  align-items: flex-start;
  display: grid;
  gap: 0.15rem 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: start;
}

.lookup-result.active,
.lookup-result:focus {
  background: var(--app-primary-soft);
  color: var(--app-text);
}

.lookup-result__label {
  font-weight: 650;
  min-width: 0;
}

.lookup-result small {
  color: var(--app-muted);
  grid-column: 1;
  /* OP-039 — clamp the subtitle to two lines so a long "{brand} {model} - {customer}" can't wrap into a
     tall stack under the taller plate-badge row (M2). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lookup-result .badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  /* OP-039 — centre the branch pill against the taller plate-badge row instead of leaving a big gap
     above/below it (the container aligns items to flex-start). */
  align-self: center;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookup-empty {
  color: var(--app-muted);
  padding: 0.75rem 1rem;
}

.lookup-status {
  color: var(--app-muted);
  font-size: 0.875rem;
  padding: 0.65rem 1rem;
}

.table-row-count-footer td {
  background: var(--app-surface-soft) !important;
  border-top: 1px solid var(--app-border);
  font-size: 0.875rem;
  font-weight: 650;
}

.pagination-shell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.pagination-summary {
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.pagination {
  margin-bottom: 0;
}

.operational-detail {
  display: grid;
  gap: 1rem;
}

.detail-summary-band {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft), transparent 15%), transparent 58%),
    var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr);
  padding: 1rem;
}

.detail-summary-band__main {
  min-width: 0;
}

.detail-summary-band__main h2 {
  background: none;
  border: 0;
  border-radius: 0;
  display: block;
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
  min-height: 0;
  padding: 0;
}

.detail-summary-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-summary-item {
  background: color-mix(in srgb, var(--app-surface), transparent 6%);
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 20%);
  border-inline-start: 4px solid transparent;
  border-radius: var(--radius);
  min-width: 0;
  padding: 0.7rem;
}

.detail-summary-item span {
  color: var(--app-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 750;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.detail-summary-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.detail-summary-date {
  direction: ltr;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.detail-summary-date time {
  direction: ltr;
  display: block;
  unicode-bidi: isolate;
}

.detail-summary-date small {
  color: inherit;
  direction: ltr;
  display: block;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.2;
  unicode-bidi: isolate;
}

.detail-summary-item--money {
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 42%);
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 55%);
  border-inline-start-color: var(--app-primary);
}

.detail-summary-item--money strong,
.detail-summary-item--labor strong,
.detail-summary-item--parts strong {
  color: var(--app-text);
  font-size: 1.05rem;
}

.detail-summary-item--labor {
  border-inline-start-color: var(--job-active-accent);
}

.detail-summary-item--parts {
  border-inline-start-color: var(--app-primary);
}

.detail-summary-item--time {
  border-inline-start-color: var(--job-neutral-accent);
}

.detail-summary-item--neutral {
  border-inline-start-color: color-mix(in srgb, var(--app-border), var(--app-text) 16%);
}

.detail-summary-item--success {
  background: var(--job-success-bg);
  border-color: var(--job-success-border);
  border-inline-start-color: var(--job-success-accent);
}

.detail-summary-item--attention,
.detail-summary-item--warning {
  background: var(--job-warning-bg);
  border-color: var(--job-warning-border);
  border-inline-start-color: var(--job-warning-accent);
}

.detail-summary-item--danger {
  background: var(--job-danger-bg);
  border-color: var(--job-danger-border);
  border-inline-start-color: var(--job-danger-accent);
}

.cashbox-review {
  grid-template-columns: 1fr;
}

.cashbox-review__main {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.cashbox-review__main h2 {
  background: none;
  border: 0;
  border-radius: 0;
  display: block;
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
  min-height: 0;
  padding: 0;
}

.cashbox-review__metrics {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cashbox-review__metric {
  min-height: 118px;
}

.cashbox-review__metric strong {
  font-size: 1.28rem;
}

.cashbox-review__metric small {
  color: var(--app-muted);
  display: block;
  margin-top: 0.25rem;
}

.cashbox-reconciliation {
  background: color-mix(in srgb, var(--app-surface-soft), transparent 8%);
  border: 1px dashed color-mix(in srgb, var(--app-border), var(--app-primary) 25%);
  border-radius: var(--radius);
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem;
}

.cashbox-reconciliation__formula {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
}

.cashbox-reconciliation__formula span {
  color: var(--app-muted);
  font-weight: 700;
}

.cashbox-reconciliation__formula strong {
  color: var(--app-text);
}

.cashbox-variance-note {
  background: var(--job-danger-bg);
  border: 1px solid var(--job-danger-border);
  border-radius: var(--radius);
  color: var(--job-danger-color);
  font-weight: 700;
  padding: 0.65rem 0.75rem;
}

.cashbox-detail-list {
  display: grid;
  gap: 0.35rem;
}

.cashbox-detail-row {
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border), transparent 34%);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr);
  min-height: 30px;
  padding: 0.25rem 0;
}

.cashbox-detail-row:last-child {
  border-bottom: 0;
}

.cashbox-detail-row dt {
  color: var(--app-muted);
  font-size: 0.86rem;
  font-weight: 760;
  margin: 0;
}

.cashbox-detail-row dd {
  color: var(--app-text);
  font-weight: 700;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: end;
}

.cashbox-stat-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cashbox-stat {
  background: var(--app-surface);
  gap: 0.25rem;
  min-height: 86px;
  padding: 0.8rem;
}

.cashbox-stat span {
  color: var(--app-muted);
  font-size: 0.82rem;
  font-weight: 750;
  text-transform: uppercase;
}

.cashbox-stat strong {
  color: var(--app-text);
  font-size: 1.2rem;
}

.cashbox-money,
.cashbox-date {
  direction: ltr;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.cashbox-money--positive {
  color: var(--job-success-color);
  font-weight: 760;
}

.cashbox-money--negative {
  color: var(--job-danger-color);
  font-weight: 760;
}

.detail-section-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.detail-action-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-cockpit-title__actions,
.job-hero__badges,
.job-section-heading__meta,
.job-checklist-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.job-hero {
  align-items: stretch;
  border-inline-start: 6px solid var(--app-primary);
}

.job-hero--active {
  border-inline-start-color: var(--job-active-accent);
}

.job-hero--warning {
  background:
    linear-gradient(135deg, var(--job-warning-bg), transparent 62%),
    var(--app-surface);
  border-color: var(--job-warning-border);
  border-inline-start-color: var(--job-warning-accent);
}

.job-hero--success {
  background:
    linear-gradient(135deg, var(--job-success-bg), transparent 62%),
    var(--app-surface);
  border-color: var(--job-success-border);
  border-inline-start-color: var(--job-success-accent);
}

.job-hero--danger {
  background:
    linear-gradient(135deg, var(--job-danger-bg), transparent 62%),
    var(--app-surface);
  border-color: var(--job-danger-border);
  border-inline-start-color: var(--job-danger-accent);
}

.job-hero .badge {
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
}

.job-hero .job-status-badge {
  border: 2px solid color-mix(in srgb, currentColor, transparent 45%);
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
}

.job-hero__main {
  display: grid;
  gap: 0.35rem;
}

.job-hero__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.job-next-strip {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.job-next-item {
  border-inline-start: 1px solid var(--app-border);
  border-block-start: 3px solid transparent;
  min-width: 0;
  padding: 0.85rem 1rem;
}

.job-next-item:first-child {
  border-inline-start: 0;
}

.job-next-item span,
.job-inspection-grid span,
.job-notes-grid span,
.job-rail-list dt {
  color: var(--app-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 750;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.job-next-item strong,
.job-inspection-grid strong,
.job-rail-list dd {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

.job-tone--success {
  --job-tone-bg: var(--job-success-bg);
  --job-tone-border: var(--job-success-border);
  --job-tone-color: var(--job-success-color);
}

.job-tone--warning {
  --job-tone-bg: var(--job-warning-bg);
  --job-tone-border: var(--job-warning-border);
  --job-tone-color: var(--job-warning-color);
}

.job-tone--danger {
  --job-tone-bg: var(--job-danger-bg);
  --job-tone-border: var(--job-danger-border);
  --job-tone-color: var(--job-danger-color);
}

.job-tone--active {
  --job-tone-bg: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 28%);
  --job-tone-border: color-mix(in srgb, var(--app-primary), var(--app-border) 45%);
  --job-tone-color: var(--app-primary);
}

.job-tone--neutral {
  --job-tone-bg: var(--app-surface-soft);
  --job-tone-border: var(--app-border);
  --job-tone-color: var(--app-muted);
}

.job-next-item.job-tone--success,
.job-next-item.job-tone--warning,
.job-next-item.job-tone--danger,
.job-next-item.job-tone--active,
.job-next-item.job-tone--neutral {
  background: var(--job-tone-bg);
  border-block-start-color: var(--job-tone-color);
}

.job-next-item.job-tone--success strong,
.job-next-item.job-tone--warning strong,
.job-next-item.job-tone--danger strong,
.job-next-item.job-tone--active strong {
  color: var(--job-tone-color);
}

.job-next-item--current {
  border-block-start-width: 5px;
  box-shadow: inset 0 0 0 1px var(--job-tone-border);
  padding-block: 1rem;
}

.job-next-item--current span {
  color: var(--job-tone-color);
}

.job-next-item--current strong {
  font-size: 1.15rem;
  font-weight: 850;
}

.job-attention-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.job-attention-card {
  background: var(--job-tone-bg, var(--app-surface-soft));
  border: 1px solid var(--job-tone-border, var(--app-border));
  border-inline-start: 4px solid var(--job-tone-color, var(--app-primary));
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  min-width: 0;
  padding: 0.8rem 0.9rem;
}

.job-attention-card span {
  color: var(--app-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 750;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.job-attention-card strong {
  color: var(--job-tone-color, var(--app-text));
  display: block;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.job-cockpit-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.job-cockpit-main,
.job-cockpit-rail {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.job-cockpit-rail {
  position: sticky;
  top: 1rem;
}

.job-section {
  display: grid;
  gap: 1rem;
}

.job-section-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

.job-action-row,
.job-collaboration-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-table-stack {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* W2: global clear (×) affordance. The host gains positioning context; the button floats at
   the input's inline-end (physical coordinates computed in JS so RTL mirrors) and only shows
   while the field has content. */
.clearable-host {
  position: relative;
}

.field-clear-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--app-muted);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  height: 22px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  width: 22px;
  z-index: 5;
}

.field-clear-btn:hover {
  background: var(--app-surface-soft);
  color: var(--app-text);
}

.field-clear-btn:focus-visible {
  outline: 2px solid var(--app-focus-ring, var(--app-primary));
  outline-offset: 1px;
}

/* AD12 (ex-BL-129): on touch layouts the small glyphs carry an invisible expanded hit area so
   both shared controls present >=44px tap targets (22px clear x: -11px; 28px .btn-close: -8px).
   Desktop pointers keep the tight footprint so clicks near the input text still land on the
   input, not the clear affordance. */
@media (pointer: coarse), (max-width: 576px) {
  .field-clear-btn::after {
    content: "";
    inset: -11px;
    position: absolute;
  }

  .btn-close {
    position: relative;
  }

  .btn-close::after {
    content: "";
    inset: -8px;
    position: absolute;
  }
}

.has-clear-affordance {
  padding-inline-end: 2rem;
}

/* Y4: comfortable long-text prompt editing (AI master prompt). Wide, tall, user-resizable,
   monospace; the auto-grow JS module keeps the box as tall as its content. */
.prompt-editor {
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.55;
  min-height: 24rem;
  resize: vertical;
  tab-size: 2;
  white-space: pre-wrap;
}

.job-collapsible-action {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  min-width: 0;
  padding: 0.75rem;
}

.job-collapsible-action[open] {
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

/* Z9: the two side-by-side add panels stretch to equal grid heights, but the labor form has
   more fields, so the part panel's submit button used to float ~90px above its neighbour's.
   Open panels become a flex column and the form fills the card with its submit button pinned
   to the bottom — one shared button baseline in LTR and RTL alike. */
.job-action-row .job-collapsible-action[open] {
  display: flex;
  flex-direction: column;
}

/* Modern engines slot the <details> body into the ::details-content pseudo-box, so the
   form is not a direct flex item of the card — the pseudo must join the flex chain too.
   Engines without the pseudo simply keep today's layout (progressive enhancement). */
.job-action-row .job-collapsible-action[open]::details-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.job-action-row .job-collapsible-action[open] > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.job-action-row .job-collapsible-action[open] > form > button[type="submit"] {
  margin-top: auto;
}

.job-collapsible-action summary {
  cursor: pointer;
  font-weight: 750;
  list-style-position: inside;
}

.job-collapsible-action form {
  padding-top: 0.75rem;
}

.job-collapsible-action--full {
  margin-bottom: 1rem;
}

/* A disclosure sized for a dense table cell (the spare-part line actions). The card treatment the base
   component carries is right for a panel and far too heavy for a row: it is dropped while CLOSED so a row at
   rest shows only its action verbs, and taken up again when OPEN, where the card edge is what separates a
   destructive form from the row it will act on. The summary reads as a quiet destructive control, so the
   affirmative action in the same cell keeps the visual weight — an irreversible action should be reachable
   in one click but never look like the obvious one. */
.job-collapsible-action--inline {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.job-collapsible-action--inline[open] {
  background: var(--app-surface);
  border-color: var(--app-border);
  padding: 0.5rem;
}

.job-collapsible-action--inline > summary {
  /* --job-danger-color, not a Bootstrap danger: it is the token that carries a per-theme value, so the
     summary stays legible in dark mode instead of holding a light-theme red. */
  color: var(--job-danger-color);
  font-size: 0.8125rem;
  font-weight: 600;
  /* ~31px of hit area — deliberately an inline control, not one of the shared controls AD12 holds to 44px.
     Giving every table row a 44px disclosure would grow the row for an action most rows never take; the
     affirmative button beside it is the full-size target. */
  padding: 0.35rem 0;
  min-height: 1.75rem;
}

.job-collapsible-action--inline > summary:hover {
  text-decoration: underline;
}

.job-collapsible-action--inline > form {
  padding-top: 0.5rem;
}

.job-subsection-title {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.job-subsection-title h3 {
  font-size: 1rem;
  margin: 0;
}

.job-subsection-title span {
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.table tr.job-line--requested {
  --bs-table-bg: var(--app-surface-soft);
}

.table tr.job-line--approved {
  --bs-table-bg: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 45%);
}

.table tr.job-line--needs-stock {
  --bs-table-bg: var(--job-warning-bg);
  --bs-table-color: var(--app-text);
}

.table tr.job-line--consumed {
  --bs-table-bg: var(--job-success-bg);
}

.table tr.job-line--cancelled {
  --bs-table-bg: var(--app-surface-soft);
  --bs-table-color: var(--app-muted);
}

.table tr.job-line--requested > :first-child,
.table tr.job-line--approved > :first-child,
.table tr.job-line--needs-stock > :first-child,
.table tr.job-line--consumed > :first-child,
.table tr.job-line--cancelled > :first-child {
  border-inline-start: 4px solid transparent;
}

.table tr.job-line--requested > :first-child {
  border-inline-start-color: var(--job-warning-accent);
}

.table tr.job-line--approved > :first-child {
  border-inline-start-color: var(--app-primary);
}

.table tr.job-line--needs-stock > :first-child {
  border-inline-start-color: var(--job-warning-accent);
}

.table tr.job-line--consumed > :first-child {
  border-inline-start-color: var(--job-success-accent);
}

.table tr.job-line--cancelled > :first-child {
  border-inline-start-color: var(--job-neutral-accent);
}

.job-inspection-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-notes-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-notes-grid > div,
.job-inspection-grid > div {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  min-width: 0;
  padding: 0.75rem;
}

.job-checklist-strip {
  border-top: 1px solid var(--app-border);
  padding-top: 0.9rem;
}

.job-activity-feed {
  display: grid;
  gap: 0.75rem;
}

.job-activity-item {
  border-top: 1px solid var(--app-border);
  padding-top: 0.75rem;
}

.job-activity-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.job-rail-panel {
  display: grid;
  gap: 0.85rem;
}

.job-rail-panel h2 {
  font-size: 1rem;
  margin-bottom: 0;
}

.job-rail-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.job-invoice-card {
  background: color-mix(in srgb, var(--app-surface), var(--job-tone-bg, var(--app-surface-soft)) 18%);
  border: 1px solid var(--job-tone-border, var(--app-border));
  border-inline-start: 4px solid var(--job-tone-color, var(--app-primary));
  border-radius: var(--radius);
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
}

.job-invoice-card__header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 0;
}

.job-invoice-card__identity {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.job-invoice-card__identity span {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.job-invoice-card__identity strong {
  color: var(--app-text);
  display: block;
  font-size: 0.82rem;
  font-weight: 750;
  max-width: 13.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-invoice-card__header .badge {
  flex: 0 0 auto;
}

.job-invoice-ledger {
  background: var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--job-tone-border, var(--app-border)), transparent 20%);
  border-radius: var(--radius);
  display: grid;
  overflow: hidden;
}

.job-invoice-ledger__row {
  align-items: baseline;
  border-top: 1px solid color-mix(in srgb, var(--app-border), transparent 25%);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(6.25rem, 1fr) minmax(0, auto);
  min-width: 0;
  padding: 0.52rem 0.65rem;
}

.job-invoice-ledger__row:first-child {
  border-top: 0;
}

.job-invoice-ledger__row span {
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 750;
  text-transform: uppercase;
}

.job-invoice-ledger__row strong {
  color: var(--app-text);
  direction: ltr;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: end;
  unicode-bidi: isolate;
}

.job-invoice-ledger__row--total {
  background: color-mix(in srgb, var(--job-tone-bg, var(--app-primary-soft)), var(--app-surface) 34%);
  padding-block: 0.68rem;
}

.job-invoice-ledger__row--total span {
  color: var(--app-text);
}

.job-invoice-ledger__row--total strong {
  font-size: 1.25rem;
}

.job-invoice-ledger__row--remaining strong {
  color: var(--job-tone-color, var(--app-primary));
}

.job-approval-summary {
  background: var(--job-tone-bg, var(--app-surface-soft));
  border: 1px solid var(--job-tone-border, var(--app-border));
  border-inline-start: 4px solid var(--job-tone-color, var(--app-primary));
  border-radius: var(--radius);
  padding: 0.75rem;
}

.job-approval-request {
  color: var(--job-tone-color, var(--app-text));
  font-weight: 750;
}

.job-timeline {
  display: grid;
  gap: 0.75rem;
}

.job-timeline-item {
  border-inline-start: 3px solid var(--app-primary);
  padding-inline-start: 0.75rem;
}

.job-timeline-item strong,
.job-timeline-item small {
  display: block;
}

.job-danger-panel {
  border-color: color-mix(in srgb, #dc3545, var(--app-border) 35%);
}

.toolbar-form {
  max-width: 720px;
}

.compact-form {
  display: grid;
  gap: 0.65rem;
}

.compact-form > .btn {
  justify-self: stretch;
}

.inline-form {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.inline-form .form-control {
  min-width: 120px;
}

.section-title {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title h2 {
  background: linear-gradient(90deg, var(--app-primary-soft), transparent);
  border-inline-start: 4px solid var(--app-primary);
  border-radius: var(--radius);
  display: inline-flex;
  margin-bottom: 0;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
}

.empty-state {
  color: var(--app-muted);
  margin: 1rem 0 0;
}

/* Skip-to-content link: hidden until keyboard-focused, then pinned to the top-start corner. */
.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1080;
  padding: 0.5rem 0.85rem;
  background: var(--app-primary);
  color: var(--app-on-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.summary-number {
  font-size: 1.75rem;
  font-weight: 750;
}

.filter-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* W3: auto-apply filter bars. The built-in Filter button hides (site.js applies on change;
   it stays in the markup as the default button so Enter still submits free text) and the
   panel dims while the applied filter navigates. */
form[data-filter-auto] .filter-bar__submit {
  /* !important: the wrapper also carries Bootstrap's d-grid (display: grid !important). */
  display: none !important;
}

.filter-bar__reset-link {
  align-items: center;
  display: inline-flex;
  inline-size: 44px;
  justify-content: center;
  min-block-size: 44px;
  padding: 0;
}

.filter-bar__reset-link .bi {
  block-size: 1rem;
  inline-size: 1rem;
}

form[data-filter-auto].filter-submitting {
  cursor: progress;
  opacity: 0.65;
  pointer-events: none;
}

/* O4 — vehicle display photo: avatar sizes shared by every vehicle-card surface, plus the
   photo block on Vehicles/Details. The placeholder SVG carries its own background.
   O7: the base class carries a small SAFE default — a render site that forgets the size modifier
   used to show the 320px thumbnail at natural size (the huge customers-list photo); the --sm/--md/--lg
   modifiers below still override it. */
.vehicle-avatar {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  flex: 0 0 auto;
  height: 28px;
  object-fit: cover;
  /* O14: clip the color-fallback SVG to the rounded box so its corners match the frame at every
     size (the square silhouette otherwise pokes past the radius when scaled up on --lg). */
  overflow: hidden;
  width: 28px;
}

.vehicle-avatar--sm {
  flex: 0 0 auto;
  height: 28px;
  width: 28px;
}

.vehicle-avatar--md {
  flex: 0 0 auto;
  height: 44px;
  width: 44px;
}

/* O11: listing avatars — 38px is the max that fits the current ~40px row (btn-sm is the row
   driver) once the avatar cell's block padding is zeroed, so rows do NOT grow. Hover zooms the
   photo visually (transform only — no layout shift); table-responsive may clip the zoom at the
   container edges, accepted as a bonus-affordance limitation. */
.vehicle-avatar--list {
  flex: 0 0 auto;
  height: 38px;
  width: 38px;
  /* I3: motion goes through the shared tokens, never a literal duration. */
  transition: transform var(--dur-fast) var(--ease-standard);
  /* The avatar sits in the leading table cell: growing from the center pushed half the zoom past
     the container edge (visibly shifted + clipped in RTL). Pin the origin to the leading edge so
     the zoom always grows INTO the table. transform-origin has no logical keywords — hence the
     explicit RTL override below. */
  transform-origin: center left;
}

[dir="rtl"] .vehicle-avatar--list {
  transform-origin: center right;
}

/* OP-039 (owner) — in the vehicles grid the avatar sits beside the read-only plate badge; size it to
   the plate's height so the two read as one matched pair (the owner asked for size consistency between
   the car image and the plate). Scoped to the grid via the --plated modifier so customer-list avatars
   (no plate) keep the --list size. The compact plate badge inside a .table is 116×54, so 54px squares
   the avatar to the plate's height. */
.vehicle-avatar--plated {
  height: 54px;
  width: 54px;
}

.vehicle-avatar--profile {
  flex: 0 0 auto;
  height: 3.25rem;
  width: 3.25rem;
}

.avatar-cell {
  padding-block: 0 !important;
}

/* OP-039 — the vehicles-grid plate cell's link wraps only graphics (the vehicle avatar + the read-only
   plate badge), so the default link underline just draws a stray line under the plate. Scoped to the
   .avatar-cell--plate cell (Vehicles/Index) ONLY — the customers list uses an otherwise identical
   .avatar-cell link that wraps the customer's NAME text, which must keep its underline. */
.avatar-cell--plate a {
  text-decoration: none;
}

@media (hover: hover) {
  a:hover > .vehicle-avatar--list,
  .avatar-cell a:focus-visible .vehicle-avatar--list {
    position: relative;
    transform: scale(2.1);
    z-index: 5;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  }

  /* OP-039 — the plated grid avatar already starts at 54px (the plate's height), so the 2.1× above
     would blow it to ~113px and clip inside .table-responsive's overflow. A gentler zoom keeps the
     hover preview closer to the row band while still enlarging the photo. */
  a:hover > .vehicle-avatar--plated,
  .avatar-cell a:focus-visible .vehicle-avatar--plated {
    transform: scale(1.6);
  }
}

/* O11: decorative horizontal section divider — symmetric gradient (RTL-safe), used before the
   classic dashboard's Today-summary section. */
.section-divider {
  background: linear-gradient(to right, transparent, var(--app-border) 18%, var(--app-border) 82%, transparent);
  block-size: 1px;
  margin-block: 2rem;
}

.vehicle-avatar--lg {
  aspect-ratio: 4 / 3;
  height: auto;
  max-width: 320px;
  width: 100%;
}

.vehicle-photo-block {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.portal-vehicle-card__photo {
  border-radius: 0.75rem;
  flex: 0 0 auto;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.dashboard-filter {
  box-shadow: var(--app-shadow-sm);
  margin-bottom: 1rem;
}

.section-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-heading h2 {
  margin-bottom: 0.25rem;
}

/* Period-summary heading that hosts the inline date filter on its trailing edge. */
.section-heading--with-filter {
  flex-wrap: wrap;
}

.section-heading--with-filter .dashboard-filter--inline {
  padding-block: 0;
}

/* ============================================================================
   I8 — design-system layout components. These back the shared TagHelpers
   (page-header / section-heading / empty-state / filter-bar / breadcrumbs) and
   reuse the existing `.page-title` / `.filter-panel` / `.section-heading`
   surfaces above; only the genuinely new pieces below need fresh tokenized rules.
   ============================================================================ */

/* Page-header eyebrow/kicker — a quiet uppercase label above the page <h1>. */
.page-title__eyebrow {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 0.15rem;
  text-transform: uppercase;
}

/* Section-heading icon — sits inline-start of the title text. */
.section-heading__icon {
  margin-inline-end: 0.4rem;
}

/* Empty state — a centred, muted "no records" placeholder with an optional icon
   + actions. The `--cell` modifier sits inside a table column placeholder row. */
.app-empty-state {
  color: var(--app-muted);
  padding: 2.25rem 1rem;
  text-align: center;
}

.app-empty-state--cell {
  padding: 1.75rem 1rem;
}

.app-empty-state__icon {
  color: var(--app-muted);
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.app-empty-state__message {
  margin: 0;
}

.app-empty-state__actions {
  margin-top: 1rem;
}

/* Breadcrumbs — Bootstrap's `.breadcrumb` list re-skinned onto the theme tokens. */
.app-breadcrumbs {
  margin-bottom: 0.75rem;
}

.app-breadcrumbs .breadcrumb {
  margin-bottom: 0;
}

.app-breadcrumbs .breadcrumb-item,
.app-breadcrumbs .breadcrumb-item > a {
  color: var(--app-muted);
}

.app-breadcrumbs .breadcrumb-item > a {
  text-decoration: none;
}

.app-breadcrumbs .breadcrumb-item > a:hover {
  text-decoration: underline;
}

.app-breadcrumbs .breadcrumb-item.active {
  color: var(--app-text);
}

/* ============================================================================
   I9 — unified component contracts. `.app-card` (above, at the card cluster)
   and `.app-stat` (below) fold the duplicated bases; the legacy class names stay
   as aliases so no view markup changes during the migration. `.app-pill` is the
   new canonical status pill — one status→tone map drawn from the shared --job-*
   palette (the same tokens the job board / detail bands use). Inputs + the focus
   ring are refined alongside (see `.form-select:focus` in the focus-ring rule).
   ============================================================================ */

/* Stat container contract — shared border/radius/grid for every metric tile.
   Background, padding, gap, min-height and label/value type stay per-variant
   (.metric-card adds a gradient + hover; .report-metric / .cashbox-stat stay
   flat). `.app-stat` itself ships sensible defaults for fresh markup. */
.app-stat,
.metric-card,
.report-metric,
.cashbox-stat {
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
}

.app-stat {
  background: var(--app-surface);
  color: var(--app-text);
  gap: 0.5rem;
  min-height: 112px;
  padding: 1rem;
}

.app-stat > span,
.app-stat__label {
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.app-stat > strong,
.app-stat__value {
  color: var(--app-text);
  font-size: 1.75rem;
  line-height: 1.1;
}

/* Status pill contract — set a tone modifier and bg/border/text resolve from the
   shared --job-* tokens, so every status surface stays in sync with one map.
   Supersedes ad-hoc `.badge.text-bg-*` for status; existing badges still work. */
.app-pill {
  --app-pill-bg: var(--app-surface-soft);
  --app-pill-border: var(--app-border);
  --app-pill-color: var(--app-muted);
  align-items: center;
  background: var(--app-pill-bg);
  border: 1px solid var(--app-pill-border);
  border-radius: var(--radius-pill);
  color: var(--app-pill-color);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.app-pill--success {
  --app-pill-bg: var(--job-success-bg);
  --app-pill-border: var(--job-success-border);
  --app-pill-color: var(--job-success-color);
}

.app-pill--warning {
  --app-pill-bg: var(--job-warning-bg);
  --app-pill-border: var(--job-warning-border);
  --app-pill-color: var(--job-warning-color);
}

.app-pill--danger {
  --app-pill-bg: var(--job-danger-bg);
  --app-pill-border: var(--job-danger-border);
  --app-pill-color: var(--job-danger-color);
}

.app-pill--info,
.app-pill--active {
  --app-pill-bg: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 28%);
  --app-pill-border: color-mix(in srgb, var(--app-primary), var(--app-border) 45%);
  --app-pill-color: var(--app-primary);
}

.app-pill--neutral {
  --app-pill-bg: var(--app-surface-soft);
  --app-pill-border: var(--app-border);
  --app-pill-color: var(--app-muted);
}

/* Input affordance — fade the border/shadow handoff on focus (matches the .btn
   transition; the global reduced-motion reset disables it when requested). */
.form-control,
.form-select {
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

/* ============================================================================
   I10 — data-table states. A sortable column header (CSS-drawn caret keyed off
   the th's aria-sort), generalized tabular figures on numeric columns, and a
   loading skeleton. All CSP-clean (no JS) and RTL-safe (logical properties /
   vertical caret); the shimmer is disabled by the global prefers-reduced-motion
   reset. The row-count footer (installTableRowCounts) and the <empty-state> row
   (I8) are reused untouched.
   ============================================================================ */

/* Sortable header — a full-cell sort link with a vertical caret that reflects the
   header's aria-sort: faint/neutral when unsorted, accent up/down when active. */
.sortable-th {
  align-items: center;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  text-decoration: none;
}

.sortable-th:hover,
.sortable-th:focus-visible {
  color: var(--app-primary);
}

.sortable-th__caret {
  border-inline: 0.28rem solid transparent;
  display: inline-block;
  flex: none;
  height: 0;
  width: 0;
}

.sortable-th-cell[aria-sort="none"] .sortable-th__caret {
  border-block-start: 0.32rem solid currentColor;
  opacity: 0.4;
}

.sortable-th-cell[aria-sort="ascending"] .sortable-th__caret {
  border-block-end: 0.32rem solid var(--app-primary);
}

.sortable-th-cell[aria-sort="descending"] .sortable-th__caret {
  border-block-start: 0.32rem solid var(--app-primary);
}

/* Generalize tabular figures onto numeric table columns — the codebase marks
   numeric cells with `.text-end`, so digits line up across rows with no per-view CSS. */
.table .text-end {
  font-variant-numeric: tabular-nums;
}

/* Loading skeleton — a shimmer placeholder for async/slow table loads. */
.app-skeleton {
  animation: app-skeleton-shimmer 1.4s var(--ease-standard) infinite;
  background:
    linear-gradient(90deg,
      var(--app-surface-soft) 25%,
      color-mix(in srgb, var(--app-border), var(--app-surface-soft) 40%) 37%,
      var(--app-surface-soft) 63%);
  background-size: 400% 100%;
  border-radius: 0.4rem;
  display: block;
  height: 0.85rem;
  width: 100%;
}

.table-skeleton td {
  background: var(--app-surface);
}

@keyframes app-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ============================================================================
   I11 — job-card lifecycle stepper + accessible tabs. The stepper (<job-stepper>)
   is a CSS-drawn ordered list keyed off each step's state class (is-done /
   is-current / is-upcoming, or is-halted under --cancelled); the tabs (<tab-set>)
   theme Bootstrap's nav-tabs onto the app tokens while Bootstrap's own JS drives
   the keyboard interaction. RTL-safe via logical properties; no JS, CSP-clean.
   ============================================================================ */

/* Lifecycle stepper — a horizontal rail of numbered markers that reflects the
   current status's position on the happy path (both forward and backward). */
.job-stepper {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.job-stepper__step {
  align-items: center;
  display: flex;
  flex: 1 1 5rem;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 4.5rem;
  position: relative;
  text-align: center;
}

/* The rail behind the markers, split before/after each marker so a step can tint
   its own half (the connector entering a done/current step turns accent). */
.job-stepper__step::before,
.job-stepper__step::after {
  block-size: 0;
  border-block-start: 2px solid var(--app-border);
  content: "";
  inset-block-start: 0.8rem;
  inline-size: 50%;
  position: absolute;
  z-index: 0;
}

.job-stepper__step::before { inset-inline-start: 0; }
.job-stepper__step::after { inset-inline-end: 0; }
.job-stepper__step:first-child::before,
.job-stepper__step:last-child::after { content: none; }

.job-stepper__marker {
  align-items: center;
  background: var(--app-surface);
  border: 2px solid var(--app-border);
  border-radius: 50%;
  block-size: 1.7rem;
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 600;
  inline-size: 1.7rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.job-stepper__label {
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

/* Done — accent fill + accent rail */
.job-stepper__step.is-done .job-stepper__marker {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
}

.job-stepper__step.is-done::before,
.job-stepper__step.is-done::after,
.job-stepper__step.is-current::before {
  border-block-start-color: var(--app-primary);
}

.job-stepper__step.is-done .job-stepper__label {
  color: var(--app-text);
}

/* Current — ringed accent outline + aria-current="step" */
.job-stepper__step.is-current .job-stepper__marker {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--app-primary) 28%, transparent);
  color: var(--app-primary);
}

.job-stepper__step.is-current .job-stepper__label {
  color: var(--app-text);
  font-weight: 600;
}

/* Cancelled — the job left the happy path; the whole rail goes dashed + muted */
.job-stepper--cancelled .job-stepper__step::before,
.job-stepper--cancelled .job-stepper__step::after {
  border-block-start-color: var(--app-border);
  border-block-start-style: dashed;
}

.job-stepper--cancelled .job-stepper__marker {
  border-color: var(--app-border);
  color: var(--app-muted);
}

/* Accessible tabs — theme Bootstrap's nav-tabs onto the app tokens. */
.app-tabs__list.nav-tabs {
  border-block-end: 1px solid var(--app-border);
  gap: 0.25rem;
}

.app-tabs__list .nav-link {
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--app-muted);
  font-weight: 500;
}

.app-tabs__list .nav-link:hover,
.app-tabs__list .nav-link:focus-visible {
  border-color: transparent transparent var(--app-border);
  color: var(--app-primary);
}

.app-tabs__list .nav-link.active {
  background: var(--app-surface);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
  color: var(--app-primary);
}

.app-tabs__content {
  padding-block: 1rem;
}

/* ============================================================================
   I13 — JobCards/Details adoption: a lifecycle-band wrapper for the I11 stepper,
   and the Digital Vehicle Inspection evidence gallery. The gallery is a
   responsive thumbnail grid; photos open a Bootstrap-modal lightbox (CSP-clean,
   data attributes only) while video plays inline. Tokenized + RTL-safe via
   logical properties; reduced-motion is handled by the global reset.
   ============================================================================ */

/* Let the multi-step stepper scroll horizontally on narrow screens rather than
   wrapping into an ambiguous second row. */
.job-lifecycle-band {
  overflow-x: auto;
}

.app-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  margin-block: 0 1rem;
}

.app-gallery__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.app-gallery__thumb {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  inline-size: 100%;
  padding: 0;
}

.app-gallery__media {
  aspect-ratio: 4 / 3;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.app-gallery__thumb:hover .app-gallery__media,
.app-gallery__thumb:focus-visible .app-gallery__media {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--app-primary) 25%, transparent);
}

.app-gallery__caption {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.app-gallery__title {
  color: var(--app-text);
  font-size: 0.85rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* M39: compact primary-image thumbnail on the catalog/stock lists. The fixed size is load-bearing
   (the O7 lesson: a sizeless image class renders the original full-size); RTL needs nothing —
   the cell follows the table's inline direction. */
.part-thumb {
  background: var(--app-surface-soft);
  block-size: 2.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: block;
  inline-size: 2.5rem;
  object-fit: cover;
}

/* M39: the gallery's per-image action row (set-primary / delete) under the caption. */
.app-gallery__actions {
  display: flex;
  gap: 0.35rem;
  margin-block-start: 0.15rem;
}

.app-lightbox__body {
  background: var(--app-surface-soft);
}

.app-lightbox__image {
  block-size: auto;
  border-radius: var(--radius);
  display: block;
  inline-size: 100%;
  margin-inline: auto;
}

/* ============================================================================
   Track N (N1) — Digital Vehicle Inspection live camera capture. A progressive
   panel revealed by dvi-camera.js (no-JS keeps the file input), plus the per-
   checklist-item capture button and inline evidence thumbnails. Token-based +
   logical properties so it tracks theme/dark-mode and mirrors under RTL.
   ============================================================================ */
.dvi-camera {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-block-end: 1rem;
  padding: 0.85rem;
}

.dvi-camera__stage {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--radius);
  display: flex;
  inline-size: 100%;
  justify-content: center;
  margin-inline: auto;
  max-inline-size: 32rem;
  min-block-size: 12rem;
  overflow: hidden;
}

.dvi-camera__video,
.dvi-camera__preview {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.dvi-camera__hint {
  color: var(--app-muted);
  font-size: 0.85rem;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

.dvi-camera__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-block-start: 0.75rem;
}

.dvi-item-evidence {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dvi-item-thumb {
  block-size: 2.25rem;
  border: 1px solid var(--app-border);
  border-radius: calc(var(--radius) * 0.6);
  display: block;
  inline-size: 2.25rem;
  object-fit: cover;
}

.dvi-item-thumb--more {
  align-items: center;
  background: var(--app-surface-soft);
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.75rem;
  justify-content: center;
  text-decoration: none;
}

/* ============================================================================
   I14 — customer portal redesign (the external face). Mobile-first surfaces for
   the customer-facing dashboard, the vehicle status timeline (reusing the I11
   <job-stepper>), and a designed invoice document card with a tabular-nums
   totals ledger. Every colour is a token (theme- + dark-aware) and every
   directional value is a logical property (RTL-safe). The ledger lays itself out
   with Bootstrap utilities so it still reads as a ledger on the print page, where
   site.css is absent — these rules only add the tabular figures + tone polish.
   ============================================================================ */

/* Dashboard — one card per vehicle: a token-tinted medallion, the name, a status
   pill, and a CTA pinned to the foot. Composes on the canonical .app-card. */
.portal-vehicle-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.portal-vehicle-card__head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.portal-vehicle-card__icon {
  align-items: center;
  background: var(--app-primary-soft);
  border-radius: var(--radius);
  block-size: 2.75rem;
  color: var(--app-primary);
  display: inline-flex;
  flex: none;
  font-size: 1.25rem;
  inline-size: 2.75rem;
  justify-content: center;
}

.portal-vehicle-card__meta {
  color: var(--app-muted);
  font-size: 0.85rem;
}

/* In-portal inbox (J3) — one card per notification. The token-tinted medallion
   matches the vehicle card; an unread row gets a logical inline-start accent (so
   it mirrors under RTL) and a slightly stronger surface so it reads as "new". */
.portal-notification__icon {
  align-items: center;
  background: var(--app-primary-soft);
  border-radius: var(--radius);
  block-size: 2.5rem;
  color: var(--app-primary);
  display: inline-flex;
  flex: none;
  font-size: 1.1rem;
  inline-size: 2.5rem;
  justify-content: center;
}

.portal-notification--unread {
  border-inline-start: 3px solid var(--app-primary);
}

/* Vehicle timeline — each job card carries the I11 lifecycle stepper (in the
   shared .job-lifecycle-band scroll wrapper) plus the public status history. */
.portal-job {
  display: grid;
  gap: 1rem;
}

.portal-job__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}

/* N2: a published inspection report rendered as a clickable card on the vehicle page.
   Inherits the surface from .app-card; this keeps the text the body colour (not link blue)
   and lifts the card slightly on hover/focus for affordance. */
.portal-inspection-card {
  color: inherit;
  display: block;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.portal-inspection-card:hover,
.portal-inspection-card:focus-visible {
  border-color: var(--app-accent);
  box-shadow: var(--app-shadow-sm);
}

/* Public status history — a CSS-drawn vertical timeline. The spine is a logical
   inline-start border so it mirrors under RTL; each entry hangs a dot off it. */
.portal-history {
  border-inline-start: 2px solid var(--app-border);
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding-inline-start: 1rem;
}

.portal-history__item {
  position: relative;
}

.portal-history__item::before {
  background: var(--app-surface);
  border: 2px solid var(--app-primary);
  border-radius: 50%;
  block-size: 0.7rem;
  content: "";
  inline-size: 0.7rem;
  inset-block-start: 0.2rem;
  inset-inline-start: calc(-1rem - 1px - 0.35rem);
  position: absolute;
}

.portal-history__status {
  font-weight: 600;
}

.portal-history__time {
  color: var(--app-muted);
  font-size: 0.82rem;
}

/* Invoice document card — a letterhead-style header band over .app-card, a
   responsive key/value meta grid, then the lines table + the totals ledger. */
.invoice-doc__header {
  align-items: flex-start;
  border-block-end: 1px solid var(--app-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  margin-block-end: 1rem;
  padding-block-end: 1rem;
}

.invoice-doc__meta {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: 1fr;
  margin-block-end: 1.25rem;
}

@media (min-width: 576px) {
  .invoice-doc__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.invoice-doc__meta dt {
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.invoice-doc__meta dd {
  margin: 0;
}

/* Totals ledger — tabular figures so the amounts line up, with the amount-due
   row toned by the brand primary. Layout (right-aligned, flex rows, the total
   divider) comes from Bootstrap utilities in the markup, so the print page keeps
   a clean ledger without this stylesheet. */
.invoice-ledger__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-ledger__row--due {
  color: var(--app-primary);
}

.dashboard-situation {
  margin-bottom: 1rem;
}

.branch-breakdown {
  margin-top: 1rem;
}

.branch-breakdown h3 {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 750;
  margin-bottom: 0.65rem;
}

.dashboard-branch-table {
  margin-bottom: 0;
}

.dashboard-branch-table td,
.dashboard-branch-table th {
  white-space: nowrap;
}

.metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid--period {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-primary), white 91%), transparent 55%),
    var(--app-surface);
  box-shadow: var(--app-shadow-sm);
  gap: 0.45rem;
  min-height: 128px;
  padding: 1rem;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.metric-card[href] {
  cursor: pointer;
}

.metric-card:hover,
.metric-card:focus {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-md);
  color: var(--app-text);
  transform: translateY(-1px);
}

.metric-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-primary), transparent 62%);
  outline-offset: 3px;
}

.metric-card span {
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.metric-card strong {
  color: var(--app-text);
  font-size: 1.75rem;
  line-height: 1.1;
}

.metric-card small {
  color: var(--app-muted);
}

.metric-card--workshop {
  border-color: color-mix(in srgb, #0ea5e9, var(--app-border) 45%);
}

.metric-card--cash {
  border-color: color-mix(in srgb, #16a34a, var(--app-border) 45%);
}

.metric-card--finance {
  border-color: color-mix(in srgb, #f59e0b, var(--app-border) 45%);
}

.metric-card--inventory {
  border-color: color-mix(in srgb, #14b8a6, var(--app-border) 45%);
}

.dashboard-table-link {
  color: var(--app-text);
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-table-link:hover,
.dashboard-table-link:focus {
  color: var(--app-primary);
  text-decoration: underline;
}

.report-metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-metric {
  background: var(--app-surface);
  color: var(--app-text);
  gap: 0.5rem;
  min-height: 112px;
  padding: 1rem;
}

.report-metric span {
  color: var(--app-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.report-metric strong {
  color: var(--app-text);
  font-size: 1.45rem;
  line-height: 1.15;
}

/* AL1: the sample behind a rate, set below the figure. Quieter than the label so it reads as a
   qualifier on the percentage rather than as another metric competing with it. */
.report-metric-note {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.report-metric--profit {
  border-color: var(--app-primary);
}

.table {
  background: var(--app-surface);
}

.table thead th {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.current-user-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 320px;
}

.current-user-summary strong {
  overflow-wrap: anywhere;
}

.technical-value {
  direction: ltr;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap: anywhere;
  text-align: left;
  unicode-bidi: isolate;
}

.mfa-countdown {
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  min-width: 7.25rem;
  text-align: center;
  unicode-bidi: isolate;
}

.mfa-setup {
  max-width: 960px;
  padding-bottom: 2rem;
}

.mfa-setup__intro {
  margin-bottom: 1rem;
}

.mfa-setup-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1.1fr);
}

.mfa-setup-card {
  align-content: start;
  display: grid;
  gap: 0.85rem;
}

.mfa-setup-card h2 {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 750;
  margin: 0;
}

.mfa-qr-code {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  min-height: 280px;
  padding: 1rem;
}

.mfa-qr-code img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  max-width: 260px;
  width: 100%;
}

.mfa-key-box {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
}

.mfa-key-box span {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.mfa-key-box code {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 750;
}

.mfa-technical-details {
  border-top: 1px solid var(--app-border);
  padding-top: 0.85rem;
}

.mfa-technical-details summary {
  color: var(--app-primary);
  cursor: pointer;
  font-weight: 700;
}

.mfa-technical-details code {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: block;
  margin-top: 0.65rem;
  max-height: 160px;
  overflow: auto;
  padding: 0.75rem;
}

.mfa-verification-panel {
  margin-top: 1rem;
}

body[data-theme="dark-mode"] .mfa-qr-code {
  background: #ffffff;
  border-color: #d9e2ec;
}

.branding-preview,
.branding-large-preview {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
}

.branding-preview img {
  max-height: 44px;
  max-width: 120px;
  object-fit: contain;
}

.branding-preview--mark img {
  block-size: 44px;
  inline-size: 44px;
}

.branding-large-preview {
  justify-content: center;
  min-height: 180px;
}

.branding-large-preview img {
  max-height: 96px;
  max-width: 180px;
  object-fit: contain;
}

.permission-matrix-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.permission-matrix-summary span {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-muted);
  padding: 0.45rem 0.65rem;
}

.permission-matrix-wrap {
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  max-height: 70vh;
  overflow: auto;
}

/* Track AB — Feature Management report toggles: responsive multi-column grid of switches. */
.feature-report-grid {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.feature-report-grid .feature-report-toggle {
  margin-bottom: 0;
}

/* AD9 — Feature Management panel: scope cue, filter bar, grouped sections and the following save bar.
   Logical properties throughout so the layout mirrors correctly in RTL, and every colour comes from an
   app token so light and dark both work without a second rule. */
/* The filter hides rows with the `hidden` attribute. Table rows carry a UA `display: table-row`, and a
   framework rule can outrank the UA `[hidden]` rule — pin it so a "hidden" row is genuinely gone. */
[data-feature-row][hidden],
[data-feature-children-of][hidden],
[data-feature-group][hidden] {
  display: none !important;
}

.feature-panel__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.feature-panel__scope-current {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-inline-size: min(100%, 22rem);
  flex: 1 1 22rem;
}

.feature-panel__scope-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-panel__scope-form .form-select {
  inline-size: auto;
  min-inline-size: 12rem;
}

.feature-panel__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
}

.feature-panel__filter-field {
  flex: 1 1 16rem;
  min-inline-size: min(100%, 16rem);
}

.feature-panel__filter-empty {
  flex-basis: 100%;
}

.feature-panel__group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-panel__tri-state {
  inline-size: auto;
  min-inline-size: 8rem;
}

.feature-panel__child-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

/* The save bar follows the page rather than living at the end of a very long form. `position: sticky`
   keeps it in normal flow, so it never covers the last row the way a fixed bar would. */
.feature-panel__save-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Content hugs the inline-START on purpose. The FlowGuide launcher is `position: fixed` at the
     inline-END of the viewport, so anything aligned to the end of this bar sits underneath it — in
     both writing directions, at every width. Starting from the other edge needs no magic number and
     stays correct whether or not the launcher renders. */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0.75rem;
  padding-inline-start: 1rem;
  /* Keeps a long pending label from growing into the launcher's corner. */
  padding-inline-end: 11rem;
  border-block-start: 1px solid var(--app-border, rgba(128, 128, 128, 0.3));
  background-color: var(--app-surface, var(--bs-body-bg));
}

.feature-panel__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--bs-warning-text-emphasis, var(--bs-body-color));
}

@media (max-width: 575.98px) {
  /* Touch targets on the panel's own controls. The Bootstrap switch itself keeps its size; the row
     around it is what the finger actually lands on. */
  .feature-panel__save-bar .btn,
  .feature-panel__scope-form .btn,
  .feature-panel__scope-form .form-select,
  .feature-panel__filters .btn,
  .feature-panel__filters .form-control,
  .feature-panel__tri-state {
    min-block-size: 44px;
  }

  /* Same reasoning as above — the button must not stretch to the end edge, where the launcher lives. */
  .feature-panel__save-bar {
    padding-inline-end: 5.5rem;
  }
}

.permission-matrix-table {
  margin-bottom: 0;
  min-width: 980px;
}

.permission-matrix-table th,
.permission-matrix-table td {
  text-align: center;
  white-space: nowrap;
}

.permission-matrix-table .permission-matrix-role-header {
  max-width: 140px;
  min-width: 112px;
  padding-inline: 0.5rem;
  vertical-align: middle;
  white-space: normal;
}

.permission-matrix-role-label {
  display: block;
  font-size: 0.74rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.permission-matrix-table .permission-matrix-role-header .app-pill {
  display: inline-flex;
  margin-top: 0.35rem;
  max-width: 100%;
  white-space: normal;
}

.permission-matrix-table thead th {
  background: var(--app-surface);
  position: sticky;
  top: 0;
  z-index: 3;
}

.permission-matrix-table th:first-child,
.permission-matrix-table td:first-child {
  background: var(--app-surface);
  left: 0;
  min-width: 260px;
  position: sticky;
  text-align: left;
  z-index: 2;
}

.permission-matrix-table thead th:first-child {
  z-index: 4;
}

.permission-area-row {
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-align: left !important;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .permission-matrix-table {
    min-width: 1120px;
  }

  .permission-matrix-table .permission-matrix-role-header {
    max-width: 112px;
    min-width: 96px;
  }

  .permission-matrix-table th:first-child,
  .permission-matrix-table td:first-child {
    min-width: 220px;
  }
}

.permission-state {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.permission-state--allowed {
  /* I21: token-driven so the allowed state tracks the theme (incl. dark mode)
     instead of a hardcoded pale-green island. */
  background: var(--job-success-bg);
  color: var(--job-success-color);
}

.permission-state--denied {
  background: var(--app-surface-soft);
  color: var(--app-muted);
}

.permission-chip-grid {
  display: grid;
  gap: 0.65rem;
}

.permission-chip {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
}

.audit-history-accordion .accordion-button {
  gap: 0.75rem;
}

.stock-context-summary {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.85rem;
}

.stock-context-summary div {
  min-width: 0;
}

.stock-context-summary dt {
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.stock-context-summary dd {
  font-weight: 650;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.audit-log-table {
  min-width: 1120px;
  table-layout: fixed;
}

.audit-log-table th,
.audit-log-table td {
  vertical-align: top;
}

.audit-log-table__timestamp {
  width: 105px;
}

.audit-log-table__actor {
  width: 170px;
}

.audit-log-table__action {
  width: 235px;
}

.audit-log-table__branch {
  width: 170px;
}

.audit-log-table__changes {
  width: 300px;
}

.audit-log-table__notes {
  width: 190px;
}

.audit-log-table__actions {
  width: 80px;
}

.audit-entry-main {
  display: block;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.audit-entry-meta {
  color: var(--app-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.audit-change-preview {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.audit-change-preview li {
  border-left: 3px solid var(--app-border);
  padding-left: 0.45rem;
}

.audit-change-table {
  min-width: 760px;
}

.audit-change-table th,
.audit-change-table td,
.audit-value-table th,
.audit-value-table td {
  vertical-align: top;
}

.audit-change-table thead th,
.audit-value-table th {
  color: var(--app-muted);
}

.audit-change-table th:first-child {
  width: 260px;
}

.audit-value-table th {
  width: 220px;
}

.audit-readable-value {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.audit-json-block {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: block;
  font-size: 0.9rem;
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-details-table th {
  color: var(--app-muted);
  width: 180px;
}

.auth-page {
  align-items: center;
  display: grid;
  min-height: calc(100vh - 180px);
  padding: 2rem 0 3rem;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1fr);
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

.auth-hero {
  background:
    linear-gradient(135deg, var(--app-hero-bg), color-mix(in srgb, var(--app-hero-bg), var(--app-primary) 22%));
  border: 1px solid color-mix(in srgb, var(--app-hero-bg), white 10%);
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--app-hero-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding: 2rem;
}

/* The sign-in identity block (owner decision 2026-07-26): the product mark leads and the client's name
   sits under it. One tight group — logo and name belong together — then generous separation before the
   supporting line, so the eye reads "whose product / whose workshop / what this is" in that order. */
.auth-identity {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
}

/* No plate behind it. The translucent panel the previous mark sat on existed because a client can upload
   any logo and it needed a surface to survive the mesh; the product mark is our own asset, drawn for this
   background, and framing it would be decoration. */
.auth-identity__logo {
  display: block;
}

/* The wordmark stands in at the same scale when no product asset has been uploaded, so the hero is never
   headless during setup. */
.auth-identity__wordmark {
  display: block;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Still the page's h1. It is demoted by SIZE only — not by colour — because the hero's muted token is
   already spent on the supporting line below, and taking contrast away at this size as well would push
   the client's own name under the readable floor on the mesh.
   1.25rem is a floor, not a preference: the supporting line under it is 1.1rem, and at the 1.0625rem this
   started at the client's own name measured SMALLER than a generic caption. Secondary to the product mark
   is the brief; outranked by "Secure workspace" is a bug. */
.auth-identity__client {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin: 0;
}

.auth-kicker {
  color: var(--app-hero-muted);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.auth-subtitle {
  color: var(--app-hero-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.auth-flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.auth-flow-list span {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #f8fafc;
  font-weight: 650;
  padding: 0.65rem 0.8rem;
}

.auth-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding: 2.25rem;
}

.auth-card__header {
  margin-bottom: 1.5rem;
}

.auth-card__header span {
  color: var(--app-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-card__header h2 {
  font-size: 2rem;
  font-weight: 760;
  letter-spacing: 0;
  margin: 0.35rem 0 0;
}

.auth-form {
  display: grid;
  gap: 1rem;
}

.auth-form .form-label {
  color: var(--app-text);
  font-weight: 650;
}

.auth-form .form-control {
  border-color: var(--app-border);
}

.auth-form__row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 32px;
}

/* ── AA11 — the minimal auth shell (wordmark + language toggle + theme toggle, nothing else) ── */
.auth-shell-body {
  display: flex;
  flex-direction: column;
  /* The global body margin-bottom (footer allowance) has no footer to serve here and was the exact
     60px that put a scrollbar on a 720p viewport. */
  margin-bottom: 0;
  min-height: 100vh;
}

.auth-shell-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
}

.auth-shell-header__brand {
  align-items: center;
  display: flex;
  min-height: 2rem;
}

.auth-shell-header__logo {
  display: block;
  height: 1.9rem;
  max-width: min(9rem, 40vw);
  object-fit: contain;
  width: auto;
}

.auth-shell-header__wordmark {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.auth-shell-header__tools {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

/* The page centers inside the flexed main; the old 100vh-minus-header arithmetic (and the scrollbar
   it produced at 1280×720) goes away with it. */
.auth-shell-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
}

.auth-shell-body .auth-page {
  min-height: 0;
  padding: 0 0 1.25rem;
}

/* The whole component is LTR regardless of UI culture: the input itself is dir=ltr (passwords are
   Latin-keyboard input), so the eye sits at the input's visual end — the right — in both cultures. */
.password-reveal {
  direction: ltr;
  position: relative;
}

.password-reveal .form-control {
  padding-inline-end: 3rem;
}

.password-reveal__toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--app-muted);
  display: flex;
  height: calc(100% - 8px);
  inset-block-start: 4px;
  inset-inline-end: 4px;
  justify-content: center;
  position: absolute;
  width: 2.5rem;
}

.password-reveal__toggle:hover,
.password-reveal__toggle:focus-visible {
  color: var(--app-text);
}

.password-reveal__icon {
  align-items: center;
  display: flex;
}

.password-reveal__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.password-reveal__icon--hide,
.password-reveal__toggle[aria-pressed="true"] .password-reveal__icon--show {
  display: none;
}

.password-reveal__toggle[aria-pressed="true"] .password-reveal__icon--hide {
  display: flex;
}

/* A 20px touch target (finding: the 16px default checkbox undershoots comfortable tap size). */
.auth-form .form-check {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  min-height: auto;
  padding: 0;
}

.auth-form .form-check-input {
  flex-shrink: 0;
  height: 1.25rem;
  margin: 0;
  width: 1.25rem;
}

.auth-form__forgot {
  font-weight: 650;
  text-decoration: none;
}

.auth-form__forgot:hover,
.auth-form__forgot:focus-visible {
  text-decoration: underline;
}

.auth-form__back {
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.auth-form__back:hover,
.auth-form__back:focus-visible {
  text-decoration: underline;
}

.auth-form__hint {
  color: var(--app-muted);
  margin: 0 0 0.25rem;
}

/* Finding: bootstrap's #dc3545 on the dark surface measured ≈4.2:1 — under the 4.5:1 floor for the
   validation text size. Lifted only on auth surfaces, where the dark card is the exact background. */
body[data-theme="dark-mode"] .auth-page .text-danger {
  color: #f1808e !important;
}

@media (max-width: 992px) {
  .module-grid,
  .dashboard-grid,
  .cashbox-review__metrics,
  .cashbox-stat-strip,
  .details-grid,
  .job-cockpit-layout,
  .metric-grid,
  .metric-grid--period,
  .report-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-cockpit-layout {
    grid-template-columns: 1fr;
  }

  .job-cockpit-rail {
    position: static;
  }
}

@media (max-width: 768px) {
  .flow-strip,
  .module-grid,
  .dashboard-grid,
  .cashbox-review__metrics,
  .cashbox-stat-strip,
  .details-grid,
  .detail-summary-band,
  .detail-summary-grid,
  .detail-section-grid,
  .detail-action-grid,
  .job-action-row,
  .job-collaboration-grid,
  .job-hero__facts,
  .job-inspection-grid,
  .job-notes-grid,
  .job-next-strip,
  .job-table-stack,
  .mfa-setup-grid,
  .metric-grid,
  .metric-grid--period,
  .report-metric-grid,
  .stock-context-summary {
    grid-template-columns: 1fr;
  }

  .page-title,
  .cashbox-review__main,
  .section-title,
  .job-cockpit-title__actions,
  .job-subsection-title,
  .inline-form {
    align-items: stretch;
    flex-direction: column;
  }

  .job-next-item {
    border-inline-start: 0;
    border-top: 1px solid var(--app-border);
  }

  .job-next-item:first-child {
    border-top: 0;
  }

  .form-actions {
    flex-direction: column;
  }

  .summary-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .section-heading {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .auth-hero {
    border-radius: var(--radius) var(--radius) 0 0;
    min-height: auto;
    padding: 1.5rem;
  }

  .auth-card {
    border-left: 1px solid var(--app-border);
    border-radius: 0 0 var(--radius) var(--radius);
    min-height: auto;
    padding: 1.5rem;
  }
}

/* ==========================================================================
   I15 — first-impression polish for the auth surfaces. An animated gradient
   "mesh" drifts behind the login hero, and the brand mark (the hero mark/logo +
   the shared _AuthBrandMark lockup on the secondary auth views) gets a one-shot
   entrance micro-animation. Every motion here is switched off by the global
   prefers-reduced-motion reset, leaving a clean static gradient + mark.
   ========================================================================== */

/* The hero becomes a positioning + clipping context so the mesh layer can sit
   behind its content. */
.auth-hero {
  overflow: hidden;
  position: relative;
}

/* Layered radial gradients = a soft colour mesh, mixed from the theme tokens so
   it recolours with every theme. It slowly drifts + breathes; the global
   reduced-motion reset freezes it on its first frame (still a clean gradient). */
.auth-hero::before {
  animation: auth-mesh-drift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(40% 55% at 18% 22%, color-mix(in srgb, var(--app-primary) 55%, transparent), transparent 70%),
    radial-gradient(45% 60% at 82% 28%, color-mix(in srgb, var(--app-accent) 50%, transparent), transparent 72%),
    radial-gradient(50% 60% at 70% 85%, color-mix(in srgb, var(--app-primary) 40%, transparent), transparent 75%),
    radial-gradient(40% 50% at 25% 80%, color-mix(in srgb, var(--app-accent) 35%, transparent), transparent 75%);
  content: "";
  inset: -25%;
  opacity: 0.55;
  position: absolute;
  z-index: 0;
}

/* Hero content rides above the mesh. */
.auth-hero > * {
  position: relative;
  z-index: 1;
}

@keyframes auth-mesh-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.05); }
}

/* Brand-mark micro-animation: a one-shot fade + lift on load, shared by the
   hero identity block and the compact .auth-brand mark on the secondary views.
   The block animates as one unit rather than the logo and the name separately —
   they are one identity, and two staggered entrances would say otherwise. */
.auth-identity,
.auth-brand__mark,
.auth-brand__logo {
  animation: auth-mark-in 0.6s ease both;
}

@keyframes auth-mark-in {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Compact brand lockup that prefixes the secondary auth views (verify / MFA /
   recovery / access-denied / profile) so every auth screen carries the mark —
   not just the login hero. Mirrors the hero mark at a smaller size. */
.auth-brand {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.auth-brand__mark {
  align-items: center;
  /* The compact mark sits on the normal page surface (not the dark hero), so it uses the
     guaranteed-contrast primary/on-primary pair — legible across every theme. */
  background: var(--app-primary);
  border-radius: var(--radius);
  color: var(--app-on-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.auth-brand__logo {
  border-radius: var(--radius);
  flex: 0 0 auto;
  max-height: 44px;
  max-width: 132px;
  object-fit: contain;
}

.auth-brand__name {
  font-weight: 700;
  line-height: 1.15;
}

.auth-brand__tag {
  color: var(--app-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Visual cue while a submit is in flight (set by the submit-busy handler in site.js). Keeps the
   button in place — no layout shift — while signalling that the request is working. */
[aria-busy="true"] {
  cursor: progress;
  opacity: 0.65;
}

/* ==========================================================================
   I12 — dashboard command center: the needs-attention lane, the KPI hero with
   count-up + sparklines, the hand-authored inline-SVG sparkline (no charting
   library, CSP-clean), the payments-vs-refunds figure, and the branch-comparison
   bar chart. Every colour is a theme token, so the whole surface recolours with
   the active theme + dark mode; the count-up + hover transitions are disabled by
   the global reduced-motion reset below.
   ========================================================================== */

/* Needs-attention lane — the live operational signals, toned by urgency. */
.attention-lane {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-block-end: 1.25rem;
}

.attention-card {
  --attention-accent: var(--app-primary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-inline-start: 4px solid var(--attention-accent);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.attention-card:hover,
.attention-card:focus-visible {
  box-shadow: var(--app-shadow-md);
  color: var(--app-text);
  transform: translateY(-2px);
}

.attention-card__label {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.attention-card__value {
  color: var(--attention-accent);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.1;
}

.attention-card small {
  color: var(--app-muted);
}

.attention-card--warning {
  --attention-accent: var(--job-warning-accent);
}

.attention-card--danger {
  --attention-accent: var(--job-danger-accent);
}

.attention-card--info {
  --attention-accent: var(--job-active-accent);
}

.attention-card--neutral {
  --attention-accent: var(--job-neutral-accent);
}

/* KPI hero — period headline numbers with a count-up value and a sparkline. */
.kpi-hero {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-block: 1rem 1.5rem;
}

/* Composes on the canonical `.app-card` surface (I9) — only the KPI-specific layout + lift live here. */
.kpi-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.kpi-card:hover,
.kpi-card:focus-visible {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-md);
  color: var(--app-text);
  transform: translateY(-2px);
}

.kpi-card__label {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.kpi-card__value {
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.1;
}

.kpi-card__spark {
  block-size: 2.5rem;
  margin-block: 0.15rem;
}

.kpi-card small {
  color: var(--app-muted);
}

/* Sparkline — a hand-authored inline-SVG trend chart, coloured by tone token. The
   non-scaling stroke keeps the line crisp under the stretched (preserveAspectRatio
   "none") viewBox. --spark-color cascades from the tone class to the SVG children. */
.app-sparkline {
  block-size: 2.5rem;
  display: block;
  inline-size: 100%;
  overflow: visible;
}

.app-sparkline__line {
  stroke: var(--spark-color, var(--app-primary));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.app-sparkline__fill {
  fill: var(--spark-color, var(--app-primary));
  opacity: 0.14;
  stroke: none;
}

.app-sparkline__dot {
  fill: var(--spark-color, var(--app-primary));
}

.app-sparkline--primary {
  --spark-color: var(--app-primary);
}

.app-sparkline--positive {
  --spark-color: var(--job-success-accent);
}

.app-sparkline--critical {
  --spark-color: var(--job-danger-accent);
}

.app-sparkline--neutral {
  --spark-color: var(--job-neutral-accent);
}

/* Payments-vs-refunds figure — two scale-shared sparklines overlaid on one plot. */
.trend-figure {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
}

.trend-figure__caption {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  margin-block-end: 0.75rem;
}

.trend-figure__title {
  font-weight: 700;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.trend-legend__item {
  align-items: center;
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.85rem;
  gap: 0.4rem;
}

.trend-legend__item::before {
  block-size: 0.7rem;
  border-radius: 50%;
  content: "";
  inline-size: 0.7rem;
}

.trend-legend__item--positive::before {
  background: var(--job-success-accent);
}

.trend-legend__item--critical::before {
  background: var(--job-danger-accent);
}

.trend-legend__item b {
  color: var(--app-text);
}

.trend-figure__plot {
  block-size: 4.5rem;
  display: grid;
}

.trend-figure__plot .trend-figure__series {
  block-size: 4.5rem;
  grid-area: 1 / 1;
}

.trend-figure__empty {
  padding-block: 1rem;
  text-align: center;
}

/* Branch comparison — CSS bars; the fill grows from the inline-start, so it mirrors
   correctly under RTL. The width % is set inline (server-computed, invariant). */
.branch-compare {
  margin-block: 1.25rem;
}

.branch-compare h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 0.75rem;
}

.app-bar-chart {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-bar-chart__row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(6rem, 12rem) 1fr auto;
}

.app-bar-chart__label {
  color: var(--app-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-bar-chart__track {
  background: var(--app-surface-soft);
  block-size: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.app-bar-chart__fill {
  background: var(--app-primary);
  block-size: 100%;
  border-radius: inherit;
  display: block;
  min-inline-size: 2px;
}

.app-bar-chart__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ==========================================================================
   AI expert-assistant consultation thread — voice-note player (Track Q9).
   The native <audio> control stays LTR (the universal media convention) but is
   sized with logical properties so it never overflows the card on mobile and
   aligns to the inline-start inside the RTL thread like the other controls.
   ========================================================================== */
.ai-voice-note {
  inline-size: 100%;
  max-inline-size: 22rem;
  block-size: 2.25rem;
}

/* ==========================================================================
   Accessibility — honour the OS "reduce motion" preference (Track I / I3).
   Near-instant (0.01ms, NOT 0) so transitionend/animationend still fire and
   Bootstrap's JS — which waits on them for collapse/modal/dropdown — never
   hangs. Zeroes our tokenized transitions plus any animation (ours, Bootstrap's,
   or component-scoped) and disables smooth scrolling.
   ========================================================================== */
/* --------------------------------------------------------------------------
   U1: Voice-input widget — pulse while actively recording.
   ========================================================================== */
.voice-input {
  vertical-align: middle;
}

.voice-input__status {
  margin-inline-start: 0.25rem;
}

@keyframes voice-input-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.voice-input--active {
  animation: voice-input-pulse 1.2s ease-in-out infinite;
}

/* --- Sticky header toggle (W1) ------------------------------------------- */
[data-sticky-header] > header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.sticky-toggle__icon--on  { display: none; }
[data-sticky-header] .sticky-toggle__icon--off { display: none; }
[data-sticky-header] .sticky-toggle__icon--on  { display: inline; }

/* --- VIN scan panel (U2) ------------------------------------------------- */
.vin-scan__video {
  max-width: 100%;
  max-height: 240px;
  background: var(--app-surface-alt, #000);
}

/* --- Plate scan panel (U3) ----------------------------------------------- */
.plate-scan__video {
  max-width: 100%;
  max-height: 240px;
  background: var(--app-surface-alt, #000);
}

/* --- Plate input — the Egyptian plate as the field (C10) ------------------ */

/* OP-039 — the Egyptian plate visual (.plate-visual__* / .plate-input / .plate-badge and the
   "Cairo Plate" @font-face) moved OUT of site.css into its own wwwroot/css/plate.css, so it can be
   linked on Layout=null / customer-facing pages. That file is the single source of truth now. */

/* ==========================================================================
   O14 — vehicle color swatches + color-aware avatar. Color is an ENHANCEMENT,
   never the only label: every swatch is aria-hidden and rides beside real text.
   ========================================================================== */
.vehicle-color-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  vertical-align: -0.1rem;
  background: linear-gradient(135deg,
      var(--vehicle-color-primary, #8a939b) 0 50%,
      var(--vehicle-color-secondary, var(--vehicle-color-primary, #8a939b)) 50% 100%);
  border: 1px solid var(--bs-border-color);
}

.vehicle-color-swatch--result {
  width: 1.1rem;
  height: 1.1rem;
  align-self: center;
  grid-column: 1;
  grid-row: 1 / span 2;
  flex: 0 0 auto;
}

.lookup-result--vehicle-color {
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
}

.lookup-result--vehicle-color .lookup-result__content {
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  /* Stack the color name over its other-language subtitle (the base grid rows don't apply once
     they're wrapped in this content box) so "أحمر" / "Red" never collapse onto one line. */
  display: flex;
  flex-direction: column;
}

.lookup-result--vehicle-color .badge {
  grid-column: 3;
}

.lookup-field--vehicle-color {
  position: relative;
}

.vehicle-color-swatch--selection {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
}

.lookup-field--has-selection-visual .lookup-input--with-visual {
  padding-inline-start: 2.25rem;
}

.vehicle-avatar--catalog-color {
  border: 1px solid var(--bs-border-color);
  background: var(--vehicle-color-primary, #8a939b);
}

.vehicle-avatar--catalog-color svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (forced-colors: active) {
  .vehicle-color-swatch {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }
}

/* ==========================================================================
   Accessibility — reduced-motion override (MUST remain last)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.job-approval-panel {
  gap: 0;
  overflow: hidden;
}

.job-approval-shell {
  min-width: 0;
}

.job-approval-shell__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  list-style: none;
}

.job-approval-shell__summary::-webkit-details-marker,
.job-approval-history-row > summary::-webkit-details-marker,
.job-approval-response-form > summary::-webkit-details-marker {
  display: none;
}

.job-approval-shell__summary::marker,
.job-approval-history-row > summary::marker,
.job-approval-response-form > summary::marker {
  content: "";
}

.job-approval-shell__summary h2 {
  font-size: var(--fs-base);
  margin: 0;
}

.job-approval-shell__status {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.job-approval-shell__chevron,
.job-approval-history-row__chevron {
  color: var(--app-muted);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.job-approval-shell[open] > .job-approval-shell__summary .job-approval-shell__chevron,
.job-approval-history-row[open] > summary .job-approval-history-row__chevron {
  transform: rotate(180deg);
}

.job-approval-shell__content {
  border-block-start: 1px solid var(--app-border);
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-4);
}

.job-approval-current,
.job-approval-legacy {
  min-width: 0;
}

.job-approval-current__header {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
}

.job-approval-state-icon,
.job-approval-history-row__state,
.job-approval-event__marker {
  align-items: center;
  background: var(--job-tone-bg, var(--app-surface-soft));
  border: 1px solid var(--job-tone-border, var(--app-border));
  color: var(--job-tone-color, var(--app-primary));
  display: inline-flex;
  justify-content: center;
}

.job-approval-state-icon {
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  inline-size: 2.5rem;
}

.job-approval-current__heading {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.job-approval-current__heading strong {
  color: var(--app-text);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.job-approval-current__heading small {
  color: var(--app-muted);
  line-height: var(--lh-base);
}

.job-approval-events {
  display: grid;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.job-approval-event {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 2rem minmax(0, 1fr);
  min-width: 0;
  padding-block-end: var(--space-4);
  position: relative;
}

.job-approval-event:last-child {
  padding-block-end: 0;
}

.job-approval-event:not(:last-child)::after {
  border-inline-start: 1px solid var(--app-border);
  content: "";
  inset-block: 2rem 0;
  inset-inline-start: calc(1rem - 0.5px);
  position: absolute;
}

.job-approval-event__marker {
  block-size: 2rem;
  border-radius: var(--radius-pill);
  inline-size: 2rem;
  position: relative;
  z-index: 1;
}

.job-approval-event--sent .job-approval-event__marker {
  background: color-mix(in srgb, var(--job-active-accent) 10%, var(--app-surface));
  border-color: color-mix(in srgb, var(--job-active-accent) 34%, var(--app-border));
  color: var(--job-active-accent);
}

.job-approval-event__content {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-block-start: 0.2rem;
}

.job-approval-event__content > strong,
.job-approval-event__content > small {
  display: block;
  overflow-wrap: anywhere;
}

.job-approval-message {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  padding: var(--space-3);
}

.job-approval-message span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.job-approval-message p {
  color: var(--app-text);
  line-height: var(--lh-base);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.job-approval-message--response {
  background: var(--job-tone-bg, var(--app-surface-soft));
  border-color: var(--job-tone-border, var(--app-border));
}

.job-approval-response-tools,
.job-approval-composer-launchers,
.job-approval-composer,
.job-approval-ai,
.job-approval-response-form__body {
  display: grid;
  gap: var(--space-2);
}

.job-approval-response-tools {
  border-block-start: 1px solid var(--app-border);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
}

.job-approval-response-tools > .btn {
  justify-self: start;
}

.job-approval-response-form {
  min-width: 0;
}

.job-approval-response-form > summary {
  color: var(--app-primary);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  list-style: none;
  width: fit-content;
}

.job-approval-response-form__body {
  margin-block-start: var(--space-3);
}

.job-approval-response-form__body .compact-form {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  margin: 0;
  padding: var(--space-3);
}

.job-approval-composer-root {
  border-block-start: 1px solid var(--app-border);
  padding-block-start: var(--space-4);
}

.job-approval-composer-launchers .btn-link {
  justify-self: center;
  text-decoration: none;
}

.job-approval-composer {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-block-start: var(--space-3);
  padding: var(--space-4);
}

.job-approval-composer[hidden] {
  display: none;
}

.job-approval-composer__heading,
.job-approval-composer__footer {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.job-approval-composer__heading h3 {
  font-size: var(--fs-sm);
  margin: 0;
}

.job-approval-composer__heading .btn-link {
  color: var(--app-muted);
  padding: var(--space-1);
}

.job-approval-ai .btn-link {
  justify-self: start;
  padding-inline: 0;
  text-decoration: none;
}

.job-approval-ai small {
  line-height: var(--lh-base);
}

.job-approval-history {
  border-block-start: 1px solid var(--app-border);
  padding-block-start: var(--space-4);
}

.job-approval-history > h3 {
  align-items: center;
  display: flex;
  font-size: var(--fs-sm);
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.job-approval-history__list {
  border-block-start: 1px solid var(--app-border);
}

.job-approval-history-row {
  border-block-end: 1px solid var(--app-border);
}

.job-approval-history-row > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  list-style: none;
  padding-block: var(--space-3);
}

.job-approval-history-row__state {
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  inline-size: 1.75rem;
}

.job-approval-history-row__copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.job-approval-history-row__copy strong,
.job-approval-history-row__copy small {
  overflow-wrap: anywhere;
}

.job-approval-history-row__copy small {
  color: var(--app-muted);
}

.job-approval-history-row__body {
  padding: 0 0 var(--space-4);
}

.job-approval-legacy {
  background: var(--job-tone-bg, var(--app-surface-soft));
  border: 1px solid var(--job-tone-border, var(--app-border));
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

@media (max-width: 575.98px) {
  .job-approval-current__header {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .job-approval-current__header > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .job-approval-composer__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .job-approval-composer__footer .btn {
    width: 100%;
  }
}

/* Owner dashboard — tabbed decision workspace scoped to the home dashboard. */
.owner-dashboard { padding-block-start: 1rem; }
.owner-dashboard__shell { display: grid; gap: 1rem; }
.owner-filter { margin-block: 0; }

.owner-hero {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  overflow: hidden;
  position: relative;
}

.owner-hero::before {
  background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
  block-size: 4px;
  content: "";
  inset-block-start: 0;
  inset-inline: 0;
  position: absolute;
}

.owner-hero__main { display: grid; gap: 0.65rem; }
.owner-hero__main h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.owner-hero__main p {
  color: var(--app-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
  max-inline-size: 68rem;
}

.owner-hero__score {
  align-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 28%), var(--app-surface));
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  justify-items: center;
  padding: 1rem;
  text-align: center;
}

.owner-hero__score span,
.owner-hero__score em {
  color: var(--app-muted);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 650;
}

.owner-hero__score strong {
  color: var(--app-primary);
  font-size: 2.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.owner-hero__score small {
  color: var(--app-muted);
  font-size: 1rem;
  font-weight: 650;
}

.owner-kpi-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.owner-kpi {
  --owner-kpi-accent: var(--app-primary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-block-start: 3px solid var(--owner-kpi-accent);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.35rem;
  min-block-size: 7.25rem;
  padding: 0.9rem;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.owner-kpi:hover,
.owner-kpi:focus-visible {
  border-color: var(--owner-kpi-accent);
  box-shadow: var(--app-shadow-md);
  color: var(--app-text);
  transform: translateY(-2px);
}

.owner-kpi span {
  align-items: center;
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.4rem;
}

.owner-kpi strong {
  color: var(--owner-kpi-accent);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.15;
}

.owner-kpi small { color: var(--app-muted); font-size: 0.78rem; }
.owner-kpi--positive { --owner-kpi-accent: var(--job-success-accent); }
.owner-kpi--danger { --owner-kpi-accent: var(--job-danger-accent); }
.owner-kpi--warning { --owner-kpi-accent: var(--job-warning-accent); }
.owner-kpi--info { --owner-kpi-accent: var(--job-active-accent); }
.owner-kpi--neutral { --owner-kpi-accent: var(--job-neutral-accent); }

.owner-tabs { padding: 0; }
.owner-tabs__list {
  background: var(--app-surface-soft);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.7rem 0.8rem 0;
}
.owner-tabs__list .nav-link {
  align-items: center;
  display: inline-flex;
  min-block-size: 2.75rem;
}
.owner-tabs__content { padding: 1rem; }

.owner-story-grid,
.owner-radar-layout,
.owner-customer-layout,
.owner-analysis-grid {
  display: grid;
  gap: 1rem;
}

.owner-story-grid { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); }
.owner-radar-layout { grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1fr); }
.owner-customer-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owner-analysis-grid { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); }

.owner-story-card,
.owner-story-side,
.owner-customer-panel,
.owner-spark-card,
.owner-radar-score,
.owner-radar-bar {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
}

.owner-story-card {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
}

.owner-story-card__header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.owner-story-card h3,
.owner-story-side h3,
.owner-section-heading h3,
.owner-customer-panel h3 {
  font-size: 1.08rem;
  font-weight: 780;
  letter-spacing: 0;
  margin: 0;
}

.owner-story-card__text {
  color: var(--app-text);
  font-size: 1.12rem;
  line-height: 1.9;
  margin: 0;
  white-space: pre-line;
}

.owner-story-side {
  display: grid;
  gap: 0.65rem;
  padding: 1.15rem;
}

.owner-story-side a {
  align-items: center;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.1rem 0.65rem;
  grid-template-columns: auto 1fr;
  padding: 0.75rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.owner-story-side a:hover,
.owner-story-side a:focus-visible {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
}

.owner-story-side strong { font-size: 0.92rem; }
.owner-story-side small { color: var(--app-muted); grid-column: 2; }
.owner-severity {
  background: var(--app-primary);
  border-radius: var(--radius-pill);
  block-size: 0.8rem;
  inline-size: 0.8rem;
}
.owner-severity--danger { background: var(--job-danger-accent); }
.owner-severity--warning { background: var(--job-warning-accent); }
.owner-severity--info { background: var(--job-active-accent); }

.owner-section-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: 1rem;
}
.owner-section-heading p { color: var(--app-muted); margin: 0.25rem 0 0; }

.owner-operation-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-status-card {
  --owner-status-accent: var(--app-primary);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.55rem;
  min-block-size: 8rem;
  padding: 0.85rem;
  text-decoration: none;
}

.owner-status-card:hover,
.owner-status-card:focus-visible {
  border-color: var(--owner-status-accent);
  color: var(--app-text);
}

.owner-status-card span {
  align-items: center;
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.35rem;
}

.owner-status-card strong {
  color: var(--owner-status-accent);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.owner-status-card i,
.owner-radar-bar i,
.owner-collection-meter i {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-pill);
  block-size: 0.55rem;
  display: block;
  overflow: hidden;
}

.owner-status-card i span,
.owner-radar-bar i span,
.owner-collection-meter i span {
  background: var(--owner-status-accent, var(--app-primary));
  block-size: 100%;
  border-radius: inherit;
  display: block;
  min-inline-size: 2px;
}

.owner-status-card--success { --owner-status-accent: var(--job-success-accent); }
.owner-status-card--warning { --owner-status-accent: var(--job-warning-accent); }
.owner-status-card--info { --owner-status-accent: var(--job-active-accent); }
.owner-status-card--active { --owner-status-accent: var(--app-primary); }
.owner-status-card--danger { --owner-status-accent: var(--job-danger-accent); }

.tts-action-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

.owner-record-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-block-start: 1rem;
}

.owner-record-card {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  min-block-size: 7rem;
  padding: 0.9rem;
  text-align: center;
  text-decoration: none;
}

.owner-record-card:hover,
.owner-record-card:focus-visible {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-text);
}
.owner-record-card .bi { color: var(--app-primary); font-size: 1.35rem; }
.owner-record-card span { color: var(--app-muted); font-size: 0.82rem; font-weight: 700; }
.owner-record-card strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 800; }

.owner-decision-list { display: grid; gap: 0.75rem; }
.owner-decision {
  --owner-decision-accent: var(--app-primary);
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-inline-start: 4px solid var(--owner-decision-accent);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) minmax(10rem, auto) minmax(10rem, auto);
  padding: 0.8rem;
  text-decoration: none;
}

.owner-decision:hover,
.owner-decision:focus-visible { border-color: var(--owner-decision-accent); color: var(--app-text); }
.owner-decision span {
  background: color-mix(in srgb, var(--owner-decision-accent), var(--app-surface) 78%);
  border: 1px solid color-mix(in srgb, var(--owner-decision-accent), var(--app-border) 42%);
  border-radius: var(--radius-pill);
  color: var(--owner-decision-accent);
  font-size: 0.78rem;
  font-weight: 750;
  justify-self: start;
  padding: 0.3rem 0.65rem;
}
.owner-decision small,
.owner-decision em { color: var(--app-muted); font-style: normal; }
.owner-decision--high { --owner-decision-accent: var(--job-danger-accent); }
.owner-decision--medium { --owner-decision-accent: var(--job-warning-accent); }
.owner-decision--low { --owner-decision-accent: var(--job-active-accent); }

.owner-empty-state {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px dashed var(--app-border);
  border-radius: var(--radius);
  color: var(--app-muted);
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 2rem;
  text-align: center;
}
.owner-empty-state .bi { color: var(--job-success-accent); font-size: 2rem; }
.owner-empty-state strong { color: var(--app-text); }

.owner-radar-score {
  align-content: center;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 1.25rem;
  text-align: center;
}

.owner-radar-score__ring {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, var(--app-surface) 57%, transparent 58%),
    conic-gradient(var(--app-primary) calc(var(--score) * 1%), var(--app-surface-soft) 0);
  border: 1px solid var(--app-border);
  border-radius: 50%;
  display: inline-flex;
  inline-size: 9rem;
  justify-content: center;
}
.owner-radar-score__ring strong { color: var(--app-primary); font-size: 2.35rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.owner-radar-score p { color: var(--app-muted); margin: 0; }
.owner-radar-bars { display: grid; gap: 0.75rem; }
.owner-radar-bar {
  --owner-status-accent: var(--app-primary);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(8rem, 1fr) auto;
  padding: 0.85rem;
}
.owner-radar-bar i { grid-column: 1 / -1; }
.owner-radar-bar span { color: var(--app-muted); font-weight: 700; }
.owner-radar-bar strong { font-variant-numeric: tabular-nums; }
.owner-radar-bar--success { --owner-status-accent: var(--job-success-accent); }
.owner-radar-bar--warning { --owner-status-accent: var(--job-warning-accent); }
.owner-radar-bar--info { --owner-status-accent: var(--job-active-accent); }
.owner-radar-bar--active { --owner-status-accent: var(--app-primary); }

.owner-customer-panel { padding: 1rem; }
.owner-mini-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: 1rem;
}
.owner-mini-stats a {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  text-decoration: none;
}
.owner-mini-stats a:hover,
.owner-mini-stats a:focus-visible { border-color: var(--app-primary); }
.owner-mini-stats span { color: var(--app-muted); font-size: 0.82rem; font-weight: 700; }
.owner-mini-stats strong { color: var(--app-primary); font-size: 1.3rem; }

.owner-collection-meter { display: grid; gap: 0.75rem; margin-block-start: 1rem; }
.owner-collection-meter > div {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}
.owner-collection-meter strong { color: var(--job-success-accent); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.owner-collection-meter i { --owner-status-accent: var(--job-success-accent); }
.owner-trend-figure { margin: 0; }
.owner-spark-grid { display: grid; gap: 0.75rem; }
.owner-spark-card { display: grid; gap: 0.4rem; padding: 0.85rem; }
.owner-spark-card span { color: var(--app-muted); font-size: 0.82rem; font-weight: 700; }
.owner-spark-card strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.owner-branch-breakdown { margin-block-start: 1rem; }
.owner-dev-link {
  align-items: center;
  color: var(--job-danger-accent);
  display: inline-flex;
  font-weight: 700;
  gap: 0.35rem;
  justify-self: start;
  padding-block: 0.75rem;
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .owner-kpi-strip,
  .owner-operation-grid,
  .owner-record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .owner-hero,
  .owner-story-grid,
  .owner-radar-layout,
  .owner-customer-layout,
  .owner-analysis-grid { grid-template-columns: 1fr; }
  .owner-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-decision { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .owner-kpi-strip,
  .owner-operation-grid,
  .owner-record-grid,
  .owner-mini-stats { grid-template-columns: 1fr; }
  .owner-story-card__header,
  .owner-section-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Modern navbar dropdown stability: bridge the visual gap between the trigger and
   menu so hover travel does not close the menu before the pointer reaches it. */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown {
    position: relative;
  }

  .navbar .nav-item.dropdown::after {
    block-size: 0.75rem;
    content: "";
    inset-block-start: 100%;
    inset-inline: 0;
    position: absolute;
  }

  .navbar .app-nav-menu {
    margin-top: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Portal notification badge pulse ───────────────────────────────────── */
@keyframes portal-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.portal-badge-pulse {
  animation: portal-pulse 0.4s ease-in-out 2;
}

/* AH2 — barcode-first scan-box. A prominent, accent-bordered entry that drives the spare-part
   lookup on the stock line-add forms. Uses logical properties so the accent edge flips under RTL. */
.scan-box {
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-border);
  border-inline-start: 4px solid var(--app-primary);
  border-radius: 0.5rem;
  /* A subtle primary tint over the standard surface — distinct enough to read as a scan area without
     adopting --app-primary-soft as a full surface (stays within the design-system surface vocabulary,
     same approach as .app-pill--info / .job-tone-bg). Theme-aware via the mixed tokens. */
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 45%);
}
.scan-box__label {
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.scan-box__input {
  font-size: 1.05rem;
}
.scan-box__hint {
  min-height: 1.25rem;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--app-muted);
}
/* Tone carried by a theme-aware token colour AND a leading glyph, so success vs error never relies on
   colour alone (WCAG 1.4.1). The glyph is decorative; the message text is what a screen reader gets.
   The doubled class keeps specificity above Bootstrap's .form-text muted colour. */
.scan-box__hint.scan-box__hint--success {
  color: var(--job-success-color);
}
.scan-box__hint.scan-box__hint--error {
  color: var(--job-danger-color);
}
.scan-box__hint--success::before {
  content: "\2713\00a0";
}
.scan-box__hint--error::before {
  content: "\26a0\00a0";
}
/* O13: the camera part-scan dialog. App surface tokens so it follows light/dark; the video keeps a
   bounded height so a portrait phone stream cannot push the controls off-screen. */
.scan-box__camera-dialog {
  background: var(--app-surface);
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.1));
  border-radius: 0.5rem;
  color: inherit;
  inline-size: min(92vw, 30rem);
  padding: 1rem;
}
.scan-box__camera-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.scan-box__camera-video {
  background: var(--app-muted-surface, rgba(0, 0, 0, 0.06));
  border-radius: 0.375rem;
  display: block;
  inline-size: 100%;
  max-block-size: 20rem;
  object-fit: contain;
}
.scan-box__camera-status {
  font-size: 0.875em;
  min-block-size: 1.25rem;
}

/* AH5: sticky bottom action bar for long forms on phones so the primary action stays reachable. */
@media (max-width: 575.98px) {
  .mobile-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-inline: -0.75rem;
    margin-top: 1rem;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border, rgba(0, 0, 0, 0.1));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }
  .mobile-action-bar > .btn {
    flex: 1 1 auto;
  }
}

/* Intelligent owner dashboard: six role-aware, full-workspace views. */
.app-page-fluid {
  --owner-content-max: 108rem;
  padding-inline: clamp(0.75rem, 2vw, 2rem);
}

.owner-intelligence {
  color: var(--app-text);
  margin-inline: auto;
  max-inline-size: var(--owner-content-max, 108rem);
  padding-block: 0.25rem 2rem;
}

.owner-intelligence__shell {
  display: grid;
  gap: 0.75rem;
}

.owner-intelligence__page-head {
  align-items: end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  min-block-size: 4.5rem;
}

.owner-intelligence__page-head h1,
.workspace-heading h2 {
  letter-spacing: 0;
}

.owner-intelligence__page-head h1 {
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0.2rem 0 0.35rem;
}

.owner-intelligence__page-head p,
.workspace-heading p {
  color: var(--app-muted);
  margin: 0;
}

.owner-intelligence__eyebrow {
  align-items: center;
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  gap: 0.45rem;
}

.owner-intelligence__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.owner-intelligence__head-actions .btn,
.workspace-heading > .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  white-space: nowrap;
}

.owner-intelligence-filter {
  align-items: end;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(14rem, 1.35fr) minmax(10rem, 0.75fr) minmax(10rem, 0.75fr) auto minmax(10rem, auto);
  padding: 0.65rem 0.75rem;
}

.owner-intelligence-filter-toggle {
  display: none;
}

.owner-intelligence-filter label {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
}

.owner-intelligence-filter label > span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.owner-intelligence-filter__date small {
  display: none;
}

.owner-intelligence-filter__actions {
  display: flex;
  gap: 0.45rem;
}

.owner-intelligence-filter__actions .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  justify-content: center;
  min-block-size: 2.55rem;
}

.owner-intelligence-filter__date small {
  color: var(--app-muted);
  display: block;
  font-size: var(--fs-xs);
  margin-block-start: 0.25rem;
  max-inline-size: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-intelligence-filter__freshness,
.workspace-heading__status {
  align-items: center;
  color: var(--app-muted);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  gap: 0.4rem;
  justify-self: end;
  white-space: nowrap;
}

.owner-intelligence-filter__freshness i,
.workspace-heading__status i {
  background: var(--job-success-accent);
  border: 3px solid color-mix(in srgb, var(--job-success-accent), transparent 75%);
  border-radius: 50%;
  block-size: 0.65rem;
  box-sizing: border-box;
  inline-size: 0.65rem;
}

.owner-workspace-tabs {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  overflow-x: auto;
  contain: inline-size;
  max-inline-size: 100%;
  min-inline-size: 0;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.owner-workspace-tabs .nav {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  inline-size: 100%;
  min-inline-size: 100%;
}

.owner-workspace-tabs .nav-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
  color: var(--app-muted);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: var(--fw-semibold);
  gap: 0.45rem;
  justify-content: center;
  min-block-size: 3rem;
  padding: 0.58rem 0.8rem;
  line-height: 1.2;
  min-inline-size: 0;
  text-align: center;
  white-space: normal;
}

.owner-workspace-tabs .nav-link:hover,
.owner-workspace-tabs .nav-link:focus-visible {
  background: var(--app-surface-soft);
  color: var(--app-text);
}

.owner-workspace-tabs .nav-link:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: -4px;
  position: relative;
  z-index: 1;
}

.owner-workspace-tabs .nav-link.active {
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 42%);
  border-block-end-color: var(--app-primary);
  color: var(--app-primary);
}

.owner-workspace-tabs .nav-link > span {
  display: -webkit-box;
  line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.owner-workspace-content {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  min-block-size: 42rem;
  overflow: hidden;
}

.owner-intelligence .table-responsive {
  contain: inline-size;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.owner-workspace-content > .tab-pane {
  min-block-size: 42rem;
  padding: clamp(0.9rem, 1.5vw, 1.25rem);
}

.workspace-heading {
  align-items: center;
  border-block-end: 1px solid var(--app-border);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-block-end: 0.85rem;
  padding-block-end: 0.7rem;
}

.workspace-heading > div {
  min-inline-size: 0;
}

.workspace-heading > div > span {
  color: var(--app-primary);
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-block-end: 0.3rem;
}

.workspace-heading h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  font-weight: var(--fw-bold);
  margin: 0 0 0.25rem;
}

.intelligence-surface {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  min-inline-size: 0;
  padding: 1rem;
}

.surface-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: 0.9rem;
}

.surface-heading > div > span {
  color: var(--app-muted);
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin-block-end: 0.18rem;
}

.surface-heading h3 {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  margin: 0;
}

.surface-heading > a {
  align-items: center;
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  gap: 0.3rem;
  text-decoration: none;
  white-space: nowrap;
}

.executive-briefing {
  align-items: stretch;
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 58%);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 68%);
  border-inline-start: 4px solid var(--app-primary);
  border-radius: var(--radius);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.35fr);
  margin-block-end: 0.9rem;
  padding: 1.15rem;
}

.executive-briefing__copy {
  align-content: center;
  display: grid;
  gap: 0.55rem;
}

.executive-briefing__label {
  align-items: center;
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  gap: 0.4rem;
}

.executive-briefing__copy p {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  margin: 0;
  max-inline-size: 78rem;
  white-space: pre-line;
}

.executive-briefing__copy small {
  color: var(--app-muted);
}

.executive-audio {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(7rem, 1fr) 5.25rem;
  padding: 0.75rem;
}

.executive-audio[hidden] {
  display: none;
}

.executive-audio__play {
  align-items: center;
  background: var(--app-primary);
  border: 0;
  border-radius: 50%;
  color: var(--app-on-primary);
  display: inline-flex;
  block-size: 2.7rem;
  inline-size: 2.7rem;
  justify-content: center;
}

.executive-audio__play:hover,
.executive-audio__play:focus-visible {
  background: var(--app-primary-hover);
}

.executive-audio__play.tts-speaking {
  background: var(--job-danger-accent);
}

.executive-audio__play > span {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.executive-audio:has(.tts-speaking) .executive-audio__track i b {
  animation: owner-audio-progress 12s linear infinite;
}

@keyframes owner-audio-progress {
  from { inline-size: 5%; }
  to { inline-size: 100%; }
}

.executive-audio__track {
  display: grid;
  gap: 0.35rem;
}

.executive-audio__track span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.executive-audio__track i,
.operations-load > i,
.payment-methods i,
.decision-score-band > div:not(.decision-score-band__main) i {
  background: var(--app-surface-soft);
  border-radius: var(--radius-pill);
  block-size: 0.4rem;
  display: block;
  overflow: hidden;
}

.executive-audio__track i b {
  background: var(--app-primary);
  block-size: 100%;
  display: block;
  inline-size: 32%;
}

.comparison-ribbon {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-block-end: 1rem;
}

.comparison-ribbon > div {
  display: grid;
  gap: 0.15rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.72rem 0.9rem;
}

.comparison-ribbon > div + div {
  border-inline-start: 1px solid var(--app-border);
}

.comparison-ribbon span,
.comparison-ribbon small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.comparison-ribbon strong {
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
}

.workspace-split,
.decision-analysis-grid,
.finance-grid {
  display: grid;
  gap: 1rem;
}

.workspace-split--brief {
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.62fr);
}

.workspace-split--operations,
.workspace-split--inventory {
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.48fr);
}

.workspace-split--customers {
  grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 0.55fr);
}

.decision-analysis-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
}

.finance-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.5fr);
  margin-block-end: 1rem;
}

.decision-list {
  display: grid;
  gap: 0.55rem;
}

.decision-row {
  --decision-accent: var(--job-active-accent);
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-inline-start: 3px solid var(--decision-accent);
  border-radius: var(--radius-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(5.5rem, auto) auto;
  min-block-size: 3.65rem;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
}

.decision-row:hover,
.decision-row:focus-visible {
  border-color: var(--decision-accent);
  color: var(--app-text);
}

.decision-row--critical {
  --decision-accent: var(--job-danger-accent);
  --decision-chip-bg: var(--job-danger-bg);
  --decision-chip-border: var(--job-danger-border);
  --decision-chip-color: var(--job-danger-color);
}

.decision-row--warning {
  --decision-accent: var(--job-warning-accent);
  --decision-chip-bg: var(--job-warning-bg);
  --decision-chip-border: var(--job-warning-border);
  --decision-chip-color: var(--job-warning-color);
}

.decision-row__severity,
.decision-row__rank {
  background: var(--decision-chip-bg, var(--app-primary-soft));
  border: 1px solid var(--decision-chip-border, var(--app-control-border));
  border-radius: var(--radius-pill);
  color: var(--decision-chip-color, var(--app-primary));
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-inline-size: 2rem;
  padding: 0.28rem 0.55rem;
  text-align: center;
}

.decision-row > span:nth-child(2) {
  display: grid;
  gap: 0.15rem;
}

.decision-row small,
.decision-row > span:nth-last-child(2) {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.live-pulse ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.live-pulse li {
  align-items: start;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto auto minmax(0, 1fr);
  padding-block: 0.55rem;
}

.live-pulse li + li {
  border-block-start: 1px solid var(--app-border);
}

.live-pulse time,
.live-pulse small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.live-pulse li > span {
  display: grid;
  gap: 0.15rem;
}

.pulse-dot {
  background: var(--app-muted);
  border-radius: 50%;
  block-size: 0.55rem;
  inline-size: 0.55rem;
  margin-block-start: 0.28rem;
}

.pulse-dot--job {
  background: var(--job-active-accent);
}

.current-state-band {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-block-start: 1rem;
  padding: 0.85rem 1rem;
}

.current-state-band > div:last-child,
.finance-performance,
.inventory-health-band,
.customer-journey {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}

.finance-performance {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.current-state-band > div:last-child > a,
.current-state-band > div:last-child > .current-state-metric,
.finance-performance > a,
.finance-performance > span,
.inventory-health-band > a,
.customer-journey > a,
.customer-journey > .customer-journey__metric {
  color: var(--app-text);
  display: grid;
  gap: 0.22rem;
  min-inline-size: 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.current-state-band > div:last-child > * + *,
.finance-performance > * + *,
.inventory-health-band > a + a,
.customer-journey > * + * {
  border-inline-start: 1px solid var(--app-border);
}

.current-state-band a:hover,
.finance-performance > a:hover,
.inventory-health-band > a:hover,
.customer-journey > a:hover {
  background: color-mix(in srgb, var(--app-primary-soft), transparent 42%);
}

.current-state-band a > icon,
.current-state-band a > .bi,
.current-state-band .current-state-metric > icon,
.current-state-band .current-state-metric > .bi,
.inventory-health-band a > icon,
.inventory-health-band a > .bi {
  color: var(--app-primary);
  font-size: 1.15rem;
}

.current-state-band a > span,
.current-state-band .current-state-metric > span,
.inventory-health-band a > span,
.finance-performance span,
.customer-journey span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.current-state-band a > span strong,
.current-state-band .current-state-metric > span strong,
.finance-performance strong,
.inventory-health-band strong,
.customer-journey strong {
  color: var(--app-text);
  display: block;
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.current-state-band small,
.finance-performance small,
.inventory-health-band small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.operations-flow-shell {
  align-items: stretch;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.22fr);
  margin-block-end: 1rem;
  padding: 0.75rem;
}

.operations-flow {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(8rem, 1fr));
  list-style: none;
  margin: 0;
  min-inline-size: 0;
  overflow-x: auto;
  padding: 0;
}

.operations-flow > li {
  min-inline-size: 0;
  padding-inline-end: 1.5rem;
  position: relative;
}

.operations-flow > li:last-child {
  padding-inline-end: 0;
}

.operations-flow > li > a,
.operations-flow-shell > .operations-flow__late {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  min-block-size: 5.6rem;
  padding: 0.6rem;
  text-align: center;
  text-decoration: none;
  block-size: 100%;
}

.operations-flow > li > a:hover,
.operations-flow > li > a:focus-visible,
.operations-flow-shell > .operations-flow__late:hover,
.operations-flow-shell > .operations-flow__late:focus-visible {
  border-color: var(--app-primary);
}

.operations-flow > li > a icon {
  color: var(--app-primary);
  font-size: 1.2rem;
}

.operations-flow > li > a span,
.operations-flow-shell > .operations-flow__late span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.operations-flow > li > a strong,
.operations-flow-shell > .operations-flow__late strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.operations-flow > li > i {
  align-items: center;
  color: var(--app-muted);
  display: flex;
  font-style: normal;
  inset-block-start: 50%;
  inset-inline-end: 0.15rem;
  position: absolute;
  transform: translateY(-50%);
}

.operations-flow-shell > .operations-flow__late {
  border-color: color-mix(in srgb, var(--job-danger-accent), var(--app-border) 45%);
}

.operations-flow-shell > .operations-flow__late icon,
.operations-flow-shell > .operations-flow__late strong {
  color: var(--job-danger-accent);
}

.intelligence-table {
  margin-block-end: 0;
  min-inline-size: 44rem;
}

.intelligence-table thead th {
  background: var(--app-surface-soft);
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.intelligence-table td {
  font-size: 0.84rem;
}

.intelligence-table td > a:not(.btn),
.intelligence-table td > span,
.intelligence-table td > strong {
  color: var(--app-text);
  display: grid;
  gap: 0.12rem;
  text-decoration: none;
}

.intelligence-table td small {
  color: var(--app-muted);
  display: block;
  font-size: var(--fs-xs);
}

.status-chip,
.age-chip {
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 62%);
  border-radius: var(--radius-pill);
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  justify-content: center;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.status-chip--waitingparts,
.status-chip--waitingcustomerapproval,
.age-chip--critical {
  background: color-mix(in srgb, var(--job-warning-accent), var(--app-surface) 87%);
  border-color: color-mix(in srgb, var(--job-warning-accent), var(--app-border) 48%);
  color: var(--job-warning-color);
}

.operations-side,
.customer-side,
.inventory-actions {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.operations-load > strong,
.inventory-actions > section:first-child > strong {
  display: block;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-block: 0.4rem;
}

.operations-load > span,
.inventory-actions p {
  color: var(--app-muted);
}

.operations-load > i {
  margin-block: 0.8rem;
}

.operations-load > i b,
.payment-methods i b,
.decision-score-band > div:not(.decision-score-band__main) i b {
  background: var(--app-primary);
  block-size: 100%;
  display: block;
}

.operations-load dl,
.customer-health dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.operations-load dl > div,
.customer-health dl > div {
  align-items: center;
  border-block-start: 1px solid var(--app-border);
  display: flex;
  justify-content: space-between;
  padding-block: 0.55rem;
}

.operations-load dt,
.customer-health dt {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.operations-load dd,
.customer-health dd {
  font-weight: var(--fw-bold);
  margin: 0;
}

.blockers,
.quick-actions {
  display: grid;
}

.blockers > a,
.quick-actions > a {
  align-items: center;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-text);
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  padding-block: 0.65rem;
  text-decoration: none;
}

.blockers > a strong {
  color: var(--job-warning-accent);
  font-variant-numeric: tabular-nums;
}

.quick-actions > a {
  justify-content: flex-start;
}

.quick-actions > a icon {
  color: var(--app-primary);
  font-size: 1.2rem;
}

.quick-actions > a span {
  display: grid;
}

.quick-actions small {
  color: var(--app-muted);
}

.customer-journey {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-block-end: 1rem;
}

.customer-journey > a {
  text-align: center;
}

.follow-up-list > a {
  align-items: center;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-text);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-block-size: 4.25rem;
  padding-block: 0.65rem;
  text-decoration: none;
}

.follow-up-list__icon {
  align-items: center;
  background: var(--app-primary-soft);
  border-radius: 50%;
  color: var(--app-primary);
  display: inline-flex;
  block-size: 2.35rem;
  inline-size: 2.35rem;
  justify-content: center;
}

.follow-up-list__icon--critical {
  background: color-mix(in srgb, var(--job-danger-accent), var(--app-surface) 88%);
  color: var(--job-danger-accent);
}

.follow-up-list > a > span:nth-child(2) {
  display: grid;
  gap: 0.12rem;
}

.follow-up-list small,
.follow-up-list em {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-style: normal;
}

.opportunity {
  border-inline-start: 3px solid var(--job-success-accent);
}

.opportunity > span {
  color: var(--job-success-color);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.opportunity h3 {
  font-size: 1.15rem;
  margin: 0.4rem 0;
}

.opportunity p {
  color: var(--app-muted);
}

.finance-performance,
.inventory-health-band {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  margin-block-end: 1rem;
}

.finance-trend__plot {
  min-block-size: 12rem;
}

.finance-trend__plot sparkline {
  display: block;
}

.finance-trend__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 0.75rem;
}

.finance-trend__legend span {
  align-items: center;
  color: var(--app-muted);
  display: inline-flex;
  font-size: var(--fs-xs);
  gap: 0.4rem;
}

.finance-trend__legend i {
  border-radius: 50%;
  block-size: 0.55rem;
  inline-size: 0.55rem;
}

.payment-methods > div:not(.surface-heading) {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: 0.45rem;
}

.payment-methods > div:not(.surface-heading) i,
.payment-methods > div:not(.surface-heading) small {
  grid-column: 1 / -1;
}

.payment-methods small {
  color: var(--app-muted);
}

.outstanding-table,
.branch-intelligence {
  margin-block-start: 1rem;
}

.inventory-health-band > a {
  grid-template-columns: auto minmax(0, 1fr);
}

.inventory-health-band > a icon {
  grid-row: 1 / 4;
  margin-block-start: 0.2rem;
}

.inventory-health-band > a strong,
.inventory-health-band > a small {
  grid-column: 2;
}

.decision-score-band {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-block-end: 1rem;
}

.decision-score-band > div {
  align-content: center;
  display: grid;
  gap: 0.35rem;
  min-block-size: 7.5rem;
  padding: 0.9rem 1rem;
}

.decision-score-band > div + div {
  border-inline-start: 1px solid var(--app-border);
}

.decision-score-band span,
.decision-score-band em {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.decision-score-band strong {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.decision-score-band__main strong {
  color: var(--app-primary);
  font-size: 2rem;
  line-height: 1;
}

.decision-score-band__main strong small {
  color: var(--app-muted);
  font-size: 0.85rem;
}

.decision-view-tabs {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: inline-grid;
  grid-auto-flow: column;
  margin-block-end: 0.8rem;
  padding: 0.22rem;
}

.decision-view-tabs .nav-link {
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--app-muted);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  gap: 0.4rem;
  justify-content: center;
  min-block-size: 2.35rem;
  padding: 0.45rem 0.8rem;
}

.decision-view-tabs .nav-link.active {
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
  color: var(--app-primary);
}

.decision-view-content > .tab-pane {
  min-block-size: 27rem;
}

.decision-view-content .decision-score-band > div {
  min-block-size: 5.6rem;
  padding-block: 0.65rem;
}

.decision-view-content .decision-analysis-grid {
  gap: 0.75rem;
}

.decision-exception-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.45fr);
}

.decision-exception-list {
  display: grid;
  gap: 0.35rem;
}

.decision-exception-list > a {
  align-items: center;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-text);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-block-size: 3.35rem;
  padding: 0.45rem 0.2rem;
  text-decoration: none;
}

.decision-exception-list > a > span:nth-child(2) {
  display: grid;
  gap: 0.12rem;
  min-inline-size: 0;
}

.decision-exception-list small,
.decision-exception-list b {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.decision-exception-list__tone {
  background: var(--job-active-accent);
  border-radius: 50%;
  block-size: 0.55rem;
  inline-size: 0.55rem;
}

.decision-exception-list__tone--critical {
  background: var(--job-danger-accent);
}

.decision-exception-list__tone--warning {
  background: var(--job-warning-accent);
}

.decision-opportunity {
  align-content: center;
  border-inline-start: 3px solid var(--job-success-accent);
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}

.decision-opportunity > span {
  color: var(--job-success-color);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.decision-opportunity > icon,
.decision-opportunity > .bi {
  color: var(--app-primary);
  font-size: 2rem;
}

.decision-opportunity h3,
.decision-opportunity p {
  margin: 0;
}

.decision-opportunity > strong {
  font-size: 2rem;
  line-height: 1;
}

.decision-opportunity p {
  color: var(--app-muted);
}

.analysis-trend__grid {
  display: grid;
  gap: 0.75rem;
}

.analysis-trend__grid > div {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-block-size: 6rem;
  padding: 0.7rem;
}

.analysis-trend__grid > div span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.analysis-trend__grid sparkline {
  grid-column: 1 / -1;
}

.personalized-widget-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.personalized-widget {
  grid-column: span var(--widget-span, 6);
  min-block-size: 12rem;
}

.personalized-widget > header {
  align-items: center;
  border-block-end: 1px solid var(--app-border);
  display: flex;
  gap: 0.7rem;
  margin-block-end: 0.8rem;
  padding-block-end: 0.7rem;
}

.personalized-widget > header > span {
  align-items: center;
  background: var(--app-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--app-primary);
  display: inline-flex;
  block-size: 2.35rem;
  inline-size: 2.35rem;
  justify-content: center;
}

.personalized-widget > header h3 {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  margin: 0;
}

.personalized-widget > header p {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  margin: 0.1rem 0 0;
}

.personalized-widget__metrics,
.personalized-widget__flow,
.personalized-widget__branch-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.personalized-widget__metrics > a,
.personalized-widget__metrics > div,
.personalized-widget__metrics > span,
.personalized-widget__flow > a,
.personalized-widget__flow > span,
.personalized-widget__branch-grid > a {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.2rem;
  min-block-size: 5.25rem;
  padding: 0.7rem;
  text-decoration: none;
}

.personalized-widget__metrics span,
.personalized-widget__flow span,
.personalized-widget__branch-grid span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.personalized-widget__metrics strong,
.personalized-widget__flow strong,
.personalized-widget__branch-grid strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.personalized-widget__list,
.personalized-widget__decisions {
  display: grid;
  gap: 0;
}

.personalized-widget__list > a,
.personalized-widget__decisions > a {
  align-items: center;
  border-block-start: 1px solid var(--app-border);
  color: var(--app-text);
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  min-block-size: 2.8rem;
  padding-block: 0.45rem;
  text-decoration: none;
}

.personalized-widget__list > a > span {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
}

.personalized-widget__list > a strong,
.personalized-widget__list > a small {
  overflow-wrap: anywhere;
}

.personalized-widget__identifier {
  direction: ltr;
  unicode-bidi: isolate;
  word-break: normal;
  overflow-wrap: normal;
}

.personalized-widget__list small,
.personalized-widget__decisions small,
.personalized-widget__list em,
.personalized-widget__decisions em {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-style: normal;
}

.personalized-widget__decisions > a {
  justify-content: flex-start;
}

.personalized-widget__decisions > a strong {
  margin-inline-start: auto;
}

.personalized-widget__decisions > a > i {
  background: var(--job-active-accent);
  border-radius: 50%;
  block-size: 0.55rem;
  inline-size: 0.55rem;
}

.personalized-widget__decisions > a > i.is-critical {
  background: var(--job-danger-accent);
}

.personalized-widget__decisions > a > i.is-warning {
  background: var(--job-warning-accent);
}

.personalized-widget__action {
  align-items: center;
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  gap: 0.35rem;
  margin-block-start: 0.75rem;
  text-decoration: none;
}

.personalized-widget__trend {
  display: grid;
  gap: 0.75rem;
  min-block-size: 8rem;
}

.personalized-widget__trend > div {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.35rem;
  min-block-size: 5rem;
  padding: 0.65rem;
}

.personalized-widget__trend span {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.owner-intelligence-empty {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px dashed var(--app-border);
  border-radius: var(--radius);
  color: var(--app-muted);
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  min-block-size: 16rem;
  padding: 2rem;
  text-align: center;
}

.owner-intelligence-empty icon {
  color: var(--app-primary);
  font-size: 2rem;
}

.owner-intelligence-empty h2,
.owner-intelligence-empty strong {
  color: var(--app-text);
}

.owner-intelligence-empty--compact {
  min-block-size: 8rem;
  padding: 1rem;
}

.intelligence-table .owner-intelligence-empty--compact {
  min-block-size: 4.5rem;
}

.trend-positive {
  color: var(--job-success-color) !important;
}

.trend-critical {
  color: var(--job-danger-color) !important;
}

.trend-neutral {
  color: var(--app-muted) !important;
}

/* SuperAdmin personalized workspace builder. */
.dashboard-personalization-admin {
  margin-inline: auto;
  max-inline-size: 84rem;
}

.dashboard-widget-picker {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-widget-picker__item {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.8rem;
}

.dashboard-widget-picker__item:has(input:checked) {
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 45%);
  border-color: var(--app-primary);
}

.dashboard-widget-picker__toggle {
  align-items: start;
  display: flex;
  gap: 0.65rem;
  margin: 0;
}

.dashboard-widget-picker__toggle > span {
  display: grid;
  gap: 0.15rem;
}

.dashboard-widget-picker__toggle small {
  color: var(--app-muted);
}

.dashboard-widget-picker__controls {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 5.5rem 7.5rem;
}

.dashboard-widget-picker__controls label {
  color: var(--app-muted);
  display: grid;
  font-size: var(--fs-xs);
  gap: 0.2rem;
}

body[data-theme="dark-mode"] .owner-workspace-content,
body[data-theme="dark-mode"] .owner-workspace-tabs,
body[data-theme="dark-mode"] .owner-intelligence-filter,
body[data-theme="dark-mode"] .intelligence-surface,
body[data-theme="dark-mode"] .executive-audio,
body[data-theme="dark-mode"] .operations-flow > a {
  background: var(--app-surface);
}

body[data-theme="dark-mode"] .executive-briefing,
body[data-theme="dark-mode"] .owner-workspace-tabs .nav-link.active,
body[data-theme="dark-mode"] .dashboard-widget-picker__item:has(input:checked) {
  background: color-mix(in srgb, var(--app-primary-soft), var(--app-surface) 76%);
}

/* AF7 — deterministic current-day owner pulse + governed refresh controls. */
.owner-live-pulse {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-inline-start: 3px solid var(--app-primary);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-sm);
  display: grid;
  gap: 0.75rem;
  margin-block: 0.75rem;
  padding: 0.85rem 1rem;
}

.owner-live-pulse__head,
.owner-live-pulse__footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.owner-live-pulse__head > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.owner-live-pulse__head > div:first-child > span {
  align-items: center;
  color: var(--app-primary);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  gap: 0.4rem;
}

.owner-live-pulse__head > div:first-child > span i {
  background: var(--job-success-accent);
  border: 3px solid color-mix(in srgb, var(--job-success-accent), transparent 74%);
  border-radius: 50%;
  block-size: 0.65rem;
  box-sizing: border-box;
  inline-size: 0.65rem;
}

.owner-live-pulse[data-pulse-state="stale"] .owner-live-pulse__head > div:first-child > span i {
  background: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent), transparent 70%);
}

.owner-live-pulse__head h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  margin: 0;
}

.owner-live-pulse__meta {
  align-items: end;
  color: var(--app-muted);
  display: grid;
  font-size: var(--fs-xs);
  gap: 0.1rem;
  text-align: end;
}

.owner-live-pulse__meta > span {
  color: var(--app-text);
  font-weight: var(--fw-semibold);
}

.owner-live-pulse__ai-status {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.owner-live-pulse__ai-status:empty {
  display: none;
}

.owner-live-pulse__ai-status.status-generated {
  color: var(--job-success-color);
}

.owner-live-pulse__ai-status.status-skipped,
.owner-live-pulse__ai-status.status-aiunavailable,
.owner-live-pulse__ai-status.status-unbilled {
  color: var(--job-danger-color);
}

.owner-live-pulse__ai-status.status-pending {
  color: var(--app-accent);
}

.owner-live-pulse__freshness {
  color: var(--job-success-color) !important;
}

.owner-live-pulse[data-pulse-state="stale"] .owner-live-pulse__freshness {
  color: var(--job-danger-color) !important;
}

.owner-live-pulse__grid {
  border-block: 1px solid var(--app-border);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.owner-live-pulse__grid > div {
  align-content: center;
  display: grid;
  gap: 0.15rem;
  min-block-size: 5.25rem;
  min-inline-size: 0;
  padding: 0.65rem 0.8rem;
  position: relative;
}

.owner-live-pulse__grid > div + div {
  border-inline-start: 1px solid var(--app-border);
}

.owner-live-pulse__grid icon {
  color: var(--app-primary);
  font-size: 1.05rem;
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.owner-live-pulse__grid span {
  color: var(--app-muted);
  display: -webkit-box;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  min-block-size: 2.5em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.owner-live-pulse__grid strong {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.owner-live-pulse__grid small {
  block-size: 1rem;
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.owner-live-pulse__grid small.is-positive {
  color: var(--job-success-color);
}

.owner-live-pulse__grid small.is-negative {
  color: var(--job-danger-color);
}

.owner-live-pulse__footer {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  min-block-size: 2.1rem;
}

.owner-live-pulse__footer form {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  margin-inline-start: auto;
}

.owner-live-pulse__footer .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  white-space: nowrap;
}

.owner-brief-policy {
  display: grid;
  gap: 1rem;
}

.owner-brief-policy__section {
  margin: 0;
}

.owner-brief-policy__toggles {
  align-content: center;
  display: grid;
  gap: 0.75rem;
}

.owner-brief-threshold-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-brief-threshold-grid label {
  color: var(--app-muted);
  display: grid;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  gap: 0.35rem;
}

.owner-brief-policy__actions {
  display: flex;
  justify-content: flex-end;
}

.owner-brief-policy__actions .btn {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

body[data-theme="dark-mode"] .owner-live-pulse {
  background: var(--app-surface);
}

@media (min-width: 768px) {
  .owner-intelligence-filter.collapse {
    display: grid !important;
  }
}

@media (max-width: 1399.98px) {
  .owner-intelligence-filter {
    grid-template-columns: minmax(12rem, 1.2fr) repeat(2, minmax(9rem, 0.7fr)) auto;
  }

  .owner-intelligence-filter__freshness {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .decision-score-band {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .workspace-split--brief,
  .workspace-split--operations,
  .workspace-split--customers,
  .workspace-split--inventory,
  .decision-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-side,
  .customer-side,
  .inventory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-score-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }

  .decision-score-band > div {
    min-inline-size: 0;
  }

  .decision-score-band > div:nth-child(3n + 1) {
    border-inline-start: 0;
  }

  .decision-score-band > div:nth-child(n + 4) {
    border-block-start: 1px solid var(--app-border);
  }

  .finance-performance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .owner-live-pulse__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .owner-live-pulse__grid > div:nth-child(4) {
    border-inline-start: 0;
  }

  .owner-live-pulse__grid > div:nth-child(n + 4) {
    border-block-start: 1px solid var(--app-border);
  }
}

@media (max-width: 991.98px) {
  .owner-intelligence__page-head,
  .workspace-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-intelligence-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-intelligence-filter__actions,
  .owner-intelligence-filter__freshness {
    grid-column: auto;
  }

  .executive-briefing,
  .finance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-widget-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .personalized-widget {
    grid-column: span 12 !important;
  }

  .decision-exception-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .app-page-fluid {
    padding-inline: 0.65rem;
  }

  .owner-intelligence__page-head {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
    min-block-size: 0;
  }

  .owner-intelligence__page-head p,
  .owner-intelligence__eyebrow {
    display: none;
  }

  .owner-intelligence__page-head h1 {
    font-size: 1.3rem;
    margin: 0;
  }

  .owner-intelligence__head-actions {
    flex-wrap: nowrap;
    margin-inline-start: auto;
  }

  .owner-intelligence__head-actions .btn {
    min-block-size: 2.75rem;
    justify-content: center;
    padding-inline: 0.75rem;
  }

  .owner-intelligence__head-actions .btn-outline-secondary {
    display: none;
  }

  .owner-intelligence-filter-toggle {
    align-items: center;
    display: flex;
    inline-size: 100%;
    justify-content: space-between;
    min-block-size: 3rem;
    padding: 0.5rem 0.7rem;
    text-align: start;
  }

  .owner-intelligence-filter-toggle > span {
    align-items: center;
    display: grid;
    gap: 0.05rem 0.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-inline-size: 0;
  }

  .owner-intelligence-filter-toggle > span > icon,
  .owner-intelligence-filter-toggle > span > .bi {
    grid-row: span 2;
  }

  .owner-intelligence-filter-toggle strong,
  .owner-intelligence-filter-toggle small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-intelligence-filter-toggle small {
    color: var(--app-muted);
    font-size: var(--fs-xs);
  }

  .owner-intelligence-filter.collapse:not(.show) {
    display: none;
  }

  .owner-intelligence-filter.collapse.show {
    display: grid;
  }

  .owner-intelligence-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-intelligence-filter > label:first-child {
    grid-column: 1 / -1;
  }

  .owner-intelligence-filter__actions,
  .owner-intelligence-filter__freshness {
    grid-column: 1 / -1;
  }

  .owner-intelligence-filter__actions .btn:first-child {
    flex: 1;
  }

  .owner-live-pulse {
    padding: 0.75rem;
  }

  .owner-live-pulse__head,
  .owner-live-pulse__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-live-pulse__meta {
    align-items: start;
    text-align: start;
  }

  .owner-live-pulse__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-live-pulse__grid > div:nth-child(odd) {
    border-inline-start: 0;
  }

  .owner-live-pulse__grid > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--app-border);
  }

  .owner-live-pulse__footer form {
    align-items: stretch;
    inline-size: 100%;
    margin-inline-start: 0;
  }

  .owner-live-pulse__footer form .btn {
    justify-content: center;
    margin-inline-start: auto;
  }

  .owner-brief-threshold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-workspace-content,
  .owner-workspace-content > .tab-pane {
    min-block-size: 34rem;
  }

  .owner-workspace-content > .tab-pane {
    padding: 0.85rem;
  }

  .workspace-heading {
    gap: 0.5rem;
    margin-block-end: 0.65rem;
    padding-block-end: 0.55rem;
  }

  .workspace-heading p {
    display: none;
  }

  .workspace-heading h2 {
    font-size: 1.15rem;
    margin: 0;
  }

  .workspace-heading > .btn {
    inline-size: auto;
    min-block-size: 2.35rem;
  }

  .decision-view-tabs {
    display: grid;
    grid-auto-flow: column;
    inline-size: 100%;
    overflow-x: auto;
  }

  .decision-view-tabs .nav-link {
    min-inline-size: 7.5rem;
    padding-inline: 0.5rem;
  }

  .owner-workspace-tabs .nav {
    grid-auto-columns: minmax(9.5rem, 1fr);
    inline-size: max-content;
    min-inline-size: 100%;
  }

  .owner-workspace-tabs .nav-link {
    min-block-size: 3.15rem;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .owner-workspace-tabs {
    border-inline-end: 3px solid var(--app-primary);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--app-primary) var(--app-surface-soft);
    scrollbar-width: thin;
  }

  :dir(rtl) .owner-workspace-tabs,
  :dir(rtl) .owner-intelligence .table-responsive {
    direction: ltr;
  }

  :dir(rtl) .owner-workspace-tabs {
    border-inline-end: 0;
    border-inline-start: 3px solid var(--app-primary);
  }

  :dir(rtl) .owner-workspace-tabs .nav,
  :dir(rtl) .owner-intelligence .table-responsive > .table {
    direction: rtl;
  }

  .owner-workspace-tabs::-webkit-scrollbar {
    block-size: 0.35rem;
    display: block;
  }

  .owner-workspace-tabs::-webkit-scrollbar-thumb {
    background: var(--app-primary);
    border-radius: var(--radius-pill);
  }

  .owner-workspace-tabs::-webkit-scrollbar-track {
    background: var(--app-surface-soft);
  }

  .operations-flow-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-flow {
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    overflow-x: visible;
  }

  .operations-flow > li > i {
    display: none;
  }

  .operations-flow > li:last-child {
    grid-column: 1 / -1;
  }

  .operations-flow > li {
    padding-inline-end: 0;
  }

  .decision-score-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .decision-view-content .decision-score-band > div {
    min-block-size: 4.8rem;
  }

  .decision-exception-list > a {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .decision-exception-list > a > icon,
  .decision-exception-list > a > .bi {
    display: none;
  }

  .decision-score-band__main {
    grid-column: 1 / -1;
  }

  .executive-audio {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .executive-audio .form-select {
    grid-column: 1 / -1;
  }

  .comparison-ribbon,
  .current-state-band > div:last-child,
  .inventory-health-band,
  .customer-journey,
  .operations-side,
  .customer-side,
  .inventory-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-performance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-ribbon > div + div,
  .current-state-band > div:last-child > a + a,
  .finance-performance > * + *,
  .inventory-health-band > a + a,
  .customer-journey > a + a,
  .decision-score-band > div + div {
    border-block-start: 1px solid var(--app-border);
    border-inline-start: 0;
  }

  .decision-row,
  .follow-up-list > a {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .decision-row > span:nth-last-child(2),
  .follow-up-list > a > b {
    grid-column: 2;
  }

  .follow-up-list > a > em {
    grid-column: 3;
    grid-row: 1;
  }

  .dashboard-widget-picker__item {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-widget-picker__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .decision-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .decision-row > icon,
  .decision-row > span:nth-last-child(2) {
    display: none;
  }

  .follow-up-list > a {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .follow-up-list > a > b,
  .follow-up-list > a > em {
    grid-column: 2;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-workspace-tabs .nav-link,
  .executive-audio__play,
  .decision-row,
  .operations-flow > a {
    transition: none !important;
  }
}

/* Sellable intelligent shell: full-height logical side rail + global-search top bar.
   inset-inline-start places the rail on the right in RTL and on the left in LTR. */
.app-nav-body {
  display: contents;
}

body[data-intelligent-dashboard="true"] {
  --intelligent-rail-size: 12rem;
  --intelligent-topbar-size: 4.25rem;
}

.classic-header-controls-shell {
  display: contents;
}

body[data-intelligent-dashboard="true"] .intelligent-top-bar {
  align-items: center;
  background: color-mix(in srgb, var(--app-surface), transparent 2%);
  block-size: var(--intelligent-topbar-size);
  border-block-end: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(16rem, 42rem) auto;
  inline-size: calc(100vw - var(--intelligent-rail-size) - 1rem);
  inset-block-start: 0;
  inset-inline-start: 100%;
  padding: 0.8rem 1rem;
  position: absolute;
  z-index: 1032;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail {
  align-items: stretch;
  background: var(--app-surface) !important;
  border: 0 !important;
  border-inline-end: 1px solid var(--app-border) !important;
  block-size: 100dvh;
  box-shadow: var(--app-shadow-md);
  inline-size: var(--intelligent-rail-size);
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: 0 !important;
  padding: 0;
  position: absolute;
  z-index: 1040;
}

body[data-intelligent-dashboard="true"][data-sticky-header] .intelligent-side-rail {
  position: fixed;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail > .container-fluid {
  align-items: stretch;
  block-size: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 1rem 0.8rem;
}

.intelligent-brand-stack {
  border-block-end: 1px solid var(--app-border);
  display: grid;
  flex: 0 0 auto;
  gap: 0.65rem;
  min-inline-size: 0;
  padding: 0.1rem 0.25rem 0.9rem;
}

.intelligent-product-brand,
.intelligent-client-brand {
  align-items: center;
  color: var(--app-text);
  display: flex;
  gap: 0.65rem;
  min-inline-size: 0;
  text-decoration: none;
}

.intelligent-product-brand {
  font-size: 1rem;
  font-weight: var(--fw-bold);
}

.intelligent-client-brand {
  color: var(--app-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.intelligent-product-logo,
.intelligent-client-logo,
.intelligent-brand-fallback,
.intelligent-client-fallback {
  align-items: center;
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 70%);
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  object-fit: contain;
}

.intelligent-product-logo,
.intelligent-brand-fallback {
  block-size: 2.5rem;
  inline-size: 4rem;
  padding: 0.2rem;
}

.intelligent-client-logo,
.intelligent-client-fallback {
  block-size: 2.5rem;
  inline-size: 4rem;
  padding: 0.2rem;
}

.intelligent-offcanvas-identity {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  min-inline-size: 0;
}

.intelligent-offcanvas-identity > span:last-child {
  display: grid;
  min-inline-size: 0;
}

.intelligent-offcanvas-identity strong,
.intelligent-offcanvas-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intelligent-offcanvas-identity small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.intelligent-nav-backdrop {
  display: none;
}

body[data-intelligent-dashboard="true"] .intelligent-nav-panel {
  background: transparent;
  border: 0;
  display: flex !important;
  flex: 1 1 auto;
  inline-size: 100% !important;
  min-block-size: 0;
  position: static !important;
  transform: none !important;
  visibility: visible !important;
}

body[data-intelligent-dashboard="true"] .intelligent-nav-panel .offcanvas-header {
  display: none;
}

body[data-intelligent-dashboard="true"] .intelligent-nav-body {
  display: block;
  inline-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.15rem 1rem;
  scrollbar-width: thin;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav {
  align-items: stretch;
  flex-direction: column;
  gap: 0.15rem;
  inline-size: 100%;
  min-inline-size: 0;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--app-muted) !important;
  display: flex;
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  gap: 0.65rem;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.55rem 0.65rem;
  text-align: start;
  white-space: normal;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:hover,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:focus-visible {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text) !important;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link.active,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
  background: var(--app-primary-soft);
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 65%);
  color: var(--app-primary) !important;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .nav-link__icon {
  flex: 0 0 1.2rem;
  font-size: 1rem;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu.show {
  background: var(--app-surface-soft);
  border: 0;
  border-inline-start: 2px solid var(--app-border);
  border-radius: 0;
  box-shadow: none;
  inline-size: auto;
  margin-block: 0.15rem 0.45rem !important;
  margin-inline: 0.75rem 0 !important;
  min-inline-size: 0;
  padding: 0.25rem 0.35rem;
  position: static !important;
  transform: none !important;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu .dropdown-item {
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  min-block-size: 2.25rem;
  overflow-wrap: anywhere;
  padding: 0.45rem 0.55rem;
  white-space: normal;
}

.intelligent-global-search-shell {
  inline-size: 100%;
  min-inline-size: 0;
  position: relative;
  z-index: 1043;
}

.intelligent-global-search {
  position: relative;
}

.intelligent-global-search > .form-control {
  background: var(--app-surface);
  border-color: var(--app-control-border);
  block-size: 3.05rem;
  box-shadow: var(--app-shadow-sm);
  padding-inline: 2.85rem 2.7rem;
}

.intelligent-global-search > .form-control:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.2rem var(--app-focus-ring-translucent);
}

.intelligent-global-search__icon,
.intelligent-global-search__clear {
  align-items: center;
  block-size: 2.5rem;
  display: inline-flex;
  inset-block-start: 0.28rem;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.intelligent-global-search__icon {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--app-muted);
  cursor: pointer;
  inset-inline-start: 0.3rem;
  inline-size: 2.35rem;
  padding: 0;
}

.intelligent-global-search__icon:hover,
.intelligent-global-search__icon:focus-visible {
  color: var(--app-primary);
}

.intelligent-global-search__icon:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 1px;
}

.intelligent-global-search__clear {
  border: 0;
  color: var(--app-muted);
  inset-inline-end: 0.3rem;
  inline-size: 2.35rem;
  padding: 0;
}

.intelligent-global-search__results,
.intelligent-global-search__message {
  background: var(--app-surface);
  border: 1px solid var(--app-control-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-lg);
  inset-block-start: calc(100% + 0.4rem);
  inset-inline: 0;
  max-block-size: min(68dvh, 34rem);
  overflow-y: auto;
  padding: 0.35rem;
  position: absolute;
}

.intelligent-global-search__message {
  color: var(--app-muted);
  font-size: var(--fs-sm);
  padding: 1rem;
  text-align: center;
}

.global-search-result {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--app-text);
  display: grid;
  gap: 0.15rem 0.65rem;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  min-block-size: 3.7rem;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
}

.global-search-result:hover,
.global-search-result[aria-selected="true"] {
  background: var(--app-primary-soft);
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 72%);
  color: var(--app-text);
}

.global-search-result:focus-visible {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-text);
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.global-search-result__icon {
  align-items: center;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  grid-row: span 2;
  inline-size: 2.25rem;
  justify-content: center;
  block-size: 2.25rem;
}

.global-search-result__title,
.global-search-result__subtitle {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.global-search-result__subtitle,
.global-search-result__type,
.global-search-status {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.global-search-result__type {
  grid-row: span 2;
}

.global-search-status {
  padding: 1rem;
  text-align: center;
}

body[data-intelligent-dashboard="true"] .app-header-controls {
  justify-self: end;
  margin: 0 !important;
  min-inline-size: 0;
  position: static;
  z-index: 1042;
}

body[data-intelligent-dashboard="true"] .app-header-controls > .btn,
body[data-intelligent-dashboard="true"] .app-header-controls > .dropdown > .btn {
  align-items: center;
  background: var(--app-surface);
  border-color: var(--app-border);
  display: inline-flex;
  justify-content: center;
  min-block-size: 2.5rem;
}

body[data-intelligent-dashboard="true"] [data-sticky-toggle][aria-pressed="true"] {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-primary);
}

body[data-intelligent-dashboard="true"] .intelligent-workspace {
  margin-inline-start: var(--intelligent-rail-size);
  max-inline-size: none;
  padding-block-start: calc(var(--intelligent-topbar-size) + 0.85rem);
  width: calc(100% - var(--intelligent-rail-size));
}

body[data-intelligent-dashboard="true"] .intelligent-shell-footer {
  margin-inline-start: var(--intelligent-rail-size);
  width: calc(100% - var(--intelligent-rail-size));
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  body[data-intelligent-dashboard="true"] {
    --intelligent-rail-size: 12.5rem;
  }

  body[data-intelligent-dashboard="true"] .app-header-control-label {
    display: none;
  }
}

@media (max-width: 1399.98px) and (min-width: 992px) {
  body[data-intelligent-dashboard="true"] .intelligent-top-bar {
    gap: 0.5rem;
    grid-template-columns: minmax(12rem, 1fr) auto;
  }

  body[data-intelligent-dashboard="true"] .app-header-control-label {
    display: none;
  }

  body[data-intelligent-dashboard="true"] .app-header-controls {
    flex-wrap: nowrap;
  }
}

@media (max-width: 991.98px) {
  body[data-intelligent-dashboard="true"] {
    --intelligent-topbar-size: 8.65rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail,
  body[data-intelligent-dashboard="true"][data-sticky-header] .intelligent-side-rail {
    block-size: 4.3rem;
    inline-size: 100%;
    inset-inline: 0;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail > .container-fluid {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-top-bar {
    block-size: var(--intelligent-topbar-size);
    display: block;
    inline-size: 100%;
    inset-inline-start: 0;
    padding: 0;
  }

  .intelligent-brand-stack {
    border: 0;
    display: flex;
    padding: 0;
    position: relative;
    z-index: 1044;
  }

  .intelligent-client-brand {
    display: none;
  }

  .intelligent-product-brand {
    max-inline-size: 10rem;
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .intelligent-product-logo,
  .intelligent-brand-fallback {
    block-size: 44px;
    inline-size: 44px;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-toggle {
    margin-inline-start: auto;
    position: relative;
    z-index: 1044;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-panel {
    background: var(--app-surface);
    block-size: 100dvh !important;
    box-shadow: var(--app-shadow-lg);
    display: none !important;
    inline-size: min(88vw, 21rem) !important;
    inset-block: 0;
    inset-inline-start: 0;
    position: fixed !important;
    transform: none !important;
    visibility: visible !important;
    z-index: 1046;
  }

  [dir="rtl"] body[data-intelligent-dashboard="true"] .intelligent-nav-panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: none !important;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-panel.show,
  body[data-intelligent-dashboard="true"] .intelligent-nav-panel.showing {
    display: block !important;
    transform: none !important;
    visibility: visible !important;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-panel.hiding {
    display: block !important;
    visibility: visible !important;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-panel .offcanvas-header {
    border-block-end: 1px solid var(--app-border);
    display: flex;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-backdrop {
    background: color-mix(in srgb, var(--app-text) 42%, transparent);
    border: 0;
    display: block;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 1045;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-backdrop[hidden] {
    display: none;
  }

  body.intelligent-nav-open {
    overflow: hidden;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-body {
    block-size: calc(100dvh - 4.5rem);
    padding: 0.65rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link,
  body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu .dropdown-item {
    min-block-size: 3.15rem;
  }

  .intelligent-global-search-shell {
    inset-block-start: 4.45rem;
    inset-inline: 0.65rem;
    inline-size: auto;
    position: absolute;
  }

  .intelligent-global-search > .form-control {
    block-size: 44px;
    padding-inline: 52px;
  }

  .intelligent-global-search__icon,
  .intelligent-global-search__clear {
    block-size: 44px;
    inline-size: 44px;
    inset-block-start: 0;
  }

  body[data-intelligent-dashboard="true"] .app-header-controls {
    gap: 0.25rem !important;
    inset-block-start: 0.78rem;
    inset-inline-end: 4.5rem;
    position: absolute;
  }

  body[data-intelligent-dashboard="true"] .app-header-control-label {
    display: none;
  }

  body[data-intelligent-dashboard="true"] .app-header-controls > .btn,
  body[data-intelligent-dashboard="true"] .app-header-controls > .dropdown > .btn,
  body[data-intelligent-dashboard="true"] .app-avatar-btn {
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-toggle,
  body[data-intelligent-dashboard="true"] .intelligent-nav-panel .btn-close {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  body[data-intelligent-dashboard="true"] .intelligent-workspace {
    margin-inline-start: 0;
    padding-block-start: calc(var(--intelligent-topbar-size) + 0.65rem);
    width: 100%;
  }

  body[data-intelligent-dashboard="true"] .intelligent-shell-footer {
    margin-inline-start: 0;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  body[data-intelligent-dashboard="true"] .app-header-controls {
    inset-inline-end: 4.5rem;
  }

  body[data-intelligent-dashboard="true"] .app-header-controls > .btn,
  body[data-intelligent-dashboard="true"] .app-header-controls > .dropdown > .btn,
  body[data-intelligent-dashboard="true"] .app-avatar-btn {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .intelligent-global-search > .form-control {
    font-size: 0.88rem;
  }
}

/* H12 — governed identity + adaptive workspace dock. The legacy intelligent-shell rules above
   remain the tablet/mobile drawer foundation; these later rules narrow the desktop rail to an
   icon dock and move product/workspace/branch identity into one stable top-bar context. */
.intelligent-bottom-nav {
  display: none;
}

body[data-intelligent-dashboard="true"] {
  --intelligent-rail-size: 4rem;
  --intelligent-topbar-size: 4.5rem;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail > .container-fluid {
  gap: 0.5rem;
  padding: 0.55rem 0.45rem;
}

body[data-intelligent-dashboard="true"] .intelligent-brand-stack {
  border: 0;
  justify-items: center;
  padding: 0;
}

body[data-intelligent-dashboard="true"] .intelligent-brand-stack .intelligent-client-brand {
  display: none;
}

body[data-intelligent-dashboard="true"] .intelligent-brand-stack .intelligent-product-brand {
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  min-inline-size: 48px;
}

body[data-intelligent-dashboard="true"] .intelligent-product-logo,
body[data-intelligent-dashboard="true"] .intelligent-brand-fallback {
  block-size: 40px;
  inline-size: 40px;
}

body[data-intelligent-dashboard="true"] .intelligent-nav-panel,
body[data-intelligent-dashboard="true"] .intelligent-nav-body {
  overflow: visible;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav {
  align-items: center;
  gap: 0.25rem;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item {
  inline-size: 48px;
  position: relative;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link {
  block-size: 48px;
  gap: 0.75rem;
  inline-size: 48px;
  min-block-size: 48px;
  overflow: hidden;
  padding: 0 0.8rem;
  position: relative;
  transition: inline-size var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  z-index: 2;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link::after {
  display: none;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:hover,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:focus-visible,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
  box-shadow: var(--app-shadow-md);
  inline-size: max-content;
  min-inline-size: 13rem;
  overflow: visible;
  z-index: 1045;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .nav-link__icon {
  flex-basis: 1.35rem;
  font-size: 1.15rem;
  inline-size: 1.35rem;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu,
body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu.show {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--app-shadow-lg);
  inset-block-start: 0 !important;
  inset-inline-start: calc(100% + 0.5rem) !important;
  inline-size: max-content;
  margin: 0 !important;
  max-block-size: min(78dvh, 36rem);
  min-inline-size: 15rem;
  overflow-y: auto;
  padding: 0.45rem;
  position: absolute !important;
  transform: none !important;
  z-index: 1055;
}

body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu .dropdown-item {
  font-size: 0.86rem;
  min-block-size: 44px;
  padding: 0.65rem 0.75rem;
  white-space: nowrap;
}

body[data-intelligent-dashboard="true"] .intelligent-top-bar {
  gap: 0.75rem;
  grid-template-columns: minmax(19rem, auto) minmax(14rem, 1fr) auto;
  inline-size: auto;
  inset-inline-end: 0;
  inset-inline-start: var(--intelligent-rail-size);
  padding: 0.65rem 0.9rem;
  position: fixed;
}

body[data-theme="dark-mode"][data-intelligent-dashboard="true"] .intelligent-side-rail,
body[data-theme="dark-mode"][data-intelligent-dashboard="true"] .intelligent-top-bar {
  background: var(--app-nav-bg) !important;
}

.intelligent-workspace-context {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  min-inline-size: 0;
}

.intelligent-context-product,
.intelligent-context-client,
.intelligent-context-branch,
.intelligent-context-branch > .btn {
  align-items: center;
  color: var(--app-text);
  display: inline-flex;
  min-inline-size: 0;
  text-decoration: none;
}

.intelligent-context-product,
.intelligent-context-client {
  gap: 0.5rem;
}

.intelligent-context-product > img,
.intelligent-context-product > span:first-child,
.intelligent-context-client > img,
.intelligent-context-client > span:first-child {
  align-items: center;
  background: var(--app-primary-soft);
  border: 1px solid color-mix(in srgb, var(--app-primary), var(--app-border) 70%);
  border-radius: var(--radius-sm);
  block-size: 34px;
  display: inline-flex;
  flex: 0 0 34px;
  inline-size: 34px;
  justify-content: center;
  object-fit: contain;
}

.intelligent-context-product strong,
.intelligent-context-client strong,
.intelligent-context-client small {
  display: block;
  max-inline-size: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intelligent-context-product strong,
.intelligent-context-client strong {
  font-size: var(--fs-sm);
}

.intelligent-context-client small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
}

.intelligent-context-divider {
  background: var(--app-border);
  block-size: 2rem;
  inline-size: 1px;
}

.intelligent-context-branch {
  margin-inline-start: 0.15rem;
}

.intelligent-context-branch > .btn,
.intelligent-context-branch--static {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-pill);
  gap: 0.4rem;
  min-block-size: 40px;
  padding: 0.4rem 0.7rem;
}

.intelligent-context-branch > .btn > span,
.intelligent-context-branch--static > span {
  max-inline-size: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-flow-shortcuts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-end: 1rem;
}

.workspace-flow-shortcuts__hint {
  display: none;
}

.localized-file-picker {
  align-items: stretch;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  display: flex;
  min-block-size: 44px;
  overflow: hidden;
}

.localized-file-picker__button {
  align-items: center;
  background: var(--app-surface-soft);
  border-inline-end: 1px solid var(--app-border);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--fw-semibold);
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 8rem;
  padding: 0.5rem 0.75rem;
  position: relative;
}

.localized-file-picker__button:focus-within {
  box-shadow: inset 0 0 0 2px var(--app-primary);
}

.localized-file-picker__button > input {
  cursor: pointer;
  inset: 0;
  opacity: 0;
  position: absolute;
}

.localized-file-picker__name {
  align-items: center;
  display: inline-flex;
  min-inline-size: 0;
  overflow: hidden;
  padding: 0.5rem 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-intelligence__head-actions .btn,
.executive-audio__play {
  min-block-size: 44px;
}

.executive-audio__play {
  inline-size: 44px;
  min-inline-size: 44px;
}

.workspace-flow-shortcuts > a {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  color: var(--app-text);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-block-size: 72px;
  padding: 0.7rem;
  text-decoration: none;
}

.workspace-flow-shortcuts > a:hover,
.workspace-flow-shortcuts > a:focus-visible {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-sm);
}

.workspace-flow-shortcuts__icon {
  align-items: center;
  background: var(--app-primary-soft);
  border-radius: var(--radius-sm);
  block-size: 42px;
  color: var(--app-primary);
  display: inline-flex;
  inline-size: 42px;
  justify-content: center;
}

.workspace-flow-shortcuts strong,
.workspace-flow-shortcuts small {
  display: block;
}

.workspace-flow-shortcuts small {
  color: var(--app-muted);
  font-size: var(--fs-xs);
  margin-block-start: 0.15rem;
}

[dir="ltr"] .workspace-flow-shortcuts__arrow {
  transform: scaleX(-1);
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  body[data-intelligent-dashboard="true"] {
    --intelligent-rail-size: 4rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-top-bar {
    grid-template-columns: minmax(15rem, 20rem) minmax(12rem, 1fr) auto;
  }

  .intelligent-context-product strong,
  .intelligent-context-client small {
    display: none;
  }

  .intelligent-context-client strong {
    max-inline-size: 7rem;
  }
}

@media (max-width: 991.98px) {
  body[data-intelligent-dashboard="true"] {
    --intelligent-topbar-size: 10.7rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail,
  body[data-intelligent-dashboard="true"][data-sticky-header] .intelligent-side-rail {
    block-size: 4.15rem;
    inline-size: 100%;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail > .container-fluid {
    padding: 0.55rem 0.65rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-top-bar {
    block-size: var(--intelligent-topbar-size);
    display: block;
    inline-size: auto;
    inset-inline: 0;
    padding: 0;
  }

  .intelligent-workspace-context {
    inset-block-start: 4.25rem;
    inset-inline: 0.65rem;
    min-block-size: 2.35rem;
    position: absolute;
  }

  .intelligent-context-product,
  .intelligent-context-divider,
  .intelligent-context-client small {
    display: none;
  }

  .intelligent-context-client {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .intelligent-context-client strong {
    max-inline-size: 12rem;
  }

  .intelligent-context-branch {
    margin-inline-start: auto;
  }

  .intelligent-global-search-shell {
    inset-block-start: 7.15rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-nav-panel,
  body[data-intelligent-dashboard="true"] .intelligent-nav-body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav {
    align-items: stretch;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item {
    inline-size: 100%;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link,
  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:hover,
  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link:focus-visible,
  body[data-intelligent-dashboard="true"] .intelligent-side-rail .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
    box-shadow: none;
    inline-size: 100%;
    min-inline-size: 0;
    overflow: visible;
  }

  body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu,
  body[data-intelligent-dashboard="true"] .intelligent-side-rail .app-nav-menu.show {
    background: var(--app-surface-soft);
    border: 0;
    border-inline-start: 2px solid var(--app-border);
    border-radius: 0;
    box-shadow: none;
    inset: auto !important;
    inline-size: auto;
    margin-block: 0.15rem 0.45rem !important;
    margin-inline: 0.75rem 0 !important;
    min-inline-size: 0;
    padding: 0.25rem 0.35rem;
    position: static !important;
  }

  .workspace-flow-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  body[data-intelligent-dashboard="true"] .intelligent-nav-toggle {
    display: none;
  }

  body[data-intelligent-dashboard="true"] .app-header-controls {
    inset-inline-end: 0.65rem;
  }

  body[data-intelligent-dashboard="true"] [data-sticky-toggle] {
    display: none;
  }

  .intelligent-context-client > img,
  .intelligent-context-client > span:first-child {
    block-size: 30px;
    flex-basis: 30px;
    inline-size: 30px;
  }

  .intelligent-context-client strong {
    max-inline-size: 7.5rem;
  }

  .intelligent-context-branch > .btn,
  .intelligent-context-branch--static {
    max-inline-size: 9.5rem;
    min-block-size: 44px;
  }

  .workspace-flow-shortcuts {
    display: flex;
    gap: 0.55rem;
    margin-inline: -0.25rem;
    overflow-x: auto;
    padding: 0.25rem;
    scroll-snap-type: x proximity;
  }

  .workspace-flow-shortcuts > a {
    flex: 0 0 min(82vw, 18rem);
    scroll-snap-align: start;
  }

  .workspace-flow-shortcuts__hint {
    align-items: center;
    color: var(--app-muted);
    display: flex;
    font-size: var(--fs-xs);
    gap: 0.35rem;
    margin: -0.65rem 0 0.8rem;
  }

  .localized-file-picker__button {
    min-inline-size: 7rem;
  }

  .intelligent-bottom-nav {
    align-items: stretch;
    background: color-mix(in srgb, var(--app-surface), transparent 2%);
    border-block-start: 1px solid var(--app-border);
    bottom: 0;
    box-shadow: 0 -0.35rem 1.2rem color-mix(in srgb, var(--app-text) 12%, transparent);
    display: flex;
    inset-inline: 0;
    justify-content: space-around;
    padding: 0.35rem max(0.35rem, env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.35rem, env(safe-area-inset-left));
    position: fixed;
    z-index: 1044;
  }

  .intelligent-bottom-nav > a,
  .intelligent-bottom-nav > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--app-muted);
    display: inline-flex;
    flex: 1 1 0;
    flex-direction: column;
    font-size: 0.68rem;
    gap: 0.15rem;
    justify-content: center;
    max-inline-size: 5rem;
    min-block-size: 52px;
    min-inline-size: 44px;
    padding: 0.25rem;
    text-decoration: none;
  }

  .intelligent-bottom-nav > a.active,
  .intelligent-bottom-nav > a:focus-visible,
  .intelligent-bottom-nav > button:focus-visible,
  .intelligent-bottom-nav > button[aria-expanded="true"] {
    background: var(--app-primary-soft);
    color: var(--app-primary);
  }

  .intelligent-bottom-nav .bi {
    font-size: 1.15rem;
  }

  body[data-intelligent-dashboard="true"] .intelligent-workspace {
    padding-block-end: calc(4.65rem + env(safe-area-inset-bottom));
  }

  body[data-intelligent-dashboard="true"] .intelligent-shell-footer {
    padding-block-end: calc(4.65rem + env(safe-area-inset-bottom));
  }
}

/* ── AB23: compliance agreements ─────────────────────────────────────────────
   Plain-text legal documents: the body preserves author line breaks (pre-wrap),
   never renders raw HTML, and stays readable under RTL via plaintext bidi. */
.compliance-document {
  margin-block-end: 1rem;
}

.compliance-document__meta {
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #6c757d);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-block-end: 0.75rem;
}

.compliance-document__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  padding: 1rem;
  max-block-size: 60vh;
  overflow-y: auto;
  background: var(--bs-body-bg, #fff);
}

.compliance-decision {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.compliance-decision .btn {
  min-block-size: 44px;
}

.compliance-decision .btn:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

.compliance-gate-banner {
  border-inline-start: 4px solid var(--bs-warning, #ffc107);
  padding: 0.75rem 1rem;
  margin-block-end: 1rem;
}

.compliance-readiness-warning {
  border-inline-start: 4px solid var(--bs-danger, #dc3545);
  padding: 0.75rem 1rem;
  margin-block-end: 1rem;
}

@media (max-width: 575.98px) {
  .compliance-decision .btn {
    inline-size: 100%;
  }
}

@media print {
  .compliance-document__body {
    max-block-size: none;
    overflow: visible;
    border: none;
    padding: 0;
  }

  nav,
  .compliance-decision,
  .app-toast-region,
  footer {
    display: none !important;
  }
}

/* Theme-aware brand assets + the B2 two-tier identity shell.
   Product identity owns the physical left edge; workspace + branch own the right edge. */
.theme-aware-logo {
  align-items: center;
  display: inline-grid;
  flex: 0 0 auto;
  justify-items: center;
  max-inline-size: 100%;
}

.theme-aware-logo__image {
  block-size: 100%;
  grid-area: 1 / 1;
  inline-size: 100%;
  object-fit: contain;
}

.theme-aware-logo__image--dark {
  display: none;
}

body[data-theme="dark-mode"] .theme-aware-logo__image--light {
  display: none;
}

body[data-theme="dark-mode"] .theme-aware-logo__image--dark {
  display: block;
}

.app-product-logo {
  block-size: 3rem;
  inline-size: min(11rem, 18vw);
}

.app-product-mark {
  block-size: 2.5rem;
  inline-size: 2.5rem;
}

/* AA9 option A (owner-approved mockup 2026-07-28): the client logo renders FRAMELESS and smaller
   (~2.1rem) while its slot keeps the original header footprint — no layout metric changes. */
.app-client-logo {
  block-size: 2.1rem;
  inline-size: min(6.75rem, 13vw);
}

/* The product mark inherits the scale the client mark used to hold — it is the primary identity now. */
.auth-identity__logo {
  block-size: 5.25rem;
  inline-size: min(13.75rem, 76vw);
}

.auth-brand__logo {
  block-size: 2.75rem;
  inline-size: 8.25rem;
}

.app-logo {
  block-size: 2rem;
  inline-size: 10rem;
}

.branding-preview--dark {
  background: #101b2d;
  border-color: #33445e;
  color: #f8fafc;
}

.branding-mode-previews {
  display: grid;
  gap: 0.8rem;
}

.branding-mode-card {
  align-content: center;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  min-block-size: 11rem;
  padding: 1rem;
  text-align: center;
}

.branding-mode-card img {
  block-size: 4.5rem;
  inline-size: min(12rem, 80%);
  object-fit: contain;
}

.branding-mode-card .branding-mode-card__mark {
  block-size: 3.75rem;
  inline-size: 3.75rem;
}

.branding-mode-card--light {
  background: #f8fafc;
  color: #142033;
}

.branding-mode-card--dark {
  background: #101b2d;
  border-color: #33445e;
  color: #f8fafc;
}

.branding-mode-card__label,
.branding-mode-card small {
  color: inherit;
  font-size: var(--fs-xs);
  opacity: 0.72;
}

@media (min-width: 992px) {
  body[data-intelligent-dashboard="false"] .app-primary-nav > .container-fluid {
    align-items: stretch;
    direction: ltr;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-inline: 1rem;
  }

  body[data-intelligent-dashboard="false"] .classic-identity-row {
    align-items: center;
    border-block-end: 1px solid var(--app-border);
    direction: ltr;
    display: flex;
    flex: 1 0 100%;
    justify-content: space-between;
    min-block-size: 4.35rem;
    order: 1;
    padding-block: 0.55rem;
  }

  body[data-intelligent-dashboard="false"] .classic-product-brand {
    justify-content: flex-start;
    min-inline-size: 0;
  }

  /* Keep uploaded branding inside the header contract. The shared logo partial
     uses the branding-specific app-* classes, so desktop needs an explicit box
     just like the mobile breakpoint already provides. */
  body[data-intelligent-dashboard="false"] .classic-product-brand .app-product-logo {
    block-size: 3.15rem;
    inline-size: min(12rem, 22vw);
  }

  body[data-intelligent-dashboard="false"] .classic-client-brand .app-client-logo {
    /* AA9 option A: smaller frameless client logo; the brand row's max-block-size below is untouched. */
    block-size: 2.1rem;
    inline-size: min(7rem, 13vw);
  }

  body[data-intelligent-dashboard="false"] .classic-product-brand,
  body[data-intelligent-dashboard="false"] .classic-client-brand {
    max-block-size: 3.25rem;
  }

  body[data-intelligent-dashboard="false"] .classic-workspace-context {
    align-items: center;
    direction: rtl;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    min-inline-size: 0;
  }

  body[data-intelligent-dashboard="false"] .classic-client-brand {
    direction: rtl;
  }

  body[data-intelligent-dashboard="false"] .classic-header-controls-shell {
    align-items: center;
    border-block-start: 1px solid transparent;
    direction: ltr;
    display: flex;
    flex: 0 0 auto;
    min-block-size: 3.4rem;
    order: 2;
    padding-inline-end: 0.75rem;
  }

  body[data-intelligent-dashboard="false"] #mainNavigation {
    border-block-start: 1px solid transparent;
    direction: rtl;
    flex: 1 1 0;
    min-block-size: 3.4rem;
    min-inline-size: 0;
    order: 3;
    padding-block-start: 0;
    width: auto;
  }

  body[data-intelligent-dashboard="false"] #mainNavigation .navbar-nav {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    min-block-size: 3.4rem;
  }

  body[data-intelligent-dashboard="false"] .app-header-controls {
    direction: ltr;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 !important;
  }
}

.classic-product-brand,
.classic-client-brand,
.classic-workspace-context,
.classic-workspace-branch,
.classic-workspace-branch > .btn {
  align-items: center;
  display: inline-flex;
}

.classic-product-brand {
  gap: 0.6rem;
}

.classic-product-name {
  color: var(--app-text);
  font-size: 1.05rem;
}

.classic-workspace-context {
  min-inline-size: 0;
}

.classic-client-brand {
  gap: 0.55rem;
}

.classic-client-logo,
.classic-product-logo,
.app-client-logo,
.app-product-logo {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.classic-workspace-branch > .btn,
.classic-workspace-branch--static {
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-pill);
  color: var(--app-text);
  gap: 0.4rem;
  min-block-size: 2.45rem;
  padding: 0.4rem 0.7rem;
}

.classic-workspace-branch > .btn > span,
.classic-workspace-branch--static > span {
  max-inline-size: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-controls {
  direction: ltr;
}

html[dir="rtl"] .app-header-controls .dropdown-menu {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .app-header-controls .dropdown-menu {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] body[data-intelligent-dashboard="false"] #mainNavigation {
  direction: rtl;
}

html[dir="ltr"] body[data-intelligent-dashboard="false"] #mainNavigation {
  direction: ltr;
}

.app-header-controls > * {
  flex: 0 0 auto;
}

.app-language-toggle {
  display: inline-flex;
  margin: 0;
}

.app-shell-tool {
  align-items: center;
  block-size: 2.4rem;
  display: inline-flex;
  inline-size: 2.4rem;
  justify-content: center;
  padding: 0;
}

.app-language-toggle__button {
  gap: 0.18rem;
  inline-size: 3.15rem;
}

.app-language-toggle__button span {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.app-avatar-btn.app-shell-tool {
  border: 0;
  inline-size: auto;
  min-inline-size: 2.7rem;
}

@media (max-width: 991.98px) {
  body[data-intelligent-dashboard="false"] .classic-identity-row {
    align-items: center;
    direction: ltr;
    display: flex;
    flex: 1 1 calc(100% - 3.5rem);
    justify-content: space-between;
    min-block-size: 3.75rem;
    min-inline-size: 0;
    order: 1;
  }

  body[data-intelligent-dashboard="false"] .navbar-toggler {
    order: 2;
  }

  body[data-intelligent-dashboard="false"] .classic-header-controls-shell {
    direction: ltr;
    display: flex;
    flex: 1 0 100%;
    order: 3;
  }

  body[data-intelligent-dashboard="false"] #mainNavigation {
    order: 4;
  }

  body[data-intelligent-dashboard="false"] .app-header-controls {
    justify-content: flex-start;
    margin: 0 !important;
    padding-block: 0.35rem;
  }

  body[data-intelligent-dashboard="false"] .classic-product-tools {
    margin-inline-end: auto;
  }

  .app-product-logo {
    block-size: 2.5rem;
    inline-size: min(8.5rem, 28vw);
  }

  .app-client-logo {
    /* AA9 option A: proportionally smaller on mobile too. */
    block-size: 1.9rem;
    inline-size: min(5rem, 17vw);
  }

  .classic-workspace-context {
    direction: rtl;
    display: flex;
    gap: 0.45rem;
    min-inline-size: 0;
  }

  .classic-client-copy strong {
    max-inline-size: 7rem;
  }
}

@media (max-width: 575.98px) {
  body[data-intelligent-dashboard="false"] .classic-identity-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body[data-intelligent-dashboard="false"] .classic-product-tools {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-inline-end: 0;
    order: 3;
  }

  body[data-intelligent-dashboard="false"] .classic-workspace-context {
    margin-inline-start: auto;
  }

  .classic-client-copy {
    display: none;
  }

  .classic-workspace-branch > .btn,
  .classic-workspace-branch--static {
    max-inline-size: 8.5rem;
  }

  .classic-workspace-branch > .btn > span,
  .classic-workspace-branch--static > span {
    max-inline-size: 5.5rem;
  }

  .branding-mode-previews {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .branding-mode-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-intelligent-dashboard="true"] .intelligent-product-brand .app-product-mark {
  block-size: 40px;
  inline-size: 40px;
}

.intelligent-offcanvas-identity .app-client-logo {
  /* AA9 option A: match the smaller frameless client logo in the offcanvas identity too. */
  block-size: 2.1rem;
  inline-size: 3.4rem;
}

.auth-identity__logo .theme-aware-logo__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
  object-position: left center;
}

[dir="rtl"] .auth-identity__logo .theme-aware-logo__image {
  object-position: right center;
}

/* AA8 — read-only access decision center. */
.access-decision-jobs {
  border: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block-end: 1rem;
  min-inline-size: 0;
  padding: 0;
}

.access-decision-job {
  align-items: flex-start;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #d7dce3);
  border-radius: var(--radius-lg);
  color: inherit;
  display: grid;
  gap: .35rem;
  min-block-size: 8.5rem;
  padding: 1rem;
  position: relative;
  text-align: start;
  cursor: pointer;
}

.access-decision-job:hover,
.access-decision-job:focus-within,
.access-decision-job.is-active,
.access-decision-job:has(.access-decision-job__control:checked) {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 16%, transparent);
}

.access-decision-job__control {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  position: absolute;
}

.access-decision-job__number {
  align-items: center;
  background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
  border-radius: var(--radius-pill);
  color: var(--bs-primary);
  display: inline-flex;
  font-weight: 800;
  block-size: 2rem;
  inline-size: 2rem;
  justify-content: center;
}

.access-decision-job > span:last-child,
.access-decision-meta {
  color: var(--bs-secondary-color);
  font-size: .9rem;
}

.access-decision-query {
  max-inline-size: 70rem;
}

.access-decision-workspace,
.access-decision-result-layout {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.access-decision-result-context,
.access-decision-results {
  min-inline-size: 0;
}

.access-decision-context-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.access-decision-health-callout {
  display: grid;
  gap: .35rem;
  padding-block: .75rem;
}

.access-decision-answer {
  align-items: center;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #d7dce3);
  border-inline-start: .4rem solid var(--bs-secondary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  margin-block-end: 1rem;
  padding: 1.25rem;
}

.access-decision-answer.is-allowed {
  border-inline-start-color: var(--bs-success);
}

.access-decision-answer.is-denied {
  border-inline-start-color: var(--bs-danger);
}

.access-decision-answer.is-indeterminate {
  border-inline-start-color: var(--bs-warning);
}

.access-decision-answer.is-unavailable {
  border-inline-start-color: var(--bs-secondary);
}

.access-decision-answer__verdict {
  align-items: flex-start;
  display: flex;
  gap: .8rem;
}

.access-decision-answer__verdict > :first-child {
  font-size: 1.5rem;
  line-height: 1.25;
}

.access-decision-answer__verdict p {
  margin: .35rem 0 0;
  max-inline-size: 42rem;
}

.access-decision-answer__eyebrow {
  color: var(--bs-secondary-color);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.access-decision-answer h2 {
  margin: .2rem 0 0;
}

.access-decision-answer dl {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
}

.access-decision-answer dt {
  color: var(--bs-secondary-color);
  font-size: .8rem;
  font-weight: 600;
}

.access-decision-answer dd {
  font-weight: 700;
  margin: 0;
}

.access-decision-tabs {
  border-block-end: 1px solid var(--app-border, #d7dce3);
  display: flex;
  gap: .25rem;
  margin-block-end: 1rem;
  overflow-x: auto;
}

.access-decision-tabs button {
  background: transparent;
  border: 0;
  border-block-end: .2rem solid transparent;
  color: inherit;
  padding: .7rem 1rem;
  white-space: nowrap;
}

.access-decision-tabs button.is-active {
  border-block-end-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 700;
}

.access-decision-results.is-enhanced .access-decision-tab-panel:not(.is-active) {
  display: none;
}

.access-decision-tab-panel {
  scroll-margin-block-start: 6rem;
}

.access-decision-tab-panel + .access-decision-tab-panel {
  border-block-start: 1px solid var(--app-border, #d7dce3);
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
}

.access-decision-results.is-enhanced .access-decision-tab-panel + .access-decision-tab-panel {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

.access-guard-list,
.access-decision-entity-list,
.access-evidence-list {
  display: grid;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.access-guard-list li,
.access-decision-entity-list li,
.access-evidence-list li {
  align-items: center;
  background: color-mix(in srgb, var(--bs-secondary-bg) 65%, transparent);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: space-between;
  padding: .75rem;
}

.access-decision-entity-list li > span,
.access-evidence-list small {
  color: var(--bs-secondary-color);
}

.access-decision-what-if {
  margin-block-start: 1rem;
}

.access-decision-what-if summary {
  cursor: pointer;
  font-weight: 700;
}

.access-decision-loading {
  display: grid;
  gap: .4rem;
  margin-block-start: .65rem;
}

.access-decision-loading > span {
  animation: access-decision-pulse 1.2s ease-in-out infinite;
  background: var(--bs-secondary-bg);
  block-size: .7rem;
  border-radius: var(--radius);
}

.access-decision-loading > span:nth-child(2) {
  inline-size: 80%;
}

.access-decision-loading > span:nth-child(3) {
  inline-size: 60%;
}

@keyframes access-decision-pulse {
  50% {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-decision-loading > span {
    animation: none;
  }
}

.access-decision-blockers,
.access-decision-requirement-ast,
.access-decision-evidence-master details,
.access-decision-disclaimer {
  background: color-mix(in srgb, var(--bs-secondary-bg) 65%, transparent);
  border-radius: var(--radius);
  margin-block-end: 1rem;
  padding: .85rem;
}

.access-decision-blockers ol {
  margin-block-end: 0;
}

.access-decision-evidence-master {
  display: grid;
  gap: .6rem;
  margin-block-end: 1rem;
}

.access-decision-evidence-master details {
  margin-block-end: 0;
}

.access-decision-evidence-master summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}

.access-decision-evidence-master dl {
  display: grid;
  gap: .5rem;
  margin: .8rem 0 0;
}

.access-decision-evidence-master dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
}

.access-decision-evidence-master dd {
  margin: 0;
}

.access-decision-allowlist {
  display: grid;
  gap: .75rem;
}

.access-decision-allowlist label {
  align-items: center;
  display: grid;
  gap: .5rem;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 14rem);
}

.access-decision-print-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-block-end: 1rem;
}

.access-decision-print-disclaimer {
  color: var(--bs-secondary-color);
  font-size: .9rem;
}

.access-decision-observed,
.access-decision-scenario {
  margin-block-end: 1rem;
}

.access-decision-scenario__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.access-decision-scenario__grid > div {
  background: color-mix(in srgb, var(--bs-secondary-bg) 65%, transparent);
  border-radius: var(--radius);
  display: grid;
  gap: .35rem;
  padding: .85rem;
}

.access-decision-scenario__grid span {
  color: var(--bs-secondary-color);
  font-size: .85rem;
}

.access-denied-reference code {
  direction: ltr;
  unicode-bidi: isolate;
}

@media print {
  .access-decision-jobs,
  .access-decision-what-if,
  .access-decision-tabs,
  [data-who-user-form],
  [data-access-page-form],
  .access-denied-reference,
  .flow-guide-trigger,
  .flow-guide-layer,
  .btn,
  header,
  nav,
  footer {
    display: none !important;
  }

  .access-decision-tab-panel {
    display: block !important;
    break-inside: avoid;
  }

  [data-access-panel="history"] {
    display: none !important;
  }

  .access-decision-results,
  .access-decision-answer,
  .access-decision-observed,
  .access-decision-scenario {
    border-color: #777 !important;
    box-shadow: none !important;
    color: #000 !important;
  }
}

@media (min-width: 1200px) {
  .access-decision-workspace {
    grid-template-columns: minmax(16rem, 4fr) minmax(0, 8fr);
  }

  .access-decision-workspace .access-decision-jobs {
    grid-template-columns: 1fr;
  }

  .access-decision-workspace .access-decision-query,
  .access-decision-workspace .access-decision-meta {
    grid-column: 2;
  }

  .access-decision-result-layout {
    align-items: start;
    grid-template-columns: minmax(17rem, 4fr) minmax(0, 8fr);
  }

  .access-decision-result-context {
    position: sticky;
    top: 1rem;
  }

  .access-decision-query {
    inline-size: min(100%, 70rem);
  }

  .access-decision-results {
    inline-size: 100%;
  }
}

@media (max-width: 575.98px) {
  .access-decision-answer {
    align-items: stretch;
  }

  .access-decision-answer dl {
    display: grid;
    gap: .75rem;
  }

  .access-decision-allowlist label {
    grid-template-columns: 1fr;
  }

  .access-decision-results .input-group {
    display: grid;
    gap: .5rem;
  }

  .access-decision-results .input-group > .form-control,
  .access-decision-results .input-group > .btn,
  .access-decision-results form > .btn,
  .access-decision-query button[type="submit"],
  .access-decision-what-if button,
  .access-denied-reference button {
    border-radius: var(--bs-border-radius);
    inline-size: 100%;
  }
}