/* NEX-ENERGY tokens — scoped to dashboard */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --nex-bg-0:#05070A;
  --nex-bg-1:#0B0F14;
  --nex-bg-2:#131A22;
  --nex-stroke:#1F2A36;
  --nex-stroke-2:#2A3644;

  --nex-text-hi:#E8F1FA;
  --nex-text-mid:#8FA3B8;
  --nex-text-low:#4A5A6B;

  --nex-cyan:#00E5FF;
  --nex-cyan-dim:#00B8CC;
  --nex-green:#00FF88;
  --nex-amber:#FFB020;
  --nex-magenta:#FF2D92;
  --nex-red:#FF4D5E;

  --glow-cyan:0 0 12px #00E5FF80;
  --glow-green:0 0 12px #00FF8880;
  --glow-amber:0 0 10px #FFB02080;
  --glow-red:0 0 10px #FF4D5E80;

  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--nex-bg-0);color:var(--nex-text-hi);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh}
body{
  background:
    radial-gradient(ellipse 800px 600px at 15% 10%, #00E5FF08, transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 90%, #FF2D9206, transparent 60%),
    var(--nex-bg-0);
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--nex-stroke);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--nex-stroke-2)}

:focus-visible{outline:2px solid var(--nex-magenta);outline-offset:2px}

/* ───── Animations ───── */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.25)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes blink{0%,100%{opacity:.9}50%{opacity:.3}}
@keyframes dash{to{stroke-dashoffset:-20}}

/* ───── Layout shell ───── */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.rail{border-right:1px solid var(--nex-stroke);background:var(--nex-bg-0);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.main{padding:24px 32px 48px;max-width:1600px;width:100%}

/* ───── Topbar ───── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 32px;border-bottom:1px solid var(--nex-stroke);
  background:rgba(11,15,20,.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
  grid-column:1 / -1;
}
.topbar .brand{display:flex;align-items:center;gap:14px}
.topbar .logo-mark{
  width:32px;height:32px;
  display:grid;place-items:center;
  box-shadow:0 0 16px #00E5FF40;
  border-radius:8px;
  overflow:hidden;
}
.topbar .logo-mark img{width:100%;height:100%;display:block}
.topbar .title-group{display:flex;flex-direction:column;gap:2px}
.topbar .title{font-family:var(--font-display);font-weight:500;font-size:14px;letter-spacing:-0.01em;color:var(--nex-text-hi)}
.topbar .subtitle{font-family:var(--font-mono);font-size:11px;color:var(--nex-text-mid);display:flex;align-items:center;gap:8px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--nex-green);box-shadow:0 0 6px var(--nex-green);display:inline-block;animation:pulse-dot 1.8s infinite ease-in-out}

.topbar-right{display:flex;align-items:center;gap:16px}
.demo-badge{
  position:relative;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  padding:5px 10px;border-radius:4px;
  background:rgba(255,45,146,.1);color:var(--nex-magenta);
  border:1px solid rgba(255,45,146,.3);
  cursor:help;
}
.lang-switch{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:12px;background:var(--nex-bg-1);border:1px solid var(--nex-stroke);border-radius:6px;padding:2px;overflow:hidden}
.lang-switch button{background:none;border:none;color:var(--nex-text-mid);padding:4px 10px;cursor:pointer;font-family:inherit;font-size:inherit;border-radius:4px;transition:all .15s}
.lang-switch button.active{background:var(--nex-bg-2);color:var(--nex-cyan)}

/* ───── Left rail ───── */
.rail-inner{padding:20px 16px;display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.rail-section{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-low);text-transform:uppercase;letter-spacing:.1em;margin:12px 8px 8px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;
  color:var(--nex-text-mid);cursor:pointer;
  font-size:13px;font-weight:500;
  transition:background .15s,color .15s;
  border:1px solid transparent;
}
.nav-item:hover{background:var(--nex-bg-1);color:var(--nex-text-hi)}
.nav-item.active{background:rgba(0,229,255,.08);color:var(--nex-cyan);border-color:rgba(0,229,255,.2)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item span:first-of-type{flex:1}
.wip-badge{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;
  padding:2px 5px;border-radius:3px;
  background:rgba(255,176,32,.12);color:var(--nex-amber);
  border:1px solid rgba(255,176,32,.28);
  text-transform:uppercase;
}
.wip-pulse{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--nex-amber);margin-right:6px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(255,176,32,.6);
  animation:wipPulse 2s infinite;
}
@keyframes wipPulse{
  0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)}
  70%{box-shadow:0 0 0 6px rgba(255,176,32,0)}
  100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}
}

