/* ================================================================
   TUKHNANUTHA — Dashboard v5 FINAL
   Design: Slate Dark + Teal/Emerald | Fonts: Outfit + Fira Code
   Mobile-first · Tout dynamique · Tous boutons fonctionnels
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap');

/* ── TOKENS DARK (default) ───────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:      #0d1117;
  --bg1:     #161b22;
  --bg2:     #1c2128;
  --bg3:     #22272e;
  --bgh:     #2d333b;
  --bd:      rgba(255,255,255,.07);
  --bd2:     rgba(255,255,255,.12);
  --bd3:     rgba(255,255,255,.20);
  --t0:      #e6edf3;
  --t1:      #c9d1d9;
  --t2:      #8b949e;
  --t3:      #484f58;
  --c-teal:   #2dd4bf;
  --c-teal2:  rgba(45,212,191,.13);
  --c-teal3:  rgba(45,212,191,.28);
  --c-green:  #22d98a;
  --c-green2: rgba(34,217,138,.13);
  --c-green3: rgba(34,217,138,.28);
  --c-red:    #f85149;
  --c-red2:   rgba(248,81,73,.13);
  --c-amber:  #e3b341;
  --c-amber2: rgba(227,179,65,.13);
  --c-blue:   #58a6ff;
  --c-blue2:  rgba(88,166,255,.13);
  --c-violet: #bc8cff;
  --c-violet2:rgba(188,140,255,.13);
  --c-pink:   #f472b6;
  --c-pink2:  rgba(244,114,182,.13);
  --topbar-h:    54px;
  --band-h:     104px;
  --toolbar-h:   44px;
  --bottom-nav-h: 58px;
}

/* ── TOKENS LIGHT ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:#f0f2f5; --bg1:#ffffff; --bg2:#f6f8fa; --bg3:#eaeef2; --bgh:#e0e5ec;
  --bd:rgba(0,0,0,.08); --bd2:rgba(0,0,0,.13); --bd3:rgba(0,0,0,.22);
  --t0:#1c2128; --t1:#374151; --t2:#6b7280; --t3:#9ca3af;
  --c-teal:#0d9488; --c-teal2:rgba(13,148,136,.10); --c-teal3:rgba(13,148,136,.22);
  --c-green:#059669; --c-green2:rgba(5,150,105,.10); --c-green3:rgba(5,150,105,.22);
  --c-red:#dc2626; --c-red2:rgba(220,38,38,.10);
  --c-amber:#d97706; --c-amber2:rgba(217,119,6,.10);
  --c-blue:#2563eb; --c-blue2:rgba(37,99,235,.10);
  --c-violet:#7c3aed; --c-violet2:rgba(124,58,237,.10);
  --c-pink:#db2777; --c-pink2:rgba(219,39,119,.10);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg); color: var(--t0);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* reserve space for bottom nav on mobile */
  padding-bottom: 0;
  transition: background .25s, color .25s;
}
body.drawer-open { overflow: hidden; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; }
input, select { font-family: inherit; }

