/* ==========================================================================
   Q88Web Design Tokens — Phase 0 (Foundation)

   Two-layer system:
   Layer 1 — Raw palette:    --raw-*       (actual values, never referenced by components)
   Layer 2 — Semantic tokens: --color-*, --surface-*, --text-*, etc. (components reference these)

   Portal overrides via body[data-portal="..."] selectors.
   Dark mode via body[data-theme="dark"] (defined here, not activated until Phase 4).

   IMPORTANT: Phase 0 defines tokens only. No existing CSS rules consume them yet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face: Inter (self-hosted variable font)

   Variable font supports weights 100-900 in a single file.
   Used by --raw-font-family-modern token.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter/Inter-Variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter/Inter-Variable-Italic.woff2') format('woff2-variations');
}

/* --------------------------------------------------------------------------
   Layer 1: Raw Palette

   These are the actual color/size values extracted from MainWhiteout.css,
   Q88Whiteout.css, and MilbrosWhiteout.css. Components should NEVER reference
   raw tokens directly — use semantic tokens instead.
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand Colors --- */
  --raw-q88-blue: #4F72A4;
  --raw-q88-navy: #003366;
  --raw-q88-navy-dark: #2D3663;
  --raw-milbros-teal: #0d9488;     /* QEN-8704 — aligned to Figma base/primary (teal-600) so Milbros buttons match Q88 refresh, not legacy #0D4D4D dark olive */
  --raw-milbros-dark: #0f766e;     /* QEN-8704 — paired teal-700 so button hover stays in the teal ramp (was #09324E navy, would clash with teal-600 base) */
  --raw-milbros-muted: #51777F;

  /* --- Accent (Figma Phase 2 — teal/cyan) --- */
  --raw-q88-accent: #00B8D4;
  --raw-q88-accent-hover: #0097A7;
  --raw-q88-accent-light: #E0F7FA;
  --raw-q88-badge: var(--raw-cyan-600);    /* alias — same as cyan-600 */

  /* --- Slate (shadcn/Figma base neutral) --- */
  --raw-slate-50: #f8fafc;
  --raw-slate-100: #f1f5f9;
  --raw-slate-200: #e2e8f0;
  --raw-slate-300: #cbd5e1;     /* QEN-8704 — fills gap between border-default and border-strong */
  --raw-slate-400: #94a3b8;     /* QEN-8704 — muted icons / disabled text */
  --raw-slate-500: #475569;
  --raw-slate-700: #334155;     /* QEN-8704 — secondary text strength (Figma `base/secondary-foreground` alt) */
  --raw-slate-800: #1e293b;
  --raw-slate-900: #0f172a;
  --raw-cyan-600: #0891b2;
  --raw-teal-50:  #f0fdfa;      /* QEN-8704 — brand-tint hover bg (banner / row highlight) */
  --raw-teal-600: #0d9488;
  --raw-teal-700: #0f766e;
  --raw-indigo-600: #4F46E5;    /* Veson indigo (Tailwind indigo-600) — Q88 refresh primary brand */
  --raw-indigo-700: #4338CA;    /* Tailwind indigo-700 — darker-indigo hover for self-contained islands (pre-auth pages w/o the opacity-hover infra) */
  --raw-indigo-50:  #eef2ff;    /* Tailwind indigo-50 — brand-tint row/banner hover bg (indigo counterpart of --raw-teal-50) */
  --raw-red-50:   #fef2f2;      /* QEN-8704 — destructive surface bg (error row, danger banner) */
  --raw-blue-50:  #eff6ff;      /* QEN-8704 — text on brand (button labels on teal) */
  --raw-neutral-200: #e5e5e5;

  /* --- Blues --- */
  --raw-blue-deep: #000099;
  --raw-blue-hover: #c9e2fc;
  --raw-blue-hover-milbros: #e5f1fd;
  --raw-blue-accent: #73c2e1;
  --raw-blue-section: #b4c6e7;

  /* --- Neutrals --- */
  --raw-white: #FFFFFF;
  --raw-gray-50: #f8f8f8;
  --raw-gray-100: #eeeeee;
  --raw-gray-150: #f5f5f5;
  --raw-gray-300: #dddddd;
  --raw-gray-400: #cccccc;
  --raw-gray-500: #adb9c9;
  --raw-gray-550: #adadad;
  --raw-gray-600: #999999;
  --raw-gray-700: #666666;
  --raw-gray-800: #4d4d4d;
  --raw-black: #000000;

  /* --- Status --- */
  --raw-red-600: #FF0000;
  --raw-red-500: #f51919;
  --raw-red-400: #d65f5f;
  --raw-yellow-200: #ffffc0;
  --raw-green-200: #ccffcc;
  --raw-green-300: #009900;
  --raw-green-yellowish: #b5d95d;
  --raw-lavender-pale: #EEDDEE;
  --raw-red-badge: #bf1313;
  --raw-amber-300: #fcd34d;
  --raw-amber-500: var(--raw-orange-notice);    /* alias — historic name mapped to actual orange (#FF8000, not Tailwind amber-500) */

  /* --- Phase 4: Additional palette --- */
  --raw-blue-popup: var(--raw-blue-hover);      /* alias — same value (#c9e2fc) */
  --raw-yellow-highlight: var(--raw-yellow-200); /* alias — same value (#ffffc0) */
  --raw-yellow-notice: #FFFFCC;
  --raw-yellow-modal: #ffffdd;
  --raw-orange-notice: #FF8000;
  --raw-orange-env: #fa901e;
  --raw-green-env: #6fff72;
  --raw-red-error-border: #fb1919;
  --raw-blue-sign-in-q88: #30B0D5;
  --raw-purple-sign-in-dry: #7874B5;
  --raw-gold-sign-in-milbros: #EBAD29;

  /* --- Tailwind named palette aliases (DESIGN.md status colors).
     Suffixed `-tailwind-` to avoid collision with legacy --raw-red-600 (#FF0000)
     and --raw-amber-500 (#FF8000) which ship CSS-color keywords, not Tailwind hexes. */
  --raw-red-tailwind-600: #dc2626;
  --raw-red-tailwind-700: #b91c1c;
  --raw-amber-tailwind-100: #fef3c7;
  --raw-amber-tailwind-500: #f59e0b;
  --raw-amber-tailwind-800: #92400e;
  --raw-green-tailwind-600: #16a34a;
  --raw-blue-tailwind-700: #1d4ed8;

  /* --- Vessel Status Dots (semantic business data — same in dark mode) --- */
  --raw-status-dot-red: #BB0000;
  --raw-status-dot-yellow: #FFC70E;
  --raw-status-dot-green: #82C400;
  --raw-status-dot-orange: #FF6633;
  --raw-status-dot-blue: #3366FF;
  --raw-status-dot-black: var(--raw-black);    /* alias — same as raw-black */
  --raw-status-dot-pink: #F87ED4;

  /* --- Dark Mode Palette (Figma All Hands reference) --- */
  --raw-dark-surface-0: #13151A;
  --raw-dark-surface-1: #1C1E26;
  --raw-dark-surface-2: #252830;
  --raw-dark-surface-3: #2E3039;
  --raw-dark-border: #3A3D47;
  --raw-dark-text-primary: #E8E8EC;
  --raw-dark-text-secondary: #9A9BA5;
  --raw-dark-text-muted: #6B6D78;

  /* --- Typography --- */
  --raw-font-family-legacy: tahoma, helvetica, arial, sans-serif;
  --raw-font-family-modern: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --raw-font-family-milbros: var(--raw-font-family-modern);    /* alias — Milbros uses Inter same as refresh */
  --raw-font-size-2xs: 9px;
  --raw-font-size-sm: 11px;
  --raw-font-size-base: 12px;
  --raw-font-size-xl: 20px;

  /* --- Spacing --- */
  --raw-space-1: 2px;
  --raw-space-2: 4px;
  --raw-space-3: 6px;
  --raw-space-4: 8px;
  --raw-space-5: 10px;
  --raw-space-6: 12px;
  --raw-space-8: 16px;
  --raw-space-12: 24px;
  --raw-space-16: 32px;

  /* --- Borders --- */
  --raw-radius-sm: 4px;
  --raw-radius-md: 8px;
  --raw-radius-lg: 10px;
  --raw-radius-xl: 12px;
  --raw-radius-full: 9999px;

  /* --- Shadows --- */
  --raw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --raw-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --raw-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* --- Z-Index Scale (header / sidebar only — used by layout) --- */
  --raw-z-header: 900;
  --raw-z-sidebar: 800;
}

