/* ════════════════════════════════════════════════════════════════════════
 * ADS Design System Theme — Single Source of Truth
 * ────────────────────────────────────────────────────────────────────────
 * Linked from every harps*.html. Activated by `html[data-theme="ads"]`.
 *
 * Architecture:
 *   - EDL Light = :root tokens (default)
 *   - EDL Dark  = [data-theme="dark"]  token overrides (in each HTML file)
 *   - ADS       = [data-theme="ads"]   token overrides (THIS FILE)
 *
 * Editing this file updates ADS theme across all 400 HARPS pages at once.
 * Source of truth: Figma — Ads Design System (file DJb3yM8aOQjIAbTQ9Cd8Mi)
 *   Color  Tokens: node 2048-18
 *   Typography:    node 1308-40
 * ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

html[data-theme="ads"] {
  /* ═══ EDL Token Overrides ════════════════════════════════════════════
     Re-mapped so existing components automatically pick up ADS values.
     Layout, sizing, and behavior remain unchanged.

     `html[...]` selector is used (instead of just `[data-theme="ads"]`) so
     these tokens defeat the inline `:root { --token: ... }` blocks that
     each HARPS page declares after this stylesheet link. (Specificity 0,0,1,1
     beats 0,0,1,0.) */

  /* Gray scale — text & surface neutrals */
  --gray-95: #1E2528; /* Gray 600 — primary text */
  --gray-80: #1A2023; /* Gray 700 */
  --gray-70: #21292D; /* Gray 500 */
  --gray-60: #51585B; /* Gray 100 — secondary text */
  --gray-50: #6B7378; /* mid-emphasis */
  --gray-40: #A3A8AB;
  --gray-30: #C8CCCD;
  --gray-20: #D8DCDD;
  --gray-10: #ECEEEE; /* Gray 50 — light surface */
  --gray-05: #F4F5F6; /* Page background */

  /* Indigo — brand & active states */
  --indigo-70: #4045C2; /* Brand Indigo 300 */
  --indigo-30: #6567CE; /* Indigo 100 */
  --indigo-10: #E2E3F2; /* Indigo 50 */

  /* Surface */
  --white: #FFFFFF;
  --black: #000000;

  /* Typography */
  --font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: var(--font-family);
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Radius — per Figma component tokens. Button is 6px (button/size/default/
     radius), Field/Select/Dropdown is 8px, Card is 12px, Pill is 999px. */
  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-button: 6px;
  --radius-field: 8px;

  /* ═══ ADS-only tokens (additions) ════════════════════════════════════
     Use these in ADS-specific component overrides further down. */

  /* Brand */
  --ads-brand: #4045C2;
  --ads-brand-hover: #3B3FBA;
  --ads-brand-active: #363AAB;
  --ads-brand-wash: #E2E3F2;

  /* Chrome */
  --ads-page-bg: #F4F5F6;
  --ads-card-bg: #FFFFFF;
  --ads-card-border: rgba(15, 18, 20, 0.10);
  --ads-section-bg: #F5F5F5;
  --ads-divider: #E0E0E0;
  --ads-shadow-card: 0 1px 2px rgba(15, 18, 20, 0.04), 0 0 0 1px rgba(15, 18, 20, 0.06);

  /* Full hue ramps (for components that need specific steps) */
  --ads-gray-50:  #ECEEEE;
  --ads-gray-100: #51585B;
  --ads-gray-200: #3B4347;
  --ads-gray-300: #30383C;
  --ads-gray-400: #252E32;
  --ads-gray-500: #21292D;
  --ads-gray-600: #1E2528;
  --ads-gray-700: #1A2023;
  --ads-gray-800: #161C1E;
  --ads-gray-900: #121719;

  --ads-red-50:  #F8E0E2;
  --ads-red-100: #DB5461;
  --ads-red-200: #C54C57;
  --ads-red-300: #AF434E;
  --ads-red-400: #993B44;
  --ads-red-500: #83323A;
  --ads-red-600: #6E2A31;
  --ads-red-700: #582227;
  --ads-red-800: #42191D;
  --ads-red-900: #321318;

  --ads-orange-50:  #FAE2C8;
  --ads-orange-100: #F5BB7A;
  --ads-orange-200: #EFA85A;
  --ads-orange-300: #E89740;
  --ads-orange-400: #D5832A;
  --ads-orange-500: #B86F1E;
  --ads-orange-600: #9A5C1A;
  --ads-orange-700: #7B4915;
  --ads-orange-800: #5C3711;
  --ads-orange-900: #42270B;

  --ads-yellow-50:  #F9F2D5;
  --ads-yellow-100: #F4DA7C;
  --ads-yellow-200: #DCC470;
  --ads-yellow-300: #C3AE63;
  --ads-yellow-400: #AB9957;
  --ads-yellow-500: #92834A;
  --ads-yellow-600: #7A6D3E;
  --ads-yellow-700: #625732;
  --ads-yellow-800: #494125;
  --ads-yellow-900: #332D1A;

  --ads-green-50:  #E0EDE5;
  --ads-green-100: #6CB288;
  --ads-green-200: #61A07A;
  --ads-green-300: #568E6D;
  --ads-green-400: #4C7D57;
  --ads-green-500: #416B52;
  --ads-green-600: #365944;
  --ads-green-700: #2B4736;
  --ads-green-800: #203529;
  --ads-green-900: #19291F;

  --ads-cyan-50:  #D2ECEC;
  --ads-cyan-100: #7EC4C4;
  --ads-cyan-200: #62B0B0;
  --ads-cyan-300: #479C9C;
  --ads-cyan-400: #2D8585;
  --ads-cyan-500: #1B6F6F;
  --ads-cyan-600: #125858;
  --ads-cyan-700: #0C4444;
  --ads-cyan-800: #062D2D;
  --ads-cyan-900: #042121;

  --ads-blue-50:  #DDE6F7;
  --ads-blue-100: #4F80E0;
  --ads-blue-200: #4374D5;
  --ads-blue-300: #3868C8;
  --ads-blue-400: #305CBA;
  --ads-blue-500: #2952AB;
  --ads-blue-600: #214E9C;
  --ads-blue-700: #143F90;
  --ads-blue-800: #0F2F6C;
  --ads-blue-900: #0A2150;

  --ads-indigo-50:  #E2E3F2;
  --ads-indigo-100: #6567CE;
  --ads-indigo-200: #5458C9;
  --ads-indigo-300: #4045C2; /* brand */
  --ads-indigo-400: #3B3FBA;
  --ads-indigo-500: #363AAB;
  --ads-indigo-600: #32349B;
  --ads-indigo-700: #2D2F8C;
  --ads-indigo-800: #282A7C;
  --ads-indigo-900: #1D1F5D;

  /* Type scale (per Figma node 1308-40) */
  --ads-font-display-lg: 600 60px/62px var(--font-family);
  --ads-font-display-md: 600 48px/50px var(--font-family);
  --ads-font-heading-xxl: 600 34px/40px var(--font-family);
  --ads-font-heading-xl:  600 30px/36px var(--font-family);
  --ads-font-heading-lg:  600 24px/28px var(--font-family);
  --ads-font-heading-sm:  600 20px/24px var(--font-family);
  --ads-font-body-lg-reg: 400 18px/24px var(--font-family);
  --ads-font-body-md-reg: 400 14px/20px var(--font-family);
  --ads-font-body-sm-reg: 400 12px/18px var(--font-family);
  --ads-font-body-xs-reg: 400 11px/15px var(--font-family);
  --ads-font-body-lg-sem: 600 18px/24px var(--font-family);
  --ads-font-body-md-sem: 600 14px/20px var(--font-family);
  --ads-font-body-sm-sem: 600 12px/18px var(--font-family);
  --ads-font-body-xs-sem: 600 11px/15px var(--font-family);
  --ads-font-body-lg-bold: 700 18px/24px var(--font-family);
  --ads-font-body-md-bold: 700 14px/20px var(--font-family);
  --ads-font-body-sm-bold: 700 12px/18px var(--font-family);
  --ads-font-body-xs-bold: 700 11px/15px var(--font-family);
  --ads-font-metric-lg:   600 28px/36px var(--font-family);
  --ads-font-metric-md:   600 24px/32px var(--font-family);
  --ads-font-metric-sm:   600 16px/24px var(--font-family);
  --ads-font-caps-lg:     600 11px/12px var(--font-family);
  --ads-font-caps-sm:     600 9px/12px var(--font-family);
  --ads-caps-lg-tracking: 0.5px;
  --ads-caps-sm-tracking: 0;

  /* Component sizing — pulled directly from Figma Button tokens (17:542).
     `--button/size/default/radius = 6px`, `padding-x = 16px`, `padding-y = 8px`,
     `gap = 4px`. (The `--radius-button` itself is declared above in the
     Radius block; these additional ADS-only sizing tokens are used by the
     button selectors below.) */
  --ads-btn-pad-y: 8px;
  --ads-btn-pad-x: 16px;
  --ads-btn-gap: 4px;
  --ads-btn-icon-size: 16px;
  --ads-btn-pad-y-compact: 2px;
  --ads-btn-pad-x-compact: 8px;
  --ads-btn-pad-y-large: 10px;
  --ads-btn-pad-x-large: 24px;
}

