/*
 * UI/UX Improvements — Delve Analytics
 * Applied on top of style.css to fix audit findings.
 * Categories: typography, sidebar, header, KPI cards, attention blocks,
 *             buttons, focus states, tables, loading states, brand label.
 */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
    --app-font-size: 0.9375rem;   /* 15 px — up from 14.4 px for clinical readability */
    --color-primary:   #667eea;
    --color-success:   #38a169;
    --color-warning:   #d69e2e;
    --color-danger:    #e53e3e;
    --color-neutral:   #718096;
    --color-surface:   #fff;
    --color-border:    #e2e8f0;
    --color-text:      #1a202c;
    --color-text-muted:#4a5568;
    --radius-card:     12px;
    --shadow-card:     0 1px 4px rgba(0,0,0,0.06);
    --transition:      0.18s ease;
}

/* ═══════════════════════════════════════════════
   2. TYPOGRAPHY
   ═══════════════════════════════════════════════ */
body {
    font-size: var(--app-font-size);
}

/* Consistent section label style — ALL CAPS + subtle muted color */
.site-report-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--color-neutral);
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Page-level headings (Compliance, Device Status, etc.) */
.compliance-title-block h1,
.device-status-title h1,
.page-title-h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════
   3. FOCUS STATES — accessibility
   Restore meaningful keyboard focus rings.
   ═══════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Keep overrides but restore keyboard focus */
.sidebar-toggle-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════
   4. SIDEBAR — visual consistency & active indicator
   ═══════════════════════════════════════════════ */

/* Give nav sections the same bg as the sidebar container */
.sidebar-header {
    background: #2d3748;
    border-color: #3a4a5c;
}

.sidebar-nav {
    background: #2d3748;
    border-color: #3a4a5c;
    gap: 2px;
}

.sidebar-footer {
    background: #2d3748;
    border-color: #3a4a5c;
    border-top: 1px solid #3a4a5c;
}

/* Nav item colors on dark sidebar */
.sidebar-nav-item {
    color: #a0aec0;
    border-radius: 0;
}

.sidebar-nav-text {
    color: #a0aec0;
}

/* Hover */
.sidebar-nav-item:hover {
    background: rgba(102, 126, 234, 0.15);
    color: #fff;
}

.sidebar-nav-item:hover .sidebar-nav-text {
    color: #fff;
}

/* Active item — clear left-accent bar + filled background */
.sidebar-nav-item.active {
    background: rgba(102, 126, 234, 0.18) !important;
    color: #fff !important;
    border-left: 3px solid var(--color-primary) !important;
    padding-left: 9px; /* compensate for the 3px border */
}

.sidebar-nav-item.active::before {
    display: none; /* remove old pseudo-element active bg */
}

.sidebar-nav-item.active .sidebar-nav-text {
    color: #fff !important;
    font-weight: 600;
}

/* Sidebar icons — slightly brighter on dark bg */
.sidebar-nav-icon {
    filter: brightness(0) invert(0.72);
}

.sidebar-nav-item:hover .sidebar-nav-icon,
.sidebar-nav-item.active .sidebar-nav-icon {
    filter: brightness(0) invert(1);
}

/* Sidebar toggle button on dark sidebar */
.sidebar-toggle-btn {
    background: transparent;
    color: #a0aec0;
    border: none;
}

.sidebar-toggle-btn:hover {
    color: #fff;
}

/* Sidebar footer text — muted version label */
.sidebar-footer-text {
    color: #718096 !important;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 1 !important;
}

/* Separator above secondary nav items */
#analyses-functions.sidebar-nav-item::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.1) 90%, transparent);
}

/* Tooltip for collapsed sidebar icons */
.sidebar:not(.expanded) .sidebar-nav-item {
    position: relative;
}