/* ── SPLASH ──────────────────────────────────────────────────── */
.splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s ease;
}
.splash-screen.fade-out { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.splash-logo {
  width: 88px; height: 88px; object-fit: contain; opacity: 0;
  filter: drop-shadow(0 0 24px var(--c-teal));
  animation: splashpop 1.4s .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes splashpop {
  from { opacity:0; transform:scale(.5) translateY(14px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.splash-title { font-weight: 800; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
.splash-bar-wrap { width: 200px; height: 3px; background: var(--bd2); border-radius: 2px; overflow: hidden; }
.splash-bar { height: 100%; width: 0; background: var(--c-teal); border-radius: 2px; transition: width .35s ease; }
.splash-sub { font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 2px; color: var(--t2); text-transform: uppercase; }

/* ── MOBILE OVERLAY ──────────────────────────────────────────── */
.mob-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
}
.mob-overlay.open { display: block; }

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.mob-drawer {
  position: fixed; top: 0; left: -100%; bottom: 0; z-index: 500;
  width: min(288px, 88vw);
  background: var(--bg1); border-right: 1px solid var(--bd2);
  display: flex; flex-direction: column;
  transition: left .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.mob-drawer.open { left: 0; }
.mob-drawer-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--bd);
  background: var(--bg2); flex-shrink: 0;
}
.mob-dlogo { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px var(--c-teal)); }
.mob-dbrand { font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; flex: 1; }
.mob-dclose {
  width: 30px; height: 30px; border-radius: 6px;
  color: var(--t2); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.mob-dclose:hover { background: var(--bgh); color: var(--t0); }
.mob-drawer-bd { flex: 1; overflow-y: auto; padding: 8px; }
.mob-dlink {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--t1);
  transition: background .13s; margin-bottom: 2px;
}
.mob-dlink:hover, .mob-dlink--active { background: var(--c-teal2); color: var(--c-teal); }
.mob-drawer-ft { padding: 12px; border-top: 1px solid var(--bd); flex-shrink: 0; }
.mob-dlogout {
  width: 100%; padding: 10px; border-radius: 8px;
  border: 1px solid var(--c-red2); background: var(--c-red2);
  color: var(--c-red); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.mob-dlogout:hover { background: rgba(248,81,73,.25); }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  background: rgba(13,17,23,.94);
  border-bottom: 1px solid var(--bd2);
  backdrop-filter: blur(20px);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  transition: transform .25s ease;
}
[data-theme="light"] .topbar { background: rgba(255,255,255,.94); }

/* Burger */
.burger-btn {
  display: none;
  width: 36px; height: 36px; border-radius: 7px;
  border: 1px solid var(--bd); background: var(--bg2); color: var(--t2);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  flex-shrink: 0; transition: all .15s;
}
.burger-btn span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.burger-btn:hover { background: var(--bgh); color: var(--t0); }

.tb-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tb-logo { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 8px var(--c-teal)); }
.tb-name { font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.2; }
.tb-sub  { font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t2); letter-spacing: .5px; }

.tb-nav { display: flex; align-items: center; gap: 2px; margin: 0 14px; }
.tb-nav-item {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--t2);
  transition: all .15s; white-space: nowrap;
}
.tb-nav-item:hover { color: var(--t0); background: var(--bgh); }
.tb-nav-item.active { color: var(--c-teal); background: var(--c-teal2); border: 1px solid var(--c-teal3); }

.tb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }

/* Search */
.tb-search { position: relative; }
.tb-search-tog {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--bd); background: var(--bg2);
  color: var(--t2); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tb-search-tog:hover { background: var(--bgh); color: var(--t0); }
.tb-search-panel {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 280px; z-index: 300;
  background: var(--bg1); border: 1px solid var(--bd2);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.tb-search-panel.open { display: block; }
.tb-search-inp {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 13px; color: var(--t0); padding: 11px 14px;
  border-bottom: 1px solid var(--bd);
}
.tb-search-inp::placeholder { color: var(--t3); }
.tb-search-results { display: none; }
.search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 12px; color: var(--t1);
  transition: background .12s;
}
.search-item:hover { background: var(--bgh); color: var(--t0); }
.si-ico { font-size: 14px; width: 20px; text-align: center; }

/* Live dot */
.tb-live { display: flex; align-items: center; gap: 6px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-green); box-shadow: 0 0 6px var(--c-green);
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.live-label { font-family: 'Fira Code', monospace; font-size: 10px; font-weight: 700; color: var(--c-green); letter-spacing: 2px; }

/* Clock */
.tb-clock { text-align: right; }
.tb-clock-label { font-family: 'Fira Code', monospace; font-size: 8px; letter-spacing: 2px; color: var(--t3); text-transform: uppercase; }
.tb-clock-val   { font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 700; color: var(--c-teal); letter-spacing: 1px; }

/* Net */
.tb-net { display: flex; align-items: center; gap: 5px; }
.internet-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); transition: all .4s; }
.internet-dot.connected { background: var(--c-green); box-shadow: 0 0 6px var(--c-green); }
.wifi-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.wifi-bar  { width: 3px; background: var(--t3); border-radius: 2px; }
.wifi-bar:nth-child(1){height:3px} .wifi-bar:nth-child(2){height:6px}
.wifi-bar:nth-child(3){height:9px} .wifi-bar:nth-child(4){height:12px}
.internet-dot.connected ~ .wifi-bars .wifi-bar { background: var(--c-green); }