/* ═══ Foundational page baseline ═══════════════════════════════════════
   The minimum visual change that makes ADS look distinct from EDL Light.
   Component-level refinements (buttons, tables, etc.) land in Phase 2. */

html[data-theme="ads"] body {
  font-family: var(--font-family);
  background: var(--ads-page-bg);
  color: var(--gray-95);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="ads"],
html[data-theme="ads"] body,
html[data-theme="ads"] button,
html[data-theme="ads"] input,
html[data-theme="ads"] select,
html[data-theme="ads"] textarea {
  font-family: var(--font-family);
}

/* ════════════════════════════════════════════════════════════════════════
 * PHASE 2: Component variants
 * ────────────────────────────────────────────────────────────────────────
 * All selectors below are scoped to `html[data-theme="ads"]` so EDL Light
 * and EDL Dark remain pixel-identical to their pre-ADS state. Layout,
 * padding, sizing, and density are preserved; only visual styling shifts.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Cards (Figma node 17:542) ──────────────────────────────────────────
   ADS cards: 12px radius, 1px hairline border, soft 2-stack shadow. */
html[data-theme="ads"] .dash-card,
html[data-theme="ads"] .card,
html[data-theme="ads"] .gl-card,
html[data-theme="ads"] .surface-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--ads-card-border);
  box-shadow: var(--ads-shadow-card);
  background: var(--ads-card-bg);
}

/* Card titles — ADS heading/sm (20/24 SemiBold) */
html[data-theme="ads"] .dash-card-title,
html[data-theme="ads"] .card-title {
  font: var(--ads-font-heading-sm);
  color: var(--ads-gray-600);
}

/* Page title — ADS heading/xl */
html[data-theme="ads"] .page-title {
  font: var(--ads-font-heading-xl);
  color: var(--ads-gray-600);
}

/* KPI / metric values use ADS Metric scale */
html[data-theme="ads"] .dash-kpi-value,
html[data-theme="ads"] .kpi-value,
html[data-theme="ads"] .metric-value {
  font: var(--ads-font-metric-lg);
  color: var(--ads-gray-600);
}

/* Semantic KPI values. These live beside the base rule because the base rule
   also sets colour — a page-level modifier of equal specificity would lose to
   it on source order. Typography is inherited; only the hue changes. */
html[data-theme="ads"] .dash-kpi-value--brand,
html[data-theme="ads"] .kpi-value--brand {
  color: var(--ads-brand);
}
html[data-theme="ads"] .dash-kpi-value--warning,
html[data-theme="ads"] .kpi-value--warning {
  color: var(--ads-orange-800);
}

/* ── Status chips (Figma node 219:248) ──────────────────────────────────
   Map EDL status-chip tokens to ADS hue ramps via :root override only.
   Existing .badge-sm rules continue to read --status-chip-* tokens. */
html[data-theme="ads"] {
  /* Active / Success — Green */
  --status-chip-active-bg:      var(--ads-green-50);
  --status-chip-active-border:  var(--ads-green-200);
  --status-chip-active-text:    var(--ads-green-700);

  /* Pending / Warning — Orange */
  --status-chip-pending-bg:     var(--ads-orange-50);
  --status-chip-pending-border: var(--ads-orange-200);
  --status-chip-pending-text:   var(--ads-orange-700);

  /* Proposed / Info — Indigo (brand wash) */
  --status-chip-proposed-bg:    var(--ads-indigo-50);
  --status-chip-proposed-border: var(--ads-indigo-200);
  --status-chip-proposed-text:  var(--ads-indigo-700);

  /* Blocked / Error — Red */
  --status-chip-blocked-bg:     var(--ads-red-50);
  --status-chip-blocked-border: var(--ads-red-200);
  --status-chip-blocked-text:   var(--ads-red-600);

  /* Closed / Neutral — Gray */
  --status-chip-closed-bg:      var(--ads-gray-50);
  --status-chip-closed-border:  var(--ads-gray-200);
  --status-chip-closed-text:    var(--ads-gray-100);
}

/* Chip shape — ADS pill (999px) + Open Sans semibold caption */
html[data-theme="ads"] .badge-sm {
  border-radius: var(--radius-pill);
  font: 600 12px/18px var(--font-family);
  letter-spacing: 0;
}

/* ── Tables (Figma nodes 1727:13223–13313) ──────────────────────────────
   ADS tables: hairline dividers, gray-100 header text, indigo-50 selected,
   ~5% black hover. */
html[data-theme="ads"] .gl-table,
html[data-theme="ads"] .owa-table,
html[data-theme="ads"] table.dash-table {
  border-collapse: collapse;
  background: var(--ads-card-bg);
}

html[data-theme="ads"] .gl-table thead th,
html[data-theme="ads"] .owa-table thead th,
html[data-theme="ads"] table.dash-table thead th {
  color: var(--ads-gray-100);
  font: 600 13px/18px var(--font-family);
  border-bottom: 1px solid rgba(15, 18, 20, 0.20);
  padding: 10px 12px;
}

html[data-theme="ads"] .gl-table tbody td,
html[data-theme="ads"] .owa-table tbody td,
html[data-theme="ads"] table.dash-table tbody td {
  color: var(--ads-gray-600);
  font: var(--ads-font-body-md-reg);
  border-bottom: 1px solid var(--ads-card-border);
  padding: 12px;
}

html[data-theme="ads"] .gl-table tbody tr:hover,
html[data-theme="ads"] .owa-table tbody tr:hover {
  background: rgba(15, 18, 20, 0.05);
}

html[data-theme="ads"] .gl-table tbody tr[aria-selected="true"],
html[data-theme="ads"] .owa-table tbody tr[aria-selected="true"],
html[data-theme="ads"] .gl-table tbody tr.is-selected,
html[data-theme="ads"] .owa-table tbody tr.is-selected {
  background: var(--ads-indigo-50);
}

/* ── Buttons (Figma node 17:542) ────────────────────────────────────────
   ADS button anatomy (Figma component token values):
     radius            = 6px   (token: button/size/default/radius)
     padding-y         = 8px   (token: button/size/default/padding-y)
     padding-x text+icon / text-only = 16px (token: button/size/default/.../padding-x)
     gap               = 4px   (token: button/size/gap)
     font              = Open Sans SemiBold 14/20 (body/normal/md)
   Variants per Figma 17:542:
     • primary   — filled brand, white text, no border
     • secondary — transparent bg, 1px brand border, brand text
     • tertiary  — transparent bg, 1px gray-50% border, gray-100 text
     • ghost     — transparent bg, no border, gray-100 text

   HARPS already maps class names that don't perfectly align with Figma's
   variant naming (e.g. HARPS `.btn-secondary` is the most common neutral
   action and uses a gray border). Visual mapping below: keep HARPS's
   semantic intent but match Figma's sizing tokens (radius + padding) so
   button heights line up with the rest of the ADS surface. */

/* Action buttons used across HARPS — Figma "tertiary" pattern
   (white bg + 1px gray border + gray-600 text). */
