/* dashboard.html's stylesheet (#415).
 *
 * 3,224 lines of CSS that lived in fourteen <style> blocks scattered through the markup — one in
 * <head> and thirteen more interleaved with the panels they style, the furthest 5,900 lines from
 * the first. Nothing about them was ever page-specific: they are the dashboard's stylesheet, and
 * they are now in a file called that.
 *
 * MOVED VERBATIM. The blocks appear here in document order and the only edit is four columns of
 * indentation removed, so a rule's neighbours are the same rules it had before. That matters more
 * than tidiness here: CSS is order-dependent, and a "while we're in here" reflow of 3,000 lines is
 * unreviewable.
 *
 * ORDER AGAINST css/a11y.css. The thirteen body blocks used to sit AFTER a11y.css in the cascade
 * and now sit before it, because this file is linked from <head>. That is the order a11y.css
 * already documents wanting ("last in the cascade") and it changes nothing: no rule that moved
 * shares a selector with it, and its one universal rule is the reduced-motion block, which carries
 * !important and does not care about order.
 *
 * #dfir-runtime-styles STAYS INLINE. js/safe-dom.js writes into that element at runtime
 * (safe-dom.js:209) — it is a DOM node the code appends rules to, not a stylesheet, so it is the
 * one block that is not CSS-in-the-wrong-file.
 *
 * THE TOKEN REGION BELOW IS GENERATED. `npm run theme:apply` rewrites everything between the
 * marker comments from companion/scripts/theme/. It used to rewrite that region inside
 * dashboard.html; it now targets this file, and the theme registry it keeps in sync stays in the
 * inline script, because that half is JavaScript. See scripts/theme/applyRoles.ts.
 *
 * Served through the STATIC_ASSETS allowlist in companion/src/http/staticAssets.ts. A stylesheet
 * missing from that list 404s silently and the page renders unstyled — which, thanks to
 * #dfir-runtime-styles hiding <body> until safe-dom.js is ready, would show as a blank page rather
 * than an ugly one. tests/settings/settingsSearch.test.ts pins the entry.
 */

/* === dfir-theme tokens (issue #53) ===
   GENERATED by `npm run theme:apply` from companion/scripts/theme/. Do not
   hand-edit: the next run overwrites it. To change a colour, change the role
   definition in roleMap.ts and re-run.

   Colours are addressed by ROLE (--bg-primary, --sev-high), not by their own hex.
   A theme is the 25 tier A answers; the 20 tier B roles derive from those unless a
   theme overrides them, and the 4 brand constants are never themed. See
   scripts/theme/README.md for the full contract. */

