/* ================================================================
   DESIGN SYSTEM — INDUSTRIAL COMMAND CENTER AESTHETIC
   ================================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* Core palette */
  --bg-base:    #07090f;
  --bg-1:       #0c0f1a;
  --bg-2:       #111626;
  --bg-3:       #161c30;
  --bg-4:       #1c2440;
  --bg-glass:   rgba(22,28,48,0.85);

  /* Brand */
  --accent:     #00d4ff;
  --accent-dim: rgba(0,212,255,0.15);
  --accent-glow:rgba(0,212,255,0.4);

  /* Status */
  --ok:         #00e676;
  --ok-dim:     rgba(0,230,118,0.12);
  --warn:       #ffab00;
  --warn-dim:   rgba(255,171,0,0.12);
  --err:        #ff1744;
  --err-dim:    rgba(255,23,68,0.12);
  --info:       #448aff;
  --info-dim:   rgba(68,138,255,0.12);
  --offline:    #37474f;

  /* Text */
  --t1: #e8edf5;
  --t2: #8899bb;
  --t3: #4a5a7a;
  --t4: #2a3a5a;

  /* Borders */
  --b1: rgba(0,212,255,0.12);
  --b2: rgba(0,212,255,0.22);
  --b3: rgba(0,212,255,0.05);

  /* Fonts */
  --font-ui:    'Exo 2', sans-serif;
  --font-head:  'Rajdhani', sans-serif;
  --font-mono:  'Share Tech Mono', monospace;

  /* Spacing */
  --r:   6px;
  --r2:  10px;
  --r3:  14px;
}

html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--bg-base);
  color: var(--t1);
  display: flex;
  flex-direction: column;
}

/* ================================================================ SCROLLBAR */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }

/* ================================================================ TOPBAR */
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
  z-index: 100;
  position: relative;
}
#topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-hex {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #004466, var(--accent));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  animation: hexSpin 20s linear infinite;
}
@keyframes hexSpin { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3) drop-shadow(0 0 8px var(--accent))} }

.logo-text { line-height: 1.1; }
.logo-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: 1.5px; color: var(--t1); }
.logo-sub { font-size: 9px; letter-spacing: 2px; color: var(--t3); text-transform: uppercase; }

.top-sep { width:1px; height:32px; background:var(--b1); flex-shrink:0; }

/* Clock */
#clock-display {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 2px;
  text-shadow: 0 0 12px var(--accent-glow);
  min-width: 90px;
}
#date-display { font-size: 10px; color: var(--t3); letter-spacing: 1px; }

/* Top stats */
.top-stats { display:flex; gap:1px; margin-left:auto; }
.top-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 16px;
  cursor: pointer;
  border-left: 1px solid var(--b1);
  transition: background .15s;
}
.top-stat:hover { background: var(--bg-2); }
.top-stat-val { font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1; }
.top-stat-lbl { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; margin-top: 1px; }
.s-ok  .top-stat-val { color: var(--ok); }
.s-warn .top-stat-val { color: var(--warn); }
.s-err .top-stat-val { color: var(--err); }
.s-info .top-stat-val { color: var(--accent); }

/* Top action buttons */
.top-action {
  width: 36px; height: 36px; border-radius: var(--r);
  border: 1px solid var(--b1);
  background: var(--bg-2);
  color: var(--t2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all .15s;
  position: relative;
}
.top-action:hover { border-color: var(--accent); color: var(--accent); }
.alarm-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--err);
  border: 2px solid var(--bg-1);
  animation: blink 1.2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* User badge */
.user-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  cursor: pointer;
  transition: border-color .15s;
}
.user-badge:hover { border-color: var(--accent); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--info), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
}
.user-name { font-size: 12px; font-weight: 600; }
.user-role { font-size: 9px; color: var(--t3); }
.secure-badge {
  font-size: 8px; padding: 2px 6px; border-radius: 3px;
  background: rgba(0,230,118,.15); color: var(--ok);
  font-family: var(--font-mono); letter-spacing: .5px;
}

