/* AirSpire portal chrome — ported 1:1 from the Django base.html <style> block.
   Loaded only by the authenticated portal pages (patient/physician/admin),
   alongside Bootstrap 5.3 + Bootstrap Icons. The public marketing pages use
   Tailwind (styles.css) instead. */

:root {
  --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488;
  --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-500: #10b981;
  --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46;
  --navy-700: #1e3253; --navy-800: #142342; --navy-900: #0a1d3a; --navy-950: #061229;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
  --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-900: #0f172a;
  --bg-app: #f1faf6; --bg-app-2: #eef9f3;
  --green-zone: #10b981; --yellow-zone: #f59e0b; --red-zone: #ef4444;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; background: var(--bg-app); color: var(--navy-900); margin: 0;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--navy-900); font-weight: 700; }
.font-display { font-family: 'Fraunces', 'Plus Jakarta Sans', serif; letter-spacing: -0.015em; font-weight: 700; }
.text-muted, small.text-muted { color: var(--slate-500) !important; }
a { color: var(--emerald-600); text-decoration: none; }
a:hover { color: var(--emerald-700); }

.app-shell { display: grid; grid-template-rows: 96px 1fr; grid-template-columns: 260px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main"; height: 100vh; overflow: hidden; }

.topbar { grid-area: topbar; display: flex; align-items: stretch; background: var(--navy-900); color: #fff; position: relative; z-index: 30; }
.topbar-brand { width: 352px; background: #fff; display: flex; align-items: center; padding: 0 24px; position: relative; flex-shrink: 0; border-bottom: 1px solid #e6efe9; }
.topbar-brand::after { content: ""; position: absolute; top: 0; bottom: 0; right: -34px; width: 68px; background: linear-gradient(135deg, #12b981 0%, #0d9488 100%); transform: skewX(-18deg); transform-origin: bottom; }
.topbar-brand .app-logo { height: 84px; width: auto; max-width: 260px; position: relative; z-index: 2; object-fit: contain; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.topbar-icon-btn { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #cbd5e1; border: none; background: transparent; transition: background .12s, color .12s; }
.topbar-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.topbar-menu-btn { display: none; align-self: center; margin: 0 6px 0 8px; color: #fff; font-size: 24px; flex-shrink: 0; }
.topbar-avatar { width: 34px; height: 34px; border-radius: 6px; background: var(--teal-500); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; }

.sidebar { grid-area: sidebar; background: #fff; border-right: 1px solid #e6efe9; display: flex; flex-direction: column; padding: 18px 0; overflow: hidden; min-height: 0; }
.sidebar-userblock { padding: 0 20px 18px; border-bottom: 1px solid #eef5f1; margin-bottom: 12px; }
.sidebar-userblock .name { font-weight: 700; color: var(--navy-900); font-size: .95rem; line-height: 1.2; }
.role-pill { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--emerald-100); color: var(--emerald-700); padding: 3px 10px; border-radius: 4px; }
.role-pill.physician { background: #ccfbf1; color: var(--teal-600); }
.role-pill.admin { background: #ede9fe; color: #6d28d9; }
.sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #94a3b8; padding: 14px 22px 6px; }
.sidebar nav { flex: 1; padding: 0; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar .nav-link { display: flex; align-items: center; gap: 12px; padding: 9px 22px; margin: 0; border-left: 3px solid transparent; color: var(--slate-700); font-size: 14px; font-weight: 500; transition: background .12s, color .12s, border-color .12s; border-radius: 0; }
.sidebar .nav-link i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; color: #94a3b8; }
.sidebar .nav-link:hover { background: #f6fbf8; color: var(--navy-900); }
.sidebar .nav-link:hover i { color: var(--emerald-600); }
.sidebar .nav-link.active { background: var(--emerald-50); color: var(--emerald-700); font-weight: 600; border-left-color: var(--emerald-500); }
.sidebar .nav-link.active i { color: var(--emerald-600); }
.sidebar .sidebar-footer { padding: 10px 0; border-top: 1px solid #eef5f1; margin-top: auto; }

.main-content { grid-area: main; background: var(--bg-app); overflow-y: auto; min-height: 0; }
.page-wrap { padding: 32px 36px; max-width: 1500px; margin: 0 auto; }
.page-header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 42px; }
.page-header h1, .page-header h2 { font-family: 'Fraunces', 'Plus Jakarta Sans', serif; letter-spacing: -.015em; margin-bottom: 6px; font-size: 2rem; }
.page-header h4 { font-family: 'Fraunces', 'Plus Jakarta Sans', serif; font-size: 1.85rem; letter-spacing: -.015em; margin: 0 0 6px; font-weight: 750; }
.page-subtitle { color: var(--slate-500); font-size: 0.95rem; margin: 0; }

.card { border: 1px solid #e6efe9 !important; border-radius: 8px !important; box-shadow: none !important; background: #fff; overflow: hidden; }
.card-header { background: transparent !important; border-bottom: 1px solid #eef5f1 !important; font-weight: 600; padding: 14px 20px; }
.card-body { padding: 20px; }
.card.p-3, .card.p-4, .card.p-5 { overflow: visible; }
.list-group-flush > .list-group-item { border-color: #eef5f1; padding: 16px 20px; }
.list-group-item { color: var(--slate-700); border-color: #eef5f1; }
.list-group-item-warning { background: #fffbeb; border-color: #fde68a; }

.kpi-strip { background: #fff; border: 1px solid #e6efe9; border-radius: 10px; padding: 16px 20px; position: relative; min-height: 110px; }
.kpi-strip::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--emerald-500); }
.kpi-strip.accent-emerald::before { background: var(--emerald-500); }
.kpi-strip.accent-teal::before { background: var(--teal-500); }
.kpi-strip.accent-yellow::before { background: var(--yellow-zone); }
.kpi-strip.accent-slate::before { background: #cbd5e1; }
.kpi-strip .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; }
.kpi-strip .kpi-value { font-family: 'Fraunces', 'Plus Jakarta Sans', serif; font-size: 1.85rem; font-weight: 700; color: var(--navy-900); margin-top: 8px; line-height: 1.1; }
.kpi-strip .kpi-value.zone-green { color: var(--emerald-600); }
.kpi-strip .kpi-value.zone-yellow { color: #b45309; }
.kpi-strip .kpi-value.zone-red { color: #b91c1c; }
.kpi-strip .kpi-meta { color: var(--slate-500); font-size: 0.8rem; margin-top: 6px; }

.zone-hero { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 1px solid #a7f3d0; border-left: 4px solid var(--emerald-500); border-radius: 12px; padding: 28px 32px; min-height: 280px; display: flex; flex-direction: column; }
.zone-hero.zone-yellow { background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); border-color: #fde68a; border-left-color: var(--yellow-zone); }
.zone-hero.zone-red { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: #fecaca; border-left-color: var(--red-zone); }
.zone-hero .hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--slate-600); margin-bottom: 12px; }
.zone-hero h2 { font-family: 'Fraunces','Plus Jakarta Sans',serif; font-size: 2.1rem; font-weight: 700; margin: 0 0 12px; color: var(--navy-900); }
.zone-hero p { color: var(--slate-700); margin: 0; line-height: 1.6; }

.btn { font-weight: 600; border-radius: 8px; padding: 8px 14px; transition: all .12s; }
.btn-xs { padding: 4px 8px; font-size: .75rem; border-radius: 6px; }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn-lg { padding: 11px 20px; font-size: 1rem; }
.btn-primary, .btn-airspire { background: var(--emerald-700); border-color: var(--emerald-700); color: #fff; }
.btn-primary:hover, .btn-airspire:hover { background: var(--emerald-800); border-color: var(--emerald-800); color: #fff; }
.btn-success { background: var(--emerald-500); border-color: var(--emerald-500); }
.btn-success:hover { background: var(--emerald-600); border-color: var(--emerald-600); }
.btn-outline-primary { color: var(--emerald-700); border-color: #e2e8f0; background: #fff; }
.btn-outline-primary:hover { background: var(--emerald-50); border-color: var(--emerald-500); color: var(--emerald-700); }
.btn-outline-success { color: var(--emerald-700); border-color: #d1fae5; background: #fff; }
.btn-outline-success:hover { background: var(--emerald-50); border-color: var(--emerald-500); color: var(--emerald-700); }
.btn-outline-secondary { color: var(--slate-700); border-color: #e2e8f0; background: #fff; }
.btn-outline-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: var(--navy-900); }
.btn-outline-danger { color: #dc2626; border-color: #fecaca; background: #fff; }
.btn-outline-danger:hover { background: #fef2f2; }
.btn-outline-info { color: #0891b2; border-color: #a5f3fc; background: #fff; }
.btn-outline-info:hover { background: #ecfeff; }
.btn-outline-teal { color: var(--teal-600); border-color: #ccfbf1; background: #fff; }
.btn-outline-teal:hover { background: #f0fdfa; border-color: var(--teal-500); }
.btn-teal { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.btn-teal:hover { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.btn-danger { background: #ef4444; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-secondary { background: #f1f5f9; border-color: #e2e8f0; color: var(--slate-700); }
.btn-secondary:hover { background: #e2e8f0; color: var(--navy-900); }

.form-control, .form-select { border: 1px solid var(--slate-200); border-radius: 8px; padding: 0.55rem 0.85rem; font-size: 0.92rem; color: var(--navy-900); background-color: #fff; transition: border-color .12s, box-shadow .12s; }
.form-control:focus, .form-select:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgb(16 185 129 / .12); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--navy-900); margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--emerald-500); border-color: var(--emerald-500); }
.form-check-input:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgb(16 185 129 / .12); }

.badge, span.badge { display: inline-block !important; font-weight: 600 !important; padding: 3px 10px !important; font-size: 0.7rem !important; line-height: 1.4 !important; vertical-align: middle !important; border-radius: 999px !important; letter-spacing: 0.02em; white-space: nowrap !important; width: auto !important; height: auto !important; text-align: center; }
.badge.fs-6 { font-size: 0.85rem !important; padding: 5px 12px !important; }
.badge.bg-success { background: var(--emerald-100) !important; color: var(--emerald-700) !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-primary { background: #dbeafe !important; color: #1e40af !important; }
.badge.bg-info { background: #cffafe !important; color: #155e75 !important; }
.badge.bg-secondary { background: #f1f5f9 !important; color: var(--slate-700) !important; }
.badge.bg-light { background: #f8fafc !important; color: var(--slate-700) !important; }
.zone-badge-green { background: var(--emerald-100); color: var(--emerald-700); }
.zone-badge-yellow { background: #fef3c7; color: #b45309; }
.zone-badge-red { background: #fee2e2; color: #b91c1c; }

.table { color: var(--slate-700); margin-bottom: 0; border-collapse: separate; border-spacing: 0; }
.table > :not(caption) > * > * { padding: 14px 18px; border-bottom-color: #eef5f1; background: transparent; }
.table thead th, .table-light th { background: transparent !important; color: #94a3b8; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid #e6efe9; }
.table-hover tbody tr:hover { background: #f6fbf8; }
.table-empty { padding: 28px 18px; color: var(--slate-500); font-size: .92rem; }
.empty-state { background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 42px 24px; text-align: center; color: var(--slate-500); }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.product-card, .resource-card { height: 100%; display: flex; flex-direction: column; }
.product-media, .resource-media { height: 132px; background: #f6fbf8; display: grid; place-items: center; color: var(--emerald-600); border-bottom: 1px solid #eef5f1; }
.select-card { display: block; width: 100%; cursor: pointer; }
.select-card-inner { border: 1px solid #dfe8ef; border-radius: 8px; padding: 16px; background: #fff; min-height: 146px; transition: border-color .12s, box-shadow .12s, background .12s; }
.select-card input:checked + .select-card-inner, .select-card-inner.selected { border-color: var(--emerald-500); background: var(--emerald-50); box-shadow: 0 0 0 3px rgb(16 185 129 / .12); }
.zone-plan-card { border: 1px solid #dfe8ef; border-left-width: 6px; border-radius: 8px; background: #fff; overflow: hidden; }
.zone-plan-card.green { border-left-color: var(--green-zone); }
.zone-plan-card.yellow { border-left-color: var(--yellow-zone); }
.zone-plan-card.red { border-left-color: var(--red-zone); }
.zone-plan-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid #eef5f1; }
.zone-plan-icon { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; }
.zone-plan-card.green .zone-plan-icon { background:#dcfce7; color:#16a34a; }
.zone-plan-card.yellow .zone-plan-icon { background:#fef3c7; color:#b45309; }
.zone-plan-card.red .zone-plan-icon { background:#fee2e2; color:#dc2626; }
.zone-plan-body { padding: 18px 20px; }
.zone-copy-label { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-bottom: 6px; }

.alert { border-radius: 10px; padding: 12px 16px; border: 1px solid transparent; font-size: 0.9rem; }
.alert-success { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-100); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-info { background: #eff6ff; color: #1e40af; border-color: #dbeafe; }
.alert-primary { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-100); }

.zone-indicator { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.zone-indicator.zone-green { background: var(--green-zone); }
.zone-indicator.zone-yellow { background: var(--yellow-zone); }
.zone-indicator.zone-red { background: var(--red-zone); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

.modal-content { border: none; border-radius: 14px; box-shadow: 0 20px 60px rgb(15 23 42 / .15); }
.modal-header { border-bottom: 1px solid #eef5f1; padding: 18px 22px; }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid #eef5f1; padding: 14px 22px; }
.nav-tabs { border-bottom: 1px solid #e6efe9; }
.nav-tabs .nav-link { color: var(--slate-600); border: none; border-bottom: 2px solid transparent; font-weight: 500; padding: 10px 14px; }
.nav-tabs .nav-link.active { color: var(--emerald-700); border-bottom-color: var(--emerald-500); background: transparent; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--emerald-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #94a3b8; }
.view-all-link { font-size: 0.85rem; font-weight: 600; color: var(--emerald-600); }
.view-all-link:hover { color: var(--emerald-700); }
.min-w-0 { min-width: 0; }
.text-emerald { color: var(--emerald-600); }
.text-emerald-strong { color: var(--emerald-700); }

.ehr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 405px; gap: 32px; align-items: start; }
.ehr-stack { display: grid; gap: 16px; }
.ehr-card { background: #fff; border: 1px solid #dfe8ef; border-radius: 8px; box-shadow: 0 18px 48px rgb(15 23 42 / .08); }
.ehr-card.soft { box-shadow: none; }
.ehr-card.pad { padding: 18px; }
.ehr-alert { display: flex; align-items: flex-start; gap: 14px; background: #fff6cc; border-left: 4px solid #f59e0b; border-radius: 6px; padding: 16px 18px; color: #173153; }
.ehr-alert .dismiss { margin-left: auto; color: #7c8a9a; }
.ehr-panel-title { font-weight: 800; font-size: 15px; margin: 0; color: var(--navy-900); }
.ehr-chart { padding: 18px 18px 10px; }
.bar-chart { height: 178px; border: 1px solid #edf1f5; border-radius: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; align-items: end; padding: 16px 18px 0; background: repeating-linear-gradient(to bottom,#fff,#fff 39px,#eef2f6 40px); }
.bar-slot { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bar { width: 32px; border-radius: 4px 4px 0 0; min-height: 28px; background: var(--emerald-500); }
.bar.yellow { background: var(--yellow-zone); }
.bar.red { background: var(--red-zone); }
.bar-label { color: #8090a3; font-size: 12px; }
.chart-legend { display:flex; justify-content:center; gap:18px; padding:14px 0 4px; color:#718096; font-size:13px; }
.legend-dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-1px; }
.quick-action-grid { display:grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); gap:16px; }
.quick-action-tile { min-height: 122px; background:#fff; border:1px solid #dfe8ef; border-radius:8px; box-shadow:0 18px 35px rgb(15 23 42 / .08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#173153; font-weight:600; font-size:13px; text-align:center; }
.quick-action-tile:hover { color: var(--navy-900); transform: translateY(-1px); }
.quick-action-tile .qa-icon { width:48px; height:48px; border-radius:8px; background:#073878; color:#fff; display:grid; place-items:center; font-size:22px; }
.quick-action-tile .qa-label { white-space:nowrap; line-height:1.2; }
.zone-status-card { min-height: 210px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:8px; border:2px solid #7ee7bf; background:#d7f8e7; }
.zone-status-card.zone-yellow { border-color:#fde68a; background:#fff6cc; }
.zone-status-card.zone-red { border-color:#fecaca; background:#fff1f2; }
.zone-check { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--emerald-500); color:#fff; font-size:32px; margin-bottom:18px; }
.zone-status-card.zone-yellow .zone-check { background:var(--yellow-zone); }
.zone-status-card.zone-red .zone-check { background:var(--red-zone); }
.asthma-engine-card { padding:18px; border-left:5px solid var(--emerald-500); }
.asthma-engine-card.zone-yellow { border-left-color:var(--yellow-zone); background:#fffbeb; }
.asthma-engine-card.zone-red { border-left-color:var(--red-zone); background:#fff5f5; }
.engine-actions { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
.engine-action { border:1px solid #dfe8ef; border-radius:8px; padding:10px 12px; background:#fff; color:#173153; font-size:13px; font-weight:600; }
.metric-card { background:#fff; border:1px solid #dfe8ef; border-radius:8px; padding:16px 18px; min-height:105px; }
.metric-label { color:#8a9bad; font-weight:700; font-size:12px; }
.metric-value { color:#173153; font-weight:800; font-size:26px; line-height:1.2; }
.clinical-todo { display:flex; align-items:center; gap:16px; border-radius:8px; border:1px solid #98efd0; background:#d8f8e8; padding:18px; color:#073878; }
.clinical-todo.blue { border-color:#b6c8e4; background:#eef3fb; }
.clinical-todo-icon { width:40px; height:40px; border-radius:50%; background:#12b981; color:#fff; display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.clinical-todo.blue .clinical-todo-icon { background:#073878; }
.appointment-card { border:2px solid #b6c8e4; background:#eef3fb; border-radius:8px; padding:18px; }
.med-card { border:1px solid #aeeccf; border-radius:7px; background:#f0fdf7; padding:14px; }
.visit-details-card { background:linear-gradient(180deg,#fff 0%,#fbfefd 100%); }
.visit-header { display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid #edf3f0; }
.visit-header-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#e8fbf3; color:var(--emerald-700); font-size:20px; flex:0 0 auto; }
.visit-field { border:1px solid #dfe8ef; border-radius:10px; background:#fff; padding:14px; }
.visit-field .form-label { color:#173153; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.visit-field .form-control, .visit-field .form-select { border:0; box-shadow:none; padding:0; min-height:30px; background:transparent; font-weight:700; color:#173153; font-size:15px; }
.visit-field .form-control:focus, .visit-field .form-select:focus { box-shadow:none; border:0; }
.visit-help { border:1px solid #ccefe3; background:#f0fdf7; border-radius:8px; padding:12px 14px; color:#416055; font-size:13px; }
.symptom-choice { min-height:58px; display:flex; align-items:center; gap:12px; cursor:pointer; border:1px solid #dfe8ef; border-radius:8px; padding:14px 16px; background:#fff; color:#173153; font-weight:600; transition:background .12s, border-color .12s, box-shadow .12s; }
.symptom-choice:hover { border-color:#9ee6cd; background:#f7fffb; }
.symptom-choice input { margin:0; flex:0 0 auto; }
.symptom-choice:has(input:checked) { border-color:var(--emerald-500); background:#effdf6; box-shadow:0 0 0 2px rgb(16 185 129 / .12) inset; color:var(--emerald-800); }
.ehr-split { display:grid; grid-template-columns: 330px minmax(0, 1fr); gap:24px; }
.record-hero { background:#fff; border:1px solid #dfe8ef; border-radius:8px; padding:22px; }
.record-avatar { width:64px; height:64px; border-radius:16px; background:#073878; color:#fff; display:grid; place-items:center; font-weight:800; font-size:22px; }
.timeline-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid #edf1f5; }
.timeline-row .badge { flex-shrink:0; align-self:center; }
.timeline-row:last-child { border-bottom:0; }
@media (max-width: 1180px) {
  .ehr-grid, .ehr-split { grid-template-columns: 1fr; }
  .quick-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engine-actions { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 72px 1fr; grid-template-areas: "topbar" "main"; }
  /* Brand box sizes to its content (no fixed 248px that pushed the action
     icons off-screen). The decorative green skew is dropped on phones — at
     narrow widths it crowded the logo wordmark and the notification/avatar
     icons (client feedback, T2). */
  .topbar-brand { width: auto; padding: 0 14px; }
  .topbar-brand::after { display: none; }
  .topbar-brand .app-logo { height: 52px; max-width: 160px; }
  .topbar-actions { padding: 0 12px; gap: 8px; }
  .topbar-icon-btn { width: 34px; height: 34px; }
  .topbar-menu-btn { display: inline-flex; }
  /* Phones: the sidebar becomes an off-canvas drawer opened from the topbar menu button. */
  .sidebar { display:none; }
  .app-shell.nav-open .sidebar { display:flex; position:fixed; top:72px; left:0; bottom:0; width:min(280px, 85vw); z-index:1040; box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow-y:auto; }
  .app-shell.nav-open::after { content:""; position:fixed; inset:72px 0 0 0; background:rgba(15,23,42,.35); z-index:1030; }
  .page-wrap { padding: 20px 14px; }
  .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { display: block; }
}
[hidden] { display: none !important; }

/* Education library cards (mirrors list.html + detail.html <style> blocks) */
.edu-card { transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; }
.edu-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08) !important; }
.edu-thumb { position: relative; height: 140px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); overflow: hidden; }
.edu-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--emerald-600); font-size: 42px; }
.edu-type-badge { position: absolute; top: 10px; right: 10px; backdrop-filter: blur(4px); background: rgba(255,255,255,.9) !important; }
.edu-prose { font-size: 0.95rem; line-height: 1.7; color: var(--slate-700); }
.edu-prose p { margin-bottom: 1rem; }
.edu-prose strong { color: var(--navy-900); }
.edu-prose ul, .edu-prose ol { padding-left: 1.25rem; }
.edu-prose li { margin-bottom: 0.35rem; }

/* Booking page — ported from book_appointment.html <style> */
.physician-card { cursor: pointer; border: 1px solid #e2e8f0 !important; transition: border-color .12s, box-shadow .12s; }
.physician-card:hover { border-color: #10b981 !important; }
.physician-card.active { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.12); background: #ecfdf5; }
.physician-check { opacity: 0; transition: opacity .15s; }
.physician-card.active .physician-check { opacity: 1; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-grid .cal-dow { font-size: .7rem; color: var(--slate-500); text-align: center; font-weight: 600; padding: 4px 0; text-transform: uppercase; }
.calendar-grid .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .9rem; color: var(--slate-500); border: 1px solid transparent; }
.calendar-grid .cal-day.in-month { color: var(--navy-900); }
.calendar-grid .cal-day.available { cursor: pointer; background: #ecfdf5; color: var(--emerald-700); border-color: #a7f3d0; font-weight: 600; }
.calendar-grid .cal-day.available:hover { background: #d1fae5; }
.calendar-grid .cal-day.selected { background: var(--emerald-500); color: #fff; border-color: var(--emerald-600); font-weight: 700; }
.calendar-grid .cal-day.today { box-shadow: inset 0 0 0 1px var(--emerald-500); }
.slot-btn { padding: 10px 14px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; text-align: center; font-weight: 600; color: var(--navy-900); cursor: pointer; }
.slot-btn:hover { border-color: var(--emerald-500); background: #ecfdf5; }
.slot-btn.active { background: var(--emerald-500); color: #fff; border-color: var(--emerald-600); }