/* =============================================================
   static/mock/theme-lab.css
   Lab / Scientific Precision — light theme color tokens.
   Applied via body.theme-lab
   ============================================================= */

.theme-lab {
  /* Base palette */
  --color-bg:          #e4edf4;
  --color-panel:       #ffffff;
  --color-panel-2:     #f4f9fc;
  --color-line:        #c8d8e6;
  --color-text:        #2c4255;
  --color-muted:       #6a7e8f;
  --color-blue:        #6ea6c9;
  --color-blue-2:      #4e87aa;
  --color-green:       #52c46e;
  --color-green-soft:  #e9f6ee;
  --color-orange:      #ff9b42;
  --color-orange-soft: #fff3e7;
  --color-red:         #ff6440;
  --color-red-soft:    #fdece8;

  /* Elevation & surface */
  --shadow:        0 1px 3px rgba(52,84,112,.07), 0 6px 20px rgba(52,84,112,.09);
  --body-bg:       linear-gradient(180deg, #eff5fa 0%, #e4edf4 100%);
  --screen-bg:     rgba(255,255,255,.65);
  --tab-active-bg: #fbfdfe;
  --screen-border: rgba(188,210,226,.85);
  --screen-shadow:
    0 20px 50px rgba(48,78,103,.11),
    0 0 0 1px rgba(110,166,200,.08),
    inset 0 1px 0 rgba(255,255,255,.90);

  /* Shell chrome */
  --topbar-bg:  rgba(255,255,255,.90);
  --sidebar-bg: linear-gradient(180deg, rgba(245,250,253,.97) 0%, rgba(238,246,251,.97) 100%);

  /* Navigation */
  --nav-active-bg:     linear-gradient(180deg, #e5f1fb 0%, #d4e9f8 100%);
  --nav-active-color:  #4e87aa;
  --nav-active-border: #b8d4e9;
  --nav-color:         #51697b;

  /* Controls */
  --btn-border: #92b8d2;
  --btn-bg:     linear-gradient(180deg, #f4f9fd 0%, #e8f2f9 100%);

  /* Metric values */
  --metric-color:     #2a8260;
  --metric-red-color: #df675d;

  /* Gauge */
  --gauge-bg:        radial-gradient(circle at 50% 50%, #3a566b 0%, #2a4057 55%, #1e2f3c 100%);
  --gauge-inner-bg:  radial-gradient(circle at 50% 30%, rgba(117,167,200,.28) 0%, rgba(40,63,79,.15) 32%, rgba(22,35,45,0) 58%);
  --gauge-arc-empty: rgba(90,130,158,.28);
  --dial-label-color:  #d8edf8;
  --dial-status-color: #9ec2db;

  /* Cards */
  --gauge-card-bg: linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%);
  --chart-bg:      linear-gradient(180deg, #f9fdff 0%, #f0f6fb 100%);
  --system-key-color: #3d7a9f;

  /* Status dots */
  --dot-good:      #67b889;
  --dot-good-glow: rgba(101,180,137,.16);
  --dot-warn:      #d8ae4d;
  --dot-warn-glow: rgba(216,174,77,.16);

  /* Status chips */
  --chip-good-bg:      #e9f6ee;
  --chip-good-color:   #2a8260;
  --chip-good-border:  #b8dfc8;
  --chip-warn-bg:      #fff3e7;
  --chip-warn-color:   #9e7a1f;
  --chip-warn-border:  #e8d090;
  --chip-alert-bg:     #fdece8;
  --chip-alert-color:  #b44a43;
  --chip-alert-border: #efb8b3;

  /* Alert pills */
  --pill-alert-bg:    #fdece8;
  --pill-alert-color: #b44a43;
  --pill-warn-bg:     #fff3e7;
  --pill-warn-color:  #9e7a1f;

  /* Warning badge */
  --badge-warn-bg:     #fff5d8;
  --badge-warn-color:  #9e7a1f;
  --badge-warn-border: #efdca2;

  /* Text variants */
  --alert-row-color: #3d5568;
  --foot-note-color: #6d8393;

  /* Active room card glow */
  --card-active-glow: rgba(78,135,170,.22);

  /* Logo area — dark panel so white logo text is readable on the light theme */
  --logo-bg:     rgba(44,66,85,.82);
  --logo-border: rgba(44,66,85,.25);
}


/* ── Screen container — white top-edge catch-light ──────────── */
.theme-lab .screen {
  border-top-color: rgba(255,255,255,.95);
}


/* ── Topbar — clean separator, faint blue glow ──────────────── */
.theme-lab .topbar {
  border-bottom-color: rgba(190,215,230,.80);
  box-shadow: 0 1px 0 rgba(110,166,200,.06);
}


/* ── Room cards — elevated white panels, crisp borders ──────── */
.theme-lab .room-card {
  box-shadow:
    0 1px 3px rgba(52,84,112,.07),
    0 6px 20px rgba(52,84,112,.09),
    inset 0 1px 0 rgba(255,255,255,.90);
  border-color: rgba(188,212,228,.85);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-lab .room-card:hover {
  border-color: rgba(110,166,200,.60);
  box-shadow:
    0 2px 5px rgba(52,84,112,.08),
    0 10px 28px rgba(52,84,112,.13),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(110,166,200,.10);
}


/* ── Gauge / system / chart cards — white panels, defined edges */
.theme-lab .gauge-card,
.theme-lab .system-card,
.theme-lab .chart-card {
  box-shadow:
    0 1px 4px rgba(52,84,112,.07),
    0 5px 16px rgba(52,84,112,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
  border-color: rgba(188,212,228,.80);
}


/* ── Gauge inner circle — glass depth + faint blue rim ──────── */
.theme-lab .gauge-inner {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.35))
    drop-shadow(0 0 1px rgba(117,167,200,.18));
}


/* ── Hero & alerts panels — consistent elevation ────────────── */
.theme-lab .hero,
.theme-lab .alerts {
  box-shadow:
    0 1px 4px rgba(52,84,112,.07),
    0 6px 20px rgba(52,84,112,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
  border-color: rgba(188,212,228,.80);
}


/* ── Active nav item — left-edge SCADA blue accent ──────────── */
.theme-lab .nav-item.active {
  box-shadow: inset 3px 0 0 rgba(78,135,170,.65);
}


/* ── Alert rows — severity accent bars (inset, no layout shift) */
.theme-lab .alert-row {
  transition: background 0.15s;
}
.theme-lab .alert-row:hover {
  background: rgba(110,166,200,.04);
}
.theme-lab .alert-row:has(.alert-pill.critical),
.theme-lab .alert-row:has(.alert-pill.alert) {
  box-shadow: inset 3px 0 0 var(--color-red);
  background: linear-gradient(90deg, rgba(255,100,64,.055) 0%, transparent 32%);
}
.theme-lab .alert-row:has(.alert-pill.warn) {
  box-shadow: inset 3px 0 0 var(--color-orange);
  background: linear-gradient(90deg, rgba(255,155,66,.05) 0%, transparent 32%);
}
.theme-lab .alert-row:has(.alert-pill.info) {
  box-shadow: inset 3px 0 0 rgba(110,166,200,.45);
}


/* ── Buttons — clinical, precise ────────────────────────────── */
.theme-lab .btn {
  box-shadow: 0 1px 3px rgba(52,84,112,.10), inset 0 1px 0 rgba(255,255,255,.80);
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.theme-lab .btn:hover {
  border-color: rgba(110,166,200,.75);
  box-shadow:
    0 2px 7px rgba(52,84,112,.14),
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(110,166,200,.10);
}

.theme-lab .btn-primary {
  background: linear-gradient(180deg, rgba(110,166,200,.22) 0%, rgba(78,135,170,.16) 100%);
  border-color: rgba(78,135,170,.50);
  color: var(--color-blue-2);
  box-shadow: 0 1px 4px rgba(52,84,112,.12), inset 0 1px 0 rgba(255,255,255,.55);
}
.theme-lab .btn-primary:hover {
  opacity: 1;
  background: linear-gradient(180deg, rgba(110,166,200,.32) 0%, rgba(78,135,170,.24) 100%);
  border-color: var(--color-blue);
  box-shadow: 0 2px 10px rgba(78,135,170,.16), inset 0 1px 0 rgba(255,255,255,.60);
}


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


/* ── HW connection dots — connected state pulse ─────────────── */
@keyframes labConnectedGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(101,180,137,.18); }
  50%       { box-shadow: 0 0 0 5px rgba(101,180,137,.06); }
}
.theme-lab .hw-status-dot.connected {
  box-shadow: 0 0 0 3px rgba(101,180,137,.18);
  animation: labConnectedGlow 2.8s ease-in-out infinite;
}