.prop-card{
  margin-top:auto;
  background:var(--nex-bg-1);border:1px solid var(--nex-stroke);border-radius:12px;
  padding:16px;position:relative;
}
.prop-card h4{
  font-family:var(--font-display);font-weight:500;font-size:12px;
  color:var(--nex-text-hi);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:12px;padding-right:24px;
}
.prop-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px dashed rgba(31,42,54,.6);font-size:11px}
.prop-row:last-child{border-bottom:none}
.prop-row .k{color:var(--nex-text-low);font-family:var(--font-body)}
.prop-row .v{color:var(--nex-text-hi);font-family:var(--font-mono)}
.prop-row .v.ok{color:var(--nex-green)}

/* ───── Card + help dot ───── */
.card{
  background:var(--nex-bg-1);border:1px solid var(--nex-stroke);border-radius:16px;
  padding:20px;position:relative;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:rgba(31,42,54,.9)}
.card-title{
  font-family:var(--font-display);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--nex-text-mid);
  margin-bottom:14px;padding-right:32px;
}
.card-subtitle{font-family:var(--font-mono);font-size:11px;color:var(--nex-text-low);margin-top:6px}

.help-dot{
  position:absolute;top:16px;right:16px;
  width:18px;height:18px;border-radius:50%;
  background:var(--nex-bg-2);border:1px solid var(--nex-stroke);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:500;font-size:10px;color:var(--nex-text-low);
  cursor:help;transition:all .15s;
  z-index:5;
}
.help-dot:hover{border-color:var(--nex-cyan);color:var(--nex-cyan);box-shadow:var(--glow-cyan)}

.help-popover{
  position:fixed;width:300px;
  background:var(--nex-bg-2);border:1px solid rgba(0,229,255,.4);border-radius:12px;
  padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.7),0 0 0 1px rgba(0,229,255,.05) inset;
  z-index:200;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .15s,transform .15s;
}
.help-popover.show{opacity:1;transform:translateY(0);pointer-events:auto}
.help-popover h4{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--nex-cyan);margin-bottom:8px;letter-spacing:.02em}
.help-popover p{font-size:12px;line-height:1.55;color:var(--nex-text-hi);margin-bottom:8px}
.help-popover p.why{font-size:11px;color:var(--nex-text-mid);border-top:1px solid var(--nex-stroke);padding-top:8px;margin-top:4px;margin-bottom:0}

/* ───── Rows ───── */
.row{display:grid;gap:20px;margin-bottom:20px}
.row.r1{grid-template-columns:repeat(6,1fr)}
.row.r2{grid-template-columns:7fr 5fr}
.row.r3{grid-template-columns:1fr 1fr}
.row.r4{grid-template-columns:repeat(3,1fr)}
.row.r5{grid-template-columns:1fr 1fr 1fr 2fr}
.row.r6{grid-template-columns:1fr 1fr}

/* ───── Gauge ───── */
.gauge{height:158px;padding:16px 14px 14px;display:flex;flex-direction:column}
.gauge .g-title{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-low);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.gauge svg{flex:1;width:100%;overflow:visible}
.gauge .val{font-family:var(--font-mono);font-weight:500;font-size:24px;color:var(--nex-text-hi);letter-spacing:-.01em;line-height:1}
.gauge .unit{font-family:var(--font-mono);font-size:12px;color:var(--nex-text-mid);margin-left:3px}
.gauge .delta{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);margin-top:4px;letter-spacing:.02em}
.gauge .delta.good{color:var(--nex-green)}
.gauge .delta.warn{color:var(--nex-amber)}

