/* =============================================================================
 * AMAC Suite — Shared Dark-Theme Core v1
 * -----------------------------------------------------------------------------
 * Suite-level dark mode WITHOUT touching app structure. Apps already funnel most
 * of their colors through a small set of CSS custom properties (--bg, --surface,
 * --text, --line, ...). This sheet re-points those variables under a single
 * switch on the document root:
 *
 *     <html data-theme="dark">   ->  dark palette
 *     (absent / data-theme="light")  ->  the app's own light palette (untouched)
 *
 * HOW THE SWITCH IS SET (no flash of light mode):
 *   1. A tiny inline <script> high in each app's <head> reads the saved choice
 *      (localStorage['amac.theme']) — or the OS setting if none — and sets
 *      data-theme BEFORE first paint.
 *   2. /shared/amac-theme-toggle-v1.js injects a "Dark" button and writes the
 *      choice back to localStorage (per-browser, per-device; never travels with
 *      the user / never hits the server).
 *
 * SCOPE NOTE: this re-colors everything an app routes through its color
 * variables. Colors written as hardcoded hex literals inside individual rules
 * are NOT affected — those stay light until that app migrates them to variables
 * (incremental, per-app polish). Variable-driven apps (HR/CRM/ERP/EQS/Inspect)
 * look right immediately; hardcoded-heavy apps may show light patches.
 *
 * NAMING CONVENTIONS COVERED (the suite uses ~4 clusters of variable names):
 *   A) --bg/--surface/--surface-2/--line/--line-2/--text/--muted/--ok/--warn/--err  (CRM*, HR, ERP)
 *   B) --bg/--panel/--ink/--border/--bad                                           (base css, Inspect)
 *   C) --card-bg/--card-border/--text-dark/--text-muted/--amac-light/--*-bg        (EQS)
 *   D) --lo-* green palette                                                        (Live Oak)
 *   (*) CRM scopes its palette to `.amac-app`, not :root — handled in a 2nd block.
 *
 * Defining a variable an app doesn't use is harmless (it's just an unused custom
 * property), so the union below is safe to load into any app.
 *
 * Load AFTER the app's own stylesheet(s). Fully additive + reversible: remove the
 * <link> and the inline snippet and the app is back to light-only.
 * Roadmap/brief: suite-level dark mode (HR pilot first).
 * ============================================================================= */

