/* -- DIAGRAM WRAPPER ---------------------------------------------------------- */
.diag-wrap{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:.5rem;backdrop-filter:blur(8px);margin-bottom:.85rem;overflow:hidden}
.diag-wrap svg{display:block;width:100%;height:auto}
/* SVG node cards */
.nc{fill:var(--node-bg);stroke-width:2;filter:drop-shadow(0 2px 8px var(--shadow));
    transition:filter .6s ease, stroke .6s ease}
.nc-solar  {stroke:var(--solar)}
.nc-grid   {stroke:var(--grid-in)}
.nc-gas    {stroke:var(--gas)}
.nc-ev     {stroke:var(--ev)}
.nc-house  {stroke:var(--house);transition:filter .6s ease, stroke .6s ease}
.nc-bat    {stroke:var(--bat-chg);transition:filter .6s ease, stroke .6s ease}
.nc-bathub {stroke:var(--bat-chg);transition:filter .6s ease, stroke .6s ease}
/* glow when active — vloeiende overgang via transition op filter */
.nc-solar.glow   {filter:drop-shadow(0 0 10px var(--solar))    drop-shadow(0 2px 4px var(--shadow))}
.nc-grid.glow    {filter:drop-shadow(0 0 10px var(--grid-in))  drop-shadow(0 2px 4px var(--shadow))}
.nc-ev.glow      {filter:drop-shadow(0 0 10px var(--ev))       drop-shadow(0 2px 4px var(--shadow))}
.nc-house.glow   {filter:drop-shadow(0 0 14px var(--house))    drop-shadow(0 2px 4px var(--shadow))}
.nc-house.glow-lo{filter:drop-shadow(0 0 14px var(--house-lo)) drop-shadow(0 2px 4px var(--shadow))}
.nc-house.glow-hi{filter:drop-shadow(0 0 14px var(--house-hi)) drop-shadow(0 2px 4px var(--shadow))}
.nc-bat.glow     {filter:drop-shadow(0 0 12px var(--bat-chg))  drop-shadow(0 2px 4px var(--shadow))}
.nc-bat.glow-dis {filter:drop-shadow(0 0 12px var(--bat-dis))  drop-shadow(0 2px 4px var(--shadow))}
.nc-bathub.glow  {filter:drop-shadow(0 0 12px var(--bat-chg))  drop-shadow(0 2px 4px var(--shadow))}
.nc-bathub.glow-dis{filter:drop-shadow(0 0 12px var(--bat-dis)) drop-shadow(0 2px 4px var(--shadow))}
/* node text */
.nt-lbl{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;fill:var(--txt2);text-anchor:middle}
.nt-val{font-family:'Roboto Mono',monospace;font-size:16px;font-weight:700;text-anchor:middle}
.nt-sub{font-family:'Inter',sans-serif;font-size:11px;fill:var(--txt2);text-anchor:middle}
.nt-ico{font-size:22px;text-anchor:middle;dominant-baseline:central}
/* flow base lines */
.fl-base{fill:none;stroke:var(--line-idle);stroke-width:2;stroke-linecap:round}
.fl-solid{fill:none;stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .5s,stroke .3s}
/* -- STALE NODE --------------------------------------------------------------- */
.nc-stale { stroke:#f59e0b !important; opacity:.55 }
/* -- KEYFRAMES ---------------------------------------------------------------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes bat-chg-pulse {
  0%,100%{ opacity:.72 }
  50%    { opacity:1   }
}
@keyframes bat-dis-pulse {
  0%,100%{ opacity:.72 }
  50%    { opacity:.18 }
}

/* ══════════════════════════════════════════════════════════════════════
   FUTURISTIC VIEW  —  activeer met #main-svg.futuristic
   ══════════════════════════════════════════════════════════════════════ */

/* Verleng bestaande card-transities zodat de switch vloeiend gaat */
.nc          { transition: fill .7s ease, stroke .7s ease, stroke-width .7s ease, filter .7s ease }
.nt-lbl      { transition: fill .5s ease, letter-spacing .5s ease, font-size .5s ease }
.nt-sub      { transition: fill .5s ease }
.fl-base     { transition: stroke .7s ease, stroke-width .7s ease }
.diag-wrap   { transition: background .7s ease, border-color .7s ease, box-shadow .7s ease }

/* Elementen alleen zichtbaar in één mode */
.fu-only { opacity:0; pointer-events:none; transition:opacity .7s ease }
#main-svg.futuristic .fu-only { opacity:1; pointer-events:all }

/* ── Diag-wrap in futuristic mode ──────────────────────────────────── */
body.futuristic .diag-wrap {
  background: rgba(1,4,14,.98);
  border-color: rgba(0,212,255,.14);
  box-shadow: 0 0 60px rgba(0,212,255,.06) inset;
}

/* ── Cards: vulling en rand per type ───────────────────────────────── */
#main-svg.futuristic .nc                 { fill:rgba(1,6,16,.62) !important; stroke-width:1.5 !important }
#main-svg.futuristic .nc-solar           { stroke:#39ff14 !important }
#main-svg.futuristic .nc-house           { stroke:#ff7a35 !important; stroke-width:2 !important }
#main-svg.futuristic .nc-grid            { stroke:#00d4ff !important }
#main-svg.futuristic .nc-gas             { stroke:#ff9500 !important }
#main-svg.futuristic .nc-ev              { stroke:#c084fc !important }
#main-svg.futuristic .nc-bat             { stroke:#22d3ee !important }
#main-svg.futuristic .nc-bathub          { stroke:#22d3ee !important; stroke-width:2 !important }

/* ── Glow-overrides (sterker in futuristic mode) ───────────────────── */
#main-svg.futuristic .nc-solar.glow      { filter:drop-shadow(0 0 14px #39ff14cc) drop-shadow(0 0 28px #39ff1422) !important }
#main-svg.futuristic .nc-house.glow      { filter:drop-shadow(0 0 14px #ff7a35cc) drop-shadow(0 0 28px #ff7a3522) !important }
#main-svg.futuristic .nc-house.glow-lo   { filter:drop-shadow(0 0 14px #39ff14cc) drop-shadow(0 0 28px #39ff1422) !important }
#main-svg.futuristic .nc-house.glow-hi   { filter:drop-shadow(0 0 14px #ff3333cc) drop-shadow(0 0 28px #ff333322) !important }
#main-svg.futuristic .nc-grid.glow       { filter:drop-shadow(0 0 12px #00d4ffcc) drop-shadow(0 0 24px #00d4ff22) !important }
#main-svg.futuristic .nc-bat.glow        { filter:drop-shadow(0 0 12px #22d3eecc) drop-shadow(0 0 24px #22d3ee22) !important }
#main-svg.futuristic .nc-bat.glow-dis    { filter:drop-shadow(0 0 12px #ff7a35cc) drop-shadow(0 0 24px #ff7a3522) !important }
#main-svg.futuristic .nc-bathub.glow     { filter:drop-shadow(0 0 14px #22d3eecc) drop-shadow(0 0 28px #22d3ee22) !important }
#main-svg.futuristic .nc-bathub.glow-dis { filter:drop-shadow(0 0 14px #ff7a35cc) drop-shadow(0 0 28px #ff7a3522) !important }
#main-svg.futuristic .nc-ev.glow         { filter:drop-shadow(0 0 12px #c084fccc) drop-shadow(0 0 24px #c084fc22) !important }

/* ── Flow-basislijnen ──────────────────────────────────────────────── */
#main-svg.futuristic .fl-base { stroke:#040e22 !important; stroke-width:3 !important }

/* ── Node tekst ────────────────────────────────────────────────────── */
#main-svg.futuristic .nt-lbl { fill:#1e5a80 !important; letter-spacing:.12em; font-size:9px !important }
#main-svg.futuristic .nt-sub { fill:#142d45 !important }


/* ══════════════════════════════════════════════════════════════════════
   VANDAAG-STRIP
   ══════════════════════════════════════════════════════════════════════ */
.today-strip {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: .85rem;
  overflow: hidden;
}
.ts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 1rem;
  border-bottom: 1px solid var(--border);
}
.ts-title   { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--txt2) }
.ts-updated { font-family: 'Roboto Mono', monospace; font-size: .65rem; color: var(--txt2); opacity: .6 }
.ts-items {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.ts-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  flex: 1;
  min-width: 100px;
  position: relative;
  border-right: 1px solid var(--border);
}
.ts-item:last-child { border-right: none }
.ts-item::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ts-ac, transparent);
  border-radius: 0;
  transition: background .4s;
}
.ts-icon  { font-size: 1.1rem; margin-bottom: .15rem }
.ts-val   {
  font-family: 'Roboto Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ts-ac, var(--txt));
  transition: color .4s;
}
.ts-lbl   { font-size: .64rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .08em; margin-top: .12rem }