/* ================================================================ LAYOUT */
#app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ================================================================ SIDEBAR */
#sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0 20px;
}

.nav-group { margin-bottom: 4px; }
.nav-group-label {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--t4); padding: 8px 16px 4px;
  font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  color: var(--t2);
  cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  transition: all .15s;
  border-left: 2px solid transparent;
  position: relative;
}
.nav-item:hover { color: var(--t1); background: var(--bg-2); }
.nav-item.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:.7; }
.nav-item.active .nav-icon { opacity:1; }
.nav-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
}
.nb-err { background: rgba(255,23,68,.2); color: var(--err); }
.nb-warn { background: rgba(255,171,0,.2); color: var(--warn); }
.nb-ok { background: rgba(0,230,118,.15); color: var(--ok); }

/* ================================================================ MAIN */
#main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-base);
  position: relative;
}

/* ================================================================ PANELS */
.panel { display:none; padding:20px; min-height:100%; }
.panel.active { display:block; }

.panel-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.panel-hdr-left {}
.panel-title {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 700; letter-spacing: 1px;
}
.panel-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }
.panel-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* ================================================================ GRID */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.g4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; }
.g5 { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.g6 { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }

/* ================================================================ CARDS */
.card {
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--b2), transparent);
}
.card-t {
  font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--t3); font-weight: 600; margin-bottom: 12px;
}

/* Metric card */
.metric-val {
  font-family: var(--font-head);
  font-size: 32px; font-weight: 700; line-height: 1;
}
.metric-unit { font-size: 11px; color: var(--t3); margin-top: 2px; }
.metric-trend { font-size: 11px; margin-top: 6px; }
.trend-up { color: var(--ok); }
.trend-dn { color: var(--err); }

/* ================================================================ STATUS INDICATORS */
.dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.dot-ok   { background:var(--ok);   box-shadow:0 0 6px var(--ok); }
.dot-warn { background:var(--warn); box-shadow:0 0 6px var(--warn); animation:blink 2s infinite; }
.dot-err  { background:var(--err);  box-shadow:0 0 6px var(--err); animation:blink 1s infinite; }
.dot-off  { background:var(--offline); }

