/* ═══════════════════════════════════════════════════════════ dark.css — Dark-mode overrides for custom (non-MudBlazor) CSS. Engages ONLY when is present, so Light mode is completely untouched. Surfaces/text/borders mirror the MudBlazor dark palette for a consistent professional theme. ═══════════════════════════════════════════════════════════ */ html.app-dark { --rx-surface: #1E2538; /* cards, dialogs, table bodies */ --rx-surface-2: #232C42; /* insets that were #fafafa/#f8f9 */ --rx-surface-3: #283150; /* table heads / hover */ --rx-bg: #121826; /* page background */ --rx-border: #2A3248; /* subtle dividers */ --rx-text: #EEF2FF; /* primary text */ --rx-text-2: #9AAEC9; /* secondary text */ } /* ── Generic surfaces ───────────────────────────────────────── */ html.app-dark .rx-stat-card, html.app-dark .section-card, html.app-dark .stat-card, html.app-dark .table-section, html.app-dark .drug-detail-table, html.app-dark .chart-card, html.app-dark .patient-card, html.app-dark .patient-mobile-card { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; } html.app-dark .pmc-name { color: var(--rx-text) !important; } html.app-dark .pmc-mrn, html.app-dark .pmc-row { color: var(--rx-text-2) !important; } html.app-dark .pmc-row .mud-icon-root, html.app-dark .patient-mobile-card .mud-icon-root { color: var(--rx-text) !important; } html.app-dark .column-card, html.app-dark .question-wrapper, html.app-dark .search-section, html.app-dark .detail-count { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; } html.app-dark .detail-row-container { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; } /* ── Text contrast ──────────────────────────────────────────── */ html.app-dark .stat-value, html.app-dark .detail-title, html.app-dark .dialog-title, html.app-dark .question-label, html.app-dark .card-value { color: var(--rx-text) !important; } html.app-dark .card-title, html.app-dark .card-subtitle, html.app-dark .stat-title, html.app-dark .stat-subtitle, html.app-dark .detail-count, html.app-dark .drug-strength { color: var(--rx-text-2) !important; } /* ── Tables ─────────────────────────────────────────────────── */ html.app-dark .patients-table .mud-table-head, html.app-dark .patients-table .mud-table-head th, html.app-dark .patients-table .mud-table-head .mud-table-cell, html.app-dark .drug-detail-table .mud-table-head, html.app-dark .drug-detail-table .mud-table-head th { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; border-color: var(--rx-border) !important; } html.app-dark .patients-table .mud-table-cell, html.app-dark .drug-detail-table .mud-table-body td { color: var(--rx-text) !important; border-color: var(--rx-border) !important; } html.app-dark .patients-table .mud-table-row:hover, html.app-dark .drug-detail-table .mud-table-body .mud-table-row:hover { background: var(--rx-surface-3) !important; } html.app-dark .patients-table .mud-table-pagination { border-color: var(--rx-border) !important; } /* ── Form inputs (custom CSS forced white) ──────────────────── */ html.app-dark .field-input .mud-input-slot, html.app-dark .select-field .mud-input-slot, html.app-dark .field-input .mud-input-multiline .mud-input-slot, html.app-dark .textarea-field .mud-input-multiline .mud-input-slot, html.app-dark .question-details-container .mud-input-slot, html.app-dark .question-details-container input, html.app-dark .question-details-container textarea, html.app-dark .prescription-code-select .mud-input { background-color: var(--rx-surface-2) !important; color: var(--rx-text) !important; } html.app-dark .field-input .mud-input-slot.mud-disabled, html.app-dark .field-input .mud-input.mud-disabled { background-color: #1a2030 !important; } /* ── Dividers / separators ──────────────────────────────────── */ html.app-dark .dialog-divider, html.app-dark .dialog-separator, html.app-dark .dialog-header, html.app-dark .dialog-footer, html.app-dark .autocomplete-add-new, html.app-dark .question-details-container { border-color: var(--rx-border) !important; } /* ── Autocomplete / select hover states ─────────────────────── */ html.app-dark .prescription-code-select .mud-select-item:hover, html.app-dark .drug-autocomplete-item:hover { background-color: var(--rx-surface-3) !important; } html.app-dark .drug-strength { background-color: var(--rx-surface-3) !important; color: var(--mud-palette-primary) !important; } html.app-dark .drug-name { color: var(--rx-text) !important; } html.app-dark .drug-autocomplete-item:hover { border-color: var(--rx-border) !important; } html.app-dark .autocomplete-add-new { background: var(--rx-surface) !important; } /* ── TopBar notification / message panels ───────────────────── */ html.app-dark .panel-notif-item.unread, html.app-dark .panel-msg-item.unread { background: rgba(77, 158, 255, 0.10) !important; } html.app-dark .panel-notif-item:hover, html.app-dark .panel-msg-item:hover { background: rgba(255, 255, 255, 0.05) !important; } html.app-dark .panel-notif-body, html.app-dark .panel-notif-time, html.app-dark .panel-msg-preview, html.app-dark .panel-msg-time, html.app-dark .user-menu-role { color: var(--rx-text-2) !important; } /* ── Sidebar / Drawer (layout.css forces white) ─────────────── */ html.app-dark .mud-drawer { background: var(--rx-surface) !important; border-left-color: var(--rx-border) !important; border-right-color: var(--rx-border) !important; } html.app-dark .mud-nav-link { color: var(--rx-text-2) !important; } html.app-dark .mud-nav-link .mud-nav-link-icon { color: var(--rx-text-2) !important; } html.app-dark .mud-nav-link:hover { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; } html.app-dark .mud-nav-link:hover .mud-nav-link-icon { color: var(--mud-palette-primary) !important; } html.app-dark .mud-nav-link.active { background: rgba(77, 158, 255, 0.14) !important; color: var(--mud-palette-primary) !important; } html.app-dark .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; } /* ── Page / Section / Filter headers (utilities.css) ────────── */ html.app-dark .page-header, html.app-dark .filters-section { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; } html.app-dark .section-header, html.app-dark .chart-header-compact { background: var(--rx-surface-3) !important; border-color: var(--rx-border) !important; } html.app-dark .header-title h1, html.app-dark .section-header .section-title h3, html.app-dark .search-label, html.app-dark .filter-label, html.app-dark .chart-title-text, html.app-dark .age-percent, html.app-dark .dist-chart-percent { color: var(--rx-text) !important; } html.app-dark .header-title .subtitle, html.app-dark .field-label, html.app-dark .table-info, html.app-dark .bar-label, html.app-dark .age-label, html.app-dark .gender-item, html.app-dark .dist-chart-label { color: var(--rx-text-2) !important; } /* ── Charts (chart.css) ─────────────────────────────────────── */ html.app-dark .age-chart-card { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; } html.app-dark .age-progress, html.app-dark .dist-chart-track { background: var(--rx-surface-3) !important; } /* ── Prescription / SmartAssistant panels (#f8fafc/#f1f5f9) ─── */ html.app-dark .tab-buttons-row, html.app-dark .assistant-panel, html.app-dark .assistant-section, html.app-dark .suggestion-box, html.app-dark .info-panel { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; } /* ── Validation error stays readable on dark ────────────────── */ html.app-dark .validation-error { background: rgba(220, 38, 38, 0.12) !important; } /* ── Questionnaire items (base, label, details) ─────────────── */ html.app-dark .question-wrapper { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; } html.app-dark .question-label { color: var(--rx-text) !important; } html.app-dark .question-details-container { border-top-color: var(--rx-border) !important; } /* ── Question hover/allergy states stay legible ─────────────── */ html.app-dark .question-wrapper:hover { background: var(--rx-surface-3) !important; border-color: var(--mud-palette-primary) !important; } html.app-dark .question-wrapper.allergy-question { background: rgba(245, 158, 11, 0.12) !important; border-color: #f59e0b !important; } /* ── Sidebar header (layout.css uses a bright gradient) ─────── */ html.app-dark .mud-drawer-header { background: var(--rx-surface) !important; border-bottom-color: var(--rx-border) !important; } /* ── Login page (custom colours in login.css) ───────────────── */ html.app-dark .login-page, html.app-dark .login-form-panel { background: var(--rx-bg) !important; } html.app-dark .login-card { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; } html.app-dark .login-title, html.app-dark .mobile-logo-name { color: var(--rx-text) !important; } html.app-dark .login-subtitle, html.app-dark .login-field-label, html.app-dark .remember-label, html.app-dark .login-card-footer { color: var(--rx-text-2) !important; } html.app-dark .login-card-footer { border-top-color: var(--rx-border) !important; } html.app-dark .login-demo-hint { background: rgba(2, 132, 199, 0.12) !important; border-color: rgba(56, 189, 248, 0.4) !important; color: #38bdf8 !important; } html.app-dark .login-error { background: rgba(220, 38, 38, 0.15) !important; border-color: rgba(248, 113, 113, 0.5) !important; } /* ── Patient filter panel (pf-*) ────────────────────────────── */ html.app-dark .pf-panel { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; } html.app-dark .pf-header-title, html.app-dark .pf-label { color: var(--rx-text-2) !important; } html.app-dark .pf-active-badge { background: rgba(77, 158, 255, 0.15) !important; border-color: rgba(77, 158, 255, 0.3) !important; color: var(--mud-palette-primary) !important; } html.app-dark .pf-reset-btn { color: var(--rx-text-2) !important; } html.app-dark .pf-reset-btn:hover { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; } html.app-dark .pf-search-group { border-color: var(--rx-border) !important; } html.app-dark .pf-panel .mud-input-outlined .mud-notched-outline { border-color: var(--rx-border) !important; } /* ── TopBar unread badges: lower slightly to balance on the icon ── */ .mud-appbar .mud-badge.mud-badge-overlap.mud-badge-top { top: 6px; } /* ── Action menu items (patient table 3-dot menu) visible in dark ── */ html.app-dark .menu-item-text { color: var(--rx-text) !important; } html.app-dark .mud-menu-popover .mud-list-item { color: var(--rx-text) !important; } /* ═══ Prescription writing page (dark) ═══ */ /* Section titles ("داروها"/"نسخه"/"مریضان") were dark-on-dark */ html.app-dark .prescription-page .col-section-header, html.app-dark .prescription-page .col-section-header span { color: var(--rx-text) !important; background: transparent !important; } /* Inner table headers were hardcoded light (#f8fafc) → white-on-white */ html.app-dark .drug-table .mud-table-head th, html.app-dark .patient-table .mud-table-head th, html.app-dark .prescription-table .mud-table-head th { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; border-bottom-color: var(--rx-border) !important; } html.app-dark .drug-table .mud-table-body td, html.app-dark .patient-table .mud-table-body td, html.app-dark .prescription-table .mud-table-body td { border-bottom-color: var(--rx-border) !important; color: var(--rx-text) !important; } /* Row hover / selection were light blue (#f1f5f9 / #dbeafe) → washed white */ html.app-dark .drug-table .mud-table-body .mud-table-row:hover, html.app-dark .patient-table .mud-table-body .mud-table-row:hover, html.app-dark .prescription-table .mud-table-body .mud-table-row:hover { background: var(--rx-surface-3) !important; } html.app-dark .patient-table .mud-table-body .mud-table-row.selected { background: rgba(77, 158, 255, 0.16) !important; } /* Tab buttons, summary, diagnosis header surfaces */ html.app-dark .tab-buttons-row { background: var(--rx-surface-2) !important; } html.app-dark .tab-button { color: var(--rx-text-2) !important; } html.app-dark .tab-button.active { background: var(--rx-surface) !important; color: var(--rx-text) !important; } html.app-dark .prescription-summary, html.app-dark .diagnosis-header, html.app-dark .diagnosis-section, html.app-dark .toggle-field, html.app-dark .note-field-container, html.app-dark .selected-patient-info { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; color: var(--rx-text) !important; } html.app-dark .toggle-field:hover, html.app-dark .diagnosis-header:hover { background: var(--rx-surface-3) !important; } html.app-dark .summary-label, html.app-dark .summary-value, html.app-dark .detail-label, html.app-dark .detail-value { color: var(--rx-text) !important; } /* ═══ Smart Assistant page (dark) ═══ */ html.app-dark .smart-assistant-page { background: var(--rx-bg) !important; } /* Chat area + AI bubble were white */ html.app-dark .chat-container, html.app-dark .no-patient-banner { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; color: var(--rx-text-2) !important; } html.app-dark .ai-message .message-text { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; box-shadow: none !important; } html.app-dark .chat-input-container { border-top-color: var(--rx-border) !important; } /* Patient table head wrapper (sticky) was hardcoded light */ html.app-dark .patient-table .mud-table-head { background: var(--rx-surface-3) !important; } /* Suggestion headers / counts / titles */ html.app-dark .suggestion-header, html.app-dark .empty-suggestion { background: var(--rx-surface-2) !important; border-color: var(--rx-border) !important; color: var(--rx-text-2) !important; } html.app-dark .suggestion-title, html.app-dark .item-name { color: var(--rx-text) !important; } html.app-dark .suggestion-count { background: var(--rx-surface-3) !important; color: var(--rx-text-2) !important; } /* Suggestion cards: dark tinted instead of bright light */ html.app-dark .medication-item { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.25) !important; } html.app-dark .lab-item { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.25) !important; } html.app-dark .item-dosage { background: var(--rx-surface) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; } html.app-dark .item-reason { color: var(--rx-text-2) !important; }