html[data-theme="ads"] .gl-action-btn,
html[data-theme="ads"] .action-btn,
html[data-theme="ads"] .btn-secondary,
html[data-theme="ads"] button.secondary {
  background: var(--ads-card-bg);
  border: 1px solid rgba(15, 18, 20, 0.50); /* Figma tertiary border */
  border-radius: var(--radius-button);
  color: var(--ads-gray-600);
  font: var(--ads-font-body-md-sem);
  padding: var(--ads-btn-pad-y) var(--ads-btn-pad-x);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-btn-gap);
  transition: background 120ms ease, border-color 120ms ease;
}
html[data-theme="ads"] .gl-action-btn:hover,
html[data-theme="ads"] .action-btn:hover,
html[data-theme="ads"] .btn-secondary:hover,
html[data-theme="ads"] button.secondary:hover {
  background: var(--ads-gray-50);
  border-color: rgba(15, 18, 20, 0.70);
}
html[data-theme="ads"] .gl-action-btn:active,
html[data-theme="ads"] .action-btn:active,
html[data-theme="ads"] .btn-secondary:active,
html[data-theme="ads"] button.secondary:active {
  background: rgba(15, 18, 20, 0.08);
}
html[data-theme="ads"] .gl-action-btn:disabled,
html[data-theme="ads"] .action-btn:disabled,
html[data-theme="ads"] .btn-secondary:disabled,
html[data-theme="ads"] button.secondary:disabled,
html[data-theme="ads"] .gl-action-btn[aria-disabled="true"],
html[data-theme="ads"] .btn-secondary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
html[data-theme="ads"] .gl-action-btn:focus-visible,
html[data-theme="ads"] .action-btn:focus-visible,
html[data-theme="ads"] .btn-secondary:focus-visible {
  outline: 2px solid var(--ads-brand);
  outline-offset: 2px;
}

/* Primary action buttons — Figma primary (filled, no border, white text). */
html[data-theme="ads"] .btn-primary,
html[data-theme="ads"] button.primary,
html[data-theme="ads"] .gl-action-btn--primary {
  background: var(--ads-brand);
  border: 1px solid var(--ads-brand); /* same color as bg → visually borderless, same height */
  color: var(--white);
  border-radius: var(--radius-button);
  font: var(--ads-font-body-md-sem);
  padding: var(--ads-btn-pad-y) var(--ads-btn-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-btn-gap);
}
html[data-theme="ads"] .btn-primary:hover,
html[data-theme="ads"] button.primary:hover,
html[data-theme="ads"] .gl-action-btn--primary:hover {
  background: var(--ads-brand-hover);
  border-color: var(--ads-brand-hover);
}
html[data-theme="ads"] .btn-primary:active,
html[data-theme="ads"] button.primary:active,
html[data-theme="ads"] .gl-action-btn--primary:active {
  background: var(--ads-brand-active);
  border-color: var(--ads-brand-active);
}
html[data-theme="ads"] .btn-primary:disabled,
html[data-theme="ads"] button.primary:disabled,
html[data-theme="ads"] .gl-action-btn--primary:disabled,
html[data-theme="ads"] .btn-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tertiary / brand-text — transparent w/ brand text (no border).
   Figma's true "secondary" is brand-border + brand-text; HARPS calls that
   "btn-tertiary" by convention. Keep brand text but drop the transparent
   1px border so layout doesn't shift. */
html[data-theme="ads"] .btn-tertiary,
html[data-theme="ads"] button.tertiary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ads-brand);
  font: var(--ads-font-body-md-sem);
  border-radius: var(--radius-button);
  padding: var(--ads-btn-pad-y) var(--ads-btn-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-btn-gap);
  cursor: pointer;
}
html[data-theme="ads"] .btn-tertiary:hover,
html[data-theme="ads"] button.tertiary:hover {
  background: var(--ads-indigo-50);
}
html[data-theme="ads"] .btn-tertiary:active,
html[data-theme="ads"] button.tertiary:active {
  background: var(--ads-indigo-50);
  color: var(--ads-brand-active);
}
html[data-theme="ads"] .btn-tertiary:disabled,
html[data-theme="ads"] button.tertiary:disabled,
html[data-theme="ads"] .btn-tertiary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ghost — transparent surface, no border, neutral gray text (Figma 17:407).
   Useful for low-emphasis toolbar actions, table-row actions, and dialog
   cancels where neither a brand outline nor a gray border is desired. */
html[data-theme="ads"] .btn-ghost,
html[data-theme="ads"] button.ghost,
html[data-theme="ads"] .btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ads-gray-100); /* #51585B — Figma ghost text */
  font: var(--ads-font-body-md-sem);
  border-radius: var(--radius-button);
  padding: var(--ads-btn-pad-y) var(--ads-btn-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ads-btn-gap);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
html[data-theme="ads"] .btn-ghost:hover,
html[data-theme="ads"] button.ghost:hover,
html[data-theme="ads"] .btn--ghost:hover {
  background: rgba(15, 18, 20, 0.05);
  color: var(--ads-gray-600);
}
html[data-theme="ads"] .btn-ghost:active,
html[data-theme="ads"] button.ghost:active,
html[data-theme="ads"] .btn--ghost:active {
  background: rgba(15, 18, 20, 0.08);
}
html[data-theme="ads"] .btn-ghost:disabled,
html[data-theme="ads"] button.ghost:disabled,
html[data-theme="ads"] .btn--ghost:disabled,
html[data-theme="ads"] .btn-ghost[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Icon-only button (Figma 17:8, 17:143, 17:278, 17:413) — 32x32 square,
   no horizontal padding shift, centered icon. Selectors target HARPS's
   common icon-button class names. */
html[data-theme="ads"] .btn-icon,
html[data-theme="ads"] .icon-btn,
html[data-theme="ads"] .gl-icon-btn,
html[data-theme="ads"] .btn--icon-only {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ads-gray-100);
  cursor: pointer;
}
html[data-theme="ads"] .btn-icon:hover,
html[data-theme="ads"] .icon-btn:hover,
html[data-theme="ads"] .gl-icon-btn:hover,
html[data-theme="ads"] .btn--icon-only:hover {
  background: rgba(15, 18, 20, 0.05);
  color: var(--ads-gray-600);
}
html[data-theme="ads"] .btn-icon:focus-visible,
html[data-theme="ads"] .icon-btn:focus-visible {
  outline: 2px solid var(--ads-brand);
  outline-offset: 2px;
}

/* ── Navigation (Figma nodes 796:78, 792:53, 794:45) ────────────────────
   ADS primary nav: dark surface, brand accent for active state. */
html[data-theme="ads"] .primary-nav,
html[data-theme="ads"] .pnav-module {
  background: var(--ads-gray-700);
}
html[data-theme="ads"] .pnav-item-text {
  color: rgba(255, 255, 255, 0.85);
  font: var(--ads-font-body-md-reg);
}
html[data-theme="ads"] .pnav-item.active {
  background: var(--ads-brand);
}
html[data-theme="ads"] .pnav-item.active .pnav-item-text {
  color: var(--white);
}
html[data-theme="ads"] .pnav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Left rail — active state uses ADS brand */
html[data-theme="ads"] .rail-item--default[aria-current="page"]::before,
html[data-theme="ads"] .rail-item[aria-current="page"] .rail-icon-tile {
  background: var(--ads-brand);
}

/* ── Period trigger / dropdown buttons ──────────────────────────────────
   Period selectors (.dash-period-trigger) and similar dropdown buttons. */
html[data-theme="ads"] .dash-period-trigger {
  border-radius: var(--radius-button);
  border: 1px solid var(--ads-gray-200);
  font-family: var(--font-family);
}
html[data-theme="ads"] .dash-period-trigger:hover {
  border-color: var(--ads-gray-300);
}

/* ── Tabs (Figma node 57:56) ────────────────────────────────────────────
   ADS Primary Tab anatomy:
     • rest text     #51585B Regular (body/normal — size inherited from HARPS)
     • hover text    #3B4347 Regular
     • active text   #4045C2 SemiBold
     • disabled      40% opacity on the rest text color
     • active indicator = 3px brand-colored underline spanning the full tab
   We keep the HARPS tab font size (don't enforce Figma's 18/24 default to
   avoid layout shift) and only re-skin colors + underline geometry. */
/* Tab geometry must not change with selection. Weight is therefore constant
   across states — a 400/600 swap re-measures the label, which changes the
   tab's width and pushes every tab after it sideways. Selection is carried by
   colour and the underline below. */
