/* ═══════════════════════════════════════════════════════════════════
   SmartGrid Animation 2025 — Main Stylesheet
   Dark control-panel aesthetic, Prius-style energy flow animation
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:      #070c13;
  --bg2:     #0c1420;
  --bg3:     #111d2e;
  --border:  #192438;
  --text:    #6a8eaa;
  --texth:   #c5dff5;
  --textd:   #2d4158;

  /* Energy colours */
  --dc:     #ffb800;   /* DC electricity (PV output, BESS) */
  --ac:     #00e87a;   /* AC electricity (inverter bus, loads) */
  --heat:   #ff5252;   /* Thermal energy */
  --cool:   #4ecdc4;   /* Cooling */
  --h2:     #9966ff;   /* Hydrogen */
  --gimp:   #ff8c42;   /* Grid import */
  --gexp:   #00d4ff;   /* Grid export */
  --sensor: #66ee99;   /* Monitoring / sensors */

  --mono: 'Consolas','JetBrains Mono','Courier New',monospace;
}

html,body { height:100%; overflow:hidden; background:var(--bg); }
body { font-family:var(--mono); color:var(--texth); }

/* ── Loading ───────────────────────────────────────────────────── */
#loading {
  position:fixed; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; z-index:999;
}
.loading-title  { font-size:22px; color:var(--ac); letter-spacing:3px; }
.loading-subtitle { font-size:12px; color:var(--text); }
.loading-bar    { width:320px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.loading-fill   { height:100%; background:var(--ac); box-shadow:0 0 8px var(--ac);
                  animation:ld 1.8s ease-in-out infinite; }
.loading-text   { font-size:11px; color:var(--text); }
@keyframes ld {
  0%   { width:0%;  margin-left:0; }
  50%  { width:55%; margin-left:15%; }
  100% { width:0%;  margin-left:100%; }
}

/* ── App layout ────────────────────────────────────────────────── */
#app {
  display:flex; flex-direction:column;
  height:100vh; min-height:550px;
}

