/* =============================================================
   static/mock/theme-industrial-control.css
   Industrial Control — warm amber on deep navy.
   Applied via body.theme-industrial-control
   ============================================================= */

.theme-industrial-control {
  /* Base palette */
  --color-bg:          #060d1c;
  --color-panel:       #0c1930;
  --color-panel-2:     #132340;
  --color-line:        #253e65;
  --color-text:        #f5f5f4;
  --color-muted:       #b8ac9c;
  --color-blue:        #f59e0b;   /* primary amber accent */
  --color-blue-2:      #fbbf24;   /* lighter amber */
  --color-green:       #22c55e;
  --color-green-soft:  rgba(34,197,94,.12);
  --color-orange:      #f97316;
  --color-orange-soft: rgba(249,115,22,.12);
  --color-red:         #ef4444;
  --color-red-soft:    rgba(239,68,68,.12);

  /* Elevation & surface */
  --shadow:        0 2px 6px rgba(0,0,0,.36), 0 8px 24px rgba(0,0,0,.25);
  --body-bg:
    radial-gradient(ellipse 85% 42% at 50% 30%, rgba(245,158,11,.038) 0%, transparent 60%),
    linear-gradient(180deg, #e8d5b0 0%, #060d1c 100%);
  --screen-bg:     rgba(8,14,32,.93);
  --tab-active-bg: #070f1c;
  --screen-border: rgba(50,80,130,.55);
  --screen-shadow:
    0 24px 56px rgba(0,0,0,.56),
    0 0 0 1px rgba(245,158,11,.04),
    inset 0 1px 0 rgba(245,158,11,.07);

  /* Shell chrome */
  --topbar-bg:  rgba(10,18,34,.97);
  --sidebar-bg: linear-gradient(180deg, rgba(8,14,26,.99) 0%, rgba(5,10,18,.99) 100%);

  /* Navigation */
  --nav-active-bg:     linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(251,191,36,.12) 100%);
  --nav-active-color:  #f59e0b;
  --nav-active-border: rgba(245,158,11,.38);
  --nav-color:         #b0a498;

  /* Controls */
  --btn-border: rgba(245,158,11,.30);
  --btn-bg:     linear-gradient(180deg, rgba(22,38,64,.92) 0%, rgba(12,22,42,.92) 100%);

  /* Metric values */
  --metric-color:     #f59e0b;
  --metric-red-color: #ef4444;

  /* Gauge */
  --gauge-bg:        radial-gradient(circle at 50% 50%, #1e3560 0%, #122545 55%, #070f20 100%);
  --gauge-inner-bg:  radial-gradient(circle at 50% 30%, rgba(245,158,11,.28) 0%, rgba(12,22,40,.18) 32%, rgba(0,0,0,0) 58%);
  --gauge-arc-empty: rgba(42,72,112,.35);
  --dial-label-color:  #f0e8d8;
  --dial-status-color: #c4b8a7;

  /* Cards */
  --gauge-card-bg: linear-gradient(180deg, #0e1f3a 0%, #0a1a30 55%, #080f1e 100%);
  --chart-bg:      linear-gradient(180deg, #112035 0%, #0c1828 100%);
  --system-key-color: #f59e0b;

  /* Status dots (universal — unchanged across themes) */
  --dot-good:      #22c55e;
  --dot-good-glow: rgba(34,197,94,.16);
  --dot-warn:      #eab308;
  --dot-warn-glow: rgba(234,179,8,.16);

  /* Status chips (universal) */
  --chip-good-bg:      rgba(34,197,94,.12);
  --chip-good-color:   #22c55e;
  --chip-good-border:  rgba(34,197,94,.35);
  --chip-warn-bg:      rgba(234,179,8,.12);
  --chip-warn-color:   #eab308;
  --chip-warn-border:  rgba(234,179,8,.32);
  --chip-alert-bg:     rgba(239,68,68,.13);
  --chip-alert-color:  #ef4444;
  --chip-alert-border: rgba(239,68,68,.35);

  /* Alert pills (universal) */
  --pill-alert-bg:    rgba(239,68,68,.14);
  --pill-alert-color: #ef4444;
  --pill-warn-bg:     rgba(234,179,8,.13);
  --pill-warn-color:  #eab308;

  /* Warning badge (universal) */
  --badge-warn-bg:     rgba(234,179,8,.10);
  --badge-warn-color:  #eab308;
  --badge-warn-border: rgba(234,179,8,.30);

  /* Text variants */
  --alert-row-color: #ede5d8;
  --foot-note-color: #8a8170;

  /* Active room card glow */
  --card-active-glow: rgba(245,158,11,.22);

  /* Logo area */
  --logo-bg:     rgba(245,158,11,.10);
  --logo-border: rgba(245,158,11,.18);

  /* Calendar accent vars (consumed by FullCalendar bridge) */
  --color-accent-a: rgba(245,158,11,.09);
  --color-accent-b: #f59e0b;
}


/* ── Screen container — amber top-edge catch-light ──────────── */
.theme-industrial-control .screen {
  border-top-color: rgba(245,158,11,.15);
}


/* ── Topbar — crisp separator, faint amber glow ─────────────── */
.theme-industrial-control .topbar {
  border-bottom-color: rgba(32,55,92,.90);
  box-shadow: 0 1px 0 rgba(245,158,11,.04);
}


/* ── Room cards — elevated, modular, top-lit ────────────────── */
.theme-industrial-control .room-card {
  box-shadow:
    0 2px 6px rgba(0,0,0,.34),
    0 8px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(245,158,11,.06);
  border-color: rgba(28,46,78,.95);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-industrial-control .room-card:hover {
  border-color: rgba(245,158,11,.22);
  box-shadow:
    0 2px 8px rgba(0,0,0,.38),
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(245,158,11,.10),
    0 0 0 1px rgba(245,158,11,.05);
}


/* ── Gauge / system / chart cards — deep, amber-edge-lit ────── */
.theme-industrial-control .gauge-card,
.theme-industrial-control .system-card,
.theme-industrial-control .chart-card {
  box-shadow:
    0 2px 8px rgba(0,0,0,.34),
    0 6px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(245,158,11,.06);
  border-color: rgba(22,38,66,.95);
}


/* ── Gauge inner circle — glass depth + faint amber rim ─────── */
.theme-industrial-control .gauge-inner {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.42))
    drop-shadow(0 0 1px rgba(245,158,11,.14));
}


/* ── Hero & alerts panels — consistent elevation ────────────── */
.theme-industrial-control .hero,
.theme-industrial-control .alerts {
  box-shadow:
    0 2px 8px rgba(0,0,0,.32),
    0 8px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(245,158,11,.05);
  border-color: rgba(24,42,74,.95);
}


/* ── Active nav item — amber left-edge accent ───────────────── */
.theme-industrial-control .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(245,158,11,.60);
}


/* ── Alert rows — severity accent bars (inset, no layout shift) */
.theme-industrial-control .alert-row {
  transition: background 0.15s;
}
.theme-industrial-control .alert-row:hover {
  background: rgba(245,158,11,.025);
}
.theme-industrial-control .alert-row:has(.alert-pill.critical),
.theme-industrial-control .alert-row:has(.alert-pill.alert) {
  box-shadow: inset 3px 0 0 var(--color-red);
  background: linear-gradient(90deg, rgba(239,68,68,.06) 0%, transparent 32%);
}
.theme-industrial-control .alert-row:has(.alert-pill.warn) {
  box-shadow: inset 3px 0 0 var(--color-orange);
  background: linear-gradient(90deg, rgba(249,115,22,.055) 0%, transparent 32%);
}
.theme-industrial-control .alert-row:has(.alert-pill.info) {
  box-shadow: inset 3px 0 0 rgba(245,158,11,.40);
}


/* ── Buttons — industrial, amber-grade ──────────────────────── */
.theme-industrial-control .btn {
  box-shadow: 0 1px 3px rgba(0,0,0,.34), inset 0 1px 0 rgba(245,158,11,.04);
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.theme-industrial-control .btn:hover {
  border-color: rgba(245,158,11,.50);
  box-shadow:
    0 2px 8px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(245,158,11,.08),
    0 0 0 1px rgba(245,158,11,.05);
}

.theme-industrial-control .btn-primary {
  background: linear-gradient(180deg, rgba(245,158,11,.24) 0%, rgba(200,120,8,.15) 100%);
  border-color: rgba(245,158,11,.48);
  color: var(--color-blue);
  box-shadow: 0 1px 4px rgba(0,0,0,.32), inset 0 1px 0 rgba(245,158,11,.10);
}
.theme-industrial-control .btn-primary:hover {
  opacity: 1;
  background: linear-gradient(180deg, rgba(245,158,11,.32) 0%, rgba(200,120,8,.22) 100%);
  border-color: var(--color-blue);
  box-shadow: 0 2px 12px rgba(245,158,11,.14), inset 0 1px 0 rgba(245,158,11,.16);
}


/* ── Status dot — live-data breath ──────────────────────────── */
@keyframes icDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
  50%       { box-shadow: 0 0 0 7px rgba(34,197,94,.05); }
}
.theme-industrial-control .status .dot {
  animation: icDotPulse 3.4s ease-in-out infinite;
}
.theme-industrial-control .status.warning .dot {
  animation: none;
}


/* ── HW connection dots — connected state pulse ─────────────── */
@keyframes icConnectedGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,.05); }
}
.theme-industrial-control .hw-status-dot.connected {
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
  animation: icConnectedGlow 2.8s ease-in-out infinite;
}