/* ============================================================
   CORNERSTONE — THEME VARIABLES
   Light tokens on :root, dark tokens on [data-theme="dark"].

   Naming convention:
   --bg-*        page/surface backgrounds
   --surface-*   card, modal, dropdown surfaces
   --text-*      text colours
   --border-*    borders and dividers
   --accent-*    primary brand blue
   --sidebar-*   sidebar-specific tokens (always dark in light theme,
                 slightly adjusted in dark theme)
   --status-*    clinical status colours (kept accessible in both modes)
   ============================================================ */

/* ── LIGHT THEME (default) ──────────────────────────────────────────────── */
:root {
    /* Page */
    --bg-base: #f0f2f5;
    --bg-surface: #ffffff;
    --bg-elevated: #f8fafc;
    --bg-hover: #e6f3ff;

    /* Text */
    --text-primary: #2c3e50;
    --text-secondary: #555555;
    --text-muted: #6c757d;
    --text-inverse: #ffffff;

    /* Borders */
    --border: #ddd;
    --border-light: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Accent (primary blue) */
    --accent: #095a90;
    --accent-hover: #2980b9;
    --accent-light: #ebf5ff;
    --accent-dark: #1565C0;
    --accent-focus-ring: rgba(59, 130, 246, 0.12);

    /* Sidebar — stays dark even in light mode */
    --sidebar-bg: #1e293b;
    --sidebar-text: #f1f5f9;
    --sidebar-muted: #e2e8f0;
    --sidebar-active: #334155;
    --sidebar-hover: rgba(255, 255, 255, 0.03);
    --sidebar-profile: #243241;
    --sidebar-icon-bg: rgba(255, 255, 255, 0.03);
    --sidebar-icon-active: #1e3a8a;
    --sidebar-scrollbar: #475569;
    --sidebar-tooltip-bg: #334155;

    /* Cards */
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --card-icon: #3498db;
    --card-heading: #2c3e50;

    /* Tables */
    --table-bg: #ffffff;
    --table-th-bg: linear-gradient(135deg, #ffffff, #e8eef3);
    --table-th-text: #2c3e50;
    --table-td-text: #333;
    --table-border: #ddd;
    --table-row-hover: #e6f3ff;
    --table-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Modals */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-blur-overlay: rgba(15, 23, 42, 0.55);
    --modal-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --modal-heading: #2c3e50;
    --modal-text: #333;
    --modal-footer-bg: #f8fafc;
    --modal-footer-border: #e2e8f0;
    --close-btn-color: #666;
    --close-btn-hover: #333;

    /* Forms */
    --input-bg: #ffffff;
    --input-bg-alt: #f8fafc;
    --input-border: #e2e8f0;
    --input-border-focus: #3b82f6;
    --input-text: #1e293b;
    --input-placeholder: #94a3b8;
    --select-bg: #ffffff;

    /* Toasts */
    --toast-bg: #ffffff;
    --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --toast-text: inherit;

    /* Notification dropdown */
    --notif-bg: #ffffff;
    --notif-header-bg: #f8f9fa;
    --notif-border: #eee;
    --notif-hover: #f8f9fa;
    --notif-unread: #ebf5ff;
    --notif-text-muted: #7f8c8d;
    --bell-icon: #2c3e50;

    /* Study drawer */
    --drawer-bg: #f9f9f9;
    --drawer-border-top: #f0f2f5;

    /* Comment/share modal body */
    --comment-list-bg: #f8fafc;
    --comment-list-border: #e2e8f0;
    --comment-item-border: #f1f5f9;
    --comment-text: #1e293b;
    --comment-expired-bg: #fafafa;
    --comment-expired-text: #94a3b8;
    --comment-input-bg: #f8fafc;

    /* More-options / viewer dropdown */
    --dropdown-bg: #ffffff;
    --dropdown-border: #ddd;
    --dropdown-item-text: #2c3e50;
    --dropdown-item-hover-bg: #f0f4ff;
    --dropdown-item-hover-text: #1565C0;
    --dropdown-item-border: #f0f0f0;
    --more-options-hover: #f0f2f5;
    --viewer-btn-bg: #1565C0;
    --viewer-btn-hover: #0D47A1;

    /* Search section */
    --search-label: #2c3e50;
    --search-input-border: #ddd;

    /* Pagination text */
    --pagination-text: #2c3e50;

    /* Status row highlights */
    --row-reporting: #FFFFE0;
    --row-sent-pacs: #ADD8E6;

    /* Upload drop zone */
    --dropzone-border: #3498db;
    --dropzone-bg: #ebf5ff;
    --filelist-bg: #f8fafc;
    --filelist-border: #e2e8f0;
    --filelist-item-border: #eee;

    /* Progress bar track */
    --progress-track-bg: #ddd;

    /* Footer */
    --footer-text: #6c757d;

    /* Welcome heading */
    --welcome-text: #2c3e50;

    /* reg-modal (whitelist) */
    --reg-modal-header-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --reg-modal-header-border: #93c5fd;
    --reg-modal-icon-bg: #3b82f6;
    --reg-modal-h2: #1e40af;
    --reg-modal-p: #3b82f6;
    --reg-modal-close-bg: rgba(59, 130, 246, 0.12);
    --reg-modal-close-hover: rgba(59, 130, 246, 0.22);
    --reg-modal-close-text: #1e40af;
    --reg-body-input-bg: #f8fafc;
    --reg-body-input-border: #e2e8f0;
    --reg-body-input-text: #1e293b;

    /* wl-step-intro */
    --wl-intro-bg: #f8fafc;
    --wl-intro-border: #e2e8f0;
    --wl-intro-text: #475569;

    /* wl-radio */
    --wl-radio-bg: #fafafa;
    --wl-radio-border: #e2e8f0;
    --wl-radio-checked-bg: #f0fdf4;
    --wl-radio-checked-border: #059669;

    /* wl-confirm */
    --wl-confirm-bg: #f0fdf4;
    --wl-confirm-border: #bbf7d0;
    --wl-confirm-text: #065f46;

    /* destination toggle */
    --toggle-bg: #f8fafc;
    --toggle-border: #e2e8f0;
    --toggle-text-bg: #ffffff;
    --toggle-text-border: #cbd5e1;
    --toggle-text-color: #64748b;

    /* user-list */
    --user-list-border: #ddd;
    --user-item-hover: #f0f2f5;

    /* scrollbars (page-level) */
    --scrollbar-thumb: #888;
    --scrollbar-thumb-hover: #555;

    /* assign form */
    --assign-select-bg: white;
    --assign-select-border: #ddd;

    /* notification-bell badge */
    --bell-badge-bg: #e74c3c;
}

/* ── DARK THEME ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Page */
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --bg-elevated: #273449;
    --bg-hover: #1e3a5f;

    /* Text */
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;

    /* Borders */
    --border: #334155;
    --border-light: #2d3f55;
    --border-strong: #475569;

    /* Accent */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: #1e3a5f;
    --accent-dark: #60a5fa;
    --accent-focus-ring: rgba(59, 130, 246, 0.25);

    /* Sidebar — slightly lighter in dark mode for contrast */
    --sidebar-bg: #0f172a;
    --sidebar-text: #f1f5f9;
    --sidebar-muted: #e2e8f0;
    --sidebar-active: #1e293b;
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-profile: #1a2840;
    --sidebar-icon-bg: rgba(255, 255, 255, 0.04);
    --sidebar-icon-active: #1e3a8a;
    --sidebar-scrollbar: #334155;
    --sidebar-tooltip-bg: #1e293b;

    /* Cards */
    --card-bg: #1e293b;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --card-icon: #60a5fa;
    --card-heading: #e2e8f0;

    /* Tables */
    --table-bg: #1e293b;
    --table-th-bg: linear-gradient(135deg, #1e293b, #273449);
    --table-th-text: #e2e8f0;
    --table-td-text: #cbd5e1;
    --table-border: #334155;
    --table-row-hover: #1e3a5f;
    --table-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

    /* Modals */
    --modal-bg: #1e293b;
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --modal-blur-overlay: rgba(2, 8, 23, 0.75);
    --modal-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --modal-heading: #e2e8f0;
    --modal-text: #cbd5e1;
    --modal-footer-bg: #162032;
    --modal-footer-border: #334155;
    --close-btn-color: #94a3b8;
    --close-btn-hover: #e2e8f0;

    /* Forms */
    --input-bg: #273449;
    --input-bg-alt: #1e293b;
    --input-border: #334155;
    --input-border-focus: #3b82f6;
    --input-text: #e2e8f0;
    --input-placeholder: #64748b;
    --select-bg: #273449;

    /* Toasts */
    --toast-bg: #1e293b;
    --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --toast-text: #e2e8f0;

    /* Notification dropdown */
    --notif-bg: #1e293b;
    --notif-header-bg: #162032;
    --notif-border: #334155;
    --notif-hover: #273449;
    --notif-unread: #1e3a5f;
    --notif-text-muted: #94a3b8;
    --bell-icon: #94a3b8;

    /* Study drawer */
    --drawer-bg: #162032;
    --drawer-border-top: #0f172a;

    /* Comment modal body */
    --comment-list-bg: #162032;
    --comment-list-border: #334155;
    --comment-item-border: #1e293b;
    --comment-text: #e2e8f0;
    --comment-expired-bg: #0f172a;
    --comment-expired-text: #64748b;
    --comment-input-bg: #162032;

    /* More-options / viewer dropdown */
    --dropdown-bg: #1e293b;
    --dropdown-border: #334155;
    --dropdown-item-text: #cbd5e1;
    --dropdown-item-hover-bg: #1e3a5f;
    --dropdown-item-hover-text: #60a5fa;
    --dropdown-item-border: #273449;
    --more-options-hover: #273449;
    --viewer-btn-bg: #1d4ed8;
    --viewer-btn-hover: #1e40af;

    /* Search section */
    --search-label: #cbd5e1;
    --search-input-border: #334155;

    /* Pagination text */
    --pagination-text: #cbd5e1;

    /* Status row highlights */
    --row-reporting: #563e1795;
    --row-sent-pacs: #003049;

    /* Upload drop zone */
    --dropzone-border: #3b82f6;
    --dropzone-bg: #1e3a5f;
    --filelist-bg: #162032;
    --filelist-border: #334155;
    --filelist-item-border: #273449;

    /* Progress bar track */
    --progress-track-bg: #334155;

    /* Footer */
    --footer-text: #64748b;

    /* Welcome heading */
    --welcome-text: #e2e8f0;

    /* reg-modal (whitelist) */
    --reg-modal-header-bg: linear-gradient(135deg, #1e3a5f 0%, #162032 100%);
    --reg-modal-header-border: #1e3a8a;
    --reg-modal-icon-bg: #1d4ed8;
    --reg-modal-h2: #93c5fd;
    --reg-modal-p: #60a5fa;
    --reg-modal-close-bg: rgba(59, 130, 246, 0.15);
    --reg-modal-close-hover: rgba(59, 130, 246, 0.3);
    --reg-modal-close-text: #93c5fd;
    --reg-body-input-bg: #162032;
    --reg-body-input-border: #334155;
    --reg-body-input-text: #e2e8f0;

    /* wl-step-intro */
    --wl-intro-bg: #162032;
    --wl-intro-border: #334155;
    --wl-intro-text: #94a3b8;

    /* wl-radio */
    --wl-radio-bg: #162032;
    --wl-radio-border: #334155;
    --wl-radio-checked-bg: #0d2818;
    --wl-radio-checked-border: #059669;

    /* wl-confirm */
    --wl-confirm-bg: #0d2818;
    --wl-confirm-border: #166534;
    --wl-confirm-text: #4ade80;

    /* destination toggle */
    --toggle-bg: #162032;
    --toggle-border: #334155;
    --toggle-text-bg: #1e293b;
    --toggle-text-border: #334155;
    --toggle-text-color: #94a3b8;

    /* user-list */
    --user-list-border: #334155;
    --user-item-hover: #273449;

    /* scrollbars */
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;

    /* assign form */
    --assign-select-bg: #273449;
    --assign-select-border: #334155;

    /* notification-bell badge */
    --bell-badge-bg: #dc2626;

    /* Login page */
    --login-form-bg: rgba(30, 41, 59, 0.97);
    --login-form-border: rgba(51, 65, 85, 0.8);
    --login-form-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
    --login-label: #cbd5e1;
    --login-input-bg: #273449;
    --login-input-border: #334155;
    --login-input-text: #e2e8f0;
    --login-input-placeholder: #64748b;
    --login-heading: #e2e8f0;
    --login-subheading: #94a3b8;
    --login-link: #60a5fa;
    --login-check-label: #cbd5e1;
    --login-error-bg: #3b0000;
    --login-error-border: #7f1d1d;
    --login-error-text: #fca5a5;
    --login-consent-bg: #1e293b;
    --login-consent-body-bg: #162032;
    --login-consent-title: #e2e8f0;
    --login-consent-text: #cbd5e1;
    --login-consent-border: #334155;
    /* Auth pipeline card in dark mode */
    --auth-card-bg: #1e293b;
    --auth-card-border: rgba(51, 65, 85, 0.7);
    --auth-node-ring-bg: #273449;
    --auth-node-ring-border: #334155;
    --auth-node-icon: #475569;
    --auth-node-label: #64748b;
    --auth-connector-bg: #334155;
    --auth-status-text: #94a3b8;
    --auth-overlay-bg: rgba(15, 23, 42, 0.97);
    --auth-footer-border: #273449;
}

/* ============================================================
   APPLY TOKENS TO ELEMENTS
   Only what can't be done by replacing hex in dashboard.css.
   These rules bridge CSS variables into every component.
   ============================================================ */

/* Page */
body:not(.login-page) {
    background: var(--bg-base);
    color: var(--text-primary);
}

/* Sidebar */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

.toggle-sidebar-btn {
    background: var(--sidebar-bg);
    color: var(--sidebar-muted);
}

.toggle-sidebar-btn:hover {
    background: var(--sidebar-active);
}

.profile {
    background: var(--sidebar-profile);
}

.profile-img {
    background: var(--sidebar-scrollbar);
}

.online-indicator {
    border-color: var(--sidebar-bg);
}

.menu-item:hover {
    background: var(--sidebar-hover);
}

.menu-item.active {
    background: var(--sidebar-active);
}

.menu-item i {
    background: var(--sidebar-icon-bg);
    color: var(--sidebar-muted);
}

.menu-item.active i {
    background: var(--sidebar-icon-active);
    color: #ffffff;
}

.menu-item span:not(.badge) {
    color: var(--sidebar-muted);
}

.sidebar.minimized .menu-item:hover span:not(.badge) {
    background: var(--sidebar-tooltip-bg);
    color: var(--sidebar-text);
}

.dropdown-content {
    background: var(--sidebar-active);
}

.dropdown-item {
    color: var(--sidebar-muted);
}

.dropdown-item:hover {
    background: var(--sidebar-scrollbar);
}

/* Main content */
.main-content {
    background: var(--bg-base);
}

.welcome {
    color: var(--welcome-text);
}

/* Cards */
.card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.card i {
    color: var(--card-icon);
}

.card h3 {
    color: var(--card-heading);
}

/* Section containers */
.recent-studies-section,
.assignment-section,
.search-section {
    background: var(--bg-surface);
    box-shadow: var(--card-shadow);
}

/* Tables */
.recent-studies-table,
.assigned-studies-table,
.search-results-table {
    background: var(--table-bg);
    box-shadow: var(--table-shadow);
}

.recent-studies-table th,
.assigned-studies-table th,
.search-results-table th {
    background: var(--table-th-bg);
    color: var(--table-th-text);
}

.recent-studies-table td,
.assigned-studies-table td,
.search-results-table td {
    color: var(--table-td-text);
    border-bottom-color: var(--table-border);
}

.recent-studies-table th,
.assigned-studies-table th,
.search-results-table th {
    border-bottom-color: var(--table-border);
}

.recent-studies-table tr:hover,
.assigned-studies-table tr:hover,
.search-results-table tr:hover {
    background: var(--bg-hover);
}

/* Status row highlights */
.active-reporting {
    background-color: var(--row-reporting) !important;
}

.sent-to-pacs {
    background-color: var(--row-sent-pacs) !important;
}

/* Study drawer */
.study-drawer {
    background: var(--drawer-bg);
}

.study-drawer td {
    border-top-color: var(--drawer-border-top);
}

/* Study item cards */
.study-item {
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated));
}