.sidebar:not(.expanded) .sidebar-nav-item[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a202c;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 2000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Dark mode sidebar — keep the dark sidebar bg consistent */
body.theme-dark .sidebar-header,
body.theme-dark .sidebar-nav,
body.theme-dark .sidebar-footer {
    background: #1C2128;
    border-color: #2a3240;
}

body.theme-dark .sidebar-nav-item:hover {
    background: rgba(20, 184, 166, 0.16);
}

body.theme-dark .sidebar-nav-item.active {
    background: rgba(20, 184, 166, 0.18) !important;
    border-left-color: #2dd4bf !important;
}

/* ═══════════════════════════════════════════════
   5. HEADER / USER INFO — proper top bar
   ═══════════════════════════════════════════════ */

/* Elevate user info into a sticky top bar */
.content-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fafafc;
    margin: -24px -24px 24px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 61px;
}

body.theme-dark .content-header {
    background: #0E1117;
    border-bottom-color: #24303c;
}

.user-info-cards {
    align-self: center;
    gap: 8px;
}

/* Slim down the user info card */
.user-info-card {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #2d3748;
    border-color: #3a4757;
    box-shadow: var(--shadow-card);
}

.user-info-name,
.user-info-role,
.user-info-customer {
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════
   6. KPI CARDS — semantic color coding
   ═══════════════════════════════════════════════ */

.sr-card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
    border-top: none;
    background: var(--color-surface);
}

.sr-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Enrolled card — primary blue */
.sr-card--enrolled {
    border-top-color: var(--color-primary);
}

.sr-card--enrolled .sr-card-value {
    color: var(--color-primary);
}

/* Active today card — success green */
.sr-card--active {
    border-top-color: var(--color-success);
}

.sr-card--active .sr-card-value {
    color: var(--color-success);
}

/* Watching card — warning amber */
.sr-card--watching {
    border-top-color: var(--color-warning);
    background: #fffaf0;
}

.sr-card--watching .sr-card-value {
    color: var(--color-warning);
}

.sr-card--watching .sr-card-label {
    color: #b7791f;
}

/* Alerts card — danger red */
.sr-card--alerts {
    border-top-color: var(--color-danger);
    background: #fff8f8;
}

.sr-card--alerts .sr-card-value {
    color: var(--color-danger);
}

.sr-card--alerts .sr-card-label {
    color: #c53030;
}

/* Show zero-alert state differently */
.sr-card--alerts[data-count="0"] {
    border-top-color: var(--color-success);
    background: var(--color-surface);
}

.sr-card--alerts[data-count="0"] .sr-card-value {
    color: var(--color-success);
}

/* Cards grid — add a proper grid layout */
.site-report-cards {
    display: grid;
    grid-template-columns: repeat(4, 140px);
    gap: 14px;
    margin-bottom: 6px;
    justify-content: start;
}

/* Dark mode KPI cards */
body.theme-dark .sr-card {
    background: #0f141b;
    border-color: #24303c;
}

body.theme-dark .sr-card--alerts {
    background: rgba(229, 62, 62, 0.06);
}

body.theme-dark .sr-card--alerts[data-count="0"] {
    background: #0f141b;
}

/* ═══════════════════════════════════════════════
   7. ATTENTION BLOCKS — severity color cues
   ═══════════════════════════════════════════════ */

