/* =============================================================
   static/mock/theme-hightech.css
   High-Tech Grow Room — dark/neon theme color tokens.
   Applied via body.theme-hightech
   ============================================================= */

.theme-hightech {
  /* Base palette */
  --color-bg:          #07101e;
  --color-panel:       #0d1728;
  --color-panel-2:     #122033;
  --color-line:        #1e3252;
  --color-text:        #ddeeff;
  --color-muted:       #8aa4c6;
  --color-blue:        #43c6ff;
  --color-blue-2:      #7a8cff;
  --color-green:       #35e47c;
  --color-green-soft:  rgba(53,228,124,.12);
  --color-orange:      #ffb347;
  --color-orange-soft: rgba(255,179,71,.12);
  --color-red:         #ff5d6c;
  --color-red-soft:    rgba(255,93,108,.12);

  /* Elevation & surface */
  --shadow:        0 2px 6px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.22);
  --body-bg:
    radial-gradient(ellipse 90% 45% at 50% 28%, rgba(67,198,255,.045) 0%, transparent 62%),
    linear-gradient(180deg, #f5f9fc 0%, #07101e 100%);
  --screen-bg:     rgba(8,14,28,.93);
  --tab-active-bg: #09111f;
  --screen-border: rgba(50,90,148,.55);
  --screen-shadow:
    0 24px 56px rgba(0,0,0,.52),
    0 0 0 1px rgba(67,198,255,.05),
    inset 0 1px 0 rgba(67,198,255,.08);

  /* Shell chrome */
  --topbar-bg:  rgba(9,16,30,.97);
  --sidebar-bg: linear-gradient(180deg, rgba(9,15,28,.99) 0%, rgba(6,11,20,.99) 100%);

  /* Navigation */
  --nav-active-bg:     linear-gradient(135deg, rgba(67,198,255,.16) 0%, rgba(122,140,255,.12) 100%);
  --nav-active-color:  #7ad4ff;
  --nav-active-border: rgba(67,198,255,.35);
  --nav-color:         #7a9ab8;

  /* Controls */
  --btn-border: rgba(67,198,255,.28);
  --btn-bg:     linear-gradient(180deg, rgba(18,32,56,.92) 0%, rgba(10,20,38,.92) 100%);

  /* Metric values */
  --metric-color:     #38ea80;
  --metric-red-color: #ff6b76;

  /* Gauge */
  --gauge-bg:        radial-gradient(circle at 50% 50%, #1a3658 0%, #0e2040 55%, #07111f 100%);
  --gauge-inner-bg:  radial-gradient(circle at 50% 30%, rgba(67,198,255,.30) 0%, rgba(12,26,48,.18) 32%, rgba(0,0,0,0) 58%);
  --gauge-arc-empty: rgba(38,72,112,.32);
  --dial-label-color:  #b8d8f8;
  --dial-status-color: #8ab8d8;

  /* Cards */
  --gauge-card-bg:    linear-gradient(180deg, #0f2032 0%, #0b1828 55%, #09141f 100%);
  --chart-bg:         linear-gradient(180deg, #122436 0%, #0d1a2c 100%);
  --system-key-color: #5dd6ff;

  /* Status dots */
  --dot-good:      #35e47c;
  --dot-good-glow: rgba(53,228,124,.16);
  --dot-warn:      #ffb347;
  --dot-warn-glow: rgba(255,179,71,.16);

  /* Status chips */
  --chip-good-bg:      rgba(53,228,124,.12);
  --chip-good-color:   #38ea80;
  --chip-good-border:  rgba(53,228,124,.35);
  --chip-warn-bg:      rgba(255,179,71,.12);
  --chip-warn-color:   #ffcb74;
  --chip-warn-border:  rgba(255,179,71,.32);
  --chip-alert-bg:     rgba(255,93,108,.13);
  --chip-alert-color:  #ff8a95;
  --chip-alert-border: rgba(255,93,108,.36);

  /* Alert pills */
  --pill-alert-bg:    rgba(255,93,108,.14);
  --pill-alert-color: #ff8a95;
  --pill-warn-bg:     rgba(255,179,71,.13);
  --pill-warn-color:  #ffcb74;

  /* Warning badge */
  --badge-warn-bg:     rgba(255,203,116,.10);
  --badge-warn-color:  #ffcb74;
  --badge-warn-border: rgba(255,203,116,.30);

  /* Text variants */
  --alert-row-color: #c2d9f8;
  --foot-note-color: #85a0c0;

  /* Active room card glow */
  --card-active-glow: rgba(67,198,255,.20);

  /* Logo area background */
  --logo-bg:     rgba(67,198,255,.08);
  --logo-border: rgba(67,198,255,.14);
}


/* ── Screen container — cyan top-edge catch-light ───────────── */
.theme-hightech .screen {
  border-top-color: rgba(67,198,255,.16);
}


/* ── Topbar — crisp separator, faint glow ───────────────────── */
.theme-hightech .topbar {
  border-bottom-color: rgba(30,52,88,.90);
  box-shadow: 0 1px 0 rgba(67,198,255,.05);
}


/* ── Room cards — elevated, modular, top-lit ────────────────── */
.theme-hightech .room-card {
  box-shadow:
    0 2px 6px rgba(0,0,0,.30),
    0 8px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(67,198,255,.07);
  border-color: rgba(28,48,80,.95);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-hightech .room-card:hover {
  border-color: rgba(67,198,255,.22);
  box-shadow:
    0 2px 8px rgba(0,0,0,.34),
    0 12px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(67,198,255,.13),
    0 0 0 1px rgba(67,198,255,.06);
}


/* ── Gauge / system / chart cards — deeper, edge-lit ────────── */
.theme-hightech .gauge-card,
.theme-hightech .system-card,
.theme-hightech .chart-card {
  box-shadow:
    0 2px 8px rgba(0,0,0,.30),
    0 6px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(67,198,255,.07);
  border-color: rgba(22,42,70,.95);
}


/* ── Gauge inner circle — glass depth + faint rim ───────────── */
.theme-hightech .gauge-inner {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.38))
    drop-shadow(0 0 1px rgba(67,198,255,.14));
}


/* ── Hero & alerts panels — consistent elevation ────────────── */
.theme-hightech .hero,
.theme-hightech .alerts {
  box-shadow:
    0 2px 8px rgba(0,0,0,.28),
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(67,198,255,.06);
  border-color: rgba(24,44,74,.95);
}


/* ── Active nav item — left-edge cyan accent ────────────────── */
.theme-hightech .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(67,198,255,.55);
}


/* ── Alert rows — severity accent bars (inset, no layout shift) */
.theme-hightech .alert-row {
  transition: background 0.15s;
}
.theme-hightech .alert-row:hover {
  background: rgba(67,198,255,.025);
}
.theme-hightech .alert-row:has(.alert-pill.critical),
.theme-hightech .alert-row:has(.alert-pill.alert) {
  box-shadow: inset 3px 0 0 var(--color-red);
  background: linear-gradient(90deg, rgba(255,93,108,.055) 0%, transparent 32%);
}
.theme-hightech .alert-row:has(.alert-pill.warn) {
  box-shadow: inset 3px 0 0 var(--color-orange);
  background: linear-gradient(90deg, rgba(255,179,71,.05) 0%, transparent 32%);
}
.theme-hightech .alert-row:has(.alert-pill.info) {
  box-shadow: inset 3px 0 0 rgba(67,198,255,.35);
}


/* ── Buttons — industrial, operator-grade ───────────────────── */
.theme-hightech .btn {
  box-shadow: 0 1px 3px rgba(0,0,0,.30), inset 0 1px 0 rgba(67,198,255,.04);
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.theme-hightech .btn:hover {
  border-color: rgba(67,198,255,.48);
  box-shadow:
    0 2px 8px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(67,198,255,.09),
    0 0 0 1px rgba(67,198,255,.05);
}

.theme-hightech .btn-primary {
  background: linear-gradient(180deg, rgba(67,198,255,.22) 0%, rgba(43,140,200,.14) 100%);
  border-color: rgba(67,198,255,.46);
  color: var(--color-blue);
  box-shadow: 0 1px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(67,198,255,.10);
}
.theme-hightech .btn-primary:hover {
  opacity: 1;
  background: linear-gradient(180deg, rgba(67,198,255,.30) 0%, rgba(43,140,200,.20) 100%);
  border-color: var(--color-blue);
  box-shadow: 0 2px 12px rgba(67,198,255,.14), inset 0 1px 0 rgba(67,198,255,.16);
}


/* ── Status dot — live-data breath ──────────────────────────── */
@keyframes htDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(53,228,124,.16); }
  50%       { box-shadow: 0 0 0 7px rgba(53,228,124,.05); }
}
.theme-hightech .status .dot {
  animation: htDotPulse 3.4s ease-in-out infinite;
}
.theme-hightech .status.warning .dot {
  animation: none;
}


/* ── HW connection dots — connected state pulse ─────────────── */
@keyframes htConnectedGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(53,228,124,.15); }
  50%       { box-shadow: 0 0 0 5px rgba(53,228,124,.05); }
}
.theme-hightech .hw-status-dot.connected {
  box-shadow: 0 0 0 3px rgba(53,228,124,.15);
  animation: htConnectedGlow 2.8s ease-in-out infinite;
}