.study-name {
    color: var(--accent-dark);
}

.study-meta {
    color: var(--text-primary);
}

.study-meta strong {
    color: var(--accent);
}

/* Modals */
.modal-content,
.metadata-modal,
.report-status-modal {
    background: var(--modal-bg);
    box-shadow: var(--modal-shadow);
}

.modal {
    background-color: var(--modal-overlay);
}

.metadata-modal h3,
.report-status-modal h3 {
    color: var(--modal-heading);
}

.metadata-modal p,
.report-status-modal p {
    color: var(--modal-text);
}

.close-modal {
    color: var(--close-btn-color);
}

.close-modal:hover {
    color: var(--close-btn-hover);
}

/* Share modal */
.share-modal {
    background: var(--modal-blur-overlay);
}

.share-modal .modal-content {
    background: var(--modal-bg);
}

.share-modal-body .form-group label {
    color: var(--text-primary);
}

.share-modal-body .form-group select,
.share-modal-body .form-group input,
.share-modal-body select.select-full {
    border-color: var(--input-border);
    color: var(--input-text);
    background: var(--input-bg-alt);
}

.share-modal-body .form-group select:focus,
.share-modal-body .form-group input:focus {
    border-color: #f59e0b;
    background: var(--modal-bg);
}

.share-modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-footer-border);
}

