/* Look after EnergyWizard's webdashboard (github.com/murre87/energywizard): same token names and values,
   glass cards, sidebar + scrolling content, background that shifts with the time of day. Chart series
   colours are those hues stepped to pass the categorical palette checks in both themes. */
:root {
  --bg: #070b14; --card: rgba(255, 255, 255, .055); --card2: rgba(255, 255, 255, .09); --line: rgba(255, 255, 255, .10);
  --txt: #f3f6fb; --mut: #8e9bb5; --acc: #22d3a0; --acc2: #38bdf8; --warn: #fbbf24; --bad: #f87171;
  --surface: #111725; --grid: rgba(255, 255, 255, .07); --axis: rgba(255, 255, 255, .18);
  --r: 18px; --r-sm: 12px; --sidebar-w: 236px; --shadow: 0 10px 30px -14px rgba(0, 0, 0, .55);
  /* entities: fixed categorical slot order, the same everywhere */
  --c-grid: #0284c7; --c-pv: #d97706; --c-battery: #0d9488; --c-load: #8b5cf6; --c-car: #ec4899;
  /* what the plan does in a quarter, and price levels (EnergyWizard's plan clock colours) */
  --a-charge: #2dd4bf; --a-discharge: #f59e0b; --a-hold: #64748b; --p-cheap: #3fb68b; --p-mid: #7c8aa0; --p-dear: #e0675e; --sun: #facc15;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f1f4fa; --card: rgba(255, 255, 255, .86); --card2: #fff; --line: rgba(15, 23, 42, .09);
    --txt: #0f172a; --mut: #5b6b85; --acc: #0ea57f; --acc2: #0284c7; --surface: #fff;
    --grid: rgba(15, 23, 42, .07); --axis: rgba(15, 23, 42, .2); --shadow: 0 10px 26px -16px rgba(15, 23, 42, .18);
    --c-load: #7c3aed; --c-car: #db2777; --a-hold: #94a3b8; --p-mid: #94a3b8;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f1f4fa; --card: rgba(255, 255, 255, .86); --card2: #fff; --line: rgba(15, 23, 42, .09);
  --txt: #0f172a; --mut: #5b6b85; --acc: #0ea57f; --acc2: #0284c7; --surface: #fff;
  --grid: rgba(15, 23, 42, .07); --axis: rgba(15, 23, 42, .2); --shadow: 0 10px 26px -16px rgba(15, 23, 42, .18);
  --c-load: #7c3aed; --c-car: #db2777; --a-hold: #94a3b8; --p-mid: #94a3b8;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #070b14; --card: rgba(255, 255, 255, .055); --card2: rgba(255, 255, 255, .09); --line: rgba(255, 255, 255, .10);
  --txt: #f3f6fb; --mut: #8e9bb5; --acc: #22d3a0; --acc2: #38bdf8; --surface: #111725;
  --grid: rgba(255, 255, 255, .07); --axis: rgba(255, 255, 255, .18); --shadow: 0 10px 30px -14px rgba(0, 0, 0, .55);
  --c-load: #8b5cf6; --c-car: #ec4899; --a-hold: #64748b; --p-mid: #7c8aa0;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--txt);
  font: 15px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(34, 211, 160, .12), transparent 60%),
    radial-gradient(900px 560px at 92% 0%, rgba(56, 189, 248, .09), transparent 55%),
    var(--bg);
}
h1, h2, h3 { letter-spacing: -.01em; margin: 0; }
::selection { background: rgba(34, 211, 160, .3); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* glass: frosted cards over soft colour blobs */
html[data-glass] body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; filter: blur(46px);
  background:
    radial-gradient(40% 32% at 18% 14%, rgba(34, 211, 160, .42), transparent 70%),
    radial-gradient(38% 30% at 86% 30%, rgba(56, 189, 248, .38), transparent 70%),
    radial-gradient(44% 34% at 30% 88%, rgba(168, 85, 247, .30), transparent 70%);
}
html[data-glass] .card, html[data-glass] .stat, html[data-glass] .sidebar, html[data-glass] .topbar {
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255, 255, 255, .16); box-shadow: 0 10px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
:root[data-theme="light"][data-glass] :is(.card, .stat, .sidebar, .topbar) {
  background: rgba(255, 255, 255, .52); border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme])[data-glass] :is(.card, .stat, .sidebar, .topbar) {
    background: rgba(255, 255, 255, .52); border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}

