/* thresholds-modal.css — admin alert-threshold editor (Daily Logs).
   Dark cosmic glassmorphism; mirrors the rooms-help / addback modal language. */

/* Toolbar pill variant (amber = "settings that change alerting"). */
.rooms-thresh-pill {
  color: #fcd9a6 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(124, 58, 237, 0.16)) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}
.rooms-thresh-pill:hover { box-shadow: 0 6px 22px -10px rgba(251, 191, 36, 0.6); }

/* ── Overlay + modal ──────────────────────────────────────────────────────── */
.thm-overlay {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
  background: rgba(4, 6, 18, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;               /* never trap clicks while invisible */
  transition: opacity 0.22s ease;
}
.thm-overlay.active { opacity: 1; pointer-events: auto; }

.thm-modal {
  width: min(880px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(124, 58, 237, 0.12), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(56, 189, 248, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(16, 20, 38, 0.98), rgba(10, 13, 26, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.thm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.thm-head-l { display: flex; align-items: center; gap: 13px; }
.thm-head-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  color: #fcd9a6;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(251, 191, 36, 0.32);
}
.thm-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(167, 139, 250, 0.9);
}
.thm-title { margin: 2px 0 0; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 19px; font-weight: 600; color: #f1f5ff; }
.thm-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(203, 213, 225, 0.85);
  background: rgba(148, 163, 184, 0.08); border: 1px solid rgba(148, 163, 184, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}
.thm-close:hover { background: rgba(248, 113, 113, 0.16); color: #fecaca; border-color: rgba(248, 113, 113, 0.4); }

.thm-intro {
  padding: 12px 20px; font-size: 12.5px; line-height: 1.55; color: rgba(203, 213, 225, 0.82);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.thm-intro strong { color: #d8e6ff; } .thm-intro em { color: #fcd9a6; font-style: normal; font-weight: 600; }

/* ── Body (scrolls) ───────────────────────────────────────────────────────── */
.thm-body { padding: 16px 20px; overflow-y: auto; }

/* ── Scope selector ───────────────────────────────────────────────────────── */
.thm-scope {
  border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 14px;
  background: rgba(15, 23, 42, 0.5); padding: 12px 14px; margin-bottom: 16px;
}
.thm-scope-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
.thm-scope-head svg { color: rgba(167, 139, 250, 0.9); }
.thm-scope-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thm-scope-opt {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(148, 163, 184, 0.16);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}
.thm-scope-opt:hover { border-color: rgba(167, 139, 250, 0.5); }
.thm-scope-opt:active { transform: scale(0.98); }
.thm-scope-opt.active {
  border-color: rgba(167, 139, 250, 0.8);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(56, 189, 248, 0.16));
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4) inset;
}
.thm-scope-l { font-size: 13px; font-weight: 600; color: #eef2ff; }
.thm-scope-s { font-size: 10.5px; color: rgba(148, 163, 184, 0.72); }
.thm-scope-sys { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: rgba(203, 213, 225, 0.85); }
.thm-scope-select {
  background: rgba(8, 12, 26, 0.8); color: #e8eef7; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.thm-scope-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: rgba(148, 163, 184, 0.78); }
.thm-scope-note strong { color: #c7b6ff; }

/* ── Metric grid + cards ──────────────────────────────────────────────────── */
.thm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.thm-card {
  border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 14px;
  background: rgba(13, 19, 36, 0.6); padding: 13px 14px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.thm-card.is-overridden { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) inset; }
.thm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.thm-card-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.thm-card-label { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #f1f5ff; }
.thm-card-unit { font-size: 11px; color: rgba(148, 163, 184, 0.7); }
.thm-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
}
.thm-badge-ov { display: none; border: 1px solid rgba(167, 139, 250, 0.5); background: rgba(76, 29, 149, 0.3); color: #d6c7ff; }
.thm-badge-inh { border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(51, 65, 85, 0.4); color: rgba(203, 213, 225, 0.75); }
.thm-card.is-overridden .thm-badge-ov { display: inline-block; }
.thm-card.is-overridden .thm-badge-inh { display: none; }
.thm-card-blurb { font-size: 11px; line-height: 1.4; color: rgba(148, 163, 184, 0.78); margin-top: -2px; }

/* Alert toggle */
.thm-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: 0 0 auto; }
.thm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.thm-toggle-track {
  position: relative; width: 32px; height: 18px; border-radius: 999px;
  background: rgba(71, 85, 105, 0.6); border: 1px solid rgba(148, 163, 184, 0.3);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.thm-toggle-dot {
  position: absolute; top: 1.5px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: #cbd5e1; transition: transform 0.18s ease, background 0.18s ease;
}
.thm-toggle input:checked + .thm-toggle-track { background: rgba(34, 197, 94, 0.45); border-color: rgba(74, 222, 128, 0.6); }
.thm-toggle input:checked + .thm-toggle-track .thm-toggle-dot { transform: translateX(13px); background: #bbf7d0; }
.thm-toggle-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(148, 163, 184, 0.8); }

/* ── Live SVG range bar ───────────────────────────────────────────────────── */
.thm-bar-wrap { margin: 2px 0; }
.thm-bar { width: 100%; height: auto; display: block; }
.thm-bar-bad  { fill: rgba(127, 29, 29, 0.4); stroke: rgba(248, 113, 113, 0.25); stroke-width: 1; }
.thm-bar-safe { fill: rgba(34, 197, 94, 0.32); stroke: rgba(74, 222, 128, 0.7); stroke-width: 1; transition: x 0.22s cubic-bezier(0.22,1,0.32,1), width 0.22s cubic-bezier(0.22,1,0.32,1); }
.thm-bar-sheen { fill: rgba(255,255,255,0.12); transition: x 0.22s cubic-bezier(0.22,1,0.32,1), width 0.22s cubic-bezier(0.22,1,0.32,1); }
.thm-bar-tick { stroke: rgba(226, 232, 240, 0.7); stroke-width: 1.4; }
.thm-bar-ticklbl { fill: rgba(203, 213, 225, 0.85); font-size: 9px; font-weight: 600; font-family: 'Space Grotesk','Inter',sans-serif; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.thm-inputs { display: flex; gap: 10px; }
.thm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.thm-field-k { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(148, 163, 184, 0.7); }
.thm-input { display: flex; align-items: center; gap: 4px; background: rgba(8, 12, 26, 0.8); border: 1px solid rgba(148, 163, 184, 0.26); border-radius: 9px; padding: 0 9px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.thm-input:focus-within { border-color: rgba(56, 189, 248, 0.7); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); }
.thm-num { flex: 1 1 0; min-width: 0; background: transparent; border: 0; outline: 0; color: #f1f5ff; font-family: 'Space Grotesk','Inter',sans-serif; font-size: 15px; font-weight: 600; padding: 8px 0; font-variant-numeric: tabular-nums; }
.thm-input-u { font-size: 11px; color: rgba(148, 163, 184, 0.7); }

/* ── Card footer ──────────────────────────────────────────────────────────── */
.thm-card-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.thm-suggest {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: #bbf7d0;
  background: rgba(22, 101, 52, 0.26); border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 999px; padding: 4px 9px; transition: background 0.15s ease, transform 0.12s ease;
}
.thm-suggest:hover { background: rgba(22, 101, 52, 0.42); }
.thm-suggest:active { transform: scale(0.97); }
.thm-why-btn, .thm-reset {
  font-size: 10.5px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 4px 9px;
  background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.24); color: rgba(203, 213, 225, 0.85);
  transition: background 0.15s ease, color 0.15s ease;
}
.thm-why-btn:hover { background: rgba(167, 139, 250, 0.18); color: #d6c7ff; border-color: rgba(167, 139, 250, 0.5); }
.thm-reset { margin-left: auto; }
.thm-reset:hover { background: rgba(248, 113, 113, 0.16); color: #fecaca; border-color: rgba(248, 113, 113, 0.42); }
.thm-why { font-size: 11.5px; line-height: 1.55; color: rgba(203, 213, 225, 0.82); padding: 9px 11px; border-radius: 10px; background: rgba(8, 12, 26, 0.6); border: 1px solid rgba(148, 163, 184, 0.14); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.thm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px; border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 11, 24, 0.5);
}
.thm-foot-note { font-size: 11.5px; color: rgba(148, 163, 184, 0.82); }
.thm-foot-note strong { color: #c7b6ff; }
.thm-foot-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.thm-btn { font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 8px 16px; transition: background 0.15s ease, transform 0.12s ease; }
.thm-btn:active { transform: scale(0.98); }
.thm-btn-ghost { background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.24); color: rgba(203, 213, 225, 0.85); }
.thm-btn-ghost:hover { background: rgba(248, 113, 113, 0.14); color: #fecaca; border-color: rgba(248, 113, 113, 0.38); }
.thm-btn-cancel { background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(56, 189, 248, 0.85)); border: 1px solid rgba(167, 139, 250, 0.6); color: #fff; }
.thm-btn-cancel:hover { box-shadow: 0 8px 26px -10px rgba(124, 58, 237, 0.8); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .thm-grid { grid-template-columns: 1fr; }
  .thm-scope-opts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .thm-overlay, .thm-bar-safe, .thm-bar-sheen { transition: none; }
}

/* ══════════════════════════════════════════
   LIGHT MODE — Threshold editor overrides
══════════════════════════════════════════ */

/* Toolbar pill (amber intent) — keep amber but land it on light glass */
html[data-theme="light"] .rooms-thresh-pill {
  color: #b45309 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(124, 58, 237, 0.12)) !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
}
html[data-theme="light"] .rooms-thresh-pill:hover { box-shadow: 0 6px 22px -10px rgba(217, 119, 6, 0.5); }

/* ── Modal shell → light frosted glass ─────────────────────────────────────── */
html[data-theme="light"] .thm-modal {
  border: 1px solid rgba(124, 58, 237, 0.20);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(2, 132, 199, 0.08), transparent 55%),
    rgba(252, 252, 255, 0.98);
  box-shadow: 0 30px 90px rgba(80, 90, 160, 0.22);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-head { border-bottom: 1px solid rgba(19, 16, 58, 0.10); }
html[data-theme="light"] .thm-head-ico {
  color: #b45309;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(124, 58, 237, 0.14));
  border: 1px solid rgba(217, 119, 6, 0.32);
}
html[data-theme="light"] .thm-eyebrow { color: var(--accent-purple); }
html[data-theme="light"] .thm-title { color: var(--text-primary); }
html[data-theme="light"] .thm-close {
  color: var(--text-secondary);
  background: rgba(19, 16, 58, 0.06); border: 1px solid rgba(19, 16, 58, 0.12);
}
html[data-theme="light"] .thm-close:hover { background: rgba(225, 29, 72, 0.12); color: #b91c1c; border-color: rgba(225, 29, 72, 0.4); }

/* ── Intro ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-intro { color: var(--text-secondary); border-bottom: 1px solid rgba(19, 16, 58, 0.10); }
html[data-theme="light"] .thm-intro strong { color: var(--text-primary); }
html[data-theme="light"] .thm-intro em { color: #b45309; }

/* ── Scope selector ───────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-scope {
  border: 1px solid rgba(19, 16, 58, 0.12);
  background: rgba(19, 16, 58, 0.03);
}
html[data-theme="light"] .thm-scope-head { color: var(--text-muted); }
html[data-theme="light"] .thm-scope-head svg { color: var(--accent-purple); }
html[data-theme="light"] .thm-scope-opt {
  background: rgba(19, 16, 58, 0.03); border: 1px solid rgba(19, 16, 58, 0.12);
}
html[data-theme="light"] .thm-scope-opt:hover { border-color: rgba(124, 58, 237, 0.5); }
html[data-theme="light"] .thm-scope-opt.active .thm-scope-l { color: var(--text-primary); }
html[data-theme="light"] .thm-scope-l { color: var(--text-primary); }
html[data-theme="light"] .thm-scope-s { color: var(--text-muted); }
html[data-theme="light"] .thm-scope-sys { color: var(--text-secondary); }
html[data-theme="light"] .thm-scope-select {
  background: #fff; color: var(--text-primary);
  border: 1px solid rgba(19, 16, 58, 0.16);
}
html[data-theme="light"] .thm-scope-note { color: var(--text-muted); }
html[data-theme="light"] .thm-scope-note strong { color: #6d28d9; }

/* ── Metric cards ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-card {
  border: 1px solid rgba(19, 16, 58, 0.12);
  background: rgba(19, 16, 58, 0.03);
}
html[data-theme="light"] .thm-card-label { color: var(--text-primary); }
html[data-theme="light"] .thm-card-unit { color: var(--text-muted); }
html[data-theme="light"] .thm-badge-ov { border: 1px solid rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
html[data-theme="light"] .thm-badge-inh { border: 1px solid rgba(19, 16, 58, 0.2); background: rgba(19, 16, 58, 0.06); color: var(--text-muted); }
html[data-theme="light"] .thm-card-blurb { color: var(--text-secondary); }

/* ── Alert toggle (off state; checked green stays) ────────────────────────── */
html[data-theme="light"] .thm-toggle-track {
  background: rgba(19, 16, 58, 0.18); border: 1px solid rgba(19, 16, 58, 0.25);
}
html[data-theme="light"] .thm-toggle-dot { background: #fff; box-shadow: 0 1px 2px rgba(19, 16, 58, 0.25); }
html[data-theme="light"] .thm-toggle-lbl { color: var(--text-muted); }

/* ── SVG range bar ticks (light strokes vanish on light) ──────────────────── */
html[data-theme="light"] .thm-bar-tick { stroke: rgba(19, 16, 58, 0.55); }
html[data-theme="light"] .thm-bar-ticklbl { fill: rgba(19, 16, 58, 0.7); }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-field-k { color: var(--text-muted); }
html[data-theme="light"] .thm-input {
  background: #fff; border: 1px solid rgba(19, 16, 58, 0.16);
}
html[data-theme="light"] .thm-input:focus-within { border-color: rgba(2, 132, 199, 0.7); box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18); }
html[data-theme="light"] .thm-num { color: var(--text-primary); }
html[data-theme="light"] .thm-input-u { color: var(--text-muted); }

/* ── Card footer buttons ──────────────────────────────────────────────────── */
html[data-theme="light"] .thm-suggest {
  color: #047857;
  background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(5, 150, 105, 0.4);
}
html[data-theme="light"] .thm-suggest:hover { background: rgba(16, 185, 129, 0.24); }
html[data-theme="light"] .thm-why-btn,
html[data-theme="light"] .thm-reset {
  background: rgba(19, 16, 58, 0.06); border: 1px solid rgba(19, 16, 58, 0.2); color: var(--text-secondary);
}
html[data-theme="light"] .thm-why-btn:hover { background: rgba(124, 58, 237, 0.14); color: #6d28d9; border-color: rgba(124, 58, 237, 0.5); }
html[data-theme="light"] .thm-reset:hover { background: rgba(225, 29, 72, 0.12); color: #b91c1c; border-color: rgba(225, 29, 72, 0.42); }
html[data-theme="light"] .thm-why { color: var(--text-secondary); background: rgba(19, 16, 58, 0.03); border: 1px solid rgba(19, 16, 58, 0.12); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .thm-foot {
  border-top: 1px solid rgba(19, 16, 58, 0.10);
  background: rgba(19, 16, 58, 0.03);
}
html[data-theme="light"] .thm-foot-note { color: var(--text-secondary); }
html[data-theme="light"] .thm-foot-note strong { color: #6d28d9; }
html[data-theme="light"] .thm-btn-ghost {
  background: rgba(19, 16, 58, 0.06); border: 1px solid rgba(19, 16, 58, 0.2); color: var(--text-secondary);
}
html[data-theme="light"] .thm-btn-ghost:hover { background: rgba(225, 29, 72, 0.12); color: #b91c1c; border-color: rgba(225, 29, 72, 0.38); }