#linkArea label {
    color: var(--text-primary);
}

.share-link-row input {
    border-color: var(--input-border);
    color: var(--text-muted);
    background: var(--bg-elevated);
}

/* Comment modal */
.comment-modal {
    background: var(--modal-blur-overlay);
}

.comment-modal .modal-content {
    background: var(--modal-bg);
}

#commentList {
    border-color: var(--comment-list-border);
    background: var(--comment-list-bg);
}

#commentList p {
    border-bottom-color: var(--comment-item-border);
    color: var(--comment-text);
}

#commentList p.comment-expired {
    color: var(--comment-expired-text);
    background: var(--comment-expired-bg);
}

.comment-modal #commentInput {
    border-color: var(--input-border);
    color: var(--input-text);
    background: var(--comment-input-bg);
}

.comment-modal #commentInput:focus {
    border-color: #f59e0b;
    background: var(--modal-bg);
}

.comment-modal-footer,
.comment-modal .comment-modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-footer-border);
}

.comment-modal #charCount {
    color: var(--text-muted);
}

.comment-input-label {
    color: var(--text-primary);
}

/* Upload modal */
#uploadModal .modal-content {
    background: var(--modal-bg);
}

#uploadModal h2 {
    color: var(--modal-heading);
}

#uploadModal .form-group label {
    color: var(--modal-heading);
}