.sr-att-block {
    border-left: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.sr-att-block--stale {
    border-left-color: var(--color-warning);
}

.sr-att-block--stale .sr-att-block-title {
    background: rgba(214, 158, 46, 0.08);
    color: #744210;
    border-bottom-color: rgba(214, 158, 46, 0.2);
}

.sr-att-block--battery {
    border-left-color: #e07a1c;
}

.sr-att-block--battery .sr-att-block-title {
    background: rgba(224, 122, 28, 0.07);
    color: #744210;
    border-bottom-color: rgba(224, 122, 28, 0.2);
}

.sr-att-block--anomaly {
    border-left-color: var(--color-danger);
}

.sr-att-block--anomaly .sr-att-block-title {
    background: rgba(229, 62, 62, 0.07);
    color: #742a2a;
    border-bottom-color: rgba(229, 62, 62, 0.2);
}

/* Dark mode attention blocks */
body.theme-dark .sr-att-block {
    background: #0f141b;
    border-color: #24303c;
    border-left-width: 0;
}

body.theme-dark .sr-att-block--stale {
    border-left-color: var(--color-warning);
}

body.theme-dark .sr-att-block--battery {
    border-left-color: #e07a1c;
}

body.theme-dark .sr-att-block--anomaly {
    border-left-color: var(--color-danger);
}

body.theme-dark .sr-att-block-title {
    background: #0e1420;
    color: #94a3b8;
    border-bottom-color: #24303c;
}

body.theme-dark .sr-att-toggle {
    border-color: #24303c;
    color: #e2e8f0;
}

body.theme-dark .sr-att-toggle:hover {
    border-color: #3b4a5a;
    color: #ffffff;
}

body.theme-dark .sr-att-row {
    background: #111827;
    border-color: #1e2a38;
}

body.theme-dark .sr-att-patient {
    color: #e2e8f0;
}

body.theme-dark .sr-att-detail {
    color: #94a3b8;
}

body.theme-dark .sr-att-metric-list {
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════
   8. DRILL DOWN BUTTON — clear CTA
   ═══════════════════════════════════════════════ */

.sr-drill-btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-primary);
    border-color: rgba(102, 126, 234, 0.3);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0;
}