/* ───── Chart canvas wrapper ───── */
.chart-box{position:relative;width:100%}
.chart-box.h300{height:300px}
.chart-box.h260{height:260px}
.chart-box.h220{height:220px}
.chart-box.h200{height:200px}
.chart-box.h180{height:180px}

/* ───── PMVst heatmap ───── */
.pmv-heatmap{display:grid;gap:2px}
.pmv-row{display:grid;grid-template-columns:32px repeat(24,1fr);gap:2px;align-items:center}
.pmv-label{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);text-align:right;padding-right:6px}
.pmv-cell{aspect-ratio:1/1;border-radius:2px;cursor:pointer;transition:transform .1s,outline .1s}
.pmv-cell:hover{transform:scale(1.5);outline:1px solid var(--nex-text-hi);z-index:2;position:relative}
.pmv-hour-axis{display:grid;grid-template-columns:32px repeat(24,1fr);gap:2px;margin-top:4px}
.pmv-hour-axis div{font-family:var(--font-mono);font-size:9px;color:var(--nex-text-low);text-align:center}
.pmv-legend{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid)}
.pmv-legend .bar{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#FF4D5E,#FFB020,#00FF88,#FFB020,#FF4D5E)}

/* ───── Floorplan ───── */
.floorplan{position:relative}
.floorplan .floor-wrap{display:flex;flex-direction:column;gap:20px;padding-top:8px}
.floorplan svg{display:block;width:100%;height:auto}
.floor-badge{
  position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);
  background:var(--nex-bg-2);padding:2px 8px;border-radius:4px;border:1px solid var(--nex-stroke);
  z-index:3;
}
.sensor-dot{animation:pulse-dot 1.8s infinite ease-in-out}

/* ───── Sensor popover ───── */
.sens-pop{
  position:absolute;width:220px;background:var(--nex-bg-2);
  border:1px solid rgba(0,229,255,.4);border-radius:10px;padding:12px;
  font-family:var(--font-mono);font-size:11px;color:var(--nex-text-hi);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  z-index:100;pointer-events:none;
  opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;
}
.sens-pop.show{opacity:1;transform:translateY(0)}
.sens-pop .sp-head{color:var(--nex-cyan);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--nex-stroke);font-size:10px;letter-spacing:.08em}
.sens-pop .sp-row{display:flex;justify-content:space-between;padding:2px 0}
.sens-pop .sp-row .k{color:var(--nex-text-mid)}
.sens-pop .sp-row .v{color:var(--nex-text-hi)}

/* ───── Scatter side panel ───── */
.scatter-side{
  position:absolute;top:48px;right:20px;width:140px;
  background:rgba(19,26,34,.9);border:1px solid var(--nex-stroke);border-radius:8px;
  padding:10px;font-family:var(--font-mono);font-size:10px;
  z-index:3;
}
.scatter-side .sp-row{display:flex;justify-content:space-between;padding:2px 0;color:var(--nex-text-mid)}
.scatter-side .sp-row .v{color:var(--nex-text-hi)}
.scatter-side .sp-row .v.mag{color:var(--nex-magenta)}
.scatter-side .sp-row .v.grn{color:var(--nex-green)}

/* ───── Dropdown / toggle ───── */
.seg{display:inline-flex;background:var(--nex-bg-2);border:1px solid var(--nex-stroke);border-radius:6px;padding:2px;font-family:var(--font-mono);font-size:10px;gap:0}
.seg button{background:none;border:none;color:var(--nex-text-mid);padding:4px 8px;cursor:pointer;border-radius:4px;font-family:inherit;font-size:inherit;transition:all .12s}
.seg button.active{background:var(--nex-bg-1);color:var(--nex-cyan);box-shadow:inset 0 0 0 1px rgba(0,229,255,.3)}
.seg button:hover:not(.active){color:var(--nex-text-hi)}