#uploadModal select,
#uploadModal input[type="text"],
#uploadModal input[type="date"] {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

#uploadModal .file-drop-zone {
    border-color: var(--dropzone-border);
    background: var(--dropzone-bg);
}

#uploadModal #fileList {
    background: var(--filelist-bg);
    border-color: var(--filelist-border);
}

#uploadModal #fileList div {
    border-bottom-color: var(--filelist-item-border);
    color: var(--text-primary);
}

#uploadModal #fileList::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

#uploadModal #fileList::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* PACS modal */
#pacsModal .modal-content {
    background: var(--modal-bg);
}

#pacsModal h3 {
    color: var(--modal-heading);
}

.destination-toggle-container {
    background: var(--toggle-bg);
    border-color: var(--toggle-border);
}

.toggle-text {
    background: var(--toggle-text-bg);
    border-color: var(--toggle-text-border);
    color: var(--toggle-text-color);
}

/* select.select-full */
.select-full {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* More-options dropdown */
.more-options-content {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.more-options-content a {
    color: var(--dropdown-item-text);
    border-bottom-color: var(--dropdown-item-border);
}

.more-options-content a:hover {
    background: var(--dropdown-item-hover-bg);
    color: var(--dropdown-item-hover-text);
}

.more-options {
    color: var(--text-muted);
}

.more-options:hover {
    background: var(--more-options-hover);
    color: var(--accent-dark);
}

/* Viewer dropdown */
.viewer-dropdown-menu {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.viewer-menu-item {
    color: var(--dropdown-item-text);
    border-bottom-color: var(--dropdown-item-border);
}

.viewer-menu-item:hover {
    background: var(--dropdown-item-hover-bg);
    color: var(--dropdown-item-hover-text);
}

.viewer-menu-item i {
    color: var(--accent-dark);
}

.viewer-submenu {
    background: var(--bg-elevated);
}

.viewer-submenu-item {
    background: var(--bg-elevated) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-light) !important;
}

.viewer-submenu-item:hover {
    background: var(--bg-hover) !important;
    color: var(--accent-dark) !important;
}

.viewer-toggle-btn {
    background-color: var(--viewer-btn-bg);
}

.viewer-toggle-btn:hover {
    background-color: var(--viewer-btn-hover);
}

/* Toasts */
.toast {
    background: var(--toast-bg);
    box-shadow: var(--toast-shadow);
    color: var(--toast-text);
}

/* Notification bell */
.notification-bell i {
    color: var(--bell-icon);
}

.notification-bell .dropdown {
    background: var(--notif-bg);
}

.dropdown-header {
    background: var(--notif-header-bg);
    border-bottom-color: var(--notif-border);
    color: var(--text-primary);
}

.notification-item {
    border-bottom-color: var(--notif-border);
    color: var(--text-primary);
}

.notification-item:hover {
    background: var(--notif-hover);
}

.notification-item.unread {
    background: var(--notif-unread);
}

.notification-item .time {
    color: var(--notif-text-muted);
}

.dropdown-divider {
    border-top-color: var(--notif-border);
}

/* Footer */
footer {
    color: var(--footer-text);
}

/* Search section form */
.search-section .form-group label {
    color: var(--search-label);
}

.search-section .form-group input,
.search-section .form-group select {
    border-color: var(--search-input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

/* Pagination */
.pagination span {
    color: var(--pagination-text);
}

/* Assign form */
.assign-form select {
    background: var(--assign-select-bg);
    border-color: var(--assign-select-border);
    color: var(--input-text);
}

/* User list */
.user-list {
    border-color: var(--user-list-border);
    background: var(--bg-surface);
}

.user-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

.user-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.user-item {
    color: var(--text-primary);
}

.user-item:hover {
    background: var(--user-item-hover);
}

/* Comment section (inside drawer) */
.comment-section {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.comment-section p {
    color: var(--text-primary);
}

.comment-section span {
    color: var(--text-muted);
}

.comment-section.comment-expired {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* Status icons */
.status-icon[title]:hover::after,
.report-status[title]:hover::after {
    background: var(--text-primary);
    color: var(--bg-surface);
}

/* Progress bar */
.progress-track {
    background: var(--progress-track-bg);
}

/* Upload patient search */
#uploadModal .patient-search-item {
    background: var(--bg-surface);
    border-color: var(--input-border);
    color: var(--text-primary);
}

#uploadModal .patient-search-item:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

#uploadModal .patient-search-item.selected {
    background: var(--accent-light);
    border-color: var(--accent);
}

#uploadModal .patient-search-item .patient-name {
    color: var(--accent);
}

#uploadModal .patient-search-item .patient-meta {
    color: var(--text-muted);
}

#patientSearchResults {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

/* Selected patient display */
#selectedPatientDisplay {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

#selectedPatientInfo {
    color: var(--text-primary);
}

/* Optional metadata section */
#optionalMetadataSection {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

.metadata-section-title {
    color: var(--modal-heading);
}

/* reg-modal / whitelist */
.reg-modal-overlay {
    background: var(--modal-blur-overlay);
}

.reg-modal-card {
    background: var(--modal-bg);
}

.reg-modal-header {
    background: var(--reg-modal-header-bg);
    border-bottom-color: var(--reg-modal-header-border);
}

.reg-modal-header-icon {
    background: var(--reg-modal-icon-bg);
}

.reg-modal-header-text h2 {
    color: var(--reg-modal-h2);
}

.reg-modal-header-text p {
    color: var(--reg-modal-p);
}

.reg-modal-close {
    background: var(--reg-modal-close-bg);
    color: var(--reg-modal-close-text);
}

.reg-modal-close:hover {
    background: var(--reg-modal-close-hover);
}

.reg-modal-body {
    background: var(--modal-bg);
}

.reg-modal-body .form-group label {
    color: var(--text-primary);
}

.reg-modal-body .form-group input,
.reg-modal-body .form-group select,
.reg-modal-body .form-group textarea {
    background: var(--reg-body-input-bg);
    border-color: var(--reg-body-input-border);
    color: var(--reg-body-input-text);
}

.reg-modal-body .form-group input:focus,
.reg-modal-body .form-group select:focus,
.reg-modal-body .form-group textarea:focus {
    border-color: var(--input-border-focus);
    background: var(--modal-bg);
    box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

.reg-modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-footer-border);
}

