/* =====================================================================
   dark.css — premium dark mode: black surfaces, white text.
   Loaded LAST in the layout <head>, so it wins over app.css, glass.css,
   theme.css and the <style> blocks inside each page (the
   :root[data-theme="dark"] prefix gives these rules higher specificity).
   Only active when <html data-theme="dark">. Light mode is untouched.
   ===================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --ink:      #ffffff;
  --ink-2:    #d9dade;
  --ink-3:    #9b9ca3;
  --paper:    #060607;
  --paper-2:  #111114;
  --paper-3:  #18181c;
  --line:     #26272c;
  --line-2:   #1f2024;
  --mast:     #000000;
  --ok:       #5fd394;  --ok-bg:   #0f2a1b;
  --warn:     #f2c200;  --warn-bg: #2a2208;
  --bad:      #ff6b6b;  --bad-bg:  #2e0f11;
  --info:     #7cc0ff;  --info-bg: #0e1d2c;
  --shadow:   0 1px 2px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ── Page background: solid black, no light glass glow ────────────── */
:root[data-theme="dark"],
:root[data-theme="dark"] body,
:root[data-theme="dark"] .lms-shell,
:root[data-theme="dark"] .lms-main {
  background: #060607 !important;
  background-image: none !important;
  color: #fff;
}
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] body:not(.lms-nav-open)::after,
:root[data-theme="dark"] .lms-shell::before,
:root[data-theme="dark"] .lms-shell::after,
:root[data-theme="dark"] .lms-main::before,
:root[data-theme="dark"] .lms-main::after { background: none !important; box-shadow: none !important; opacity: 0 !important; }