/* -------------------------------------------------------------------------
 * Dark palette — harmonized with the suite navy brand (#022544).
 * Tune these ~11 values to shift the whole suite's dark look.
 * ---------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;            /* dark native controls, scrollbars, form fields */
  background-color: #0c1622;     /* root paints dark immediately (anti-flash safety) */

  /* ---- Cluster A: CRM / HR / ERP neutrals ---- */
  --bg:        #0c1622;          /* page canvas                 (light: #edf3f9) */
  --surface:   #15212e;          /* cards / panels              (light: #fbfdff) */
  --surface-2: #1c2a39;          /* secondary / hover surface   (light: #f5f8fb) */
  --line:      #2a3c50;          /* hairlines / borders         (light: #d7e2ef) */
  --line-2:    #38506b;          /* stronger borders            (light: #c7d4e4) */
  --text:      #e8eef5;          /* body text (off-white)       (light: #1f2937) */
  --muted:     #9aabbf;          /* secondary text              (light: #64748b) */
  --shadow:    0 14px 34px rgba(0,0,0,0.55);

  /* Status colors — brightened so they read on a dark surface */
  --ok:   #2bb3a3;               /* (light: #0f766e teal)  */
  --warn: #e0962f;               /* (light: #b45309 amber) */
  --err:  #ef5350;               /* (light: #b91c1c red)   */

  /* Brand accents — LIFTED for legibility on dark. The deep navy is used as
   * both text color AND as button/badge backgrounds (with white text); at
   * #022544 the text would vanish on a dark surface, so we raise it to a
   * mid-blue that reads either way. The hero/rail keep their own LITERAL navy
   * gradients (they don't use these vars), so brand chrome is unaffected. */
  --amac-navy:  #4f86c6;         /* (light: #022544) text + primary-button bg */
  --amac-blue:  #5b9bd5;         /* (light: #2e78b7) links / accents */
  --brand:      #4f86c6;         /* EQS / base-css navy alias */
  --brand-mid:  #5b9bd5;
  --brand-blue: #5b9bd5;

  /* ---- Cluster B: base css / Inspect aliases ---- */
  --panel:  #15212e;             /* == --surface */
  --ink:    #e8eef5;             /* == --text */
  --border: #2a3c50;             /* == --line */
  --bad:    #ef5350;             /* == --err */

  /* ---- Cluster C: EQS aliases ---- */
  --amac-light:  #1c2a39;        /* used as a light accent bg */
  --card-bg:     #15212e;
  --card-border: #2a3c50;
  --text-dark:   #e8eef5;
  --text-muted:  #9aabbf;
  --success-bg:  rgba(43,179,163,0.15);
  --warning-bg:  rgba(224,150,47,0.15);
  --danger-bg:   rgba(239,83,80,0.15);
  --blue-bg:     rgba(46,120,183,0.18);

  /* ---- Cluster D: Live Oak (green brand) neutrals ---- */
  --lo-light-grey: #1c2a24;      /* green-tinted dark surface */
  --lo-brand-text: #9fb6a4;      /* muted green-grey text */
  --lo-ink:        #e9f1e7;      /* light text */
  --lo-line:       rgba(151,194,28,0.18);
  --lo-amber:      #2a2412;       /* disclaimer bg, dark */
  --lo-amber-line: #5c4a1e;

  /* ---- Cluster E: suite-shell (--ss-*) neutrals (Admin Center + shell apps) ---- */
  --ss-bg:        #0c1622;
  --ss-surface:   #15212e;
  --ss-surface-2: #1c2a39;
  --ss-line:      #2a3c50;
  --ss-line-2:    #38506b;
  --ss-text:      #e8eef5;
  --ss-muted:     #9aabbf;
  --ss-warn:      #e0962f;  /* light #b45309 amber is ~3.5:1 on the dark surface -- lift */
  --ss-err:       #f87171;  /* light #b91c1c red is ~3:1 on the dark surface -- lift */
  --ss-shadow:    0 14px 34px rgba(0,0,0,0.55);
  /* --ss-navy/--ss-blue stay brand: the shell hero/rail use literal navy gradients. */
  /* Lifting ink for INLINE-styled headings (inline styles beat stylesheet overrides, so
     they read this var directly): undefined in light -> falls back to navy in the inline
     chain var(--ss-head-ink,#022544); resolves to light text here in dark. */
  --ss-head-ink:  var(--ss-text);

  /* ---- Cluster F: Notification Center (--nc-*) neutrals ---- */
  --nc-panel: #15212e;
  --nc-bg:    #0c1622;
  --nc-line:  #2a3c50;
  --nc-text:  #e8eef5;
  --nc-muted: #9aabbf;
  /* --nc-navy/--nc-navy-2 stay brand: the .nc-hero background uses var(--nc-navy). */
}

/* CRM defines its palette on `.amac-app`, which would otherwise shadow the
 * root-level dark values for everything inside it. Re-point there too. The
 * block is inert for apps that have no `.amac-app` element. */
html[data-theme="dark"] .amac-app {
  --bg:        #0c1622;
  --surface:   #15212e;
  --surface-2: #1c2a39;
  --line:      #2a3c50;
  --line-2:    #38506b;
  --text:      #e8eef5;
  --muted:     #9aabbf;
  --shadow:    0 14px 34px rgba(0,0,0,0.55);
  --ok:   #2bb3a3;
  --warn: #e0962f;
  --err:  #ef5350;
  --amac-navy: #4f86c6;
  --amac-blue: #5b9bd5;
}

