/* Mediora light theme — 2026-06-10
   Activated when html[data-theme="light"] is set. Patient-facing
   surfaces (Dashboard / Report / History / Profile / Dynamics) flip
   to a clinic-style off-white look that's easier to read for older
   users and works better for printing reports.

   The marketing landing page (HomeLandingV2) STAYS dark — the brand
   look is the marketing surface. Only authenticated patient surfaces
   honour the light theme. */

html[data-theme="light"] {
    --v2-bg-1:    #f6f8fa;
    --v2-bg-2:    #ffffff;
    --v2-bg-3:    #f0f4f6;
    --v2-ink-1:   #0d1d2c;
    --v2-ink-2:   rgba(13, 29, 44, 0.78);
    --v2-muted:   rgba(13, 29, 44, 0.62);
    --v2-border:  rgba(13, 29, 44, 0.12);
    --v2-primary: #00A37C;
}

/* Patient surfaces that opt in by living under .v2-light-eligible
   (set on AppLayout's wrapper). Marketing landing has no such class
   so it stays dark even when html[data-theme="light"]. */
html[data-theme="light"] .v2-light-eligible {
    background: var(--v2-bg-1);
    color: var(--v2-ink-1);
}

/* Dashboard hero panel */
html[data-theme="light"] .v2-light-eligible .dashv2,
html[data-theme="light"] .v2-light-eligible .hv2,
html[data-theme="light"] .v2-light-eligible .alv2,
html[data-theme="light"] .v2-light-eligible .adv2,
html[data-theme="light"] .v2-light-eligible .dynv2,
html[data-theme="light"] .v2-light-eligible .pv2,
html[data-theme="light"] .v2-light-eligible .upload-v2 {
    background: var(--v2-bg-1);
    color: var(--v2-ink-1);
}

html[data-theme="light"] .v2-light-eligible .dashv2__hero,
html[data-theme="light"] .v2-light-eligible .tile,
html[data-theme="light"] .v2-light-eligible .report-card,
html[data-theme="light"] .v2-light-eligible .hv2-card,
html[data-theme="light"] .v2-light-eligible .alv2-card,
html[data-theme="light"] .v2-light-eligible .dynv2__chart-card,
html[data-theme="light"] .v2-light-eligible .dynv2__picker,
html[data-theme="light"] .v2-light-eligible .report-v2-hero,
html[data-theme="light"] .v2-light-eligible .report-v2-meta__item {
    background: #fff;
    border-color: var(--v2-border);
    color: var(--v2-ink-1);
    box-shadow: 0 1px 2px rgba(13,29,44,0.04), 0 4px 12px rgba(13,29,44,0.04);
}

/* Headings on light */
html[data-theme="light"] .v2-light-eligible h1,
html[data-theme="light"] .v2-light-eligible h2,
html[data-theme="light"] .v2-light-eligible h3,
html[data-theme="light"] .v2-light-eligible h4,
html[data-theme="light"] .v2-light-eligible .dashv2__hero h1,
html[data-theme="light"] .v2-light-eligible .report-v2-hero__copy h1,
html[data-theme="light"] .v2-light-eligible .hv2__head h1,
html[data-theme="light"] .v2-light-eligible .alv2__head h1,
html[data-theme="light"] .v2-light-eligible .dynv2__head h1,
html[data-theme="light"] .v2-light-eligible .adv2__title {
    color: var(--v2-ink-1) !important;
}

/* Secondary text — clamped to ink-2 token */
html[data-theme="light"] .v2-light-eligible .dashv2__hero p,
html[data-theme="light"] .v2-light-eligible .tile p,
html[data-theme="light"] .v2-light-eligible .report-card__meta,
html[data-theme="light"] .v2-light-eligible .hv2__head p,
html[data-theme="light"] .v2-light-eligible .hv2-card__meta,
html[data-theme="light"] .v2-light-eligible .alv2__head p,
html[data-theme="light"] .v2-light-eligible .alv2-card p,
html[data-theme="light"] .v2-light-eligible .alv2-card__date,
html[data-theme="light"] .v2-light-eligible .dynv2__head p,
html[data-theme="light"] .v2-light-eligible .dynv2__chart-head p,
html[data-theme="light"] .v2-light-eligible .adv2__excerpt,
html[data-theme="light"] .v2-light-eligible .adv2__meta,
html[data-theme="light"] .v2-light-eligible .adv2__body,
html[data-theme="light"] .v2-light-eligible .pv2__desc {
    color: var(--v2-ink-2) !important;
}

/* Pills & status — slight tint for clinic look */
html[data-theme="light"] .v2-light-eligible .status,
html[data-theme="light"] .v2-light-eligible .dashv2__quota small,
html[data-theme="light"] .v2-light-eligible .dashv2__quota em {
    color: var(--v2-muted) !important;
}

/* CTA band — light variant uses brand mint */
html[data-theme="light"] .v2-light-eligible .dashv2__cta-band {
    background: linear-gradient(135deg, #e6fbf5, #fff);
    border-color: rgba(0,212,170,0.30);
    color: var(--v2-ink-1);
}

/* Inputs */
html[data-theme="light"] .v2-light-eligible .ds-input,
html[data-theme="light"] .v2-light-eligible .ds-select,
html[data-theme="light"] .v2-light-eligible .ds-textarea,
html[data-theme="light"] .v2-light-eligible .hv2__search input,
html[data-theme="light"] .v2-light-eligible .alv2__search input {
    background: #fff;
    color: var(--v2-ink-1);
    border-color: var(--v2-border);
}

/* AppLayout chrome stays slightly tinted */
html[data-theme="light"] .v2-light-eligible footer {
    background: #fff !important;
    border-top: 1px solid var(--v2-border) !important;
    color: var(--v2-muted) !important;
}
html[data-theme="light"] .v2-light-eligible footer a { color: var(--v2-ink-2) !important; }

/* Theme switch button — sits inside the appbar */
.mediora-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.mediora-theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }
.mediora-theme-toggle:focus-visible { outline: 2px solid #00D4AA; outline-offset: 2px; }
html[data-theme="light"] .mediora-theme-toggle {
    border-color: rgba(13,29,44,0.18);
    color: var(--v2-ink-1);
}
html[data-theme="light"] .mediora-theme-toggle:hover {
    background: rgba(13,29,44,0.05);
    border-color: rgba(13,29,44,0.35);
}
.mediora-theme-toggle .ico-sun  { display: none; }
.mediora-theme-toggle .ico-moon { display: inline-block; }
html[data-theme="light"] .mediora-theme-toggle .ico-sun  { display: inline-block; }
html[data-theme="light"] .mediora-theme-toggle .ico-moon { display: none; }

/* Print: always force light, ignore data-theme. Clinicians print reports. */
@media print {
    html, html[data-theme="light"], html[data-theme="dark"] {
        --v2-bg-1: #fff;
        --v2-bg-2: #fff;
        --v2-bg-3: #f4f4f4;
        --v2-ink-1: #000;
        --v2-ink-2: #333;
        background: #fff !important;
        color: #000 !important;
    }
    .mediora-theme-toggle, .mobile-drawer, .navbar-hamburger { display: none !important; }
}