/* * Asthma Discharge Prescribing Guide (ADPG) styles. * * Shared by BOTH: * - dashboard tab (#panel-adpg > .adpg-root > #adpgApp) * - standalone page (body.adpg-standalone > main.adpg-root > #adpgApp) * * Structure: * 1. Theme tokens on .adpg-root (dark slate default) * 2. html[data-theme="light"] override (used by the standalone page) * 3. Core guide UI (all selectors begin with .adpg-root so both hosts work) * 4. Age-segment accents (.adpg-root[data-segment="1_5"|"6_11"|"12plus"]) * 5. Standalone page shell (body.adpg-standalone only) * 6. Responsive + print * * Colour intent: dashboard embed reads mostly slate/blue to blend; age * segments each add a warm accent (amber/emerald/indigo) so the guide * visibly shifts as the clinician works through the flow. Rx cards are * green (heal), the consult card is orange (alert), the eligibility * banner is amber (check), and the important clinical note is blue. */ /* ────────────────────────────────────────────────────────────── * 1. DARK THEME (default, used inside the dashboard panel) * ────────────────────────────────────────────────────────────── */ .adpg-root { --accent: #60a5fa; /* per-segment overridden below */ --accent-strong: #3b82f6; --accent-soft: rgba(96, 165, 250, 0.14); --purple: #3b82f6; --purple-dark: #1e40af; --purple-mid: #60a5fa; --purple-light: #93c5fd; --purple-pale: rgba(59, 130, 246, 0.12); --purple-border: #475569; --teal: #2dd4bf; --teal-mid: #14b8a6; --teal-pale: rgba(45, 212, 191, 0.14); --green: #34d399; --green-pale: rgba(16, 185, 129, 0.14); --green-border: rgba(16, 185, 129, 0.55); --orange: #fb923c; --orange-pale: rgba(251, 146, 60, 0.12); --orange-border: #ea580c; --amber: #fbbf24; --amber-pale: rgba(251, 191, 36, 0.12); --amber-border: rgba(251, 191, 36, 0.55); --blue: #60a5fa; --blue-pale: rgba(37, 99, 235, 0.15); --blue-border: #3b82f6; --text: #e2e8f0; --text-mid: #cbd5e1; --text-light: #94a3b8; --bg: transparent; --card: #0b1220; --card-border: #334155; --shadow: rgba(0, 0, 0, 0.35); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; color: var(--text); max-width: 760px; margin-left: auto; margin-right: auto; } /* ────────────────────────────────────────────────────────────── * 2. LIGHT THEME OVERRIDE (set on the * standalone page; dashboard keeps the dark default) * ────────────────────────────────────────────────────────────── */ html[data-theme="light"] .adpg-root { --purple: #5B2C8D; --purple-dark: #3B1A6A; --purple-mid: #7040B0; --purple-light: #9E6FD0; --purple-pale: #F3EDF9; --purple-border: #DCCFF0; --teal: #006778; --teal-mid: #008896; --teal-pale: #E0F4F6; --green: #1E7E52; --green-pale: #EBF7F1; --green-border: #9EDAD6; --orange: #B84800; --orange-pale: #FEF3E2; --orange-border: #F5A623; --amber: #92400e; --amber-pale: #FFF7E0; --amber-border: #F5C26B; --blue: #1053A0; --blue-pale: #E6F0FA; --blue-border: #A0C0EA; --text: #1A1A2E; --text-mid: #44445A; --text-light: #6B6B84; --card: #ffffff; --card-border: #E6DDF2; --shadow: rgba(59, 26, 106, 0.10); } /* ────────────────────────────────────────────────────────────── * 3. CORE GUIDE UI * ────────────────────────────────────────────────────────────── */ .adpg-root #adpgApp { max-width: 760px; margin: 0 auto; padding: 0 4px; width: 100%; } /* Progress rail */ .adpg-root .progress-wrap { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px; } .adpg-root .prog-step { display: flex; flex-direction: column; align-items: center; gap: 5px; } .adpg-root .prog-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--purple-border); background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-light); transition: all 0.3s ease; } .adpg-root .prog-circle.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); } .adpg-root .prog-circle.done { background: var(--teal); border-color: var(--teal); color: #fff; } .adpg-root .prog-label { font-size: 10px; color: var(--text-light); font-weight: 500; white-space: nowrap; } .adpg-root .prog-label.active { color: var(--accent); font-weight: 700; } .adpg-root .prog-label.done { color: var(--teal); font-weight: 600; } .adpg-root .prog-line { width: 80px; height: 2px; background: var(--purple-border); margin: 0 4px 18px; transition: background 0.3s; } .adpg-root .prog-line.done { background: linear-gradient(90deg, var(--accent), var(--teal)); } /* Card */ .adpg-root .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 2px 16px var(--shadow); padding: 32px 36px; margin-bottom: 16px; animation: adpg-slideUp 0.28s ease; position: relative; overflow: hidden; } .adpg-root .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--teal) 100%); opacity: 0.9; } @keyframes adpg-slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Step eyebrow */ .adpg-root .step-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .adpg-root .step-badge { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--purple-border); border-radius: 20px; padding: 3px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .adpg-root .context-chips { display: flex; flex-wrap: wrap; gap: 5px; } .adpg-root .chip { background: var(--teal-pale); color: var(--teal); border: 1px solid rgba(45, 212, 191, 0.35); border-radius: 20px; padding: 3px 11px; font-size: 11px; font-weight: 600; } html[data-theme="light"] .adpg-root .chip { border-color: #B0DDE3; } .adpg-root .step-question { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 6px; } .adpg-root .step-hint { font-size: 13.5px; color: var(--text-light); margin-bottom: 20px; } /* Eligibility banner (amber, pulls clinicians' attention to the criteria diamond at the top of the PDF flowchart) */ .adpg-root .eligibility-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--amber-pale); border: 1px solid var(--amber-border); border-left: 4px solid var(--amber); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; } .adpg-root .eligibility-icon { font-size: 22px; flex-shrink: 0; line-height: 1.2; } .adpg-root .eligibility-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--amber); margin-bottom: 3px; } .adpg-root .eligibility-text { font-size: 13.5px; color: var(--text); line-height: 1.5; } .adpg-root .eligibility-text strong { color: var(--amber); font-weight: 800; padding: 0 2px; } html[data-theme="light"] .adpg-root .eligibility-label, html[data-theme="light"] .adpg-root .eligibility-text strong { color: #B45309; } /* Handbook strip */ .adpg-root .handbook-strip { background: var(--accent-soft); border: 1px solid var(--purple-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 12px; line-height: 1.5; } .adpg-root .handbook-strip-title { font-weight: 700; color: var(--text); margin-bottom: 8px; display: block; } .adpg-root .handbook-strip-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .adpg-root .handbook-strip-sep { color: var(--text-light); user-select: none; } .adpg-root a.handbook-strip-a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .adpg-root a.handbook-strip-a:hover { border-bottom-color: var(--accent); color: var(--purple-light); } .adpg-root .med-handbook-link { margin-top: 8px; font-size: 11.5px; } .adpg-root .med-handbook-link a { color: var(--teal); font-weight: 600; text-decoration: none; } .adpg-root .med-handbook-link a:hover { text-decoration: underline; } /* Age buttons */ .adpg-root .age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; } .adpg-root .age-btn { background: var(--card); border: 2.5px solid var(--purple-border); border-radius: 12px; padding: 22px 12px 18px; text-align: center; cursor: pointer; transition: all 0.2s ease; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; overflow: hidden; } .adpg-root .age-btn::after { /* Subtle gradient sheen that intensifies on hover — uses each age's accent (set below under section 4) via the --age-accent variable. */ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, var(--age-accent, var(--accent)) 140%); opacity: 0.10; pointer-events: none; transition: opacity 0.2s ease; } .adpg-root .age-btn:hover { border-color: var(--age-accent, var(--accent)); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); } .adpg-root .age-btn:hover::after { opacity: 0.35; } .adpg-root .age-btn:focus-visible { outline: 3px solid var(--age-accent, var(--accent)); outline-offset: 2px; } .adpg-root .age-num { font-size: 32px; font-weight: 900; color: var(--age-accent, var(--accent)); line-height: 1; position: relative; } .adpg-root .age-unit { font-size: 13px; color: var(--text-light); font-weight: 500; position: relative; } .adpg-root .age-icon { font-size: 26px; margin-bottom: 4px; position: relative; } .adpg-root .age-btn.age-1_5 { --age-accent: #fbbf24; } /* amber */ .adpg-root .age-btn.age-6_11 { --age-accent: #34d399; } /* emerald */ .adpg-root .age-btn.age-12plus { --age-accent: #a78bfa; } /* violet */ html[data-theme="light"] .adpg-root .age-btn.age-1_5 { --age-accent: #B45309; } html[data-theme="light"] .adpg-root .age-btn.age-6_11 { --age-accent: #047857; } html[data-theme="light"] .adpg-root .age-btn.age-12plus { --age-accent: #6D28D9; } /* Option buttons */ .adpg-root .options-stack { display: flex; flex-direction: column; gap: 9px; } .adpg-root .opt-btn { background: var(--card); border: 2px solid var(--purple-border); border-radius: 10px; padding: 14px 18px; text-align: left; cursor: pointer; font-size: 14.5px; color: var(--text); transition: all 0.18s ease; display: flex; align-items: center; gap: 12px; font-family: inherit; line-height: 1.4; } .adpg-root .opt-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .adpg-root .opt-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .adpg-root .opt-btn.opt-warn { border-color: var(--orange-border); background: var(--orange-pale); } .adpg-root .opt-btn.opt-warn:hover { border-color: var(--orange); background: rgba(251, 146, 60, 0.22); box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3); } .adpg-root .opt-icon { font-size: 16px; flex-shrink: 0; opacity: 0.75; } .adpg-root .opt-btn:hover .opt-icon { opacity: 1; } .adpg-root .opt-text { flex: 1; } .adpg-root .opt-or { display: inline-block; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; padding: 2px 4px; } .adpg-root .opt-arrow { font-size: 16px; color: var(--purple-light); flex-shrink: 0; opacity: 0; transition: opacity 0.18s, transform 0.18s; } .adpg-root .opt-btn:hover .opt-arrow { opacity: 1; transform: translateX(2px); } /* Result banner + rx card */ .adpg-root .result-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--green-pale), var(--teal-pale)); border: 1.5px solid var(--green-border); border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; } .adpg-root .result-banner-icon { font-size: 30px; flex-shrink: 0; } .adpg-root .result-banner-title { font-size: 17px; font-weight: 800; color: var(--green); } .adpg-root .result-banner-sub { font-size: 13px; color: #6ee7b7; margin-top: 2px; } html[data-theme="light"] .adpg-root .result-banner-sub { color: #2D6A4F; } .adpg-root .rx-options-grid { display: grid; gap: 14px; margin-bottom: 16px; } .adpg-root .rx-options-grid.two-col { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; } .adpg-root .rx-options-grid.two-col .rx-or-divider { align-self: center; padding: 0 4px; } .adpg-root .rx-card { background: var(--green-pale); border: 1.5px solid var(--green-border); border-radius: 10px; padding: 18px 18px 14px; } .adpg-root .rx-option-tag { display: inline-block; background: var(--teal); color: #fff; border-radius: 20px; padding: 3px 11px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 14px; } .adpg-root .rx-or-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; } .adpg-root .rx-or-divider::before, .adpg-root .rx-or-divider::after { content: ''; flex: 1; height: 1.5px; background: var(--purple-border); } .adpg-root .med-entry { margin-bottom: 14px; } .adpg-root .med-entry:last-child { margin-bottom: 0; } .adpg-root .med-name { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 2px; } .adpg-root .med-dose { font-size: 13.5px; font-weight: 700; color: var(--teal); } .adpg-root .med-freq { font-size: 13px; color: var(--text-mid); font-style: italic; } .adpg-root .plus-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--green); font-weight: 800; font-size: 15px; } .adpg-root .plus-row::before, .adpg-root .plus-row::after { content: ''; flex: 1; height: 1px; background: rgba(52, 211, 153, 0.35); } .adpg-root .followup-row { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); border: 1px solid var(--purple-border); border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 16px; } /* Consult card */ .adpg-root .consult-card { background: var(--orange-pale); border: 2px solid var(--orange-border); border-radius: 12px; padding: 30px; text-align: center; margin-bottom: 16px; } .adpg-root .consult-icon { font-size: 42px; margin-bottom: 12px; } .adpg-root .consult-title { font-size: 22px; font-weight: 800; color: var(--orange); margin-bottom: 8px; } .adpg-root .consult-body { font-size: 14px; line-height: 1.6; max-width: 420px; margin: 0 auto; color: #fdba74; } html[data-theme="light"] .adpg-root .consult-body { color: #7C4A1A; } /* Important note */ .adpg-root .important-note { background: var(--blue-pale); border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 16px; } .adpg-root .note-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--blue); margin-bottom: 6px; } .adpg-root .important-note p { font-size: 13px; color: var(--text); line-height: 1.65; } html[data-theme="light"] .adpg-root .important-note p { color: #1E3A5F; } /* Nav buttons */ .adpg-root .nav-row { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .adpg-root .btn { border: none; border-radius: 8px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.18s; display: inline-flex; align-items: center; gap: 6px; } .adpg-root .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .adpg-root .btn-back { background: transparent; border: 2px solid var(--purple-border); color: var(--text-mid); } .adpg-root .btn-back:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .adpg-root .btn-restart { background: var(--accent); color: #fff; margin-left: auto; } .adpg-root .btn-restart:hover { background: var(--purple-dark); } .adpg-root .btn-print { background: var(--teal); color: #fff; } .adpg-root .btn-print:hover { background: var(--teal-mid); } /* ────────────────────────────────────────────────────────────── * 4. AGE-SEGMENT ACCENTS (applied by setting data-segment on * .adpg-root — done from JS via syncSegmentAttr()) * ────────────────────────────────────────────────────────────── */ .adpg-root[data-segment="1_5"] { --accent: #fbbf24; --accent-strong: #f59e0b; --accent-soft: rgba(251, 191, 36, 0.14); } .adpg-root[data-segment="6_11"] { --accent: #34d399; --accent-strong: #059669; --accent-soft: rgba(52, 211, 153, 0.14); } .adpg-root[data-segment="12plus"] { --accent: #a78bfa; --accent-strong: #8b5cf6; --accent-soft: rgba(167, 139, 250, 0.16); } html[data-theme="light"] .adpg-root[data-segment="1_5"] { --accent: #B45309; --accent-strong: #92400E; --accent-soft: #FEF3C7; } html[data-theme="light"] .adpg-root[data-segment="6_11"] { --accent: #047857; --accent-strong: #065F46; --accent-soft: #D1FAE5; } html[data-theme="light"] .adpg-root[data-segment="12plus"] { --accent: #6D28D9; --accent-strong: #4C1D95; --accent-soft: #EDE9FE; } /* ────────────────────────────────────────────────────────────── * 5. STANDALONE PAGE SHELL (only on body.adpg-standalone) * The standalone page is intentionally chrome-less (no header or * footer) so it can be embedded in an iframe, printed cleanly, or * used on a tablet without wasted vertical space. * The dashboard host has its own page chrome, so these rules * must not leak out of body.adpg-standalone. * ────────────────────────────────────────────────────────────── */ body.adpg-standalone { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #F8F5FD; color: #1A1A2E; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; } body.adpg-standalone *, body.adpg-standalone *::before, body.adpg-standalone *::after { box-sizing: border-box; } body.adpg-standalone .adpg-main { flex: 1; max-width: 780px; width: 100%; margin: 30px auto; padding: 0 16px; } /* ────────────────────────────────────────────────────────────── * 6. RESPONSIVE + PRINT * ────────────────────────────────────────────────────────────── */ @media (max-width: 620px) { .adpg-root .age-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .adpg-root .age-num { font-size: 24px; } .adpg-root .age-icon { font-size: 20px; } .adpg-root .rx-options-grid.two-col { grid-template-columns: 1fr; } .adpg-root .card { padding: 22px 20px; } .adpg-root .step-question { font-size: 18px; } .adpg-root .prog-line { width: 44px; } .adpg-root .btn-restart { margin-left: 0; } body.adpg-standalone .adpg-main { margin: 16px auto; } } @media (max-width: 380px) { .adpg-root .age-grid { grid-template-columns: 1fr; } } @media print { .adpg-root .nav-row, .adpg-root .progress-wrap, .adpg-root .handbook-strip { display: none !important; } .adpg-root .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; padding: 20px; } .adpg-root .card::before { display: none; } .adpg-root #adpgApp { margin: 0; max-width: 100%; padding: 0; } body.adpg-standalone { background: #fff; } body.adpg-standalone .adpg-main { margin: 0; max-width: 100%; padding: 0; } }