/* ============================================================ assets/css/themes.css 8 Themes — all components use CSS variables only. Applied via data-theme attribute on . ============================================================ */ /* ─── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── 1. Clinical Light (default) ──────────────────────────── */ :root, [data-theme="clinical-light"] { --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-primary: #0F6CBD; --color-primary-rgb: 15, 108, 189; --color-secondary: #107C41; --color-accent: #C55A11; --color-text: #1A1A2E; --color-text-muted: #6B7280; --color-border: #E5E7EB; --color-sidebar-bg: #1E3A5F; --color-sidebar-text: #FFFFFF; --color-danger: #DC2626; --color-warning: #D97706; --color-success: #107C41; --color-info: #0891B2; --color-card-shadow: 0 1px 3px rgba(0,0,0,0.1); --color-input-bg: #FFFFFF; --font-main: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition: all 0.2s ease; --sidebar-width: 260px; } /* ─── 2. Dark Clinical ──────────────────────────────────────── */ [data-theme="dark-clinical"] { --color-bg: #0D1117; --color-surface: #161B22; --color-primary: #58A6FF; --color-primary-rgb: 88, 166, 255; --color-secondary: #3FB950; --color-accent: #F78166; --color-text: #E6EDF3; --color-text-muted: #8B949E; --color-border: #30363D; --color-sidebar-bg: #010409; --color-sidebar-text: #E6EDF3; --color-danger: #FF7B72; --color-warning: #E3B341; --color-success: #3FB950; --color-info: #58A6FF; --color-card-shadow: 0 1px 3px rgba(0,0,0,0.4); --color-input-bg: #0D1117; } /* ─── 3. Soft Neutral ───────────────────────────────────────── */ [data-theme="soft-neutral"] { --color-bg: #FAF9F7; --color-surface: #FFFFFF; --color-primary: #5C6BC0; --color-primary-rgb: 92, 107, 192; --color-secondary: #66BB6A; --color-accent: #FFA726; --color-text: #2D2D2D; --color-text-muted: #757575; --color-border: #E0DDD8; --color-sidebar-bg: #37474F; --color-sidebar-text: #ECEFF1; --color-danger: #EF5350; --color-warning: #FFA726; --color-success: #66BB6A; --color-info: #5C6BC0; --color-card-shadow: 0 1px 4px rgba(0,0,0,0.08); --color-input-bg: #FFFFFF; } /* ─── 4. High Contrast (WCAG AAA) ──────────────────────────── */ [data-theme="high-contrast"] { --color-bg: #000000; --color-surface: #0A0A0A; --color-primary: #FFFF00; --color-primary-rgb: 255, 255, 0; --color-secondary: #00FF00; --color-accent: #FF6600; --color-text: #FFFFFF; --color-text-muted: #CCCCCC; --color-border: #FFFFFF; --color-sidebar-bg: #000000; --color-sidebar-text: #FFFF00; --color-danger: #FF4444; --color-warning: #FF6600; --color-success: #00FF00; --color-info: #00FFFF; --color-card-shadow: 0 0 0 2px #FFFFFF; --color-input-bg: #000000; } [data-theme="high-contrast"] *:focus { outline: 3px solid #FFFF00 !important; outline-offset: 2px !important; } /* ─── 5. Ocean Teal ─────────────────────────────────────────── */ [data-theme="ocean-teal"] { --color-bg: #E8F5F5; --color-surface: #FFFFFF; --color-primary: #00838F; --color-primary-rgb: 0, 131, 143; --color-secondary: #00ACC1; --color-accent: #FF7043; --color-text: #1A3C40; --color-text-muted: #546E7A; --color-border: #B2DFDB; --color-sidebar-bg: #004D40; --color-sidebar-text: #E0F2F1; --color-danger: #E53935; --color-warning: #FF7043; --color-success: #00897B; --color-info: #00838F; --color-card-shadow: 0 1px 4px rgba(0,77,64,0.15); --color-input-bg: #FFFFFF; } /* ─── 6. Slate Dark ─────────────────────────────────────────── */ [data-theme="slate-dark"] { --color-bg: #1E2030; --color-surface: #2A2D3E; --color-primary: #82AAFF; --color-primary-rgb: 130, 170, 255; --color-secondary: #C3E88D; --color-accent: #FFCB6B; --color-text: #A6ACCD; --color-text-muted: #676E95; --color-border: #3A3F5C; --color-sidebar-bg: #15172A; --color-sidebar-text: #A6ACCD; --color-danger: #F07178; --color-warning: #FFCB6B; --color-success: #C3E88D; --color-info: #82AAFF; --color-card-shadow: 0 1px 3px rgba(0,0,0,0.3); --color-input-bg: #1E2030; } /* ─── 7. Warm Sepia ─────────────────────────────────────────── */ [data-theme="warm-sepia"] { --color-bg: #F5ECD7; --color-surface: #FDF6E3; --color-primary: #8B4513; --color-primary-rgb: 139, 69, 19; --color-secondary: #6B8E23; --color-accent: #CD853F; --color-text: #3B2F2F; --color-text-muted: #6B5C4E; --color-border: #D4B896; --color-sidebar-bg: #4A2C17; --color-sidebar-text: #FDF6E3; --color-danger: #A0000A; --color-warning: #CD853F; --color-success: #6B8E23; --color-info: #6B7A8D; --color-card-shadow: 0 1px 4px rgba(74,44,23,0.15); --color-input-bg: #FDF6E3; } /* ─── 8. Purple Haze (Dark) ─────────────────────────────────── */ [data-theme="purple-haze"] { --color-bg: #13111C; --color-surface: #1E1A2E; --color-primary: #B39DDB; --color-primary-rgb: 179, 157, 219; --color-secondary: #80CBC4; --color-accent: #F48FB1; --color-text: #EDE7F6; --color-text-muted: #9575CD; --color-border: #311B92; --color-sidebar-bg: #0D0B14; --color-sidebar-text: #EDE7F6; --color-danger: #F48FB1; --color-warning: #CE93D8; --color-success: #80CBC4; --color-info: #B39DDB; --color-card-shadow: 0 1px 3px rgba(0,0,0,0.5); --color-input-bg: #13111C; } /* ============================================================ GLOBAL COMPONENT OVERRIDES — use variables everywhere ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-main); line-height: 1.6; margin: 0; padding: 0; } /* Smooth theme transitions after initial load */ body.theme-ready * { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease !important; } /* ─── Cards ─────────────────────────────────────────────────── */ .card { background: var(--color-surface) !important; border-color: var(--color-border) !important; box-shadow: var(--color-card-shadow) !important; border-radius: var(--radius-md) !important; } .card-header { background: rgba(var(--color-primary-rgb), 0.06) !important; border-bottom-color: var(--color-border) !important; color: var(--color-text) !important; } .card-footer { background: var(--color-bg) !important; border-top-color: var(--color-border) !important; } /* ─── Sidebar ───────────────────────────────────────────────── */ .sidebar { background: var(--color-sidebar-bg) !important; color: var(--color-sidebar-text) !important; width: var(--sidebar-width); min-height: 100vh; position: fixed; top: 0; left: 0; z-index: 1040; overflow-y: auto; transition: transform 0.3s ease; } .sidebar .nav-link { color: rgba(255,255,255,0.75) !important; padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); margin: 2px 8px; transition: var(--transition); } .sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff !important; background: rgba(255,255,255,0.12) !important; } .sidebar .sidebar-brand { color: var(--color-sidebar-text) !important; font-weight: 700; font-size: 1.1rem; padding: 1.2rem 1.2rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: block; text-decoration: none; } .sidebar .sidebar-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); padding: 1rem 1.2rem 0.3rem; } /* ─── Main Content ───────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; padding: 0; transition: margin-left 0.3s ease; } /* ─── Top Navbar ─────────────────────────────────────────────── */ .top-navbar { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; box-shadow: var(--color-card-shadow) !important; padding: 0.5rem 1.5rem; position: sticky; top: 0; z-index: 1030; } /* ─── Buttons ───────────────────────────────────────────────── */ .btn-primary { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; } .btn-primary:hover { filter: brightness(1.1); } .btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-outline-primary:hover { background: var(--color-primary) !important; color: #fff !important; } .btn-success { background: var(--color-success) !important; border-color: var(--color-success) !important; } .btn-danger { background: var(--color-danger) !important; border-color: var(--color-danger) !important; } .btn-warning { background: var(--color-warning) !important; border-color: var(--color-warning) !important; } /* ─── Forms ─────────────────────────────────────────────────── */ .form-control, .form-select { background-color: var(--color-input-bg) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius-sm) !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important; background-color: var(--color-input-bg) !important; } .form-control::placeholder { color: var(--color-text-muted) !important; } .form-label { color: var(--color-text); font-weight: 500; } .form-check-input:checked { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .input-group-text { background: var(--color-bg) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* ─── Tables ─────────────────────────────────────────────────── */ .table { --bs-table-bg: var(--color-surface); --bs-table-border-color: var(--color-border); --bs-table-striped-bg: var(--color-bg); --bs-table-hover-bg: rgba(var(--color-primary-rgb), 0.05); color: var(--color-text); } .table thead th { background: var(--color-bg); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--color-border) !important; } .table-responsive { border-radius: var(--radius-md); } /* ─── Modals ─────────────────────────────────────────────────── */ .modal-content { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius-lg) !important; } .modal-header { border-bottom-color: var(--color-border) !important; } .modal-footer { border-top-color: var(--color-border) !important; } .modal-backdrop.show { opacity: 0.6; } /* ─── Nav Tabs ───────────────────────────────────────────────── */ .nav-tabs { border-bottom-color: var(--color-border) !important; } .nav-tabs .nav-link { color: var(--color-text-muted) !important; border-color: transparent !important; } .nav-tabs .nav-link:hover { color: var(--color-primary) !important; border-color: var(--color-border) var(--color-border) transparent !important; background: rgba(var(--color-primary-rgb), 0.05) !important; } .nav-tabs .nav-link.active { color: var(--color-primary) !important; background: var(--color-surface) !important; border-color: var(--color-border) var(--color-border) var(--color-surface) !important; font-weight: 600; } /* ─── Badges ─────────────────────────────────────────────────── */ .badge.bg-primary { background: var(--color-primary) !important; } .badge.bg-success { background: var(--color-success) !important; } .badge.bg-danger { background: var(--color-danger) !important; } .badge.bg-warning { background: var(--color-warning) !important; color: var(--color-text) !important; } .badge.bg-secondary { background: var(--color-text-muted)!important; } .badge.bg-info { background: var(--color-info) !important; } /* ─── Alerts ─────────────────────────────────────────────────── */ .alert { border-radius: var(--radius-md) !important; border: 1px solid var(--color-border); } .alert-success { background: rgba(var(--color-primary-rgb), 0.08) !important; border-color: var(--color-success) !important; color: var(--color-text) !important; } .alert-danger { border-color: var(--color-danger) !important; } .alert-warning { border-color: var(--color-warning) !important; } /* ─── Dropdowns ──────────────────────────────────────────────── */ .dropdown-menu { background: var(--color-surface) !important; border-color: var(--color-border) !important; box-shadow: var(--color-card-shadow) !important; border-radius: var(--radius-md) !important; } .dropdown-item { color: var(--color-text) !important; } .dropdown-item:hover { background: rgba(var(--color-primary-rgb), 0.08) !important; color: var(--color-primary) !important; } .dropdown-divider { border-color: var(--color-border) !important; } /* ─── List Groups ────────────────────────────────────────────── */ .list-group-item { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } .list-group-item.active { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* ─── Progress Bars ──────────────────────────────────────────── */ .progress { background: var(--color-bg) !important; border: 1px solid var(--color-border); } .progress-bar { background: var(--color-primary) !important; } /* ─── Text Utilities ─────────────────────────────────────────── */ .text-muted { color: var(--color-text-muted) !important; } .text-primary { color: var(--color-primary) !important; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } .bg-surface { background: var(--color-surface) !important; } .bg-mdt { background: var(--color-bg) !important; } .border-theme { border-color: var(--color-border) !important; } /* ─── Offcanvas (mobile sidebar) ─────────────────────────────── */ .offcanvas { background: var(--color-sidebar-bg) !important; color: var(--color-sidebar-text) !important; } /* ─── Custom MDT Components ──────────────────────────────────── */ /* Stats Cards */ .stat-card { border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--color-card-shadow); padding: 1.25rem; } .stat-card.stat-danger { border-left-color: var(--color-danger); } .stat-card.stat-success { border-left-color: var(--color-success); } .stat-card.stat-warning { border-left-color: var(--color-warning); } .stat-card .stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); } .stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--color-text); line-height: 1; } .stat-card .stat-label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Timeline */ .clinical-timeline { position: relative; padding-left: 2rem; list-style: none; margin: 0; } .clinical-timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0; bottom: 0; width: 2px; background: var(--color-border); } .clinical-timeline li { position: relative; margin-bottom: 1.25rem; } .clinical-timeline li::before { content: ''; position: absolute; left: -1.65rem; top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary); } .clinical-timeline .tl-imaging::before { background: var(--color-info); box-shadow: 0 0 0 2px var(--color-info); } .clinical-timeline .tl-pathology::before { background: var(--color-warning); box-shadow: 0 0 0 2px var(--color-warning); } .clinical-timeline .tl-oncology::before { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } .clinical-timeline .tl-surgical::before { background: var(--color-danger); box-shadow: 0 0 0 2px var(--color-danger); } .clinical-timeline .tl-mdt::before { background: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-secondary); } .clinical-timeline .tl-date { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; } .clinical-timeline .tl-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; margin-top: 0.2rem; box-shadow: var(--color-card-shadow); } /* Case Status Badges */ .case-status-active { background: var(--color-success) !important; } .case-status-follow_up { background: var(--color-warning) !important; color: var(--color-text) !important; } .case-status-resolved { background: var(--color-text-muted)!important; } .case-status-deceased { background: var(--color-danger) !important; } /* Meeting Status */ .meeting-scheduled { border-left-color: var(--color-primary) !important; } .meeting-held { border-left-color: var(--color-success) !important; } .meeting-postponed { border-left-color: var(--color-warning) !important; } .meeting-canceled { border-left-color: var(--color-danger) !important; } /* Urgency Rows */ tr.urgency-emergency { background: rgba(220, 38, 38, 0.08) !important; } tr.urgency-urgent { background: rgba(217, 119, 6, 0.08) !important; } /* Print Presentation View */ .presentation-header { background: var(--color-sidebar-bg); color: var(--color-sidebar-text); padding: 1.5rem 2rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; } /* Decision Form */ .decision-form-wrapper { border: 2px solid var(--color-primary); border-radius: var(--radius-lg); padding: 1.5rem; background: rgba(var(--color-primary-rgb), 0.03); } /* Notification badge */ .notif-dot { width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%; display: inline-block; position: absolute; top: 6px; right: 6px; } /* Theme Switcher Button */ #themeSwitcherBtn { position: fixed; bottom: 80px; right: 16px; z-index: 9999; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.85rem; cursor: pointer; transition: var(--transition); } #themeSwitcherBtn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Theme Swatch */ .theme-swatch { display: flex; gap: 3px; margin-top: 6px; } .theme-swatch span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); display: inline-block; } .theme-card { cursor: pointer; border: 2px solid var(--color-border) !important; transition: var(--transition); border-radius: var(--radius-md) !important; } .theme-card:hover, .theme-card.active { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important; } .theme-card.active .theme-check { display: inline-block !important; } .theme-check { display: none; color: var(--color-success); } /* Bottom Nav (mobile) */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); z-index: 1050; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); } .bottom-nav a { flex: 1; text-align: center; padding: 0.6rem 0; font-size: 0.7rem; color: var(--color-text-muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: var(--transition); min-height: 44px; justify-content: center; } .bottom-nav a.active, .bottom-nav a:hover { color: var(--color-primary); } .bottom-nav i { font-size: 1.2rem; } /* Loading Spinner */ .mdt-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* File Upload Zone */ .upload-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition); color: var(--color-text-muted); } .upload-zone:hover, .upload-zone.dragover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.04); color: var(--color-primary); } /* Code / Mono */ code, pre, .font-mono { font-family: var(--font-mono); font-size: 0.88em; } /* Scrollbar Theming (WebKit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ─── Print Styles ───────────────────────────────────────────── */ @media print { .sidebar, .top-navbar, .bottom-nav, #themeSwitcherBtn, .btn, .no-print { display: none !important; } .main-content { margin-left: 0 !important; padding: 0 !important; } body { background: #fff !important; color: #000 !important; font-size: 11pt; } .card { box-shadow: none !important; border: 1px solid #ccc !important; } .presentation-header { background: #003366 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .clinical-timeline::before { background: #ccc !important; } a[href]::after { content: none !important; } @page { size: A4; margin: 1.5cm 1.5cm 2cm 1.5cm; } }