/* Semantic surface and control colors shared by every monitor page. */
html[data-bs-theme="light"] {
  color-scheme: light;
  --app-body-bg:#f4f6f8; --app-card-bg:#ffffff; --app-header-bg:#f1f5f9;
  --app-muted:#596579; --app-code:#b51f68;
  --app-chip-bg:#f8fafc; --app-chip-border:#cbd5e1; --app-chip-hover:#e8eef5;
  --app-accent-soft:#e8f1ff; --app-link:#0759bd; --app-status:#146c43;
  --app-sidebar-bg:#ffffff; --app-toolbar-bg:#ffffff; --app-chrome-fg:#17212f;
  --app-nav-fg:#475569; --app-nav-hover:#edf2f7; --app-nav-active:#dceaff; --app-nav-active-fg:#134e91;
  --app-control-fg:#334155; --app-control-border:#64748b;
  --app-control-hover:#e2e8f0; --app-control-hover-fg:#0f172a; --app-focus:#2563eb;
  --app-warning:#855500; --app-warning-fill:#facc15; --app-warning-ink:#17212f;
  --app-login-top:#e0edff; --app-login-bottom:#f4f6f8; --app-login-error:#fff1f2; --app-login-error-fg:#9f1239;
}
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-body-bg:#0f172a; --app-card-bg:#111827; --app-header-bg:#1f2937;
  --app-muted:#a3b3c8; --app-code:#f9a8d4;
  --app-chip-bg:#1b2430; --app-chip-border:#475569; --app-chip-hover:#243143;
  --app-accent-soft:#162b44; --app-link:#8cbeff; --app-status:#6ee7b7;
  --app-sidebar-bg:#17212f; --app-toolbar-bg:#202831; --app-chrome-fg:#f1f5f9;
  --app-nav-fg:#b9c7d8; --app-nav-hover:#243143; --app-nav-active:#245b91; --app-nav-active-fg:#ffffff;
  --app-control-fg:#e2e8f0; --app-control-border:#8294ad;
  --app-control-hover:#334155; --app-control-hover-fg:#f8fafc; --app-focus:#93c5fd;
  --app-warning:#fcd34d; --app-warning-fill:#fbbf24; --app-warning-ink:#17212f;
  --app-login-top:#233a55; --app-login-bottom:#101824; --app-login-error:#40202b; --app-login-error-fg:#fecdd3;
  --bs-link-color:#8cbeff; --bs-link-color-rgb:140,190,255;
  --bs-link-hover-color:#bddaff; --bs-link-hover-color-rgb:189,218,255;
}
.btn-outline-light, .btn-outline-secondary {
  --bs-btn-color:var(--app-control-fg); --bs-btn-border-color:var(--app-control-border);
  --bs-btn-hover-color:var(--app-control-hover-fg); --bs-btn-hover-bg:var(--app-control-hover);
  --bs-btn-hover-border-color:var(--app-control-border);
  --bs-btn-active-color:var(--app-control-hover-fg); --bs-btn-active-bg:var(--app-control-hover);
  --bs-btn-active-border-color:var(--app-control-border);
  --bs-btn-disabled-color:var(--app-control-fg); --bs-btn-disabled-border-color:var(--app-control-border);
}
.btn-outline-warning {
  --bs-btn-color:var(--app-warning); --bs-btn-border-color:var(--app-warning);
  --bs-btn-hover-color:var(--app-warning-ink); --bs-btn-hover-bg:var(--app-warning-fill); --bs-btn-hover-border-color:var(--app-warning-fill);
  --bs-btn-active-color:var(--app-warning-ink); --bs-btn-active-bg:var(--app-warning-fill); --bs-btn-active-border-color:var(--app-warning-fill);
  --bs-btn-disabled-color:var(--app-warning); --bs-btn-disabled-border-color:var(--app-warning);
}
html[data-bs-theme="dark"] .btn-outline-primary { --app-action:#8cbeff; --app-action-fill:#1d4ed8; }
html[data-bs-theme="dark"] .btn-outline-danger { --app-action:#fda4af; --app-action-fill:#be123c; }
html[data-bs-theme="dark"] .btn-outline-success { --app-action:#6ee7b7; --app-action-fill:#047857; }
html[data-bs-theme="dark"] :is(.btn-outline-primary,.btn-outline-danger,.btn-outline-success) {
  --bs-btn-color:var(--app-action); --bs-btn-border-color:var(--app-action);
  --bs-btn-hover-color:#ffffff; --bs-btn-hover-bg:var(--app-action-fill); --bs-btn-hover-border-color:var(--app-action-fill);
  --bs-btn-active-color:#ffffff; --bs-btn-active-bg:var(--app-action-fill); --bs-btn-active-border-color:var(--app-action-fill);
  --bs-btn-disabled-color:var(--app-action); --bs-btn-disabled-border-color:var(--app-action);
}
.app-toolbar :is(.form-select,.btn) { min-height:32px; }
.app-toolbar .form-select { background-color:var(--app-card-bg); color:var(--app-control-fg); border-color:var(--app-control-border); }
.theme-select { width:136px; flex:none; }
.btn:focus-visible, .form-select:focus-visible, .app-nav-item:focus-visible {
  outline:2px solid var(--app-focus); outline-offset:3px;
}
.status-connected { color:var(--app-status); }
.status-idle { color:var(--app-warning); }
.badge-soft { background:var(--app-chip-hover); color:var(--app-control-fg); }
@media(max-width:575px) {
  .theme-select { width:112px; margin-left:auto; }
  .app-toolbar-logout { position:absolute; top:.75rem; right:1rem; }
}