/* WeWins POC operator console — shared theme (no build step). */
:root{
  --bg:#0f1626; --bg2:#1f2a44; --card:#fff; --ink:#1c2230; --mut:#6b7388;
  --line:#e6eaf3; --accent:#3b82f6; --ok:#22c55e; --okbg:#dcfce7; --okink:#166534;
  --warn:#f59e0b; --warnbg:#fef3c7; --warnink:#92660b; --err:#ef4444; --errbg:#fee2e2; --errink:#b91c1c;
  --chgbg:#dbeafe; --chgink:#1e40af;
}
*{box-sizing:border-box}
body{font:14px/1.5 system-ui,-apple-system,sans-serif;margin:0;color:var(--ink);background:#eef1f7}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
code{background:#f0f2f8;padding:1px 5px;border-radius:4px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mut{color:var(--mut)}.err{color:var(--errink)}.right{margin-left:auto}.mono{font-family:ui-monospace,monospace}

header{background:var(--bg);color:#fff;padding:10px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header h1{font-size:16px;margin:0;font-weight:700}
header nav{display:flex;gap:6px}
header nav a{color:#c7d6f5;padding:4px 10px;border-radius:6px}
header nav a.active,header nav a:hover{background:#2b3858;color:#fff;text-decoration:none}
header input{padding:6px 8px;border-radius:6px;border:1px solid #44506e;background:#22304e;color:#fff;width:320px}
header button{padding:6px 12px;border:0;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer}
header button:hover{filter:brightness(1.08)}
#status{font-size:12px;color:#9cc2ff}

main{max-width:1180px;margin:18px auto;padding:0 16px}
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:130px;flex:1}
.kpi .n{font-size:26px;font-weight:700;line-height:1.1}
.kpi .l{color:var(--mut);font-size:12px;margin-top:2px}
.kpi .d{font-size:12px;margin-top:2px}.up{color:var(--okink)}.down{color:var(--errink)}

section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:16px}
section>h2{font-size:14px;margin:0 0 10px;color:#33405c;border-bottom:1px solid var(--line);padding-bottom:8px;display:flex;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:12px}
tr.click{cursor:pointer}tr.click:hover{background:#f0f5ff}
tr.downlink{background:#dde4f1}  /* cloud→device messages stand out darker */

.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.b-on{background:var(--okbg);color:var(--okink)}.b-off{background:#f1f3f8;color:var(--mut)}
.b-warn{background:var(--warnbg);color:var(--warnink)}.b-err{background:var(--errbg);color:var(--errink)}
.b-chg{background:var(--chgbg);color:var(--chgink)}.b-info{background:#e0e7ff;color:#3730a3}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.on{background:var(--ok)}.dot.off{background:#cbd2e0}
.pill{padding:1px 7px;border-radius:8px;background:#eef1f7;font-size:11px;margin-right:4px;display:inline-block}

.map{height:320px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
/* chart container — canvas fills it; fixed height so layout is stable */
.chartbox{position:relative;height:240px}
.chartbox.sm{height:190px}
.chartbox.lg{height:300px}
/* inline time-window picker (segmented control) */
.winpick{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-left:auto}
.winpick button{border:0;background:#fff;color:var(--mut);padding:3px 10px;font-size:12px;cursor:pointer;border-left:1px solid var(--line)}
.winpick button:first-child{border-left:0}
.winpick button.on{background:var(--accent);color:#fff}
.winpick button.refresh{font-size:14px;line-height:1;padding:3px 9px}
.winpick button.refresh:hover{background:#f1f5f9;color:var(--accent)}
.legend-note{font-size:11px;color:var(--mut);margin:2px 0 8px}
.legend-note .mk{display:inline-block;width:18px;border-top:2px dashed #7c3aed;vertical-align:middle;margin:0 4px}
.empty{color:var(--mut);font-style:italic;padding:10px 2px}
.stream{height:260px;overflow:auto;background:#0f1626;color:#cbd5e1;border-radius:8px;padding:8px;
  font:12px/1.5 ui-monospace,monospace}
.stream .row{white-space:pre-wrap;border-bottom:1px solid #1e293b;padding:1px 0}
.stream .up{color:#86efac}.stream .down{color:#93c5fd}
.feed{max-height:300px;overflow:auto}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tiny{font-size:11px}
/* full payload — never trimmed; wraps and scrolls if long */
.payload{font:11px/1.4 ui-monospace,monospace;white-space:pre-wrap;word-break:break-all;
  max-width:620px;max-height:150px;overflow:auto;display:block}
input.f,select.f{padding:4px 6px;border:1px solid var(--line);border-radius:6px;font:inherit}
button.s{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
button.s:hover{background:#f0f5ff}