.reg-modal-footer .reg-btn-cancel {
    background: var(--modal-bg);
    color: var(--text-muted);
    border-color: var(--border-light);
}

.reg-modal-footer .reg-btn-cancel:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

.reg-modal-footer .reg-btn-nav {
    background: var(--modal-bg);
    color: var(--accent);
    border-color: var(--accent-light);
}

.reg-modal-footer .reg-btn-nav:hover {
    background: var(--accent-light);
}

/* wl patient strip */
.wl-patient-strip {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

.wl-strip-name {
    color: var(--text-primary);
}

.wl-strip-meta {
    color: var(--text-muted);
}

.wl-strip-sep {
    color: var(--text-muted);
}

/* wl step intro */
.wl-step-intro {
    background: var(--wl-intro-bg);
    border-color: var(--wl-intro-border);
    color: var(--wl-intro-text);
}

/* wl radio */
.wl-radio-label {
    background: var(--wl-radio-bg);
    border-color: var(--wl-radio-border);
}

.wl-radio-label:has(input:checked) {
    background: var(--wl-radio-checked-bg);
    border-color: var(--wl-radio-checked-border);
}

.wl-radio-text strong {
    color: var(--text-primary);
}

.wl-radio-text small {
    color: var(--text-muted);
}

/* wl confirm summary */
.wl-confirm-summary {
    background: var(--wl-confirm-bg);
    border-color: var(--wl-confirm-border);
}

.wl-summary-row {
    color: var(--wl-confirm-text);
}

/* wl baseline input */
.wl-baseline-input {
    background: var(--input-bg-alt);
    border-color: var(--input-border);
    color: var(--input-text);
}

.wl-search-icon {
    color: var(--text-muted);
}

.wl-results-dropdown {
    background: var(--modal-bg);
    border-color: var(--border-light);
}

.wl-selected-strip {
    background: var(--wl-radio-checked-bg);
    border-color: var(--wl-radio-checked-border);
    color: var(--wl-confirm-text);
}

.wl-result-item {
    color: var(--text-primary);
    border-bottom-color: var(--border-light);
}

.wl-result-item:hover,
.wl-result-item--hover {
    background: var(--wl-radio-checked-bg);
}

.wl-result-name {
    color: var(--text-primary);
}

.wl-result-meta {
    color: var(--text-muted);
}

.wl-result-id {
    color: var(--text-muted);
}

.wl-search-empty {
    color: var(--text-muted);
}

.wl-search-error {
    color: #ef4444;
}

.wl-hint-text {
    color: var(--text-muted);
}

.wl-field-hint {
    color: var(--text-muted);
}

.wl-optional {
    color: var(--text-muted);
}

.wl-ohif-hint {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--text-muted);
}

