/* The picker stays available at every viewport size. */
.topbar-start { flex: 1; }
.topbar-start nav { min-width: 0; }
.topbar-end { flex-shrink: 0; }
.theme-toggle { color: var(--app-muted); }
.theme-toggle[aria-expanded="true"] { color: var(--app-green); background: var(--app-green-soft); }
.theme-menu { min-width: 195px; padding: 6px; background: var(--app-surface); border-color: var(--app-border); border-radius: 9px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 11px; border-radius: 5px; color: var(--app-ink); font-size: 14px; }
.theme-menu .dropdown-item .icon { width: 18px; height: 18px; }
.theme-menu .dropdown-item:hover, .theme-menu .dropdown-item:focus, .theme-menu .dropdown-item.active { color: var(--app-green); background: var(--app-green-soft); }
.theme-check { margin-left: auto; visibility: hidden; }
.theme-menu [aria-checked="true"] .theme-check { visibility: visible; }

/* Bootstrap controls inherit this mode through data-bs-theme on <html>. */
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --app-bg: #141c19;
    --app-surface: #1b2522;
    --app-ink: #dbe6df;
    --app-muted: #a1b1a8;
    --app-border: #33443b;
    --app-green: #82d7b7;
    --app-green-soft: #263f34;
    --app-dark-subtle: #233129;
    --bs-body-bg-rgb: 20, 28, 25;
    --bs-body-color-rgb: 219, 230, 223;
    --bs-secondary-bg: #233129;
    --bs-tertiary-bg: #202d26;
}

[data-bs-theme="dark"] :is(.brand, .brand:hover, .current-page-title, .summary-value, .panel-heading h2, .report-title, .account-label strong, .page-heading p, .service-row strong, .quick-link strong, .empty-state h3) { color: var(--app-ink); }
[data-bs-theme="dark"] :is(.brand-subtitle, .nav-entry, .subnav-entry, .nav-toggle, .sidebar-note, .sidebar-note strong, .sidebar-footer, .sidebar-version, .breadcrumb-item a, .breadcrumb-item.active, .account-label span, .date-label, .preview-banner, .summary-card-label, .summary-value-description, .summary-bottom, .metric-note, .panel-heading p, .report-tab, .report-meta, .source-label, .report-time, .panel-footer, .sample-indicator, .empty-state, .live-indicator, .service-row div > span, .quick-link div > span, .workspace-tip, .workspace-tip p, .workspace-tip span, .page-footer, .detail-eyebrow, .detail-metadata dt, .detail-description, .detail-note, .backend-service p, .database-preview p, .mobile-report-time) { color: var(--app-muted); }
[data-bs-theme="dark"] :is(.nav-entry:hover, .nav-parent:hover, .subnav-entry:hover, .btn-icon:hover, .quick-link:hover, .panel-link:hover, .reports-table tbody tr:hover) { background: var(--app-dark-subtle); color: var(--app-green); }
[data-bs-theme="dark"] :is(.nav-entry.active, .nav-parent.is-current, .subnav-entry.active) { color: var(--app-green); background: var(--app-green-soft); }
[data-bs-theme="dark"] :is(.report-tab.active, .report-tab:hover, .report-title:hover, .panel-link) { color: var(--app-green); }
[data-bs-theme="dark"] .report-tab.active { border-bottom-color: var(--app-green); }
[data-bs-theme="dark"] :is(.nav-count, .heading-count, .service-icon, .reports-table thead, .environment-badge, .avatar) { background: var(--app-dark-subtle); color: var(--app-muted); border-color: var(--app-border); }
[data-bs-theme="dark"] :is(.subnav, .report-tabs, .reports-table th, .panel-footer, .service-row, .panel-link, .detail-metadata > div) { border-color: var(--app-border); }
[data-bs-theme="dark"] .reports-table { --bs-table-border-color: var(--app-border); }
[data-bs-theme="dark"] .reports-table th { color: var(--app-muted); }
[data-bs-theme="dark"] :is(.breadcrumb-item + .breadcrumb-item::before, .summary-arrow, .panel-heading-icon, .report-arrow .icon, .quick-link > .icon) { color: #7f9488; }
[data-bs-theme="dark"] .preview-label { background: #363223; border-color: #554c2e; color: #d5c48d; }
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #c5d4ca;
    --bs-btn-border-color: #43584b;
    --bs-btn-hover-color: #dbe6df;
    --bs-btn-hover-bg: #2b3e32;
    --bs-btn-hover-border-color: #62806d;
    --bs-btn-active-color: #dbe6df;
    --bs-btn-active-bg: #2b3e32;
    --bs-btn-active-border-color: #62806d;
}
[data-bs-theme="dark"] :is(.form-control, .form-select) { background-color: var(--app-surface); border-color: #43584b; color: var(--app-ink); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--app-muted); }
[data-bs-theme="dark"] :is(.form-control:focus, .form-select:focus) { border-color: #82d7b7; box-shadow: 0 0 0 .2rem rgb(130 215 183 / 16%); }
[data-bs-theme="dark"] :is(.green-icon, .metric-tag, .database-preview-icon, .status-green) { background: #263e30; color: #9ad8b1; border-color: #3a5945; }
[data-bs-theme="dark"] :is(.blue-icon, .flight-symbol, .status-blue) { background: #263547; color: #a6c7ec; border-color: #3b526c; }
[data-bs-theme="dark"] :is(.amber-icon, .bug-symbol, .status-amber) { background: #3b3325; color: #e0c18c; border-color: #5b4a2e; }
[data-bs-theme="dark"] .service-state { color: #9ad8b1; }
[data-bs-theme="dark"] .summary-card:hover { border-color: #62806d; }
[data-bs-theme="dark"] .online-dot { box-shadow: 0 0 0 4px #263e30; }