:root {
  /* Brand constants. Identical in every theme by design — theming these would make
     the product mark shift from theme to theme. */
  --brand-teal-deep:       #0e7c75;
  --brand-teal:            #0f8a82;
  --brand-teal-bright:     #15a89d;
  --brand-teal-ink:        #eafffb;

  /* Tier B fallbacks. Reached by any theme that defines only the 25 tier A roles,
     which is every imported theme. Must reference tier A only;
     tests/theme/roleMap.test.ts enforces that. */
  --sev-critical:          var(--tag-red-text);
  --sev-high:              var(--tag-orange-text);
  --sev-medium:            var(--help-icon-color);
  --sev-low:               var(--tag-green-text);
  --sev-info:              var(--accent);
  --text-dim:              color-mix(in oklab, var(--text-muted) 78%, var(--bg-primary));
  --text-faint:            color-mix(in oklab, var(--text-muted) 52%, var(--bg-primary));
  --border-subtle:         color-mix(in oklab, var(--border-color) 65%, var(--bg-secondary));
  --border-strong:         color-mix(in oklab, var(--border-color) 60%, var(--text-muted));
  --accent-solid:          color-mix(in oklab, var(--accent) 72%, var(--bg-primary));
  --accent-solid-hover:    color-mix(in oklab, var(--accent) 82%, var(--bg-primary));
  --success:               color-mix(in oklab, var(--badge-success-text) 70%, var(--bg-primary));
  --success-bg:            color-mix(in oklab, var(--badge-success-text) 13%, var(--bg-primary));
  --success-border:        color-mix(in oklab, var(--badge-success-text) 34%, var(--bg-primary));
  --warning-bg:            color-mix(in oklab, var(--badge-warning-text) 11%, var(--bg-primary));
  --warning-bg-strong:     color-mix(in oklab, var(--badge-warning-text) 22%, var(--bg-primary));
  --warning-border:        color-mix(in oklab, var(--badge-warning-text) 36%, var(--bg-primary));
  --danger-border:         color-mix(in oklab, var(--badge-danger-text) 36%, var(--bg-primary));
  --info-bg:               color-mix(in oklab, var(--tag-purple-text) 13%, var(--bg-primary));
  --info-border:           color-mix(in oklab, var(--tag-purple-text) 34%, var(--bg-primary));
  --surface-selected:      color-mix(in oklab, var(--accent) 15%, var(--bg-secondary));
  --bg-elevated:           var(--bg-secondary);

  /* Base tier A values (dark), so the page still renders if the theme bootstrap
     never runs and no data-theme attribute is set. */
  color-scheme: dark;
  --hover-wash: rgba(255,255,255,.07);
  --bg-primary:            #0f1115;
  --bg-secondary:          #161b22;
  --bg-tertiary:           #1e2330;
  --bg-hover:              #2a3050;
  --bg-hover-light:        #7f8aa0;
  --border-color:          #2a2f3a;
  --text-primary:          #cbd3df;
  --text-bright:           #e6e6e6;
  --text-muted:            #9aa4b2;
  --accent:                #6aa9ff;
  --accent-hover:          #9cc5ff;
  --bg-drop-active:        #13243a;
  --modal-backdrop:        rgba(0, 0, 0, 0.8);
  --badge-danger-text:     #ff6b6b;
  --danger-bg:             #5a1722;
  --badge-bg-neutral:      #21262d;
  --badge-warning-text:    #ffb454;
  --badge-success-text:    #4ade80;
  --tag-red-text:          #ff9f9f;
  --tag-purple-text:       #c79bff;
  --tag-orange-text:       #ffce8a;
  --tag-blue-text:         #6aa9ff;
  --tag-gray-text:         #9aa4b2;
  --tag-green-text:        #7ec8a4;
  --help-icon-color:       #e0b84a;

  /* Legacy aliases — transitional, see aliasBlock() in scripts/theme/themeCss.ts. */
  --c-0b0e13:       var(--bg-primary);
  --c-0d1017:       var(--bg-primary);
  --c-0d1117:       var(--bg-primary);
  --c-0d1a12:       var(--success-bg);
  --c-0d1b2e:       var(--bg-secondary);
  --c-0d1f18:       var(--success-bg);
  --c-0e1116:       var(--bg-primary);
  --c-0e7c75:       var(--brand-teal-deep);
  --c-0f1115:       var(--bg-primary);
  --c-0f1521:       var(--bg-secondary);
  --c-0f1620:       var(--bg-secondary);
  --c-0f8a82:       var(--brand-teal);
  --c-11141a:       var(--bg-primary);
  --c-11151c:       var(--bg-secondary);
  --c-11151f:       var(--bg-secondary);
  --c-11161d:       var(--bg-secondary);
  --c-11202e:       var(--surface-selected);
  --c-12161d:       var(--bg-secondary);
  --c-13243a:       var(--bg-drop-active);
  --c-13331f:       var(--success-bg);
  --c-141821:       var(--bg-secondary);
  --c-141823:       var(--bg-secondary);
  --c-141a2a:       var(--bg-secondary);
  --c-142038:       var(--surface-selected);
  --c-15a89d:       var(--brand-teal-bright);
  --c-161a22:       var(--bg-elevated);
  --c-161b22:       var(--bg-secondary);
  --c-161b28:       var(--bg-secondary);
  --c-161c27:       var(--bg-secondary);
  --c-161d2b:       var(--bg-secondary);
  --c-16324d:       var(--bg-hover);
  --c-1a1f28:       var(--border-subtle);
  --c-1a1f29:       var(--bg-secondary);
  --c-1a1f2a:       var(--bg-secondary);
  --c-1a1f2e:       var(--bg-tertiary);
  --c-1a2433:       var(--bg-drop-active);
  --c-1a3a1a:       var(--success-bg);
  --c-1b2030:       var(--bg-tertiary);
  --c-1b212b:       var(--bg-tertiary);
  --c-1c1500:       var(--warning-bg);
  --c-1c2230:       var(--border-subtle);
  --c-1c2330:       var(--bg-tertiary);
  --c-1c2333:       var(--bg-tertiary);
  --c-1e2330:       var(--bg-tertiary);
  --c-1e2430:       var(--bg-tertiary);
  --c-1e3a24:       var(--success-border);
  --c-1e3a2a:       var(--success-bg);
  --c-1f1c05:       var(--warning-bg);
  --c-1f2942:       var(--bg-drop-active);
  --c-1f2a3a:       var(--border-subtle);
  --c-1f3a52:       var(--bg-drop-active);
  --c-1f5a35:       var(--success-border);
  --c-1f6feb:       var(--accent-solid-hover);
  --c-211405:       var(--warning-bg);
  --c-21262d:       var(--badge-bg-neutral);
  --c-221f0d:       var(--warning-bg);
  --c-22272e:       var(--badge-bg-neutral);
  --c-222b3d:       var(--border-color);
  --c-232a33:       var(--border-subtle);
  --c-23304a:       var(--bg-drop-active);
  --c-241f10:       var(--warning-bg);
  --c-242a35:       var(--bg-tertiary);
  --c-243a5e:       var(--bg-drop-active);
  --c-2a0d0d:       var(--danger-bg);
  --c-2a2233:       var(--info-bg);
  --c-2a2410:       var(--warning-bg);
  --c-2a2f3a:       var(--border-color);
  --c-2a3050:       var(--bg-hover);
  --c-2a313c:       var(--border-color);
  --c-2a3146:       var(--border-color);
  --c-2a3340:       var(--border-color);
  --c-2a3346:       var(--border-color);
  --c-2a3a52:       var(--border-color);
  --c-2a4a6b:       var(--border-strong);
  --c-2a5a2a:       var(--success-border);
  --c-2a7bff:       var(--accent-solid);
  --c-2b3242:       var(--border-color);
  --c-2d4a6a:       var(--border-strong);
  --c-2d6cdf:       var(--accent-solid);
  --c-2ea043:       var(--success);
  --c-2f3741:       var(--border-color);
  --c-2f8f4e:       var(--success);
  --c-30363d:       var(--border-color);
  --c-33291a:       var(--warning-bg-strong);
  --c-353b47:       var(--bg-hover);
  --c-353c49:       var(--border-color);
  --c-37a35b:       var(--success-bg);
  --c-38bdf8:       var(--accent);
  --c-3a1a1a:       var(--danger-bg);
  --c-3a1f22:       var(--danger-bg);
  --c-3a2020:       var(--danger-bg);
  --c-3a2230:       var(--info-bg);
  --c-3a2330:       var(--info-bg);
  --c-3a2a00:       var(--warning-bg);
  --c-3a2e00:       var(--warning-bg);
  --c-3a2f1a:       var(--warning-bg-strong);
  --c-3a3320:       var(--warning-bg-strong);
  --c-3a4050:       var(--border-strong);
  --c-3a4150:       var(--border-strong);
  --c-3a4255:       var(--border-strong);
  --c-3a4456:       var(--bg-hover);
  --c-3a4658:       var(--border-strong);
  --c-3a567d:       var(--border-strong);
  --c-3a6ea5:       var(--bg-hover);
  --c-4a3a5a:       var(--info-border);
  --c-4a3f1a:       var(--warning-border);
  --c-4a441a:       var(--warning-border);
  --c-4a5466:       var(--border-strong);
  --c-4ade80:       var(--badge-success-text);
  --c-4caf50:       var(--success-bg);
  --c-4cd964:       var(--badge-success-text);
  --c-52617a:       var(--text-faint);
  --c-5a1722:       var(--danger-bg);
  --c-5a2a2a:       var(--danger-border);
  --c-5a2a2e:       var(--danger-border);
  --c-5a3a14:       var(--warning-bg-strong);
  --c-5a3a1a:       var(--warning-border);
  --c-5a4416:       var(--warning-border);
  --c-5a4800:       var(--warning-border);
  --c-5a4a1a:       var(--warning-border);
  --c-5a4a2a:       var(--warning-border);
  --c-5a6170:       var(--text-faint);
  --c-5a6475:       var(--text-faint);
  --c-5b6472:       var(--text-faint);
  --c-5fd470:       var(--badge-success-text);
  --c-6a7280:       var(--text-faint);
  --c-6aa9ff:       var(--accent);
  --c-6b7280:       var(--text-faint);
  --c-6b7585:       var(--text-faint);
  --c-6b7686:       var(--text-faint);
  --c-6bcb77:       var(--sev-low);
  --c-6d5219:       var(--warning-bg-strong);
  --c-6fb3e0:       var(--accent);
  --c-7a5d1e:       var(--warning-border);
  --c-7d8696:       var(--text-dim);
  --c-7e8aa0:       var(--text-dim);
  --c-7ec8a4:       var(--tag-green-text);
  --c-7ee787:       var(--tag-green-text);
  --c-7f8aa0:       var(--bg-hover-light);
  --c-8a93a3:       var(--text-dim);
  --c-8a94a6:       var(--text-dim);
  --c-8aa0c0:       var(--text-muted);
  --c-8b94a3:       var(--text-dim);
  --c-8fb3e0:       var(--accent-hover);
  --c-9aa4b2:       var(--text-muted);
  --c-9cc5ff:       var(--accent-hover);
  --c-9ecbff:       var(--accent-hover);
  --c-9fd0ff:       var(--text-primary);
  --c-a88200:       var(--warning-border);
  --c-b5651d:       var(--warning-border);
  --c-c79bff:       var(--tag-purple-text);
  --c-c7ced9:       var(--text-primary);
  --c-c9d1d9:       var(--text-primary);
  --c-c9d1db:       var(--text-primary);
  --c-caa86a:       var(--help-icon-color);
  --c-cbd3df:       var(--text-primary);
  --c-cdd6e3:       var(--text-primary);
  --c-cdd6e4:       var(--text-primary);
  --c-cdd9e5:       var(--text-primary);
  --c-d6deea:       var(--text-bright);
  --c-e06060:       var(--badge-danger-text);
  --c-e0a458:       var(--badge-warning-text);
  --c-e0b84a:       var(--help-icon-color);
  --c-e5534b:       var(--tag-red-text);
  --c-e6e6e6:       var(--text-bright);
  --c-e6e9ef:       var(--text-bright);
  --c-e6eaf0:       var(--text-bright);
  --c-e6edf3:       var(--text-bright);
  --c-e8edf5:       var(--text-bright);
  --c-eafffb:       var(--brand-teal-ink);
  --c-f87171:       var(--danger-bg);
  --c-ff5c5c:       var(--sev-critical);
  --c-ff6b6b:       var(--badge-danger-text);
  --c-ff7a7a:       var(--badge-danger-text);
  --c-ff7b8a:       var(--tag-red-text);
  --c-ff8a5c:       var(--sev-high);
  --c-ff8a8a:       var(--tag-red-text);
  --c-ff8aa0:       var(--tag-red-text);
  --c-ff9800:       var(--warning-bg-strong);
  --c-ff9aa4:       var(--tag-red-text);
  --c-ff9f43:       var(--sev-high);
  --c-ff9f45:       var(--badge-warning-text);
  --c-ff9f9f:       var(--tag-red-text);
  --c-ffb0b0:       var(--tag-red-text);
  --c-ffb454:       var(--badge-warning-text);
  --c-ffce8a:       var(--tag-orange-text);
  --c-ffcf66:       var(--tag-orange-text);
  --c-ffd07a:       var(--tag-orange-text);
  --c-ffd93b:       var(--sev-medium);
  --c-ffd9a8:       var(--badge-warning-text);
  --c-ffe6a6:       var(--tag-orange-text);
  --c-6b758522:     color-mix(in srgb, var(--text-faint) 13%, transparent);
  --c-6b758555:     color-mix(in srgb, var(--text-faint) 33%, transparent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hover-wash: rgba(255,255,255,.07);
  --bg-primary:            #0f1115;
  --bg-secondary:          #161b22;
  --bg-tertiary:           #1e2330;
  --bg-hover:              #2a3050;
  --bg-hover-light:        #7f8aa0;
  --border-color:          #2a2f3a;
  --text-primary:          #cbd3df;
  --text-bright:           #e6e6e6;
  --text-muted:            #9aa4b2;
  --accent:                #6aa9ff;
  --accent-hover:          #9cc5ff;
  --bg-drop-active:        #13243a;
  --modal-backdrop:        rgba(0, 0, 0, 0.8);
  --badge-danger-text:     #ff6b6b;
  --danger-bg:             #5a1722;
  --badge-bg-neutral:      #21262d;
  --badge-warning-text:    #ffb454;
  --badge-success-text:    #4ade80;
  --tag-red-text:          #ff9f9f;
  --tag-purple-text:       #c79bff;
  --tag-orange-text:       #ffce8a;
  --tag-blue-text:         #6aa9ff;
  --tag-gray-text:         #9aa4b2;
  --tag-green-text:        #7ec8a4;
  --help-icon-color:       #e0b84a;

  /* Explicit tier B, holding the exact pre-refactor colours rather than the
     derivations. Keeps dark mode pixel-identical to what shipped. */
  --sev-critical:          #ff5c5c;
  --sev-high:              #ff9f43;
  --sev-medium:            #ffd93b;
  --sev-low:               #6bcb77;
  --sev-info:              #6aa9ff;
  --text-dim:              #929ba9;
  --text-faint:            #818a96;
  --border-subtle:         #232a33;
  --border-strong:         #3a4050;
  --accent-solid:          #2d6cdf;
  --accent-solid-hover:    #1f6feb;
  --success:               #2f8f4e;
  --success-bg:            #13331f;
  --success-border:        #1f5a35;
  --warning-bg:            #211405;
  --warning-bg-strong:     #5a3a14;
  --warning-border:        #5a4a1a;
  --danger-border:         #5a2a2a;
  --info-bg:               #2a2233;
  --info-border:           #4a3a5a;
  --surface-selected:      #11202e;
  --bg-elevated:           #161a22;
}

:root[data-theme="light"] {
  color-scheme: light;
  --hover-wash: rgba(0,0,0,.06);
  --bg-primary:            #f5f7fa;
  --bg-secondary:          #e4e9f2;
  --bg-tertiary:           #e3e7f2;
  --bg-hover:              #e2e5f3;
  --bg-hover-light:        #586377;
  --border-color:          #d7dde6;
  --text-primary:          #222a35;
  --text-bright:           #1b2128;
  --text-muted:            #57626f;
  --accent:                #2563c9;
  --accent-hover:          #005de0;
  --bg-drop-active:        #dfe9f6;
  --modal-backdrop:        rgba(0, 0, 0, 0.5);
  --badge-danger-text:     #c40000;
  --danger-bg:             #f6dfe3;
  --badge-bg-neutral:      #f6f7f8;
  --badge-warning-text:    #8f5100;
  --badge-success-text:    #0e6f32;
  --tag-red-text:          #c40000;
  --tag-purple-text:       #6300e0;
  --tag-orange-text:       #8f5300;
  --tag-blue-text:         #235dbd;
  --tag-gray-text:         #57626f;
  --tag-green-text:        #266e4b;
  --help-icon-color:       #785c0e;

  --sev-critical:          #ca2527;
  --sev-high:              #a45300;
  --sev-medium:            #7a6000;
  --sev-low:               #007a2c;
  --sev-info:              #2563c9;
  --text-dim:              #5a6573;
  --text-faint:            #5f6a78;
  --border-subtle:         #e4eaf1;
  --border-strong:         #c2c9d4;
  --accent-solid:          #2563c9;
  --accent-solid-hover:    #2563c9;
  --success:               #1f7a3e;
  --success-bg:            #dff6e8;
  --success-border:        #dff6e8;
  --warning-bg:            #f6ebdf;
  --warning-bg-strong:     #f6ecdf;
  --warning-border:        #f6f0df;
  --danger-border:         #f4e1e1;
  --info-bg:               #eae4f1;
  --info-border:           #ebe4f2;
  --surface-selected:      #dfebf6;
  --bg-elevated:           #ffffff;
}