/* wl already tracked */
.wl-already-tracked {
    color: var(--text-primary);
}

/* Stepper dots — already use CSS vars for active/done; unchanged */

/* Table loading/error cells */
.table-retry-cell {
    color: #f97316;
}

.table-error-cell {
    color: #ef4444;
}

/* Action button disabled */
.action-btn:disabled {
    background: var(--border-strong);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Profile upload status (dark-aware) */
[data-theme="dark"] .profile-upload-status.uploading {
    color: #93c5fd;
    background: #1e3a5f;
}

[data-theme="dark"] .profile-upload-status.success {
    color: #4ade80;
    background: #0d2818;
}

[data-theme="dark"] .profile-upload-status.error {
    color: #fca5a5;
    background: #3b0000;
}

/* Notification severity badges — inline styles still work,
   but provide CSS fallback colours for dark mode */
[data-theme="dark"] .notif-condition {
    color: var(--text-secondary);
}

/* Mobile menu button */
.mobile-menu-btn {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.mobile-menu-btn:hover {
    background: var(--sidebar-active);
}

/* Sidebar overlay backdrop */
.sidebar-overlay {
    background: var(--modal-overlay);
}

/* #themeToggleBtn inherits .menu-item styles — no separate rules needed */

/* ── Smooth theme transition (optional — remove if you want instant switch) */
*,
*::before,
*::after {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.15s ease,
        box-shadow 0.2s ease;
}

/* Exclude transitions that shouldn't animate */
.loading-overlay,
.loading-overlay *,
.toast,
.toast *,
[data-theme] .sidebar,
[data-theme] .sidebar *:not(.sidebar-theme-strip):not(.sidebar-theme-pill):not(.sidebar-theme-knob):not(.sidebar-theme-label):not(.sidebar-theme-text) {
    transition: none;
}

/* Re-enable transitions explicitly for the dark-mode toggle strip */
.sidebar-theme-strip {
    transition: background 0.2s;
}

.sidebar-theme-pill {
    transition: background 0.25s ease;
}

.sidebar-theme-knob {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar-theme-label,
.sidebar-theme-label i,
.sidebar-theme-text {
    transition: color 0.2s;
}

/* ── JS-driven element classes (replaces inline style assignments) ────────── */

/* Notification severity badges */
.severity-badge {
    font: 11px/1 monospace;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

.severity-badge--severe {
    background: #e74c3c;
}

.severity-badge--moderate {
    background: #f39c12;
}

.severity-badge--mild {
    background: #27ae60;
}

.severity-badge--unknown {
    background: #95a5a6;
}

[data-theme="dark"] .severity-badge--severe {
    background: #dc2626;
}

[data-theme="dark"] .severity-badge--moderate {
    background: #d97706;
}

[data-theme="dark"] .severity-badge--mild {
    background: #16a34a;
}

[data-theme="dark"] .severity-badge--unknown {
    background: #64748b;
}

/* Upload start button states */
#startUploadBtn.start-btn--attach {
    background: #0d9488;
}

#startUploadBtn.start-btn--upload {
    background: #27ae60;
}

[data-theme="dark"] #startUploadBtn.start-btn--attach {
    background: #0f766e;
}

[data-theme="dark"] #startUploadBtn.start-btn--upload {
    background: #15803d;
}