/* Icon buttons */
.tb-ico-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--bd); background: var(--bg2);
  color: var(--t2); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; position: relative; flex-shrink: 0;
}
.tb-ico-btn:hover { background: var(--bgh); border-color: var(--bd2); color: var(--t0); }
.tb-ico-btn--bell:hover { color: var(--c-amber); }
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--c-red); color: #fff;
  font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg1);
}
.tb-logout {
  padding: 6px 13px; border-radius: 6px;
  border: 1px solid var(--bd2); background: var(--bg2);
  color: var(--t2); font-size: 11px; font-weight: 600;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.tb-logout:hover { color: var(--c-red); border-color: var(--c-red2); background: var(--c-red2); }

/* ── HERO BAND (KPI strip) ───────────────────────────────────── */
.hero-band {
  display: flex; align-items: stretch;
  min-height: var(--band-h);
  background: var(--bg1); border-bottom: 1px solid var(--bd);
  overflow-x: auto;
}
.hero-band::-webkit-scrollbar { display: none; }

.hero-kpi {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 22px; gap: 3px; flex-shrink: 0; min-width: 160px;
  border-right: 1px solid var(--bd);
  transition: background .15s;
}
.hero-kpi:hover { background: var(--bgh); }
.hk-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hk-label { font-family: 'Fira Code', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); }
.hk-unit  { font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t3); }
.hk-val   { font-family: 'Fira Code', monospace; font-size: 24px; font-weight: 700; color: var(--t0); line-height: 1; }
.hk-bar-wrap { height: 3px; background: var(--bd2); border-radius: 2px; overflow: hidden; margin: 4px 0; }
.hk-bar { height: 100%; border-radius: 2px; width: 0; transition: width .9s cubic-bezier(.4,0,.2,1); }
.hk-bar--green  { background: var(--c-green); }
.hk-bar--purple { background: var(--c-violet); }
.hk-bar--amber  { background: var(--c-amber); }
.hk-bar--blue   { background: var(--c-blue); }
.hk-meta { display: flex; align-items: center; gap: 8px; }
.hk-trend { font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 600; }
.hk-trend.up     { color: var(--c-green); }
.hk-trend.down   { color: var(--c-amber); }
.hk-trend.stable { color: var(--t3); }
.hk-caption { font-size: 9px; color: var(--t3); }

.hero-sep { width: 1px; background: var(--bd); flex-shrink: 0; margin: 14px 0; }

.hero-cmds {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 18px 14px 24px; gap: 7px; flex-shrink: 0;
  margin-left: auto; min-width: 220px;
}
.hero-cmds-label { font-family: 'Fira Code', monospace; font-size: 8px; letter-spacing: 2px; color: var(--t3); text-transform: uppercase; }
.hero-cmds-row   { display: flex; gap: 5px; flex-wrap: wrap; }

/* Commands (used by main.js wireUI + hero) */
.cmd {
  font-family: 'Fira Code', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .3px; border-radius: 6px;
  padding: 6px 11px; border: 1px solid var(--bd2);
  background: var(--bg3); color: var(--t1);
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.cmd:hover { background: var(--bgh); border-color: var(--bd3); color: var(--t0); }
.cmd.success { background: var(--c-green2); border-color: rgba(34,217,138,.3); color: var(--c-green); }
.cmd.success:hover { background: rgba(34,217,138,.22); box-shadow: 0 0 14px rgba(34,217,138,.12); }
.cmd.warn    { background: var(--c-amber2); border-color: rgba(227,179,65,.3);  color: var(--c-amber); }
.cmd.warn:hover { background: rgba(227,179,65,.22); }
.cmd.danger  { background: var(--c-red2);   border-color: rgba(248,81,73,.3);   color: var(--c-red); }
.cmd.danger:hover  { background: rgba(248,81,73,.22); box-shadow: 0 0 14px rgba(248,81,73,.1); }
.cmd.ghost   { background: transparent; color: var(--t2); }
.cmd.ghost:hover  { background: var(--bgh); color: var(--t0); }
.cmd.outline { color: var(--t2); }
.cmd.outline:hover { color: var(--c-teal); border-color: var(--c-teal3); background: var(--c-teal2); }

/* btn alias used by main.js renderAlerts */
.btn { font-family: 'Fira Code', monospace; font-size: 10px; border: 1px solid var(--bd2); background: var(--bg2); color: var(--t1); padding: 4px 9px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all .15s; }
.btn:hover { background: var(--bgh); color: var(--t0); }
.btn.sm { font-size: 9px; padding: 2px 7px; }
.btn.ack { color: var(--t2); }
.btn.ack:hover { color: var(--c-green); border-color: var(--c-green3); }

/* ── CHARTS TOOLBAR ──────────────────────────────────────────── */
.charts-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--toolbar-h);
  background: var(--bg2); border-bottom: 1px solid var(--bd);
  padding: 0 16px; gap: 12px; flex-wrap: wrap;
}
.ct-left { display: flex; align-items: center; gap: 10px; }
.ct-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ct-title { font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); }
.ct-upd   { font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t3); }

