/* FV3_THEMES_V1 — CMMS Pro's 10 color themes for every FacilityView360 page and module.
   Load AFTER the page's own CSS. The theme lives on the person's FV3 profile (GET/PUT /api/account/theme)
   and is applied by /static/js/fv3-theme.js as <html data-theme="..." data-theme-mode="light|dark">.

   Layer 1  html[data-theme="x"]          internal --th-* tokens, values copied from CMMS
                                           static/css/app.css (dark, medium, light) and static/css/themes_v1.css.
   Layer 2  html[data-theme] *, html       every color custom property name used by FV3 pages (and CMMS token
                                           names, for CMMS-styled modules like Parking) -> --th-* tokens.
                                           Separate --th-* names mean no var() cycles (--bg: var(--bg)).
   Layer 3  CMMS theme picker CSS (.theme-pick ...), same look as CMMS Pro's topbar picker. */

/* ── Layer 1: theme tokens ─────────────────────────────────────────────────── */
html, html[data-theme="dark"] {            /* CMMS :root / [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"] {                /* CMMS "Mid" */
  --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;
}
/* light-family extras (light, ocean, sand) */
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; }
/* derived (CMMS themes_v1.css :root) */
html[data-theme] { --th-accent-soft: color-mix(in srgb, var(--th-accent) 14%, transparent); }
/* FV3 'dim' text (hints, labels: --dim --p-dim --a-dim --faint). Same as text3 except Light, whose CMMS text3 (#94a3b8)
   is only 2.6:1 on white; FV3 uses dim for readable hints, so Light gets CMMS's dark-theme text3 #64748b (4.8:1). */
html[data-theme] { --th-dim: var(--th-text3); }
html[data-theme="light"] { --th-dim: #64748b; }
/* solid fills that carry white text (clock in/out, destructive buttons): >= 4.5:1 with #fff on every theme */
html[data-theme] { --th-success-solid: #15803d; --th-danger-solid: #b91c1c; --th-on-solid: #fff; }
/* text on a status tint (message boxes): the status color itself, which reads on every theme's surfaces */

/* ── Layer 2: map every FV3 / CMMS color variable to the tokens ──────────────
   Declared on every element so page-level declarations (:root{...}, .cv{...}) are overridden. */
html[data-theme] *, html[data-theme] {
  /* CMMS token names (Parking and other CMMS-styled modules) */
  --bg: var(--th-bg); --surface: var(--th-surface); --surface2: var(--th-surface2); --surface3: var(--th-surface3);
  --border: var(--th-border); --border2: var(--th-border2);
  --text: var(--th-text); --text2: var(--th-text2); --text3: var(--th-text3);
  --accent: var(--th-accent); --accent2: var(--th-accent2); --primary: var(--th-accent);
  --danger: var(--th-danger); --success: var(--th-success); --warning: var(--th-warning); --info: var(--th-info);
  --on-accent: var(--th-on-accent); --accent-soft: var(--th-accent-soft);
  --sidebar-end: var(--th-surface3);

  /* FV3 plain names: buy, conversations, forgot, not-me, set-password, welcome, timecard-kiosk, css/app.css */
  --panel: var(--th-surface); --panel2: var(--th-surface2); --line: var(--th-border);
  --muted: var(--th-text2); --dim: var(--th-dim);
  --good: var(--th-success); --warn: var(--th-warning); --bad: var(--th-danger);
  --green: var(--th-success); --amber: var(--th-warning);

  /* --p-*: people, person, new-person, accounts, access-check, linked-accounts, timecard */
  --p-bg: var(--th-bg); --p-panel: var(--th-surface); --p-panel2: var(--th-surface2); --p-line: var(--th-border);
  --p-text: var(--th-text); --p-muted: var(--th-text2); --p-dim: var(--th-dim);
  --p-accent: var(--th-accent); --p-good: var(--th-success); --p-warn: var(--th-warning); --p-bad: var(--th-danger);

  /* --a-*: account */
  --a-bg: var(--th-bg); --a-panel: var(--th-surface); --a-panel2: var(--th-surface2); --a-line: var(--th-border);
  --a-text: var(--th-text); --a-muted: var(--th-text2); --a-dim: var(--th-dim);
  --a-accent: var(--th-accent); --a-good: var(--th-success); --a-warn: var(--th-warning); --a-bad: var(--th-danger);

  /* reports.html */
  --page: var(--th-bg); --page-2: var(--th-surface3);
  --panel-2: var(--th-surface2); --panel-3: var(--th-surface3);
  --line-soft: color-mix(in srgb, var(--th-border) 70%, transparent);
  --faint: var(--th-dim);
  --cyan: var(--th-accent); --cyan-dark: var(--th-accent);
  --blue: var(--th-info); --red: var(--th-danger);
  --shadow: var(--th-shadow);
  /* --purple, --p-comp and the product brand colors (--cmms --asset --sdp --f3) stay the page's own:
     they identify products/statuses and read on every theme. */
}

/* 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 (some FV3 inputs inherit UA colors) */
html[data-theme] select option { background: var(--th-surface); color: var(--th-text); }

/* ── Layer 3: theme picker (CMMS themes_v1.css, tokens -> --th-*). The "html .theme-pick" prefix keeps page-wide
      rules such as "button{...}" or ".ppl button{...}" from restyling it. ─────────────────────────────────── */
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; }
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; }
/* fixed + placed by JS: headers can clip overflow */
html .theme-pick .theme-menu { position: fixed; z-index: 10050; 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; }
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; } }

/* account.html "Theme" setting row */
html .fv3-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }