/* ════════════════════════════════════════════════════════════════════════
 * HARPS Wireframe Theme — Single Source of Truth
 * ────────────────────────────────────────────────────────────────────────
 * Linked from every harps*.html. Activated by `html[data-theme="wireframe"]`.
 *
 * Architecture (matches ADS/EDL Dark pattern):
 *   - EDL Light  = :root tokens (default)
 *   - EDL Dark   = [data-theme="dark"]       token overrides (per-page)
 *   - ADS        = [data-theme="ads"]        token overrides (ads-theme.css)
 *   - Wireframe  = [data-theme="wireframe"]  token overrides (THIS FILE)
 *
 * Goal: convert HARPS into a clean mid-fidelity black/white/grayscale
 * wireframe. Same prototype, same UX, same layout, same content — only
 * the visual layer becomes neutral.
 *
 * Non-goals:
 *   - DO NOT move, resize, or restructure anything.
 *   - DO NOT touch EDL Light, EDL Dark, or ADS.
 *   - DO NOT introduce brand colors, gradients, glass effects, or
 *     decorative shadows.
 *
 * Strategy:
 *   1. Re-map foundational color tokens (--gray-*, --indigo-*,
 *      --status-chip-*) to a uniform neutral ramp. ~80% of HARPS
 *      components read these tokens and re-style automatically.
 *   2. Flatten elevation tokens to a thin hairline border in place of
 *      the original soft shadow.
 *   3. Patch a small set of components that hard-code brand hex values
 *      (top-nav background, rail active state, expand-chevron SVG fill,
 *      etc.) so wireframe genuinely contains no brand color.
 *   4. Strip backdrop-filter, gradients, and decorative box-shadow on
 *      cards/dropdowns/modals — replace with simple gray borders.
 *
 * `html[...]` selectors are used (instead of just `[data-theme=...]`) so
 * these tokens defeat the inline `:root { --token: ... }` blocks each
 * HARPS page declares after this stylesheet link. (Specificity 0,0,1,1
 * beats 0,0,1,0.)
 * ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 1 — Token overrides (auto-themes ~80% of HARPS)
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] {
  /* ── Neutral ramp (Tailwind `neutral` scale — R = G = B for every step,
     so there is NO cool/blue/purple undertone like the EDL slate ramp). */
  --gray-95: #171717;   /* primary text / wireframe ink */
  --gray-90: #262626;
  --gray-85: #2E2E2E;
  --gray-80: #404040;
  --gray-70: #525252;
  --gray-60: #737373;
  --gray-50: #737373;   /* secondary text */
  --gray-40: #A3A3A3;
  --gray-30: #D4D4D4;   /* dividers */
  --gray-20: #E5E5E5;   /* borders */
  --gray-15: #ECECEC;
  --gray-10: #F5F5F5;   /* light surface / hover */
  --gray-05: #FAFAFA;   /* page background */

  /* ── Brand indigo → true neutral. Every component that reads
     --indigo-* for "primary action", "active state", "selected",
     "link color", "focus ring", etc. re-skins to neutral gray. */
  --indigo-70: #404040;
  --indigo-50: #525252;
  --indigo-40: #737373;
  --indigo-30: #A3A3A3;
  --indigo-20: #D4D4D4;
  --indigo-10: #F5F5F5;

  /* ── Brand orange (used by harps-invoice-overview + order/invoice
     detail pages). Full ramp — orange-80 was missing previously and
     leaked through to .page-alert-icon. */
  --orange-90: #262626;
  --orange-80: #404040;
  --orange-70: #525252;
  --orange-60: #737373;
  --orange-50: #737373;
  --orange-40: #A3A3A3;
  --orange-30: #D4D4D4;
  --orange-20: #D4D4D4;
  --orange-10: #F5F5F5;

  /* ── Invoice chip text tokens (--inv-chip-*-text were indigo
     #3611C8; --inv-chip-*-bg were brand-tinted near-white) */
  --inv-chip-review-complete-bg:        #FFFFFF;
  --inv-chip-review-complete-text:      #404040;
  --inv-chip-adjustment-complete-bg:    #FFFFFF;
  --inv-chip-adjustment-complete-text:  #404040;
  --inv-chip-pending-finance-bg:        #FFFFFF;
  --inv-chip-pending-finance-text:      #404040;
  --inv-chip-none-bg:                   #FAFAFA;
  --inv-chip-none-text:                 #525252;

  /* ── Detail-page custom tokens (cool slate / purple-tinted gray) */
  --detail-divider:        #E5E5E5;
  --summary-card-border:   #E5E5E5;

  /* ── Surface ───────────────────────────────────────────────────────── */
  --white: #FFFFFF;
  --black: #171717;     /* avoid pure-black; matches ink token */
  --bg:    #FAFAFA;     /* page background */

  /* ── Status chips — uniform outlined neutral pill ──────────────────── */
  --status-chip-active-bg:      #FFFFFF;
  --status-chip-active-border:  #D4D4D4;
  --status-chip-active-text:    #404040;

  --status-chip-pending-bg:     #FFFFFF;
  --status-chip-pending-border: #D4D4D4;
  --status-chip-pending-text:   #404040;

  --status-chip-proposed-bg:    #FFFFFF;
  --status-chip-proposed-border: #D4D4D4;
  --status-chip-proposed-text:  #404040;

  --status-chip-blocked-bg:     #FFFFFF;
  --status-chip-blocked-border: #D4D4D4;
  --status-chip-blocked-text:   #404040;

  --status-chip-closed-bg:      #FFFFFF;
  --status-chip-closed-border:  #D4D4D4;
  --status-chip-closed-text:    #737373;

  /* ── Notice / alert tokens (alert strip, blocked-assignment banner) ── */
  --notice-error-bg:     #F5F5F5;
  --notice-error-border: #D4D4D4;
  --notice-error-text:   #171717;
  --notice-warn-bg:      #F5F5F5;
  --notice-warn-border:  #D4D4D4;
  --notice-warn-text:    #171717;
  --notice-info-bg:      #F5F5F5;
  --notice-info-border:  #D4D4D4;
  --notice-info-text:    #171717;
  --notice-success-bg:   #F5F5F5;
  --notice-success-border: #D4D4D4;
  --notice-success-text: #171717;

  /* ── Invoice chip token variants (some R&B pages declare these) ────── */
  --inv-chip-review-complete-border:    #D4D4D4;
  --inv-chip-adjustment-complete-border: #D4D4D4;
  --inv-chip-pending-finance-border:    #D4D4D4;
  --inv-chip-none-border:               #D4D4D4;

  /* ── Elevation → hairline border (no decorative shadows) ──────────── */
  --elevation-10: 0 0 0 1px #E5E5E5;
  --elevation-20: 0 0 0 1px #E5E5E5;
  --elevation-30: 0 0 0 1px #E5E5E5;
  --elevation-40: 0 0 0 1px #D4D4D4;
}