.range-group { display: flex; border: 1px solid var(--bd2); border-radius: 6px; overflow: hidden; }
.range-btn {
  font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 600;
  padding: 5px 10px; background: transparent; color: var(--t2);
  border-right: 1px solid var(--bd2); transition: all .13s;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  min-height: 30px; display: flex; align-items: center; justify-content: center;
}
.range-btn:last-child { border-right: none; }
.range-btn:hover { background: var(--bgh); color: var(--t0); }
.range-btn:active { background: var(--c-teal2); color: var(--c-teal); transform: scale(0.97); }
.range-btn--active { background: var(--c-teal2) !important; color: var(--c-teal) !important; }

.ct-btn {
  font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 600;
  padding: 5px 10px; border-radius: 5px;
  border: 1px solid var(--bd2); background: transparent; color: var(--t2);
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.ct-btn:hover { background: var(--bgh); border-color: var(--bd3); color: var(--t0); }

/* ── MAIN GRID ───────────────────────────────────────────────── */
.main-grid {
  display: grid;
  grid-template-columns: 350px 1fr 290px;
  min-height: calc(100vh - var(--topbar-h) - var(--band-h) - var(--toolbar-h) - 38px);
  align-items: start;
}
.col-left   { display: flex; flex-direction: column; border-right: 1px solid var(--bd); }
.col-center { display: flex; flex-direction: column; border-right: 1px solid var(--bd); }
.col-right  { display: flex; flex-direction: column; }

/* ── MODULE SHELL ────────────────────────────────────────────── */
.module { background: var(--bg1); border-bottom: 1px solid var(--bd); }
.mod-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--bd);
  background: var(--bg2); gap: 8px; flex-shrink: 0;
}
.mod-title-group { display: flex; align-items: center; gap: 8px; }
.mod-actions     { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mod-title { font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); }
.mod-badge {
  font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .5px; border: 1px solid transparent;
}
.mod-badge--live { background: var(--c-green2); color: var(--c-green); border-color: var(--c-green3); }
.mod-count {
  font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700;
  background: var(--c-red2); color: var(--c-red);
  border: 1px solid rgba(248,81,73,.3); padding: 2px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
}

/* act-btn */
.act-btn {
  font-family: 'Fira Code', monospace; font-size: 9px;
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--bd); background: transparent; color: var(--t2);
  cursor: pointer; transition: all .13s; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 3px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; min-height: 28px;
}
.act-btn:hover { background: var(--bgh); border-color: var(--bd2); color: var(--t0); }
.act-btn:active { transform: scale(0.95); background: var(--bgh); }
.act-btn--active { background: var(--c-teal2) !important; color: var(--c-teal) !important; border-color: var(--c-teal3) !important; }
.sel-sm {
  font-family: 'Fira Code', monospace; font-size: 9px;
  background: var(--bg2); border: 1px solid var(--bd2); color: var(--t1);
  padding: 4px 8px; border-radius: 5px; cursor: pointer; outline: none;
}
.sel-sm:focus { border-color: var(--c-teal); }