/* Patient search error text */
.patient-search-error-text {
    color: #dc2626;
}

[data-theme="dark"] .patient-search-error-text {
    color: #fca5a5;
}

/* ── Toast icon colours ─────────────────────────────────────────────────── */
.toast-icon--success {
    color: #27ae60;
    font-size: 1.2em;
}

.toast-icon--error {
    color: #e74c3c;
    font-size: 1.2em;
}

.toast-icon--severe {
    color: #e74c3c;
}

.toast-icon--moderate {
    color: #f39c12;
}

.toast-icon--mild {
    color: #27ae60;
}

[data-theme="dark"] .toast-icon--success {
    color: #4ade80;
}

[data-theme="dark"] .toast-icon--error {
    color: #fca5a5;
}

[data-theme="dark"] .toast-icon--severe {
    color: #fca5a5;
}

[data-theme="dark"] .toast-icon--moderate {
    color: #fcd34d;
}

[data-theme="dark"] .toast-icon--mild {
    color: #4ade80;
}

/* ── Recent-studies error table cells (was runtime-injected <style>) ─────── */
.rs-error-td {
    text-align: center;
    padding: 24px;
    color: #e74c3c;
    font-size: 13px;
}

.rs-error-icon {
    margin-right: 6px;
}

.rs-error-retry {
    color: #3498db;
}