/* -------------------------------------------------------------------------
 * Structural fallback layer
 * -------------------------------------------------------------------------
 * Re-pointing variables only recolors what an app routes THROUGH them. In
 * practice the suite's core surfaces are hardcoded `background:#fff`/`white`
 * (e.g. HR's `.card`, `.main-panel`, form fields) and a light `body` gradient,
 * so they'd stay light while text goes light = unreadable. This layer routes
 * the UNIVERSAL AMAC component vocabulary — shared across the CRM/HR/ERP-family
 * look — back through the dark variables. Selector specificity (0,2,0) beats a
 * bare `.class` rule (0,1,0), and the sheet loads last, so it wins.
 *
 * Deliberately NOT touched: hero/rail chrome (they're navy gradients that read
 * great on dark and keep their translucent-white chips) and brand CTAs
 * (.btn-primary/.btn-secondary). App-specific surfaces this list can't name get
 * a thin per-app overlay (e.g. hr-theme-v1.css) — same model as the density
 * rollout's per-app overlays.
 * ---------------------------------------------------------------------- */
html[data-theme="dark"] body { background: var(--bg); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .main-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .menu-list,
html[data-theme="dark"] .quick-actions-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); }

html[data-theme="dark"] .btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] table { color: var(--text); border-color: var(--line); }
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: var(--line); }
html[data-theme="dark"] thead th { background: var(--surface-2); color: var(--text); }

/* Suite-shell (--ss-*) components hardcode white surfaces instead of routing
 * through --ss-surface. Re-point them in dark (Admin Center + any shell app).
 * Primary/secondary buttons keep their brand fill. */
html[data-theme="dark"] .ss-panel,
html[data-theme="dark"] .ss-card,
html[data-theme="dark"] .ss-kpi,
html[data-theme="dark"] .ss-cmdbar,
html[data-theme="dark"] .ss-menu-list,
html[data-theme="dark"] .ss-modal {
  background: var(--ss-surface);
  color: var(--ss-text);
  border-color: var(--ss-line);
}
html[data-theme="dark"] .ss-btn:not(.ss-btn-primary):not(.ss-btn-secondary),
html[data-theme="dark"] .ss-input,
html[data-theme="dark"] .ss-table th {
  background: var(--ss-surface-2);
  color: var(--ss-text);
  border-color: var(--ss-line);
}
html[data-theme="dark"] .ss-menu-list .ss-menu-item:hover { background: var(--ss-surface-2); }
/* Dark: shell text children that hardcode color:var(--ss-navy) sit on the dark surfaces the
   block above recolors -> navy-on-dark is unreadable (~1.05:1). Lift the two opaque-surface
   children to --ss-text. (--ss-navy stays brand for hero/rail/buttons; .ss-inspector-title is
   deliberately excluded -- its .ss-inspector keeps a light surface, so navy-on-white is fine.) */
html[data-theme="dark"] .ss-kpi-value,
html[data-theme="dark"] .ss-panel-head h2 { color: var(--ss-text); }

/* Shared floating widgets (AI-chat panel, Feedback menu) hardcode light panels;
 * dark them centrally so every app's widgets match without editing each widget. */
html[data-theme="dark"] .amac-aichat-panel,
html[data-theme="dark"] .amac-aichat-list,
html[data-theme="dark"] .amac-aichat-thread,
html[data-theme="dark"] .amac-aichat-composer,
html[data-theme="dark"] .amac-aichat-help,
html[data-theme="dark"] .amac-feedback-menu {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

/* Keep text selection legible on dark. */
html[data-theme="dark"] ::selection { background: rgba(46,120,183,0.45); color: #fff; }

/* Print: a report printed while the screen is in dark mode should NOT print
 * dark (ink-wasteful + unreadable). Reset the surface/text vars to light just
 * for print, suite-wide. */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #fff; --panel: #fff; --card-bg: #fff;
    --amac-light: #fff; --lo-light-grey: #fff;
    --text: #111; --ink: #111; --text-dark: #111; --lo-ink: #111;
    --muted: #555; --text-muted: #555; --lo-brand-text: #555;
    --line: #ccc; --line-2: #bbb; --border: #ccc; --card-border: #ccc;
    --amac-navy: #022544; --amac-blue: #2e78b7; --brand: #022544; --brand-mid: #0f4c81;
    --shadow: none;
  }
}