/* ── MAP ─────────────────────────────────────────────────────── */
.module--map { padding: 0; }
.map-surface { width: 100%; height: 320px; background: var(--bg); }
.map-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 12px; background: var(--bg2); border-top: 1px solid var(--bd);
}
.map-leg-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--t2); }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; font-style: normal; display: block; }
.map-leg-total { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t2); }

/* ── ALERTS ──────────────────────────────────────────────────── */
.module--alerts { padding: 0; }
.alert-list {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px; max-height: 290px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--bd2) transparent;
}
.alert {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 9px 11px; border-radius: 7px;
  border: 1px solid var(--bd); background: var(--bg2);
  border-left: 3px solid var(--c-amber);
  transition: background .12s;
}
.alert:hover { background: var(--bgh); }
.alert.critical { border-left-color: var(--c-red);   background: rgba(248,81,73,.04); }
.alert.major    { border-left-color: var(--c-amber); }
.alert.minor    { border-left-color: #84cc16;         background: rgba(132,204,22,.03); }
.alert.placeholder { grid-template-columns: 1fr; text-align: center; color: var(--t3); font-style: italic; font-size: 11px; border-left-color: transparent; background: transparent; border-color: transparent; font-family: 'Fira Code', monospace; padding: 16px; }
.alert .why   { font-size: 11px; font-weight: 600; margin-bottom: 3px; }
.alert .where { font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t2); }
.alert .time  { font-family: 'Fira Code', monospace; font-size: 8px; color: var(--t3); text-align: right; }

/* ── STAT ROW (mini cards above charts) ─────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid var(--bd);
}
.stat-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-right: 1px solid var(--bd);
  background: var(--bg1); transition: background .13s;
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: var(--bgh); }
.sc-icon { font-size: 18px; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sc-icon--green  { background: var(--c-green2); }
.sc-icon--blue   { background: var(--c-blue2); }
.sc-icon--pink   { background: var(--c-pink2); }
.sc-icon--teal   { background: var(--c-teal2); }
.sc-body { flex: 1; min-width: 0; }
.sc-label { font-family: 'Fira Code', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t2); margin-bottom: 2px; }
.sc-val   { font-family: 'Fira Code', monospace; font-size: 15px; font-weight: 700; white-space: nowrap; }
.sc-val--green  { color: var(--c-green); }
.sc-val--blue   { color: var(--c-blue); }
.sc-val--pink   { color: var(--c-pink); }
.sc-val--teal   { color: var(--c-teal); }
.sc-spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex-shrink: 0; }
.spark-bar { width: 4px; background: var(--c-teal); border-radius: 2px; opacity: .7; transition: height .4s ease; }
.sc-gauge { width: 32px; height: 32px; flex-shrink: 0; }
.gauge-svg { width: 100%; height: 100%; }
.gauge-bg   { fill: none; stroke: var(--bd2); stroke-width: 3.5; }
.gauge-fill { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.gauge-fill--blue { stroke: var(--c-blue); }
.gauge-fill--pink { stroke: var(--c-pink); }

/* ── CHARTS GRID ─────────────────────────────────────────────── */
.charts-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--bd);
  flex: 1;
}
.charts-block--single { grid-template-columns: 1fr; }
.charts-block--single .chart-module--wide { grid-column: 1; }

.chart-module {
  background: var(--bg1); display: flex; flex-direction: column;
  min-height: 185px; transition: background .13s; position: relative;
}
.chart-module:hover { background: var(--bg2); }
.chart-module--wide { grid-column: 1 / -1; min-height: 200px; }
.chart-module--big {
  position: fixed !important; inset: 16px; z-index: 600;
  border-radius: 12px; border: 1px solid var(--bd2);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  min-height: unset;
}
.chart-module--big .cm-body { height: calc(100% - 44px); }