html[data-theme="ads"] .owa-tab,
html[data-theme="ads"] .tab,
html[data-theme="ads"] [role="tab"] {
  color: var(--ads-gray-100);
  font-family: var(--font-family);
  font-weight: 600;
}
html[data-theme="ads"] .owa-tab:hover,
html[data-theme="ads"] .tab:hover,
html[data-theme="ads"] [role="tab"]:hover {
  color: var(--ads-gray-200); /* #3B4347 Figma hover text */
}
html[data-theme="ads"] .owa-tab.active,
html[data-theme="ads"] .tab.active,
html[data-theme="ads"] [role="tab"][aria-selected="true"] {
  color: var(--ads-brand);
}
html[data-theme="ads"] .owa-tab[aria-disabled="true"],
html[data-theme="ads"] .tab[aria-disabled="true"],
html[data-theme="ads"] [role="tab"][aria-disabled="true"],
html[data-theme="ads"] .owa-tab[disabled],
html[data-theme="ads"] .tab[disabled],
html[data-theme="ads"] [role="tab"][disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Figma's active underline = 3px brand-colored stripe at the bottom edge
   of the tab. Keep `right: 0` if HARPS already provides a left offset, so
   the stripe spans the full hit area regardless of which tab class is in
   use. */
html[data-theme="ads"] .owa-tab.active::after,
html[data-theme="ads"] .tab.active::after,
html[data-theme="ads"] [role="tab"][aria-selected="true"]::after {
  background: var(--ads-brand);
  height: 3px;
}

/* ── Indigo brand accents (focus rings, active dots, etc.) ──────────────
   Many places use `var(--indigo-70)` for the accent. That token is already
   re-mapped to #4045C2 above, so these update automatically. This block
   is a safety net for places that hardcode the EDL indigo. */
html[data-theme="ads"] a {
  color: var(--ads-brand);
}
html[data-theme="ads"] a:hover {
  color: var(--ads-brand-hover);
}

/* ════════════════════════════════════════════════════════════════════════
 * QA PASS: Reach hardcoded card values + add missing components
 * ────────────────────────────────────────────────────────────────────────
 * Many HARPS surfaces hardcode `border-radius: 16px` and `border: 1px
 * solid #D9DEE7` instead of reading tokens. Targeted overrides below
 * make those follow ADS visuals without modifying any HARPS pages. */

/* ── Hard-coded card surfaces — force ADS radius + border ───────────── */
html[data-theme="ads"] .dash-kpi-card,
html[data-theme="ads"] .dash-rev-card,
html[data-theme="ads"] .dash-rev-summary,
html[data-theme="ads"] .dash-chart-card,
html[data-theme="ads"] .dash-fho-card,
html[data-theme="ads"] .dash-billing-card,
html[data-theme="ads"] .dash-section-card,
html[data-theme="ads"] .dash-opstat-card,
html[data-theme="ads"] .dash-rev-tile,
html[data-theme="ads"] .dash-kpi-tile,
html[data-theme="ads"] .owa-table-container,
html[data-theme="ads"] .gl-table-container,
html[data-theme="ads"] .surface-panel {
  border-radius: var(--radius-card);
  border: 1px solid var(--ads-card-border);
  background: var(--ads-card-bg);
  box-shadow: var(--ads-shadow-card);
}

/* ── Form labels & helper text ──────────────────────────────────────── */
html[data-theme="ads"] label,
html[data-theme="ads"] .field-label,
html[data-theme="ads"] .form-label {
  font: 600 12px/18px var(--font-family);
  color: var(--ads-gray-200); /* #3B4347 — Figma label color */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="ads"] .field-helper,
html[data-theme="ads"] .helper-text,
html[data-theme="ads"] .form-helper {
  font: 400 12px/18px var(--font-family);
  color: var(--ads-gray-200);
}

html[data-theme="ads"] .field-error,
html[data-theme="ads"] .error-text,
html[data-theme="ads"] .form-error {
  font: 400 12px/18px var(--font-family);
  color: var(--ads-red-400); /* #993B44 — Figma error text */
}

/* ── Text inputs / search / textarea (Figma node 63:216, 37:16) ─────── */
html[data-theme="ads"] input[type="text"],
html[data-theme="ads"] input[type="search"],
html[data-theme="ads"] input[type="email"],
html[data-theme="ads"] input[type="number"],
html[data-theme="ads"] input[type="tel"],
html[data-theme="ads"] input[type="url"],
html[data-theme="ads"] input[type="password"],
html[data-theme="ads"] input[type="date"],
html[data-theme="ads"] textarea,
html[data-theme="ads"] .input-field,
html[data-theme="ads"] .text-input,
html[data-theme="ads"] .search-input {
  font: var(--ads-font-body-md-reg);
  color: var(--ads-gray-600);
  background: var(--ads-card-bg);
  border: 1px solid rgba(15, 18, 20, 0.20);
  border-radius: var(--radius-field);
  padding: 8px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
html[data-theme="ads"] input::placeholder,
html[data-theme="ads"] textarea::placeholder {
  color: var(--ads-gray-100); /* #51585B placeholder */
}
html[data-theme="ads"] input[type="text"]:hover,
html[data-theme="ads"] input[type="search"]:hover,
html[data-theme="ads"] textarea:hover,
html[data-theme="ads"] .input-field:hover {
  border-color: rgba(15, 18, 20, 0.50);
}
html[data-theme="ads"] input[type="text"]:focus,
html[data-theme="ads"] input[type="search"]:focus,
html[data-theme="ads"] input[type="email"]:focus,
html[data-theme="ads"] input[type="number"]:focus,
html[data-theme="ads"] textarea:focus,
html[data-theme="ads"] .input-field:focus,
html[data-theme="ads"] .text-input:focus {
  outline: none;
  border: 2px solid var(--ads-brand);
  padding: 7px 11px; /* compensate for thicker border to keep size stable */
}
html[data-theme="ads"] input:disabled,
html[data-theme="ads"] textarea:disabled,
html[data-theme="ads"] .input-field[disabled] {
  border-color: rgba(15, 18, 20, 0.05);
  color: rgba(15, 18, 20, 0.30);
  background: rgba(15, 18, 20, 0.02);
  cursor: not-allowed;
}
html[data-theme="ads"] input[aria-invalid="true"],
html[data-theme="ads"] textarea[aria-invalid="true"],
html[data-theme="ads"] .input-field--error {
  border-color: var(--ads-red-100); /* #DB5461 */
}

/* ── Select / dropdown trigger (Figma node 36:56, 2550:30) ──────────── */
html[data-theme="ads"] select,
html[data-theme="ads"] .select-trigger,
html[data-theme="ads"] .dropdown-trigger {
  font: var(--ads-font-body-md-reg);
  color: var(--ads-gray-600);
  background: var(--ads-card-bg);
  border: 1px solid rgba(15, 18, 20, 0.20);
  border-radius: var(--radius-field);
  padding: 10px 12px;
}
html[data-theme="ads"] select:hover,
html[data-theme="ads"] .select-trigger:hover,
html[data-theme="ads"] .dropdown-trigger:hover {
  border-color: rgba(15, 18, 20, 0.50);
}

/* ── Popover / dropdown menu surface ─────────────────────────────────── */
html[data-theme="ads"] .dropdown-menu,
html[data-theme="ads"] .popover,
html[data-theme="ads"] .dash-period-menu,
html[data-theme="ads"] .menu-popover {
  background: var(--ads-card-bg);
  border: 1px solid rgba(15, 18, 20, 0.20);
  border-radius: var(--radius-field);
  box-shadow: 0 4px 12px rgba(15, 18, 20, 0.30);
  padding: 4px 0;
}
html[data-theme="ads"] .dropdown-menu .menu-item,
html[data-theme="ads"] .popover .menu-item,
html[data-theme="ads"] .dash-period-option {
  font: var(--ads-font-body-md-reg);
  color: var(--ads-gray-600);
  padding: 8px 12px;
  cursor: pointer;
}
html[data-theme="ads"] .dropdown-menu .menu-item:hover,
html[data-theme="ads"] .popover .menu-item:hover,
html[data-theme="ads"] .dash-period-option:hover,
html[data-theme="ads"] .dash-period-option[aria-selected="true"] {
  background: rgba(15, 18, 20, 0.05);
  color: var(--ads-gray-600);
}

/* Profile dropdown (existing class set in repo) — ADS visual */
html[data-theme="ads"] .profile-dropdown,
html[data-theme="ads"] .profile-dd-submenu {
  background: var(--ads-card-bg);
  border: 1px solid rgba(15, 18, 20, 0.20);
  border-radius: var(--radius-field);
  box-shadow: 0 4px 12px rgba(15, 18, 20, 0.30);
}
html[data-theme="ads"] .profile-dd-submenu-item.is-selected {
  color: var(--ads-brand);
}

/* ── Checkbox (Figma node 71:62) ────────────────────────────────────── */
html[data-theme="ads"] input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(15, 18, 20, 0.20);
  border-radius: 2px;
  background: var(--ads-card-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
  vertical-align: middle;
}
html[data-theme="ads"] input[type="checkbox"]:hover {
  border-color: rgba(15, 18, 20, 0.50);
}
html[data-theme="ads"] input[type="checkbox"]:checked {
  background: var(--ads-brand);
  border-color: var(--ads-brand);
}
html[data-theme="ads"] input[type="checkbox"]:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border: solid var(--white);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}
html[data-theme="ads"] input[type="checkbox"]:indeterminate {
  background: var(--ads-brand);
  border-color: var(--ads-brand);
}
html[data-theme="ads"] input[type="checkbox"]:indeterminate::after {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--white);
}
html[data-theme="ads"] input[type="checkbox"]:disabled {
  background: rgba(15, 18, 20, 0.05);
  border-color: rgba(15, 18, 20, 0.20);
  cursor: not-allowed;
}
html[data-theme="ads"] input[type="checkbox"][aria-invalid="true"] {
  border-color: var(--ads-red-100);
}