/* ── Header and sidebar ───────────────────────────────────────────── */
:root[data-theme="dark"] .lms-mast,
:root[data-theme="dark"] header { background-color: #000 !important; }
:root[data-theme="dark"] .lms-side {
  background: #0b0b0d !important; background-image: none !important;
  border-color: var(--line) !important; backdrop-filter: none !important;
}
:root[data-theme="dark"] .lms-side a,
:root[data-theme="dark"] .lms-side button { color: #d9dade; }
:root[data-theme="dark"] .lms-side a:hover { background: #17171b; color: #fff; }
:root[data-theme="dark"] .lms-nav.is-active,
:root[data-theme="dark"] .lms-side a.is-active { background: #b5121b !important; color: #fff !important; }
:root[data-theme="dark"] .lms-side [class*="group"],
:root[data-theme="dark"] .lms-side summary { color: #9b9ca3; }

/* ── Cards, tiles and panels: near-black, fine border, no glass ───── */
:root[data-theme="dark"] .lms-main .lms-card,
:root[data-theme="dark"] .lms-main [class*="-card"]:not([class*="__"]):not([class*="-cards"]):not(img),
:root[data-theme="dark"] .lms-main [class*="-tile"]:not([class*="__"]):not([class*="-tiles"]),
:root[data-theme="dark"] .lms-main [class*="-panel"]:not([class*="__"]):not([class*="-panels"]),
:root[data-theme="dark"] .lms-main .ct-tile,
:root[data-theme="dark"] .lms-main .adm-tile,
:root[data-theme="dark"] .lms-main .adm-panel,
:root[data-theme="dark"] .lms-main .lms-toolbar,
:root[data-theme="dark"] .lms-main .bg-white,
:root[data-theme="dark"] .lms-dlg {
  background: linear-gradient(180deg, #141417 0%, #0f0f12 100%) !important;
  border-color: #24252a !important;
  color: #fff !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 36px -24px rgba(0,0,0,.9) !important;
}
:root[data-theme="dark"] .lms-main a.ct-tile:hover,
:root[data-theme="dark"] .lms-main .lms-card:hover { border-color: #3a3b42 !important; }
/* Soft corner circles on tiles/cards: dim them so they read as a glow. */
:root[data-theme="dark"] .ct-tile::after { background: var(--ct-c) !important; opacity: .09 !important; }
:root[data-theme="dark"] .dl-card::after { background: var(--dl-c) !important; opacity: .12 !important; }
:root[data-theme="dark"] .dl-card--ink { --dl-c: #5b6573; }
:root[data-theme="dark"] .dl-none span { background: #1c1d22 !important; }
:root[data-theme="dark"] .ct-ic,
:root[data-theme="dark"] .dl-sec__ic,
:root[data-theme="dark"] .cs-av { background: #1c1d22 !important; }
:root[data-theme="dark"] .lms-card__h,
:root[data-theme="dark"] .lms-card__b { background: transparent !important; border-color: #24252a !important; color: #fff; }

/* ── Text: white headings and values, soft grey secondary ─────────── */
:root[data-theme="dark"] .lms-main h1,
:root[data-theme="dark"] .lms-main h2,
:root[data-theme="dark"] .lms-main h3,
:root[data-theme="dark"] .lms-main h4,
:root[data-theme="dark"] .lms-main h5,
:root[data-theme="dark"] .lms-main .nm,
:root[data-theme="dark"] .lms-main .ct-v,
:root[data-theme="dark"] .lms-main .dl-name,
:root[data-theme="dark"] .lms-main b,
:root[data-theme="dark"] .lms-main strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none;
  text-shadow: none !important;
}
:root[data-theme="dark"] .lms-main h1 { background: none !important; }
:root[data-theme="dark"] .lms-main .lms-ph__eyebrow { color: #ff5a5f !important; -webkit-text-fill-color: #ff5a5f !important; }
:root[data-theme="dark"] .lms-main p,
:root[data-theme="dark"] .lms-main li,
:root[data-theme="dark"] .lms-main td,
:root[data-theme="dark"] .lms-main label,
:root[data-theme="dark"] .lms-main dd,
:root[data-theme="dark"] .lms-main .ct-k { color: #e6e7ea; }
:root[data-theme="dark"] .lms-main .ct-s,
:root[data-theme="dark"] .lms-main .mut,
:root[data-theme="dark"] .lms-main small,
:root[data-theme="dark"] .lms-main dt,
:root[data-theme="dark"] .lms-main .lms-ph p { color: #a4a5ac !important; -webkit-text-fill-color: currentColor; }
:root[data-theme="dark"] .lms-main [class*="text-ink"],
:root[data-theme="dark"] .lms-main [class*="text-gray"],
:root[data-theme="dark"] .lms-main [class*="text-slate"],
:root[data-theme="dark"] .lms-main [class*="text-black"] { color: #e6e7ea !important; }
:root[data-theme="dark"] .lms-main a:not([class]) { color: #ff7a7f; }

/* ── Tables ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] .lms-table,
:root[data-theme="dark"] .lms-table tbody tr { background: transparent !important; color: #fff; }
:root[data-theme="dark"] .lms-table thead th,
:root[data-theme="dark"] .lms-table thead tr { background: #0b0b0d !important; color: #9b9ca3 !important; border-color: #24252a !important; }
:root[data-theme="dark"] .lms-table td,
:root[data-theme="dark"] .lms-table th { border-color: #1f2024 !important; }
:root[data-theme="dark"] .lms-table tbody tr:hover { background: #17171b !important; }

/* ── Buttons ──────────────────────────────────────────────────────── */
:root[data-theme="dark"] .lms-btn:not(.lms-btn--primary):not(.lms-btn--danger) {
  background: #16161a !important; color: #fff !important; border-color: #2c2d33 !important;
}
:root[data-theme="dark"] .lms-btn:not(.lms-btn--primary):not(.lms-btn--danger):hover { background: #1f2025 !important; border-color: #44454d !important; }
:root[data-theme="dark"] .lms-btn[disabled],
:root[data-theme="dark"] .lms-btn.is-disabled { opacity: .45; }

/* ── Forms ────────────────────────────────────────────────────────── */
:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .lms-input {
  background-color: #0b0b0d !important; color: #fff !important; border-color: #2c2d33 !important;
}
:root[data-theme="dark"] ::placeholder { color: #75767d !important; }

/* ── Notices, chips, pills ────────────────────────────────────────── */
:root[data-theme="dark"] .lms-notice { background: #0e1d2c !important; border-color: #1f3b57 !important; color: #e6e7ea !important; }
:root[data-theme="dark"] .lms-notice--warn,
:root[data-theme="dark"] .emp-note { background: #2a2208 !important; border-color: #5a4a12 !important; color: #f5e7b0 !important; }
:root[data-theme="dark"] .dl-chip,
:root[data-theme="dark"] .cv-cls,
:root[data-theme="dark"] .dl-count,
:root[data-theme="dark"] [data-live-count] { background: #1c1d22 !important; color: #e6e7ea !important; border-color: #2c2d33 !important; }

/* ── Charts ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] .dk-grid { stroke: #222328 !important; }
:root[data-theme="dark"] .dk-base { stroke: #34353b !important; }
:root[data-theme="dark"] .lms-main svg text { fill: #a4a5ac; }
:root[data-theme="dark"] .dk-dot { stroke: #111114 !important; }
:root[data-theme="dark"] .dk-seg { stroke: #111114 !important; }

/* ── Scrollbars ───────────────────────────────────────────────────── */
:root[data-theme="dark"] { scrollbar-color: #2c2d33 #060607; }

/* ── Selected states that used the ink colour as a background ───────
   (--ink is white in dark mode, so these turned white-on-white). */
:root[data-theme="dark"] .lms-stat.is-on,
:root[data-theme="dark"] .lms-chip.is-on,
:root[data-theme="dark"] .aop-step.is-on,
:root[data-theme="dark"] .pay-seg__o.is-on,
:root[data-theme="dark"] .ls-chip input:checked + span,
:root[data-theme="dark"] .dl-tabs button[aria-pressed="true"] {
  background: linear-gradient(180deg, #c8161f 0%, #9a0f17 100%) !important;
  border-color: #c8161f !important; color: #fff !important;
  box-shadow: 0 12px 24px -14px rgba(200,22,31,.8) !important;
}
:root[data-theme="dark"] .lms-stat.is-on *,
:root[data-theme="dark"] .aop-step.is-on * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
:root[data-theme="dark"] .lms-stat.is-on::before { background: #f2c200 !important; }
:root[data-theme="dark"] .lms-stat.is-on .aq-ic { background: rgba(255,255,255,.16) !important; }
:root[data-theme="dark"] .lms-stat { background: linear-gradient(180deg, #141417 0%, #0f0f12 100%); border-color: #24252a; }
:root[data-theme="dark"] .lms-stat.is-zero:not(.is-on) { opacity: .8; }
:root[data-theme="dark"] .lms-stat__l { opacity: 1; color: #a4a5ac; }

/* Icon plates: dark, tinted with the tile's own colour (not pale grey). */
:root[data-theme="dark"] .aq-ic { background: color-mix(in srgb, var(--aq-c, #888) 20%, #121215) !important; }
:root[data-theme="dark"] .ct-ic { background: color-mix(in srgb, var(--ct-c, #888) 20%, #121215) !important; }

/* Small ink badges */
:root[data-theme="dark"] .lms-main [style*="background:var(--ink)"] { background: #1f2025 !important; color: #fff !important; }