/* --------------------------------------------------------------------------
   Layer 2: Semantic Tokens — Light Theme (Default)

   Components reference ONLY these tokens. The indirection allows:
   1. Portal overrides (Milbros teal vs Q88 blue)
   2. Theme switching (light -> dark)
   3. Gradual migration (replace hex values one at a time)
   -------------------------------------------------------------------------- */
:root {
  /* --- Primary (brand) --- */
  --primary: var(--raw-cyan-600);
  /* QEN-8831: brand RGB triple for translucent tints (focus rings / hover glows),
     consumed as rgba(var(--primary-tint), α). Defaulted here (indigo — the Q88
     brand) so it is NEVER undefined, even in no-sidebar-nav iframe popups
     (e.g. body.popup-attach-docs) where a missing token would collapse the
     box-shadow. body[data-portal="milbros"] overrides it to teal below. */
  --primary-tint: 79, 70, 229;
  --primary-foreground: var(--raw-white);
  --primary-dark: var(--raw-q88-navy);
  --accent: var(--raw-q88-navy-dark);

  /* --- Surfaces --- */
  --background: var(--raw-white);
  --card: var(--raw-white);
  --card-subtle: var(--raw-slate-50);
  --accent-foreground: var(--raw-slate-800);
  --secondary: var(--raw-gray-150);
  --card-raised: var(--raw-white);
  --disabled: var(--raw-gray-400);
  --muted: var(--raw-slate-100);
  --input-background: var(--raw-white);
  --surface-highlight: var(--raw-yellow-highlight);
  --surface-notice: var(--raw-yellow-notice);
  --surface-modal: var(--raw-yellow-modal);
  --surface-popup: var(--raw-blue-popup);

  /* --- Legacy surface aliases (origin/dev names, consumed by Milbros + other portals) --- */
  --surface-raised: var(--raw-white);
  --surface-hover: var(--raw-gray-100);
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* --- Status (additional) --- */
  --status-notice: var(--raw-orange-notice);
  --status-error-border: var(--raw-red-error-border);

  /* --- Environment banners --- */
  --env-dev-bg: var(--raw-orange-env);
  --env-staging-bg: var(--raw-green-env);

  /* --- Vessel Status Dots --- */
  --status-dot-red: var(--raw-status-dot-red);
  --status-dot-yellow: var(--raw-status-dot-yellow);
  --status-dot-green: var(--raw-status-dot-green);
  --status-dot-orange: var(--raw-status-dot-orange);
  --status-dot-blue: var(--raw-status-dot-blue);
  --status-dot-black: var(--raw-status-dot-black);
  --status-dot-pink: var(--raw-status-dot-pink);

  /* --- Tailwind status color (DESIGN.md §1) — only --red-600 is consumed */
  --red-600: var(--raw-red-tailwind-600);

  /* --- Text --- */
  --foreground: var(--raw-slate-900);
  --secondary-foreground: var(--raw-gray-700);
  --muted-foreground: var(--raw-slate-500);
  --disabled-foreground: var(--raw-gray-400);
  --link: var(--raw-cyan-600);

  /* --- Borders --- */
  --border: var(--raw-neutral-200);
  --border-subtle: var(--raw-gray-300);
  --border-strong: var(--raw-gray-700);
  --input: var(--raw-neutral-200);
  --border-light: var(--raw-gray-100);
  --border-accent: var(--raw-blue-accent);

  /* --- Legacy aliases (consumed by MainWhiteout/Q88Whiteout/GridWhiteout on dev) ---
     Keep until all consumers are migrated to new names. Values must match
     the ORIGINAL definitions so non-sidebar pages look identical to production. */
  --brand-primary: var(--raw-q88-blue);
  --brand-dark: var(--raw-q88-navy);
  --brand-accent: var(--raw-q88-navy-dark);
  --text-on-brand: var(--raw-white);
  --text-primary: var(--raw-black);
  --text-secondary: var(--raw-gray-700);
  --text-muted: var(--raw-gray-600);
  --text-disabled: var(--raw-gray-400);
  --text-link: var(--raw-q88-navy);
  --surface-page: var(--raw-white);
  --surface-card: var(--raw-gray-50);
  --surface-disabled: var(--raw-gray-400);
  --surface-secondary: var(--raw-gray-150);
  --surface-input: var(--raw-white);
  --border-default: var(--raw-gray-500);
  --border-input: var(--raw-gray-550);

  /* --- Legacy Link --- */
  --text-link-legacy: var(--raw-blue-deep);

  /* --- Grid/Table (keep names) --- */
  --grid-header-bg: var(--raw-q88-navy-dark);
  --grid-row-hover: var(--raw-gray-300);
  --grid-row-focus: var(--raw-yellow-200);
  --grid-border: var(--raw-white);

  /* --- Status --- */
  --status-error: var(--raw-red-600);
  --status-error-bg: var(--raw-red-400);
  --status-warning: var(--raw-yellow-200);
  --status-success: var(--raw-green-200);
  --status-success-text: var(--raw-green-300);
  --status-warning-text: var(--raw-amber-500);
  --status-warning-subtle-bg: var(--raw-amber-tailwind-100);
  --status-warning-subtle-text: var(--raw-amber-tailwind-800);
  --surface-accent-hover: var(--raw-q88-accent-light);

  /* --- Buttons (primary only — secondary is direct-styled per-page) --- */
  --button-primary-bg: var(--raw-q88-navy);
  --button-primary-text: var(--raw-white);
  --button-primary-hover: var(--raw-q88-navy-dark);

  /* --- Navigation (old top nav) --- */
  --nav-hover: var(--raw-q88-blue);
  --nav-submenu-border-q88: var(--raw-green-yellowish);
  --nav-submenu-item-border-q88: var(--raw-lavender-pale);
  --nav-submenu-text-q88: var(--raw-gray-700);
  --notification-badge: var(--raw-red-badge);

  /* --- Typography --- */
  --font-family: var(--raw-font-family-legacy);
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --line-height-sm:   1.25rem;

  /* --- Spacing --- */
  --space-xs: var(--raw-space-1);
  --space-sm: var(--raw-space-3);
  --space-md: var(--raw-space-5);

  /* --- Sidebar --- */
  --sidebar-width-collapsed: 48px;
  --sidebar-width-expanded: 256px;
  --sidebar: var(--raw-slate-50);
  --sidebar-foreground: var(--raw-slate-900);
  --sidebar-icon: var(--raw-dark-text-secondary);
  --sidebar-accent: var(--raw-slate-100);
  --sidebar-accent-foreground: var(--raw-slate-800);
  --sidebar-brand: var(--primary);
  --sidebar-muted-foreground: var(--raw-slate-500);
  --sidebar-border: var(--raw-slate-200);
  --sidebar-submenu-foreground: var(--raw-gray-700);
  --sidebar-tooltip: var(--raw-gray-800);
  --sidebar-tooltip-foreground: var(--raw-white);
}