/* ════════════════════════════════════════════════════════════════════════
 * PHASE 2 — Baseline page surfaces
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] body {
  background: var(--bg);
  color: var(--gray-95);
}

/* Strip decorative gradients/blurs that some pages hard-code */
html[data-theme="wireframe"] [style*="linear-gradient"],
html[data-theme="wireframe"] .panel-band,
html[data-theme="wireframe"] .gradient-band,
html[data-theme="wireframe"] .glass,
html[data-theme="wireframe"] .glass-card {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 3 — Top primary nav (HARPS global nav)
 * ─────────────────────────────────────────────────────────────────────
 * `.primary-nav` and `.pnav-module` already read --indigo-70 for
 * background, so they auto-flip to gray via the token override above.
 * `.pnav-item.active` adds a darker rgba overlay — flatten to gray-on-
 * gray so the active item still reads, just without indigo undertones.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .primary-nav,
html[data-theme="wireframe"] .pnav-module {
  background: var(--gray-95);
  box-shadow: none;
}
html[data-theme="wireframe"] .pnav-item .pnav-item-text {
  color: var(--gray-30);
}
html[data-theme="wireframe"] .pnav-item.active .pnav-item-text {
  color: var(--white);
}
html[data-theme="wireframe"] .pnav-item.active {
  background: rgba(255, 255, 255, 0.10);
}
html[data-theme="wireframe"] .pnav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 4 — Left rail
 * ─────────────────────────────────────────────────────────────────────
 * Original uses var(--indigo-70) for selected tile + hardcoded indigo
 * rgba/hex for hover/pressed. Token override fixes selected; the
 * hardcoded rgba/hex values below kill the indigo tint.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .left-rail {
  background: var(--white);
  border-right: 1px solid var(--gray-20);
  box-shadow: none;
}
html[data-theme="wireframe"] .rail-item {
  color: var(--gray-70);
}
/* Hover / pressed: replace hardcoded `rgba(54, 17, 200, .06/.12)` with neutral */
html[data-theme="wireframe"] .rail-item--default:hover::before,
html[data-theme="wireframe"] .rail-item--active:hover .rail-icon-tile {
  background: var(--gray-10);
}
html[data-theme="wireframe"] .rail-item--default:active::before,
html[data-theme="wireframe"] .rail-item--active:active .rail-icon-tile {
  background: var(--gray-20);
}
/* Selected page: --indigo-70 already remapped to dark gray; also override
   hardcoded hover/active hex (#4A22D4, #2E0FA0) used in EDL Light. */
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]::before,
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile {
  background: var(--gray-95);
}
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]:hover::before,
html[data-theme="wireframe"] .rail-item[aria-current="page"]:hover .rail-icon-tile {
  background: var(--gray-80);
}
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]:active::before,
html[data-theme="wireframe"] .rail-item[aria-current="page"]:active .rail-icon-tile {
  background: #111827;
}
/* Tooltip carat / label (uses ::after attr(aria-label)) */
html[data-theme="wireframe"] .left-rail .rail-item::after {
  background: var(--gray-95);
  color: var(--white);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 5 — Buttons (primary, secondary, ghost)
 * ─────────────────────────────────────────────────────────────────────
 * Many buttons read --indigo-70 for fill or border. Token override does
 * most of the work. These rules normalize hover/active hex values that
 * were hardcoded in EDL Light (`#4A22D4`, `#2E0FA0`).
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .btn-primary,
html[data-theme="wireframe"] .ap-btn--primary,
html[data-theme="wireframe"] .filter-clear-btn {
  background: var(--gray-95);
  color: var(--white);
  border-color: var(--gray-95);
}
html[data-theme="wireframe"] .btn-primary:hover,
html[data-theme="wireframe"] .ap-btn--primary:hover {
  background: var(--gray-80);
}
html[data-theme="wireframe"] .btn-primary:active,
html[data-theme="wireframe"] .ap-btn--primary:active {
  background: #111827;
}
html[data-theme="wireframe"] .btn-secondary,
html[data-theme="wireframe"] .ap-btn--secondary,
html[data-theme="wireframe"] .ap-period-close-btn {
  background: var(--white);
  color: var(--gray-80);
  border-color: var(--gray-30);
}
html[data-theme="wireframe"] .btn-secondary:hover,
html[data-theme="wireframe"] .ap-btn--secondary:hover,
html[data-theme="wireframe"] .ap-period-close-btn:hover {
  background: var(--gray-10);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 6 — Cards, dropdowns, modals, tooltips
 * ─────────────────────────────────────────────────────────────────────
 * Replace soft elevation shadow with a single hairline ring for the
 * wireframe look. Uses `box-shadow: 0 0 0 1px` instead of `border:` so
 * layout never shifts — shadows don't take up space, and the ring
 * renders right outside the element's box. Cards that already have a
 * border keep it (with --gray-20 color flowing through the token
 * override); border-less cards still get a visible gray perimeter from
 * the shadow ring. Either way: no 1px layout drift.
 *
 * `.owa-table-container` and similar transparent scroll containers are
 * deliberately omitted: they have `border: 0; box-shadow: none` in EDL
 * Light because they live inside another bordered card, so they get
 * their perimeter from the parent — adding any decoration here would
 * double-up.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .dash-card,
html[data-theme="wireframe"] .card,
html[data-theme="wireframe"] .gl-card,
html[data-theme="wireframe"] .surface-card,
html[data-theme="wireframe"] .dash-kpi-card,
html[data-theme="wireframe"] .ap-summary-card,
html[data-theme="wireframe"] .ap-table-card,
html[data-theme="wireframe"] .ap-form-card,
html[data-theme="wireframe"] .ap-side-card,
html[data-theme="wireframe"] .invoice-detail-card,
html[data-theme="wireframe"] .panel,
html[data-theme="wireframe"] .panel-card {
  background: var(--white);
  box-shadow: 0 0 0 1px var(--gray-20);
}

/* Modals / popovers — same "shadow-ring instead of border" approach to
   avoid 1px layout drift (these elements typically have a border in
   EDL Light, so the ring sits behind the border invisibly; if they
   don't, the ring still provides the wireframe perimeter). */
html[data-theme="wireframe"] .modal,
html[data-theme="wireframe"] .modal-content,
html[data-theme="wireframe"] .dialog,
html[data-theme="wireframe"] .popover,
html[data-theme="wireframe"] .filter-popover,
html[data-theme="wireframe"] .multiselect-popover {
  background: var(--white);
  box-shadow: 0 0 0 1px var(--gray-30);
}

/* Backdrop on modal overlays — keep semi-transparent but neutral */
html[data-theme="wireframe"] .modal-backdrop,
html[data-theme="wireframe"] .overlay {
  background: rgba(31, 41, 55, 0.32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 7 — Tables
 * ─────────────────────────────────────────────────────────────────────
 * Header row: light gray surface. Body rows: thin gray dividers.
 * Hover: light gray. Selected: slightly darker gray.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .trow-header,
html[data-theme="wireframe"] .table thead th,
html[data-theme="wireframe"] .ap-table thead th,
html[data-theme="wireframe"] .gl-table thead th,
html[data-theme="wireframe"] .owa-table thead th,
html[data-theme="wireframe"] .invoice-detail-table thead th {
  background: var(--gray-10);
  color: var(--gray-70);
  border-bottom: 1px solid var(--gray-20);
}
html[data-theme="wireframe"] .trow,
html[data-theme="wireframe"] .table tbody td,
html[data-theme="wireframe"] .ap-table tbody td,
html[data-theme="wireframe"] .gl-table tbody td,
html[data-theme="wireframe"] .owa-table tbody td {
  border-bottom-color: var(--gray-20);
}
html[data-theme="wireframe"] .trow-data:hover,
html[data-theme="wireframe"] .table tbody tr:hover,
html[data-theme="wireframe"] .ap-table tbody tr:hover,
html[data-theme="wireframe"] .gl-table tbody tr:hover,
html[data-theme="wireframe"] .owa-table tbody tr:hover {
  background: var(--gray-10);
}
html[data-theme="wireframe"] .trow-data.is-selected,
html[data-theme="wireframe"] tr.is-selected,
html[data-theme="wireframe"] .row-selected {
  background: var(--gray-15);
}
/* Sortable header indicator color */
html[data-theme="wireframe"] .th-sort path,
html[data-theme="wireframe"] .sort-trigger path {
  fill: var(--gray-50) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 8 — Status pills (uniform outlined gray)
 * ─────────────────────────────────────────────────────────────────────
 * --status-chip-* tokens are already remapped above, so .badge.status-
 * chip--* and .badge-sm--* automatically reskin. These rules normalize
 * decorative variants that don't read tokens (e.g. .owa-priority-chip,
 * .revsum-var--over/--under, ap-tag, ap-variance-warn).
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .badge,
html[data-theme="wireframe"] .badge-sm,
html[data-theme="wireframe"] .owa-priority-chip,
html[data-theme="wireframe"] .owa-tab-chip,
html[data-theme="wireframe"] .ap-tag,
html[data-theme="wireframe"] .chip,
html[data-theme="wireframe"] .pill {
  background: var(--white);
  border: 1px solid var(--gray-30);
  color: var(--gray-70);
  font-weight: 500;
}

/* Variance / numeric overlay colors → grayscale */
html[data-theme="wireframe"] .revsum-var--over,
html[data-theme="wireframe"] .revsum-var--under,
html[data-theme="wireframe"] .revsum-var--neutral,
html[data-theme="wireframe"] .ap-variance-warn,
html[data-theme="wireframe"] .delta-up,
html[data-theme="wireframe"] .delta-down {
  color: var(--gray-70);
}

/* Operational alert (Open Work blocked-assignment bar): keep contrast
   but strip the brand red wash to a neutral wireframe alert. */
html[data-theme="wireframe"] .owa-operational-message {
  background: var(--gray-10);
  border: 1px solid var(--gray-30);
  color: var(--gray-95);
}
html[data-theme="wireframe"] .owa-operational-message__icon,
html[data-theme="wireframe"] .owa-operational-message__icon * {
  color: var(--gray-50);
  fill: var(--gray-50);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 9 — Form controls (inputs, selects, checkboxes, radios)
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] input[type="text"],
html[data-theme="wireframe"] input[type="search"],
html[data-theme="wireframe"] input[type="email"],
html[data-theme="wireframe"] input[type="number"],
html[data-theme="wireframe"] textarea,
html[data-theme="wireframe"] select,
html[data-theme="wireframe"] .ap-form-select,
html[data-theme="wireframe"] .filter-input,
html[data-theme="wireframe"] .input,
html[data-theme="wireframe"] .form-field {
  background: var(--white);
  border: 1px solid var(--gray-30);
  color: var(--gray-95);
  box-shadow: none;
}
html[data-theme="wireframe"] input:focus,
html[data-theme="wireframe"] textarea:focus,
html[data-theme="wireframe"] select:focus,
html[data-theme="wireframe"] .ap-form-select:focus,
html[data-theme="wireframe"] .filter-input:focus {
  outline: 2px solid var(--gray-50);
  outline-offset: 0;
  border-color: var(--gray-50);
}
html[data-theme="wireframe"] input[type="checkbox"]:checked,
html[data-theme="wireframe"] input[type="radio"]:checked {
  accent-color: var(--gray-80);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 10 — Tabs and segmented controls
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .ap-tab,
html[data-theme="wireframe"] .owa-tab,
html[data-theme="wireframe"] .tab,
html[data-theme="wireframe"] .seg-control button {
  color: var(--gray-70);
}
html[data-theme="wireframe"] .ap-tab.active,
html[data-theme="wireframe"] .owa-tab.active,
html[data-theme="wireframe"] .tab.is-active,
html[data-theme="wireframe"] .ap-tab[aria-selected="true"],
html[data-theme="wireframe"] .owa-tab[aria-selected="true"],
html[data-theme="wireframe"] .seg-control button.is-active {
  color: var(--gray-95);
  border-bottom-color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 11 — Links & inline accents
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] a,
html[data-theme="wireframe"] .order-link,
html[data-theme="wireframe"] .owa-order-link,
html[data-theme="wireframe"] .cp-name {
  color: var(--gray-95);
  text-decoration: underline;
  text-decoration-color: var(--gray-30);
  text-underline-offset: 3px;
}
html[data-theme="wireframe"] a:hover,
html[data-theme="wireframe"] .order-link:hover,
html[data-theme="wireframe"] .owa-order-link:hover,
html[data-theme="wireframe"] .cp-name:hover {
  text-decoration-color: var(--gray-70);
}

/* Indigo focus outlines used by .edl-truncate:focus and similar */
html[data-theme="wireframe"] *:focus-visible {
  outline-color: var(--gray-50) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 12 — Hardcoded indigo (#3611C8) on inline SVG paths
 * ─────────────────────────────────────────────────────────────────────
 * Many expand chevrons + sort arrows embed `fill="#3611C8"` directly on
 * <path>. Override via the CSS attribute selector — neutral gray fill.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] svg path[fill="#3611C8"],
html[data-theme="wireframe"] svg path[fill="#5432FB"],
html[data-theme="wireframe"] svg path[fill="#928AFF"] {
  fill: var(--gray-70);
}
html[data-theme="wireframe"] .expand-chevron svg path,
html[data-theme="wireframe"] .owa-order-link svg path,
html[data-theme="wireframe"] .order-link svg path {
  fill: var(--gray-70);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 13 — Charts / progress / data viz accents
 * ─────────────────────────────────────────────────────────────────────
 * Dashboard progress bars, donut fills, and revenue/audit charts read
 * brand indigo as the accent. Token override handles most cases; these
 * rules normalize hardcoded fills.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .dash-opstat-bar,
html[data-theme="wireframe"] .progress-track {
  background: var(--gray-15);
}
html[data-theme="wireframe"] .dash-opstat-bar-fill,
html[data-theme="wireframe"] .progress-fill,
html[data-theme="wireframe"] .dash-mec-progress-fill {
  background: var(--gray-70);
}
html[data-theme="wireframe"] .dash-kpi-mom,
html[data-theme="wireframe"] .dash-kpi-sub {
  color: var(--gray-50);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 14 — Page background polish
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .page-shell,
html[data-theme="wireframe"] .page-content {
  background: var(--bg);
}
html[data-theme="wireframe"] .page-shell {
  background-image: none !important;
}
html[data-theme="wireframe"] .page-title {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .page-subtitle,
html[data-theme="wireframe"] .dash-section-subtitle {
  color: var(--gray-50);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 15 — Dashboard alert items
 * ─────────────────────────────────────────────────────────────────────
 * EDL Light hard-codes pale washes on `.dash-alert-item--warn`
 * (#FFFAF6, orange) and `.dash-alert-item--info` (#F8F7FF, purple).
 * Flatten both to neutral surface; keep border for shape.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .dash-alert-item--warn,
html[data-theme="wireframe"] .dash-alert-item--info,
html[data-theme="wireframe"] .dash-alert-item--success,
html[data-theme="wireframe"] .dash-alert-item--error {
  background: var(--white) !important;
  border-color: var(--gray-30) !important;
  color: var(--gray-95);
}
html[data-theme="wireframe"] .dash-alert-icon,
html[data-theme="wireframe"] .dash-alert-icon * {
  color: var(--gray-50) !important;
  fill: var(--gray-50) !important;
  stroke: var(--gray-50) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 16 — EDL Modal + PO Modal
 * ─────────────────────────────────────────────────────────────────────
 * `.edl-modal-btn--primary` hard-codes `#2F139F` on :hover even though
 * the base uses --indigo-70. Override both states. `.edl-modal-btn--
 * secondary` and `--demoted` read --indigo-70 / --indigo-10 → already
 * remapped, but we normalize hover wash. Modal containers and overlays
 * use neutral surfaces and a hairline border.
 * ════════════════════════════════════════════════════════════════════════ */
/* Shadow-ring on modal containers (layout-safe). `border-color:`
   override stays for the EDL modals that already declare a border
   (`.edl-modal`); for those that don't, the ring provides perimeter
   without shifting layout. */
html[data-theme="wireframe"] .edl-modal,
html[data-theme="wireframe"] .edl-modal-content,
html[data-theme="wireframe"] .edl-modal-header,
html[data-theme="wireframe"] .edl-modal-footer,
html[data-theme="wireframe"] .po-modal {
  background: var(--white) !important;
  border-color: var(--gray-30) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}
html[data-theme="wireframe"] .edl-modal-overlay,
html[data-theme="wireframe"] .po-modal-overlay {
  background: rgba(31, 41, 55, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="wireframe"] .edl-modal-title,
html[data-theme="wireframe"] .edl-modal-list-item,
html[data-theme="wireframe"] .edl-modal-search-input {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .edl-modal-close {
  color: var(--gray-70);
}
html[data-theme="wireframe"] .edl-modal-close:hover {
  color: var(--gray-95);
  background: var(--gray-10);
}

/* Primary action button — gray-95 fill */
html[data-theme="wireframe"] .edl-modal-btn--primary {
  background: var(--gray-95) !important;
  color: var(--white) !important;
  border-color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .edl-modal-btn--primary:hover {
  background: var(--gray-80) !important;
}
html[data-theme="wireframe"] .edl-modal-btn--primary:active {
  background: #111827 !important;
}
html[data-theme="wireframe"] .edl-modal-btn--primary:disabled {
  background: var(--gray-20) !important;
  color: var(--gray-50) !important;
  border-color: var(--gray-30) !important;
}

/* Secondary / demoted — gray outline */
html[data-theme="wireframe"] .edl-modal-btn--secondary {
  color: var(--gray-95) !important;
  background: var(--white) !important;
  border-color: var(--gray-30) !important;
}
html[data-theme="wireframe"] .edl-modal-btn--secondary:hover {
  background: var(--gray-10) !important;
}
html[data-theme="wireframe"] .edl-modal-btn--demoted {
  color: var(--gray-70) !important;
}

/* PO modal file icon — kill the gradient even though it was already
   gray. Use shadow-ring (layout-safe). */
html[data-theme="wireframe"] .po-modal-file-icon {
  background: var(--gray-10) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--gray-20);
}
html[data-theme="wireframe"] .po-modal-close {
  color: var(--gray-70);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 17 — EDL Toast (success/info/warn/error)
 * ─────────────────────────────────────────────────────────────────────
 * EDL Light hard-codes #087B60 (success green) on icon + title. Strip
 * the decorative box-shadow to a hairline.
 * ════════════════════════════════════════════════════════════════════════ */
/* Shadow-ring instead of `border:` — `.edl-toast` has no border in EDL
   Light (it gets perimeter from a soft shadow). Avoid 1px shift. */
html[data-theme="wireframe"] .edl-toast {
  background: var(--white) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}
html[data-theme="wireframe"] .edl-toast--success .edl-toast__icon,
html[data-theme="wireframe"] .edl-toast--success .edl-toast__title,
html[data-theme="wireframe"] .edl-toast--info .edl-toast__icon,
html[data-theme="wireframe"] .edl-toast--info .edl-toast__title,
html[data-theme="wireframe"] .edl-toast--warn .edl-toast__icon,
html[data-theme="wireframe"] .edl-toast--warn .edl-toast__title,
html[data-theme="wireframe"] .edl-toast--error .edl-toast__icon,
html[data-theme="wireframe"] .edl-toast--error .edl-toast__title {
  color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .edl-toast__icon svg,
html[data-theme="wireframe"] .edl-toast__icon path {
  fill: var(--gray-70) !important;
  stroke: var(--gray-70) !important;
}
html[data-theme="wireframe"] .edl-toast__body {
  color: var(--gray-80) !important;
}
html[data-theme="wireframe"] .edl-toast__dismiss {
  color: var(--gray-50);
}
html[data-theme="wireframe"] .edl-toast__dismiss:hover {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .edl-toast__action {
  color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 18 — Filter panel, column-select, search dropdowns
 * ─────────────────────────────────────────────────────────────────────
 * EDL Light uses heavy `box-shadow: 4px 0 16px rgba(0,0,0,0.5)` on
 * slide-in panels and `0 2px 8px rgba(0,0,0,0.4)` on dropdowns. These
 * read as decorative under wireframe — replace with a hairline.
 * ════════════════════════════════════════════════════════════════════════ */
/* Shadow-ring instead of `border:` to avoid layout shift on the panels
   that don't have a border in EDL Light (`.filter-panel`, `.colsel-panel`,
   `.col-resize-overlay`, `.more-menu-wrap`, `.invoice-panel`,
   `.revtab-panel`). For panels that already have a border, the ring
   sits invisibly behind their existing border. */
html[data-theme="wireframe"] .filter-panel,
html[data-theme="wireframe"] .colsel-panel,
html[data-theme="wireframe"] .tab-toolbar-search-dropdown,
html[data-theme="wireframe"] .filter-ms-layer,
html[data-theme="wireframe"] .invoice-cm-popover,
html[data-theme="wireframe"] .columns-popover,
html[data-theme="wireframe"] .col-resize-overlay,
html[data-theme="wireframe"] .more-menu,
html[data-theme="wireframe"] .more-submenu,
html[data-theme="wireframe"] .more-menu-wrap,
html[data-theme="wireframe"] .lock-options-menu,
html[data-theme="wireframe"] .line-items-lock-menu-panel,
html[data-theme="wireframe"] .invoice-panel,
html[data-theme="wireframe"] .revtab-panel,
html[data-theme="wireframe"] .view-panel,
html[data-theme="wireframe"] .dash-period-menu,
html[data-theme="wireframe"] .view-title-menu {
  background: var(--white) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}

/* Panel/popover overlays */
html[data-theme="wireframe"] .filter-overlay,
html[data-theme="wireframe"] .colsel-overlay {
  background: rgba(31, 41, 55, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 19 — Profile dropdown shadow flatten
 * ════════════════════════════════════════════════════════════════════════ */
/* Both `.profile-dropdown` and `.profile-dd-submenu` already have a
   border in EDL Light, so we just override its color via the token
   override. The shadow-ring is a layout-safe replacement for the soft
   drop-shadow. */
html[data-theme="wireframe"] .profile-dropdown,
html[data-theme="wireframe"] .profile-dd-submenu {
  background: var(--white) !important;
  border-color: var(--gray-30) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}
html[data-theme="wireframe"] .profile-dd-submenu-item.is-selected {
  color: var(--gray-95) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 20 — Presentation / walkthrough / guided tour
 * ─────────────────────────────────────────────────────────────────────
 * The dashboard's presentation mode uses indigo-tinted rgba (`rgba(54,
 * 17, 200, .04 / .06 / .12 / .18 / .22 / .30 / .42`) on labels, callout
 * chips, focus outlines, and exploded-stage backgrounds. Replace
 * wholesale with neutral grayscale equivalents.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .presentation-overlay,
html[data-theme="wireframe"] .presentation-dim-region {
  background: rgba(31, 41, 55, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="wireframe"] .presentation-panel {
  background: var(--white) !important;
  border: 1px solid var(--gray-30) !important;
  box-shadow: none !important;
  color: var(--gray-95);
}
html[data-theme="wireframe"] .presentation-title,
html[data-theme="wireframe"] .presentation-desc,
html[data-theme="wireframe"] .presentation-section-label,
html[data-theme="wireframe"] .presentation-callout,
html[data-theme="wireframe"] .presentation-callout-feature,
html[data-theme="wireframe"] .presentation-callout-explanation {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .presentation-callout--bullet {
  color: var(--gray-80);
}
/* Callout chip — indigo wash → neutral wash */
html[data-theme="wireframe"] .presentation-callout-chip {
  background: var(--gray-10) !important;
  color: var(--gray-95) !important;
  border-color: var(--gray-30) !important;
  box-shadow: none !important;
}
/* Presentation buttons — grayscale */
html[data-theme="wireframe"] .presentation-btn,
html[data-theme="wireframe"] .presentation-btn--primary {
  background: var(--gray-95) !important;
  color: var(--white) !important;
  border-color: var(--gray-95) !important;
  box-shadow: none !important;
}
html[data-theme="wireframe"] .presentation-btn:hover,
html[data-theme="wireframe"] .presentation-btn--primary:hover {
  background: var(--gray-80) !important;
}
html[data-theme="wireframe"] .presentation-btn:focus,
html[data-theme="wireframe"] .presentation-btn--primary:focus {
  outline: 2px solid var(--gray-50) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
html[data-theme="wireframe"] .presentation-btn--link {
  background: transparent !important;
  color: var(--gray-95) !important;
  border-color: transparent !important;
}
/* Focus outline highlight (the indigo "look-here" ring) */
html[data-theme="wireframe"] body.presentation-mode-active .presentation-focus-outline {
  box-shadow: 0 0 0 2px var(--gray-70) !important;
  background: transparent !important;
}
html[data-theme="wireframe"] .presentation-focus-arrow,
html[data-theme="wireframe"] .presentation-focus-arrow * {
  color: var(--gray-70) !important;
  fill: var(--gray-70) !important;
  stroke: var(--gray-70) !important;
}
/* Architecture stage — indigo-tinted gradients → flat surface */
html[data-theme="wireframe"] .presentation-step-0 .presentation-exploded-stage,
html[data-theme="wireframe"] .presentation-architecture-shell,
html[data-theme="wireframe"] .presentation-architecture-shell::before,
html[data-theme="wireframe"] .presentation-architecture-label,
html[data-theme="wireframe"] .presentation-architecture-label::before,
html[data-theme="wireframe"] .presentation-architecture-label::after,
html[data-theme="wireframe"] .presentation-architecture-clone,
html[data-theme="wireframe"] .presentation-architecture-preview {
  background: var(--white) !important;
  background-image: none !important;
  border-color: var(--gray-20) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="wireframe"] .presentation-architecture-title,
html[data-theme="wireframe"] .presentation-architecture-desc,
html[data-theme="wireframe"] .presentation-architecture-name,
html[data-theme="wireframe"] .presentation-hierarchy-name,
html[data-theme="wireframe"] .presentation-hierarchy-question,
html[data-theme="wireframe"] .presentation-layer-label {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .presentation-progress {
  color: var(--gray-50);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 21 — Filter multi-select chip remove (hover indigo wash)
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .filter-ms-chip-remove:hover {
  background: var(--gray-15) !important;
}
html[data-theme="wireframe"] .filter-ms-chip {
  background: var(--white);
  border: 1px solid var(--gray-30);
  color: var(--gray-80);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 22 — Revenue & Billing Walkthrough command palette
 * ─────────────────────────────────────────────────────────────────────
 * `.rbw-command-entry`'s focus state hard-codes `rgba(54, 17, 200, .30)`
 * for the indigo glow. Neutralize.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .rbw-command-entry,
html[data-theme="wireframe"] .rbw-command-entry:hover,
html[data-theme="wireframe"] .rbw-command-entry:focus {
  background: var(--white) !important;
  border-color: var(--gray-30) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
  color: var(--gray-95);
  outline: none !important;
}
html[data-theme="wireframe"] .rbw-command-entry:focus {
  box-shadow: 0 0 0 2px var(--gray-70) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 23 — Catch-all: kill decorative gradients & glass
 * ─────────────────────────────────────────────────────────────────────
 * Across all 16 pages that use linear-gradient and the 10 pages that
 * use backdrop-filter (mostly intro slides and walkthrough overlays),
 * we want grayscale only. These rules target the specific known
 * decorative containers. Using class-specific selectors (not `*`)
 * preserves legitimate images like the HARPS logo.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .slide,
html[data-theme="wireframe"] .slide::before,
html[data-theme="wireframe"] .slide::after,
html[data-theme="wireframe"] .arrow-h,
html[data-theme="wireframe"] .arrow-v,
html[data-theme="wireframe"] .arrow-label,
html[data-theme="wireframe"] .box-finance,
html[data-theme="wireframe"] .intel-box,
html[data-theme="wireframe"] .intel-box::before,
html[data-theme="wireframe"] .jarvis-label,
html[data-theme="wireframe"] .jarvis-label::before,
html[data-theme="wireframe"] .jarvis-label::after,
html[data-theme="wireframe"] .validated-data,
html[data-theme="wireframe"] .validated-data::before,
html[data-theme="wireframe"] .long-arrow,
html[data-theme="wireframe"] .long-arrow::before,
html[data-theme="wireframe"] .section-header,
html[data-theme="wireframe"] .section-header::before,
html[data-theme="wireframe"] .section-icon,
html[data-theme="wireframe"] .endpoint-icon,
html[data-theme="wireframe"] .state-zone,
html[data-theme="wireframe"] .sox-label,
html[data-theme="wireframe"] .workflow-connector,
html[data-theme="wireframe"] .workflow-connector::before,
html[data-theme="wireframe"] .send-to-client-row,
html[data-theme="wireframe"] .send-to-client-row .endpoint-icon,
html[data-theme="wireframe"] .numbered-list,
html[data-theme="wireframe"] .numbered-list::before {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Slide backgrounds (intro pages) → flat white with shadow-ring */
html[data-theme="wireframe"] .slide {
  background: var(--white) !important;
  box-shadow: 0 0 0 1px var(--gray-20) !important;
}

/* Intro-page boxes — flat, layout-safe shadow-ring */
html[data-theme="wireframe"] .box-finance,
html[data-theme="wireframe"] .intel-box,
html[data-theme="wireframe"] .validated-data {
  background: var(--white) !important;
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}

/* Intro labels — `border-color:` only (no width change); these
   elements already have a border in EDL Light. */
html[data-theme="wireframe"] .jarvis-label,
html[data-theme="wireframe"] .arrow-label,
html[data-theme="wireframe"] .sox-label,
html[data-theme="wireframe"] .section-icon,
html[data-theme="wireframe"] .endpoint-icon,
html[data-theme="wireframe"] .state-zone {
  background: var(--gray-10) !important;
  color: var(--gray-95) !important;
  border-color: var(--gray-30) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 24 — Catch-all: brand rgba on inline styles & arrow lines
 * ─────────────────────────────────────────────────────────────────────
 * Any element with an inline `style="...rgba(54, 17, 200, ...)..."` or
 * `style="...linear-gradient..."` — flatten. This catches dynamic
 * inline styling set by walkthrough JS.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] [style*="rgba(54, 17, 200"],
html[data-theme="wireframe"] [style*="rgba(54,17,200"],
html[data-theme="wireframe"] [style*="linear-gradient"] {
  background-image: none !important;
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 25 — SVG icon stroke catch-all
 * ─────────────────────────────────────────────────────────────────────
 * Some inline icons use `stroke="#3611C8"` rather than `fill`. Phase 12
 * caught fills; this catches strokes.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] svg path[stroke="#3611C8"],
html[data-theme="wireframe"] svg path[stroke="#5432FB"],
html[data-theme="wireframe"] svg path[stroke="#928AFF"],
html[data-theme="wireframe"] svg path[stroke="#4A22D4"],
html[data-theme="wireframe"] svg circle[stroke="#3611C8"],
html[data-theme="wireframe"] svg rect[stroke="#3611C8"] {
  stroke: var(--gray-70) !important;
}
html[data-theme="wireframe"] svg path[fill="#4A22D4"],
html[data-theme="wireframe"] svg path[fill="#2E0FA0"],
html[data-theme="wireframe"] svg path[fill="#3B27D8"] {
  fill: var(--gray-70) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 26 — Disabled state consistency
 * ─────────────────────────────────────────────────────────────────────
 * Across forms and buttons. Make sure disabled looks unambiguously
 * disabled in grayscale only.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] button:disabled,
html[data-theme="wireframe"] input:disabled,
html[data-theme="wireframe"] select:disabled,
html[data-theme="wireframe"] textarea:disabled,
html[data-theme="wireframe"] [aria-disabled="true"] {
  background: var(--gray-10) !important;
  color: var(--gray-40) !important;
  border-color: var(--gray-20) !important;
  cursor: not-allowed;
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 27 — EDL ::selection (text selection highlight)
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] ::selection {
  background: var(--gray-20);
  color: var(--gray-95);
}
html[data-theme="wireframe"] ::-moz-selection {
  background: var(--gray-20);
  color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 28 — Scrollbars (WebKit / Blink)
 * ────────────────────────────────────────────────────────────────────
 * EDL Light scrollbars use brand-tinged thumb colors on a few pages.
 * Grayscale them.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] ::-webkit-scrollbar-thumb {
  background: var(--gray-30);
}
html[data-theme="wireframe"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-40);
}
html[data-theme="wireframe"] ::-webkit-scrollbar-track {
  background: var(--gray-10);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 29 — Finance Dashboard colored accents
 * ─────────────────────────────────────────────────────────────────────
 * Dashboard widgets (KPI cards, Billing Status / dash-opstat, Triage,
 * MEC, Audit Tracker, Metric cards, Progress bars, OWA links) hardcode
 * non-token brand hex values for orange / green / cyan / red / indigo
 * states. Those values bypass the --indigo-* / --status-* token system,
 * so the global token remap can't reach them. Flatten every colored
 * number, bar, border, bullet, wash, and hover to grayscale.
 *
 * Pattern: keep the original CSS property (color / background /
 * border-color) but force a grayscale value. Use `!important` only
 * where the source rule has higher specificity than the wireframe
 * override (e.g. `.dash-opstat-card--orange .dash-opstat-num`).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Nav rail icons: guarantee grayscale SVG fill (belt-and-suspenders) */
html[data-theme="wireframe"] .rail-icon-tile svg,
html[data-theme="wireframe"] .rail-icon-tile svg path {
  fill: var(--gray-70);
}
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile svg,
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile svg path {
  fill: var(--white);
}

/* ── KPI summary card: month-over-month delta */
html[data-theme="wireframe"] .dash-kpi-mom {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .dash-kpi-mom-icon,
html[data-theme="wireframe"] .dash-kpi-mom-icon svg,
html[data-theme="wireframe"] .dash-kpi-mom-icon svg path {
  fill: var(--gray-70);
  stroke: var(--gray-70);
  color: var(--gray-70);
}

/* ── Billing Status (dash-opstat) numbers */
html[data-theme="wireframe"] .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--orange .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--green .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--default .dash-opstat-num,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card:nth-child(1) .dash-opstat-num,
html[data-theme="wireframe"] .dash-sections[data-period-state="closed"] .dash-billing-status .dash-opstat-num {
  color: var(--gray-95);
}

/* ── Billing Status progress bars: keep the bar, force grayscale fill */
html[data-theme="wireframe"] .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--orange .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--green .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-card--default .dash-opstat-bar-fill,
html[data-theme="wireframe"] .dash-sections[data-period-state="closed"] .dash-billing-status .dash-opstat-bar-fill {
  background: var(--gray-70);
  opacity: 1;
}
html[data-theme="wireframe"] .dash-opstat-bar-track,
html[data-theme="wireframe"] .dash-billing-status .dash-opstat-bar-track {
  background: var(--gray-10);
}

/* ── Billing Status card border colors (orange/green washes) */
html[data-theme="wireframe"] .dash-opstat-card--orange,
html[data-theme="wireframe"] .dash-opstat-card--green,
html[data-theme="wireframe"] .dash-opstat-card--default {
  border-color: var(--gray-20);
}

/* ── Triage Feed: audit (amber) / approval (red) / reviewed (green) */
html[data-theme="wireframe"] .dash-tf-item--audit,
html[data-theme="wireframe"] .dash-tf-item--approval,
html[data-theme="wireframe"] .dash-tf-item--reviewed {
  color: var(--gray-95);
  background: var(--white);
  border-color: var(--gray-20);
}
html[data-theme="wireframe"] .dash-tf-context-list li.dash-tf-context--audit::before,
html[data-theme="wireframe"] .dash-tf-context-list li.dash-tf-context--approval::before,
html[data-theme="wireframe"] .dash-tf-context-list li.dash-tf-context--reviewed::before {
  background: var(--gray-50);
  color: var(--gray-50);
}
html[data-theme="wireframe"] .dash-tf-btn-primary:hover {
  background: var(--gray-80);
  color: var(--white);
  border-color: var(--gray-80);
}

/* ── MEC (Mid-period / End-of-cycle) bar + stat icons */
html[data-theme="wireframe"] .dash-mec-bar-fill {
  background: var(--gray-70);
}
html[data-theme="wireframe"] .dash-mec-stat-icon--pass,
html[data-theme="wireframe"] .dash-mec-stat-icon--fail {
  color: var(--gray-95);
  fill: var(--gray-95);
}
html[data-theme="wireframe"] .dash-mec-stat-icon--pass svg path,
html[data-theme="wireframe"] .dash-mec-stat-icon--fail svg path {
  fill: var(--gray-70);
  stroke: var(--gray-70);
}

/* ── Audit Tracker segmented bar (Invoiced / Reviewed1 / Reviewed2) */
html[data-theme="wireframe"] .dash-audit-seg--invoiced {
  background: var(--gray-95);
}
html[data-theme="wireframe"] .dash-audit-seg--reviewed1 {
  background: var(--gray-70);
}
html[data-theme="wireframe"] .dash-audit-seg--reviewed2 {
  background: var(--gray-40);
}

/* ── Generic progress bar fills (green / amber variants) */
html[data-theme="wireframe"] .dash-progress-bar-fill--green {
  background: var(--gray-70);
}
html[data-theme="wireframe"] .dash-progress-bar-fill--amber {
  background: var(--gray-60);
}

/* ── Metric cards (orange / green / red value text + bar fills) */
html[data-theme="wireframe"] .dash-metric-card--orange .dash-metric-card-value,
html[data-theme="wireframe"] .dash-metric-card--green .dash-metric-card-value,
html[data-theme="wireframe"] .dash-metric-card--red .dash-metric-card-value {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .dash-metric-bar-fill--orange,
html[data-theme="wireframe"] .dash-metric-bar-fill--green,
html[data-theme="wireframe"] .dash-metric-bar-fill--red {
  background: var(--gray-70);
}

/* ── Priority/Complete metric card washes (orange #FFD2AD, pink #F2C0C0, etc.) */
html[data-theme="wireframe"] .dash-metric-card--priority-main,
html[data-theme="wireframe"] .dash-metric-card--priority-secondary,
html[data-theme="wireframe"] .dash-metric-card--priority-complete {
  background: var(--white);
  border-color: var(--gray-20);
}
html[data-theme="wireframe"] .dash-metric-card--priority-main .dash-metric-card-title,
html[data-theme="wireframe"] .dash-metric-card--priority-secondary .dash-metric-card-title,
html[data-theme="wireframe"] .dash-metric-card--priority-complete .dash-metric-card-title {
  color: var(--gray-95);
}

/* ── Metric CTAs (link variant green; primary indigo hover/focus) */
html[data-theme="wireframe"] .dash-metric-cta--link,
html[data-theme="wireframe"] a.dash-metric-cta.dash-metric-cta--link {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .dash-metric-cta--link:focus,
html[data-theme="wireframe"] a.dash-metric-cta.dash-metric-cta--link:focus {
  color: var(--gray-95);
  outline-color: var(--gray-50);
}
html[data-theme="wireframe"] .dash-metric-cta--primary:focus,
html[data-theme="wireframe"] a.dash-metric-cta.dash-metric-cta--primary:focus {
  background: var(--gray-95);
  border-color: var(--gray-95);
}

/* ── Open Work order link hover (was indigo #2E0FA0) */
html[data-theme="wireframe"] #owa-content .owa-order-link:hover,
html[data-theme="wireframe"] .owa-order-link:hover {
  color: var(--gray-95);
}

/* ── Revenue Summary positive/negative deltas */
html[data-theme="wireframe"] .revsum-negative,
html[data-theme="wireframe"] .revsum-positive {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .revsum-negative svg path,
html[data-theme="wireframe"] .revsum-positive svg path {
  fill: var(--gray-70);
  stroke: var(--gray-70);
}

/* ── Dash edit save / Presentation panel hover/active (indigo hex literals) */
html[data-theme="wireframe"] .dash-edit-save:hover {
  background: var(--gray-80);
  border-color: var(--gray-80);
}
html[data-theme="wireframe"] .presentation-btn--primary:focus,
html[data-theme="wireframe"] .presentation-panel .presentation-controls .presentation-btn.presentation-btn--primary:focus {
  background: var(--gray-95);
  border-color: var(--gray-95);
}
html[data-theme="wireframe"] .presentation-btn--primary:active,
html[data-theme="wireframe"] .presentation-panel .presentation-controls .presentation-btn.presentation-btn--primary:active {
  background: #111827;
  border-color: #111827;
}

/* ── Any remaining inline brand hex usages on dashboard widgets:
   catch SVG icons that use the colored states */
html[data-theme="wireframe"] .dash-opstat-card svg[stroke="#FF8000"],
html[data-theme="wireframe"] .dash-opstat-card svg[stroke="#C25100"],
html[data-theme="wireframe"] .dash-opstat-card svg[stroke="#059D6D"],
html[data-theme="wireframe"] .dash-opstat-card svg[stroke="#1EA1C8"] {
  stroke: var(--gray-70);
}
html[data-theme="wireframe"] .dash-opstat-card svg[fill="#FF8000"],
html[data-theme="wireframe"] .dash-opstat-card svg[fill="#C25100"],
html[data-theme="wireframe"] .dash-opstat-card svg[fill="#059D6D"],
html[data-theme="wireframe"] .dash-opstat-card svg[fill="#1EA1C8"] {
  fill: var(--gray-70);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 30 — Asset SVGs loaded via <img>
 * ─────────────────────────────────────────────────────────────────────
 * `<img src="assets/left-rail/*.svg">`, `<img src="assets/nav/*.svg">`,
 * `<img src="assets/detail/*.svg">` etc. load SVGs in a separate doc
 * context. Their hardcoded `fill="var(--fill-0, #3611C8)"` attributes
 * never see the parent page's CSS variables, so the bare SVG renders in
 * EDL brand purple (`#3611C8`) regardless of the active theme.
 *
 * CSS `filter:` does apply to the <img> box. `brightness(0)` flattens
 * any source pixel to pure black; `invert(N)` then lifts that black to
 * a neutral gray at lightness N. This converts ANY brand-hex fill into
 * a uniform neutral icon.
 *
 *   filter: brightness(0) invert(0.4)  →  solid #666 (gray-60-ish)
 *   filter: brightness(0) invert(1)    →  solid white
 *
 * Note: filter does NOT affect element box size, so layout is safe.
 * ════════════════════════════════════════════════════════════════════════ */

/* Left-rail icons that load colored asset SVGs */
html[data-theme="wireframe"] img.rail-icon {
  filter: brightness(0) invert(0.45);
}
/* …but when the rail item is the current page, the original EDL Light
   rule already applies `brightness(0) invert(1)` to make the icon white-
   on-dark-tile. Keep that. The selector below preserves white-on-dark. */
html[data-theme="wireframe"] .rail-item--default[aria-current="page"] img.rail-icon {
  filter: brightness(0) invert(1);
}

/* Top-nav bell icon (asset is light-purple #E6E6FF; force white) */
html[data-theme="wireframe"] .pnav-icon,
html[data-theme="wireframe"] .pnav-icon-slot img,
html[data-theme="wireframe"] .pnav-bell,
html[data-theme="wireframe"] img[src*="nav-bell"] {
  filter: brightness(0) invert(1);
}

/* Top-nav divider stroke (asset has stroke="#928AFF"); fade to mid-gray */
html[data-theme="wireframe"] img[src*="nav-divider"] {
  filter: brightness(0) invert(0.7);
  opacity: 0.5;
}

/* Disney Advertising wordmark / logo on the dark nav (asset is white,
   so a no-op `brightness(0) invert(1)` keeps it crisp on neutral gray) */
html[data-theme="wireframe"] img[src*="disney-advertising-logo"] {
  filter: brightness(0) invert(1);
}

/* Detail-page asset SVGs (invoice-indigo, attachment, history, etc.) */
html[data-theme="wireframe"] img[src*="assets/detail/"] {
  filter: brightness(0) invert(0.45);
}

/* Intro pages corner logo + receipt (brand-color asset SVGs) */
html[data-theme="wireframe"] img[src*="assets/intro/corner-logo"],
html[data-theme="wireframe"] img[src*="assets/intro/p4-receipt"] {
  filter: grayscale(1) contrast(0.85);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 31 — Inline SVG hardcoded brand-hex fills
 * ─────────────────────────────────────────────────────────────────────
 * Many HARPS chevrons / icons are inlined as `<svg><path fill="#3611C8"
 * /></svg>` directly in the HTML. CSS `fill: ...` on `svg path` does
 * override the presentation `fill="..."` attribute, so we can re-color
 * these without touching the markup.
 * ════════════════════════════════════════════════════════════════════════ */

/* OWA expand chevron + any inline SVG using brand-hex fill on its path */
html[data-theme="wireframe"] .expand-chevron svg path[fill="#3611C8"],
html[data-theme="wireframe"] .expand-chevron svg path,
html[data-theme="wireframe"] svg path[fill="#3611C8"],
html[data-theme="wireframe"] svg path[fill="#5432FB"],
html[data-theme="wireframe"] svg path[fill="#705CFF"],
html[data-theme="wireframe"] svg path[fill="#928AFF"],
html[data-theme="wireframe"] svg path[fill="#4A22D4"],
html[data-theme="wireframe"] svg path[fill="#2E0FA0"],
html[data-theme="wireframe"] svg path[fill="#E6E6FF"] {
  fill: var(--gray-60);
}

/* Brand-tinted strokes on inline SVGs */
html[data-theme="wireframe"] svg path[stroke="#3611C8"],
html[data-theme="wireframe"] svg path[stroke="#5432FB"],
html[data-theme="wireframe"] svg path[stroke="#928AFF"],
html[data-theme="wireframe"] svg line[stroke="#928AFF"],
html[data-theme="wireframe"] svg circle[stroke="#3611C8"] {
  stroke: var(--gray-60);
}

/* Status / accent inline SVGs (orange, green, red, cyan, yellow) */
html[data-theme="wireframe"] svg path[fill="#FF8000"],
html[data-theme="wireframe"] svg path[fill="#C25100"],
html[data-theme="wireframe"] svg path[fill="#DA6A00"],
html[data-theme="wireframe"] svg path[fill="#9D4200"],
html[data-theme="wireframe"] svg path[fill="#FDBE00"],
html[data-theme="wireframe"] svg path[fill="#059D6D"],
html[data-theme="wireframe"] svg path[fill="#087B60"],
html[data-theme="wireframe"] svg path[fill="#075E49"],
html[data-theme="wireframe"] svg path[fill="#2C6E5A"],
html[data-theme="wireframe"] svg path[fill="#C20031"],
html[data-theme="wireframe"] svg path[fill="#DA1E28"],
html[data-theme="wireframe"] svg path[fill="#A00032"],
html[data-theme="wireframe"] svg path[fill="#1EA1C8"] {
  fill: var(--gray-70);
}
html[data-theme="wireframe"] svg path[stroke="#FF8000"],
html[data-theme="wireframe"] svg path[stroke="#C25100"],
html[data-theme="wireframe"] svg path[stroke="#DA6A00"],
html[data-theme="wireframe"] svg path[stroke="#059D6D"],
html[data-theme="wireframe"] svg path[stroke="#087B60"],
html[data-theme="wireframe"] svg path[stroke="#C20031"],
html[data-theme="wireframe"] svg path[stroke="#DA1E28"],
html[data-theme="wireframe"] svg path[stroke="#1EA1C8"],
html[data-theme="wireframe"] svg path[stroke="#FDBE00"] {
  stroke: var(--gray-70);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 32 — Open Work alert strip ("X blocked assignments")
 * ─────────────────────────────────────────────────────────────────────
 * `#owa-content .owa-operational-message` reads --notice-error-* tokens
 * for its red base style, AND a later rule uses `!important rgba(218,
 * 30, 40, 0.22)` for the border which bypasses the token system. Force
 * the entire alert strip (base + severity variants) to neutral.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] #owa-content .owa-operational-message,
html[data-theme="wireframe"] #owa-content .owa-operational-message.is-calm,
html[data-theme="wireframe"] #owa-content .owa-operational-message.is-warning,
html[data-theme="wireframe"] #owa-content .owa-operational-message.is-blocked,
html[data-theme="wireframe"] .owa-operational-message {
  background: var(--gray-10) !important;
  border-color: var(--gray-30) !important;
  color: var(--gray-95) !important;
  box-shadow: none !important;
}
html[data-theme="wireframe"] #owa-content .owa-operational-message__icon,
html[data-theme="wireframe"] #owa-content .owa-operational-message.is-calm .owa-operational-message__icon,
html[data-theme="wireframe"] #owa-content .owa-operational-message.is-warning .owa-operational-message__icon,
html[data-theme="wireframe"] .owa-operational-message__icon {
  color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .owa-operational-message__icon svg circle,
html[data-theme="wireframe"] .owa-operational-message__icon svg path {
  stroke: currentColor;
  fill: currentColor;
}
html[data-theme="wireframe"] #owa-content .owa-operational-message__text,
html[data-theme="wireframe"] .owa-operational-message__text {
  color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 33 — Top nav: guarantee pure-neutral charcoal
 * ─────────────────────────────────────────────────────────────────────
 * EDL Light's `.primary-nav` and `.pnav-module` set `background: var
 * (--indigo-70)`. The Phase 1 remap (`--indigo-70: #404040`) lands on
 * a true neutral, but the user reported the nav still feeling "blue".
 * Explicit override removes any doubt and also kills the rgba overlays
 * that some pages add for the active item.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .primary-nav,
html[data-theme="wireframe"] .pnav-module {
  background: var(--gray-95);
  box-shadow: none;
}
html[data-theme="wireframe"] .pnav-item-text {
  color: #E5E5E5;
}
html[data-theme="wireframe"] .pnav-item.active .pnav-item-text {
  color: #FFFFFF;
}
html[data-theme="wireframe"] .pnav-item.active {
  background: rgba(255, 255, 255, 0.12);
}
html[data-theme="wireframe"] .pnav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="wireframe"] .pnav-icon-slot:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 34 — OWA + dashboard misc accent leaks not yet covered
 * ─────────────────────────────────────────────────────────────────────
 * Catch-all for anything that snuck past the token system:
 *   - `.owa-tab.active` + `::after` underline (token-driven, OK once
 *     --indigo-70 is neutral, but make explicit).
 *   - `.owa-order-link` baseline color (was indigo via --indigo-70).
 *   - `.dash-section-accordion-toggle` chevron tint.
 *   - Sort-direction arrow svg fill hardcoded as `#A6B4C3` (already
 *     gray but cool-tinted; remap to true neutral).
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] .owa-tab.active {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .owa-tab.active::after {
  background: var(--gray-95);
}
html[data-theme="wireframe"] .owa-tab:not(.active):hover {
  color: var(--gray-80);
}
html[data-theme="wireframe"] .owa-tab:focus-visible {
  outline: 2px solid var(--gray-60);
}
html[data-theme="wireframe"] .owa-order-link,
html[data-theme="wireframe"] #owa-content .owa-order-link {
  color: var(--gray-95);
}
html[data-theme="wireframe"] #owa-content .owa-order-link:hover,
html[data-theme="wireframe"] .owa-order-link:hover {
  color: var(--gray-95);
}
/* Cool-gray hardcoded sort-icon fill */
html[data-theme="wireframe"] .th-sort svg path[fill="#A6B4C3"],
html[data-theme="wireframe"] svg path[fill="#A6B4C3"] {
  fill: var(--gray-40);
}
/* Section chevron tint (some pages use --indigo-30 for muted chevron) */
html[data-theme="wireframe"] .dash-section-chevron,
html[data-theme="wireframe"] .dash-section-chevron path {
  color: var(--gray-70);
  stroke: var(--gray-70);
}
/* Tooltip arrow / bg used by `[data-tooltip]::before/::after` patterns:
   EDL Light hardcodes `#3A4652` (warm slate). Convert to neutral so any
   pure-grayscale picker reads neutral charcoal. */
html[data-theme="wireframe"] [data-tooltip]::after,
html[data-theme="wireframe"] [data-tooltip]::before,
html[data-theme="wireframe"] .edl-tooltip,
html[data-theme="wireframe"] .edl-tooltip::after,
html[data-theme="wireframe"] .edl-tooltip::before {
  background-color: var(--gray-95);
  border-color: var(--gray-95);
  border-bottom-color: var(--gray-95);
  color: var(--white);
}

/* Selection / caret accent (some browsers use brand indigo by default) */
html[data-theme="wireframe"] *::selection {
  background: var(--gray-20);
  color: var(--gray-95);
}

/* Focus ring fallback (defeats any `outline-color: var(--indigo-70)`
   that wasn't already picked up by the token remap due to !important) */
html[data-theme="wireframe"] *:focus-visible {
  outline-color: var(--gray-60);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 35 — Remaining brand-indigo leaks on detail/order/invoice pages
 * ─────────────────────────────────────────────────────────────────────
 * Order detail, Invoice detail, and Sales Line Items pages hardcode
 * deeper indigo hex shades (#2D0EA8, #2F139F, #281379, #B8B8FF) for
 * action button hover / active / focus states. Plus the PO modal,
 * page-alert-dismiss control, and the KPI green/red value classes on
 * the GL Export page.
 * ════════════════════════════════════════════════════════════════════════ */

/* PO modal primary CTA hover (deep indigo) */
html[data-theme="wireframe"] .po-modal-btn-primary:hover,
html[data-theme="wireframe"] .po-modal-btn-primary:focus,
html[data-theme="wireframe"] .po-modal-btn-primary:active {
  background: var(--gray-80);
  border-color: var(--gray-80);
  color: var(--white);
}

/* Page-level alert dismiss button (was red #A00032 / #DA1E28) */
html[data-theme="wireframe"] .page-alert-dismiss,
html[data-theme="wireframe"] .page-alert-dismiss:hover,
html[data-theme="wireframe"] .page-alert-dismiss:active,
html[data-theme="wireframe"] .page-alert-dismiss:focus {
  color: var(--gray-95);
  background: transparent;
  border-color: var(--gray-30);
}

/* Sales Line Items action buttons (more / review / demoted / standard /
   promoted) — hover #2F139F, active #281379, active-bg #B8B8FF */
html[data-theme="wireframe"] .line-items-action-btn--more:hover:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--review:hover:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--demoted:hover:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--standard:hover:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--promoted:hover:not(:disabled) {
  color: var(--gray-95);
  border-color: var(--gray-40);
  background: var(--gray-10);
}
html[data-theme="wireframe"] .line-items-action-btn--more:active:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--review:active:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--demoted:active:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--standard:active:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--promoted:active:not(:disabled) {
  color: var(--gray-95);
  border-color: var(--gray-50);
  background: var(--gray-20);
}
html[data-theme="wireframe"] .line-items-action-btn--more:focus-visible:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--review:focus-visible:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--demoted:focus-visible:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--standard:focus-visible:not(:disabled),
html[data-theme="wireframe"] .line-items-action-btn--promoted:focus-visible:not(:disabled) {
  outline-color: var(--gray-60);
}

/* Sales Line Items "Lock options" trigger + menu items */
html[data-theme="wireframe"] .line-items-lock-trigger[aria-expanded="true"],
html[data-theme="wireframe"] .line-items-lock-menu-item[aria-selected="true"],
html[data-theme="wireframe"] .line-items-lock-menu-item:focus-visible {
  color: var(--gray-95);
  border-color: var(--gray-50);
  outline-color: var(--gray-60);
}
html[data-theme="wireframe"] .line-items-lock-menu-item:active:not(:disabled) {
  background: var(--gray-20);
  color: var(--gray-95);
}

/* GL Export KPI value variants (green #087B60, red #DA1E28) */
html[data-theme="wireframe"] .dash-kpi-value--green,
html[data-theme="wireframe"] .dash-kpi-value--red {
  color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 36 — Neutralize EDL cool-gray hardcoded literals
 * ─────────────────────────────────────────────────────────────────────
 * Several legacy components hardcode slate-tinted gray hex values
 * (#1F2937, #3A4652, #526374, #6A8095, #4B5F73, #6B7F95, #E1E7EF,
 * #D6DEE8, #C7D0DB, #2E3841, #3E4D5B, #5F6B7A, #151B22, #222A30,
 * #8498A9, #A6B4C3) outside the --gray-* token system. These ARE
 * grayscale numerically but carry a slight cool/blue undertone that
 * a strict wireframe audit flags as "feels blue".
 *
 * Map every known cool-gray literal to its true-neutral equivalent
 * so the wireframe view holds up under a color-picker check.
 * ════════════════════════════════════════════════════════════════════════ */

/* Profile dropdown (top-nav avatar menu) */
html[data-theme="wireframe"] .profile-dropdown,
html[data-theme="wireframe"] .profile-dd-submenu {
  background: var(--white);
  border-color: var(--gray-20);
  box-shadow: 0 0 0 1px var(--gray-20);
}
html[data-theme="wireframe"] .profile-dd-name,
html[data-theme="wireframe"] .profile-dd-section-label,
html[data-theme="wireframe"] .profile-dd-item,
html[data-theme="wireframe"] .profile-dd-submenu-item {
  color: var(--gray-95);
}
/* System Map is the one row in that menu built as an anchor, so v2-shell.css
   pins its colour to stop the ADS theme's `a` rule painting it brand indigo.
   That pin reaches further than the re-map directly above, and v2-shell.css
   loads after this file, so Wireframe has to restate the same token at
   matching reach or the row would sit at EDL's ink among grayscale
   neighbours. Colour only — the layout is shared and untouched. */
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item,
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item:link,
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item:visited,
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item:hover,
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item:focus,
html[data-theme="wireframe"] .profile-dropdown a.profile-dd-item:focus-visible {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .profile-dd-email,
html[data-theme="wireframe"] .profile-dd-section-value,
html[data-theme="wireframe"] .profile-dd-item svg,
html[data-theme="wireframe"] .profile-dd-logout {
  color: var(--gray-50);
}
html[data-theme="wireframe"] .profile-dd-divider {
  background: var(--gray-20);
}

/* Table header label and invoice subtable header label */
html[data-theme="wireframe"] .th-label,
html[data-theme="wireframe"] #owa-content .th-label,
html[data-theme="wireframe"] .inv-th-label {
  color: var(--gray-70);
}

/* Dashboard audit bar header right value + multibar segment */
html[data-theme="wireframe"] .dash-audit-bar-header :last-child {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .dash-audit-multibar {
  background: var(--gray-20);
}

/* Dashboard / GL Export KPI label */
html[data-theme="wireframe"] .dash-kpi-label {
  color: var(--gray-70);
}

/* Tab-toolbar search input + recent-search dropdown */
html[data-theme="wireframe"] .tab-toolbar-search-input {
  color: var(--gray-95);
  border-color: var(--gray-30);
  background: var(--white);
}
html[data-theme="wireframe"] .tab-toolbar-search-recent-title {
  color: var(--gray-60);
}
html[data-theme="wireframe"] .tab-toolbar-search-recent-btn {
  color: var(--gray-95);
}

/* EDL modal search box + scrollbar */
html[data-theme="wireframe"] .edl-modal-search-label {
  color: var(--gray-60);
}
html[data-theme="wireframe"] .edl-modal-search-box {
  border-color: var(--gray-30);
  background: var(--white);
  color: var(--gray-95);
}
html[data-theme="wireframe"] .edl-modal-search-icon {
  color: var(--gray-50);
}
html[data-theme="wireframe"] .edl-modal-list-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-30);
}
html[data-theme="wireframe"] .edl-modal-list-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--gray-40);
}

/* Detail page meta label */
html[data-theme="wireframe"] .detail-meta-value {
  color: var(--gray-95);
}

/* Intro / walkthrough page titles + subtitles */
html[data-theme="wireframe"] .title {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .subtitle,
html[data-theme="wireframe"] .project-subtitle {
  color: var(--gray-60);
}

/* Dashboard header tooltip arrow + body (was #3A4652 cool slate) */
html[data-theme="wireframe"] .dash-header-edit-btn[data-tooltip]::after {
  background: var(--gray-95);
  color: var(--white);
}
html[data-theme="wireframe"] .dash-header-edit-btn[data-tooltip]::before {
  border-bottom-color: var(--gray-95);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 37 — Defensive: any element with literal indigo `style="..."`
 * inline attribute. Caught by attribute-substring selector.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] [style*="#3611C8"],
html[data-theme="wireframe"] [style*="#5432FB"],
html[data-theme="wireframe"] [style*="#928AFF"],
html[data-theme="wireframe"] [style*="#4A22D4"],
html[data-theme="wireframe"] [style*="#2E0FA0"],
html[data-theme="wireframe"] [style*="#2D0EA8"],
html[data-theme="wireframe"] [style*="#2F139F"],
html[data-theme="wireframe"] [style*="#281379"] {
  /* Token remap handles var(--indigo-*) inline styles; this catch-all
     covers the rare literal hex inline color. We can't easily replace
     specific style attribute values via CSS, but we can apply a filter
     to the parent element to grayscale the rendered output. */
  filter: grayscale(1);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 38 — Presentation/walkthrough overlay gradients + accent dots
 * ─────────────────────────────────────────────────────────────────────
 * Presentation mode (`body.presentation-mode-active`) draws multi-stop
 * gradient backgrounds (incl. indigo radial fills at low alpha) and
 * indigo accent dots / connector lines on architecture diagrams. Kill
 * the indigo layers, keep the rest as grayscale.
 * ════════════════════════════════════════════════════════════════════════ */

/* Walkthrough exploded-stage backgrounds — collapse to flat white. */
html[data-theme="wireframe"] .presentation-step-0 .presentation-exploded-stage,
html[data-theme="wireframe"] .presentation-exploded-stage {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Architecture-shell dot grid (was slate; remap to neutral gray) */
html[data-theme="wireframe"] .presentation-architecture-shell::before {
  background:
    radial-gradient(circle, rgba(115, 115, 115, 0.18) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 115, 115, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(115, 115, 115, 0.04) 1px, transparent 1px) !important;
}

/* Architecture-label accent dot + connector (was indigo) */
html[data-theme="wireframe"] .presentation-architecture-label::before {
  border-color: var(--gray-60) !important;
  background: var(--gray-30) !important;
}
html[data-theme="wireframe"] .presentation-architecture-label::after {
  background: linear-gradient(90deg, var(--gray-50), rgba(115, 115, 115, 0.06)) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 39 — Indigo / cool-slate rgba leaks (low-alpha brand tints)
 * ─────────────────────────────────────────────────────────────────────
 * Several pages use `rgba(54, 17, 200, ALPHA)` (faint indigo) and
 * `rgba(15, 23, 42, ALPHA)` (faint slate) for overlays, separators,
 * shadows, and backdrops. Phase 4 / 32 / 33 cover the high-alpha
 * cases; this phase mops up the long tail.
 * ════════════════════════════════════════════════════════════════════════ */

/* Generic modal backdrop / filter overlay */
html[data-theme="wireframe"] .filter-overlay,
html[data-theme="wireframe"] .modal-overlay,
html[data-theme="wireframe"] .edl-modal-overlay,
html[data-theme="wireframe"] .po-modal-overlay {
  background: rgba(23, 23, 23, 0.4);
}

/* Filter panel footer separator */
html[data-theme="wireframe"] .filter-panel-footer {
  background: var(--gray-10);
}

/* Search dropdown / view-title-menu / more-menu drop shadows */
html[data-theme="wireframe"] .tab-toolbar-search-dropdown,
html[data-theme="wireframe"] .view-title-menu,
html[data-theme="wireframe"] .more-menu {
  background: var(--white);
  border: 1px solid var(--gray-20);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Profile dropdown shadow (was slate-tinted) */
html[data-theme="wireframe"] .profile-dropdown,
html[data-theme="wireframe"] .profile-dd-submenu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* `.page-alert-dismiss:hover` was `rgba(160, 0, 50, 0.08)` (red wash) */
html[data-theme="wireframe"] .page-alert-dismiss:hover {
  background: var(--gray-10);
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 40 — Final safety: any element rendered with brand indigo
 * gradient (`rgba(54, 17, 200, …)`) inside its background gets the
 * gradient stripped. Uses substring attribute matching on `style="…"`,
 * which is the rare way pages still leak this color.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-theme="wireframe"] [style*="rgba(54, 17, 200"],
html[data-theme="wireframe"] [style*="rgba(54,17,200"] {
  background-image: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 41 — Left rail active state: bulletproof grayscale (!important)
 * ─────────────────────────────────────────────────────────────────────
 * Earlier phases re-skin the rail via token remaps and selector-scoped
 * rules. Some pages (e.g. harps-gl-export.html) declare their full rail
 * CSS in a page-local <style> block whose rule order, !important usage,
 * or asset-svg-as-<img> rendering can still produce a brand-color leak
 * on the active item. This phase forces every relevant rail surface to
 * grayscale with !important so no specificity / cascade quirk wins.
 *
 * Applies to EVERY rail item — Dashboard, Revenue & Billing, Accounts
 * Payable, GL Exports, Reports, Audit Tracker, Finance Units, Uploads,
 * and any future addition. Active state stays clearly readable via
 * dark-on-light contrast.
 *
 * Layout safety: only color / background / fill / filter properties.
 * No width / height / padding / margin / position / display changes.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Active rail tile background (both ::before and .rail-icon-tile
   variants) → dark neutral charcoal. */
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]::before,
html[data-theme="wireframe"] .rail-item--active[aria-current="page"] .rail-icon-tile,
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile {
  background: var(--gray-95) !important;
  background-color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]:hover::before,
html[data-theme="wireframe"] .rail-item[aria-current="page"]:hover .rail-icon-tile {
  background: var(--gray-80) !important;
  background-color: var(--gray-80) !important;
}
html[data-theme="wireframe"] .rail-item--default[aria-current="page"]:active::before,
html[data-theme="wireframe"] .rail-item[aria-current="page"]:active .rail-icon-tile {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ── 2. Active inline-SVG rail-icon-tile path fill → solid white.
   Defeats any page-local `fill: var(--indigo-70)` rule (the EDL base
   color of all rail-icon-tile SVG paths). */
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile svg,
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon-tile svg path {
  fill: #FFFFFF !important;
}

/* ── 3. Active <img> rail-icon (asset SVGs) → solid white via filter.
   Overrides any source SVG fill (indigo/orange/etc.) using a chain
   that flattens the source pixel then inverts to white. */
html[data-theme="wireframe"] .rail-item--default[aria-current="page"] img.rail-icon,
html[data-theme="wireframe"] .rail-item[aria-current="page"] img.rail-icon,
html[data-theme="wireframe"] .rail-item--default[aria-current="page"] .rail-icon,
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-icon {
  filter: brightness(0) invert(1) !important;
}

/* ── 4. INACTIVE rail icon (any variant: default, --uploads, --gl-exports,
   etc.) → solid neutral mid-gray. The variant modifier classes only
   adjust width/height, so the same filter works for all. */
html[data-theme="wireframe"] .rail-item:not([aria-current="page"]) img.rail-icon,
html[data-theme="wireframe"] .rail-item:not([aria-current="page"]) .rail-icon--uploads,
html[data-theme="wireframe"] .rail-item:not([aria-current="page"]) .rail-icon--gl-exports,
html[data-theme="wireframe"] img.rail-icon--gl-exports:not([aria-current="page"] *),
html[data-theme="wireframe"] img.rail-icon--uploads:not([aria-current="page"] *) {
  filter: brightness(0) invert(0.45) !important;
}

/* ── 5. Inactive inline-SVG rail-icon-tile path fill → mid-gray. */
html[data-theme="wireframe"] .rail-item:not([aria-current="page"]) .rail-icon-tile svg,
html[data-theme="wireframe"] .rail-item:not([aria-current="page"]) .rail-icon-tile svg path {
  fill: var(--gray-60) !important;
}

/* ── 6. Hover / pressed overlays on default rail items → neutral.
   EDL Light hardcodes `rgba(54, 17, 200, 0.06)` (indigo wash) and
   `rgba(54, 17, 200, 0.12)`. Force grayscale. */
html[data-theme="wireframe"] .rail-item--default:hover::before,
html[data-theme="wireframe"] .rail-item--active:hover .rail-icon-tile {
  background: var(--gray-10) !important;
}
html[data-theme="wireframe"] .rail-item--default:active::before,
html[data-theme="wireframe"] .rail-item--active:active .rail-icon-tile {
  background: var(--gray-20) !important;
}

/* ── 7. Rail labels (text under each tile) → neutral ink for active,
   muted gray for inactive. Defeats `.rail-label { color: var
   (--indigo-70); }` baseline in page-local CSS. */
html[data-theme="wireframe"] .rail-label {
  color: var(--gray-70) !important;
}
html[data-theme="wireframe"] .rail-item[aria-current="page"] .rail-label,
html[data-theme="wireframe"] .rail-item--default[aria-current="page"] .rail-label {
  color: var(--gray-95) !important;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 42 — Page-alert / banner components (Peer Review Required, etc.)
 * ─────────────────────────────────────────────────────────────────────
 * `.page-alert` on Sales Order / Invoice detail pages reads `--orange-*`
 * tokens for its warning treatment. The Phase 1 token remap now covers
 * the entire orange ramp, but some detail pages declare a SECOND :root
 * block AFTER the first that redefines tokens (or adds new ones). To
 * guarantee the alert is grayscale on every page regardless of which
 * `:root` block wins the cascade, force every visual property of the
 * `.page-alert` family with !important.
 *
 * Meaning is preserved via grayscale hierarchy:
 *   - Light gray background (warning vs. body distinction)
 *   - Mid-gray hairline border
 *   - Dark gray icon and label
 *   - Slightly muted gray message text
 *   - Neutral close button
 *
 * Same overrides apply to any other warning/info/error/success banner
 * patterns that follow the same selector convention.
 * ════════════════════════════════════════════════════════════════════════ */

/* The alert container itself */
html[data-theme="wireframe"] .page-alert,
html[data-theme="wireframe"] .alert-banner,
html[data-theme="wireframe"] .alert-bar,
html[data-theme="wireframe"] .notice,
html[data-theme="wireframe"] .banner {
  background: var(--gray-10) !important;
  border: 1px solid var(--gray-30) !important;
  color: var(--gray-95) !important;
  box-shadow: none !important;
}

/* Icon — was --orange-80, currentColor (red), or hardcoded brand hex */
html[data-theme="wireframe"] .page-alert-icon,
html[data-theme="wireframe"] .page-alert-icon svg,
html[data-theme="wireframe"] .page-alert-icon svg path,
html[data-theme="wireframe"] .page-alert-icon svg circle,
html[data-theme="wireframe"] .alert-banner-icon,
html[data-theme="wireframe"] .alert-banner-icon svg,
html[data-theme="wireframe"] .notice-icon,
html[data-theme="wireframe"] .notice-icon svg {
  color: var(--gray-95) !important;
  stroke: currentColor !important;
}
html[data-theme="wireframe"] .page-alert-icon svg path[stroke],
html[data-theme="wireframe"] .page-alert-icon svg circle[stroke] {
  stroke: var(--gray-95) !important;
}

/* Label + message text */
html[data-theme="wireframe"] .page-alert-label,
html[data-theme="wireframe"] .alert-banner-label,
html[data-theme="wireframe"] .notice-label {
  color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .page-alert-msg,
html[data-theme="wireframe"] .alert-banner-msg,
html[data-theme="wireframe"] .notice-msg {
  color: var(--gray-70) !important;
}

/* Dismiss button (was #A00032 red + rgba red wash on hover) */
html[data-theme="wireframe"] .page-alert-dismiss,
html[data-theme="wireframe"] .page-alert-dismiss svg,
html[data-theme="wireframe"] .page-alert-dismiss svg path,
html[data-theme="wireframe"] .alert-banner-dismiss,
html[data-theme="wireframe"] .notice-dismiss {
  color: var(--gray-70) !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="wireframe"] .page-alert-dismiss:hover {
  background: var(--gray-20) !important;
  color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .page-alert-dismiss:active {
  background: var(--gray-30) !important;
}
html[data-theme="wireframe"] .page-alert-dismiss:focus-visible {
  outline: 2px solid var(--gray-60) !important;
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════
 * PHASE 43 — Top nav: true wireframe convention (light bg + hairline)
 * ─────────────────────────────────────────────────────────────────────
 * Traditional wireframes use a white/near-white page chrome with a
 * thin gray hairline divider — not a saturated dark header. The dark
 * `--gray-95` nav from Phase 33 is technically grayscale, but reads as
 * a branded chrome. Convert the wireframe top nav to true wireframe
 * style: white background, hairline border, dark text. This matches
 * the user's stated wireframe intent.
 *
 * Logo / nav-bell / nav-divider assets were previously filtered to
 * WHITE (for dark nav). Re-filter to BLACK so they read on white.
 *
 * Layout safety: only background / color / border-color / filter /
 * box-shadow changes. No size, padding, or position changes. Border
 * is added via `box-shadow: 0 0 0 1px` ("shadow-ring") for the body
 * border and via `box-shadow: inset 0 -1px 0` for the bottom hairline,
 * both of which don't take up layout space.
 * ════════════════════════════════════════════════════════════════════════ */

/* Nav container */
html[data-theme="wireframe"] .primary-nav,
html[data-theme="wireframe"] .pnav-module {
  background: var(--white) !important;
  box-shadow: inset 0 -1px 0 var(--gray-20) !important;
}

/* Item text — dark on light */
html[data-theme="wireframe"] .pnav-item-text {
  color: var(--gray-70) !important;
}
html[data-theme="wireframe"] .pnav-item:hover .pnav-item-text {
  color: var(--gray-95) !important;
}
html[data-theme="wireframe"] .pnav-item.active .pnav-item-text {
  color: var(--gray-95) !important;
  font-weight: var(--weight-heavy);
}

/* Active / hover background — subtle light gray */
html[data-theme="wireframe"] .pnav-item.active {
  background: var(--gray-10) !important;
}
html[data-theme="wireframe"] .pnav-item:hover {
  background: var(--gray-05) !important;
}
html[data-theme="wireframe"] .pnav-icon-slot:hover {
  background: var(--gray-10) !important;
}

/* Logo + bell + divider assets were previously filtered WHITE to read
   on the dark nav. With a light nav they must filter to BLACK. */
html[data-theme="wireframe"] img[src*="nav-bell"],
html[data-theme="wireframe"] img[src*="disney-advertising-logo"] {
  filter: brightness(0) !important;
}
html[data-theme="wireframe"] img[src*="nav-divider"] {
  filter: brightness(0) !important;
  opacity: 0.3;
}

/* Profile avatar ring on light nav */
html[data-theme="wireframe"] .pnav-avatar {
  box-shadow: 0 0 0 1px var(--gray-30) !important;
}

/* ── Accounts Receivable Presentation View ─────────────────────────────
   The presentation is a dark surface in every theme. Wireframe keeps its
   structure, spacing and behaviour and only re-maps the tokens: navy
   becomes neutral ink, and the amber annotation accent becomes white.
   The live-view replica is deliberately left alone — it uses the same chip
   classes as the real AR table, so it inherits whatever that table does. */
html[data-theme="wireframe"] .arp-overlay {
  --arp-navy: #171717;
  --arp-surface: #262626;
  --arp-surface-2: #404040;
  --arp-line: rgba(255, 255, 255, 0.24);
  --arp-ink: #FFFFFF;
  --arp-ink-muted: #A3A3A3;
  --arp-ink-soft: #D4D4D4;
  --arp-accent: #FFFFFF;
  --arp-accent-soft: rgba(255, 255, 255, 0.12);
  background: #171717;
}

html[data-theme="wireframe"] .arp-overlay .arp-dialog[role="dialog"] {
  background: #262626;
  box-shadow: none;
}

html[data-theme="wireframe"] .arp-overlay .arp-outline {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}

/* Billing Review count chips use ADS hue variants. Keep them on the same
   neutral pill as the rest of Wireframe; layout is unchanged. */
html[data-theme="wireframe"] .review-actions-primary.is-quiet:hover,
html[data-theme="wireframe"] .review-actions-primary.is-quiet:active {
  background: rgba(0, 0, 0, 0.06);
  color: #1e2528;
  border-color: #404040;
}

html[data-theme="wireframe"] .or-back,
html[data-theme="wireframe"] .or-row-action {
  color: #1e2528;
}

html[data-theme="wireframe"] .or-back:hover,
html[data-theme="wireframe"] .or-row-action:hover {
  color: #000;
}

html[data-theme="wireframe"] .or-btn-primary {
  border-color: #404040;
  background: #404040;
  color: #fff;
}

html[data-theme="wireframe"] .or-btn-primary:disabled {
  background: #e5e5e5;
  border-color: #e5e5e5;
  color: #737373;
  opacity: 1;
}

html[data-theme="wireframe"] .or-btn-primary:hover:not(:disabled) {
  border-color: #262626;
  background: #262626;
}

html[data-theme="wireframe"] .or-btn-secondary {
  border-color: #404040;
  color: #1e2528;
}

html[data-theme="wireframe"] .or-table tbody tr.is-selected td,
html[data-theme="wireframe"] .or-table tbody tr.is-selected:hover td {
  background: #eceeee;
}

html[data-theme="wireframe"] .ov-upload-btn,
html[data-theme="wireframe"] .ov-upload-change {
  color: #1e2528;
}

html[data-theme="wireframe"] .ads-select-option[aria-selected="true"],
html[data-theme="wireframe"] .ads-select-option[aria-selected="true"] .ads-select-option-text {
  background: #eceeee;
  color: #1e2528;
}

html[data-theme="wireframe"] .ads-select-trigger:focus-visible,
html[data-theme="wireframe"] .ads-select-trigger[aria-expanded="true"],
html[data-theme="wireframe"] .ov-upload-btn:focus-visible {
  outline-color: #404040;
  border-color: #404040;
}

html[data-theme="wireframe"] .ov-panel .ads-chip {
  background: #fff;
  border-color: #d4d4d4;
  color: #1e2528;
}

html[data-theme="wireframe"] .review-actions-card .ads-chip {
  background: #fff;
  border-color: #d4d4d4;
  color: #1e2528;
}

html[data-theme="wireframe"] .review-adjust-option.is-selected {
  background: #eceeee;
  border-color: #404040;
}

/* Order Documents / History actions use the same neutral primary as the
   rest of Wireframe. Layout and type stay with the shared order view. */
html[data-theme="wireframe"] .ov-btn-primary {
  border-color: var(--gray-80);
  background: var(--gray-80);
}
html[data-theme="wireframe"] .ov-btn-primary:hover {
  border-color: var(--gray-90);
  background: var(--gray-90);
}
html[data-theme="wireframe"] .ov-btn-secondary {
  border-color: var(--gray-80);
  color: var(--gray-80);
}
html[data-theme="wireframe"] .ov-btn-secondary:hover { background: var(--gray-10); }
html[data-theme="wireframe"] .ov-link { color: var(--gray-95); }
html[data-theme="wireframe"] .ov-err-indicator,
html[data-theme="wireframe"] .ov-err-indicator--error { color: var(--gray-70, #525252); }
html[data-theme="wireframe"] .ov-err-indicator--warning { color: var(--gray-50, #8d8d8d); }
html[data-theme="wireframe"] .ov-btn:focus-visible,
html[data-theme="wireframe"] .ov-link:focus-visible {
  outline-color: var(--gray-80);
}
html[data-theme="wireframe"] .ov-select:focus,
html[data-theme="wireframe"] .ov-input:focus,
html[data-theme="wireframe"] .ov-area:focus {
  border-color: var(--gray-80);
  box-shadow: 0 0 0 1px var(--gray-80);
}

/* Finance Settings row actions reuse the ADS link colour token with a
   brand fallback. Remap to the gray ramp so Wireframe does not keep indigo. */
html[data-theme="wireframe"] .fs-table button.ads-table-link {
  color: var(--gray-95);
}
html[data-theme="wireframe"] .fs-table button.ads-table-link:hover {
  color: var(--gray-80);
}
html[data-theme="wireframe"] .fs-table button.ads-table-link:focus-visible,
html[data-theme="wireframe"] .fs-table-scroll:focus-visible {
  outline-color: var(--gray-80);
}

/* HARPS toast (v2-toast) — grayscale left accent and type. Layout stays. */
html[data-theme="wireframe"] .v2-toast {
  box-shadow: none;
}
html[data-theme="wireframe"] .v2-toast::before { background: #737373; }
html[data-theme="wireframe"] .v2-toast--success::before { background: #525252; }
html[data-theme="wireframe"] .v2-toast--error::before { background: #404040; }
html[data-theme="wireframe"] .v2-toast--warning::before { background: #737373; }
html[data-theme="wireframe"] .v2-toast--info::before { background: #525252; }
html[data-theme="wireframe"] .v2-toast--success .v2-toast__icon,
html[data-theme="wireframe"] .v2-toast--success .v2-toast__title,
html[data-theme="wireframe"] .v2-toast--error .v2-toast__icon,
html[data-theme="wireframe"] .v2-toast--error .v2-toast__title,
html[data-theme="wireframe"] .v2-toast--warning .v2-toast__icon,
html[data-theme="wireframe"] .v2-toast--warning .v2-toast__title,
html[data-theme="wireframe"] .v2-toast--info .v2-toast__icon,
html[data-theme="wireframe"] .v2-toast--info .v2-toast__title {
  color: #262626;
}
html[data-theme="wireframe"] table.v2-data-table.fs-table tbody tr.fs-row-target td,
html[data-theme="wireframe"] table.v2-data-table.fs-table tbody tr.fs-row-target td:first-child {
  background-color: var(--gray-10, #F5F5F5);
}
html[data-theme="wireframe"] table.v2-data-table.fs-table tbody tr.fs-row-target td:first-child {
  box-shadow: inset 3px 0 0 var(--gray-70, #525252);
}

html[data-theme="wireframe"] .page-alert.ov-li-adjust {
  border-left-color: var(--gray-70, #525252) !important;
}
html[data-theme="wireframe"] .ov-li-table td.ov-li-dirty,
html[data-theme="wireframe"] .ov-li-table tbody tr:hover td.ov-li-dirty,
html[data-theme="wireframe"] .ov-li-table td:has(.ov-li-input:focus),
html[data-theme="wireframe"] .ov-li-table tbody tr:hover td:has(.ov-li-input:focus) {
  background: var(--gray-15);
}