:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20352e;
  background: #f5f8f5;
  --green: #187c56;
  --border: #dce8e0;
  --page: #f5f8f5;
  --surface: #ffffff;
  --text: #20352e;
  --muted: #6c8277;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--page); transition: background-color .25s ease, color .25s ease; }
body { margin: 0; background: var(--page); color: var(--text); }
.app { display: flex; min-height: 100vh; overflow-x: clip; }
.sidebar { width: 238px; background: #103f32; color: white; display: flex; flex-direction: column; padding: 30px 18px; flex-shrink: 0; overflow: hidden; transition: width .28s ease, padding .28s ease, transform .28s ease; }
.sidebar > * { min-width: 202px; transition: opacity .16s ease; }
body.sidebar-closed .sidebar { width: 0; padding-inline: 0; }
body.sidebar-closed .sidebar > * { opacity: 0; pointer-events: none; }
.brand { font-size: 20px; letter-spacing: 1.5px; font-weight: 750; display: flex; align-items: center; gap: 10px; padding: 6px 5px 38px; }
.brand b { color: #9ee1c5; }
.brand-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #73b7a0; border-radius: 11px; color: #b9efda; font-size: 28px; }
.sidebar-close { display: grid; place-items: center; width: 32px; height: 32px; margin-inline-start: auto; padding: 0; border-color: rgba(185, 239, 218, .28); background: rgba(255, 255, 255, .06); color: #dff6ed; }
.sidebar-close:hover { background: rgba(255, 255, 255, .13); }
.sidebar-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar a { padding: 13px 16px; border-radius: 10px; color: #c6ded5; text-decoration: none; }
.sidebar a.active, .sidebar a:hover { background: #27654f; color: #fff; }
.side-mode { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.1); color: #a6c5b8; font-size: 11px; }
.mode-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; background: #775c1d; color: #ffe39b; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.mode-badge.live { background: #176744; color: #bff2d7; }
main { flex: 1; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 28px 42px 35px; }
.topbar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.topbar-primary { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.heading-group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.menu-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 13px; background: var(--surface); box-shadow: 0 4px 16px rgba(24, 70, 53, .06); }
.menu-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.preferences { display: flex; align-items: center; gap: 9px; }
.switch-control { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; user-select: none; }
.switch-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #edf7f1; color: #187c56; font-size: 14px; font-weight: 800; }
.switch-copy { display: grid; min-width: 54px; line-height: 1.15; }
.switch-copy span { color: var(--muted); font-size: 10px; }
.switch-copy strong { margin-top: 3px; color: var(--text); font-size: 12px; }
.switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-track { direction: ltr; position: relative; width: 36px; height: 20px; border-radius: 99px; background: #cedbd4; transition: background .2s ease; }
.switch-track span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(20, 55, 43, .25); transition: transform .2s ease; }
.switch-control input:checked + .switch-track { background: #23845f; }
.switch-control input:checked + .switch-track span { transform: translateX(16px); }
.switch-control input:focus-visible + .switch-track { outline: 3px solid rgba(43, 144, 103, .24); outline-offset: 2px; }
.sidebar-backdrop { display: none; }
.eyebrow { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: #5c8b78; font-weight: 750; }
h1 { font-size: 30px; margin: 6px 0; }
h2 { margin: 8px 0; font-size: 21px; }
.controls, .table-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.controls { justify-content: flex-end; }
input, select, button { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface); color: var(--text); font: inherit; }
button { cursor: pointer; font-weight: 700; }
button:hover { background: #edf6f0; }
#gatewaySearch { width: 185px; }
#gatewaySelect { min-width: 160px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 13px 16px; border: 1px solid #e8bcb5; border-radius: 13px; background: #fff2ef; color: #8c382d; font-size: 13px; }
.notice[hidden] { display: none; }
.notice.warning { border-color: #e7d2a5; background: #fff8e9; color: #79591a; }
.notice.success { border-color: #b7dec8; background: #edf9f2; color: #226542; }
.notice button { flex: 0 0 auto; padding: 3px 8px; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; }
.status-times { display: flex; gap: 28px; }
.status { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 25px 28px; border: 1px solid var(--border); background: var(--surface); border-radius: 17px; margin-bottom: 18px; }
.status p { color: var(--muted); margin: 4px 0; }
.tag { font-size: 12px; background: #e5f6eb; color: #14804d; padding: 5px 10px; border-radius: 100px; font-weight: 750; }
.tag.offline { background: #fce8e5; color: #a44236; }
.tag.unknown { background: #edf0ee; color: #68766f; }
.status-right { text-align: end; display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.status-right strong { color: var(--text); font-size: 15px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric-card {
  --card-accent: #24895f;
  position: relative;
  min-height: 196px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #f3faf6 100%);
  border: 1px solid rgba(34, 104, 77, .13);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(26, 73, 55, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.metric-card::after { content: ""; position: absolute; inset: auto -35px -55px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--card-accent); opacity: .07; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26, 73, 55, .1); }
.metric-card.warm { --card-accent: #ed7b54; background: linear-gradient(145deg, #fff 0%, #fff5ef 100%); }
.metric-card.blue { --card-accent: #3c91c5; background: linear-gradient(145deg, #fff 0%, #eff8fd 100%); }
.metric-card.gold { --card-accent: #d39a25; background: linear-gradient(145deg, #fff 0%, #fff9e9 100%); }
.metric-card.mint { --card-accent: #258b68; background: linear-gradient(145deg, #fff 0%, #eff9f4 100%); }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.metric-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--card-accent) 13%, white); color: var(--card-accent); }
.metric-icon svg { width: 23px; height: 23px; }
.sensor-source { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--card-accent) 18%, white); border-radius: 99px; color: var(--card-accent); background: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 800; letter-spacing: .8px; }
.metric-label { margin: 0 0 7px; color: #687f74; font-size: 13px; font-weight: 650; }
.metric-reading { display: flex; align-items: baseline; gap: 6px; direction: ltr; justify-content: flex-start; }
.metric-value { color: #193d30; font-size: 34px; line-height: 1.15; letter-spacing: -1.2px; }
.metric-unit { color: #647c70; font-size: 14px; font-weight: 650; }
.metric-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 13px; border-top: 1px solid rgba(50, 102, 81, .1); color: #809389; font-size: 10px; }
.metric-time { text-align: end; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 17px; overflow: hidden; }
.panel-heading { padding: 25px 26px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.table-actions input { width: 170px; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; text-align: start; }
th, td { padding: 15px 24px; border-top: 1px solid #eaf0eb; white-space: nowrap; text-align: start; }
th { background: #f1f7f3; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #5b776a; }
td { font-size: 14px; }
tbody tr:hover { background: #f9fcfa; }
.status-pill { display: inline-block; padding: 5px 9px; border-radius: 99px; background: #eef1ef; color: #5e6e66; font-size: 11px; }
.status-pill.ok { background: #e7f6ed; color: #207148; }
.history-panel { margin-top: 24px; }
.history-heading { align-items: flex-start; flex-direction: column; }
.history-filters { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 10px; width: 100%; }
.history-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.history-filters input, .history-filters select, .history-filters button { width: 100%; min-width: 0; }
.history-filters button { align-self: end; }
.chart-wrap { position: relative; min-height: 260px; padding: 18px 24px; border-top: 1px solid var(--border); }
#historyChart { display: block; width: 100%; height: 250px; overflow: visible; }
.chart-guide { stroke: #dfe9e3; stroke-width: 1; }
.chart-line { fill: none; stroke: #23845f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: #fff; stroke: #23845f; stroke-width: 2.5; }
.chart-label { fill: var(--muted); font-size: 11px; }
.chart-wrap .empty { display: grid; place-items: center; min-height: 220px; margin: 0; text-align: center; }
.chart-wrap .empty[hidden] { display: none; }
.history-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.history-summary[hidden] { display: none; }
.is-loading #refreshBtn { cursor: wait; opacity: .65; }
.pill { font-size: 12px; padding: 5px 9px; border-radius: 99px; background: #e9f6ec; color: #26764c; }
.pill.warn { background: #fff2db; color: #91631e; }
.empty { padding: 18px 25px; color: #7d8e83; }
footer { padding: 25px 0; color: var(--muted); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html[dir=rtl] .sidebar { border-left: 1px solid #285c49; }
html[dir=rtl] .status-right { text-align: start; }
html[dir=rtl] .metric-reading { justify-content: flex-end; }
html[dir=rtl] .metric-time { text-align: start; }

html[data-theme=dark] {
  --page: #0d1713;
  --surface: #14231d;
  --text: #e7f2ec;
  --muted: #91a79c;
  --border: #294138;
  color-scheme: dark;
}
html[data-theme=dark] .sidebar { background: #071f18; }
html[data-theme=dark] .sidebar a.active,
html[data-theme=dark] .sidebar a:hover { background: #1d5944; }
html[data-theme=dark] .menu-toggle,
html[data-theme=dark] .switch-control { box-shadow: 0 7px 24px rgba(0, 0, 0, .18); }
html[data-theme=dark] .switch-symbol { background: #213a30; color: #83d5b2; }
html[data-theme=dark] button:hover { background: #20372e; }
html[data-theme=dark] .status p,
html[data-theme=dark] .metric-label,
html[data-theme=dark] .metric-unit,
html[data-theme=dark] .metric-meta { color: #9cb1a6; }
html[data-theme=dark] .metric-card { border-color: #30483f; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
html[data-theme=dark] .metric-card.warm { background: linear-gradient(145deg, #1d2823 0%, #30231e 100%); }
html[data-theme=dark] .metric-card.blue { background: linear-gradient(145deg, #1b2825 0%, #162d37 100%); }
html[data-theme=dark] .metric-card.gold { background: linear-gradient(145deg, #202922 0%, #302a18 100%); }
html[data-theme=dark] .metric-card.mint { background: linear-gradient(145deg, #1b2924 0%, #173128 100%); }
html[data-theme=dark] .metric-value { color: #f1f8f4; }
html[data-theme=dark] .metric-icon { background: color-mix(in srgb, var(--card-accent) 22%, #17251f); }
html[data-theme=dark] .sensor-source { background: rgba(10, 22, 17, .48); }
html[data-theme=dark] th { background: #1a2d25; color: #9eb5aa; }
html[data-theme=dark] th,
html[data-theme=dark] td { border-top-color: #263c33; }
html[data-theme=dark] tbody tr:hover { background: #182a23; }
html[data-theme=dark] .tag { background: #183c2b; color: #70d29e; }
html[data-theme=dark] .tag.offline { background: #452924; color: #f0a398; }
html[data-theme=dark] .tag.unknown { background: #263630; color: #aabbb3; }
html[data-theme=dark] .notice { border-color: #70433c; background: #321f1c; color: #f1aaa0; }
html[data-theme=dark] .notice.warning { border-color: #66562d; background: #2d2819; color: #e6ca7d; }
html[data-theme=dark] .notice.success { border-color: #2c5b41; background: #183025; color: #8ad3aa; }
html[data-theme=dark] .status-pill { background: #273730; color: #b0c0b8; }
html[data-theme=dark] .status-pill.ok { background: #183c2b; color: #70d29e; }
html[data-theme=dark] .chart-guide { stroke: #294139; }
html[data-theme=dark] .chart-dot { fill: #14231d; }

@media (max-width: 1050px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .topbar-primary { align-items: flex-start; }
  .preferences { flex-wrap: wrap; justify-content: flex-end; }
  .history-filters { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
}

@media (max-width: 700px) {
  .app { display: block; }
  .sidebar,
  body.sidebar-closed .sidebar { position: fixed; z-index: 30; inset-block: 0; inset-inline-start: 0; width: 280px; padding: 22px 18px; box-shadow: 18px 0 45px rgba(0, 0, 0, .22); transform: translateX(0); }
  body.sidebar-closed .sidebar { transform: translateX(-105%); }
  body.sidebar-closed .sidebar > * { opacity: 1; pointer-events: auto; }
  html[dir=rtl] body.sidebar-closed .sidebar { transform: translateX(105%); }
  .sidebar-backdrop { display: block; position: fixed; z-index: 20; inset: 0; padding: 0; border: 0; border-radius: 0; background: rgba(3, 15, 11, .45); opacity: 1; transition: opacity .25s ease; }
  body.sidebar-closed .sidebar-backdrop { opacity: 0; pointer-events: none; }
  .brand { padding-bottom: 30px; }
  .sidebar nav { display: grid; }
  main { padding: 20px 14px; }
  .topbar-primary { display: grid; gap: 16px; }
  .preferences { justify-content: flex-start; }
  .switch-copy { min-width: 48px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 174px; padding: 15px; border-radius: 17px; }
  .metric-top { margin-bottom: 14px; }
  .metric-icon { width: 37px; height: 37px; border-radius: 11px; }
  .metric-value { font-size: 28px; }
  .metric-meta { display: block; margin-top: 14px; }
  .metric-time { display: block; margin-top: 3px; text-align: start; }
  .status, .panel-heading { padding: 17px; flex-wrap: wrap; }
  .status-times { width: 100%; justify-content: space-between; gap: 12px; }
  .status-right { text-align: start; }
  .controls { width: 100%; justify-content: flex-start; }
  #gatewaySearch { flex: 1; min-width: 130px; }
  #gatewaySelect { min-width: 0; max-width: 100%; }
  th, td { padding: 12px 15px; }
  .table-actions { width: 100%; }
  .table-actions input { flex: 1 1 100%; width: 100%; }
  .history-filters { grid-template-columns: 1fr 1fr; }
  .chart-wrap { padding: 12px 8px; }
}

@media (max-width: 390px) {
  .cards { grid-template-columns: 1fr; }
  .metric-card { min-height: 160px; }
  .history-filters { grid-template-columns: 1fr; }
}