/* ── Radio button (Figma node 74:53) ────────────────────────────────── */
html[data-theme="ads"] input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(15, 18, 20, 0.20);
  border-radius: 50%;
  background: var(--ads-card-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: border-color 120ms ease;
}
html[data-theme="ads"] input[type="radio"]:hover {
  border-color: rgba(15, 18, 20, 0.50);
}
html[data-theme="ads"] input[type="radio"]:checked {
  border-color: var(--ads-brand);
  border-width: 5px;
}
html[data-theme="ads"] input[type="radio"]:disabled {
  background: rgba(15, 18, 20, 0.05);
  cursor: not-allowed;
}

/* ── Toggle / switch (Figma node 72:26) ─────────────────────────────────
   ADS toggle uses Green for active (success semantic), Gray for inactive.
   Targets common toggle class names and `role="switch"` ARIA pattern. */
html[data-theme="ads"] .toggle,
html[data-theme="ads"] [role="switch"],
html[data-theme="ads"] .toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  border-radius: 100px;
  background: var(--ads-gray-50);
  cursor: pointer;
  transition: background 160ms ease;
  vertical-align: middle;
  border: none;
  padding: 0;
}
html[data-theme="ads"] .toggle::after,
html[data-theme="ads"] [role="switch"]::after,
html[data-theme="ads"] .toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: left 160ms ease;
}
html[data-theme="ads"] .toggle[aria-checked="true"],
html[data-theme="ads"] [role="switch"][aria-checked="true"],
html[data-theme="ads"] .toggle-switch.is-on,
html[data-theme="ads"] .toggle.is-on {
  background: var(--ads-green-100); /* #6CB288 */
}
html[data-theme="ads"] .toggle[aria-checked="true"]::after,
html[data-theme="ads"] [role="switch"][aria-checked="true"]::after,
html[data-theme="ads"] .toggle-switch.is-on::after,
html[data-theme="ads"] .toggle.is-on::after {
  left: 22px;
}
html[data-theme="ads"] .toggle:hover {
  background: var(--ads-gray-100);
}
html[data-theme="ads"] .toggle[aria-checked="true"]:hover {
  background: var(--ads-green-200);
}

/* ── Tooltips (Figma node 73:234) ───────────────────────────────────────
   ADS tooltips: dark gray-500 background, white SemiBold 12/18, 6px radius. */
html[data-theme="ads"] [role="tooltip"],
html[data-theme="ads"] .tooltip,
html[data-theme="ads"] .ads-tooltip {
  background: var(--ads-gray-500); /* #21292D */
  color: var(--white);
  font: 600 12px/18px var(--font-family);
  border-radius: 6px;
  padding: 6px 16px;
  box-shadow: 0 4px 12px rgba(15, 18, 20, 0.30);
}

/* ── Alerts (Figma node 1100:40, 62:106) ────────────────────────────────
   White surface + 6px colored left border. Variants: error/warning/success/info.
   Targets common alert class names. */
html[data-theme="ads"] .alert,
html[data-theme="ads"] [role="alert"] {
  background: var(--ads-card-bg);
  border: 0;
  border-left: 6px solid var(--ads-gray-200);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 18, 20, 0.30);
  color: var(--ads-gray-600);
  font: var(--ads-font-body-md-reg);
}
html[data-theme="ads"] .alert--error,
html[data-theme="ads"] .alert-error,
html[data-theme="ads"] [role="alert"].error {
  border-left-color: var(--ads-red-100);
}
html[data-theme="ads"] .alert--warning,
html[data-theme="ads"] .alert-warning,
html[data-theme="ads"] [role="alert"].warning {
  border-left-color: var(--ads-orange-100);
}
html[data-theme="ads"] .alert--success,
html[data-theme="ads"] .alert-success,
html[data-theme="ads"] [role="alert"].success {
  border-left-color: var(--ads-green-100);
}
html[data-theme="ads"] .alert--info,
html[data-theme="ads"] .alert-info,
html[data-theme="ads"] [role="alert"].info {
  border-left-color: var(--ads-brand);
}

/* ── Detail-page contextual notice ────────────────────────────────────────
   `.page-alert` is the persistent "Peer Review Required" notice rendered on
   the Order and Invoice detail pages. It shipped with EDL orange tints and a
   full-bleed bottom rule; this maps it onto the ADS alert treatment — surface,
   semantic left accent, radius, elevation and type — without touching the 768
   pages that carry the markup. The message is a warning, not an error: the
   user can proceed but owes a second reviewer before export. */
html[data-theme="ads"] .page-alert {
  background: var(--ads-card-bg);
  border: 1px solid var(--ads-card-border);
  border-left: 6px solid var(--ads-orange-100);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 18, 20, 0.30);
  color: var(--ads-gray-600);
  font: var(--ads-font-body-md-reg);
  padding: 16px 56px 16px 16px;
  min-height: 0;
}

html[data-theme="ads"] .page-alert-label {
  font: var(--ads-font-body-md-sem);
  color: var(--ads-gray-600);
}

html[data-theme="ads"] .page-alert-msg {
  font: var(--ads-font-body-md-reg);
  color: var(--ads-gray-600);
}

/* The warning icon takes the semantic hue rather than an EDL orange literal. */
html[data-theme="ads"] .page-alert-icon {
  color: var(--ads-orange-400);
}

/* Dismiss control: ADS icon-button sizing and focus ring, no UA outline. */
html[data-theme="ads"] .page-alert-dismiss {
  color: var(--ads-gray-100);
  border-radius: var(--radius-button);
}
html[data-theme="ads"] .page-alert-dismiss:hover {
  background: rgba(15, 18, 20, 0.05);
  color: var(--ads-gray-600);
}
html[data-theme="ads"] .page-alert-dismiss:focus-visible {
  outline: 2px solid var(--ads-brand);
  outline-offset: 2px;
}
html[data-theme="ads"] .page-alert-dismiss:focus:not(:focus-visible) {
  outline: none;
}

/* ── Toasts (Figma node 70:62) ──────────────────────────────────────── */
html[data-theme="ads"] .toast,
html[data-theme="ads"] [role="status"].toast {
  background: var(--ads-card-bg);
  border: 1px solid var(--ads-card-border);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(15, 18, 20, 0.20), 0 2px 4px rgba(15, 18, 20, 0.10);
  color: var(--ads-gray-600);
  font: var(--ads-font-body-md-reg);
}

