/* SDP_THEMES_V1 — the 10 FacilityView360 / CMMS Pro color themes for every Secure Duty Pro page.
   Load AFTER the page's own CSS. The theme lives on the person's SDP account (GET/PUT /api/settings/theme,
   /api/client/theme for the client portal), is kept in step with their FacilityView360 profile, and is applied by
   /app/js/sdp-theme.js as <html data-theme="..." data-theme-mode="light|dark">.

   Layer 1  html[data-theme="x"]          --th-* tokens: identical to FV3 static/css/fv3-themes.css (CMMS values)
   Layer 2  html[data-theme] *, html       every color custom property an SDP page uses -> --th-* tokens
                                           (separate --th-* names: no var() cycles such as --bg: var(--bg))
   Layer 3  theme picker CSS (same as FV3 / CMMS) + the MDT display popover's theme grid */

/* ── Layer 1: theme tokens (copied from fv3-themes.css, keep in step) ──────── */
html, html[data-theme="dark"] {
  --th-bg: #0f1117; --th-surface: #1a1f2e; --th-surface2: #222840; --th-surface3: #2a3150;
  --th-border: #2d3348; --th-border2: #3d4468;
  --th-text: #e2e8f0; --th-text2: #94a3b8; --th-text3: #64748b;
  --th-accent: #f59e0b; --th-accent2: #fbbf24;
  --th-danger: #ef4444; --th-success: #22c55e; --th-warning: #f59e0b; --th-info: #3b82f6;
  --th-on-accent: #000;
  --th-shadow: 0 22px 55px rgba(0, 0, 0, .30);
}
html[data-theme="medium"] {
  --th-bg: #1e2433; --th-surface: #28304a; --th-surface2: #323c5a; --th-surface3: #3a4566;
  --th-border: #3d4868; --th-border2: #4d5880;
  --th-text: #e8edf5; --th-text2: #9dacc4; --th-text3: #6b7fa0;
  --th-accent: #f59e0b; --th-accent2: #fbbf24;
}
html[data-theme="midnight"] {
  --th-bg: #0a1020; --th-surface: #111a2e; --th-surface2: #17223b; --th-surface3: #1e2b49;
  --th-border: #26344f; --th-border2: #344569;
  --th-text: #e6edf8; --th-text2: #a3b3cf; --th-text3: #7486a6;
  --th-accent: #60a5fa; --th-accent2: #93c5fd;
  --th-danger: #f87171; --th-success: #4ade80; --th-warning: #fbbf24; --th-info: #38bdf8;
}
html[data-theme="forest"] {
  --th-bg: #0b1410; --th-surface: #122019; --th-surface2: #182a21; --th-surface3: #1f3529;
  --th-border: #294034; --th-border2: #36533f;
  --th-text: #e2efe7; --th-text2: #a0bcab; --th-text3: #6f8f7c;
  --th-accent: #34d399; --th-accent2: #6ee7b7;
  --th-danger: #f87171; --th-success: #4ade80; --th-warning: #fbbf24; --th-info: #60a5fa;
}
html[data-theme="plum"] {
  --th-bg: #130e1b; --th-surface: #1c1527; --th-surface2: #251c34; --th-surface3: #2e2341;
  --th-border: #3a2c50; --th-border2: #4b3a66;
  --th-text: #eee8f7; --th-text2: #b6a8cc; --th-text3: #86789d;
  --th-accent: #c084fc; --th-accent2: #d8b4fe;
  --th-danger: #f87171; --th-success: #4ade80; --th-warning: #fbbf24; --th-info: #60a5fa;
}
html[data-theme="graphite"] {
  --th-bg: #111214; --th-surface: #1a1b1e; --th-surface2: #222327; --th-surface3: #2a2c31;
  --th-border: #33353b; --th-border2: #45484f;
  --th-text: #ececee; --th-text2: #a8abb3; --th-text3: #7c8089;
  --th-accent: #2dd4bf; --th-accent2: #5eead4;
  --th-danger: #f87171; --th-success: #4ade80; --th-warning: #fbbf24; --th-info: #60a5fa;
}
html[data-theme="light"] {
  --th-bg: #f0f4f8; --th-surface: #ffffff; --th-surface2: #f8fafc; --th-surface3: #e8eef5;
  --th-border: #e2e8f0; --th-border2: #cbd5e1;
  --th-text: #1e293b; --th-text2: #475569; --th-text3: #94a3b8;
  --th-accent: #d97706; --th-accent2: #f59e0b;
  --th-danger: #dc2626; --th-success: #15803d; --th-warning: #b45309; --th-info: #2563eb;
}
html[data-theme="ocean"] {
  --th-bg: #edf3f9; --th-surface: #ffffff; --th-surface2: #f5f9fc; --th-surface3: #e1ebf5;
  --th-border: #d3e0ec; --th-border2: #b6c9dd;
  --th-text: #0f2236; --th-text2: #3c536e; --th-text3: #5f7591;
  --th-accent: #0284c7; --th-accent2: #0ea5e9;
  --th-danger: #dc2626; --th-success: #15803d; --th-warning: #b45309; --th-info: #1d4ed8;
}
html[data-theme="sand"] {
  --th-bg: #f5efe4; --th-surface: #fffcf6; --th-surface2: #faf5eb; --th-surface3: #efe5d3;
  --th-border: #e4d8c3; --th-border2: #d2c1a3;
  --th-text: #2a2117; --th-text2: #5c4f3e; --th-text3: #7d6e58;
  --th-accent: #b85a1a; --th-accent2: #d0712c;
  --th-danger: #b91c1c; --th-success: #15803d; --th-warning: #a16207; --th-info: #1d4ed8;
}
html[data-theme="contrast"] {
  --th-bg: #000000; --th-surface: #0b0b0b; --th-surface2: #151515; --th-surface3: #202020;
  --th-border: #8a8a8a; --th-border2: #b0b0b0;
  --th-text: #ffffff; --th-text2: #e6e6e6; --th-text3: #c4c4c4;
  --th-accent: #ffd60a; --th-accent2: #ffe45c;
  --th-danger: #ff6b6b; --th-success: #3ddc84; --th-warning: #ffd60a; --th-info: #6cb8ff;
}
html[data-theme-mode="light"] { --th-shadow: 0 18px 42px rgba(15, 23, 42, .10); color-scheme: light; }
html[data-theme-mode="dark"] { color-scheme: dark; }
html[data-theme] { --th-accent-soft: color-mix(in srgb, var(--th-accent) 14%, transparent); }
html[data-theme] { --th-dim: var(--th-text3); }
html[data-theme="light"] { --th-dim: #64748b; }
html[data-theme] { --th-success-solid: #15803d; --th-danger-solid: #b91c1c; --th-on-solid: #fff; }

/* SDP extras: text on SDP's status fills (clock-in green, BAN amber, ...). Dark themes keep SDP's dark ink on the
   bright status colors; light themes' status colors are dark, so white text. */
html[data-theme] { --th-on-success: #06210f; --th-on-warning: #1a1205; }
html[data-theme-mode="light"] { --th-on-success: #fff; --th-on-warning: #fff; }

/* ── Layer 2: map every SDP color variable to the tokens ──────────────────────
   Declared on every element so the pages' own :root{...} values are overridden. */
html[data-theme] *, html[data-theme] {
  /* console (index.html), guard app (guard.html), MDT (mdt.html) and the console scripts */
  --bg: var(--th-bg);
  --panel: var(--th-surface); --panel-2: var(--th-surface2); --panel-3: var(--th-surface3);
  --line: var(--th-border); --line-2: var(--th-border2);
  --ink: var(--th-text); --ink-dim: var(--th-text2); --ink-faint: var(--th-dim);
  --accent: var(--th-accent); --accent-ink: var(--th-on-accent);
  --amber: var(--th-warning); --red: var(--th-danger); --green: var(--th-success);
  --info: var(--th-info); --blue: var(--th-info);
  /* names the console scripts read with fallbacks (var(--muted,#9aa), var(--danger,#ef4444), var(--warn,...)) */
  --muted: var(--th-text2); --danger: var(--th-danger); --warn: var(--th-warning);
  /* client.html, client_staffing.html, movement_report.html */
  --text: var(--th-text); --brand: var(--th-accent); --brand2: var(--th-accent); --brand-ink: var(--th-on-accent);
  --soft: var(--th-accent-soft); --good: var(--th-success); --bad: var(--th-danger); --shadow: var(--th-shadow);
  /* sysop.html, terms.html, compatible-gear.html, f3-client-launch.html */
  --panel2: var(--th-surface2); --border: var(--th-border); --link: var(--th-info); --cyan: var(--th-accent);
  /* not mapped on purpose: --sec (each sector's own color), --mono / --sans / --radius (not colors),
     marketing/index.html (public site, unthemed) */
}

/* contrast: underline links and a strong focus ring (CMMS themes_v1.css) */
html[data-theme="contrast"] a { text-decoration: underline; }
html[data-theme="contrast"] :focus-visible { outline: 3px solid var(--th-accent); outline-offset: 2px; }

/* native form controls follow the theme */
html[data-theme] select option { background: var(--th-surface); color: var(--th-text); }

/* ── Layer 3: theme picker (same markup / look as FV3 and CMMS Pro) ───────── */
html .theme-pick { position: relative; display: inline-flex; vertical-align: middle; }
html .theme-pick .theme-pick-btn { display: flex; align-items: center; gap: 6px; width: auto; margin: 0; padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--th-border); background: var(--th-surface2); color: var(--th-text2); font-size: 11px; font-weight: 600; line-height: 1;
  font-family: inherit; cursor: pointer; white-space: nowrap; box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; opacity: 1; flex: 0 0 auto; }
html .theme-pick .theme-pick-btn:hover { color: var(--th-text); border-color: var(--th-border2); background: var(--th-surface2); }
html .theme-pick .theme-sw { display: inline-flex; width: 26px; height: 14px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(127,127,127,.45); flex: 0 0 auto; }
html .theme-pick .theme-sw i { flex: 1; }
html .theme-pick .theme-menu { position: fixed; z-index: 100050; width: 230px; max-height: 70vh; overflow: auto;
  background: var(--th-surface); color: var(--th-text); border: 1px solid var(--th-border2); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); text-align: left; font-family: inherit; font-size: 13px; line-height: 1.2; }
html .theme-pick .theme-menu[hidden] { display: none; }
html .theme-pick .theme-menu-h { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--th-text3); padding: 8px 8px 4px; }
html .theme-pick .theme-opt { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 7px 8px; border: none; border-radius: 7px; background: none;
  color: var(--th-text); font-size: 13px; font-weight: 500; line-height: 1.2; font-family: inherit; cursor: pointer; text-align: left;
  box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; }
html .theme-pick .theme-opt:hover, html .theme-pick .theme-opt:focus-visible { background: var(--th-surface2); }
html .theme-pick .theme-opt.active { background: var(--th-accent-soft); font-weight: 700; }
html .theme-pick .theme-opt .theme-check { margin-left: auto; color: var(--th-accent); font-weight: 800; }
html .theme-pick .theme-opt .theme-sw { width: 36px; height: 18px; }
@media (max-width: 640px) { html .theme-pick .theme-pick-name { display: none; } }
/* touch-first apps (guard, MDT): bigger targets */
html .theme-pick[data-touch] .theme-pick-btn { padding: 8px 11px; font-size: 13px; }
html .theme-pick[data-touch] .theme-opt { padding: 11px 10px; font-size: 15px; }

/* MDT display popover: the 10 themes as touch buttons (replaces White / Navy / Black) */
#disp-pop .dp-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
#disp-pop .dp-themes .dp-opt { display: flex; align-items: center; gap: 8px; text-align: left; min-width: 0; }
#disp-pop .dp-themes .theme-sw { display: inline-flex; width: 30px; height: 16px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(127,127,127,.45); flex: 0 0 auto; }
#disp-pop .dp-themes .theme-sw i { flex: 1; }