/* ─────────────────────────────────────────────
   180 Pros shared theme
   Dark (default) palette pulled from the 180 Pros brand background
   (deep navy with a violet → magenta radial gradient). Status colors
   (normal/moderate/critical) stay semantic red/amber/green in both
   themes — only brand/UI colors shift between light and dark.
───────────────────────────────────────────── */

:root {
  --bg:         #0a0e1f;
  --surface:    #131829;
  --surface2:   #1a2036;
  --border:     #2a3150;
  --text:       #e8eaf2;
  --muted:      #8890ab;
  --accent:     #a855f7;
  --accent-dim: #a855f722;
  --accent2:    #ec4899;
  --normal:     #3fb950;
  --moderate:   #d29922;
  --critical:   #f85149;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}

:root[data-theme="light"] {
  --bg:         #f5f6fb;
  --surface:    #ffffff;
  --surface2:   #eef0f9;
  --border:     #dde0ee;
  --text:       #1a1d2e;
  --muted:      #656b87;
  --accent:     #7c3aed;
  --accent-dim: #7c3aed1a;
  --accent2:    #db2777;
  --normal:     #1a7f4b;
  --moderate:   #a8710a;
  --critical:   #c62d3a;
}

/* ── Theme toggle button (injected by theme.js on every page) ── */
.theme-toggle-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: border-color .2s, transform .15s;
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.theme-toggle-btn:active {
  transform: translateY(0);
}

/* ── Signed-in-as badge (echoed by render_user_badge() in auth.php) ── */
.user-badge {
  position: fixed;
  top: 0.9rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.4rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.user-badge a {
  color: var(--muted);
  text-decoration: none;
  border-left: 1px solid var(--border);
  padding-left: 0.6rem;
  transition: color .2s;
}
.user-badge a:hover {
  color: var(--critical);
}

@media print {
  .theme-toggle-btn, .user-badge { display: none !important; }
}