/* ================================================================ SITE GRID CARDS */
.site-tile {
  background: var(--bg-2);
  border: 1px solid var(--b3);
  border-radius: var(--r2);
  padding: 12px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.site-tile:hover {
  border-color: var(--b2);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.site-tile.st-ok    { border-top: 2px solid var(--ok); }
.site-tile.st-warn  { border-top: 2px solid var(--warn); }
.site-tile.st-err   { border-top: 2px solid var(--err); }
.site-tile.st-off   { border-top: 2px solid var(--offline); opacity:.7; }
.site-tile-id { font-family:var(--font-mono); font-size:9px; color:var(--t3); }
.site-tile-loc { font-size:11px; font-weight:600; margin:3px 0; }
.site-tile-ip { font-family:var(--font-mono); font-size:9px; color:var(--accent); }
.site-tile-status {
  display:flex; align-items:center; gap:5px;
  margin-top:8px; font-size:10px; font-weight:600;
}
.site-tile-ping { margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--t3); }

/* ================================================================ DEVICE ROWS */
.dev-list { display:flex; flex-direction:column; gap:4px; }
.dev-row {
  display: flex; align-items: center; gap:8px;
  padding: 7px 10px;
  background: var(--bg-2);
  border-radius: var(--r);
  font-size: 11px;
  border: 1px solid transparent;
  transition: border-color .15s;
}
.dev-row:hover { border-color: var(--b1); }
.dev-name { flex:1; color:var(--t1); }
.dev-val { font-family:var(--font-mono); font-size:10px; color:var(--accent); background:var(--bg-3); padding:2px 7px; border-radius:3px; }
.dev-status { font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; letter-spacing:.5px; }
.ds-ok   { background:var(--ok-dim);   color:var(--ok); }
.ds-warn { background:var(--warn-dim); color:var(--warn); }
.ds-err  { background:var(--err-dim);  color:var(--err); }
.ds-off  { background:rgba(55,71,79,.2); color:var(--offline); }

/* ================================================================ EVENT LOG */
.log-list { display:flex; flex-direction:column; gap:3px; }
.log-entry {
  display: flex; align-items: flex-start; gap:8px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  border-left: 2px solid transparent;
}
.le-info { border-left-color:var(--info);  background:rgba(68,138,255,.04); }
.le-warn { border-left-color:var(--warn);  background:rgba(255,171,0,.04); }
.le-err  { border-left-color:var(--err);   background:rgba(255,23,68,.06); }
.le-ok   { border-left-color:var(--ok);    background:rgba(0,230,118,.04); }
.le-time { font-family:var(--font-mono); color:var(--t3); white-space:nowrap; flex-shrink:0; }
.le-site { color:var(--accent); font-weight:600; white-space:nowrap; flex-shrink:0; margin-right:2px; }
.le-msg  { color:var(--t2); flex:1; }

/* ================================================================ PROGRESS BAR */
.progress { height:4px; background:var(--bg-3); border-radius:2px; overflow:hidden; margin-top:8px; }
.prog-fill { height:100%; border-radius:2px; transition:width .4s; }
.pf-ok   { background:var(--ok); }
.pf-warn { background:var(--warn); }
.pf-err  { background:var(--err); }
.pf-acc  { background:var(--accent); }

/* ================================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap:6px;
  padding: 7px 14px;
  border-radius: var(--r);
  border: 1px solid var(--b2);
  background: var(--bg-2);
  color: var(--t1);
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover { background:var(--bg-3); border-color:var(--accent); color:var(--accent); }
.btn-primary { background:rgba(0,212,255,.1); border-color:var(--accent); color:var(--accent); }
.btn-primary:hover { background:rgba(0,212,255,.2); box-shadow:0 0 12px var(--accent-glow); }
.btn-ok  { background:var(--ok-dim);  border-color:var(--ok);  color:var(--ok); }
.btn-err { background:var(--err-dim); border-color:var(--err); color:var(--err); }
.btn-warn{ background:var(--warn-dim);border-color:var(--warn);color:var(--warn); }
.btn-sm  { padding:4px 10px; font-size:10.5px; }
.btn-icon{ width:30px; height:30px; padding:0; justify-content:center; font-size:14px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

/* ================================================================ INPUTS */
.inp {
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  color: var(--t1);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.inp:focus { border-color: var(--accent); }
.inp::placeholder { color: var(--t4); }
select.inp { cursor:pointer; }
textarea.inp { resize:vertical; line-height:1.6; }

.form-row { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.form-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }

/* ================================================================ TABS */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--b1); margin-bottom:16px; }
.tab {
  padding: 8px 18px;
  font-size: 12px; font-weight: 500;
  color: var(--t3); cursor:pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.tab:hover { color:var(--t1); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ================================================================ SECTION DIVIDER */
.sec-div {
  display: flex; align-items: center; gap:10px;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--t3); font-weight: 600;
  margin: 18px 0 12px;
}
.sec-div::after { content:''; flex:1; height:1px; background: var(--b1); }

/* ================================================================ ALERT BARS */
.alert-bar {
  display: flex; align-items: center; gap:12px;
  padding: 10px 14px;
  border-radius: var(--r2);
  margin-bottom: 10px;
  font-size: 11.5px;
  border: 1px solid;
}
.alert-crit { background:rgba(255,23,68,.08);   border-color:rgba(255,23,68,.3);   color:var(--err); }
.alert-high { background:rgba(255,171,0,.08);   border-color:rgba(255,171,0,.3);   color:var(--warn); }
.alert-info { background:rgba(68,138,255,.08);  border-color:rgba(68,138,255,.3);  color:var(--info); }
.alert-body { flex:1; color:var(--t1); }
.alert-site { font-weight:700; }

/* ================================================================ TOGGLE */
.toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle {
  width:38px; height:21px;
  background:var(--bg-3);
  border:1px solid var(--b2);
  border-radius:11px;
  position:relative;
  cursor:pointer;
  transition:background .2s;
  flex-shrink:0;
}
.toggle.on { background:rgba(0,212,255,.25); border-color:var(--accent); }
.toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:15px; height:15px;
  background:var(--t3); border-radius:50%;
  transition:transform .2s, background .2s;
}
.toggle.on::after { transform:translateX(17px); background:var(--accent); }