.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 5px; flex-shrink: 0; gap: 8px;
}
.cm-title { font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t2); }
.cm-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-pill {
  font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .5px;
}
.cm-pill--green  { background: var(--c-green2);  color: var(--c-green);  border: 1px solid rgba(34,217,138,.25); }
.cm-pill--purple { background: var(--c-violet2); color: var(--c-violet); border: 1px solid rgba(188,140,255,.25); }
.cm-pill--amber  { background: var(--c-amber2);  color: var(--c-amber);  border: 1px solid rgba(227,179,65,.25); }
.cm-pill--blue   { background: var(--c-blue2);   color: var(--c-blue);   border: 1px solid rgba(88,166,255,.25); }
.cm-live { font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 700; color: var(--c-teal); }
.cm-dot  { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cm-opt-btn { background: transparent; color: var(--t3); font-size: 15px; padding: 1px 5px; border-radius: 4px; cursor: pointer; transition: all .12s; }
.cm-opt-btn:hover { background: var(--bgh); color: var(--t1); }
.cm-body { flex: 1; padding: 0 8px 8px; min-height: 0; position: relative; }
.cm-body canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Chart popup menu */
.cm-popup {
  position: fixed; z-index: 700;
  background: var(--bg1); border: 1px solid var(--bd2);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  flex-direction: column; overflow: hidden; min-width: 170px;
}
.cm-popup-item {
  display: block; width: 100%; padding: 9px 14px;
  text-align: left; font-size: 12px; color: var(--t1);
  transition: background .12s; border-bottom: 1px solid var(--bd);
}
.cm-popup-item:last-child { border-bottom: none; }
.cm-popup-item:hover { background: var(--bgh); color: var(--t0); }
.cm-popup-item--close { color: var(--c-red); }
.cm-popup-item--close:hover { background: var(--c-red2); }
.cm-popup-sep { height: 1px; background: var(--bd); }

/* ── RIGHT COL ───────────────────────────────────────────────── */
/* Ring */
.health-ring-wrap { display: flex; align-items: center; gap: 14px; padding: 14px; }
.health-ring { width: 96px; height: 96px; flex-shrink: 0; transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: var(--bd2); stroke-width: 9; }
.ring-fill { fill: none; stroke-width: 9; stroke-linecap: butt; transition: stroke-dasharray .7s, stroke-dashoffset .7s; }
.ring-fill--green { stroke: var(--c-green); }
.ring-fill--amber { stroke: var(--c-amber); }
.ring-fill--red   { stroke: var(--c-red); }
.ring-num { fill: var(--t0); font-size: 18px; font-weight: 800; text-anchor: middle; font-family: 'Fira Code', monospace; }
.ring-sub { fill: var(--t2); font-size: 7px; text-anchor: middle; font-family: 'Fira Code', monospace; letter-spacing: 1px; }
.ring-legend { display: flex; flex-direction: column; gap: 6px; }
.rl-item { display: flex; align-items: center; gap: 7px; }
.rl-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rl-label { font-size: 11px; color: var(--t2); flex: 1; }
.rl-val   { font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 700; color: var(--t0); }

/* Health bars */
.health-bars { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.hb-row { display: grid; grid-template-columns: 90px 1fr 38px; align-items: center; gap: 8px; }
.hb-label { font-size: 10px; color: var(--t2); }
.hb-track { height: 5px; background: var(--bd2); border-radius: 3px; overflow: hidden; }
.hb-fill  { height: 100%; border-radius: 3px; transition: width .7s; }
.hb-fill--green { background: var(--c-green); }
.hb-fill--blue  { background: var(--c-blue); }
.hb-fill--amber { background: var(--c-amber); }
.hb-val { font-family: 'Fira Code', monospace; font-size: 10px; font-weight: 600; color: var(--t1); text-align: right; }

/* Regions */
.region-list { display: flex; flex-direction: column; padding: 5px 8px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bd2) transparent; }
.region { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; border-radius: 6px; transition: background .12s; gap: 8px; }
.region:hover { background: var(--bgh); }
.region .name  { font-size: 12px; font-weight: 600; }
.region .muted { font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t2); }
.region .bars  { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.region.placeholder { justify-content: center; color: var(--t3); font-style: italic; font-size: 11px; }
.pill { font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 999px; border: 1px solid transparent; }
.pill--green  { background: var(--c-green2); border-color: var(--c-green3);  color: var(--c-green); }
.pill--orange { background: var(--c-amber2); border-color: rgba(227,179,65,.3); color: var(--c-amber); }
.pill--red    { background: var(--c-red2);   border-color: rgba(248,81,73,.3); color: var(--c-red); }
/* legacy pill classes used by main.js */
.pill.green  { background: var(--c-green2); border-color: var(--c-green3);  color: var(--c-green); }
.pill.orange { background: var(--c-amber2); border-color: rgba(227,179,65,.3); color: var(--c-amber); }
.pill.red    { background: var(--c-red2);   border-color: rgba(248,81,73,.3); color: var(--c-red); }

/* Systems */
.systems-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 12px; }
.sys-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--bd); transition: all .18s; cursor: pointer; }
.sys-card:hover { background: var(--bgh); border-color: var(--bd2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.sys-img  { width: 34px; height: 34px; object-fit: contain; }
.sys-name { font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.sys-status { font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700; }
.sys-status--ok   { color: var(--c-green); }
.sys-status--warn { color: var(--c-amber); }
.sys-status--err  { color: var(--c-red); }

/* ── LOG TERMINAL ────────────────────────────────────────────── */
.module--log { }
.log-terminal { display: flex; flex-direction: column; background: var(--bg); }
.log-lines {
  height: 158px; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: var(--bd) transparent;
}
.log-line { display: flex; gap: 8px; font-family: 'Fira Code', monospace; font-size: 10px; line-height: 1.4; }
.ll-ts  { color: var(--t3); flex-shrink: 0; width: 58px; }
.ll-msg { color: var(--t1); word-break: break-word; }
.log-line--ok    .ll-msg { color: var(--c-green); }
.log-line--warn  .ll-msg { color: var(--c-amber); }
.log-line--error .ll-msg { color: var(--c-red); }
.log-line--cmd   .ll-msg { color: var(--c-teal); }
.log-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-top: 1px solid var(--bd);
  background: var(--bg2);
}
.log-prompt { font-family: 'Fira Code', monospace; font-size: 14px; color: var(--c-teal); }
.log-input  { flex: 1; background: transparent; border: none; outline: none; font-family: 'Fira Code', monospace; font-size: 11px; color: var(--t0); }
.log-input::placeholder { color: var(--t3); }

/* Quick nav */
.quicknav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px; }
.qn-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; transition: background .12s; }
.qn-item:hover { background: var(--bgh); }
.qn-icon  { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.qn-label { font-size: 12px; font-weight: 500; color: var(--t1); flex: 1; }
.qn-arrow { font-size: 16px; color: var(--t3); transition: transform .12s; }
.qn-item:hover .qn-arrow { color: var(--c-teal); transform: translateX(3px); }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 16px; z-index: 8000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 10px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  background: var(--bg1); border: 1px solid var(--bd2);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  opacity: 0; transform: translateX(20px);
  transition: all .3s; max-width: 290px;
  pointer-events: auto; border-left: 3px solid var(--bd2);
}
.toast--in { opacity: 1; transform: translateX(0); }
.toast--success { border-left-color: var(--c-green); }
.toast--error   { border-left-color: var(--c-red); }
.toast--info    { border-left-color: var(--c-blue); }
.toast--warn    { border-left-color: var(--c-amber); }

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────── */
.mob-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  height: var(--bottom-nav-h);
  background: var(--bg1); border-top: 1px solid var(--bd2);
  align-items: stretch;
}
.mbn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; font-weight: 500; color: var(--t2);
  background: transparent; border: none; cursor: pointer;
  transition: color .15s; position: relative;
  text-decoration: none;
}
.mbn-item:hover, .mbn-item--active { color: var(--c-teal); }
.mbn-ico  { font-size: 18px; line-height: 1; position: relative; }
.mbn-lbl  { font-size: 9px; letter-spacing: .3px; }
.mbn-badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--c-red); color: #fff;
  font-family: 'Fira Code', monospace; font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--bd); padding: 9px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Fira Code', monospace; font-size: 9px; color: var(--t3);
  background: var(--bg1);
}
.f-sep { color: var(--t3); }
.footer-status { color: var(--c-green); margin-left: auto; }