/* ---- 2026-06-12 (CRM dark-legibility report): generic table headers -------
   The shell rule `body.suite-shell table thead th` paints color: var(--ss-navy),
   and --ss-navy DELIBERATELY stays brand-dark in dark mode (hero/rail gradients)
   -> column headers were near-invisible on the dark --ss-surface-2 band in any
   app using a plain <table> under suite-shell (CRM account panels etc.).
   Same root-cause class as Admin Center v2.3.4-6. Dark-scope the ink only;
   light mode untouched. */
[data-theme="dark"] body.suite-shell table thead th { color: var(--ss-text); }


/* ---- 2026-06-16 (Test Center v1.32.0 alpha-composited contrast audit): hero "subtle" chips
   The standard §6.1 hero chrome's muted ".hero-chip.subtle" variant hardcodes a DARK ink that
   does NOT lift in dark mode, so the version/coverage/score/last-run/user chips composite to
   ~1.67:1 on the dark hero and go near-invisible. Confirmed broken cases:
     - AMAC Test Center  .atc-shell .hero-chip.subtle { color:#33506b }            -> 1.67:1
     - AMAC Workday      .hero-chip.subtle { color:var(--amac-navy)=#022544 }      -> 1.05:1
   (most apps inherit white chip text and were already legible; Workboards self-themes its own
   dark hero chips and never loads this sheet.) Lift the ink to the suite's light hero-chip
   slate -- the SAME #c7d5e3 Workboards already uses for its html[data-theme=dark]
   .hero-chip.subtle -- giving 9.4:1 (Test Center) / 10.9:1 (Workday); the already-white apps
   stay >=8:1, no AA regression. !important wins over per-app rules of varying specificity
   (e.g. .atc-shell .hero-chip.subtle); a few apps that set their OWN higher-specificity
   white-on-dark value (body .amgmt-hero .hero-chip.subtle) keep it -- also legible. Dark-scope
   only; light mode byte-identical. */
[data-theme="dark"] .hero-chip.subtle { color: #c7d5e3 !important; }

/* ---- 2026-06-16 (host: AMAC ERP v3.8.1): hero ALERT chip STATUS variants
   Same unlifted-dark-ink class as the subtle chip above. AMAC ERP's firing alert chip
   (#alertChip) drops .subtle and becomes ".hero-chip.alert-chip.warn"/".err", whose per-app
   ink is hardcoded DARK and never flips in dark mode:
     - public/apps/amac-erp/css/styles.css  .hero-chip.alert-chip.warn { color:#8f6712 } -> 2.26:1
     - public/apps/amac-erp/css/styles.css  .hero-chip.alert-chip.err  { color:#891e1e } -> 1.62:1
   composited over the dark hero rgb(21,33,46). Lift the ink to a legible light amber / light red
   while KEEPING each chip's translucent semantic bg (so it still reads amber=warn / red=err).
   !important + the extra dark-scope class out-rank the per-app (0,3,0) rule. Light amber #f4c66b
   -> 7.21:1, light red #ff9d9d -> 7.52:1 (both >= WCAG AA 4.5). .alert-chip is ERP-only, so this
   rule's blast radius is ERP alone. Dark-scope only; light mode byte-identical. */
[data-theme="dark"] .hero-chip.alert-chip.warn { color: #f4c66b !important; }
[data-theme="dark"] .hero-chip.alert-chip.err  { color: #ff9d9d !important; }