.sr-drill-btn:hover {
    background: rgba(102, 126, 234, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.theme-dark .sr-drill-btn {
    background: #1a2535;
    border-color: #2a3a4a;
    color: #7dd3fc;
}

body.theme-dark .sr-drill-btn:hover {
    background: #1e3248;
    border-color: #7dd3fc;
}

/* ═══════════════════════════════════════════════
   9. STATUS PILLS — more visually distinct
   ═══════════════════════════════════════════════ */

.sr-status-pill {
    font-size: 0.83rem;
    font-weight: 600;
    padding: 7px 14px;
    gap: 8px;
    transition: box-shadow var(--transition);
    border: none;
    outline: none;
    box-shadow: none;
}

.sr-status-pill--ok {
    border-color: rgba(56, 161, 105, 0.3);
    background: rgba(56, 161, 105, 0.07);
    color: #22543d;
}

.sr-status-pill--watch {
    border-color: rgba(214, 158, 46, 0.35);
    background: rgba(214, 158, 46, 0.1);
    color: #744210;
}

.sr-status-pill--alert {
    border-color: rgba(229, 62, 62, 0.35);
    background: rgba(229, 62, 62, 0.08);
    color: #742a2a;
    font-weight: 700;
}

/* Alert severity pill (e.g. "Critical") — remove border outline */
.sr-pill--alert {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Enlarge status dots for better visibility */
.sr-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

/* Dark mode status pills */
body.theme-dark .sr-status-pill {
    background: #0f141b;
    border-color: #2a3a4a;
    color: #94a3b8;
}

body.theme-dark .sr-status-pill--ok {
    border-color: rgba(56, 161, 105, 0.35);
    background: rgba(56, 161, 105, 0.1);
    color: #68d391;
}

body.theme-dark .sr-status-pill--watch {
    border-color: rgba(214, 158, 46, 0.35);
    background: rgba(214, 158, 46, 0.1);
    color: #f6ad55;
}

body.theme-dark .sr-status-pill--alert {
    border-color: rgba(229, 62, 62, 0.35);
    background: rgba(229, 62, 62, 0.08);
    color: #fc8181;
}

/* ═══════════════════════════════════════════════
   10. TABLE IMPROVEMENTS
   ═══════════════════════════════════════════════ */

/* Hover rows in site report table */
.site-report-table tbody tr {
    transition: background var(--transition);
}

.site-report-table tbody tr:hover {
    background: #f7f9ff;
}

body.theme-dark .site-report-table tbody tr:hover {
    background: #111827;
}

/* ── Protocol metrics: progress bar + toned values ── */
.sr-metric-value {
    font-weight: 400;
}
.sr-metric-value--ok {
    color: #2f855a;
}
.sr-metric-value--watch {
    color: #d69e2e;
}
.sr-metric-value--alert {
    color: #c53030;
}

.sr-progress {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sr-progress-bar {
    width: 92px;
    height: 8px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

.sr-progress-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
}

.sr-progress-fill--ok {
    background: #2f855a;
}
.sr-progress-fill--watch {
    background: #d69e2e;
}
.sr-progress-fill--alert {
    background: #c53030;
}

.sr-progress-label {
    color: #4a5568;
    font-weight: 400;
    min-width: 36px;
}

body.theme-dark .sr-progress-bar {
    background: #1f2937;
}
body.theme-dark .sr-progress-label {
    color: #cbd5e0;
}
body.theme-dark .sr-metric-value--ok {
    color: #68d391;
}
body.theme-dark .sr-metric-value--watch {
    color: #f6ad55;
}
body.theme-dark .sr-metric-value--alert {
    color: #fc8181;
}

/* Device Status table rows */
.device-status-table tbody tr:hover,
.device-table tbody tr:hover {
    background: #f7f9ff;
}

body.theme-dark .device-status-table tbody tr:hover,
body.theme-dark .device-table tbody tr:hover {
    background: #111827;
}

/* ═══════════════════════════════════════════════
   11. SITE REPORT TABLE WRAP — better shadow
   ═══════════════════════════════════════════════ */

.site-report-table-wrap {
    box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════════════
   12. SITE REPORT TITLE — cleaner layout
   ═══════════════════════════════════════════════ */

.site-report-title {
    margin-bottom: 16px;
}

#sr-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 2px;
}

body.theme-dark #sr-title {
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════
   13. DIVIDERS — subtle spacing
   ═══════════════════════════════════════════════ */

.site-report-divider {
    margin: 22px 0 16px;
    background: var(--color-border);
}

body.theme-dark .site-report-divider {
    background: #24303c;
}

/* ═══════════════════════════════════════════════
   14. BRAND LABEL — less intrusive
   ═══════════════════════════════════════════════ */

.main-bottom-right-brand {
    font-size: 0.7rem;
    font-weight: 500;
    color: #a0aec0 !important;
    opacity: 0.6;
    letter-spacing: 0.02em;
}

body.theme-dark .main-bottom-right-brand {
    color: #4a5568 !important;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════
   15. LOADING STATES — spinner dots visible on all backgrounds
   ═══════════════════════════════════════════════ */

/* Fix spinner dots being invisible on white backgrounds */
.spinner-dot {
    background: #a0aec0;
}

body.theme-dark .spinner-dot {
    background: #4a5568;
}

.dash-loading {
    gap: 10px;
    color: var(--color-neutral);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════
   16. BUTTONS — unified design system
   ═══════════════════════════════════════════════ */

/* Primary button — consistent fill style */
.btn-primary,
.monitoring-add-btn,
.monitoring-actions .btn-outline-teal {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    font-weight: 600;
    border-radius: 8px;
    transition: background var(--transition), box-shadow var(--transition);
}

.btn-primary:hover,
.monitoring-add-btn:hover {
    background: #5a6fd8 !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

/* New Alert button standardize */
.btn-add-alarm,
button[onclick*="alarm"],
.btn-outline-green {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* ═══════════════════════════════════════════════
   17. COMPLIANCE PAGE — study accordion improvements
   ═══════════════════════════════════════════════ */

.investigation-box {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.investigation-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════
   18. ALERTS PAGE — better empty / loading state
   ═══════════════════════════════════════════════ */

#alarms-container .loading-text,
.alarms-loading {
    color: var(--color-neutral);
    font-size: 0.88rem;
    gap: 8px;
}

/* ═══════════════════════════════════════════════
   19. MAIN CONTENT — add slight top padding so
       sticky header doesn't overlap the first content
   ═══════════════════════════════════════════════ */

.main-content {
    padding-top: 24px;
}

.home-metrics.site-report-page {
    padding-top: 8px;
}

/* ═══════════════════════════════════════════════
   20. RESPONSIVE — tighten on smaller viewports
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
    .site-report-cards {
        grid-template-columns: 1fr;
    }

    .content-header {
        flex-wrap: wrap;
        padding: 8px 16px;
    }
}

/* ═══════════════════════════════════════════════
   21. DARK MODE — COMPREHENSIVE OVERRIDES
   Covers all elements that lack dark mode styling
   in the original style.css.
   ═══════════════════════════════════════════════ */

/* ── Study / Site dropdowns ── */
body.theme-dark .dash-study-selector-input {
    background: #121a23;
    border-color: #2a3a4a;
    color: #e2e8f0;
}

body.theme-dark .dash-study-selector-input:hover {
    border-color: #3a4a5c;
}

body.theme-dark .dash-study-selector-input:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

body.theme-dark .dash-study-selector-label {
    color: #94a3b8;
}

/* ── Monitoring empty state ── */
body.theme-dark .monitoring-empty-card,
body.theme-dark .investigation-empty-card {
    background: #0f141b;
    border-color: #24303c;
}

body.theme-dark .monitoring-empty-card h2,
body.theme-dark .investigation-empty-card h2 {
    color: #e2e8f0;
}

body.theme-dark .monitoring-empty-card p,
body.theme-dark .investigation-empty-card p {
    color: #94a3b8;
}

/* ── Compliance study cards ── */
body.theme-dark .dash-study-card {
    background: #0f141b;
    border-color: #24303c;
    box-shadow: none;
}

body.theme-dark .dash-study-card--open {
    border-color: rgba(45, 212, 191, 0.55);
}

body.theme-dark .dash-study-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .dash-study-name {
    color: #e2e8f0;
}

body.theme-dark .dash-badge {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

/* ── Device status / analytics cards ── */
body.theme-dark .analytics-card {
    background: #0f141b;
    border-color: #24303c;
    box-shadow: none;
}

body.theme-dark .analytics-card-title {
    color: #e2e8f0;
}

body.theme-dark .analytics-shape {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

/* ── Alerts page containers ── */
body.theme-dark .alarms-table-section {
    color: #e2e8f0;
    background: #0f141b;
    border: 1px solid #24303c;
    border-radius: 12px;
}

body.theme-dark .alarms-table-section h2 {
    color: #e2e8f0;
}

body.theme-dark .alarms-table {
    background: transparent;
    color: #e2e8f0;
}

body.theme-dark .alarms-table select,
body.theme-dark .alarms-table option {
    background: #121a23;
    color: #e2e8f0;
}

body.theme-dark .alarms-table select {
    border-color: #24303c;
}

/* ── Settings modal (investigation settings) ── */
body.theme-dark .settings-modal-content,
body.theme-dark .modal-container.settings-modal-container {
    background: #0f141b;
    border-color: #24303c;
}

body.theme-dark .settings-modal-body {
    background: #0f141b;
}

body.theme-dark .settings-sidebar {
    background: #121a23;
    border-right-color: #24303c;
}

body.theme-dark .settings-tab {
    color: #94a3b8;
}

body.theme-dark .settings-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

body.theme-dark .settings-tab.active {
    background: rgba(45, 212, 191, 0.12);
    color: #2dd4bf;
    border-left-color: #2dd4bf;
}

body.theme-dark .alarms-table th {
    background: #121a23;
    color: #cbd5e1;
    border-bottom-color: #24303c;
}

body.theme-dark .alarms-table td {
    border-bottom-color: #24303c;
}

/* ── Dashboard reload button ── */
body.theme-dark .home-reload-btn {
    background: #121a23;
    border-color: #2a3a4a;
    color: #94a3b8;
}

body.theme-dark .home-reload-btn:hover {
    background: #1a2535;
    color: #e2e8f0;
}

/* ── Site report title & subtitle ── */
body.theme-dark .site-report-title-main h1,
body.theme-dark #sr-title {
    color: #e2e8f0;
}

body.theme-dark .site-report-subtitle,
body.theme-dark #sr-subtitle {
    color: #64748b;
}

/* ── Protocol Metrics table ── */
body.theme-dark .site-report-table-wrap {
    background: #0f141b;
    border-color: #1e2a38;
}

body.theme-dark .site-report-table thead th {
    background: #0e1420;
    color: #94a3b8;
    border-bottom-color: #1e2a38;
}

body.theme-dark .site-report-table tbody td {
    color: #cbd5e1;
    border-bottom-color: #1a2535;
}

body.theme-dark .site-report-table tbody tr:last-child td {
    border-bottom: none;
}

body.theme-dark .sr-table-empty {
    color: #64748b;
}

/* ── Status pills (dark mode) ── */
body.theme-dark .sr-status-pill--ok {
    border-color: rgba(56, 161, 105, 0.4);
    background: rgba(56, 161, 105, 0.12);
    color: #68d391;
}

body.theme-dark .sr-status-pill--watch {
    border-color: rgba(214, 158, 46, 0.4);
    background: rgba(214, 158, 46, 0.1);
    color: #f6ad55;
}

body.theme-dark .sr-status-pill--alert {
    border-color: rgba(229, 62, 62, 0.4);
    background: rgba(229, 62, 62, 0.1);
    color: #fc8181;
}

/* ── Default sr-pill (grey) ── */
body.theme-dark .sr-pill {
    background: #1a2535;
    border-color: #2a3a4a;
    color: #94a3b8;
}

body.theme-dark .sr-pill--watch {
    background: rgba(214, 158, 46, 0.15);
    border-color: rgba(214, 158, 46, 0.3);
    color: #f6ad55;
}

body.theme-dark .sr-pill--alert {
    background: rgba(229, 62, 62, 0.15);
    border-color: rgba(229, 62, 62, 0.3);
    color: #fc8181;
}

/* ── Attention section ── */
body.theme-dark .sr-att-block {
    background: #0f141b;
    border-color: #1e2a38;
}

body.theme-dark .sr-att-block--stale .sr-att-block-title {
    background: rgba(214, 158, 46, 0.08);
    color: #f6ad55;
    border-bottom-color: rgba(214, 158, 46, 0.2);
}

body.theme-dark .sr-att-block--battery .sr-att-block-title {
    background: rgba(224, 122, 28, 0.08);
    color: #fb923c;
    border-bottom-color: rgba(224, 122, 28, 0.2);
}

body.theme-dark .sr-att-block--anomaly .sr-att-block-title {
    background: rgba(229, 62, 62, 0.08);
    color: #fc8181;
    border-bottom-color: rgba(229, 62, 62, 0.2);
}

body.theme-dark .sr-att-row {
    background: #111827;
    border-color: #1e2a38;
}

body.theme-dark .sr-att-patient {
    color: #e2e8f0;
}

body.theme-dark .sr-att-detail {
    color: #94a3b8;
}

body.theme-dark .sr-att-empty {
    color: #64748b;
}

/* ── Drilldown modal ── */
body.theme-dark .modal-overlay {
    background: rgba(0, 0, 0, 0.65);
}

body.theme-dark .modal-container .modal-content,
body.theme-dark .modal-content {
    background: #0f141b;
    border: 1px solid #1e2a38;
    color: #e2e8f0;
}

body.theme-dark .modal-header {
    background: #0e1420;
    border-bottom-color: #1e2a38;
}

body.theme-dark .modal-header h2 {
    color: #e2e8f0;
}

body.theme-dark .modal-close {
    color: #64748b;
}

body.theme-dark .modal-close:hover {
    color: #e2e8f0;
}

body.theme-dark .modal-body {
    background: #0f141b;
}

body.theme-dark .sr-modal-text {
    color: #cbd5e1;
}

/* ── Monitoring station modal ── */
body.theme-dark .monitoring-modal {
    background: #0f141b;
    border-color: #1e2a38;
}

body.theme-dark .monitoring-modal-header {
    border-bottom-color: #1e2a38;
    background: #0e1420;
}

body.theme-dark .monitoring-modal-header h2 {
    color: #e2e8f0;
}

body.theme-dark .monitoring-modal-close {
    color: #64748b;
}

body.theme-dark .monitoring-modal-body {
    color: #cbd5e1;
}

/* ── Compliance page ── */
body.theme-dark .compliance-title-block h1 {
    color: #e2e8f0;
}

body.theme-dark .compliance-title-block p {
    color: #94a3b8;
}

body.theme-dark .compliance-chip {
    background: #1a2535;
    color: #94a3b8;
}

body.theme-dark .compliance-chip-secondary {
    background: rgba(229, 62, 62, 0.1);
    color: #fc8181;
}

body.theme-dark .compliance-patient-chip {
    background: rgba(102, 126, 234, 0.15);
    color: #a5b4fc;
}

body.theme-dark .compliance-overall-score .score-main {
    color: #e2e8f0;
}

body.theme-dark .compliance-overall-score .score-suffix {
    color: #64748b;
}

body.theme-dark .compliance-overall-bar {
    background: #1e2a38;
}

body.theme-dark .compliance-overall-subtext {
    color: #94a3b8;
}

body.theme-dark .compliance-issues-list li {
    color: #94a3b8;
}

body.theme-dark .compliance-issues-label {
    color: #cbd5e1;
}

body.theme-dark .compliance-issues-note {
    color: #64748b;
}

body.theme-dark .compliance-metric-label {
    color: #e2e8f0;
}

body.theme-dark .compliance-metric-context,
body.theme-dark .compliance-metric-value {
    color: #94a3b8;
}

body.theme-dark .compliance-metric-highlight {
    color: #e2e8f0;
}

body.theme-dark .compliance-metric-bar {
    background: #1e2a38;
}

body.theme-dark .compliance-metric-score {
    color: #64748b;
}

body.theme-dark .compliance-placeholder {
    color: #64748b;
}

body.theme-dark .compliance-inline-loading {
    color: #64748b;
}

body.theme-dark .compliance-device-name {
    color: #e2e8f0;
}

body.theme-dark .compliance-device-model,
body.theme-dark .compliance-device-details {
    color: #94a3b8;
}

body.theme-dark .compliance-device-desc,
body.theme-dark .compliance-device-empty {
    color: #64748b;
}

/* ── Device Status page ── */
body.theme-dark .device-status-title h1,
body.theme-dark .page-title-h1 {
    color: #e2e8f0;
}

/* ── Alerts page ── */
body.theme-dark .alerts-header h1 {
    color: #e2e8f0;
}

/* ── Generic input/select dark styling ── */
body.theme-dark input[type="text"],
body.theme-dark input[type="search"],
body.theme-dark input[type="email"],
body.theme-dark input[type="number"],
body.theme-dark select,
body.theme-dark textarea {
    background: #121a23;
    border-color: #2a3a4a;
    color: #e2e8f0;
}

body.theme-dark input[type="text"]::placeholder,
body.theme-dark input[type="search"]::placeholder {
    color: #4a5568;
}

/* ── Page headings in the main-content area ── */
body.theme-dark .main-content h1:not(.sr-title-exception) {
    color: #e2e8f0;
}

body.theme-dark .main-content h2 {
    color: #cbd5e1;
}

body.theme-dark .main-content p {
    color: #94a3b8;
}

/* ── Sticky header dark mode ── */
body.theme-dark .content-header {
    background: #0E1117;
    border-bottom-color: #1e2a38;
}