/* fwcloud dashboard v2 (spec: src/cloud/DASHBOARD_SPEC.md). Solarized light/dark tokens. */
:root { color-scheme:light; --bg:#eee8d5; --card:#fdf6e3; --fg:#586e75; --strong:#073642; --mut:#93a1a1; --line:#e2dbc6;
        --acc:#268bd2; --acc2:#dc322f; --acc3:#859900; --acc4:#d33682; --acc5:#2aa198; --warn:#b58900; --ok:#859900; --bad:#dc322f;
        --knob:#fdf6e3; --track:#b58900; --grid:rgba(88,110,117,.15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#002b36; --card:#073642; --fg:#93a1a1;
        --strong:#eee8d5; --mut:#657b83; --line:#0e4b59; --knob:#002b36; --track:#6c71c4; --grid:rgba(147,161,161,.12); } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#002b36; --card:#073642; --fg:#93a1a1; --strong:#eee8d5; --mut:#657b83;
        --line:#0e4b59; --knob:#002b36; --track:#6c71c4; --grid:rgba(147,161,161,.12); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, sans-serif; transition:background .25s, color .25s; }
header { padding:10px 16px 0; border-bottom:1px solid var(--line); display:flex; gap:12px 16px; align-items:center; flex-wrap:wrap; }
header h1 { font-size:16px; margin:0; color:var(--strong); } header .sub { color:var(--mut); font-size:12px; }
nav.tabs { display:flex; gap:2px; flex-basis:100%; order:3; overflow-x:auto; }
nav.tabs a { padding:8px 14px; color:var(--mut); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
nav.tabs a:hover { color:var(--fg); } nav.tabs a.on { color:var(--strong); border-bottom-color:var(--acc); }
main { padding:16px; display:grid; gap:16px; max-width:1500px; margin:auto; }
section.tab { display:none; gap:16px; } section.tab.on { display:grid; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; min-width:0; }
.card h2 { font-size:13px; font-weight:600; margin:0 0 8px; color:var(--strong); display:flex; gap:8px; align-items:center; }
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--mut); font-weight:500; font-size:12px; }
tbody tr.click { cursor:pointer; } tbody tr.click:hover td { background:color-mix(in srgb, var(--acc) 8%, transparent); }
tr.sel td { background:color-mix(in srgb, var(--acc) 14%, transparent); }
.ok { color:var(--ok); } .bad { color:var(--bad); } .mut { color:var(--mut); font-size:12px; } a { color:var(--acc); }
.controls { display:flex; gap:8px 12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
.field { display:inline-flex; flex-direction:column; gap:2px; font-size:11px; color:var(--mut); }
.field > .lbl { display:flex; gap:4px; align-items:center; padding-left:2px; }
.field input[type=number] { width:84px; }
button, select, input { font:inherit; font-size:13px; padding:4px 8px; border:1px solid var(--line); background:var(--card); color:var(--fg);
        border-radius:6px; transition:background .25s, border-color .25s, color .25s; }
button { cursor:pointer; } button.on { border-color:var(--acc); color:var(--acc); }
button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.seg { display:inline-flex; } .seg button { border-radius:0; margin-left:-1px; } .seg button:first-child { border-radius:6px 0 0 6px; margin-left:0; }
.seg button:last-child { border-radius:0 6px 6px 0; }
.help { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--mut); color:var(--mut);
        font-size:10px; font-weight:700; cursor:pointer; user-select:none; }
.help:hover, .help:focus-visible { color:var(--acc); border-color:var(--acc); outline:none; }
#pop { position:fixed; z-index:20; max-width:340px; background:var(--card); color:var(--fg); border:1px solid var(--acc); border-radius:8px;
       padding:10px 12px; font-size:12px; box-shadow:0 6px 24px rgba(0,0,0,.25); display:none; }
.readout { font:12px ui-monospace, monospace; color:var(--fg); display:flex; gap:6px 16px; flex-wrap:wrap; min-height:18px; }
.readout b { color:var(--strong); font-weight:600; }
.grid2 { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:12px; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } }
.stats td:nth-child(2) { text-align:right; }
.chart { width:100%; min-height:200px; }
.placeholder { padding:32px; text-align:center; color:var(--mut); }
.theme { margin-left:auto; position:relative; width:60px; height:30px; padding:0; border:1px solid var(--line); border-radius:999px;
         background:color-mix(in srgb, var(--track) 22%, var(--card)); cursor:pointer; flex:none; }
.theme .knob { position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:var(--knob);
         box-shadow:0 1px 3px rgba(0,0,0,.25); display:grid; place-items:center; color:var(--track);
         transition:transform .3s cubic-bezier(.4,1.4,.6,1), background .25s, color .25s; }
.theme[aria-checked="true"] .knob { transform:translateX(30px); }
.theme svg { width:16px; height:16px; } .theme .moon { display:none; }
.theme[aria-checked="true"] .sun { display:none; } .theme[aria-checked="true"] .moon { display:block; }
/* uPlot in Solarized */
.u-legend { font-size:12px; color:var(--fg); } .u-select { background:color-mix(in srgb, var(--acc) 18%, transparent); }
#sgcv { width:100%; height:300px; display:block; cursor:crosshair; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:8px 0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-top:8px; }
.tile { border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:grid; gap:4px; background:var(--card); }
.tile.amber { border-color:var(--warn); } .tile.red, .tile.alarm { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--card)); }
.tile .big { font-size:22px; font-weight:600; color:var(--strong); font-variant-numeric:tabular-nums; }
.tile canvas { width:100%; height:36px; } .tile .row { margin:0; } .tile input { width:70px; }
.tile .age.amber { color:var(--warn); } .tile .age.red { color:var(--bad); }
.log { font:12px ui-monospace, monospace; max-height:340px; overflow:auto; white-space:pre-wrap; margin:8px 0 0; padding:8px; border:1px solid var(--line); border-radius:6px; }
.wf { display:flex; align-items:center; gap:8px; margin:2px 0; } .wfn { width:110px; flex:none; font-size:12px; color:var(--mut); } .wfbar { display:block; height:12px; background:var(--acc); border-radius:2px; flex:none; } .wf .mut { margin-left:8px; } .warn { color:var(--warn); }