/* the background follows the time of day */
html[data-ambient] body { transition: background .8s; }
html[data-ambient][data-tod="morning"] body { background: radial-gradient(1100px 620px at 15% -8%, rgba(251, 146, 60, .30), transparent 62%), radial-gradient(900px 520px at 95% 8%, rgba(244, 114, 182, .18), transparent 62%), var(--bg); }
html[data-ambient][data-tod="day"] body { background: radial-gradient(1100px 620px at 50% -12%, rgba(56, 189, 248, .30), transparent 62%), radial-gradient(800px 500px at 100% 20%, rgba(34, 211, 160, .14), transparent 62%), var(--bg); }
html[data-ambient][data-tod="evening"] body { background: radial-gradient(1100px 620px at 85% -8%, rgba(249, 115, 22, .32), transparent 62%), radial-gradient(1000px 580px at 5% 12%, rgba(168, 85, 247, .24), transparent 62%), var(--bg); }
html[data-ambient][data-tod="night"] body { background: radial-gradient(1100px 620px at 50% -10%, rgba(79, 70, 229, .30), transparent 62%), radial-gradient(700px 400px at 10% 30%, rgba(30, 64, 175, .18), transparent 62%), var(--bg); }

/* shell: sidebar + scrolling content */
#shell {
  display: grid; min-height: 100dvh;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: 60px 1fr;
  grid-template-areas: "side top" "side main";
}
.topbar {
  grid-area: top; position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: var(--card); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 160, .45); } 50% { box-shadow: 0 0 0 6px rgba(34, 211, 160, 0); } }
.status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 8px; padding: 0; list-style: none; min-width: 0; }
.status li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--mut); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.status .icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }
.status .good .icon { background: #10b981; }
.status .critical .icon { background: #ef4444; }
.status .pending .icon { background: var(--mut); }
.updated { margin-left: auto; color: var(--mut); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.icobtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card2); color: var(--txt);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: transform .12s, border-color .12s;
}
.icobtn:hover { border-color: rgba(34, 211, 160, .4); transform: translateY(-1px); }
#menubtn { display: none; }

.sidebar {
  grid-area: side; display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; overflow-y: auto;
  background: var(--card); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100dvh;
}
.navitem {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--mut); text-align: left; text-decoration: none;
  font: inherit; font-size: .91rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.navitem:hover { background: var(--line); color: var(--txt); }
.navitem.on { background: linear-gradient(90deg, rgba(34, 211, 160, .16), rgba(34, 211, 160, .04)); color: var(--acc); font-weight: 700; }
.navitem.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--acc); }
#backdrop { display: none; }

main { grid-area: main; padding: 26px 30px 64px; min-width: 0; }
main > * { animation: fadeUp .3s ease both; }
.page { display: grid; gap: 16px; max-width: 1240px; }
.page-title { font-size: 1.35rem; font-weight: 800; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card {
  min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow);
}
.card h2 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.card h3 { font-size: .92rem; font-weight: 700; margin: 16px 0 6px; }
.note { color: var(--mut); font-size: .85rem; line-height: 1.5; margin: 6px 0 0; }
.placeholder { color: var(--mut); font-size: .9rem; padding: 36px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); }

/* stat tiles */
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 17px 19px; min-width: 0;
  border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow);
}
.stat .l { color: var(--mut); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat .v { font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.stat .v small { font-size: .85rem; font-weight: 600; color: var(--mut); margin-left: 3px; }
.stat .s { color: var(--mut); font-size: .82rem; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--line); color: var(--txt); vertical-align: middle; }
.badge.on { background: rgba(34, 211, 160, .16); color: var(--acc); }
.badge.warn { background: rgba(251, 191, 36, .16); color: var(--warn); }
.badge.bad { background: rgba(248, 113, 113, .16); color: var(--bad); }

/* decision banner */
.banner .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1.12rem; font-weight: 700; }
.banner .rest { margin: 6px 0 0; padding: 0; list-style: none; color: var(--mut); font-size: .86rem; }

/* live flow */
.flow svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
.flow .node rect.box { fill: var(--card2); stroke: var(--line); }
.flow .node rect.bar { rx: 2; }
.flow .name { fill: var(--mut); font-size: 13px; font-weight: 600; }
.flow .value { fill: var(--txt); font-size: 24px; font-weight: 800; }
.flow .word { fill: var(--mut); font-size: 13px; }
.flow .link { fill: none; stroke: var(--line); stroke-width: 2; }
.flow .link.on { stroke-width: 2.5; }
.flow .pulse { r: 4; }