/* --------------------------------------------------------------------------
   Shared grid-page tokens (QEN-8865)

   grid.css/terminal-vetting.css/vessel-management.css/usermanagement.css/
   VesselsReport.css/viewship.css each redeclare these under their own
   body.page-X scope. Any OTHER page that consumes them (e.g. the global
   Img-Std-EditV2/Img-Std-Edit hover swap in components.css) got an
   undefined var() and silently fell back to its hardcoded literal
   (#0d9488 teal) — reproduced on Milbros Library.aspx's Edit-pencil hover.

   Declared here on the bare `body` element (specificity 0,0,1) rather than
   `:root`: `:root` is the <html> element, one level above where the portal
   (body[data-portal]) and theme overrides of --primary/--button-primary-hover
   apply, so a var() reference resolved at :root freezes to the un-overridden
   base value before it inherits down. Declaring on `body` resolves the
   var()s using body's own cascaded tokens (portal-correct), while staying
   lower-specificity than every body.page-X block above so those keep
   winning unchanged where they already opt in. */
body {
  --q88-grid-primary: var(--primary);
  --q88-grid-primary-hover: var(--button-primary-hover);
  --q88-grid-primary-fg: var(--raw-white);
  --q88-grid-muted-fg: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Portal Overrides: Q88 (Figma frontend refresh)

   Scoped to body[data-portal="q88"] (PortalId 0 and 1, per Default.master.cs)
   so Q88-refresh token redefinitions do NOT leak into Milbros or other
   portals if tokens.css is loaded there. :root values match origin/dev.
   -------------------------------------------------------------------------- */
body[data-portal="q88"] {
  /* --- Dark Mode Palette (Figma All Hands refresh) ---
     Rebinds raw dark surface tokens for Q88; consumed by
     body[data-theme="dark"][data-portal="q88"] below via
     CSS custom-property inheritance. */
  --raw-dark-surface-0: #060f18;
  --raw-dark-surface-1: #060f18;
  --raw-dark-surface-2: #091725;
  --raw-dark-surface-3: #0f2035;

  /* --- Surfaces (Figma refresh) --- */
  --surface-section: var(--raw-blue-section);

  /* --- Grid/Table (Figma refresh) --- */
  --grid-row-focus: var(--raw-q88-accent-light);

  /* --- Buttons (Figma refresh) --- */
  --button-primary-bg: var(--raw-cyan-600);
  --button-primary-hover: var(--raw-q88-accent-hover);

  /* --- Sidebar (Figma refresh) --- */
  /* Width tokens promoted to :root (QEN-8704) so Milbros gets the same
     256/48 chrome as Q88 — both portals share the refreshed sidebar. */
  --sidebar-icon: var(--raw-slate-500);
}

/* Figma-aligned radius (md=8, lg=10) is now the :root default; dashboard +
   sidebar scopes no longer need a rebind. Removed in QEN-8290 Phase G T22/T23. */

/* --------------------------------------------------------------------------
   Refresh scope: body.sidebar-nav — portal-agnostic neutral palette

   Applied whenever EnableRefreshedFrontend is on (PortalId 0/1/2). Holds
   the SLATE-scale + neutral semantic aliases that look the same on every
   portal (text, borders, muted surfaces, gray-tints).

   Brand-aware tokens (--brand-primary, --brand-primary-hover, --text-link,
   --text-on-brand, --surface-hover-brand) live in portal-specific blocks
   below so Q88 (teal) and Milbros (milbros-teal) each get the right value.

   QEN-8704 tokenization pass (2026-05-14):
   - Promoted slate-scale neutrals here from .q88-refresh so Milbros refresh
     pages (FromToCleaning, DateCalculator, etc.) inherit them too.
   - Re-bound border tokens from neutral-200 (#e5e5e5) to slate-200 (#e2e8f0)
     to match Figma `base/border` (was a drift from QEN-8290 carry-over).
   -------------------------------------------------------------------------- */
body.sidebar-nav {
  --font-family: var(--raw-font-family-modern);

  /* Surfaces — slate scale per Figma */
  --surface-card: var(--raw-slate-50);
  --surface-muted: var(--raw-slate-100);                  /* chip/badge/muted-row bg */
  --surface-error: var(--raw-red-50);                     /* error row / destructive surface bg */

  /* Borders — slate-200 default, slate-300 strong */
  --border-default: var(--raw-slate-200);
  --border-input: var(--raw-slate-200);
  --border-subtle: var(--raw-slate-200);
  --border-strong: var(--raw-slate-300);                  /* emphasis dividers / focused outlines */

  /* Text — slate scale */
  --text-primary: var(--raw-slate-900);
  --text-secondary: var(--raw-slate-700);                 /* between primary and muted — body copy with emphasis */
  --text-muted: var(--raw-slate-500);                     /* labels / metadata */
  --text-tertiary: var(--raw-slate-400);                  /* disabled / placeholder / quiet icons */
  --foreground: var(--raw-slate-900);
  --muted: var(--raw-gray-150);

  /* Brand unification (QEN-8704): on every refresh page (sidebar-nav on),
     rebind --primary + button-primary-* from cyan/navy legacy to teal so
     components.css, EditProfile.css, navigation.css, questionnaire.css
     (which consume var(--primary) / var(--button-primary-*)) match the
     teal MainWhiteout-driven var(--brand-primary) consumers. Specificity
     0,1,1 == body[data-portal="q88"] but body.sidebar-nav appears later
     in source order, so it wins on refresh pages. body[data-portal="milbros"]
     keeps higher specificity (0,2,1) and overrides for Milbros refresh.

     QEN-8831 — rebound base brand color from teal to indigo (Veson brand,
     Tailwind indigo-600). --button-primary-hover/--brand-primary-hover are set
     EQUAL to the base color (no distinct darker shade) ON PURPOSE: Q88 hover
     feedback is now a `opacity: 0.9` fade, not a color swap. Keeping the tokens
     equal to the base means every existing `:hover { background: var(--*-hover) }`
     rule collapses to a harmless no-op on Q88, so the single central opacity
     rule in components.css (immediately after the primary-button hover block)
     is the ONLY visible Q88 hover feedback — no per-element opacity needed.
     Milbros is unaffected: body[data-portal="milbros"] below keeps its --*-hover
     tokens at milbros-dark, so the SAME color-swap rules still darken teal there,
     and the opacity rule is scoped :not([data-portal="milbros"]) out of it. */
  --primary: var(--raw-indigo-600);
  --button-primary-bg: var(--raw-indigo-600);
  --button-primary-hover: var(--raw-indigo-600);
  --button-primary-text: var(--raw-blue-50);

  /* Brand-aware tokens (QEN-8801) — promoted here from `.q88-refresh` below.
     `.q88-refresh` is added by Default.Master.cs:441 ONLY on the Home tab (and a
     handful of explicitly-listed pages), so on every OTHER refreshed page these
     fell back to the legacy navy `:root --brand-primary` (L261) and an UNDEFINED
     `--brand-primary-hover`. Any rule doing `:hover { background: var(--brand-primary-hover) }`
     then collapsed `background` to transparent, so the (near-white-text) primary
     button VANISHED on hover (ManageEmailPackage Save, Email.aspx Send, etc.).
     Defining them at `body.sidebar-nav` — the scope present on EVERY refresh page —
     completes the QEN-8704 brand unification already done above for --primary /
     --button-primary-* / --link. Milbros overrides these in
     body[data-portal="milbros"] below (later source order wins the 0,1,1 tie);
     legacy pages (body:not(.sidebar-nav)) are untouched and keep navy. */
  --brand-primary: var(--raw-indigo-600);
  --brand-primary-hover: var(--raw-indigo-600);
  --text-link: var(--raw-indigo-600);                     /* QEN-8831: links now indigo (full-indigo Q88 brand) */
  --text-on-brand: var(--raw-blue-50);                    /* Figma base/primary-foreground */
  --surface-hover-brand: var(--raw-indigo-50);            /* row hover with brand tint (indigo) */

  /* QEN-8776 / QEN-8831 — content hyperlinks use the brand across every refresh
     page. --link is cyan-600 (#0891b2) at :root; rebind to indigo-600 here (was
     teal-600; flipped in QEN-8831 when links joined buttons on the indigo brand)
     so plain <a> links (driven by the global content-link rule in components.css)
     match the brand instead of MainWhiteout's navy --brand-primary. Scoped to
     body.sidebar-nav (confirmed present on every refresh page) rather than
     .q88-refresh, which does not reach the document root. Milbros overrides
     --link to milbros-teal below (later source order wins on a specificity tie). */
  --link: var(--raw-indigo-600);
  --link-hover: var(--raw-indigo-700);
}

/* --- Q88-specific refresh brand tokens (Q88 portal — teal palette) ------
   QEN-8801: the brand-aware tokens (--brand-primary, --brand-primary-hover,
   --text-link, --text-on-brand, --surface-hover-brand) were MOVED up into the
   `body.sidebar-nav` block, because `.q88-refresh` is Home-tab-only and these
   need to resolve on EVERY refreshed page (otherwise off-Home pages fell back
   to navy and the hover token was undefined → buttons vanished on hover).
   Nothing remains to define here: `.q88-refresh` never appears without
   `body.sidebar-nav` (Default.Master.cs:437 always emits "sidebar-nav" first),
   so the body.sidebar-nav values cover Home too. Milbros keeps its own values
   via body[data-portal="milbros"] below. */

/* --- Sidebar brand: follow the brand primary color (QDM logo tile) --- */
.sidebar-nav {
  --sidebar-brand: var(--primary);
}

/* --------------------------------------------------------------------------
   Portal Overrides: Milbros
   -------------------------------------------------------------------------- */
body[data-portal="milbros"] {
  /* QEN-8831 follow-up — Milbros rebrand: adopt the SAME Veson indigo brand
     Q88 got (see body.sidebar-nav above). Only the refresh-scoped brand/link/
     button tokens move to indigo — --primary-dark/--accent/--brand-dark/
     --brand-accent are the OLDER legacy-chrome token family (MainWhiteout/
     GridWhiteout navy-vs-teal skin), which the original Q88 indigo rebrand
     never touched either (Q88 keeps navy there); left as milbros-dark/muted
     so legacy (non-refresh) Milbros chrome is unchanged. --grid-row-hover
     also untouched: --raw-blue-hover-milbros is a generic legacy hover-blue
     shared with non-Milbros files, not a brand color. */
  --primary: var(--raw-indigo-600);
  --primary-dark: var(--raw-milbros-dark);
  --accent: var(--raw-milbros-muted);
  --primary-tint: 79, 70, 229;   /* indigo-600 RGB triple — matches :root default, keeps rgba(var(--primary-tint),α) tints indigo on Milbros too */

  /* Brand aliases for Milbros — counterpart to .q88-refresh block above.
     Refresh pages on Milbros (body.sidebar-nav, PortalId 2) consume these
     via the same semantic names as Q88 refresh pages do via .q88-refresh.
     QEN-8704: added --brand-primary-hover + --surface-hover-brand so
     FromToCleaning.aspx (Milbros) doesn't fall back to undefined values.
     QEN-8831 — --brand-primary-hover set EQUAL to the base color (indigo),
     same opacity-fade reasoning as body.sidebar-nav above; the central
     hover-opacity rule in components.css now covers Milbros too. */
  --brand-primary: var(--raw-indigo-600);
  --brand-primary-hover: var(--raw-indigo-600);
  --brand-dark: var(--raw-milbros-dark);
  --brand-accent: var(--raw-milbros-muted);
  --text-link: var(--raw-indigo-600);
  --text-on-brand: var(--raw-blue-50);                    /* matches Q88 button-label color exactly */
  --surface-hover-brand: var(--raw-indigo-50);            /* row hover with brand tint (indigo, matches Q88) */

  --grid-row-hover: var(--raw-blue-hover-milbros);
  --nav-hover: var(--raw-indigo-600);
  --link: var(--raw-indigo-600);

  --font-family: var(--raw-font-family-milbros);

  --button-primary-bg: var(--raw-indigo-600);
  --button-primary-hover: var(--raw-indigo-600);
  --button-primary-text: var(--raw-blue-50);
}

/* --------------------------------------------------------------------------
   Dark Theme (Phase 4 — defined now, not activated)

   Activated by adding data-theme="dark" to <body>.
   When Phase 4 begins, only the theme toggle mechanism needs building.
   -------------------------------------------------------------------------- */
body[data-theme="dark"] {
  --surface-page: var(--raw-dark-surface-0);
  --surface-card: var(--raw-dark-surface-1);
  --surface-raised: var(--raw-dark-surface-2);
  --surface-overlay: rgba(0, 0, 0, 0.7);
  --surface-input: var(--raw-dark-surface-2);

  --text-primary: var(--raw-dark-text-primary);
  --text-secondary: var(--raw-dark-text-secondary);
  --text-muted: var(--raw-dark-text-muted);
  --text-disabled: var(--raw-dark-text-muted);
  --text-on-brand: var(--raw-dark-text-primary);
  --text-link: var(--raw-blue-accent);

  --surface-secondary: var(--raw-dark-surface-2);
  --surface-disabled: var(--raw-dark-surface-3);
  --surface-hover: var(--raw-dark-surface-2);

  --border-default: var(--raw-dark-border);
  --border-subtle: var(--raw-dark-surface-3);
  --border-strong: var(--raw-dark-text-muted);
  --border-input: var(--raw-dark-border);
  --border-light: var(--raw-dark-surface-2);
  --border-accent: var(--raw-blue-accent);

  --text-link-legacy: var(--raw-blue-accent);

  --status-error: var(--raw-red-500);
  --status-error-bg: var(--raw-red-400);
  --status-warning: #4a4520;
  --status-success: #1a3d1a;

  --grid-row-focus: #4a4520;
  --grid-header-bg: var(--raw-dark-surface-2);
  --grid-row-hover: var(--raw-dark-surface-3);
  --grid-border: var(--raw-dark-border);

  --button-primary-bg: var(--raw-q88-blue);
  --button-primary-text: var(--raw-white);
  --button-primary-hover: var(--raw-blue-accent);

  --nav-hover: var(--raw-dark-surface-2);
}

/* Q88 dark mode — Figma refresh overrides scoped to q88 portal
   (keeps dark-mode redefinitions from leaking to Milbros if dark theme toggled there) */
body[data-theme="dark"][data-portal="q88"] {
  --button-primary-bg: var(--raw-q88-accent);
  --button-primary-hover: var(--raw-q88-accent-hover);
  --border-accent: var(--raw-q88-accent);
  --grid-row-focus: var(--raw-dark-surface-3);
  --border-light: var(--raw-dark-surface-3);

  /* Q88-refresh dark additions: not shared with Milbros dark mode */
  --background: var(--raw-dark-surface-0);
  --card: var(--raw-dark-surface-1);
  --card-subtle: var(--raw-dark-surface-1);
  --card-raised: var(--raw-dark-surface-2);
  --input-background: var(--raw-dark-surface-2);
  --foreground: var(--raw-dark-text-primary);
  --secondary-foreground: var(--raw-dark-text-secondary);
  --muted-foreground: var(--raw-dark-text-muted);
  --disabled-foreground: var(--raw-dark-text-muted);
  --primary-foreground: var(--raw-dark-text-primary);
  --link: var(--raw-blue-accent);
  --secondary: var(--raw-dark-surface-1);
  --disabled: var(--raw-dark-surface-2);
  --muted: var(--raw-dark-surface-2);
  --border: var(--raw-dark-border);
  --input: var(--raw-dark-border);
  --sidebar: var(--raw-dark-surface-0);
  --sidebar-foreground: var(--raw-dark-text-primary);
  --sidebar-icon: var(--raw-dark-text-secondary);
  --sidebar-accent: var(--raw-dark-surface-2);
  --sidebar-accent-foreground: var(--raw-dark-text-primary);
  --sidebar-brand: var(--primary);
  --sidebar-muted-foreground: var(--raw-dark-text-muted);
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-submenu-foreground: var(--raw-dark-text-secondary);
  --sidebar-tooltip: var(--raw-dark-surface-3);
  --sidebar-tooltip-foreground: var(--raw-dark-text-primary);
  --surface-highlight: var(--raw-dark-surface-3);
  --surface-notice: var(--raw-dark-surface-2);
  --surface-modal: var(--raw-dark-surface-2);
  --surface-popup: var(--raw-dark-surface-2);
  --surface-section: var(--raw-dark-surface-2);
  --brand-primary: var(--raw-q88-accent);
  --brand-dark: var(--raw-dark-surface-2);
  --status-error-border: var(--raw-red-error-border);
  --status-notice: var(--raw-orange-notice);
  --status-success-text: var(--raw-green-200);
  --status-warning-text: var(--raw-amber-300);
  --surface-accent-hover: var(--raw-dark-surface-3);
  --env-dev-bg: var(--raw-orange-env);
  --env-staging-bg: var(--raw-green-env);
}

/* Milbros dark mode inherits dark theme base + milbros brand overrides.
   QEN-8831 — mirrors body[data-theme="dark"][data-portal="q88"] exactly
   (q88-accent, not indigo — dark-mode buttons use the higher-contrast cyan
   accent on both portals). --nav-hover no longer overridden: falls back to
   the base body[data-theme="dark"] value, same as Q88 dark does. */
body[data-theme="dark"][data-portal="milbros"] {
  --button-primary-bg: var(--raw-q88-accent);
  --button-primary-hover: var(--raw-q88-accent-hover);
}

/* === Milbros — Commodity Detail (refresh) ============================ */
:root {
  /* Property-card body fill (§12.7.1) */
  --commodity-card-fill: #f8fafc;

  /* Category/legend bullet palette (§12.12.3) */
  --commodity-bullet-default:  #94a3b8;  /* slate-400  — Handling, General, Product Name Data */
  --commodity-bullet-heating:  #60a5fa;  /* blue-400   — Heating, Trade Name/Specification Data */
  --commodity-bullet-private:  #15803d;  /* green-700  — Private Data */

  /* Property text colors (§12.7.2) */
  --commodity-value-link:      #4F46E5;  /* indigo-600 — underlined linked-data values (QEN-8776: blue→teal; QEN-8831: teal→indigo, Milbros rebrand) */
  --commodity-label-muted:     #666;     /* property labels (Specific Gravity:, Flash Point:) */

  /* Header / legend meta (§12.5.2, §12.8.3) */
  --commodity-meta-muted:      var(--raw-gray-800);    /* same as #4d4d4d */
  --commodity-legend-bg:       #f9f9f9;
}

/* ==========================================================================
   Lucide icon glyphs — single source of truth for inline SVG data URIs.

   Use as a CSS mask so the glyph inherits the consuming element's `color`:
       mask: var(--icon-square-pen) no-repeat center / 16px 16px;
       background-color: currentColor;

   The `stroke='black'` value INSIDE the URI is irrelevant in mask context
   (masks use alpha, not color) — `currentColor` consumers still recolor
   correctly. Do NOT use these tokens with `content:` or `background-image:`
   without a fill/stroke that matches the visible color; for those cases
   either keep the URI inline or add a separate `--icon-*-fg-{color}` token.

   Naming: matches Lucide v0.x icon names verbatim (square-pen, chevron-down,
   ellipsis-vertical, triangle-alert, circle-help). When a new icon ships in
   Figma, swap the URI here and every consumer updates automatically.
   ========================================================================== */
:root {
  --icon-square-pen:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E");
  --icon-chevron-down:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-up:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --icon-chevron-left:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-x:                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --icon-search:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --icon-check:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-plus:              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --icon-calendar:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  --icon-ellipsis-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
  --icon-triangle-alert:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --icon-circle-help:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --icon-info:              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --icon-mail:              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}