/* ─── CARRIER TOOLTIP (Leaflet) ─────────────────────────────── */
.carrier-tooltip { background: var(--bg1) !important; border: 1px solid var(--bd2) !important; border-radius: 8px !important; box-shadow: 0 8px 20px rgba(0,0,0,.5) !important; }
.carrier-tooltip-inner { font-family: 'Fira Code', monospace; font-size: 11px; color: var(--t0); line-height: 1.6; }
.carrier-tooltip-inner strong { color: var(--c-teal); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile First
═══════════════════════════════════════════════════════════════ */

/* ─── ≤1400px ── */
@media (max-width:1400px) {
  .main-grid { grid-template-columns: 330px 1fr 275px; }
}

/* ─── ≤1180px : 2-column ── */
@media (max-width:1180px) {
  .main-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .col-left   { grid-column: 1; grid-row: 1; border-right: 1px solid var(--bd); }
  .col-right  { grid-column: 2; grid-row: 1; border-right: none; }
  .col-center { grid-column: 1 / -1; grid-row: 2; border-right: none; }
  .stat-row   { grid-template-columns: repeat(4,1fr); }
  .map-surface { height: 260px; }
}

/* ─── ≤900px : tablet portrait ── */
@media (max-width:900px) {
  :root { --topbar-h: 50px; --band-h: auto; --toolbar-h: auto; }
  .burger-btn  { display: flex; }
  .tb-nav      { display: none; }
  .tb-sub      { display: none; }
  .tb-clock-label { display: none; }
  .mob-bottom-nav { display: flex; }
  body { padding-bottom: var(--bottom-nav-h); }
  .toast-container { bottom: calc(var(--bottom-nav-h) + 14px); }

  .hero-band { flex-wrap: wrap; min-height: auto; }
  .hero-kpi  { min-width: calc(50% - 1px); }
  .hero-sep  { display: none; }
  .hero-cmds { margin-left: 0; min-width: 100%; padding: 12px 16px; border-top: 1px solid var(--bd); border-right: none; }

  .charts-toolbar { height: auto; padding: 8px 12px; }
}

/* ─── ≤700px : mobile ── */
@media (max-width:700px) {
  .main-grid { grid-template-columns: 1fr; }
  .col-left, .col-center, .col-right { grid-column: 1; border-right: none; border-bottom: 1px solid var(--bd); }
  .col-center { order: 2; }
  .col-right  { order: 3; }

  .hero-kpi   { min-width: calc(50% - 1px); padding: 11px 14px; }
  .hk-val     { font-size: 20px; }

  .stat-row   { grid-template-columns: 1fr 1fr; }
  .stat-card:nth-child(3), .stat-card:nth-child(4) { border-top: 1px solid var(--bd); }

  .charts-block { grid-template-columns: 1fr; }
  .chart-module--wide { grid-column: 1; }
  .chart-module { min-height: 165px; }

  .map-surface { height: 220px; }
  .alert-list  { max-height: 220px; }

  .tb-live      { display: none; }
  .tb-clock-val { font-size: 12px; }
  .tb-right     { gap: 5px; }

  /* Charts toolbar: keep range-group visible on mobile, make scrollable */
  .charts-toolbar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 8px 10px;
    gap: 8px;
  }
  .ct-right {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    gap: 6px;
  }
  .ct-right::-webkit-scrollbar { display: none; }
  .range-group { flex-shrink: 0; }
  .range-btn   { padding: 6px 14px; font-size: 10px; min-height: 34px; flex-shrink: 0; }
  .ct-btn      { flex-shrink: 0; min-height: 34px; padding: 6px 11px; font-size: 10px; }
  .ct-title    { display: none; }
}

/* ─── ≤420px : small phone ── */
@media (max-width:420px) {
  :root { --topbar-h: 46px; }
  .tb-name  { font-size: 11px; letter-spacing: 1px; }
  .tb-clock { display: none; }
  .hero-kpi { min-width: 100%; border-right: none; }
  .hk-val   { font-size: 22px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .systems-grid { grid-template-columns: repeat(3,1fr); }
  .cm-title { font-size: 7px; }
  .footer { padding: 7px 12px; }
}

/* ─── Landscape phone ── */
@media (max-height:480px) and (orientation:landscape) {
  .hero-band { flex-wrap: nowrap; overflow-x: auto; }
  .hero-kpi  { min-width: 140px; }
  .map-surface { height: 180px; }
}