/* ── Modals / sheets / dialogs (Figma 38:46, 1928:3662, 598:1432) ──── */
html[data-theme="ads"] .modal,
html[data-theme="ads"] [role="dialog"],
html[data-theme="ads"] .dialog,
html[data-theme="ads"] .sheet,
html[data-theme="ads"] .side-panel {
  background: var(--ads-card-bg);
  border: 1px solid var(--ads-card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px rgba(15, 18, 20, 0.25), 0 8px 16px rgba(15, 18, 20, 0.10);
  font-family: var(--font-family);
  color: var(--ads-gray-600);
}
html[data-theme="ads"] .modal-overlay,
html[data-theme="ads"] .dialog-overlay,
html[data-theme="ads"] .sheet-overlay {
  background: rgba(15, 18, 20, 0.50);
}
html[data-theme="ads"] .modal-header,
html[data-theme="ads"] .dialog-header,
html[data-theme="ads"] .sheet-header {
  font: var(--ads-font-heading-sm);
  color: var(--ads-gray-600);
  padding: 16px 24px;
  border-bottom: 1px solid var(--ads-card-border);
}
html[data-theme="ads"] .modal-footer,
html[data-theme="ads"] .dialog-footer,
html[data-theme="ads"] .sheet-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ads-card-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Focus ring system — ADS uses brand-color 2px outline ───────────── */
html[data-theme="ads"] button:focus-visible,
html[data-theme="ads"] a:focus-visible,
html[data-theme="ads"] input:focus-visible,
html[data-theme="ads"] select:focus-visible,
html[data-theme="ads"] textarea:focus-visible,
html[data-theme="ads"] [role="button"]:focus-visible,
html[data-theme="ads"] [role="tab"]:focus-visible,
html[data-theme="ads"] [role="menuitem"]:focus-visible {
  outline: 2px solid var(--ads-brand);
  outline-offset: 2px;
}

/* ── Table refinements — explicit class-level + ID coverage ──────────
   The earlier Phase 2 .gl-table block only matched .gl-table; the
   dashboard uses ID-anchored selectors (#owa-content .owa-table th,
   #revsummary-content ...) plus EDL's `text-transform: uppercase` with
   `letter-spacing: 0.06em`. ADS tables use Open Sans SemiBold 13/18,
   mixed-case, no extra letter-spacing. Specificity must include the ID
   or use !important to defeat the EDL rules. */
html[data-theme="ads"] .owa-table thead th,
html[data-theme="ads"] .gl-table thead th,
html[data-theme="ads"] .dash-rev-table thead th,
html[data-theme="ads"] table.dash-table thead th,
html[data-theme="ads"] #owa-content .owa-table th,
html[data-theme="ads"] #owa-content .owa-table thead th,
html[data-theme="ads"] #revsummary-content .owa-table thead th,
html[data-theme="ads"] #revsummary-content .owa-table thead th:nth-child(n+2),
html[data-theme="ads"] #revsummary-content #revtab-product .owa-table thead th:nth-child(n+3),
html[data-theme="ads"] table thead th {
  color: var(--ads-gray-100) !important; /* #51585B mid-emphasis */
  font: 600 13px/18px var(--font-family) !important;
  font-variation-settings: normal;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid rgba(15, 18, 20, 0.20) !important;
  background: var(--ads-card-bg);
}

/* Also normalize table body text under ADS to use Open Sans
   (some dashboard pages set `font-family: var(--font-display)` on td) */
html[data-theme="ads"] .owa-table tbody td,
html[data-theme="ads"] .gl-table tbody td,
html[data-theme="ads"] table.dash-table tbody td,
html[data-theme="ads"] #owa-content .owa-table tbody td,
html[data-theme="ads"] #revsummary-content .owa-table tbody td {
  font-family: var(--font-family);
  color: var(--ads-gray-600);
}

/* Selected/hover row treatment for tables that use simple tr selectors */
html[data-theme="ads"] tr.is-selected,
html[data-theme="ads"] tr[aria-selected="true"] {
  background: var(--ads-indigo-50);
}

/* ── Div-based table headers (R&B Orders, OWA, Deals, detail pages) ────
   HARPS's div-based flexbox table uses `.trow-header` rows and a
   `.th-label` span for the column title. The earlier `<table> thead th`
   ADS rule cannot reach these. This block extends the same ADS table-
   header treatment (gray-100 / Open Sans SemiBold 13/18, no uppercase,
   no extra tracking) to `.th-label` so div-based tables match the
   `<table>` thead treatment under ADS. EDL Light/Dark are untouched.

   `.th-label` color is hardcoded on each page (#3A4652). For R&B the
   bare class selector wins here; for OWA the `#owa-content .th-label`
   page rule outranks a class-only selector, so we also list the same
   `#owa-content`-scoped form to keep parity inside Open Work. */
html[data-theme="ads"] .th-label,
html[data-theme="ads"] #owa-content .th-label {
  color: var(--ads-gray-100); /* #51585B — Figma table header */
  font: 600 13px/18px var(--font-family);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Scrollbar (Figma 1746:13401) ───────────────────────────────────── */
html[data-theme="ads"] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="ads"] *::-webkit-scrollbar-track {
  background: var(--ads-gray-50);
}
html[data-theme="ads"] *::-webkit-scrollbar-thumb {
  background: rgba(15, 18, 20, 0.20);
  border-radius: 999px;
  border: 2px solid var(--ads-gray-50);
}
html[data-theme="ads"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 18, 20, 0.40);
}
html[data-theme="ads"] {
  scrollbar-color: rgba(15, 18, 20, 0.20) var(--ads-gray-50);
}

/* ── Header / period trigger / KPI typography refinements ───────────── */
html[data-theme="ads"] .dash-section-title,
html[data-theme="ads"] .dash-fho-heading,
html[data-theme="ads"] .dash-section-heading {
  font: var(--ads-font-heading-sm);
  color: var(--ads-gray-600);
}

/* Period eyebrow label uses Figma's caps/lg scale (11/12 SemiBold, 0.5px
   tracking, uppercase) so micro-labels match the ADS Documentation page. */
html[data-theme="ads"] .dash-period-label {
  color: var(--ads-gray-200);
  font: var(--ads-font-caps-lg);
  text-transform: uppercase;
  letter-spacing: var(--ads-caps-lg-tracking);
}

/* ── Section header bg in cards (Figma uses #F5F5F5 strip) ──────────── */
html[data-theme="ads"] .dash-card-header,
html[data-theme="ads"] .card-header,
html[data-theme="ads"] .surface-header {
  border-bottom: 1px solid var(--ads-card-border);
}

/* ════════════════════════════════════════════════════════════════════════
 * ADS NAVIGATION (Figma nodes 796:78, 794:45, 792:53)
 * ────────────────────────────────────────────────────────────────────────
 * Re-skin the existing HARPS .primary-nav and .left-rail to match the ADS
 * Design System navigation. HARPS layout dimensions (48px top bar, 62px
 * left rail, content, routes, links) remain unchanged — only the visual
 * treatment changes under ADS theme.
 *
 * Top bar:  indigo brand bar, brand mark on left ("ADS"), tabs use a 2px
 *           white underline for the active state (no filled block),
 *           bell/options/avatar on the right.
 * Left nav: white surface with hairline border, brand-wash (Indigo 50)
 *           background for the active item, brand-colored label and icon.
 *
 * Tokens for the nav, scoped to ADS (kept inside this file so the whole
 * ADS theme stays single-source). */
html[data-theme="ads"] {
  --ads-nav-topbar-bg:        var(--ads-brand);          /* #4045C2 */
  --ads-nav-topbar-text:      var(--white);
  --ads-nav-topbar-text-dim:  rgba(255, 255, 255, 0.85);
  --ads-nav-topbar-hover-bg:  rgba(255, 255, 255, 0.08);
  --ads-nav-side-bg:          var(--ads-card-bg);        /* #FFFFFF */
  --ads-nav-side-border:      rgba(15, 18, 20, 0.20);
  --ads-nav-item-active-bg:   var(--ads-indigo-50);      /* #E2E3F2 brand wash */
  --ads-nav-item-active-text: var(--ads-brand);          /* #4045C2 */
  --ads-nav-item-rest-text:   var(--ads-gray-200);       /* #3B4347 */
  --ads-nav-item-hover-bg:    rgba(15, 18, 20, 0.04);
}

/* ── Top bar shell ─────────────────────────────────────────────────────
   Keep HARPS's 48px height, but apply ADS brand-indigo bar + Open Sans. */
html[data-theme="ads"] .primary-nav,
html[data-theme="ads"] .pnav-module {
  background: var(--ads-nav-topbar-bg);
  font-family: var(--font-family);
}

/* ── Brand area ────────────────────────────────────────────────────────
   ADS theme keeps the existing Disney Advertising logo. The HARPS markup
   (`<div class="logomark"><img class="logomark-img" .../></div>` plus the
   `.logo-divider-wrap` sibling) is preserved as-is. No rebrand. */

