/* ===================================================================== AILEENN Healthcare — shared THEME stylesheet (light / dark modes) --------------------------------------------------------------------- DARK is the app's original look and is the DEFAULT (no attribute, or data-theme="dark" on ). LIGHT mode is opt-in and activated by theme.js setting . The choice is persisted in localStorage under "emd_theme" (same idea as "emd_lang"). Include this file LAST in so its overrides win, and include theme.js — the header user-options-module's Theme option flips the mode through EMDTheme.apply(). Two palettes coexist: • Account.aspx / HealthcareLanding.aspx → --navy / --blue / --accent … (plus many hard-coded colors, overridden by explicit rules below) • PatientDashboard.aspx via patient.css → --bg-* / --teal / --text-* … (fully token-driven, so re-declaring the tokens flips it) ===================================================================== */ /* ============================ LIGHT TOKENS ============================ */ :root[data-theme="light"] { /* --- Account / Landing palette --- */ --navy: rgba(255, 255, 255, 0.92); --blue: #2f6fed; --blue-soft: #2563eb; --accent: #6c5ce7; /* --- Dashboard (patient.css) palette --- */ --bg-deep: #eef1f6; --bg-surface: #ffffff; --bg-elevated: #f1f5f9; --bg-card: #ffffff; --border: #e2e8f0; --border-light: #cbd5e1; --teal: #0b8a8a; --teal-dim: #0a7373; --teal-glow: rgba(11, 138, 138, 0.12); --text-primary: #1e293b; --text-secondary: #5b6b7f; --text-muted: #94a3b8; --shadow: 0 4px 20px rgba(15, 23, 42, 0.10); } /* ===================================================================== ACCOUNT / LANDING — explicit light overrides for hard-coded colors ===================================================================== */ :root[data-theme="light"] body.theme-account { color: #1e293b; background: radial-gradient(1200px 600px at 80% -10%, rgba(74, 158, 255, 0.12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(108, 92, 231, 0.10), transparent 55%), linear-gradient(160deg, rgba(244, 248, 255, 0.94) 0%, rgba(232, 240, 252, 0.94) 45%, rgba(238, 243, 252, 0.95) 100%), url('images/AILEENN_Healthcare.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Navbar */ :root[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); } :root[data-theme="light"] .brand { color: #0f2540; } :root[data-theme="light"] .brand small { color: #2563eb; } /* Hero */ :root[data-theme="light"] .hero h1 { color: #0f2540; } :root[data-theme="light"] .hero p.lead, :root[data-theme="light"] .hero .lead { color: #475569; } :root[data-theme="light"] .pill { color: #2563eb; background: rgba(74, 158, 255, 0.12); border-color: rgba(74, 158, 255, 0.35); } :root[data-theme="light"] .note { color: #64748b; } :root[data-theme="light"] .demo-hint { color: #64748b; } :root[data-theme="light"] .demo-hint b { color: #334155; } /* Buttons (ghost) — primary keeps its blue→purple gradient */ :root[data-theme="light"] .btn-ghost { color: #0f2540; background: #eef2f7; border: 1px solid #cbd5e1; } :root[data-theme="light"] .btn-ghost:hover { background: #e2e8f0; } /* Footer */ :root[data-theme="light"] footer { color: #64748b; } /* Modal / overlay */ :root[data-theme="light"] .overlay { background: rgba(15, 23, 42, 0.35); } :root[data-theme="light"] .modal { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18); } :root[data-theme="light"] .modal-head h2 { color: #0f2540; } :root[data-theme="light"] .modal-head p { color: #64748b; } :root[data-theme="light"] .x-close { color: #94a3b8; } :root[data-theme="light"] .x-close:hover { color: #0f2540; } /* Form fields */ :root[data-theme="light"] .field label { color: #334155; } :root[data-theme="light"] .field input, :root[data-theme="light"] .field select { background: #f1f5f9; border: 1px solid #cbd5e1; color: #0f2540; } :root[data-theme="light"] .field input::placeholder { color: #94a3b8; } :root[data-theme="light"] .field input:focus, :root[data-theme="light"] .field select:focus { border-color: rgba(47, 111, 237, 0.6); box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.16); } :root[data-theme="light"] .field .opt { color: #94a3b8; } /* Wizard step indicator */ :root[data-theme="light"] .steps .step { background: #e2e8f0; } /* Success / done view + SQL preview */ :root[data-theme="light"] .success h2 { color: #0f2540; } :root[data-theme="light"] .success p { color: #475569; } :root[data-theme="light"] .sqlbox { background: #f1f5f9; border: 1px solid #dbe3ee; color: #0e7490; } /* Disclaimer block (Landing) */ :root[data-theme="light"] .disclaimer { background: rgba(74, 158, 255, 0.06); border: 1px solid rgba(74, 158, 255, 0.22); } :root[data-theme="light"] .disclaimer label { color: #475569; } :root[data-theme="light"] .disclaimer a { color: #2563eb; } /* Hero glass card + features (Landing) */ :root[data-theme="light"] .glass-card { background: rgba(255, 255, 255, 0.86); border: 1px solid #e2e8f0; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10); } :root[data-theme="light"] .glass-card h3 { color: #2563eb; } :root[data-theme="light"] .feature b { color: #0f2540; } :root[data-theme="light"] .feature p { color: #64748b; } /* ===================================================================== DASHBOARD — small light tweaks on top of the token flip (patient.css is token-driven, so most of it flips automatically) ===================================================================== */ :root[data-theme="light"] .data-table tr:hover td { background: rgba(15, 23, 42, 0.03); } :root[data-theme="light"] .tab-btn:hover { background: rgba(15, 23, 42, 0.03); } /* the AILEENN Recog console block intentionally stays dark in both modes */