/* THEMES_V1 — color themes (loaded after app.css). Each theme only sets the tokens app.css
   already uses; nothing else in the UI changes. Contrast on --surface: text >= 11:1,
   text2 >= 5.7:1, accent >= 4:1, black text on the accent (primary buttons) >= 4.5:1. */

/* tokens every theme gets (dark defaults) */
:root {
  --on-accent: #000;                                                   /* text on accent-colored buttons */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);   /* active nav item, highlights */
  --sidebar-end: rgba(20,27,42,.98);                                   /* bottom of the visual-nav sidebar */
}

/* Light: status colors dark enough to read on white */
[data-theme="light"] {
  --danger: #dc2626; --success: #15803d; --warning: #b45309; --info: #2563eb;
  --sidebar-end: #e8eef5;
}

/* ── dark themes ─────────────────────────────────────────────────────────── */
[data-theme="midnight"] {
  --bg: #0a1020; --surface: #111a2e; --surface2: #17223b; --surface3: #1e2b49;
  --border: #26344f; --border2: #344569;
  --text: #e6edf8; --text2: #a3b3cf; --text3: #7486a6;
  --accent: #60a5fa; --accent2: #93c5fd;
  --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --info: #38bdf8;
  --sidebar-end: #0c1424;
}
[data-theme="forest"] {
  --bg: #0b1410; --surface: #122019; --surface2: #182a21; --surface3: #1f3529;
  --border: #294034; --border2: #36533f;
  --text: #e2efe7; --text2: #a0bcab; --text3: #6f8f7c;
  --accent: #34d399; --accent2: #6ee7b7;
  --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --info: #60a5fa;
  --sidebar-end: #0d1813;
}
[data-theme="plum"] {
  --bg: #130e1b; --surface: #1c1527; --surface2: #251c34; --surface3: #2e2341;
  --border: #3a2c50; --border2: #4b3a66;
  --text: #eee8f7; --text2: #b6a8cc; --text3: #86789d;
  --accent: #c084fc; --accent2: #d8b4fe;
  --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --info: #60a5fa;
  --sidebar-end: #160f20;
}
[data-theme="graphite"] {
  --bg: #111214; --surface: #1a1b1e; --surface2: #222327; --surface3: #2a2c31;
  --border: #33353b; --border2: #45484f;
  --text: #ececee; --text2: #a8abb3; --text3: #7c8089;
  --accent: #2dd4bf; --accent2: #5eead4;
  --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --info: #60a5fa;
  --sidebar-end: #141517;
}

/* ── light themes ────────────────────────────────────────────────────────── */
[data-theme="ocean"] {
  --bg: #edf3f9; --surface: #ffffff; --surface2: #f5f9fc; --surface3: #e1ebf5;
  --border: #d3e0ec; --border2: #b6c9dd;
  --text: #0f2236; --text2: #3c536e; --text3: #5f7591;
  --accent: #0284c7; --accent2: #0ea5e9;
  --danger: #dc2626; --success: #15803d; --warning: #b45309; --info: #1d4ed8;
  --sidebar-end: #e1ebf5;
}
[data-theme="sand"] {
  --bg: #f5efe4; --surface: #fffcf6; --surface2: #faf5eb; --surface3: #efe5d3;
  --border: #e4d8c3; --border2: #d2c1a3;
  --text: #2a2117; --text2: #5c4f3e; --text3: #7d6e58;
  --accent: #b85a1a; --accent2: #d0712c;
  --danger: #b91c1c; --success: #15803d; --warning: #a16207; --info: #1d4ed8;
  --sidebar-end: #efe5d3;
}

/* ── accessibility ───────────────────────────────────────────────────────── */
[data-theme="contrast"] {
  --bg: #000000; --surface: #0b0b0b; --surface2: #151515; --surface3: #202020;
  --border: #8a8a8a; --border2: #b0b0b0;
  --text: #ffffff; --text2: #e6e6e6; --text3: #c4c4c4;
  --accent: #ffd60a; --accent2: #ffe45c;
  --danger: #ff6b6b; --success: #3ddc84; --warning: #ffd60a; --info: #6cb8ff;
  --sidebar-end: #000000;
}
[data-theme="contrast"] a { text-decoration: underline; }
[data-theme="contrast"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── places in app.css that hard-coded the amber / dark palette ──────────── */
.btn-primary, .theme-btn.active { color: var(--on-accent); }
.nav-item.active { background: var(--accent-soft); }
.cmms-visual-sidebar { background: linear-gradient(180deg, var(--surface), var(--sidebar-end)); }
.cmms-visual-card.active { background: linear-gradient(135deg, var(--visual-soft, var(--accent-soft)), rgba(255,255,255,.035)); }
.cmms-visual-start { border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), rgba(255,255,255,.02)); }
.cmms-visual-start .cmms-visual-card { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
/* white glass overlays are invisible on light themes: use a faint ink tint instead */
[data-theme="light"] .cmms-visual-card, [data-theme="ocean"] .cmms-visual-card, [data-theme="sand"] .cmms-visual-card {
  background: linear-gradient(135deg, rgba(15,23,42,.035), rgba(15,23,42,.01)); }

/* ── theme picker (topbar) ───────────────────────────────────────────────── */
.theme-pick { position: relative; }
.theme-pick-btn { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text2); font-size: 11px; font-weight: 600; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap; }
.theme-pick-btn:hover { color: var(--text); border-color: var(--border2); }
.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; }
.theme-sw i { flex: 1; }
/* fixed + placed by JS: the topbar clips overflow */
.theme-menu { position: fixed; z-index: 10050; width: 230px; max-height: 70vh; overflow: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.theme-menu[hidden] { display: none; }
.theme-menu-h { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 8px 8px 4px; }
.theme-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: none; border-radius: 7px; background: none;
  color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.2; font-family: inherit; cursor: pointer; text-align: left; }
.theme-opt:hover, .theme-opt:focus-visible { background: var(--surface2); }
.theme-opt.active { background: var(--accent-soft); font-weight: 700; }
.theme-opt .theme-check { margin-left: auto; color: var(--accent); font-weight: 800; }
.theme-opt .theme-sw { width: 36px; height: 18px; }
@media (max-width: 640px) { .theme-pick-name { display: none; } }

/* CMMS_FONT_VISIBILITY_V1 (app.css) forces white text into every search box, which disappears on the
   light themes: follow the theme instead. The extra "html" outranks it; same !important, later file. */
html input[type="search"], html input[placeholder*="Search"], html input[placeholder*="search"],
html aside input:not([type="checkbox"]):not([type="radio"]),
html [class*="sidebar"] input:not([type="checkbox"]):not([type="radio"]),
html [class*="side-nav"] input:not([type="checkbox"]):not([type="radio"]),
html [class*="navigation"] input:not([type="checkbox"]):not([type="radio"]),
html [class*="nav-search"] input:not([type="checkbox"]):not([type="radio"]),
html [class*="search"] input:not([type="checkbox"]):not([type="radio"]),
html input.cmms-search, html select.cmms-search, html textarea.cmms-search {
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important;
}
html input[type="search"]::placeholder, html input[placeholder*="Search"]::placeholder, html input[placeholder*="search"]::placeholder,
html aside input::placeholder, html [class*="sidebar"] input::placeholder, html [class*="side-nav"] input::placeholder,
html [class*="navigation"] input::placeholder, html [class*="nav-search"] input::placeholder, html [class*="search"] input::placeholder {
  color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important;
}
html input[type="search"]:-webkit-autofill, html [class*="sidebar"] input:-webkit-autofill, html [class*="search"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important;
}