/* ════════════════════════════════════════════════════════════ LIGHT THEME — data-theme="light" on All existing dark styles remain 100% untouched. ════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f4f2ef; --bg2: #ede9e4; --white: #ffffff; --text: #2e2b27; --navy: #1a1714; --navy-mid: #3d3830; --navy-deep: #2a2420; --muted: #7a7368; --border: #d6d0c8; --border-light: #e0dbd3; --slate: #8a8378; --accent: #c26b38; --accent-dim: rgba(194,107,56,0.12); --accent-border: rgba(194,107,56,0.28); --blue: #c26b38; --blue-light: rgba(194,107,56,0.10); --green: #1f8f5f; --green-bg: rgba(31,143,95,0.09); --amber: #a06820; --amber-bg: rgba(160,104,32,0.09); --red: #b03030; --red-bg: rgba(176,48,48,0.08); --uncertain: #8a7240; --uncertain-bg: rgba(138,114,64,0.07); --uncertain-border: rgba(138,114,64,0.18); --card-pi: #f8f6f3; --card-pi-header: #f0ede8; --card-pi-strip: #f3f0eb; --card-pi-divider: #e4dfd8; --pi-text-primary: #2a2724; --pi-text-secondary: #4a4642; --pi-text-label: #6e6a62; --pi-text-dim: #92908a; color-scheme: light; } [data-theme="light"] body { color-scheme: light; } /* ════════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════════ */ [data-theme="light"] .dp-sidebar { background: #edeae5; border-right: 1px solid #d6d0c8; } [data-theme="light"] .dp-logo { border-bottom-color: rgba(30,26,20,0.12); } [data-theme="light"] .dp-sidebar-top { border-bottom-color: rgba(30,26,20,0.10); } [data-theme="light"] .dp-back { color: rgba(30,26,20,0.45); } [data-theme="light"] .dp-back:hover { color: rgba(30,26,20,0.85); } [data-theme="light"] .dp-scenario-label { color: rgba(30,26,20,0.38); } [data-theme="light"] .dp-scenario-title { color: rgba(30,26,20,0.88); } [data-theme="light"] .dp-scenario-meta { color: rgba(30,26,20,0.45); } [data-theme="light"] .dp-scenario-status { background: rgba(31,143,95,0.13); color: rgba(15,110,65,0.95); } [data-theme="light"] .dp-scenario-status::before { background: rgba(15,110,65,0.9); } [data-theme="light"] .dp-nav-phase-label { color: rgba(30,26,20,0.40); border-left-color: rgba(30,26,20,0.18); } [data-theme="light"] .dp-nav-label { color: rgba(30,26,20,0.38); } [data-theme="light"] .dp-nav-item { color: rgba(30,26,20,0.58); } [data-theme="light"] .dp-nav-item:hover { background: rgba(30,26,20,0.07); color: rgba(30,26,20,0.90); } [data-theme="light"] .dp-nav-item.active { background: rgba(194,107,56,0.13); color: rgba(30,26,20,0.95); } [data-theme="light"] .dp-nav-num { background: rgba(30,26,20,0.09); color: rgba(30,26,20,0.45); } [data-theme="light"] .dp-nav-item.active .dp-nav-num { background: rgba(194,107,56,0.28); color: rgba(160,80,20,0.95); } [data-theme="light"] .dp-nav-check { color: #1f8f5f; } [data-theme="light"] .dp-nav-divider { background: rgba(30,26,20,0.10); } [data-theme="light"] .dp-risk-strip { background: rgba(30,26,20,0.04); border-bottom-color: rgba(30,26,20,0.07); } [data-theme="light"] .dp-risk-text { color: rgba(30,26,20,0.55); } [data-theme="light"] .dp-monitor-widget { border-top-color: rgba(30,26,20,0.10); } [data-theme="light"] .dp-monitor-head { color: rgba(30,26,20,0.38); } [data-theme="light"] .dp-monitor-label { color: rgba(30,26,20,0.48); } [data-theme="light"] .dp-monitor-track { background: rgba(30,26,20,0.09); } [data-theme="light"] .dp-monitor-val { color: rgba(30,26,20,0.40); } [data-theme="light"] .dp-monitor-next { color: rgba(30,26,20,0.38); border-top-color: rgba(30,26,20,0.08); } [data-theme="light"] .dp-sidebar-footer { border-top-color: rgba(30,26,20,0.10); } [data-theme="light"] .dp-user-profile { border-bottom-color: rgba(30,26,20,0.10); } [data-theme="light"] .dp-user-profile:hover { background: rgba(30,26,20,0.05); } [data-theme="light"] .dp-user-avatar { background: rgba(30,26,20,0.12); color: rgba(30,26,20,0.85); border-color: rgba(30,26,20,0.12); } [data-theme="light"] .dp-user-name { color: rgba(30,26,20,0.90); } [data-theme="light"] .dp-user-org { color: rgba(30,26,20,0.48); } [data-theme="light"] .dp-util-item { color: rgba(30,26,20,0.50); } [data-theme="light"] .dp-util-item:hover { background: rgba(30,26,20,0.05); color: rgba(30,26,20,0.80); } /* ════════════════════════════════════════════════════════════ TOPBAR ════════════════════════════════════════════════════════════ */ [data-theme="light"] .dp-topbar { background: #f0ede8; border-bottom-color: #d6d0c8; } [data-theme="light"] .dp-topbar-case { color: rgba(30,26,20,0.52); } [data-theme="light"] .dp-topbar-case-id { color: rgba(30,26,20,0.88); background: rgba(30,26,20,0.07); border-color: rgba(30,26,20,0.14); } [data-theme="light"] .dp-topbar-sep { background: rgba(30,26,20,0.16); } [data-theme="light"] .dp-topbar-session { color: rgba(30,26,20,0.42); } [data-theme="light"] .dp-topbar-status { color: #1f8f5f; } [data-theme="light"] .dp-topbar-status::before { background: #1f8f5f; } [data-theme="light"] .dp-topbar-timestamp { color: rgba(30,26,20,0.42); border-right-color: rgba(30,26,20,0.14); } [data-theme="light"] .dp-action-btn { border-color: rgba(30,26,20,0.20); color: rgba(30,26,20,0.60); } [data-theme="light"] .dp-action-btn:hover { border-color: rgba(30,26,20,0.40); color: rgba(30,26,20,0.90); background: rgba(30,26,20,0.06); } [data-theme="light"] .dp-topbar-more { border-color: rgba(30,26,20,0.18); color: rgba(30,26,20,0.50); } [data-theme="light"] .dp-topbar-more:hover { border-color: rgba(30,26,20,0.38); color: rgba(30,26,20,0.85); background: rgba(30,26,20,0.06); } /* ════════════════════════════════════════════════════════════ GLOBAL NAV BAR ════════════════════════════════════════════════════════════ */ [data-theme="light"] .clx-nav { background: #edeae5; border-bottom-color: #d0cbc3; } [data-theme="light"] .clx-nav-link { color: rgba(30,26,20,0.60); } [data-theme="light"] .clx-nav-link:hover { color: rgba(30,26,20,0.90); } [data-theme="light"] .clx-nav-user { border-left-color: #d0cbc3; } [data-theme="light"] .clx-nav-username { color: rgba(30,26,20,0.65); } /* ════════════════════════════════════════════════════════════ DARK PANELS → LIGHT/WARM REPLACEMENTS Previously these were near-black. Now: - Info/description panels → white card with orange-left border - Document headers (letter, handoff) → warm accent strip - Recommendation card → warm cream with dark text - Monitoring time chip → accent orange ════════════════════════════════════════════════════════════ */ /* ── Main recommendation action card ─────────────────────── */ [data-theme="light"] .ds-primary-rec-wrap { background: #fff8f4; border: 1px solid rgba(194,107,56,0.35); border-left: 4px solid var(--accent); box-shadow: 0 2px 12px rgba(194,107,56,0.10); color: #1a1714; } [data-theme="light"] .ds-primary-rec-eyebrow { color: rgba(30,26,20,0.45); } [data-theme="light"] .ds-primary-rec-action { color: #1a1714; } [data-theme="light"] .ds-primary-rec-state { color: rgba(30,26,20,0.55); } [data-theme="light"] .ds-rationale-block { border-top-color: rgba(30,26,20,0.12); } [data-theme="light"] .ds-rationale-label { color: rgba(30,26,20,0.45); } [data-theme="light"] .ds-rationale-text { color: rgba(30,26,20,0.80); } /* ── MEDREV preferred rec card ───────────────────────────── */ [data-theme="light"] .ds-preferred { background: #fff8f4; border: 1px solid rgba(194,107,56,0.30); border-left: 4px solid var(--accent); color: #1a1714; box-shadow: 0 2px 12px rgba(194,107,56,0.08); } /* ── ABX / MEDREV patient banner ─────────────────────────── */ [data-theme="light"] .abx-patient-banner { background: #fff8f4; border: 1px solid rgba(194,107,56,0.30); border-left: 4px solid var(--accent); color: #1a1714; } [data-theme="light"] .abx-patient-name { color: #1a1714; } [data-theme="light"] .abx-patient-sub { color: rgba(30,26,20,0.58); } /* ── Stewardship / clinical rec banner blocks ────────────── */ [data-theme="light"] .abx-rec-header, [data-theme="light"] .abx-rec-banner { background: #fff8f4; border: 1px solid rgba(194,107,56,0.25); color: #1a1714; } /* ── POLY GP letter document header ─────────────────────── */ [data-theme="light"] .poly-letter-doc-header { background: #f5ece4; border-bottom: 2px solid var(--accent); } [data-theme="light"] .poly-letter-doc-title { color: #1a1714; } [data-theme="light"] .poly-letter-doc-meta { color: rgba(30,26,20,0.50); } /* ── GP-Facing Handoff Note panel (the dark one) ────────── */ [data-theme="light"] .abx-patient-banner, [data-theme="light"] [class*="handoff-note"], [data-theme="light"] [class*="rec-panel"] { background: #fff8f4; border: 1px solid rgba(194,107,56,0.25); color: #1a1714; } /* ── "Medicines Optimisation — Clinical Handoff" header ──── */ /* This is a poly-letter-doc-header inside a poly-letter-doc */ [data-theme="light"] .poly-letter-doc .poly-letter-doc-header { background: #f5ece4; border-bottom: 2px solid var(--accent); } /* ── MDT HANDOFF / PATIENT COUNSELLING header bars ──────── */ /* These are rendered as poly-letter-doc-header blocks */ [data-theme="light"] .poly-letter-doc-header .poly-letter-doc-title { color: #1a1714; } /* ── POLY monitoring time chip ───────────────────────────── */ [data-theme="light"] .poly-mon-time { background: var(--accent); color: #fff; } /* ── POLY domain tag ─────────────────────────────────────── */ [data-theme="light"] .poly-stopp-domain { background: rgba(30,26,20,0.04); border-color: var(--border); color: var(--muted); } /* ── MEDREV escalation banner ────────────────────────────── */ [data-theme="light"] .medrev-esc-content { background: rgba(176,48,48,0.04); } /* ════════════════════════════════════════════════════════════ APP FOOTER ════════════════════════════════════════════════════════════ */ [data-theme="light"] .app-footer { background: #f4f2ef; border-top-color: #d6d0c8; } /* ════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ════════════════════════════════════════════════════════════ */ .clx-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg2); cursor: pointer; font-family: inherit; color: var(--muted); transition: border-color 0.2s, background 0.2s, color 0.2s; flex-shrink: 0; } .clx-theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .clx-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .clx-theme-moon { color: var(--navy-mid); flex-shrink: 0; transition: opacity 0.25s; pointer-events: none; } .clx-theme-sun { color: var(--amber); flex-shrink: 0; transition: opacity 0.25s; pointer-events: none; } .clx-theme-track { display: inline-flex; align-items: center; width: 32px; height: 17px; border-radius: 9px; background: var(--border); position: relative; transition: background 0.25s; flex-shrink: 0; } .clx-theme-thumb { position: absolute; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); } [data-theme="light"] .clx-theme-thumb { transform: translateX(15px); } [data-theme="light"] .clx-theme-track { background: rgba(194,107,56,0.22); } [data-theme="light"] .clx-theme-moon { color: #8a8378; } [data-theme="light"] .clx-theme-sun { color: #a06820; } [data-theme="light"] .clx-theme-toggle { background: #e8e4de; border-color: #ccc6be; color: #7a7368; } [data-theme="light"] .clx-theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ════════════════════════════════════════════════════════════ LIGHT THEME FIXES — Round 3 ════════════════════════════════════════════════════════════ */ /* ── ABX primary dark recommendation panel (.ds-primary) ─── */ [data-theme="light"] .ds-primary { background: #fff8f4; border: 1px solid rgba(194,107,56,0.30); border-left: 4px solid var(--green); } [data-theme="light"] .ds-primary::before { background: rgba(31,143,95,0.03); } [data-theme="light"] .ds-primary-eyebrow { color: var(--green); } [data-theme="light"] .ds-primary-eyebrow::before { background: var(--green); } [data-theme="light"] .ds-primary-eyebrow::after { background: rgba(30,26,20,0.08); } [data-theme="light"] .ds-primary-drug { color: #1a1714; } [data-theme="light"] .ds-primary-rationale { color: rgba(30,26,20,0.65); border-left-color: rgba(30,26,20,0.12); } /* Confidence strip inside ds-primary */ [data-theme="light"] .ds-conf-strip { background: rgba(30,26,20,0.04); } [data-theme="light"] .ds-conf-pct { color: var(--green); } [data-theme="light"] .ds-conf-label { color: var(--green); } [data-theme="light"] .ds-conf-desc { color: rgba(30,26,20,0.55); } [data-theme="light"] .ds-conf-bar { background: rgba(30,26,20,0.10); } [data-theme="light"] .ds-conf-tag { background: rgba(30,26,20,0.05); color: rgba(30,26,20,0.60); border-color: rgba(30,26,20,0.12); } /* Info columns inside ds-primary */ [data-theme="light"] .ds-primary-cols { border-top-color: rgba(30,26,20,0.10); } [data-theme="light"] .ds-pcol-label { color: rgba(30,26,20,0.40); } [data-theme="light"] .ds-pcol-val { color: rgba(30,26,20,0.80); } /* Evidence chips inside ds-primary */ [data-theme="light"] .ds-primary-ev-chip { background: rgba(30,26,20,0.05); color: rgba(30,26,20,0.55); border-color: rgba(30,26,20,0.10); } /* Trigger note inside ds-primary */ [data-theme="light"] .ds-primary-trigger-note { background: rgba(30,26,20,0.04); border-color: rgba(30,26,20,0.10); color: rgba(30,26,20,0.70); } /* Also fix the older poly-letter-header (navy-deep hardcoded) */ [data-theme="light"] .poly-letter-header { background: #f5ece4; border-bottom-color: var(--accent); color: #1a1714; } [data-theme="light"] .poly-letter-title { color: #1a1714; } [data-theme="light"] .poly-letter-meta { color: rgba(30,26,20,0.52); } /* ── Sliders (range inputs) ──────────────────────────────── */ /* The dark track behind the orange thumb */ [data-theme="light"] input[type="range"] { accent-color: var(--accent); /* Override the dark track with a light one */ background: transparent; } /* WebKit track */ [data-theme="light"] input[type="range"]::-webkit-slider-runnable-track { background: rgba(30,26,20,0.15); border-radius: 4px; height: 4px; } [data-theme="light"] input[type="range"]::-webkit-slider-thumb { background: var(--accent); } /* Firefox track */ [data-theme="light"] input[type="range"]::-moz-range-track { background: rgba(30,26,20,0.15); border-radius: 4px; } /* ── Checkboxes & selects — force light color-scheme ─────── */ [data-theme="light"] select, [data-theme="light"] input, [data-theme="light"] textarea { color-scheme: light; } [data-theme="light"] input[type="checkbox"] { accent-color: var(--accent); color-scheme: light; } /* ── Scrollbar — light version ───────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(30,26,20,0.18); border-radius: 3px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(30,26,20,0.30); } /* ════════════════════════════════════════════════════════════ LIGHT THEME FIXES — Round 4 ════════════════════════════════════════════════════════════ */ /* ── Fix 1: ds-primary white text (ABX drug name + rec text) ─ */ [data-theme="light"] .ds-primary-drug { color: #1a1714; } [data-theme="light"] .ds-primary-rec-action { color: #1a1714; } [data-theme="light"] .ds-primary-rec-eyebrow { color: rgba(30,26,20,0.48); } [data-theme="light"] .ds-primary-rec-state { color: rgba(30,26,20,0.58); } /* ── Fix 2: ds-primary-rec-wrap in light — cream card ────────*/ [data-theme="light"] .ds-primary-rec-wrap { background: #fff8f4; border: 1px solid rgba(194,107,56,0.30); border-left: 4px solid var(--green); box-shadow: 0 2px 8px rgba(30,26,20,0.06); color: #1a1714; } /* ── Fix 3: slider thumb vertical alignment ────────────────── DM Serif Display causes inline-block baseline shift on light. Force the range input to align properly. */ [data-theme="light"] input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(30,26,20,0.15); outline: none; vertical-align: middle; cursor: pointer; } [data-theme="light"] input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; margin-top: 0; box-shadow: 0 1px 4px rgba(30,26,20,0.20); } [data-theme="light"] input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; box-shadow: 0 1px 4px rgba(30,26,20,0.20); } [data-theme="light"] input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(30,26,20,0.15); } /* ── Fix 4: Document headers (STRUCTURED MEDICATION REVIEW, MDT HANDOFF, PATIENT COUNSELLING SUMMARY, CLINICAL HANDOFF) — warm cream background, dark readable text, clean font ─── */ [data-theme="light"] .poly-letter-doc-header { background: #f5ece4; border-bottom: 2px solid var(--accent); } [data-theme="light"] .poly-letter-doc-title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #1a1714; margin-bottom: 0; } [data-theme="light"] .poly-letter-doc-meta { color: rgba(30,26,20,0.52); margin-top: 3px; } /* Also covers MEDREV RAPID REVIEW — CLINICAL HANDOFF header */ [data-theme="light"] .ep-topbar-logo-wrap { background: transparent; } /* ── Fix 5: poly-letter-doc section hover ────────────────────*/ [data-theme="light"] .poly-letter-doc-section:hover { background: rgba(30,26,20,0.018); } /* ── Fix 6: abx ds-primary panel — fix confidence bar text ──*/ [data-theme="light"] .ds-conf-strip { background: rgba(30,26,20,0.04); } [data-theme="light"] .ds-conf-pct { color: var(--green); } [data-theme="light"] .ds-conf-label { color: var(--green); } [data-theme="light"] .ds-conf-desc { color: rgba(30,26,20,0.55); } [data-theme="light"] .ds-conf-bar { background: rgba(30,26,20,0.10); } [data-theme="light"] .ds-pcol-label { color: rgba(30,26,20,0.42); } [data-theme="light"] .ds-pcol-val { color: rgba(30,26,20,0.82); } [data-theme="light"] .ds-primary-cols { border-top-color: rgba(30,26,20,0.10); } [data-theme="light"] .ds-primary-ev-chip { background: rgba(30,26,20,0.05); color: rgba(30,26,20,0.55); border-color: rgba(30,26,20,0.12); } /* ════════════════════════════════════════════════════════════ LIGHT THEME FIXES — Round 5 Fix: white-on-white text inside ds-primary columns + rationale ════════════════════════════════════════════════════════════ */ /* ── ds-primary columns (GUIDELINE SOURCE, UKHSA, etc.) ──── */ [data-theme="light"] .ds-pcol-label { color: rgba(30,26,20,0.42); } [data-theme="light"] .ds-pcol-val { color: rgba(30,26,20,0.82); } [data-theme="light"] .ds-pcol-pill { color: #1a1714; } [data-theme="light"] .ds-pcol-avoid { background: rgba(176,48,48,0.10); color: #8b1a1a; } [data-theme="light"] .ds-pcol-alt { background: rgba(160,104,32,0.12); color: #7a5200; } [data-theme="light"] .ds-pcol-cond { background: rgba(194,107,56,0.12); color: #8a4010; } [data-theme="light"] .ds-primary-cols { border-top-color: rgba(30,26,20,0.10); } /* ── ds-rationale inside ds-primary-rec-wrap ─────────────── */ [data-theme="light"] .ds-rationale-block { border-top-color: rgba(30,26,20,0.10); } [data-theme="light"] .ds-rationale-label { color: rgba(30,26,20,0.42); } [data-theme="light"] .ds-rationale-text { color: rgba(30,26,20,0.80); } /* ── ds-conf-strip (confidence band) ────────────────────── */ [data-theme="light"] .ds-conf-strip { background: rgba(30,26,20,0.04); } [data-theme="light"] .ds-conf-pct { color: var(--green); } [data-theme="light"] .ds-conf-label { color: var(--green); } [data-theme="light"] .ds-conf-desc { color: rgba(30,26,20,0.55); } [data-theme="light"] .ds-conf-bar { background: rgba(30,26,20,0.10); } [data-theme="light"] .ds-conf-tag { background: rgba(30,26,20,0.06); color: rgba(30,26,20,0.60); border-color: rgba(30,26,20,0.12); } [data-theme="light"] .ds-conf-tag.green { background: rgba(31,143,95,0.10); color: #1f6f50; border-color: rgba(31,143,95,0.18); } [data-theme="light"] .ds-conf-tag.amber { background: rgba(160,104,32,0.10); color: #7a5200; border-color: rgba(160,104,32,0.18); } /* ── ev chips inside ds-primary ─────────────────────────── */ [data-theme="light"] .ds-primary-ev-chip { background: rgba(30,26,20,0.05); color: rgba(30,26,20,0.55); border-color: rgba(30,26,20,0.12); } [data-theme="light"] .ds-primary-ev-chip.strong { background: rgba(31,143,95,0.10); color: #1f6f50; border-color: rgba(31,143,95,0.18); } [data-theme="light"] .ds-primary-ev-chip.caution { background: rgba(160,104,32,0.10); color: #7a5200; border-color: rgba(160,104,32,0.18); } /* ════════════════════════════════════════════════════════════ LIGHT THEME FIXES — Round 6 Increased specificity with html prefix to override styles.css ════════════════════════════════════════════════════════════ */ html[data-theme="light"] .ds-pcol-label { color: rgba(30,26,20,0.42) !important; } html[data-theme="light"] .ds-pcol-val { color: rgba(30,26,20,0.82) !important; } html[data-theme="light"] .ds-pcol-pill { color: #1a1714 !important; } html[data-theme="light"] .ds-pcol-avoid { background: rgba(176,48,48,0.10) !important; color: #8b1a1a !important; } html[data-theme="light"] .ds-pcol-alt { background: rgba(160,104,32,0.12) !important; color: #7a5200 !important; } html[data-theme="light"] .ds-pcol-cond { background: rgba(194,107,56,0.12) !important; color: #8a4010 !important; } html[data-theme="light"] .ds-primary-cols { border-top-color: rgba(30,26,20,0.10) !important; } html[data-theme="light"] .ds-rationale-block { border-top-color: rgba(30,26,20,0.10) !important; } html[data-theme="light"] .ds-rationale-label { color: rgba(30,26,20,0.42) !important; } html[data-theme="light"] .ds-rationale-text { color: rgba(30,26,20,0.80) !important; } html[data-theme="light"] .ds-conf-strip { background: rgba(30,26,20,0.04) !important; } html[data-theme="light"] .ds-conf-pct { color: var(--green) !important; } html[data-theme="light"] .ds-conf-label { color: var(--green) !important; } html[data-theme="light"] .ds-conf-desc { color: rgba(30,26,20,0.55) !important; } html[data-theme="light"] .ds-conf-bar { background: rgba(30,26,20,0.10) !important; } html[data-theme="light"] .ds-conf-tag { background: rgba(30,26,20,0.06) !important; color: rgba(30,26,20,0.60) !important; border-color: rgba(30,26,20,0.12) !important; } html[data-theme="light"] .ds-conf-tag.green { background: rgba(31,143,95,0.10) !important; color: #1f6f50 !important; border-color: rgba(31,143,95,0.18) !important; } html[data-theme="light"] .ds-conf-tag.amber { background: rgba(160,104,32,0.10) !important; color: #7a5200 !important; border-color: rgba(160,104,32,0.18) !important; } html[data-theme="light"] .ds-primary-ev-chip { background: rgba(30,26,20,0.05) !important; color: rgba(30,26,20,0.55) !important; border-color: rgba(30,26,20,0.12) !important; } html[data-theme="light"] .ds-primary-ev-chip.strong { background: rgba(31,143,95,0.10) !important; color: #1f6f50 !important; border-color: rgba(31,143,95,0.18) !important; } html[data-theme="light"] .ds-primary-ev-chip.caution { background: rgba(160,104,32,0.10) !important; color: #7a5200 !important; border-color: rgba(160,104,32,0.18) !important; } /* Also fix the ABX ds-primary big drug name and text */ html[data-theme="light"] .ds-primary-drug { color: #1a1714 !important; } html[data-theme="light"] .ds-primary-rec-action { color: #1a1714 !important; } html[data-theme="light"] .ds-primary-rec-eyebrow { color: rgba(30,26,20,0.48) !important; } html[data-theme="light"] .ds-primary-rec-state { color: rgba(30,26,20,0.58) !important; } /* ════════════════════════════════════════════════════════════ LIGHT THEME FIXES — Round 7 (DEFINITIVE) Root cause: .ds-primary-rec-wrap has color:rgba(255,255,255,0.92) which all children inherit. Fix the parent, children follow. Also fix ip-pop-range which needs color-scheme:light on container. ════════════════════════════════════════════════════════════ */ /* ── 1. Fix parent color — all white text children follow ─── */ html[data-theme="light"] .ds-primary-rec-wrap { color: #1a1714 !important; } /* ── 2. Explicitly fix every white-text child just in case ── */ html[data-theme="light"] .ds-primary-rec-wrap * { color: inherit; } html[data-theme="light"] .ds-primary-drug { color: #1a1714 !important; } html[data-theme="light"] .ds-primary-rec-action { color: #1a1714 !important; } html[data-theme="light"] .ds-primary-rec-eyebrow { color: rgba(30,26,20,0.50) !important; } html[data-theme="light"] .ds-primary-rec-state { color: rgba(30,26,20,0.60) !important; } html[data-theme="light"] .ds-pcol-label { color: rgba(30,26,20,0.42) !important; } html[data-theme="light"] .ds-pcol-val { color: rgba(30,26,20,0.82) !important; } html[data-theme="light"] .ds-conf-desc { color: rgba(30,26,20,0.55) !important; } html[data-theme="light"] .ds-conf-pct { color: var(--green) !important; } html[data-theme="light"] .ds-conf-label { color: var(--green) !important; } html[data-theme="light"] .ds-rationale-label { color: rgba(30,26,20,0.42) !important; } html[data-theme="light"] .ds-rationale-text { color: rgba(30,26,20,0.80) !important; } html[data-theme="light"] .ds-primary-ev-chip { color: rgba(30,26,20,0.55) !important; } /* ── 3. Fix ev-chip backgrounds ─────────────────────────── */ html[data-theme="light"] .ev-chip { background: rgba(30,26,20,0.06) !important; color: rgba(30,26,20,0.60) !important; border-color: rgba(30,26,20,0.12) !important; } /* ── 4. ip-popover + ip-pop-range — color-scheme fix ───── The range input inherits the dark color-scheme from . Setting color-scheme:light on the popover forces the browser to render the native range track/thumb in light style. */ html[data-theme="light"] .ip-popover { color-scheme: light; background: #ffffff; color: #1a1714; } html[data-theme="light"] .ip-pop-title { color: #1a1714; } html[data-theme="light"] .ip-pop-desc { color: rgba(30,26,20,0.60); } html[data-theme="light"] .ip-pop-field label { color: rgba(30,26,20,0.55); } html[data-theme="light"] .ip-pop-range { color-scheme: light; accent-color: var(--accent); background: transparent; border: none; } /* WebKit explicit track for ip-pop-range */ html[data-theme="light"] .ip-pop-range::-webkit-slider-runnable-track { background: rgba(30,26,20,0.18); height: 4px; border-radius: 2px; } html[data-theme="light"] .ip-pop-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); margin-top: -6px; box-shadow: 0 1px 3px rgba(30,26,20,0.20); } html[data-theme="light"] .ip-pop-range::-moz-range-track { background: rgba(30,26,20,0.18); height: 4px; border-radius: 2px; } html[data-theme="light"] .ip-pop-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 3px rgba(30,26,20,0.20); } /* Also fix the POLY inline override sliders (same class) */ html[data-theme="light"] .poly-assess-override input[type="range"], html[data-theme="light"] [class*="override"] input[type="range"] { color-scheme: light; accent-color: var(--accent); } /* ════════════════════════════════════════════════════════════ STRUCTURED DEPRESCRIBING REVIEW — styles ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ DEPRESC — Structured Deprescribing Review CSS additions — добавить в конец theme-addon.css (или в отдельный блок