/*
* ============================================================
* CORNERSTONE — CROSS-PAGE DARK THEME EXTENSION
* theme-variables.css handles the dashboard.
*
* Deploy: add to every page's after theme-variables.css
*
*
* ============================================================
*/
/* ============================================================
SHARED CROSS-PAGE RULES
Apply to every page that has these common patterns
============================================================ */
/* ── Page body ──────────────────────────────────────────────── */
[data-theme="dark"] body:not(.login-page) {
background: var(--bg-base);
color: var(--text-primary);
}
/* Login page dark mode — keep the background image, only dim via overlay */
[data-theme="dark"] body.login-page {
color: var(--text-primary);
/* background-image inherited from the login page's own :root rule */
}
[data-theme="dark"] footer {
color: var(--footer-text);
}
/* ── Headings and standard text ──────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: var(--text-primary);
}
/* ── Page title (used in AI Analysis, Jobs, etc.) ────────────── */
[data-theme="dark"] .page-title {
color: var(--text-primary);
}
/* ── Main content area ───────────────────────────────────────── */
[data-theme="dark"] .main-content {
background: var(--bg-base);
}
/* ── Generic white card / panel / section ───────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .bio-card,
[data-theme="dark"] .device-card,
[data-theme="dark"] .sms-stat-card,
[data-theme="dark"] .sms-usage-tips,
[data-theme="dark"] .permissions-box,
[data-theme="dark"] .roles-checkbox-container,
[data-theme="dark"] .audit-pagination {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border);
}
/* ── Shared refresh / action button glow suppression ─────────── */
[data-theme="dark"] .refresh-btn,
[data-theme="dark"] .action-btn,
[data-theme="dark"] .pagination-btn {
box-shadow: none;
}
/* ── Search / filter inputs ──────────────────────────────────── */
[data-theme="dark"] .search-bar,
[data-theme="dark"] .filter-group select,
[data-theme="dark"] .filters select,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: var(--input-bg);
border-color: var(--input-border);
color: #e2e8f0;
}
[data-theme="dark"] .search-bar:focus,
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
border-color: var(--input-border-focus);
background: var(--modal-bg);
box-shadow: 0 0 0 3px var(--accent-focus-ring);
outline: none;
}
[data-theme="dark"] ::placeholder {
color: var(--input-placeholder);
}
/* ── Toast notifications ──────────────────────────────────────── */
[data-theme="dark"] .toast {
background: var(--toast-bg);
box-shadow: var(--toast-shadow);
color: var(--text-primary);
}
/* ── Notification bell dropdown ──────────────────────────────── */
[data-theme="dark"] .notification-bell i {
color: var(--bell-icon);
}
[data-theme="dark"] .notification-condition {
color: #ebef7f;
}
[data-theme="dark"] .notification-bell .dropdown {
background: var(--notif-bg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .dropdown-header {
background: var(--notif-header-bg);
border-bottom-color: var(--notif-border);
color: var(--text-primary);
}
[data-theme="dark"] .dropdown-divider {
border-top-color: var(--notif-border);
}
[data-theme="dark"] .notification-item {
border-bottom-color: var(--notif-border);
color: var(--text-primary);
}
[data-theme="dark"] .notification-item:hover {
background: var(--notif-hover);
}
[data-theme="dark"] .notification-item.unread {
background: var(--notif-unread);
}
[data-theme="dark"] .notification-item .time {
color: var(--notif-text-muted);
}
/* ── Modal / dialog ──────────────────────────────────────────── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .metadata-modal,
[data-theme="dark"] .report-status-modal {
background: var(--modal-bg);
color: var(--text-primary);
}
[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .modal-content h4 {
color: var(--text-primary);
}
[data-theme="dark"] .modal-content p {
color: var(--text-secondary);
}
[data-theme="dark"] .close-modal {
color: var(--close-btn-color);
}
[data-theme="dark"] .close-modal:hover {
color: var(--close-btn-hover);
}
/* ============================================================
AI ANALYSIS PAGE (ai-analysis.css)
============================================================ */
[data-theme="dark"] .ai-analysis-section {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .ai-analysis-section h3 {
color: var(--text-primary);
}
[data-theme="dark"] .panel-title {
color: var(--text-primary);
}
/* Study list container */
[data-theme="dark"] .study-list {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .study-list::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
}
/* Study items */
[data-theme="dark"] .study-item {
background: var(--bg-elevated);
color: var(--text-primary);
}
[data-theme="dark"] .study-item:nth-child(even) {
background: var(--bg-surface);
}
[data-theme="dark"] .study-item:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .study-item.selected {
background: var(--accent);
color: #ffffff;
}
[data-theme="dark"] .study-item i {
color: var(--accent);
}
[data-theme="dark"] .study-item.selected i {
color: #ffffff;
}
/* Search highlight */
[data-theme="dark"] .highlight {
background-color: var(--accent-light);
color: var(--text-primary);
text-decoration-color: var(--accent);
}
/* Finding cards */
[data-theme="dark"] .finding-card,
[data-theme="dark"] .finding-card.diagnostic-verified {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .card-header {
background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
border-bottom-color: var(--border);
}
[data-theme="dark"] .condition-badge {
color: var(--text-primary);
}
[data-theme="dark"] .condition-badge i {
color: var(--accent);
}
[data-theme="dark"] .condition-badge .tag {
background: var(--accent-light);
color: var(--accent-dark);
}
[data-theme="dark"] .confidence-meter .meter-fill {
background: var(--border);
}
[data-theme="dark"] .card-body {
background: var(--bg-surface);
}
[data-theme="dark"] .modern-context-bar {
background: var(--bg-elevated);
border-bottom-color: var(--border);
}
[data-theme="dark"] .context-item .label {
color: var(--text-primary);
}
[data-theme="dark"] .context-item .value {
color: var(--text-secondary);
}
[data-theme="dark"] .info-grid strong {
color: var(--text-primary);
}
[data-theme="dark"] .detail-label {
color: var(--text-muted);
}
[data-theme="dark"] .detail-content {
color: var(--text-secondary);
}
[data-theme="dark"] .verification-box {
background: #0d2818;
border-left-color: #22c55e;
color: #4ade80;
}
[data-theme="dark"] .centered-disclaimer {
background: #2d2000;
border-color: #78350f;
}
[data-theme="dark"] .disclaimer-text-large {
color: #fcd34d;
}
[data-theme="dark"] .metadata-toggle-btn {
border-color: var(--border);
color: var(--text-muted);
}
[data-theme="dark"] .metadata-toggle-btn:hover {
background: var(--bg-elevated);
color: var(--accent);
}
[data-theme="dark"] .model-info-drawer {
background: var(--bg-elevated);
}
[data-theme="dark"] .model-info-drawer.expanded {
border-color: var(--border);
}
[data-theme="dark"] .audit-grid {
color: var(--text-muted);
}
[data-theme="dark"] .audit-grid b {
color: var(--text-primary);
}
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-footer--actions {
background: var(--bg-elevated);
border-top-color: var(--border);
}
[data-theme="dark"] .heatmap-preview {
background: var(--bg-elevated);
}
[data-theme="dark"] .img-box {
border-color: var(--border);
}
[data-theme="dark"] .page-info {
color: var(--text-secondary);
}
[data-theme="dark"] .findings-section h4 {
color: var(--text-primary);
}
/* ============================================================
REGISTRATION PAGE (registration.css)
============================================================ */
/* Header card */
[data-theme="dark"] .header {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .header-text h1 {
color: var(--text-primary);
text-shadow: none;
}
[data-theme="dark"] .header-text p {
color: var(--text-muted);
}
[data-theme="dark"] .header-search-bar {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
/* Stat cards */
[data-theme="dark"] .stat-card {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .stat-label {
color: var(--text-muted);
}
[data-theme="dark"] .stat-value {
color: #e2e8f0 !important;
}
[data-theme="dark"] .stat-sub {
color: var(--text-muted);
}
/* Table container */
[data-theme="dark"] .table-container {
background: var(--bg-surface);
border-color: var(--border);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .table-header {
background: var(--bg-elevated);
border-bottom-color: var(--border);
}
[data-theme="dark"] .table-title {
color: var(--text-primary);
}
[data-theme="dark"] .refresh-btn {
background: var(--bg-surface);
border-color: var(--border);
color: var(--text-muted);
}
[data-theme="dark"] .refresh-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-light);
}
[data-theme="dark"] thead,
[data-theme="dark"] thead th {
background: var(--bg-elevated);
color: var(--text-muted);
}
[data-theme="dark"] tbody tr {
border-bottom-color: var(--border);
}
[data-theme="dark"] tbody tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] tbody td {
color: var(--text-secondary);
}
[data-theme="dark"] .patient-info-cell .patient-name {
color: var(--text-primary);
}
[data-theme="dark"] .patient-info-cell .patient-mrn {
color: var(--text-muted);
}
[data-theme="dark"] .exam-info .service {
color: var(--text-primary);
}
[data-theme="dark"] .exam-info .modality {
background: var(--accent-light);
color: var(--accent-dark);
}
[data-theme="dark"] .accession {
color: var(--text-muted);
}
/* Status badges — keep semantic colours, just adjust backgrounds */
[data-theme="dark"] .status-badge.arrived {
background: linear-gradient(135deg, #0d2818, #14432b);
color: #4ade80;
}
[data-theme="dark"] .status-badge.scheduled {
background: linear-gradient(135deg, #2d2000, #3d2d00);
color: #fcd34d;
}
[data-theme="dark"] .status-badge.conducted {
background: #2d1b4e;
color: #c084fc;
}
/* Form sections */
[data-theme="dark"] .form-section {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .form-section h3,
[data-theme="dark"] .form-section label {
color: var(--text-primary);
}
/* Quick visit / reg modal cards */
[data-theme="dark"] .edit-modal-card,
[data-theme="dark"] .details-modal-card,
[data-theme="dark"] .quick-modal-card {
background: var(--bg-surface);
}
[data-theme="dark"] .edit-modal-body .form-group input,
[data-theme="dark"] .edit-modal-body .form-group select,
[data-theme="dark"] .details-modal-section,
[data-theme="dark"] .details-info-value {
background: var(--input-bg);
color: var(--input-text);
border-color: var(--input-border);
}
[data-theme="dark"] .edit-modal-footer,
[data-theme="dark"] .details-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
[data-theme="dark"] .em-btn-cancel,
[data-theme="dark"] .btn-cancel {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
/* pm-panel (patient management) */
[data-theme="dark"] .pm-panel .form-group input,
[data-theme="dark"] .pm-panel .form-group select,
[data-theme="dark"] .pm-panel .form-group textarea {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .pm-stat-card,
[data-theme="dark"] .pm-recent-visit-card {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .pm-filter-bar {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] .mini-item {
background: var(--bg-elevated);
color: var(--text-primary);
}
[data-theme="dark"] .filter-btn-secondary {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
/* Appointments table */
[data-theme="dark"] .appointments-table {
background: var(--table-bg);
}
[data-theme="dark"] .appointments-table tr:hover {
background: var(--bg-hover);
}
/* jobs-table (embedded in registration) */
[data-theme="dark"] .jobs-table {
background: var(--table-bg);
}
[data-theme="dark"] .jobs-table tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .jobs-table .action-btn-edit {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border);
}
/* ============================================================
STATS PAGE (stats.css)
============================================================ */
[data-theme="dark"] .modern-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-container,
[data-theme="dark"] .user-stats-section,
[data-theme="dark"] .user-metrics,
[data-theme="dark"] .reg-kpi-card,
[data-theme="dark"] .performance-card {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
color: var(--text-primary);
}
[data-theme="dark"] .registration-info {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] .filters {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] th {
background: var(--bg-elevated);
color: var(--text-muted);
border-color: var(--border);
}
[data-theme="dark"] tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] td {
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] .leaderboard-table th {
background: var(--bg-elevated);
color: var(--text-muted);
}
[data-theme="dark"] .leaderboard-table tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .app-footer {
color: var(--footer-text);
}
/* ============================================================
MONITORING PAGE (monitoring.css)
============================================================ */
[data-theme="dark"] .mc-tile,
[data-theme="dark"] .mc-tile.recist-pending,
[data-theme="dark"] .mc-metric-header,
[data-theme="dark"] .mc-detail-panel,
[data-theme="dark"] .mc-chart-wrap {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border);
}
[data-theme="dark"] .mc-search-input,
[data-theme="dark"] .mc-field-group input,
[data-theme="dark"] .mc-field-group textarea,
[data-theme="dark"] .mc-decision-note textarea {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .mc-field-group input:focus,
[data-theme="dark"] .mc-field-group textarea:focus,
[data-theme="dark"] .mc-decision-note textarea:focus {
border-color: var(--input-border-focus);
background: var(--modal-bg);
box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
[data-theme="dark"] .mc-tab.active {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border);
}
[data-theme="dark"] .mc-recist-btn {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] .mc-recist-btn.selected {
background: var(--bg-elevated);
border-color: var(--accent);
color: var(--accent-dark);
}
/* ============================================================
EMAIL PAGE (email.css)
============================================================ */
[data-theme="dark"] .email-list-pane,
[data-theme="dark"] .list-header,
[data-theme="dark"] .email-reading-pane,
[data-theme="dark"] .reading-action-bar,
[data-theme="dark"] .thread-header-bar,
[data-theme="dark"] .inline-reply-wrap,
[data-theme="dark"] .compose-drawer {
background: var(--bg-surface);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .email-item {
background: var(--bg-surface);
border-bottom-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .email-item:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .email-item.selected {
background: var(--bg-elevated);
}
[data-theme="dark"] .thread-item {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .thread-quoted {
background: var(--bg-elevated);
border-left-color: var(--border-strong);
color: var(--text-muted);
}
[data-theme="dark"] .more-menu {
background: var(--dropdown-bg);
border-color: var(--dropdown-border);
}
[data-theme="dark"] .more-menu button {
color: var(--text-primary);
}
[data-theme="dark"] .more-menu button:hover {
background: var(--bg-elevated);
color: var(--text-primary);
}
[data-theme="dark"] .compose-discard-dialog {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .compose-attach-pill,
[data-theme="dark"] .thread-attach-pill {
background: var(--bg-elevated);
border-color: var(--border);
color: var(--text-muted);
}
[data-theme="dark"] .search-wrap input {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .action-bar-btn:hover {
background: var(--bg-elevated);
}
[data-theme="dark"] .sent-overlay-card {
background: var(--bg-surface);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .inline-form-group input,
[data-theme="dark"] .inline-form-group select,
[data-theme="dark"] .inline-form-group textarea,
[data-theme="dark"] .inline-form-group input[readonly],
[data-theme="dark"] .compose-form-group input[readonly] {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--text-muted);
}
/* ============================================================
ASSIGN PAGE (assign.css)
============================================================ */
[data-theme="dark"] .tile {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .search-bar,
[data-theme="dark"] .date-filter input,
[data-theme="dark"] .assigned-search-bar {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .user-list {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .modal-search-container input {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
/* ============================================================
ACTIVE REPORTING PAGE (active-reporting.css)
============================================================ */
[data-theme="dark"] .active-reporting-table {
background: var(--table-bg);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .active-reporting-table th {
background: var(--bg-elevated);
color: var(--text-muted);
border-bottom-color: var(--border);
}
[data-theme="dark"] .active-reporting-table td {
color: var(--text-secondary);
border-bottom-color: var(--border);
}
[data-theme="dark"] .active-reporting-table tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .ar-pagination__btn {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] .ar-pagination__btn:hover {
background: var(--bg-elevated);
}
/* ============================================================
ADMIN PAGE (admin.css)
============================================================ */
[data-theme="dark"] .admin-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
[data-theme="dark"] .admin-btn-cancel {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
[data-theme="dark"] .admin-success-msg {
background: #0d2818;
color: #4ade80;
border-color: #166534;
}
[data-theme="dark"] .form-input--select,
[data-theme="dark"] .form-checkbox-label {
background: var(--input-bg);
color: var(--text-primary);
border-color: var(--input-border);
}
/* ============================================================
JOBS PAGE (jobs.css)
============================================================ */
[data-theme="dark"] .jobs-table {
background: var(--table-bg);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .jobs-table th {
background: var(--bg-elevated);
color: var(--text-muted);
border-bottom-color: var(--border);
}
[data-theme="dark"] .jobs-table td {
color: var(--text-secondary);
border-bottom-color: var(--border);
}
[data-theme="dark"] .jobs-table tr:hover {
background: var(--bg-hover);
}
/* ============================================================
SETTINGS PAGE (settings.css)
============================================================ */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .bio-card,
[data-theme="dark"] .device-card {
background: var(--bg-surface);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .switch-container {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] .pin-digit {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .pin-digit:focus {
border-color: var(--input-border-focus);
background: var(--modal-bg);
box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
[data-theme="dark"] .slider:before {
background: var(--bg-elevated);
}
/* ============================================================
VIEW REPORT PAGE (view-report.css)
============================================================ */
[data-theme="dark"] .recent-studies-table {
background: var(--table-bg);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .recent-studies-table th {
background: var(--bg-elevated);
color: var(--text-muted);
border-color: var(--border);
}
[data-theme="dark"] .recent-studies-table td {
color: var(--text-secondary);
border-bottom-color: var(--border);
}
[data-theme="dark"] .recent-studies-table tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .study-drawer {
background: var(--drawer-bg);
}
[data-theme="dark"] .more-options-content {
background: var(--dropdown-bg);
border-color: var(--dropdown-border);
}
[data-theme="dark"] .more-options-content a {
color: var(--dropdown-item-text);
border-bottom-color: var(--dropdown-item-border);
}
[data-theme="dark"] .more-options-content a:hover {
background: var(--dropdown-item-hover-bg);
color: var(--dropdown-item-hover-text);
}
[data-theme="dark"] .pagination button {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] .pagination button:disabled {
background: var(--bg-elevated);
color: var(--text-muted);
}
[data-theme="dark"] .pdf-canvas {
background: var(--bg-elevated);
}
/* ============================================================
REPORT WRITING PAGE (report.css)
============================================================ */
[data-theme="dark"] textarea.ai-prefilled {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] textarea.ai-prefilled:focus {
border-color: var(--input-border-focus);
background: var(--modal-bg);
box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
/* ============================================================
SCROLLBARS — universal
============================================================ */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--bg-base);
}
/* ============================================================
LINKS
============================================================ */
[data-theme="dark"] a:not([class]) {
color: #fcfcfc
}
[data-theme="dark"] a:not([class]):hover {
color: var(--accent);
}
/* ============================================================
PATCH v2 — Fixes from screenshot review
Covers: Registration modals, Admin CSS vars, Assign modal,
Stats text, Email text, Appointment section, Share modal
============================================================ */
/* ── Admin: override its own CSS custom properties ──────────── */
[data-theme="dark"] {
--surface-color: #1e293b;
--bg-color: #0f172a;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--border-color: #334155;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
--primary-dark: #e2e8f0;
}
/* ── Admin: card, panel, activity list ──────────────────────── */
[data-theme="dark"] .card-content h4,
[data-theme="dark"] .card-content p,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .panel-title {
color: var(--text-primary);
}
[data-theme="dark"] #recentActivity {
color: var(--text-secondary);
}
[data-theme="dark"] #recentActivity li {
border-bottom-color: var(--border);
color: var(--text-secondary);
}
/* Admin modal colour-variant headers — darken light pastels */
[data-theme="dark"] .header-blue {
background: linear-gradient(135deg, #1e3a5f 0%, #162032 100%);
border-bottom-color: #1e3a8a;
}
[data-theme="dark"] .header-blue .admin-modal-header-text h2 {
color: #93c5fd;
}
[data-theme="dark"] .header-blue .admin-modal-header-text p {
color: #60a5fa;
}
[data-theme="dark"] .header-blue .admin-modal-close {
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
}
[data-theme="dark"] .header-yellow {
background: linear-gradient(135deg, #2d2000 0%, #3d2d00 100%);
border-bottom-color: #78350f;
}
[data-theme="dark"] .header-yellow .admin-modal-header-text h2 {
color: #fcd34d;
}
[data-theme="dark"] .header-yellow .admin-modal-header-text p {
color: #fbbf24;
}
[data-theme="dark"] .header-yellow .admin-modal-close {
background: rgba(245, 158, 11, 0.15);
color: #fcd34d;
}
[data-theme="dark"] .header-purple {
background: linear-gradient(135deg, #2d1b4e 0%, #1e0a3c 100%);
border-bottom-color: #6d28d9;
}
[data-theme="dark"] .header-purple .admin-modal-header-text h2 {
color: #c084fc;
}
[data-theme="dark"] .header-purple .admin-modal-header-text p {
color: #a855f7;
}
[data-theme="dark"] .header-purple .admin-modal-close {
background: rgba(168, 85, 247, 0.15);
color: #c084fc;
}
[data-theme="dark"] .header-green {
background: linear-gradient(135deg, #0d2818 0%, #052013 100%);
border-bottom-color: #166534;
}
[data-theme="dark"] .header-green .admin-modal-header-text h2 {
color: #4ade80;
}
[data-theme="dark"] .header-green .admin-modal-header-text p {
color: #34d399;
}
[data-theme="dark"] .header-green .admin-modal-close {
background: rgba(16, 185, 129, 0.15);
color: #4ade80;
}
/* Admin: form-body, table rows, panel text */
[data-theme="dark"] .panel-header {
/* background: var(--bg-elevated); */
border-bottom-color: var(--border);
}
[data-theme="dark"] .form-group label,
[data-theme="dark"] .form-label {
color: #fcfcfc;
}
/* ── Form groups inside modals ────────────────────────────────── */
[data-theme="dark"] .form-group label {
color: #fcfcfc;
}
/* ── ASSIGN PAGE: assign/reassign modal ─────────────────────── */
[data-theme="dark"] .assign-modal,
[data-theme="dark"] .reassign-modal {
background: var(--bg-surface);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .assign-modal h3,
[data-theme="dark"] .reassign-modal h3 {
color: var(--text-primary);
}
[data-theme="dark"] .modal-content p {
color: var(--text-secondary);
}
[data-theme="dark"] .modal-search-container input {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .modal-search-container i {
color: var(--text-muted);
}
[data-theme="dark"] .user-list {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] .user-list::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
}
[data-theme="dark"] .user-item {
color: var(--text-primary);
}
[data-theme="dark"] .user-item:hover {
background: var(--bg-hover);
}
/* ── REGISTRATION: all modal cards ─────────────────────────── */
/* new patient reg-modal */
[data-theme="dark"] .reg-modal-card {
background: var(--bg-surface);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .reg-modal-header {
background: linear-gradient(135deg, #1e3a5f 0%, #162032 100%);
border-bottom-color: #1e3a8a;
}
[data-theme="dark"] .reg-modal-header-text h2 {
color: #93c5fd;
}
[data-theme="dark"] .reg-modal-header-text p {
color: #60a5fa;
}
[data-theme="dark"] .reg-modal-close {
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
}
[data-theme="dark"] .reg-modal-close:hover {
background: rgba(59, 130, 246, 0.28);
}
/* danger variant */
[data-theme="dark"] .reg-modal-header.danger {
background: linear-gradient(135deg, #3b0000 0%, #2a0000 100%);
border-bottom-color: #7f1d1d;
}
[data-theme="dark"] .reg-modal-header.danger .reg-modal-header-text h2 {
color: #fca5a5;
}
[data-theme="dark"] .reg-modal-header.danger .reg-modal-header-text p {
color: #f87171;
}
[data-theme="dark"] .reg-modal-header.danger .reg-modal-close {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
[data-theme="dark"] .reg-modal-body {
background: var(--bg-surface);
}
[data-theme="dark"] .reg-modal-body .form-group label {
color: var(--text-primary);
}
[data-theme="dark"] .reg-modal-body .form-group input,
[data-theme="dark"] .reg-modal-body .form-group select,
[data-theme="dark"] .reg-modal-body .form-group textarea {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .reg-modal-body .form-group input:focus,
[data-theme="dark"] .reg-modal-body .form-group select:focus,
[data-theme="dark"] .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);
}
[data-theme="dark"] .reg-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
[data-theme="dark"] .reg-modal-footer .reg-btn-cancel {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
[data-theme="dark"] .reg-modal-footer .reg-btn-nav {
background: var(--bg-surface);
color: var(--accent);
border-color: var(--accent-light);
}
/* quick visit modal (green header) */
[data-theme="dark"] .quick-modal-card {
background: var(--bg-surface);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .quick-modal-header {
background: linear-gradient(135deg, #0d2818 0%, #052013 100%);
border-bottom-color: #166534;
}
[data-theme="dark"] .quick-modal-patient-name {
color: #4ade80;
}
[data-theme="dark"] .quick-modal-patient-mrn {
color: #34d399;
}
[data-theme="dark"] .quick-modal-title-badge {
background: rgba(22, 163, 74, 0.15);
border-color: rgba(22, 163, 74, 0.3);
color: #4ade80;
}
[data-theme="dark"] .quick-modal-close {
background: rgba(22, 163, 74, 0.15);
color: #4ade80;
}
[data-theme="dark"] .quick-modal-close:hover {
background: rgba(22, 163, 74, 0.28);
}
[data-theme="dark"] .quick-modal-body {
background: var(--bg-surface);
}
[data-theme="dark"] .quick-modal-body .form-group label {
color: var(--text-primary);
}
[data-theme="dark"] .quick-modal-body .form-group input,
[data-theme="dark"] .quick-modal-body .form-group select {
background: var(--input-bg);
border-color: var(--input-border);
color: var(--input-text);
}
[data-theme="dark"] .quick-modal-body .form-group input:focus,
[data-theme="dark"] .quick-modal-body .form-group select:focus {
border-color: #16a34a;
background: var(--modal-bg);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
[data-theme="dark"] .quick-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
[data-theme="dark"] .qv-btn-cancel {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
/* details modal (patient info, teal header) */
[data-theme="dark"] .details-modal-card {
background: var(--bg-surface);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .details-modal-header {
background: linear-gradient(135deg, #052827 0%, #031e1d 100%);
border-bottom-color: #0d9488;
}
[data-theme="dark"] .details-modal-header-text h2 {
color: #5eead4;
}
[data-theme="dark"] .details-modal-header-text p {
color: #14b8a6;
}
[data-theme="dark"] .details-modal-close {
background: rgba(13, 148, 136, 0.15);
color: #5eead4;
}
[data-theme="dark"] .details-modal-close:hover {
background: rgba(13, 148, 136, 0.3);
}
[data-theme="dark"] .details-modal-body {
background: var(--bg-surface);
}
[data-theme="dark"] .details-modal-section {
background: var(--bg-elevated);
border-color: var(--border);
}
[data-theme="dark"] .details-info-label {
color: var(--text-muted);
}
[data-theme="dark"] .details-info-value {
background: var(--bg-surface);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .details-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
[data-theme="dark"] .details-close-btn {
background: var(--bg-surface);
color: var(--text-muted);
border-color: var(--border);
}
/* study share modal (purple/dark header — already dark, just fix body) */
[data-theme="dark"] .reg-share-modal-body {
background: var(--bg-surface);
}
[data-theme="dark"] .reg-share-patient-banner {
background: var(--accent-light);
border-color: var(--border-light);
color: var(--accent-dark);
}
[data-theme="dark"] .reg-share-patient-banner i {
color: var(--accent);
}
/* share option cards (DICOM/PDF/Both) */
[data-theme="dark"] .reg-share-option,
[data-theme="dark"] .share-option-card {
background: var(--bg-elevated);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .reg-share-option:hover,
[data-theme="dark"] .share-option-card:hover {
border-color: var(--accent);
background: var(--bg-hover);
}
[data-theme="dark"] .share-option-title,
[data-theme="dark"] .share-option-desc {
color: var(--text-primary);
}
[data-theme="dark"] .reg-share-modal-footer {
background: var(--modal-footer-bg);
border-top-color: var(--modal-footer-border);
}
/* ── REGISTRATION: appointment section ───────────────────────── */
[data-theme="dark"] .appt-modern-card {
background: var(--bg-surface);
border-color: var(--border);
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .appt-modern-card .card-header {
background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
border-bottom-color: var(--border);
}
[data-theme="dark"] .appt-modern-card .card-title {
color: #fcfcfc;
}
[data-theme="dark"] .appt-modern-card .card-subtitle {
color: var(--text-muted);
}
[data-theme="dark"] .modern-appt-form {
background: var(--bg-surface);
}
[data-theme="dark"] .form-step {
border-bottom-color: var(--border);
}
[data-theme="dark"] .step-title,
[data-theme="dark"] .step-label {
color: #fcfcfc;
}
[data-theme="dark"] .appt-search-section {
background: var(--bg-surface);
border-color: var(--border);
}
/* appt search filter bar */
[data-theme="dark"] .appt-filter-bar,
[data-theme="dark"] .appt-filter-form {
background: var(--bg-elevated);
border-color: var(--border);
}
/* today's schedule card */
[data-theme="dark"] .appt-card,
[data-theme="dark"] .appt-card-content {
background: var(--bg-surface);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .appt-time-row {
color: var(--accent-dark);
}
[data-theme="dark"] .appt-patient-info {
color: var(--text-primary);
}
[data-theme="dark"] .appt-mrn,
[data-theme="dark"] .appt-duration,
[data-theme="dark"] .appt-provider,
[data-theme="dark"] .appt-reason {
color: var(--text-muted);
}
[data-theme="dark"] .appt-card-footer {
background: var(--bg-elevated);
border-top-color: var(--border);
}
/* ── REGISTRATION: patient management section ────────────────── */
[data-theme="dark"] .pm-snapshot-header {
color: var(--text-primary);
}
[data-theme="dark"] .pm-snapshot-actions .btn-pm {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] .pm-snapshot-actions .btn-pm:hover {
background: var(--bg-elevated);
border-color: var(--accent);
color: var(--accent-dark);
}
/* ── STATS PAGE: text colours not yet overridden ─────────────── */
[data-theme="dark"] .modern-card .card-content h4 {
color: var(--text-primary);
}
[data-theme="dark"] .modern-card .card-content span {
color: var(--text-muted);
}
[data-theme="dark"] .kpi-card h3,
[data-theme="dark"] .kpi-card .kpi-value {
color: var(--text-primary);
}
[data-theme="dark"] .kpi-card .kpi-label {
color: var(--text-muted);
}
[data-theme="dark"] .chart-card h3 {
color: var(--text-primary);
}
[data-theme="dark"] .chart-card .chart-subtitle {
color: var(--text-muted);
}
[data-theme="dark"] .page-header-title,
[data-theme="dark"] .page-header-subtitle {
color: var(--text-primary);
}
[data-theme="dark"] .section-heading,
[data-theme="dark"] .filter-label {
color: #fcfcfc !important;
}
/* Stats date picker (browser native — apply bg/color) */
[data-theme="dark"] input[type="date"] {
background: var(--input-bg);
color: var(--input-text);
border-color: var(--input-border);
color-scheme: dark;
}
/* Stats: calendar popup (native — force dark colour-scheme) */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* ── EMAIL PAGE: additional text fixes ──────────────────────── */
[data-theme="dark"] .email-subject,
[data-theme="dark"] .email-sender,
[data-theme="dark"] .email-preview,
[data-theme="dark"] .email-date {
color: var(--text-secondary);
}
[data-theme="dark"] .email-item.selected .email-subject,
[data-theme="dark"] .email-item.selected .email-sender {
color: var(--text-primary);
}
[data-theme="dark"] .reading-pane-title {
color: var(--text-primary);
}
[data-theme="dark"] .reading-pane-meta {
color: var(--text-muted);
}
[data-theme="dark"] .reading-pane-body {
color: var(--text-secondary);
}
[data-theme="dark"] .thread-date {
color: var(--text-muted);
}
[data-theme="dark"] .thread-sender {
color: var(--text-primary);
}
/* Empty state "Select an email to read" */
[data-theme="dark"] .empty-reading-state,
[data-theme="dark"] .reading-empty {
color: var(--text-muted);
}
[data-theme="dark"] .reading-empty i {
color: var(--border-strong);
}
/* ── GLOBAL: select option elements ─────────────────────────── */
[data-theme="dark"] select option {
background: var(--bg-elevated);
color: var(--input-text);
}
/* ── GLOBAL: table generic th/td not already covered ─────────── */
[data-theme="dark"] table th {
background: var(--bg-elevated);
color: var(--text-muted);
border-color: var(--border);
}
[data-theme="dark"] table td {
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] table tr:hover {
background: var(--bg-hover);
}
/* ── GLOBAL: labels and helper text ─────────────────────────── */
[data-theme="dark"] label {
color: #fcfcfc
}
[data-theme="dark"] .helper-text,
[data-theme="dark"] .form-hint,
[data-theme="dark"] .text-muted,
[data-theme="dark"] small {
color: var(--text-muted);
}
/* ── GLOBAL: hr dividers ─────────────────────────────────────── */
[data-theme="dark"] hr {
border-color: var(--border);
}
/* ============================================================
REGISTRATION PAGE — COMPREHENSIVE DARK THEME FIXES
These rules cover every hardcoded light-colour in
registration.css that is NOT already handled above.
[data-theme="dark"] prefix gives specificity 0,2,0 which
beats registration.css plain class rules (0,1,0), so these
win even though theme-dark-pages.css loads first.
============================================================ */
/* ── :root variable overrides from registration.css ────────── */
/* registration.css re-declares --text-primary / --surface-color
in its own :root block; we reassert the dark values here. */
[data-theme="dark"] {
--surface-color: #1e293b !important;
--bg-color: #0f172a !important;
--border-color: #334155 !important;
}
/* ── Page header ────────────────────────────────────────────── */
[data-theme="dark"] .header {
background: var(--bg-surface) !important;
box-shadow: var(--card-shadow) !important;
}
[data-theme="dark"] .header-text h1 {
color: #cdd3dd !important;
text-shadow: none !important;
}
[data-theme="dark"] .header-text p {
color: var(--text-muted) !important;
}
/* Appointment page modern-header */
[data-theme="dark"] .modern-header {
background: var(--bg-surface) !important;
box-shadow: var(--card-shadow) !important;
}
[data-theme="dark"] .modern-header .header-title {
/*color: var(--text-primary) !important;*/
color: #cdd3dd !important;
text-shadow: none !important;
}
[data-theme="dark"] .modern-header .header-subtitle {
color: var(--text-muted) !important;
}
/* ── Search box (page header) ───────────────────────────────── */
[data-theme="dark"] .search-box input {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .search-box input:focus {
background: var(--bg-elevated) !important;
border-color: var(--input-border-focus) !important;
}
[data-theme="dark"] .search-results {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .search-result-item {
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .search-result-item:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .result-name {
color: #e2e8f0 !important;
}
[data-theme="dark"] .result-details {
color: var(--text-muted) !important;
}
[data-theme="dark"] .result-arrow {
color: var(--border-strong) !important;
}
/* ── Stat cards ─────────────────────────────────────────────── */
[data-theme="dark"] .stat-card {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
box-shadow: var(--card-shadow) !important;
}
[data-theme="dark"] .stat-card.red-wait {
background: linear-gradient(135deg, var(--bg-surface), #2d0000) !important;
border-color: #7f1d1d !important;
}
[data-theme="dark"] .stat-value {
color: #e2e8f0 !important;
}
[data-theme="dark"] .stat-label {
color: var(--text-muted) !important;
}
/* ── PM stat cards ──────────────────────────────────────────── */
[data-theme="dark"] .pm-stat-card {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .pm-stat-label {
color: var(--text-muted) !important;
}
[data-theme="dark"] .pm-stat-value {
color: #e2e8f0 !important;
}
/* ── Live waiting room table wrapper ────────────────────────── */
[data-theme="dark"] .pm-table-wrap {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .pm-table-header {
background: var(--bg-surface) !important;
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .pm-left-subtitle,
[data-theme="dark"] .pm-table-title {
color: #e2e8f0 !important;
}
/* ── Filter bar ─────────────────────────────────────────────── */
[data-theme="dark"] .pm-filter-bar {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .pm-filter-bar label {
color: var(--text-muted) !important;
}
/* ── Jobs table ─────────────────────────────────────────────── */
[data-theme="dark"] thead {
background: var(--bg-elevated) !important;
}
[data-theme="dark"] .jobs-table th {
background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface)) !important;
color: var(--text-muted) !important;
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .jobs-table td {
color: var(--text-secondary) !important;
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .jobs-table tr:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] tbody tr {
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] tbody tr:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] tbody td {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .patient-info-cell .patient-name {
color: #fcfcfc;
}
[data-theme="dark"] .patient-info-cell .patient-mrn {
color: #fcfcfc;
}
[data-theme="dark"] .exam-info .service {
color: #fcfcfc;
}
[data-theme="dark"] .accession {
color: #fcfcfc;
}
[data-theme="dark"] .jobs-table .action-btn-edit {
background: var(--bg-elevated) !important;
border-color: var(--accent-dark) !important;
color: var(--accent-dark) !important;
}
[data-theme="dark"] .jobs-table .action-btn-edit:hover {
background: var(--accent-light) !important;
color: white !important;
border-color: var(--accent) !important;
}
/* ── Refresh button ─────────────────────────────────────────── */
[data-theme="dark"] .refresh-btn {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-muted) !important;
}
[data-theme="dark"] .refresh-btn:hover {
border-color: var(--accent) !important;
color: var(--accent-dark) !important;
background: var(--accent-light) !important;
}
/* ── Pagination ─────────────────────────────────────────────── */
[data-theme="dark"] .reg-pagination-row {
background: var(--bg-elevated) !important;
}
[data-theme="dark"] .reg-page-info,
[data-theme="dark"] .reg-page-num {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-page-select {
background: var(--input-bg) !important;
border-color: var(--border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .reg-page-btn {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
/* ── Appointment search card ────────────────────────────────── */
[data-theme="dark"] .search-card {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
box-shadow: var(--card-shadow) !important;
}
[data-theme="dark"] .search-card-title,
[data-theme="dark"] .results-title {
color: #fcfcfc !important;
}
[data-theme="dark"] .search-card-subtitle {
color: var(--text-muted) !important;
}
[data-theme="dark"] .search-filters {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .filter-label {
color: #fcfcfc !important;
}
[data-theme="dark"] .filter-input {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .filter-input:focus {
background: var(--bg-elevated) !important;
border-color: var(--input-border-focus) !important;
}
[data-theme="dark"] .filter-btn-secondary {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
[data-theme="dark"] .filter-btn-secondary:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
/* Appointments results table */
[data-theme="dark"] .appointments-table {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .appointments-table thead {
background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
}
[data-theme="dark"] .appointments-table th {
color: var(--text-muted) !important;
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .appointments-table td {
color: #fcfcfc !important;
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .appointments-table tr:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .results-table-wrapper {
border-color: var(--border) !important;
}
[data-theme="dark"] .search-results-container {
border-top-color: var(--border) !important;
}
/* ── NEW PATIENT registration modal card ────────────────────── */
[data-theme="dark"] .reg-modal-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .reg-modal-body {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .reg-modal-body .form-group label {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .reg-modal-body .form-group input,
[data-theme="dark"] .reg-modal-body .form-group select,
[data-theme="dark"] .reg-modal-body .form-group textarea {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .reg-modal-body .form-group input:focus,
[data-theme="dark"] .reg-modal-body .form-group select:focus,
[data-theme="dark"] .reg-modal-body .form-group textarea:focus {
background: var(--bg-elevated) !important;
border-color: var(--input-border-focus) !important;
}
[data-theme="dark"] .reg-modal-footer {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
[data-theme="dark"] .reg-modal-footer .reg-btn-cancel {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reg-modal-footer .reg-btn-cancel:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
[data-theme="dark"] .reg-modal-footer .reg-btn-nav {
background: var(--bg-elevated) !important;
color: var(--accent-dark) !important;
border-color: var(--border-strong) !important;
}
[data-theme="dark"] .reg-modal-footer .reg-btn-nav:hover {
background: var(--accent-light) !important;
}
/* ── EDIT PATIENT modal card ────────────────────────────────── */
[data-theme="dark"] .edit-modal-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .edit-modal-header {
background: linear-gradient(135deg, #2e1065 0%, #1e0f4a 100%) !important;
border-bottom-color: #4c1d95 !important;
}
[data-theme="dark"] .edit-modal-header-icon {
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
}
[data-theme="dark"] .edit-modal-header-text h2 {
color: #ddd6fe !important;
}
[data-theme="dark"] .edit-modal-header-text p {
color: #a78bfa !important;
}
[data-theme="dark"] .edit-modal-close {
background: rgba(124, 58, 237, 0.18) !important;
color: #ddd6fe !important;
}
[data-theme="dark"] .edit-modal-close:hover {
background: rgba(124, 58, 237, 0.3) !important;
}
[data-theme="dark"] .edit-modal-body {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .edit-modal-body .form-group label {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .edit-modal-body .form-group input,
[data-theme="dark"] .edit-modal-body .form-group select,
[data-theme="dark"] .edit-modal-body .form-group textarea {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .edit-modal-body .form-group input:focus,
[data-theme="dark"] .edit-modal-body .form-group select:focus,
[data-theme="dark"] .edit-modal-body .form-group textarea:focus {
background: var(--bg-elevated) !important;
border-color: var(--input-border-focus) !important;
}
[data-theme="dark"] .edit-modal-footer {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
/* em-btn variants — some have !important borders in registration.css */
[data-theme="dark"] .em-btn-cancel {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .em-btn-cancel:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
[data-theme="dark"] .em-btn-nav {
background: var(--bg-elevated) !important;
color: #a78bfa !important;
border-color: #6d28d9 !important;
}
[data-theme="dark"] .em-btn-nav:hover {
background: rgba(124, 58, 237, 0.18) !important;
}
[data-theme="dark"] .em-btn-draft {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .em-btn-draft:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .em-btn-ghost {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border: 1.5px solid var(--border) !important;
}
[data-theme="dark"] .em-btn-ghost:hover {
background: var(--bg-hover) !important;
}
/* ── PATIENT DETAILS modal card ─────────────────────────────── */
[data-theme="dark"] .details-modal-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .details-modal-body {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .details-modal-section {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .details-modal-section-title {
color: inherit !important;
/* let accent colour through */
}
[data-theme="dark"] .details-info-label {
color: var(--text-muted) !important;
}
[data-theme="dark"] .details-info-value {
background: var(--bg-surface) !important;
border-color: var(--border) !important;
color: #fcfcfc !important;
}
[data-theme="dark"] .details-modal-footer {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
[data-theme="dark"] .details-close-btn {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .details-close-btn:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
[data-theme="dark"] .reg-detail-list .reg-list-placeholder {
color: var(--text-muted) !important;
}
/* ── QUICK VISIT modal card ─────────────────────────────────── */
[data-theme="dark"] .quick-modal-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .quick-modal-body {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .quick-modal-body .form-group label {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .quick-modal-body .form-group input,
[data-theme="dark"] .quick-modal-body .form-group select {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .quick-modal-body .form-group input:focus,
[data-theme="dark"] .quick-modal-body .form-group select:focus {
background: var(--bg-elevated) !important;
border-color: var(--input-border-focus) !important;
}
[data-theme="dark"] .quick-modal-footer {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
[data-theme="dark"] .qv-btn-cancel {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .qv-btn-cancel:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
/* ── INCOMPLETE REGISTRATIONS (reminder) card ───────────────── */
[data-theme="dark"] .reminder-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .reminder-card-header {
background: linear-gradient(135deg, #422006 0%, #292400 100%) !important;
border-bottom-color: #78350f !important;
}
[data-theme="dark"] .reminder-card-header-text h3 {
color: #fde68a !important;
}
[data-theme="dark"] .reminder-card-header-text p {
color: #fbbf24 !important;
}
[data-theme="dark"] .reminder-card-body {
background: var(--bg-surface) !important;
}
[data-theme="dark"] .mini-item {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
border-left-color: #f59e0b !important;
}
[data-theme="dark"] .mini-item:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .mini-item-name {
color: var(--text-primary) !important;
}
[data-theme="dark"] .mini-item-mrn {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reminder-card-footer {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
[data-theme="dark"] .reminder-dismiss-btn {
background: var(--bg-elevated) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reminder-dismiss-btn:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
/* ── Registration & edit-patient success overlays ───────────── */
[data-theme="dark"] .pm-success-msg,
[data-theme="dark"] .reg-success-card {
background: var(--bg-surface) !important;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .reg-success-heading {
color: var(--text-primary) !important;
}
[data-theme="dark"] .reg-success-patient {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .reg-mrn-box {
background: var(--bg-elevated) !important;
}
[data-theme="dark"] .reg-mrn-label {
color: var(--text-muted) !important;
}
/* ── Edit Appointment modal fields ──────────────────────────── */
[data-theme="dark"] .reg-info-box {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reg-danger-box {
background: rgba(239, 68, 68, 0.1) !important;
border-left-color: #ef4444 !important;
}
[data-theme="dark"] .reg-danger-text {
color: #fca5a5 !important;
}
[data-theme="dark"] .reg-field-label,
[data-theme="dark"] .reg-field-label-sm {
color: #fcfcfc
}
[data-theme="dark"] .reg-field-input,
[data-theme="dark"] .reg-field-input-plain,
[data-theme="dark"] .reg-field-textarea,
[data-theme="dark"] .reg-field-textarea-sm {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .reg-field-readonly {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-field-hint {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-btn-cancel,
[data-theme="dark"] .reg-btn-cancel-plain {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-btn-cancel:hover,
[data-theme="dark"] .reg-btn-cancel-plain:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
}
/* ── Share study modal (body, options, delivery) ─────────────── */
[data-theme="dark"] .reg-share-option-body {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reg-share-option:hover .reg-share-option-body {
border-color: var(--accent) !important;
background: var(--bg-hover) !important;
}
[data-theme="dark"] .reg-share-option input:checked+.reg-share-option-body {
background: rgba(99, 102, 241, 0.18) !important;
border-color: #6366f1 !important;
}
[data-theme="dark"] .reg-share-option-title {
color: #fcfcfc !important;
}
[data-theme="dark"] .reg-share-option-desc {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-share-option-badge {
background: var(--bg-elevated) !important;
color: #27d432 !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reg-share-config-section {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .reg-share-config-section label {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .reg-share-config-section select {
background: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--input-text) !important;
}
[data-theme="dark"] .reg-share-delivery-body {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
[data-theme="dark"] .reg-share-delivery-opt:hover .reg-share-delivery-body {
border-color: #a5b4fc !important;
}
[data-theme="dark"] .reg-share-delivery-opt input:checked+.reg-share-delivery-body {
background: rgba(99, 102, 241, 0.18) !important;
border-color: #6366f1 !important;
color: #a5b4fc !important;
}
[data-theme="dark"] .reg-share-link-area {
background: rgba(16, 185, 129, 0.08) !important;
border-color: rgba(16, 185, 129, 0.25) !important;
}
[data-theme="dark"] .reg-share-section-label {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-share-patient-name {
color: #e2e8f0 !important;
}
[data-theme="dark"] .reg-share-patient-meta {
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-share-download-btn {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-muted) !important;
}
[data-theme="dark"] .reg-share-download-btn:hover:not(:disabled) {
background: var(--bg-hover) !important;
border-color: var(--accent) !important;
color: var(--accent-dark) !important;
}
/* ── PM recent visit cards ──────────────────────────────────── */
[data-theme="dark"] .pm-recent-visit-card {
background: var(--bg-elevated) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
[data-theme="dark"] .pm-recent-visit-card strong {
color: var(--text-primary) !important;
}
[data-theme="dark"] .pm-recent-visits-empty {
color: var(--text-muted) !important;
}
/* ── Form sections ──────────────────────────────────────────── */
[data-theme="dark"] .form-section {
/* background: var(--bg-elevated) !important;*/
border-color: var(--border) !important;
}
/* ── App footer ─────────────────────────────────────────────── */
[data-theme="dark"] .app-footer {
/*background: var(--bg-surface) !important; */
border-top-color: var(--border) !important;
color: var(--text-muted) !important;
}
[data-theme="dark"] .app-footer strong {
color: var(--text-primary) !important;
}
/* ── Patient search card items (JS-generated) ───────────────── */
[data-theme="dark"] .reg-patient-name {
color: #e2e8f0 !important;
}
[data-theme="dark"] .reg-patient-info {
color: #e2e8f0 !important;
}
[data-theme="dark"] .reg-patient-mrn-span,
[data-theme="dark"] .reg-patient-mrn-sub,
[data-theme="dark"] .reg-patient-age,
[data-theme="dark"] .reg-arrival-span {
color: #e2e8f0 !important;
}
/* ── Modal footer (plain variant) ───────────────────────────── */
[data-theme="dark"] .reg-modal-footer-plain {
background: var(--modal-footer-bg) !important;
border-top-color: var(--modal-footer-border) !important;
}
/* ============================================================
LOGIN PAGE DARK THEME
Covers: login-container, form inputs, labels, consent modal,
auth-pipeline overlay, reg-modals (pw-change, forgot-password),
and the background image dimming overlay.
============================================================ */
/* ── Login form card ─────────────────────────────────────────── */
[data-theme="dark"] .login-container {
background-color: var(--login-form-bg) !important;
border: 1px solid var(--login-form-border);
box-shadow: var(--login-form-shadow);
}
/* ── Headings inside the login card ─────────────────────────── */
[data-theme="dark"] .login-container h2,
[data-theme="dark"] .login-container h3 {
color: var(--login-heading) !important;
}
[data-theme="dark"] .welcome-note {
color: var(--login-subheading) !important;
}
/* ── Labels ──────────────────────────────────────────────────── */
[data-theme="dark"] .login-container label {
color: var(--login-label) !important;
}
/* ── Text inputs & password field ───────────────────────────── */
[data-theme="dark"] .login-container input[type="text"],
[data-theme="dark"] .login-container input[type="password"],
[data-theme="dark"] .login-container input[type="email"] {
background: var(--login-input-bg) !important;
border-color: var(--login-input-border) !important;
color: var(--login-input-text) !important;
}
[data-theme="dark"] .login-container input::placeholder {
color: var(--login-input-placeholder) !important;
}
[data-theme="dark"] .login-container input:focus {
border-color: var(--input-border-focus) !important;
background: #1e293b !important;
box-shadow: 0 0 0 3px var(--accent-focus-ring) !important;
}
/* OTP input (2FA) */
[data-theme="dark"] .otp-input {
background: var(--login-input-bg) !important;
border-color: var(--login-input-border) !important;
color: var(--login-input-text) !important;
}
/* ── Remember me checkbox label ─────────────────────────────── */
[data-theme="dark"] label[for="rememberMe"] {
color: var(--login-check-label) !important;
}
/* ── Forgot password link ───────────────────────────────────── */
[data-theme="dark"] .login-container a,
[data-theme="dark"] #forgotPasswordLink {
color: var(--login-link) !important;
}
/* ── Helper / paragraph text inside the card ────────────────── */
[data-theme="dark"] .login-container p {
color: var(--login-subheading) !important;
}
/* ── Error message ───────────────────────────────────────────── */
[data-theme="dark"] .error-message {
background-color: var(--login-error-bg) !important;
border-color: var(--login-error-border, transparent) !important;
color: var(--login-error-text) !important;
}
/* ── Toggle password icon ───────────────────────────────────── */
[data-theme="dark"] #togglePassword {
color: var(--input-placeholder) !important;
}
[data-theme="dark"] #togglePassword:hover {
color: var(--accent) !important;
}
/* ── Back to Login button (2FA form) ────────────────────────── */
[data-theme="dark"] #backToLogin {
color: var(--login-link) !important;
}
/* ── Auth pipeline overlay ───────────────────────────────────── */
[data-theme="dark"] .progress-animation {
background: var(--auth-overlay-bg) !important;
}
[data-theme="dark"] .auth-card {
background: var(--auth-card-bg) !important;
border-color: var(--auth-card-border) !important;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
0 10px 28px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .auth-node-ring {
background: var(--auth-node-ring-bg) !important;
border-color: var(--auth-node-ring-border) !important;
}
[data-theme="dark"] .auth-node-ring i {
color: var(--auth-node-icon) !important;
}
[data-theme="dark"] .auth-node-label {
color: var(--auth-node-label) !important;
}
[data-theme="dark"] .auth-connector {
background: var(--auth-connector-bg) !important;
}
/* Auth node states in dark mode */
[data-theme="dark"] .auth-node.scanning .auth-node-ring {
background: #1e3a5f !important;
border-color: #3b82f6 !important;
}
[data-theme="dark"] .auth-node.scanning .auth-node-ring i {
color: #60a5fa !important;
}
[data-theme="dark"] .auth-node.scanning .auth-node-label {
color: #60a5fa !important;
}
[data-theme="dark"] .auth-node.done .auth-node-ring {
background: #0d2818 !important;
border-color: #16a34a !important;
}
[data-theme="dark"] .auth-node.done .auth-node-ring i {
color: #4ade80 !important;
}
[data-theme="dark"] .auth-node.done .auth-node-label {
color: #4ade80 !important;
}
[data-theme="dark"] .auth-node.error .auth-node-ring {
background: #3b0000 !important;
border-color: #dc2626 !important;
}
[data-theme="dark"] .auth-node.error .auth-node-ring i {
color: #fca5a5 !important;
}
[data-theme="dark"] .auth-node.error .auth-node-label {
color: #fca5a5 !important;
}
[data-theme="dark"] .auth-card-footer {
border-top-color: var(--auth-footer-border) !important;
}
[data-theme="dark"] .auth-status-text {
color: var(--auth-status-text) !important;
}
[data-theme="dark"] .auth-status-text.success {
color: #4ade80 !important;
}
[data-theme="dark"] .auth-status-text.error {
color: #fca5a5 !important;
}
/* ── Consent modal ───────────────────────────────────────────── */
[data-theme="dark"] .consent-content {
background: var(--login-consent-bg) !important;
}
[data-theme="dark"] .consent-title {
color: var(--login-consent-title) !important;
border-bottom-color: var(--login-consent-border) !important;
}
[data-theme="dark"] .consent-body {
background: var(--login-consent-body-bg) !important;
border-color: var(--login-consent-border) !important;
color: var(--login-consent-text) !important;
}
[data-theme="dark"] .consent-body p,
[data-theme="dark"] .consent-body li {
color: var(--login-consent-text) !important;
}
[data-theme="dark"] .consent-body p.font-bold {
color: var(--login-heading) !important;
}
[data-theme="dark"] .consent-body p.text-sm.italic {
color: var(--login-subheading) !important;
}
[data-theme="dark"] .btn-decline {
background: #1e293b !important;
color: #fca5a5 !important;
border-color: #ef4444 !important;
}
[data-theme="dark"] .btn-decline:hover {
background: #3b0000 !important;
}
/* ── Password change modal & forgot password modal ──────────── */
/* (reg-modal design — already covered by reg-modal rules above
for cards, headers, inputs. Only login-specific overrides needed.) */
[data-theme="dark"] .reg-modal-body .text-sm.text-gray-500,
[data-theme="dark"] .reg-modal-body p {
color: var(--text-muted) !important;
}
/* Forgot-password success banner */
[data-theme="dark"] #forgotSuccess {
background: #0d2818 !important;
border-color: #166534 !important;
color: #4ade80 !important;
}
/* ── Mobile responsive adjustments ─────────────────────────── */
@media (max-width: 480px) {
[data-theme="dark"] .login-container {
background-color: rgba(15, 23, 42, 0.98) !important;
}
}