/* Shared appearance. Navigation deliberately uses flat, full-width rows. */
:root {
  color-scheme: light;
  --bg: #f2f5f6;
  --surface: #ffffff;
  --surface-subtle: #f6f8f9;
  --ink: #203540;
  --muted: #657b86;
  --line: #dce4e8;
  --line-strong: #b9c9d0;
  --teal: #147b71;
  --teal-dark: #11685f;
  --teal-pale: #eaf5f1;
  --amber: #9a661f;
  --amber-pale: #fff5e4;
  --red: #b3433b;
  --red-pale: #fbedeb;
  --nav: #172b35;
  --on-accent: #ffffff;
  --radius: 5px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11191f;
  --surface: #1a252c;
  --surface-subtle: #202e37;
  --ink: #e0e9ed;
  --muted: #a0b3be;
  --line: #32444f;
  --line-strong: #526976;
  --teal: #6dc5b8;
  --teal-dark: #84d5c7;
  --teal-pale: #203d37;
  --amber: #e7b66b;
  --amber-pale: #3b3121;
  --red: #f0988e;
  --red-pale: #412b2b;
  --nav: #0d151b;
  --on-accent: #102e29;
}
body, .app-body { background: var(--bg); color: var(--ink); }
.topbar, .panel, .stats-band, .button, input, select, textarea, dialog, .skip-link {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.topbar { height: 58px; }
.sidebar { padding: 23px 0 16px; }
.brand { padding: 0 23px 22px; }
.brand-wordmark { font-size: 23px; font-weight: 750; letter-spacing: -1px; }
.brand small { font-size: 10px; letter-spacing: 2.6px; }
.workspace-label { margin: 0 22px 20px; }
.nav-heading { padding: 0 23px 6px; font-size: 11px; }
.nav-group { margin-bottom: 15px; }
.nav-link, .nav-link.active, .nav-link:hover {
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  padding: 10px 23px; font-size: 14px;
}
.nav-link.active { background: #30434d; color: #fff; font-weight: 650; }
.nav-link.active svg { color: #e4edf1; }
.nav-link:hover { background: #263b46; }
.nav-link.active:hover { background: #30434d; }
.sidebar-bottom { margin: auto 22px 0; padding: 13px 0 0; }
.button, .icon-button, .badge, .segmented, input, select { border-radius: 4px; }
.button { box-shadow: none; font-size: 13px; }
.button:hover, .icon-button:hover, .panel-footer-link:hover, tbody tr:hover { background: var(--surface-subtle); }
.button.primary { background: var(--teal-dark); color: var(--on-accent); border-color: var(--teal-dark); }
.button.primary:hover { background: var(--teal); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:32px; padding:0 9px; }
.theme-toggle .icon { width:16px; height:16px; }
.theme-toggle span { font-size:12px; }
.topbar-right { gap:12px; }
.site-select { padding-right:12px; }
.site-select select { background:transparent; }
.breadcrumb strong, h1, h2, h3, .device-link, .chart-meta strong, .decision-title, .drawer-metrics dd { color:var(--ink); }
.muted, .breadcrumb, .page-subtitle, .panel-head p, .eyebrow, .stat-label, .stat p,
.chart-meta span, .chart-meta small, .chart-tabs button, .connection-path,
.decision-detail, .decision-detail b, .decision time, .rrm-cycle, .rrm-cycle strong,
.snapshot-note, .channel-item, .drawer-header p, .drawer-metrics dt, .device-explanation,
.drawer-demo, .field, .field small, .setting-row small, td, td small, th,
.floor-caption, .history-row time, .history-row p, .alarm-card p { color:var(--muted); }
.text-link, .panel-footer-link, .stat p a, .connection-path a, .trend { color:var(--teal-dark); }
.badge.green, .decision-symbol.green { background:var(--teal-pale); color:var(--teal-dark); }
.badge.amber, .decision-symbol.amber { background:var(--amber-pale); color:var(--amber); }
.badge.red { background:var(--red-pale); color:var(--red); }
.badge.neutral, .count { background:var(--surface-subtle); color:var(--muted); }
.drawer-header, .radio-box, .connection-path, th, .segmented, .mini-meter, .floor-plan {
  background:var(--surface-subtle); border-color:var(--line);
}
td, th, .toolbar, .setting-row, .panel-footer-link, .decision, .history-row,
.alarm-card, .rrm-cycle, .drawer-metrics>div, .tabs { border-color:var(--line); }
.attention-banner, .info-note { background:var(--amber-pale); border-color:var(--line); }
.attention-banner strong, .attention-banner div>span, .attention-banner .text-link, .alert-icon { color:var(--amber); }
.info-note { color:var(--ink); }
.avatar { background:var(--surface-subtle); color:var(--ink); border-color:var(--line); }
.segmented button[aria-pressed=true] { background:var(--surface); color:var(--ink); box-shadow:none; }
.floor-ap { background:var(--surface); color:var(--teal-dark); border-color:var(--line-strong); }
.floor-ap.warning { background:var(--amber-pale); color:var(--amber); }
.floor-ap.critical { background:var(--red-pale); color:var(--red); }
.floor-ap.offline { background:var(--surface-subtle); color:var(--muted); }
[data-theme=dark] .floor-plan svg path:first-child { fill:var(--surface); stroke:var(--line-strong); }
[data-theme=dark] .floor-plan svg path { stroke:var(--line-strong); }
[data-theme=dark] .floor-plan svg text { fill:var(--muted); }
.form-error { background:var(--red-pale); color:var(--red); border-color:var(--red); }
@media(max-width:700px) {
  .theme-toggle span { display:none; }
  .site-select { border:0; padding:0; }
  .site-select select { max-width:185px; }
  .topbar-right { gap:8px; }
  .topbar-right .avatar { display:none; }
  .nav-link, .nav-link.active, .nav-link:hover { padding:12px 23px; }
}