[data-theme="dark"] .rs-error-td {
    color: #fca5a5;
}

[data-theme="dark"] .rs-error-retry {
    color: #60a5fa;
}

/* ── Action button: suppress blue glow in dark mode ────────────────────── */
[data-theme="dark"] .action-btn {
    box-shadow: none;
}

[data-theme="dark"] .action-btn:hover {
    box-shadow: none;
}

/* ── Visual indicator icons: visibility in dark mode ───────────────────── */

/* Report document icon — was #365691e0 (near-invisible on dark bg) */
[data-theme="dark"] .report-clue {
    color: #60a5fa;
}

[data-theme="dark"] .report-clue:hover {
    color: #93c5fd;
}

/* Reported checkmark — was #4caf50, boost to neon green for dark bg */
[data-theme="dark"] .report-status.reported {
    color: #4ade80;
}

/* Unreported / dimmed states — was #888, too dark on dark surfaces */
[data-theme="dark"] .report-status.unreported,
[data-theme="dark"] .not-viewed,
[data-theme="dark"] .not-worked,
[data-theme="dark"] .comment-indicator.comment-expired {
    color: #64748b;
}

/* Viewed (eye icon) */
[data-theme="dark"] .viewed {
    color: #4ade80;
}

/* Worked (pencil icon) */
[data-theme="dark"] .worked {
    color: #60a5fa;
}

/* Comment indicator — active */
[data-theme="dark"] .comment-indicator {
    color: #34d399;
}

[data-theme="dark"] .comment-indicator:hover {
    color: #6ee7b7;
}

/* Sent-to-PACS checkmark */
[data-theme="dark"] .sent-to-pacs-icon {
    color: #34d399;
}

[data-theme="dark"] .sent-to-pacs-icon:hover {
    color: #6ee7b7;
}

/* Monitoring pulse icon */
[data-theme="dark"] .monitoring-pulse {
    color: #34d399;
}

/* ── Hover tooltips on indicator icons ─────────────────────────────────── */
[data-theme="dark"] .status-icon[title]:hover::after,
[data-theme="dark"] .report-status[title]:hover::after,
[data-theme="dark"] .monitoring-pulse[data-tooltip]:hover::after {
    background: #e2e8f0;
    color: #0f172a;
}

/* ============================================================
   SIDEBAR DARK-MODE TOGGLE STRIP
   Matches the pill toggle style used on the login page.
   All rules live here (not injected by JS) — no CSP issues.

   NOTE: .sidebar flex structure (display:flex / flex-direction:column)
   and #sidebarMenu overflow are intentionally NOT set here — they are
   already defined in dashboard.css to avoid a double-scroll conflict.
   ============================================================ */

/* Strip wrapper — pinned below the scrollable menu list */
.sidebar-theme-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: auto 12px 14px;
    /* margin-top:auto pushes strip to bottom in flex column */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-theme-strip:hover {
    background: rgba(255, 255, 255, 0.09);
}

/* Label (moon/sun icon + text) — sidebar always dark, use light muted colour */
.sidebar-theme-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    user-select: none;
    pointer-events: none;
}

.sidebar-theme-label i {
    font-size: 0.85rem;
    color: #94a3b8;
    width: 14px;
    text-align: center;
}

.sidebar-theme-text {
    color: #94a3b8;
}

/* Pill — OFF state: light grey + white knob (identical to login toggle) */
.sidebar-theme-pill {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    pointer-events: none;
    /* strip handles the click */
}

.sidebar-theme-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Pill — ON / dark state: blue + white knob slid right (identical to login toggle) */
[data-theme="dark"] .sidebar-theme-pill {
    background: #3b82f6;
}

[data-theme="dark"] .sidebar-theme-knob {
    transform: translateX(20px);
    background: #ffffff;
}

[data-theme="dark"] .sidebar-theme-label i,
[data-theme="dark"] .sidebar-theme-text {
    color: #cbd5e1;
}

/* Minimized sidebar — hide label, centre the pill */
.sidebar.minimized .sidebar-theme-strip {
    justify-content: center;
    padding: 10px;
    margin: auto 8px 14px;
}

.sidebar.minimized .sidebar-theme-label {
    display: none;
}

/* Mobile off-canvas sidebar */
@media (max-width: 768px) {
    .sidebar-theme-strip {
        margin: 8px 16px 18px;
        padding: 13px 18px;
    }
}