/* ── Header ────────────────────────────────────────────────────── */
#header {
  flex:0 0 auto;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:4px 12px; gap:14px;
  font-size:11px; overflow:hidden;
}
#header-title {
  font-size:13px; font-weight:700;
  color:var(--ac); letter-spacing:1px;
  white-space:nowrap;
}
.h-sep { width:1px; height:28px; background:var(--border); flex-shrink:0; }
.hblock { display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.hlabel { font-size:9px; color:var(--textd); text-transform:uppercase; letter-spacing:.5px; }
.hval   { font-size:12px; font-weight:700; color:var(--texth); }
.hval.green  { color:var(--ac); }
.hval.amber  { color:var(--dc); }
.hval.red    { color:var(--heat); }
.hval.blue   { color:var(--gexp); }
.hval.orange { color:var(--gimp); }
.hval.purple { color:var(--h2); }
.hspacer { flex:1; }

.legend {
  display:flex; gap:5px; align-items:center;
}
.lchip {
  font-size:9px; border-radius:3px;
  padding:2px 6px; border:1px solid;
  letter-spacing:.3px;
}
.lchip.dc    { color:var(--dc);   border-color:var(--dc);   background:#ffb80012; }
.lchip.ac    { color:var(--ac);   border-color:var(--ac);   background:#00e87a12; }
.lchip.heat  { color:var(--heat); border-color:var(--heat); background:#ff525212; }
.lchip.h2    { color:var(--h2);   border-color:var(--h2);   background:#9966ff12; }
.lchip.gimp  { color:var(--gimp); border-color:var(--gimp); background:#ff8c4212; }
.lchip.gexp  { color:var(--gexp); border-color:var(--gexp); background:#00d4ff12; }

#offgrid-badge {
  display:none;
  background:#ff111122; border:1px solid #ff2222;
  color:#ff4444; padding:3px 10px;
  border-radius:4px; font-size:11px;
  letter-spacing:1px; font-weight:700;
  animation:blink .7s step-start infinite;
}
#offgrid-badge.on { display:block; }
@keyframes blink { 50% { opacity:0; } }

/* ── Main SVG area ─────────────────────────────────────────────── */
#main {
  flex:1 1 auto; overflow:hidden; position:relative;
}
#main-svg {
  width:100%; height:100%;
  display:block;
}

/* ── SVG components ────────────────────────────────────────────── */
.comp-bg {
  fill:var(--bg2);
  stroke-width:1.5;
}
.comp-accent {
  opacity:.75;
}
.comp-name {
  font-size:10.5px; fill:var(--texth); font-weight:600;
  font-family:var(--mono);
}
.comp-sub {
  font-size:8.5px; fill:var(--textd);
  font-family:var(--mono);
}
.comp-val {
  font-size:12.5px; font-weight:700;
  font-family:var(--mono);
}
.comp-icon {
  font-size:17px; font-family:var(--mono);
}

.status-dot { transition:fill .35s; }
.sd-on   { fill:#00e87a; filter:drop-shadow(0 0 3px #00e87a88); }
.sd-off  { fill:#1c2d3d; }
.sd-warn { fill:var(--dc); filter:drop-shadow(0 0 3px var(--dc)); }
.sd-err  { fill:#ff3333; animation:blink .5s step-start infinite; }

/* Off-grid overlay */
#offgrid-overlay {
  position:absolute; inset:0; pointer-events:none;
  border:3px solid #ff111100;
  box-shadow:inset 0 0 60px #ff111100;
  transition:border-color .3s, box-shadow .3s;
}
#offgrid-overlay.on {
  border-color:#ff1111;
  box-shadow:inset 0 0 60px #ff111133;
}

/* ── Flow paths ────────────────────────────────────────────────── */
.flow-track {
  fill:none; stroke:var(--bg2); stroke-width:6;
  stroke-linecap:round; stroke-linejoin:round;
}
.flow-path {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:10 7;
  animation:fdash 1.2s linear infinite;
  transition:stroke-width .4s, opacity .4s;
}
.flow-path.off {
  animation:none;
  opacity:.07;
  stroke-dasharray:3 14;
}
/* type colour classes */
.fp-dc   { stroke:var(--dc);   filter:drop-shadow(0 0 2px var(--dc));   }
.fp-ac   { stroke:var(--ac);   filter:drop-shadow(0 0 2px var(--ac));   }
.fp-heat { stroke:var(--heat); filter:drop-shadow(0 0 2px var(--heat)); }
.fp-h2   { stroke:var(--h2);   filter:drop-shadow(0 0 2px var(--h2));   }
.fp-cool { stroke:var(--cool); }
.fp-gimp { stroke:var(--gimp); filter:drop-shadow(0 0 2px var(--gimp)); }
.fp-gexp { stroke:var(--gexp); filter:drop-shadow(0 0 2px var(--gexp)); }
.fp-elh  { stroke:var(--gimp); filter:drop-shadow(0 0 2px var(--gimp)); }

@keyframes fdash {
  to { stroke-dashoffset:-17; }
}

/* Zone labels */
.zone-label {
  font-size:9px; fill:var(--textd);
  text-transform:uppercase; letter-spacing:1.5px;
  font-family:var(--mono);
}

/* ── Bottom panel ──────────────────────────────────────────────── */
#bottom {
  flex:0 0 auto;
  background:var(--bg2);
  border-top:1px solid var(--border);
}

/* Timeline bar */
#timeline-bar {
  display:flex; align-items:center;
  padding:5px 10px; gap:8px;
  border-bottom:1px solid var(--border);
}
.tbtn {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:4px;
  padding:3px 9px; font-size:11px;
  cursor:pointer; font-family:var(--mono);
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.tbtn:hover { background:#1a2a3e; color:var(--texth); }
.tbtn.active { background:#003d22; border-color:var(--ac); color:var(--ac); }
#play-btn { width:30px; padding:3px 0; text-align:center; font-size:13px; }
.tbtn.jump { background:#0d1f14; border-color:#1e4030; color:#4ecdc4; }
.tbtn.jump:hover { background:#1a3a28; border-color:var(--ac); color:var(--ac); }
.tgroup-label { font-size:9px; color:var(--textd); white-space:nowrap; }

#tl-range {
  flex:1; appearance:none;
  height:3px; background:var(--border);
  border-radius:2px; outline:none; cursor:pointer;
}
#tl-range::-webkit-slider-thumb {
  appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--ac);
  box-shadow:0 0 6px var(--ac); cursor:pointer;
}
#tl-range::-moz-range-thumb {
  width:14px; height:14px; border:none;
  border-radius:50%; background:var(--ac);
  box-shadow:0 0 6px var(--ac); cursor:pointer;
}
.tl-info {
  font-size:11px; color:var(--text);
  min-width:200px; text-align:right; white-space:nowrap;
}

/* Year mini progress bar */
#year-bar {
  width:80px; height:6px; background:var(--border);
  border-radius:3px; position:relative; flex-shrink:0;
}
#year-fill {
  height:100%; background:#1e3a22;
  border-radius:3px; width:0%;
  transition:width .15s;
}
#year-cursor {
  position:absolute; top:-2px;
  width:2px; height:10px;
  background:var(--ac); border-radius:1px;
  box-shadow:0 0 4px var(--ac);
  left:0%; transform:translateX(-50%);
  transition:left .15s;
}

/* Charts row */
#charts-row {
  display:flex; height:110px; padding:4px 6px; gap:0;
}
.cpanel {
  flex:1; padding:3px 6px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}
.cpanel:last-child { border-right:none; }
.ctitle {
  font-size:8.5px; color:var(--textd);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:2px; flex-shrink:0;
}
.chart-wrap {
  flex:1; position:relative; min-height:0;
}
.chart-wrap canvas { position:absolute; inset:0; }