/* ── Layout: center the nav items between brand and utilities ──────────
   The HARPS structure puts `.logomark` and all `.pnav-item` siblings
   inside `.pnav-module` (which lives inside `.pnav-left`). To match the
   ADS Figma layout (brand left / tabs centered / utilities right) we let
   `.pnav-left` and `.pnav-module` expand to fill the available width and
   then use `margin: auto` on the first/last nav item to center the tab
   group within the remaining space. Pure CSS, no HTML changes. */
html[data-theme="ads"] .pnav-left {
  flex: 1 1 auto;
  min-width: 0;
}
html[data-theme="ads"] .pnav-module {
  flex: 1 1 auto;
  min-width: 0;
}
html[data-theme="ads"] .pnav-module > .pnav-item:first-of-type {
  margin-left: auto;
}
html[data-theme="ads"] .pnav-module > .pnav-item:last-of-type {
  margin-right: auto;
}

/* ── Tabs (Figma TopBarTab 794:45) ─────────────────────────────────────
   Drop the HARPS dropdown-chevron, drop the filled-block active state,
   add a 2px white underline directly below the text (centered tab) for
   the active state. SemiBold for active, Regular for rest. */
html[data-theme="ads"] .pnav-item {
  background: transparent !important;
  position: relative;
}
html[data-theme="ads"] .pnav-item:hover {
  background: var(--ads-nav-topbar-hover-bg) !important;
}
html[data-theme="ads"] .pnav-chevron {
  display: none !important; /* ADS top bar items are not dropdown chevrons */
}
html[data-theme="ads"] .pnav-item-text {
  font: 400 14px/20px var(--font-family);
  color: var(--ads-nav-topbar-text);
}
html[data-theme="ads"] .pnav-item.active {
  background: transparent !important; /* defeat HARPS filled block */
}
html[data-theme="ads"] .pnav-item.active .pnav-item-text {
  font-weight: 600;
  color: var(--ads-nav-topbar-text);
}
/* 2px white underline ~4px below the text baseline — centered on tab */
html[data-theme="ads"] .pnav-item.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: var(--ads-nav-topbar-text);
  pointer-events: none;
}

/* ── Right-side utilities (bell + avatar) ─────────────────────────────
   Figma uses 20x20 icons + 32x32 circular avatar with 16px gap. Keep
   the HARPS 48px hit-target but tighten the icon visual + avatar ring. */
html[data-theme="ads"] .pnav-icon-slot:hover {
  background: var(--ads-nav-topbar-hover-bg);
}
html[data-theme="ads"] .pnav-bell {
  /* Recolor any non-white bell stroke to white in case the source SVG
     ships in another color. Many SVGs already render white in HARPS. */
  filter: brightness(0) invert(1);
}
html[data-theme="ads"] .pnav-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.20);
}
html[data-theme="ads"] .pnav-avatar img,
html[data-theme="ads"] .pnav-avatar svg {
  width: 28px;
  height: 28px;
}

/* ── Left rail (Figma NavItem 792:53 + Navigation 796:78) ──────────────
   HARPS left rail keeps its 62px compact width and stacked icon-above-
   label layout. ADS theme replaces the filled-indigo-tile active style
   with a brand-wash (Indigo 50) background on the entire rail item +
   brand-colored label/icon. */
html[data-theme="ads"] .left-rail {
  background: var(--ads-nav-side-bg);
  border-right: 1px solid var(--ads-nav-side-border);
}
/* Defeat the original HARPS active treatments (`.rail-item--default::before`
   indigo tile, `.rail-item--active .rail-icon-tile` indigo tile, and the
   `filter: brightness(0) invert(1)` that re-colors the img icon to white). */
html[data-theme="ads"] .rail-item--default::before,
html[data-theme="ads"] .rail-item--default:hover::before,
html[data-theme="ads"] .rail-item--default:active::before,
html[data-theme="ads"] .rail-item--default[aria-current="page"]::before,
html[data-theme="ads"] .rail-item--default[aria-current="page"]:hover::before,
html[data-theme="ads"] .rail-item--default[aria-current="page"]:active::before {
  background: transparent !important;
}
html[data-theme="ads"] .rail-item[aria-current="page"] .rail-icon-tile,
html[data-theme="ads"] .rail-item[aria-current="page"]:hover .rail-icon-tile,
html[data-theme="ads"] .rail-item[aria-current="page"]:active .rail-icon-tile,
html[data-theme="ads"] .rail-item--active:hover .rail-icon-tile,
html[data-theme="ads"] .rail-item--active:active .rail-icon-tile {
  background: transparent !important;
}
html[data-theme="ads"] .rail-item--default[aria-current="page"] .rail-icon {
  filter: none !important;
}

/* ADS active treatment — brand-wash bg on the whole rail item */
html[data-theme="ads"] .rail-item {
  border-radius: 6px;
  padding: 6px 4px;
  transition: background 120ms ease;
}
html[data-theme="ads"] .rail-item:hover:not([aria-current="page"]) {
  background: var(--ads-nav-item-hover-bg);
}
html[data-theme="ads"] .rail-item[aria-current="page"] {
  background: var(--ads-nav-item-active-bg);
}

/* Label color — brand when active, ADS gray-200 when rest */
html[data-theme="ads"] .rail-label {
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--ads-nav-item-rest-text);
}
html[data-theme="ads"] .rail-item[aria-current="page"] .rail-label {
  color: var(--ads-nav-item-active-text);
  font-weight: 600;
}

/* Inline-SVG icons (Revenue & Billing, Accounts Payable tiles)
   — fill brand-color when active, gray-200 when rest. */
html[data-theme="ads"] .rail-icon-tile svg path {
  fill: var(--ads-nav-item-rest-text) !important;
  transition: fill 120ms ease;
}
html[data-theme="ads"] .rail-item[aria-current="page"] .rail-icon-tile svg path {
  fill: var(--ads-nav-item-active-text) !important;
}

/* `<img>`-based icons (Dashboard, GL Exports, Uploads) cannot be
   color-shifted without a brittle filter chain. Leave their native
   coloring under both states; the brand-wash background + brand-colored
   label communicate active state on their own. */

/* ════════════════════════════════════════════════════════════════════════
 * BEGIN HARPS LEFT-RAIL FIGMA SYNC (HARPS file, node 4947:37253)
 * ────────────────────────────────────────────────────────────────────────
 * Replaces the previous 62px stacked icon-above-label rail with the
 * compact 56px icon-only rail from Figma. Single source of truth for
 * every page and every theme (EDL Light, EDL Dark, ADS).
 *
 *   - Width:                  56px (was 62px)
 *   - Labels:                 hidden (icon-only)
 *   - Active treatment:       soft lavender bg + thin left indicator +
 *                             indigo icon (no more filled-indigo tile)
 *   - Page-shell gutter:      tracks new rail width
 *
 * Token-driven, so each theme keeps its own indigo / surface palette.
 * Loaded AFTER each page's inline <style>, so it wins by source order.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --rail-width: 56px;
  --rail-item-w: 54px;
  --rail-item-h: 32px;
  --rail-gap: 24px;
  --rail-pad-top: 20px;
  --rail-pad-bottom: 24px;
  --rail-active-bg: #F3F3FF;
  --rail-active-indicator: var(--indigo-70, #3611C8);
  --rail-icon-color: var(--indigo-70, #3611C8);
  --rail-hover-bg: rgba(54, 17, 200, 0.06);
}

[data-theme="dark"] {
  --rail-active-bg: rgba(124, 138, 219, 0.18);
  --rail-hover-bg: rgba(124, 138, 219, 0.10);
}

html[data-theme="ads"] {
  --rail-active-bg: var(--indigo-10, #E2E3F2);
  --rail-active-indicator: var(--indigo-70, #4045C2);
  --rail-icon-color: var(--indigo-70, #4045C2);
  --rail-hover-bg: rgba(64, 69, 194, 0.08);
}

/* ── Page-shell sidebar gutter — gradient strip behind the rail ───────── */
.page-shell {
  background: linear-gradient(
    90deg,
    var(--white) 0 var(--rail-width),
    transparent var(--rail-width)
  ) !important;
}

/* ── Rail container ───────────────────────────────────────────────────── */
.left-rail {
  width: var(--rail-width) !important;
  padding: var(--rail-pad-top) 0 var(--rail-pad-bottom) 0 !important;
  overflow: visible !important;
  box-shadow: 0 0 4px -1px rgba(23, 29, 35, 0.25);
}
.left-rail-stack {
  width: 100% !important;
  gap: var(--rail-gap) !important;
}