/* Pulse-animatie bij update */
@keyframes ts-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.ts-val.updated { animation: ts-pulse .35s ease }

@media(max-width:700px) { .ts-item { padding:.5rem .8rem; min-width:80px } .ts-val { font-size:.9rem } }


/* ══════════════════════════════════════════════════════════════════════
   SCENE VIEW
   ══════════════════════════════════════════════════════════════════════ */
#scene-wrap {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: .85rem;
}

/* -- tekst direct op foto (paint-order trick: stroke achter fill) ------- */
/* Geen achtergrond-rect. De donkere stroke maakt tekst leesbaar op foto. */
.sc-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  fill: rgba(255,255,255,.55);
  text-anchor: middle;
  letter-spacing: .14em;
  paint-order: stroke;
  stroke: rgba(0,0,0,.92);
  stroke-width: 3;
  stroke-linejoin: round;
}
.sc-val {
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0,0,0,.94);
  stroke-width: 6;
  stroke-linejoin: round;
}
.sc-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  fill: rgba(255,255,255,.62);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0,0,0,.90);
  stroke-width: 4;
  stroke-linejoin: round;
}

/* -- sonar ring (pulserende cirkel rond indicator) ---------------------- */
@keyframes sc-ring-pulse {
  0%   { transform: scale(1);   opacity: .42 }
  100% { transform: scale(2.8); opacity: 0   }
}
.sc-ring {
  animation: sc-ring-pulse 2.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}