/* plan: clock + text and timeline */
.plan-body { display: grid; gap: 20px; align-items: center; }
@media (min-width: 1000px) { .plan-body { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); } }
.clock { max-width: 400px; width: 100%; margin: 0 auto; }
.clock svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.clock svg:focus { outline: none; }
.clock svg:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 50%; }
.clock .hour { fill: var(--mut); font-size: 13px; font-variant-numeric: tabular-nums; }
.clock .face { fill: var(--card2); stroke: var(--line); }
.clock .face-inner { fill: var(--surface); stroke: var(--line); }
.clock .ring { fill: none; stroke: var(--line); stroke-width: 6; }
.clock .hand { stroke: var(--txt); stroke-width: 3; stroke-linecap: round; }
.clock .knob { fill: var(--txt); stroke: var(--bg); stroke-width: 2; }
.clock .knob.live { animation: knob 2s ease-in-out infinite; }
@keyframes knob { 0%, 100% { r: 7; } 50% { r: 9; } }
.clock .price { fill: var(--txt); font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.clock .unit, .clock .when, .clock .doing { fill: var(--mut); font-size: 13px; }
.clock .doing { fill: var(--txt); font-weight: 600; }
.clock-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.plan-text { font-size: 1rem; line-height: 1.5; margin: 0 0 18px; }
.plan-text b { font-weight: 700; }

.timeline { margin-top: 6px; }
.timeline .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; margin: 10px 0; }
.timeline .name { color: var(--mut); font-size: .86rem; font-weight: 600; }
.timeline .track { position: relative; height: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.timeline .seg { position: absolute; top: 0; bottom: 0; }
.timeline .ticks { display: flex; justify-content: space-between; margin-left: 108px; color: var(--mut); font-size: .76rem; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; padding: 0; list-style: none; color: var(--mut); font-size: .8rem; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .key { width: 16px; height: 3px; border-radius: 2px; }
.legend .key.box { width: 11px; height: 11px; border-radius: 3px; }
.legend .key.band { width: 12px; height: 10px; border-radius: 2px; opacity: .4; }

.seg-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg-buttons button {
  min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2);
  color: var(--txt); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.seg-buttons button[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); background: rgba(34, 211, 160, .12); }

/* charts */
.chart { position: relative; transition: opacity .2s; }
.chart.loading { opacity: .5; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg:focus { outline: none; }
.chart svg:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { fill: var(--mut); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: .14; }
.chart .band { opacity: .16; }
.chart .now-line { stroke: var(--mut); stroke-width: 1; shape-rendering: crispEdges; }
.chart .now-label { fill: var(--mut); font-size: 11px; }
.chart .crosshair { stroke: var(--mut); stroke-width: 1; shape-rendering: crispEdges; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .empty { fill: var(--mut); font-size: 13px; }
.tooltip {
  position: absolute; top: 0; z-index: 2; min-width: 150px; padding: 8px 10px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: .8rem;
}
.tooltip[hidden] { display: none; }
.tooltip .time { color: var(--mut); margin-bottom: 4px; }
.tooltip .row { display: flex; align-items: center; gap: 8px; }
.tooltip .key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.tooltip .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.tooltip .l, .tooltip .extra { color: var(--mut); }

/* key-value lists, tables, bar rows */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: .88rem; }
.kv dt { color: var(--mut); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title .key { width: 16px; height: 3px; border-radius: 2px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--mut); font-weight: 600; }
tr.total td { font-weight: 700; }
.scroll { max-height: 420px; overflow: auto; }
.scroll th { position: sticky; top: 0; background: var(--surface); }
th .key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.barrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 84px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.barrow:last-child { border-bottom: 0; }
.barrow .name { color: var(--mut); }
.barrow .track { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.barrow .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.barrow .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

details > summary { cursor: pointer; color: var(--mut); font-size: .9rem; }
.steps { margin: 8px 0 0; padding-left: 20px; color: var(--txt); font-size: .88rem; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .dot, .clock .knob.live { animation: none; }
  main > * { animation: none; }
}

@media (max-width: 860px) {
  #shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  #menubtn { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 8px; }
  .status { display: none; }
  main { padding: 16px 16px 48px; }
  .sidebar {
    position: fixed; top: 60px; left: 0; bottom: 0; height: auto; z-index: 5; width: min(var(--sidebar-w), 82vw);
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow);
  }
  .sidebar.open { transform: none; }
  html .sidebar.open, html[data-glass] .sidebar.open { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #backdrop.open { display: block; position: fixed; inset: 60px 0 0 0; z-index: 4; background: rgba(0, 0, 0, .5); }
  .barrow { grid-template-columns: 70px minmax(0, 1fr) 70px; }
  .timeline .row { grid-template-columns: 72px minmax(0, 1fr); }
  .timeline .ticks { margin-left: 84px; }
}