:root {
  --bg: #eef1f5; --card: #ffffff; --text: #1d2733; --muted: #6a7686; --line: #d9dee6; --accent: #1976d2;
  --tile: #ffffff; --tile-line: #cfd6df;
  --good: #2e7d32; --warn: #f9a825; --warn-text: #e65100; --alarm: #c62828; --bad: #6a1b9a; --stale: #9e9e9e;
}
:root[data-theme="dark"] {
  --bg: #12171d; --card: #1b222b; --text: #e6ebf1; --muted: #93a0b0; --line: #2d3745; --accent: #64b5f6;
  --tile: #222b36; --tile-line: #364254;
  --good: #66bb6a; --warn: #ffca28; --warn-text: #ffb74d; --alarm: #ef5350; --bad: #ba68c8; --stale: #8a929c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171d; --card: #1b222b; --text: #e6ebf1; --muted: #93a0b0; --line: #2d3745; --accent: #64b5f6;
    --tile: #222b36; --tile-line: #364254;
    --good: #66bb6a; --warn: #ffca28; --warn-text: #ffb74d; --alarm: #ef5350; --bad: #ba68c8; --stale: #8a929c;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .pad { padding: 14px 16px; }
button { font: inherit; cursor: pointer; }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.ghost:hover { border-color: var(--accent); }

.banner { background: var(--alarm); color: #fff; padding: 8px 16px; font-weight: 600; }
.banner.warn { background: var(--warn); color: #3b2a00; }

.top { padding: 14px 16px 6px; max-width: 1500px; margin: 0 auto; }
.top-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sub h1 { margin: 0; font-size: 26px; font-weight: 600; }
.top-right { display: flex; align-items: center; gap: 8px; }
.live::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--stale); margin-right: 6px; }
.live.ok::before { background: var(--good); }
.live.bad::before { background: var(--alarm); }
#location a { color: var(--accent); text-decoration: none; } #location a:hover { text-decoration: underline; }

.pill { display: inline-block; padding: 2px 12px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 13.5px; }
.st-Normal, .st-Good { background: var(--good); }
.st-Warning { background: var(--warn); color: #3b2a00; }
.st-Alert, .st-Alarm { background: var(--alarm); }
.st-Bad { background: var(--bad); }
.st-Stale { background: var(--stale); }

.weather { max-width: 1500px; margin: 8px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.wx { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 8px; padding: 6px 12px; min-width: 120px; }
.wx.s-Warning { border-left-color: var(--warn); } .wx.s-Alarm { border-left-color: var(--alarm); }
.wx.s-Bad { border-left-color: var(--bad); } .wx.s-Stale { border-left-color: var(--stale); }
.wx .l { font-size: 12px; color: var(--muted); } .wx .v { font-size: 20px; font-weight: 600; }
.wx .v small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }

.tabs { max-width: 1500px; margin: 14px auto 0; padding: 0 16px; display: flex; gap: 6px; overflow-x: auto; }
.tab { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 8px 16px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.tab.on { border-bottom-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); font-weight: 600; }
.tab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.tab .dot.Warning { background: var(--warn); } .tab .dot.Alert { background: var(--alarm); }
.tab-info { max-width: 1500px; margin: 0 auto; padding: 6px 16px 0; min-height: 22px; }

main { max-width: 1500px; margin: 0 auto; padding: 8px 16px 40px; display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: 17px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { background: transparent; color: var(--text); border: 0; padding: 5px 12px; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; }

/* ---------------- dashboard: a wrap panel - tiles keep their configured size and wrap to the next row */
.dash-host { padding: 12px; }
.dash { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.tile {
  position: relative; background: var(--tile); border: 1px solid var(--tile-line); border-left: 6px solid var(--stale);
  border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; max-width: 100%;
}
.tile.s-Good { border-left-color: var(--good); } .tile.s-Warning { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--tile)); }
.tile.s-Alarm { border-left-color: var(--alarm); background: color-mix(in srgb, var(--alarm) 10%, var(--tile)); }
.tile.s-Bad { border-left-color: var(--bad); } .tile.s-Stale { border-left-color: var(--stale); }
/* title, device, limits and time stamp: the same size on every tile */
.tile .t { font-weight: 600; font-size: 14px; padding-right: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .d { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .tb { position: absolute; top: 6px; right: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.tile .lim, .tile .mm, .tile .ft { font-size: 12px; color: var(--muted); }
.tile .lim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .mm { display: flex; justify-content: space-between; }
.tile .ft { margin-top: auto; padding-top: 2px; }
/* the big value and the lamp still grow with the tile size */
.tile .val { flex: 1; display: flex; align-items: center; font-size: calc(40px * var(--s)); font-weight: 600; line-height: 1; min-height: 0; padding: 6px 0; }
.tile .val small { font-size: calc(16px * var(--s)); font-weight: 400; color: var(--muted); margin-left: calc(6px * var(--s)); }
.tile.s-Good .val .n { color: var(--good); } .tile.s-Warning .val .n { color: var(--warn-text); } .tile.s-Alarm .val .n { color: var(--alarm); }
.tile.s-Bad .val .n { color: var(--bad); } .tile.s-Stale .val .n { color: var(--stale); }
.tile .bar { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 2px 0 4px; }
.tile .bar i { display: block; height: 100%; background: var(--good); }
.tile.s-Warning .bar i { background: var(--warn); } .tile.s-Alarm .bar i { background: var(--alarm); }
.tile.s-Bad .bar i { background: var(--bad); } .tile.s-Stale .bar i { background: var(--stale); }
.lamp { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; background: var(--stale); }
.lamp.i-Good { background: var(--good); } .lamp.i-Warning { background: var(--warn); color: #3b2a00; }
.lamp.i-Alarm { background: var(--alarm); } .lamp.i-Bad { background: var(--bad); } .lamp.i-Stale { background: var(--stale); }
.tile .ind { flex: 1; display: flex; align-items: center; gap: calc(10px * var(--s)); font-size: calc(30px * var(--s)); font-weight: 600; }
.tile .ind .lamp { width: calc(34px * var(--s)); height: calc(34px * var(--s)); font-size: calc(13px * var(--s)); }
.rows { margin-top: 2px; }   /* a group tile grows to show all its rows: no scroll bar */
.row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.row:last-child { border-bottom: 0; }
.row .rl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .rv { font-weight: 600; white-space: nowrap; }
.row .rv.s-Good { color: var(--good); } .row .rv.s-Warning { color: var(--warn-text); } .row .rv.s-Alarm { color: var(--alarm); }
.row .rv.s-Bad { color: var(--bad); } .row .rv.s-Stale { color: var(--stale); }
.row .rv small { font-weight: 400; color: var(--muted); margin-left: 3px; font-size: 0.85em; }
.row .lamp { width: 16px; height: 16px; font-size: 10px; }
.row input { margin: 0; }

/* ---------------- alarms */
.table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid th { position: sticky; top: 0; background: var(--card); text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid tr.act td:first-child { box-shadow: inset 4px 0 0 var(--alarm); }
.grid tr.act.w td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.sev { font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: #fff; }
.sev.Alert { background: var(--alarm); } .sev.Warning { background: var(--warn); color: #3b2a00; }

/* ---------------- trend */
.sources { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px 0; }
.src { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.src i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.src .u { color: var(--muted); font-size: 12px; }
.trend-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 8px 16px; font-size: 13.5px; color: var(--muted); }
select { font: inherit; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; max-width: 220px; }
.chart-wrap { position: relative; height: 380px; padding: 0 8px; }
.chart-wrap canvas { width: 100%; height: 100%; display: block; }
.tip { position: absolute; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); padding: 6px 10px; font-size: 12.5px; z-index: 5; white-space: nowrap; }
.tip b { display: block; margin-bottom: 2px; }

/* ---------------- login */
.overlay { position: fixed; inset: 0; background: rgba(10,14,20,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay[hidden] { display: none; }
.login { background: var(--card); padding: 24px; border-radius: 12px; width: min(360px, 92vw); display: grid; gap: 10px; }
.login h2 { margin: 0; } .login p { margin: 0; }
.login input { font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.login button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px; font-weight: 600; }
.err { color: var(--alarm); min-height: 1.2em; }

@media (max-width: 640px) {
  .sub h1 { font-size: 21px; }
  .chart-wrap { height: 300px; }
}

.wx { position: relative; }
.wx label.tb { position: absolute; top: 5px; right: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; cursor: pointer; }
.wx .l { padding-right: 52px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 16px 0; font-size: 14px; min-height: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.legend .u { color: var(--muted); font-size: 12px; }
.sevsel { display: inline-flex; align-items: center; gap: 8px; }
body.kiosk .top-right button, body.kiosk .tabs, body.kiosk #trendCard, body.kiosk .tb, body.kiosk #alarmCtl { display: none !important; }
body.kiosk #exitKiosk { display: block; }
#exitKiosk { display: none; position: fixed; right: 10px; bottom: 10px; z-index: 40; opacity: .25; }
#exitKiosk:hover { opacity: 1; }
body.kiosk .tab-info { font-size: 18px; }
.paused { color: var(--warn-text); font-weight: 600; }

.linkbtn { text-decoration: none; display: inline-block; font: inherit; }
body.kiosk .top-right .linkbtn { display: none !important; }

/* ---------------- left substation selector (registry mode) */
#side { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; background: var(--card); border-right: 1px solid var(--line); z-index: 30; display: flex; flex-direction: column; }
#side[hidden] { display: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
#sideSearch { margin: 0 12px 8px; font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.side-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.side-group { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px 3px; }
.side-item { display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.side-item:hover { background: var(--bg); }
.side-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); font-weight: 600; }
.side-item .dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--stale); }
.dot.Normal { background: var(--good); } .dot.Warning { background: var(--warn); } .dot.Alert { background: var(--alarm); } .dot.Offline { background: var(--stale); }
.side-item small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.side-foot { border-top: 1px solid var(--line); padding: 10px 16px; display: grid; gap: 4px; }
.side-foot a { color: var(--accent); text-decoration: none; }
body.has-side:not(.side-hidden) #page { margin-left: 264px; }
body.kiosk #side, body.kiosk #sideBtn { display: none !important; }
body.kiosk #page { margin-left: 0 !important; }
@media (max-width: 900px) {
  body.has-side:not(.side-hidden) #page { margin-left: 0; }
  #side { box-shadow: 4px 0 24px rgba(0,0,0,.35); }
}

/* ---------------- show-password button, organization logo, expiry note */
.pwrap { display: flex; gap: 6px; align-items: stretch; }
.pwrap input { flex: 1; min-width: 0; }
.pwshow { font: inherit; font-size: 13px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.pwshow:hover { border-color: var(--accent); }
.org-logo { max-height: 40px; max-width: 170px; object-fit: contain; background: transparent; margin-right: 6px; }
.exp-note { background: #fff4d6; color: #5c4400; border: 1px solid #e7c766; border-radius: 8px; padding: 9px 14px; margin: 8px 14px; font-size: 14px; }
:root[data-theme="dark"] .exp-note { background: #4a3a10; color: #ffe9a8; border-color: #8a6d1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .exp-note { background: #4a3a10; color: #ffe9a8; border-color: #8a6d1c; } }
.pwrap input { font: inherit; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }

/* ---------------- footer "Powered by ZTZ Services" */
.powered { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 14px 22px; color: var(--muted, #667); font-size: 13px; }
.powered img { height: 26px; width: auto; }
.powered b { color: var(--text, #222); font-weight: 600; }
.ztz-top { height: 72px; max-width: 100%; object-fit: contain; width: auto; justify-self: center; margin-bottom: 4px; }
/* the dark letters of the logo need a light background in the dark theme */
:root[data-theme="dark"] .powered img, :root[data-theme="dark"] .ztz-top { background: #fff; border-radius: 6px; padding: 3px 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .powered img, :root:not([data-theme="light"]) .ztz-top { background: #fff; border-radius: 6px; padding: 3px 8px; } }
body.kiosk .powered { display: none; }