.sel{
  background:var(--nex-bg-2);border:1px solid var(--nex-stroke);border-radius:6px;
  color:var(--nex-text-hi);padding:4px 8px;font-family:var(--font-mono);font-size:10px;
  cursor:pointer;outline:none;
}
.sel:focus{border-color:var(--nex-cyan)}

.card-head-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-right:32px;gap:8px}
.card-head-row .card-title{margin-bottom:0;padding-right:0}

/* ───── Donut ───── */
.donut-box{display:flex;flex-direction:column;align-items:center;gap:8px}
.donut-box svg{width:140px;height:140px}
.donut-center{position:relative}
.donut-center-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center-val .v{font-family:var(--font-mono);font-size:18px;color:var(--nex-text-hi);font-weight:500}
.donut-center-val .u{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid)}
.donut-legend{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);width:100%}
.donut-legend-row{display:flex;justify-content:space-between;padding:2px 0}
.donut-legend-row .sw{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px}
.donut-legend-row .n{color:var(--nex-text-hi)}

/* ───── Geo ───── */
#leaflet-map{height:240px;width:100%;border-radius:10px;border:1px solid var(--nex-stroke)}
.geo-badge{position:absolute;top:60px;left:32px;z-index:500;background:rgba(19,26,34,.85);border:1px solid var(--nex-stroke);border-radius:6px;padding:6px 10px;font-family:var(--font-mono);font-size:10px;color:var(--nex-text-hi);backdrop-filter:blur(4px)}
.geo-side{font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.geo-side div{background:var(--nex-bg-2);padding:6px 10px;border-radius:6px;border:1px solid var(--nex-stroke)}
.geo-side div .v{color:var(--nex-cyan)}
.leaflet-container{background:var(--nex-bg-0) !important}

/* ───── Ranking bar ───── */
.rank-row{display:grid;grid-template-columns:32px 1fr 56px;gap:10px;align-items:center;padding:6px 0}
.rank-row .lab{font-family:var(--font-mono);font-size:11px;color:var(--nex-text-hi)}
.rank-row .bar-outer{height:10px;background:var(--nex-bg-2);border-radius:2px;overflow:hidden}
.rank-row .bar-inner{height:100%;background:var(--nex-cyan);border-radius:2px;transition:width 600ms ease-out}
.rank-row .bar-inner.peak{background:var(--nex-magenta);box-shadow:var(--glow-amber)}
.rank-row .val{font-family:var(--font-mono);font-size:11px;color:var(--nex-text-mid);text-align:right}

/* ───── Live power big number ───── */
.live-big{font-family:var(--font-mono);font-weight:500;font-size:30px;color:var(--nex-cyan);letter-spacing:-.02em;line-height:1}
.live-big .u{font-size:14px;color:var(--nex-text-mid);font-weight:400}
.live-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--nex-text-mid);background:var(--nex-bg-2);border:1px solid var(--nex-stroke);border-radius:10px;padding:3px 8px;margin-top:6px}
.live-pill span.sep{color:var(--nex-stroke-2)}

/* ───── Footer ───── */
.footer{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--nex-text-low);
  padding:16px 0;border-top:1px solid var(--nex-stroke);margin-top:24px;
}

/* ───── Tooltip (data tooltip on hover) ───── */
.tt{
  position:fixed;pointer-events:none;z-index:400;
  background:var(--nex-bg-2);border:1px solid var(--nex-cyan);
  border-radius:6px;padding:6px 10px;
  font-family:var(--font-mono);font-size:11px;color:var(--nex-text-hi);
  box-shadow:0 4px 16px rgba(0,0,0,.6);
  opacity:0;transition:opacity .1s;
  white-space:nowrap;
}
.tt.show{opacity:1}

/* utilities */
.flex{display:flex}.col{flex-direction:column}.ac{align-items:center}.jc-b{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mono{font-family:var(--font-mono)}
.cyan{color:var(--nex-cyan)}.green{color:var(--nex-green)}.amber{color:var(--nex-amber)}.mag{color:var(--nex-magenta)}.red{color:var(--nex-red)}
.mid{color:var(--nex-text-mid)}.low{color:var(--nex-text-low)}