/* ── Hide labels — icon-only rail per Figma ───────────────────────────── */
.left-rail .rail-label { display: none !important; }

/* ── Each rail item: 54×32 hit zone, icon centered ────────────────────── */
.left-rail .rail-item {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--rail-item-w) !important;
  height: var(--rail-item-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--rail-icon-color);
  transition: background 120ms ease;
}

/* Center single-icon rail items (Dashboard) — the legacy CSS pushed the
   dashboard <img> down 6px to clear the active-tile zone; the new rail
   has no tile, so reset that. */
.left-rail .rail-item[aria-label="Dashboard"] .rail-icon {
  margin-top: 0 !important;
}

/* Defeat the legacy default-indicator pseudo (was an indigo background
   tile behind the dashboard icon) */
.left-rail .rail-item--default::before,
.left-rail .rail-item--default:hover::before,
.left-rail .rail-item--default:active::before,
.left-rail .rail-item--default[aria-current="page"]::before,
.left-rail .rail-item--default[aria-current="page"]:hover::before,
.left-rail .rail-item--default[aria-current="page"]:active::before {
  content: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Defeat the legacy filled-tile active treatment + reset img-icon filter */
.left-rail .rail-icon-tile,
.left-rail .rail-item[aria-current="page"] .rail-icon-tile,
.left-rail .rail-item--active .rail-icon-tile,
.left-rail .rail-item--active:hover .rail-icon-tile,
.left-rail .rail-item--active:active .rail-icon-tile {
  background: transparent !important;
  border-radius: 0 !important;
}
.left-rail .rail-item[aria-current="page"] .rail-icon {
  filter: none !important;
}

/* Icon coloring — always indigo, no white-on-indigo */
.left-rail .rail-icon-tile svg,
.left-rail .rail-icon-tile svg path,
.left-rail .rail-icon-tile svg [fill] {
  fill: var(--rail-icon-color) !important;
}

/* ── Hover — subtle wash, full row, no layout shift ───────────────────── */
.left-rail .rail-item:hover {
  background: var(--rail-hover-bg);
}

/* ── Active — lavender bg + thin left indicator + indigo icon ─────────── */
.left-rail .rail-item[aria-current="page"],
.left-rail .rail-item[aria-current="page"]:hover,
.left-rail .rail-item[aria-current="page"]:active {
  background: var(--rail-active-bg) !important;
  /* 2px indigo indicator on the left edge of the rail-item.
     Drawn as an inset box-shadow rather than a `::after` pseudo so
     `::after` stays free for the EDL sidebar tooltip below. */
  box-shadow: inset 2px 0 0 0 var(--rail-active-indicator);
}

/* ── Keyboard focus visible ───────────────────────────────────────────── */
.left-rail .rail-item:focus-visible {
  outline: 2px solid var(--rail-active-indicator);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
 * END HARPS LEFT-RAIL FIGMA SYNC (4947:37253)
 * ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
 * EDL SIDEBAR TOOLTIP
 * ────────────────────────────────────────────────────────────────────────
 * Reuses the existing .rail-label span (already in every rail-item) as a
 * floating tooltip on hover and keyboard focus, styled to match the
 * existing .edl-tooltip component in the codebase (dark slate surface,
 * 13/16 medium, 8px radius, subtle 1px elevation). Tokenised so EDL Dark
 * and ADS pick up theme overrides without per-theme one-off rules.
 *
 * Pure CSS — no JS, no native title fallback, no layout shift. The icon
 * column stays exactly 56px wide; the tooltip overflows the rail.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  /* EDL Light defaults — match the existing .edl-tooltip component
     (background #3A4652, 8px radius, 14/16 SemiBold). Padding pulled in
     slightly so the rail tooltip reads as compact, per spec. */
  --edl-tooltip-bg: #3A4652;
  --edl-tooltip-color: #FFFFFF;
  --edl-tooltip-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
  --edl-tooltip-radius: 8px;
  --edl-tooltip-padding: 6px 10px;
  --edl-tooltip-font: 500 13px/16px var(--font-family, system-ui);
  --edl-tooltip-offset: 12px;
}

[data-theme="dark"] {
  /* EDL Dark — push the tooltip surface even deeper for separation from
     the dark sidebar; strengthen the shadow against the darker page. */
  --edl-tooltip-bg: #1A2128;
  --edl-tooltip-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}

html[data-theme="ads"] {
  /* ADS already ships a tooltip token (gray-500 / SemiBold 12/18 / 6px
     radius / 16px horiz padding). Map the EDL tooltip vars onto those so
     the rail tooltip is visually consistent with the ADS Tooltip
     component on the rest of the page. */
  --edl-tooltip-bg: var(--ads-gray-500, #21292D);
  --edl-tooltip-color: var(--white, #FFFFFF);
  --edl-tooltip-radius: 6px;
  --edl-tooltip-padding: 6px 16px;
  --edl-tooltip-font: 600 12px/18px var(--font-family, system-ui);
  --edl-tooltip-shadow: 0 4px 12px rgba(15, 18, 20, 0.30);
}

/* Allow the rail-item to host an overflowing tooltip without clipping. */
.left-rail .rail-item {
  overflow: visible;
}

/* Render the tooltip as an `::after` pseudo-element sourced from the
   rail-item's `aria-label`. We deliberately do NOT reuse the existing
   `.rail-label` span anymore, because:
     1. `.rail-label` markup embeds `<br/>` for the legacy two-line
        caption (`Revenue<br/>& Billing`, `Accounts<br/>Payable`,
        `GL<br/>Exports`). `<br/>` creates a hard line break that no
        CSS rule reliably collapses across browsers, so the tooltip
        was wrapping into two lines.
     2. Each page's inline `.rail-label { width: 100%; }` rule was
        being inherited by the absolutely-positioned tooltip and
        constraining its width to the 54px rail-item, forcing further
        wrap and pulling the tooltip visually onto the rail.
   `attr(aria-label)` reads the full one-line label string already
   present on every rail-item (`aria-label="Revenue & Billing"` etc.)
   so we get a clean, single-line label with the correct spacing in
   every theme, with no width inheritance from `.rail-label`.

   SECURITY-REVIEW: purely presentational; the source is a hard-coded
   `aria-label` from each page's static markup, not user input. */
.left-rail .rail-item::after {
  content: attr(aria-label);
  position: absolute;
  left: calc(100% + var(--edl-tooltip-offset));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--edl-tooltip-padding);
  background: var(--edl-tooltip-bg);
  color: var(--edl-tooltip-color);
  font: var(--edl-tooltip-font);
  border-radius: var(--edl-tooltip-radius);
  box-shadow: var(--edl-tooltip-shadow);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease 0ms, visibility 0ms linear 120ms;
  z-index: 10000;
}

/* Reveal on hover and keyboard focus. `:focus-visible` keeps the
   tooltip from flashing for mouse-click focus. */
.left-rail .rail-item:hover::after,
.left-rail .rail-item:focus-visible::after,
.left-rail .rail-item:focus-within::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease 60ms, visibility 0ms linear 0ms;
}

/* ════════════════════════════════════════════════════════════════════════
 * END EDL SIDEBAR TOOLTIP
 * ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
 * FINANCE CONTENT — legacy values that never reached the token layer
 * ────────────────────────────────────────────────────────────────────────
 * The GL Export KPI captions are coloured by a `.dash-kpi-label` rule in each
 * page's own inline <style>, so there is no shared file to correct and no
 * token to substitute without editing several hundred pages.
 *
 * The equivalent problems in v2-ar.css — EDL indigo on the tab action pills
 * and EDL body text on pagination — were fixed at source instead, by
 * swapping the hex literals for the --indigo-70 and --gray-95 tokens that
 * this file already re-maps. That is the better fix where a shared
 * stylesheet exists: one value, correct in every theme, with nothing here to
 * keep in step. This block is only for the cases where that is not possible.
 * ════════════════════════════════════════════════════════════════════════ */

/* KPI captions describe the figure above them, so they take the ADS
   secondary text grey and let the metric value stay dominant. */
html[data-theme="ads"] .dash-kpi-label,
html[data-theme="ads"] .dash-kpi-sub {
  color: var(--ads-gray-100);
}