/* ================================================================ MODAL */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-1);
  border:1px solid var(--b2);
  border-radius: var(--r3);
  width:680px; max-width:95vw;
  max-height:85vh; overflow-y:auto;
  box-shadow:0 25px 80px rgba(0,0,0,.6), 0 0 0 1px var(--b1);
  transform:translateY(20px);
  transition:transform .2s;
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--b1);
  position:sticky; top:0; background:var(--bg-1); z-index:1;
}
.modal-title { font-family:var(--font-head); font-size:20px; font-weight:700; }
.modal-body { padding:20px; }
.modal-footer {
  display:flex; gap:8px; justify-content:flex-end;
  padding:14px 20px;
  border-top:1px solid var(--b1);
}

/* ================================================================ CAMERA GRID */
.cam-cell {
  background:var(--bg-2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s;
  box-shadow:inset 0 0 30px rgba(0,0,0,.5);
}
.cam-config-btn {
  font-size:13px; cursor:pointer; opacity:0.4; transition:opacity .2s;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
}
.cam-config-btn:hover { opacity:1; }
.cam-bg-scene {
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
}
.cam-feed-ts {
  position:absolute; bottom:32px; right:10px; z-index:2;
  font-family:var(--font-mono); font-size:9px;
  color:rgba(255,255,255,0.5); pointer-events:none;
  text-shadow:0 0 3px rgba(0,0,0,.9);
}
.cam-cell:hover { border-color:var(--accent); }
.cam-overlay { position:absolute; inset:0; display:flex; flex-direction:column; z-index:2; }
.cam-top {
  padding:7px 10px;
  background:linear-gradient(rgba(0,0,0,.8),transparent);
  display:flex; align-items:center; justify-content:space-between;
}
.cam-bot {
  margin-top:auto;
  padding:7px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  display:flex; align-items:center; justify-content:space-between;
}
.cam-label { font-size:9px; font-weight:700; letter-spacing:.8px; color:#fff; }
.cam-rec { display:flex; align-items:center; gap:4px; font-size:9px; color:#fff; }
.cam-rec-dot { width:5px; height:5px; background:var(--err); border-radius:50%; animation:blink 1s infinite; }
.cam-time { font-family:var(--font-mono); font-size:8px; color:rgba(255,255,255,.7); }
.cam-feed-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.cam-bg {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.cam-bg::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.01) 2px, rgba(255,255,255,0.01) 4px);
  pointer-events:none; animation:camScan 4s linear infinite;
}
@keyframes camScan {
  0% { transform:translateY(0); }
  100% { transform:translateY(4px); }
}
.cam-motion {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:2px solid var(--warn); color:var(--warn);
  font-size:8px; font-weight:700; letter-spacing:1px;
  padding:4px 10px; border-radius:2px;
  animation:blink 1s infinite; z-index:2;
}
.cam-nosignal {
  color:var(--err); font-size:10px; font-weight:700; letter-spacing:2px;
  z-index:2; animation:blink 1.5s infinite; opacity:0.7;
}

/* ================================================================ NETWORK DIAGRAM */
.net-diag {
  background:var(--bg-2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  padding:20px;
  font-size:10px;
}
.net-node {
  background:var(--bg-3);
  border-radius:var(--r);
  padding:7px 14px;
  text-align:center;
  font-weight:600;
  white-space:nowrap;
  border:1px solid;
}
.nn-sanral { border-color:var(--ok);    color:var(--ok); }
.nn-router { border-color:var(--accent);color:var(--accent); }
.nn-switch { border-color:var(--info);  color:var(--info); }
.nn-akcp   { border-color:var(--warn);  color:var(--warn); }
.nn-nvr    { border-color:#aa00ff;      color:#aa00ff; }
.nn-cam    { border-color:var(--t3);    color:var(--t3); }
.net-arrow {
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); font-size:16px;
}
.net-fan {
  display:flex; gap:8px; justify-content:center;
  flex-wrap:wrap;
}

/* ================================================================ TERMINAL */
.terminal {
  background:var(--bg-base);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:14px;
  min-height:180px;
  max-height:280px;
  overflow-y:auto;
  line-height:1.8;
}
.term-prompt { color:var(--t3); }
.term-cmd    { color:var(--ok); }
.term-out    { color:var(--t2); white-space:pre; }
.term-err    { color:var(--err); }
.term-info   { color:var(--accent); }

/* ================================================================ BATTERY VIS */
.batt-visual {
  display:flex; gap:3px; height:50px; align-items:flex-end;
}
.batt-cell {
  flex:1; border-radius:2px 2px 0 0;
  transition:height .3s;
}

/* ================================================================ PING GRID */
.ping-cell {
  background:var(--bg-2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:6px 4px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s;
  font-size:8px;
}
.ping-cell:hover { border-color:var(--accent); }
.ping-val {
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  line-height:1; margin-bottom:2px;
}

/* ================================================================ AI CHAT */
.ai-chat-area {
  display:flex; flex-direction:column;
  gap:12px; max-height:380px; overflow-y:auto;
  padding:4px 2px 4px 0;
  margin-bottom:14px;
}
.ai-msg { display:flex; gap:10px; align-items:flex-start; }
.ai-msg.user-msg { flex-direction:row-reverse; }
.ai-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
}
.ai-av-bot { background:linear-gradient(135deg,#004466,var(--accent)); }
.ai-av-usr { background:linear-gradient(135deg,var(--info),#0066cc); }
.ai-bubble {
  max-width:82%;
  padding:10px 14px;
  border-radius:var(--r2);
  font-size:12px; line-height:1.65;
}
.ai-bubble-bot {
  background:var(--bg-3);
  border:1px solid var(--b1);
  color:var(--t1);
  border-radius:var(--r2) var(--r2) var(--r2) 2px;
}
.ai-bubble-usr {
  background:rgba(68,138,255,.15);
  border:1px solid rgba(68,138,255,.3);
  color:var(--t1);
  border-radius:var(--r2) var(--r2) 2px var(--r2);
}
.thinking { display:flex; gap:5px; padding:8px 14px; align-items:center; }
.think-dot {
  width:6px; height:6px; background:var(--t3); border-radius:50%;
  animation:bounce .9s infinite;
}
.think-dot:nth-child(2){animation-delay:.15s}
.think-dot:nth-child(3){animation-delay:.3s}
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* ================================================================ TABLE */
.tbl { width:100%; border-collapse:collapse; font-size:11.5px; }
.tbl th {
  text-align:left; padding:8px 12px;
  border-bottom:1px solid var(--b1);
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  color:var(--t3); font-weight:600;
  white-space:nowrap;
}
.tbl td {
  padding:8px 12px;
  border-bottom:1px solid var(--b3);
  color:var(--t2);
  vertical-align:middle;
}
.tbl tr:hover td { background:var(--bg-2); }
.tbl td:first-child { color:var(--t1); font-weight:500; }
.tbl-mono { font-family:var(--font-mono); font-size:10px; color:var(--accent); }

/* ================================================================ CONFIG ROWS */
.cfg-section {
  background:var(--bg-2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  overflow:hidden;
  margin-bottom:10px;
}
.cfg-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid var(--b1);
  font-size:11.5px;
}
.cfg-row:last-child { border-bottom:none; }
.cfg-key { color:var(--t3); font-size:11px; }
.cfg-val { font-family:var(--font-mono); font-size:10.5px; color:var(--accent); }

/* ================================================================ SPARKLINE */
.sparkline {
  display:flex; align-items:flex-end; gap:2px;
  height:36px;
}
.spark-b {
  flex:1; border-radius:1px 1px 0 0;
  min-width:4px; min-height:2px;
  opacity:.8; transition:opacity .15s;
}
.spark-b:hover { opacity:1; }

/* ================================================================ SCAN LINE EFFECT */
@keyframes scanline {
  0%   { background-position:0 0; }
  100% { background-position:0 100%; }
}
.scanlines-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  opacity:.5;
}

/* ================================================================ MISC */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:10px;
  font-size:9px; font-weight:700; letter-spacing:.5px;
}
.chip-ok   { background:var(--ok-dim);   color:var(--ok); }
.chip-warn { background:var(--warn-dim); color:var(--warn); }
.chip-err  { background:var(--err-dim);  color:var(--err); }
.chip-info { background:var(--info-dim); color:var(--info); }
.chip-acc  { background:var(--accent-dim);color:var(--accent); }

.mb8  { margin-bottom:8px; }
.mb12 { margin-bottom:12px; }
.mb16 { margin-bottom:16px; }
.mb20 { margin-bottom:20px; }
.mt8  { margin-top:8px; }
.mt12 { margin-top:12px; }
.mt16 { margin-top:16px; }
.flex-row  { display:flex; align-items:center; gap:8px; }
.flex-wrap { flex-wrap:wrap; }
.spacer { flex:1; }
.mono { font-family:var(--font-mono); }
.t-ok   { color:var(--ok); }
.t-warn { color:var(--warn); }
.t-err  { color:var(--err); }
.t-acc  { color:var(--accent); }
.t-dim  { color:var(--t3); }
.t-head { font-family:var(--font-head); }
.fw7    { font-weight:700; }

/* Incident cards */
.incident-card {
  background:var(--bg-2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  padding:14px;
  margin-bottom:10px;
  transition:border-color .15s;
}
.incident-card:hover { border-color:var(--b2); }
.incident-card.inc-crit { border-left:3px solid var(--err); }
.incident-card.inc-high { border-left:3px solid var(--warn); }
.incident-card.inc-med  { border-left:3px solid var(--info); }

/* Alarm cards */
.alarm-card {
  background:var(--bg-2);
  border:1px solid;
  border-radius:var(--r2);
  padding:14px;
  margin-bottom:8px;
  display:flex; align-items:flex-start; gap:14px;
}
.alarm-card.ac-crit { border-color:rgba(255,23,68,.4);  background:rgba(255,23,68,.05); }
.alarm-card.ac-high { border-color:rgba(255,171,0,.3);  background:rgba(255,171,0,.04); }
.alarm-card.ac-med  { border-color:rgba(68,138,255,.3); background:rgba(68,138,255,.04); }
.alarm-card.ac-acked { border-color:var(--b1); opacity:.6; }

/* Health ring */
.hring { position:relative; width:84px; height:84px; flex-shrink:0; }
.hring svg { transform:rotate(-90deg); }
.hring-val {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:20px; font-weight:700;
}

/* Notif badge floating */
.float-notif {
  position:fixed; bottom:20px; right:20px;
  background:var(--bg-1);
  border:1px solid var(--accent);
  border-radius:var(--r2);
  padding:12px 16px;
  font-size:12px;
  box-shadow:0 4px 24px rgba(0,0,0,.4), 0 0 0 1px var(--accent-dim);
  animation:slideUp .3s ease;
  z-index:9000;
  max-width:320px;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ================================================================ THEME SWITCHER */
body { transition: background .3s, color .3s; }
.theme-btn {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--b2); cursor:pointer;
  transition:all .2s; flex-shrink:0;
}
.theme-btn:hover { transform:scale(1.2); border-color:var(--accent); }
.theme-btn.active { border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }

/* ================================================================ THEME: MAGMA (warm amber/orange) */
body.theme-magma {
  --bg-base:    #0d0804;
  --bg-1:       #140e08;
  --bg-2:       #1c140c;
  --bg-3:       #2a1e12;
  --bg-4:       #382818;
  --bg-glass:   rgba(42,30,18,0.85);
  --accent:     #ff8c00;
  --accent-dim: rgba(255,140,0,0.15);
  --accent-glow:rgba(255,140,0,0.4);
  --ok:         #4caf50;
  --ok-dim:     rgba(76,175,80,0.12);
  --warn:       #ffc107;
  --warn-dim:   rgba(255,193,7,0.12);
  --err:        #f44336;
  --err-dim:    rgba(244,67,54,0.12);
  --info:       #ff9800;
  --info-dim:   rgba(255,152,0,0.12);
  --offline:    #4e342e;
  --t1: #fff3e0;
  --t2: #bcaaa4;
  --t3: #8d6e63;
  --t4: #5d4037;
  --b1: rgba(255,140,0,0.12);
  --b2: rgba(255,140,0,0.22);
  --b3: rgba(255,140,0,0.05);
}

/* ================================================================ THEME: FROST (cool ice blue) */
body.theme-frost {
  --bg-base:    #080f12;
  --bg-1:       #0c161c;
  --bg-2:       #12222c;
  --bg-3:       #183040;
  --bg-4:       #1e4058;
  --bg-glass:   rgba(24,48,64,0.85);
  --accent:     #00e5ff;
  --accent-dim: rgba(0,229,255,0.15);
  --accent-glow:rgba(0,229,255,0.4);
  --ok:         #69f0ae;
  --ok-dim:     rgba(105,240,174,0.12);
  --warn:       #ffd740;
  --warn-dim:   rgba(255,215,64,0.12);
  --err:        #ff5252;
  --err-dim:    rgba(255,82,82,0.12);
  --info:       #40c4ff;
  --info-dim:   rgba(64,196,255,0.12);
  --offline:    #37474f;
  --t1: #e0f7fa;
  --t2: #80cbc4;
  --t3: #4db6ac;
  --t4: #26a69a;
  --b1: rgba(0,229,255,0.12);
  --b2: rgba(0,229,255,0.22);
  --b3: rgba(0,229,255,0.05);
}

/* ================================================================ THEME: AURORA (purple/pink neon) */
body.theme-aurora {
  --bg-base:    #0a0510;
  --bg-1:       #12081c;
  --bg-2:       #1a0e28;
  --bg-3:       #26163a;
  --bg-4:       #321e4c;
  --bg-glass:   rgba(38,22,58,0.85);
  --accent:     #d500f9;
  --accent-dim: rgba(213,0,249,0.15);
  --accent-glow:rgba(213,0,249,0.4);
  --ok:         #00e676;
  --ok-dim:     rgba(0,230,118,0.12);
  --warn:       #ff9100;
  --warn-dim:   rgba(255,145,0,0.12);
  --err:        #ff1744;
  --err-dim:    rgba(255,23,68,0.12);
  --info:       #7c4dff;
  --info-dim:   rgba(124,77,255,0.12);
  --offline:    #4a148c;
  --t1: #f3e5f5;
  --t2: #ce93d8;
  --t3: #9c27b0;
  --t4: #6a1b9a;
  --b1: rgba(213,0,249,0.12);
  --b2: rgba(213,0,249,0.22);
  --b3: rgba(213,0,249,0.05);
}

/* ================================================================ THEME: NOCTURNE (dark slate + lime) */
body.theme-nocturne {
  --bg-base:    #0a0e0a;
  --bg-1:       #0f140f;
  --bg-2:       #161e16;
  --bg-3:       #1e2c1e;
  --bg-4:       #263a26;
  --bg-glass:   rgba(30,44,30,0.85);
  --accent:     #76ff03;
  --accent-dim: rgba(118,255,3,0.15);
  --accent-glow:rgba(118,255,3,0.4);
  --ok:         #69f0ae;
  --ok-dim:     rgba(105,240,174,0.12);
  --warn:       #ffab00;
  --warn-dim:   rgba(255,171,0,0.12);
  --err:        #ff5252;
  --err-dim:    rgba(255,82,82,0.12);
  --info:       #40c4ff;
  --info-dim:   rgba(64,196,255,0.12);
  --offline:    #2e3b2e;
  --t1: #e8f5e9;
  --t2: #a5d6a7;
  --t3: #66bb6a;
  --t4: #388e3c;
  --b1: rgba(118,255,3,0.12);
  --b2: rgba(118,255,3,0.22);
  --b3: rgba(118,255,3,0.05);
}

/* Hex glow for each theme */
body.theme-magma .logo-hex { background:linear-gradient(135deg, #5d2800, var(--accent)); }
body.theme-frost .logo-hex { background:linear-gradient(135deg, #004466, var(--accent)); }
body.theme-aurora .logo-hex { background:linear-gradient(135deg, #1a0030, var(--accent)); }
body.theme-nocturne .logo-hex { background:linear-gradient(135deg, #1a2e1a, var(--accent)); }

/* ================================================================ LOADING SPINNER */
.loading-spinner {
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:32px; color:var(--t3); font-size:12px;
}
.spinner {
  width:20px; height:20px; border:2px solid var(--b1);
  border-top:2px solid var(--accent); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ================================================================ TOOLTIP */
[data-tip] {
  position:relative; cursor:help;
}
[data-tip]:hover::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px);
  left:50%; transform:translateX(-50%);
  background:var(--bg-1); color:var(--t1); font-size:10px;
  padding:5px 10px; border-radius:var(--r);
  border:1px solid var(--b1); white-space:nowrap;
  z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.4);
  pointer-events:none;
}

/* ================================================================ STATUS PULSE */
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(0.8); }
}
.dot-ok { animation:pulse-dot 2s ease-in-out infinite; }
.dot-warn { animation:pulse-dot 1.5s ease-in-out infinite; }
.dot-err { animation:pulse-dot 0.8s ease-in-out infinite; }

/* ================================================================ PANEL TRANSITIONS */
.panel {
  animation:panelFade .25s ease;
}
@keyframes panelFade {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

/* ================================================================ CHART WRAPPER */
.chart-wrap {
  position:relative; width:100%; height:220px;
}
.chart-wrap canvas {
  width:100% !important; height:100% !important;
}

/* ================================================================ RESPONSIVE ENHANCEMENTS */
@media(max-width:1200px) {
  .g5{grid-template-columns:repeat(4,1fr);}
  .g4{grid-template-columns:1fr 1fr;}
}
@media(max-width:1024px) {
  #sidebar { width:180px; }
  .g3{grid-template-columns:1fr 1fr;}
  .g5{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px) {
  body { font-size:12px; }
  #topbar { padding:0 10px; gap:8px; flex-wrap:wrap; height:auto; min-height:54px; padding:8px 10px; }
  #sidebar { width:50px; overflow:hidden; }
  #sidebar .nav-group-label, #sidebar .nav-item span:not(.nav-badge) { display:none; }
  #sidebar .nav-item { justify-content:center; padding:10px 0; }
  .top-stats .top-stat { padding:4px 8px; }
  .top-stat-val { font-size:16px; }
  .user-name, .user-role { display:none; }
  .g2,.g3,.g4,.g5,.g6 { grid-template-columns:1fr !important; }
  .panel { padding:12px; }
  .panel-hdr { flex-direction:column; gap:8px; }
  .panel-actions { width:100%; flex-wrap:wrap; }
  .modal { width:95vw; max-height:90vh; }
  .login-card { padding:24px 20px; }
  #clock-display { font-size:14px; min-width:auto; }
  .logo-title { font-size:13px; }
  .logo-sub { display:none; }
  .secure-badge { display:none; }
}
@media(max-width:480px) {
  .top-stat { padding:2px 6px; }
  .top-stat-val { font-size:14px; }
  .top-stat-lbl { font-size:7px; }
  .top-sep { display:none; }
  #clock-display { font-size:12px; }
}

/* ================================================================ BANDWIDTH METRIC CARDS RESPONSIVE */
#bw-metrics .metric-val { font-size:26px; }

/* ================================================================ MAINTENANCE CALENDAR STYLE */
.maint-day {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.maint-day:hover { background:var(--bg-3); }
.maint-day.has-task { border:2px solid var(--warn); color:var(--warn); }