/* ============================================================
   I AM STILL ALIVE — APP APPEARANCE · STAGE 2
   FULL-APP BESPOKE COMPONENT RECOLOR (dark + sunset)
   ------------------------------------------------------------
   Loaded AFTER iasa-theme.css. iasa-theme.css already covers the
   Bootstrap / common-utility layer (cards, modals, forms, tables,
   navbar, footer, the sidebar + theme switcher, the settings
   appearance grid). THIS file recolors the app's BESPOKE pages —
   the ones that hardcode light surfaces (#fff, rgba(255,255,255,…))
   and navy text (#0C204D) via inline style="" and per-template
   <style> blocks, so they stay readable in Dark IASA + Sunset.

   RULES OBSERVED
   • EVERY rule below is scoped under html[data-theme="dark"] and/or
     html[data-theme="sunset"]. The default / Classic look is never
     touched — no rule here matches the light theme.
   • Many targets are inline styles, so !important is used to win.
   • Brand ACCENTS are preserved: teal/sky/navy gradient buttons,
     coloured stat-icon tiles, status badges, the outgoing teal
     chat bubble. Only light SURFACES + dark TEXT are flipped.
   • Token-driven (--iasa-surface / -2, --iasa-text, --iasa-muted,
     --iasa-border, --iasa-glass-*) so dark + sunset share rules and
     each renders in its own palette. Sunset gets warm tints added
     where a shared rule would otherwise read too cold/navy.
   ============================================================ */


/* ============================================================
   0. SHARED LOCAL TOKENS (per theme)
   ------------------------------------------------------------
   A couple of helper tints used repeatedly below. Defined per
   theme so the same component rule warms up under sunset.
   ============================================================ */
html[data-theme="dark"] {
    --iasa-cmp-accent-soft:  rgba(40, 186, 237, 0.12);  /* teal wash */
    --iasa-cmp-accent-line:  rgba(127, 217, 242, 0.22);
    --iasa-cmp-bubble-in:    #1b2c55;                   /* incoming chat bubble */
    --iasa-cmp-bubble-in-bd: rgba(127, 217, 242, 0.18);
    --iasa-cmp-chat-wall:
        radial-gradient(circle at 13px 13px, rgba(127,217,242,0.05) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
        linear-gradient(180deg, #0d1939 0%, #0a1430 100%);
}
html[data-theme="sunset"] {
    --iasa-cmp-accent-soft:  rgba(255, 170, 110, 0.14); /* amber wash */
    --iasa-cmp-accent-line:  rgba(255, 198, 150, 0.26);
    --iasa-cmp-bubble-in:    #51305c;                   /* warm plum incoming bubble */
    --iasa-cmp-bubble-in-bd: rgba(255, 198, 150, 0.22);
    --iasa-cmp-chat-wall:
        radial-gradient(circle at 13px 13px, rgba(255,198,150,0.06) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
        linear-gradient(180deg, #341f44 0%, #2a1a3a 100%);
}


/* ============================================================
   1. PATIENT DASHBOARD  (my_dashboard.html — .cw-* / .iasa-* )
   ============================================================ */

/* Page shell + section text (navy/teal hardcoded) */
html[data-theme="dark"] .cw-wrap,
html[data-theme="sunset"] .cw-wrap { color: var(--iasa-text); }
html[data-theme="dark"] .cw-section-title,
html[data-theme="sunset"] .cw-section-title { color: var(--iasa-heading); }

/* Glass surfaces — the page's final <style> forces these to
   rgba(255,255,255,.62)!important, so we must re-force them. */
html[data-theme="dark"] .cw-hero,
html[data-theme="dark"] .cw-stat,
html[data-theme="dark"] .cw-card,
html[data-theme="dark"] #iasa-mood-card,
html[data-theme="dark"] .iasa-mood,
html[data-theme="sunset"] .cw-hero,
html[data-theme="sunset"] .cw-stat,
html[data-theme="sunset"] .cw-card,
html[data-theme="sunset"] #iasa-mood-card,
html[data-theme="sunset"] .iasa-mood {
    background: var(--iasa-glass-bg) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--iasa-glass-border) !important;
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite) !important;
    color: var(--iasa-text);
}

/* HERO text */
html[data-theme="dark"] .cw-greeting,
html[data-theme="sunset"] .cw-greeting { color: var(--iasa-heading); }
html[data-theme="dark"] .cw-hero-sub,
html[data-theme="sunset"] .cw-hero-sub,
html[data-theme="dark"] .progress-ring-sub,
html[data-theme="sunset"] .progress-ring-sub { color: var(--iasa-muted); }
html[data-theme="dark"] .progress-ring-pct,
html[data-theme="sunset"] .progress-ring-pct { color: var(--iasa-heading); }
html[data-theme="dark"] .gm-sep,
html[data-theme="sunset"] .gm-sep { color: var(--iasa-muted); opacity: .6; }
/* avatar core stays a soft light disc so the script initial reads */
html[data-theme="dark"] .cw-avatar,
html[data-theme="sunset"] .cw-avatar {
    background: radial-gradient(circle at 50% 38%, var(--iasa-surface-2) 0%, var(--iasa-surface) 100%);
    border-color: var(--iasa-glass-border);
}
html[data-theme="dark"] .progress-ring-track,
html[data-theme="sunset"] .progress-ring-track { stroke: var(--iasa-border); }

/* STAT cards: keep the coloured number + icon tiles (brand accents).
   Only flip the white surface (handled above) — numbers stay vibrant. */
html[data-theme="dark"] .cw-stat-lbl,
html[data-theme="sunset"] .cw-stat-lbl { color: var(--iasa-muted); }
/* default stat number colour is navy; the c1..c4 variants are vibrant
   and stay. Re-point the base only. */
html[data-theme="dark"] .cw-stat-num,
html[data-theme="sunset"] .cw-stat-num { color: var(--iasa-heading); }
html[data-theme="dark"] .cw-stat.c1 .cw-stat-num { color: #57c7f8; }
html[data-theme="dark"] .cw-stat.c2 .cw-stat-num { color: #5ee0a0; }
html[data-theme="dark"] .cw-stat.c3 .cw-stat-num { color: #b89bf0; }
html[data-theme="dark"] .cw-stat.c4 .cw-stat-num { color: #f49ac0; }
html[data-theme="sunset"] .cw-stat.c1 .cw-stat-num { color: #8fd8ef; }
html[data-theme="sunset"] .cw-stat.c2 .cw-stat-num { color: #7fd9a8; }
html[data-theme="sunset"] .cw-stat.c3 .cw-stat-num { color: #d3aef0; }
html[data-theme="sunset"] .cw-stat.c4 .cw-stat-num { color: #f7aecb; }

/* QUESTION cards text */
html[data-theme="dark"] .cw-q-text,
html[data-theme="sunset"] .cw-q-text { color: var(--iasa-heading); }
html[data-theme="dark"] .cw-q-meta,
html[data-theme="dark"] .cw-thread-info,
html[data-theme="sunset"] .cw-q-meta,
html[data-theme="sunset"] .cw-thread-info { color: var(--iasa-muted); }
html[data-theme="dark"] .cw-card-foot,
html[data-theme="dark"] .cw-ans-foot,
html[data-theme="sunset"] .cw-card-foot,
html[data-theme="sunset"] .cw-ans-foot { border-top-color: var(--iasa-border); }

/* ANSWERED cards (white surface + navy text + light foot border) */
html[data-theme="dark"] .cw-ans,
html[data-theme="sunset"] .cw-ans {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .cw-ans-text,
html[data-theme="sunset"] .cw-ans-text { color: var(--iasa-heading); }
html[data-theme="dark"] .cw-ans-meta,
html[data-theme="dark"] .cw-ans-excerpt,
html[data-theme="sunset"] .cw-ans-meta,
html[data-theme="sunset"] .cw-ans-excerpt { color: var(--iasa-muted); }

/* EMPTY / TICKER / VIEW-MORE surfaces */
html[data-theme="dark"] .cw-empty,
html[data-theme="dark"] .cw-ticker,
html[data-theme="sunset"] .cw-empty,
html[data-theme="sunset"] .cw-ticker {
    background: var(--iasa-glass-bg) !important;
    border-color: var(--iasa-glass-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .cw-empty-title,
html[data-theme="sunset"] .cw-empty-title { color: var(--iasa-heading); }
html[data-theme="dark"] .cw-empty-body,
html[data-theme="dark"] .cw-ticker-time,
html[data-theme="sunset"] .cw-empty-body,
html[data-theme="sunset"] .cw-ticker-time { color: var(--iasa-muted); }
html[data-theme="dark"] .cw-ticker-item,
html[data-theme="sunset"] .cw-ticker-item {
    color: var(--iasa-text);
    border-bottom-color: var(--iasa-border);
}
html[data-theme="dark"] .cw-viewmore,
html[data-theme="sunset"] .cw-viewmore {
    background: var(--iasa-surface-2) !important;
    border-color: var(--iasa-border);
    color: var(--iasa-link);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .cw-viewmore:hover,
html[data-theme="sunset"] .cw-viewmore:hover {
    background: var(--iasa-surface-2) !important;
    border-color: var(--iasa-glass-border);
    color: var(--iasa-heading);
}
html[data-theme="dark"] .cw-q-count,
html[data-theme="sunset"] .cw-q-count {
    color: var(--iasa-link);
    background: var(--iasa-cmp-accent-soft);
    border-color: var(--iasa-cmp-accent-line);
}

/* QUICK-ACTION "plain" cards (white) → surface; primary stays gradient */
html[data-theme="dark"] .cw-qa-plain,
html[data-theme="sunset"] .cw-qa-plain {
    background: var(--iasa-surface) !important;
    color: var(--iasa-text);
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .cw-qa-plain:hover,
html[data-theme="sunset"] .cw-qa-plain:hover {
    background: var(--iasa-surface-2) !important;
    color: var(--iasa-text);
    border-color: var(--iasa-glass-border);
}

/* NAV cards (artwork tiles) — keep the image, darken the frame */
html[data-theme="dark"] .cw-nav-card,
html[data-theme="sunset"] .cw-nav-card {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}

/* MOOD widget */
html[data-theme="dark"] .iasa-mood__title,
html[data-theme="sunset"] .iasa-mood__title { color: var(--iasa-heading); }
html[data-theme="dark"] .iasa-mood__sub,
html[data-theme="sunset"] .iasa-mood__sub { color: var(--iasa-muted); }
/* mood streak badge stays warm/vibrant (brand accent) — left as-is */
html[data-theme="dark"] .iasa-face,
html[data-theme="sunset"] .iasa-face {
    background: var(--iasa-surface-2);
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .iasa-face small,
html[data-theme="sunset"] .iasa-face small { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-face:hover,
html[data-theme="sunset"] .iasa-face:hover { border-color: var(--iasa-cmp-accent-line); }
html[data-theme="dark"] .iasa-face.sel {
    border-color: var(--iasa-sky); background: rgba(40,186,237,.16);
    box-shadow: 0 0 0 3px rgba(40,186,237,.16);
}
html[data-theme="sunset"] .iasa-face.sel {
    border-color: var(--iasa-link); background: rgba(255,170,110,.16);
    box-shadow: 0 0 0 3px rgba(255,170,110,.16);
}

/* Mood history + check-in tabs */
html[data-theme="dark"] .iasa-mh,
html[data-theme="sunset"] .iasa-mh { border-top-color: var(--iasa-border); }
html[data-theme="dark"] .iasa-mh__label,
html[data-theme="sunset"] .iasa-mh__label { color: var(--iasa-heading); }
html[data-theme="dark"] .iasa-mh__tabs,
html[data-theme="dark"] .iasa-checkin-tabs,
html[data-theme="sunset"] .iasa-mh__tabs,
html[data-theme="sunset"] .iasa-checkin-tabs { background: var(--iasa-bg-2); }
html[data-theme="dark"] .iasa-mh__tab,
html[data-theme="dark"] .iasa-ct,
html[data-theme="sunset"] .iasa-mh__tab,
html[data-theme="sunset"] .iasa-ct { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-mh__tab.is-on,
html[data-theme="dark"] .iasa-ct.on,
html[data-theme="sunset"] .iasa-mh__tab.is-on,
html[data-theme="sunset"] .iasa-ct.on {
    background: var(--iasa-surface-2);
    color: var(--iasa-heading);
    box-shadow: var(--iasa-shadow-soft);
}
/* mood/pain history bars: empty bar tint (filled bars keep gradient) */
html[data-theme="dark"] .iasa-mh__bar .b.empty,
html[data-theme="sunset"] .iasa-mh__bar .b.empty { background: var(--iasa-surface-2); }
html[data-theme="dark"] .iasa-mh__bar .lab,
html[data-theme="dark"] .iasa-mh__empty,
html[data-theme="sunset"] .iasa-mh__bar .lab,
html[data-theme="sunset"] .iasa-mh__empty { color: var(--iasa-muted); }

/* PAIN check-in */
html[data-theme="dark"] .iasa-pain__loc,
html[data-theme="dark"] .iasa-pain__levlabel,
html[data-theme="sunset"] .iasa-pain__loc,
html[data-theme="sunset"] .iasa-pain__levlabel { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-pain__loc strong,
html[data-theme="dark"] .iasa-pain__levlabel strong,
html[data-theme="sunset"] .iasa-pain__loc strong,
html[data-theme="sunset"] .iasa-pain__levlabel strong { color: var(--iasa-heading); }
html[data-theme="dark"] .iasa-pl,
html[data-theme="sunset"] .iasa-pl {
    background: var(--iasa-surface-2);
    border-color: var(--iasa-border);
    color: var(--iasa-muted);
}
html[data-theme="dark"] .iasa-pl:hover,
html[data-theme="sunset"] .iasa-pl:hover { border-color: var(--iasa-cmp-accent-line); }
html[data-theme="dark"] .iasa-pain__note,
html[data-theme="sunset"] .iasa-pain__note {
    background: var(--iasa-bg-2);
    border-color: var(--iasa-border);
    color: var(--iasa-text);
}
/* body-map zones: faint fill so the SVG silhouette reads on dark.
   selected (.sel) pain zone keeps its red accent. */
html[data-theme="dark"] .pz,
html[data-theme="sunset"] .pz { fill: var(--iasa-surface-2); stroke: var(--iasa-border); }
html[data-theme="dark"] .pz:hover,
html[data-theme="sunset"] .pz:hover { fill: var(--iasa-surface); }

/* Closing reassurance band */
html[data-theme="dark"] .cw-reassure-card,
html[data-theme="sunset"] .cw-reassure-card {
    background: linear-gradient(135deg, var(--iasa-bg-2) 0%, var(--iasa-surface) 60%, var(--iasa-bg-2) 100%);
    border-top-color: var(--iasa-border);
}
html[data-theme="dark"] .cw-reassure-sub,
html[data-theme="sunset"] .cw-reassure-sub { color: var(--iasa-muted); }


/* ============================================================
   2. DOCTOR DASHBOARD  (medical_professionals_dashboard.html — .dr-*)
   ============================================================ */

/* the page's later <style> forces body white — neutralise it so the
   themed body gradient (set in iasa-theme.css) shows through. */
html[data-theme="dark"] body,
html[data-theme="sunset"] body { background-color: transparent; }
/* its cloud wallpaper is also forced; let the themed body show. */
html[data-theme="dark"] section.img-bg,
html[data-theme="sunset"] section.img-bg { background: transparent !important; }

html[data-theme="dark"] .dr-hello,
html[data-theme="sunset"] .dr-hello { color: var(--iasa-heading) !important; }
html[data-theme="dark"] .dr-sub,
html[data-theme="sunset"] .dr-sub { color: var(--iasa-muted) !important; }

/* stat cards (white !important) → surface; coloured numbers stay vibrant */
html[data-theme="dark"] .dr-card,
html[data-theme="sunset"] .dr-card {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    box-shadow: var(--iasa-shadow) !important;
}
html[data-theme="dark"] .dr-card .l,
html[data-theme="sunset"] .dr-card .l { color: var(--iasa-muted) !important; }
/* base .n is navy; vibrant per-child numbers already win via !important.
   The first card (no nth-child variant) reads as a bright sky tone. */
html[data-theme="dark"] .dr-card .n,
html[data-theme="sunset"] .dr-card .n { color: #57c7f8 !important; }
html[data-theme="dark"] .dr-card:nth-child(2) .n { color: #5ee0a0 !important; }
html[data-theme="dark"] .dr-card:nth-child(3) .n { color: #b89bf0 !important; }
html[data-theme="sunset"] .dr-card:nth-child(2) .n { color: #7fd9a8 !important; }
html[data-theme="sunset"] .dr-card:nth-child(3) .n { color: #d3aef0 !important; }

/* action cards / board cards / chips (white) → surface */
html[data-theme="dark"] .dr-act,
html[data-theme="sunset"] .dr-act {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
    box-shadow: var(--iasa-shadow) !important;
}
html[data-theme="dark"] .dr-bcard,
html[data-theme="sunset"] .dr-bcard {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .dr-bcards-title,
html[data-theme="dark"] .dr-bcard .bn,
html[data-theme="sunset"] .dr-bcards-title,
html[data-theme="sunset"] .dr-bcard .bn { color: var(--iasa-heading); }
html[data-theme="dark"] .dr-bcard .bs,
html[data-theme="sunset"] .dr-bcard .bs { color: var(--iasa-muted); }
html[data-theme="dark"] .dr-chip,
html[data-theme="sunset"] .dr-chip {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
html[data-theme="dark"] .dr-chip[href]:hover,
html[data-theme="sunset"] .dr-chip[href]:hover { background: var(--iasa-surface-2) !important; }
html[data-theme="dark"] .dr-chip.add,
html[data-theme="sunset"] .dr-chip.add { color: var(--iasa-link) !important; }


/* ============================================================
   3. MODERATOR DASHBOARD  (moderator_dashboard.html — .mod-*)
   ============================================================ */
html[data-theme="dark"] .mod-hello,
html[data-theme="sunset"] .mod-hello { color: var(--iasa-heading) !important; }
html[data-theme="dark"] .mod-sub,
html[data-theme="sunset"] .mod-sub { color: var(--iasa-muted) !important; }

html[data-theme="dark"] .mod-card,
html[data-theme="sunset"] .mod-card {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    box-shadow: var(--iasa-shadow) !important;
}
html[data-theme="dark"] .mod-card .l,
html[data-theme="sunset"] .mod-card .l { color: var(--iasa-muted) !important; }
html[data-theme="dark"] .mod-card .n,
html[data-theme="sunset"] .mod-card .n { color: #57c7f8 !important; }
html[data-theme="dark"] .mod-card:nth-child(2) .n { color: #5ee0a0 !important; }
html[data-theme="dark"] .mod-card:nth-child(3) .n { color: #b89bf0 !important; }
html[data-theme="sunset"] .mod-card:nth-child(2) .n { color: #7fd9a8 !important; }
html[data-theme="sunset"] .mod-card:nth-child(3) .n { color: #d3aef0 !important; }

html[data-theme="dark"] .mod-act,
html[data-theme="sunset"] .mod-act {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
    box-shadow: var(--iasa-shadow) !important;
}
html[data-theme="dark"] .mod-board-chip,
html[data-theme="sunset"] .mod-board-chip {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .mod-boards-title,
html[data-theme="dark"] .mod-board-chip .mb-name,
html[data-theme="sunset"] .mod-boards-title,
html[data-theme="sunset"] .mod-board-chip .mb-name { color: var(--iasa-heading); }
html[data-theme="dark"] .mod-board-chip .mb-states,
html[data-theme="sunset"] .mod-board-chip .mb-states { color: var(--iasa-muted); }


/* ============================================================
   4. dashboard_pro.css FAMILY  (.dpro-*)
   ============================================================ */
/* animated backdrop: swap the cold light gradient for a themed one */
html[data-theme="dark"] .dpro-scene {
    background:
        radial-gradient(1200px 720px at 12% -10%, rgba(40,186,237,.20), transparent 60%),
        radial-gradient(1000px 620px at 92% 2%, rgba(45,134,173,.18), transparent 62%),
        radial-gradient(1100px 820px at 50% 122%, rgba(110,86,210,.16), transparent 60%),
        linear-gradient(165deg, #0a1430 0%, #0e1b3f 45%, #0a1430 100%);
}
html[data-theme="sunset"] .dpro-scene {
    background:
        radial-gradient(1200px 720px at 12% -10%, rgba(255,150,95,.20), transparent 60%),
        radial-gradient(1000px 620px at 92% 2%, rgba(200,90,120,.16), transparent 62%),
        radial-gradient(1100px 820px at 50% 122%, rgba(140,60,130,.18), transparent 60%),
        linear-gradient(165deg, #2a1a3a 0%, #361f44 45%, #2a1a3a 100%);
}

/* premium glass panel */
html[data-theme="dark"] .dpro-panel-inner,
html[data-theme="sunset"] .dpro-panel-inner {
    background: var(--iasa-glass-bg);
    border: 1px solid var(--iasa-glass-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .dpro-hello,
html[data-theme="sunset"] .dpro-hello { color: var(--iasa-heading); }
html[data-theme="dark"] .dpro-sub,
html[data-theme="sunset"] .dpro-sub { color: var(--iasa-muted); }

/* stat cards (white) → surface; coloured tiles + accents stay */
html[data-theme="dark"] .dpro-card,
html[data-theme="sunset"] .dpro-card {
    background: var(--iasa-surface);
    border-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .dpro-card .n,
html[data-theme="sunset"] .dpro-card .n { color: var(--iasa-heading); }
html[data-theme="dark"] .dpro-card .l,
html[data-theme="sunset"] .dpro-card .l { color: var(--iasa-muted); }

/* action chips (white) → surface */
html[data-theme="dark"] .dpro-act,
html[data-theme="sunset"] .dpro-act {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
    color: var(--iasa-text) !important;
    box-shadow: var(--iasa-shadow);
}
html[data-theme="dark"] .dpro-act:hover,
html[data-theme="sunset"] .dpro-act:hover { border-color: var(--iasa-glass-border); }

/* on-brand moment text */
html[data-theme="dark"] .dpro-brand-sub,
html[data-theme="sunset"] .dpro-brand-sub { color: var(--iasa-muted); }


/* ============================================================
   5. "COMPLETE YOUR PROFILE" NUDGE  (.iasa-nudge)
   ============================================================ */
html[data-theme="dark"] .iasa-nudge,
html[data-theme="sunset"] .iasa-nudge {
    background: linear-gradient(150deg, var(--iasa-glass-bg), var(--iasa-glass-bg-2));
    border: 1px solid var(--iasa-glass-border);
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite);
}
html[data-theme="dark"] .iasa-nudge__title,
html[data-theme="sunset"] .iasa-nudge__title { color: var(--iasa-heading); }
html[data-theme="dark"] .iasa-nudge__meta,
html[data-theme="dark"] .iasa-nudge__missing,
html[data-theme="sunset"] .iasa-nudge__meta,
html[data-theme="sunset"] .iasa-nudge__missing { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-nudge__close,
html[data-theme="sunset"] .iasa-nudge__close { color: var(--iasa-muted); }
html[data-theme="dark"] .iasa-nudge__close:hover,
html[data-theme="sunset"] .iasa-nudge__close:hover { background: var(--iasa-glass-hilite); }
html[data-theme="dark"] .iasa-nudge__bar,
html[data-theme="sunset"] .iasa-nudge__bar { background: var(--iasa-surface-2); }
/* the fill is a brand gradient — kept. */


/* ============================================================
   6. CHAT SURFACES  (ask_the_doctor / tumor_board / cancer_warriors)
   ------------------------------------------------------------
   Make the chat CHROME readable on dark/sunset. The per-user chat
   WALLPAPER is Stage 3 — here we give the default wrapper a dark
   tint so default bubbles still read. Outgoing teal-gradient
   bubbles are KEPT (brand). Incoming white bubbles → dark surface.
   ============================================================ */

/* frosted sidebar / containers / headers */
html[data-theme="dark"] #left_container,
html[data-theme="sunset"] #left_container {
    background: var(--iasa-glass-bg) !important;
    border-right: 1px solid var(--iasa-glass-border) !important;
    box-shadow: 2px 0 18px rgba(2,8,24,0.35) !important;
}
html[data-theme="dark"] .top-left-header,
html[data-theme="dark"] .left-chat-container,
html[data-theme="sunset"] .top-left-header,
html[data-theme="sunset"] .left-chat-container { background: transparent !important; }

/* chat wallpaper (the light gradient #chat_wrapper / #chat_wrapper) */
html[data-theme="dark"] #chat_wrapper,
html[data-theme="sunset"] #chat_wrapper { background: var(--iasa-cmp-chat-wall) !important; }

/* chat header bar (ask the doctor forces white) */
html[data-theme="dark"] #Ask_the_doctor_management > .row:first-child,
html[data-theme="sunset"] #Ask_the_doctor_management > .row:first-child {
    background: var(--iasa-surface) !important;
    border-bottom-color: var(--iasa-border);
    box-shadow: var(--iasa-shadow-soft) !important;
}
html[data-theme="dark"] #moderator-username span:first-child b,
html[data-theme="sunset"] #moderator-username span:first-child b { color: var(--iasa-heading); }

/* case-list item cards (.chat-box light blue) → surface */
html[data-theme="dark"] .chat-box,
html[data-theme="sunset"] .chat-box {
    background-color: var(--iasa-surface) !important;
    border: 1px solid var(--iasa-border) !important;
    box-shadow: 0 1px 4px rgba(2,8,24,0.35) !important;
}
html[data-theme="dark"] .chat-box.active,
html[data-theme="sunset"] .chat-box.active { background-color: var(--iasa-surface-2) !important; }
/* category filter buttons */
html[data-theme="dark"] .button-cat,
html[data-theme="sunset"] .button-cat {
    background-color: var(--iasa-surface-2) !important;
    color: var(--iasa-muted) !important;
}
html[data-theme="dark"] .button-cat:hover,
html[data-theme="dark"] .button-cat.button_cat_active,
html[data-theme="sunset"] .button-cat:hover,
html[data-theme="sunset"] .button-cat.button_cat_active {
    background-color: var(--iasa-cmp-accent-soft) !important;
    color: var(--iasa-link) !important;
}
/* tumor-board list rows + selected board */
html[data-theme="dark"] .tumor_boards.tumor_active,
html[data-theme="sunset"] .tumor_boards.tumor_active { background: var(--iasa-cmp-accent-soft) !important; }

/* ── message bubbles ──────────────────────────────────────── */
/* INCOMING (white card) → dark surface + light text.
   covers ask_the_doctor + cancer_warriors (.moderator_box/.moderator-card)
   and tumor_board (.doctor_msg/.moderator_msg). */
html[data-theme="dark"] #chatMessagesContainer .moderator_box,
html[data-theme="dark"] .moderator_box,
html[data-theme="dark"] .moderator-card,
html[data-theme="dark"] .doctor_msg,
html[data-theme="dark"] .moderator_msg,
html[data-theme="sunset"] #chatMessagesContainer .moderator_box,
html[data-theme="sunset"] .moderator_box,
html[data-theme="sunset"] .moderator-card,
html[data-theme="sunset"] .doctor_msg,
html[data-theme="sunset"] .moderator_msg {
    background: var(--iasa-cmp-bubble-in) !important;
    background-color: var(--iasa-cmp-bubble-in) !important;
    border: 1px solid var(--iasa-cmp-bubble-in-bd) !important;
}
html[data-theme="dark"] #chatMessagesContainer .moderator_box .cw-msg-text,
html[data-theme="dark"] .moderator-card .copy-text,
html[data-theme="dark"] .doctor_msg .tb-msg-text,
html[data-theme="dark"] .moderator_msg .tb-msg-text,
html[data-theme="sunset"] #chatMessagesContainer .moderator_box .cw-msg-text,
html[data-theme="sunset"] .moderator-card .copy-text,
html[data-theme="sunset"] .doctor_msg .tb-msg-text,
html[data-theme="sunset"] .moderator_msg .tb-msg-text { color: var(--iasa-text) !important; }
/* bubble tails (CSS-triangle borders use the old light bubble colour) */
html[data-theme="dark"] .moderator_box:before,
html[data-theme="dark"] .doctor_msg:before,
html[data-theme="dark"] .moderator_msg:before,
html[data-theme="sunset"] .moderator_box:before,
html[data-theme="sunset"] .doctor_msg:before,
html[data-theme="sunset"] .moderator_msg:before { border-right-color: var(--iasa-cmp-bubble-in) !important; }
/* OUTGOING teal-gradient bubbles (.patient_box / .patient-card) are KEPT
   as the brand accent — white text already set in templates. */

/* composer / input pill (forced white in templates) */
html[data-theme="dark"] #fixed_textarea .flex-column,
html[data-theme="dark"] #fixed_textarea .d-flex.flex-column.flex-grow-1,
html[data-theme="sunset"] #fixed_textarea .flex-column,
html[data-theme="sunset"] #fixed_textarea .d-flex.flex-column.flex-grow-1 {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    box-shadow: var(--iasa-shadow) !important;
    color: var(--iasa-text);
}
html[data-theme="dark"] #replyBox,
html[data-theme="dark"] #doctor_response_text,
html[data-theme="sunset"] #replyBox,
html[data-theme="sunset"] #doctor_response_text { color: var(--iasa-text) !important; }
html[data-theme="dark"] #replyBox::placeholder,
html[data-theme="dark"] #doctor_response_text:empty:before,
html[data-theme="dark"] #doctor_response_text.empty-placeholder::before,
html[data-theme="sunset"] #replyBox::placeholder,
html[data-theme="sunset"] #doctor_response_text:empty:before,
html[data-theme="sunset"] #doctor_response_text.empty-placeholder::before { color: var(--iasa-muted) !important; }

/* "Compile Answer" / "Generate case report" bars + summernote editor */
html[data-theme="dark"] #summernote,
html[data-theme="sunset"] #summernote { color: var(--iasa-text) !important; }
html[data-theme="dark"] .modal-body.inner-chat-bg,
html[data-theme="sunset"] .modal-body.inner-chat-bg {
    background-color: var(--iasa-bg-2) !important;
    color: var(--iasa-text);
}
html[data-theme="dark"] .right-side-top-container,
html[data-theme="sunset"] .right-side-top-container {
    background: var(--iasa-glass-bg-2) !important;
    box-shadow: var(--iasa-shadow-soft) !important;
}
/* tagged-message reply preview (light blue) */
html[data-theme="dark"] #tagged_message_preview,
html[data-theme="sunset"] #tagged_message_preview {
    background: var(--iasa-surface-2) !important;
    border-left-color: var(--iasa-sky) !important;
}
html[data-theme="dark"] #tagged_message_content,
html[data-theme="sunset"] #tagged_message_content { color: var(--iasa-muted) !important; }
/* placeholder card shown before a chat is opened */
html[data-theme="dark"] .chat-placeholder-wrapper,
html[data-theme="sunset"] .chat-placeholder-wrapper { background: var(--iasa-surface-2) !important; }
html[data-theme="dark"] #chat-placeholder h5,
html[data-theme="sunset"] #chat-placeholder h5 { color: var(--iasa-text) !important; }
/* reaction picker popovers (white) */
html[data-theme="dark"] .reaction-picker,
html[data-theme="dark"] .reaction-picker.full,
html[data-theme="sunset"] .reaction-picker,
html[data-theme="sunset"] .reaction-picker.full {
    background: var(--iasa-surface-2) !important;
    border: 1px solid var(--iasa-border);
    box-shadow: var(--iasa-shadow);
}


/* ============================================================
   7. NOTIFICATIONS  (notifications.html — .nf-*)
   ============================================================ */
html[data-theme="dark"] .nf-card,
html[data-theme="sunset"] .nf-card {
    background: var(--iasa-glass-bg) !important;
    border: 1px solid var(--iasa-glass-border);
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite);
}
html[data-theme="dark"] .nf-head h2,
html[data-theme="sunset"] .nf-head h2 { color: var(--iasa-heading); }
html[data-theme="dark"] .nf-markall,
html[data-theme="sunset"] .nf-markall {
    background: var(--iasa-surface-2);
    border-color: var(--iasa-border);
    color: var(--iasa-text);
}
html[data-theme="dark"] .nf-markall:hover,
html[data-theme="sunset"] .nf-markall:hover { background: var(--iasa-surface); }
html[data-theme="dark"] .nf-item,
html[data-theme="sunset"] .nf-item {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border);
}
html[data-theme="dark"] .nf-item.unread,
html[data-theme="sunset"] .nf-item.unread {
    background: var(--iasa-cmp-accent-soft) !important;
    border-color: var(--iasa-cmp-accent-line);
}
html[data-theme="dark"] .nf-item:hover,
html[data-theme="sunset"] .nf-item:hover { box-shadow: var(--iasa-shadow); }
html[data-theme="dark"] .nf-title,
html[data-theme="sunset"] .nf-title { color: var(--iasa-heading); }
html[data-theme="dark"] .nf-body,
html[data-theme="dark"] .nf-empty,
html[data-theme="sunset"] .nf-body,
html[data-theme="sunset"] .nf-empty { color: var(--iasa-muted); }
html[data-theme="dark"] .nf-time,
html[data-theme="sunset"] .nf-time { color: var(--iasa-muted); opacity: .8; }
/* .nf-ic.* tiles + .nf-badge stay vibrant brand gradients */


/* ============================================================
   8. SETTINGS  (settings.html — .st-*)
   ============================================================ */
html[data-theme="dark"] .st-wrap h2,
html[data-theme="sunset"] .st-wrap h2 { color: var(--iasa-heading); }
html[data-theme="dark"] .st-card,
html[data-theme="sunset"] .st-card {
    background: var(--iasa-glass-bg) !important;
    border: 1px solid var(--iasa-glass-border);
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite);
}
html[data-theme="dark"] .st-card h5,
html[data-theme="dark"] .st-label,
html[data-theme="sunset"] .st-card h5,
html[data-theme="sunset"] .st-label { color: var(--iasa-heading); }
html[data-theme="dark"] .st-card .st-sub,
html[data-theme="dark"] .st-toggle-row .d,
html[data-theme="sunset"] .st-card .st-sub,
html[data-theme="sunset"] .st-toggle-row .d { color: var(--iasa-muted); }
html[data-theme="dark"] .st-toggle-row .t,
html[data-theme="sunset"] .st-toggle-row .t { color: var(--iasa-text); }
html[data-theme="dark"] .st-input,
html[data-theme="sunset"] .st-input {
    background: var(--iasa-bg-2) !important;
    border-color: var(--iasa-border);
    color: var(--iasa-text);
}
html[data-theme="dark"] .st-input:focus,
html[data-theme="sunset"] .st-input:focus { border-color: var(--iasa-link); }
html[data-theme="dark"] .st-links a,
html[data-theme="sunset"] .st-links a { color: var(--iasa-text); }
html[data-theme="dark"] .st-links a:hover,
html[data-theme="sunset"] .st-links a:hover { background: var(--iasa-cmp-accent-soft); }
/* themed alerts: keep semantic hue but darken the surface */
html[data-theme="dark"] .st-alert.ok,
html[data-theme="sunset"] .st-alert.ok {
    background: rgba(31,157,99,0.18); color: #7fe0ab; border-color: rgba(31,157,99,0.4);
}
html[data-theme="dark"] .st-alert.bad,
html[data-theme="sunset"] .st-alert.bad {
    background: rgba(212,83,126,0.18); color: #f4a6bd; border-color: rgba(212,83,126,0.4);
}
/* .st-btn + the .iasa-appearance-* theme grid keep their gradients
   (the grid is already themed in iasa-theme.css). */


/* ============================================================
   9. PROFILE MANAGEMENT  (patient_profile_management.html)
   ------------------------------------------------------------
   Everything scoped under #container in the template; mirror that.
   ============================================================ */
/* glass tab-pane cards */
html[data-theme="dark"] #container .tab-pane,
html[data-theme="sunset"] #container .tab-pane {
    background: var(--iasa-glass-bg) !important;
    border: 1px solid var(--iasa-glass-border) !important;
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite) !important;
}
/* the card shell (#nav-tab / #nav-home forced white) */
html[data-theme="dark"] #container #nav-tab,
html[data-theme="dark"] #container #nav-home,
html[data-theme="sunset"] #container #nav-tab,
html[data-theme="sunset"] #container #nav-home {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    box-shadow: var(--iasa-shadow) !important;
}
/* the inner tab nav (inline style="background:#EEFAFF") */
html[data-theme="dark"] #container .nav.nav-tabs#nav-tab,
html[data-theme="sunset"] #container .nav.nav-tabs#nav-tab { background: var(--iasa-surface) !important; }

/* labels + section headings */
html[data-theme="dark"] #container label,
html[data-theme="dark"] #container form label,
html[data-theme="dark"] #container form h5,
html[data-theme="sunset"] #container label,
html[data-theme="sunset"] #container form label,
html[data-theme="sunset"] #container form h5 { color: var(--iasa-heading) !important; }
html[data-theme="dark"] #container form h5,
html[data-theme="sunset"] #container form h5 { border-bottom-color: var(--iasa-border) !important; }

/* fields (forced light) */
html[data-theme="dark"] #container .form-control,
html[data-theme="dark"] #container .form-select,
html[data-theme="sunset"] #container .form-control,
html[data-theme="sunset"] #container .form-select {
    background: var(--iasa-bg-2) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
html[data-theme="dark"] #container .form-control:focus,
html[data-theme="dark"] #container .form-select:focus,
html[data-theme="sunset"] #container .form-control:focus,
html[data-theme="sunset"] #container .form-select:focus {
    background: var(--iasa-bg-2) !important;
    border-color: var(--iasa-link) !important;
}
html[data-theme="dark"] #container .form-control::placeholder,
html[data-theme="sunset"] #container .form-control::placeholder { color: var(--iasa-muted) !important; }
/* read-only "managed" fields */
html[data-theme="dark"] #container .form-control:disabled,
html[data-theme="dark"] #container .form-select:disabled,
html[data-theme="dark"] #container .form-control[disabled],
html[data-theme="sunset"] #container .form-control:disabled,
html[data-theme="sunset"] #container .form-select:disabled,
html[data-theme="sunset"] #container .form-control[disabled] {
    background-color: var(--iasa-surface-2) !important;
    color: var(--iasa-muted) !important;
}
/* cancel button (light grey) */
html[data-theme="dark"] #container #cancelButton,
html[data-theme="sunset"] #container #cancelButton {
    background: var(--iasa-surface-2) !important;
    border-color: var(--iasa-border) !important;
}
/* #nav-home-tab heading + #updateProfileBtn keep their brand gradients. */


/* ============================================================
   10. GENERIC APP-WIDE PATTERNS
   ------------------------------------------------------------
   Catch-alls for bespoke wrappers that bake a white surface or
   navy text via inline style="" across many templates. Kept
   conservative: scoped, token-driven, dark/sunset only.
   ============================================================ */

/* the rainbow "top_card" header band on the legacy dashboards reads
   navy text on a faint gradient — lift the text only. */
html[data-theme="dark"] .top_card,
html[data-theme="sunset"] .top_card { color: var(--iasa-text); }

/* legacy "sidebar" panels forced to #6BE4F2 via inline style */
html[data-theme="dark"] .sidebar[style*="6BE4F2"],
html[data-theme="dark"] [style*="background-color: #6BE4F2"],
html[data-theme="dark"] [style*="background-color:#6BE4F2"],
html[data-theme="sunset"] .sidebar[style*="6BE4F2"],
html[data-theme="sunset"] [style*="background-color: #6BE4F2"],
html[data-theme="sunset"] [style*="background-color:#6BE4F2"] {
    background-color: var(--iasa-surface) !important;
}

/* tumor-board select-board dropdown trigger (inline #ABE3F8) */
html[data-theme="dark"] #tumorBoardDropdown,
html[data-theme="sunset"] #tumorBoardDropdown { background: var(--iasa-surface-2) !important; }
html[data-theme="dark"] #tumorBoardDropdown span,
html[data-theme="sunset"] #tumorBoardDropdown span { color: var(--iasa-text) !important; }

/* VTB filter chips (inline-styled white pills) */
html[data-theme="dark"] .vtb-filter-chip,
html[data-theme="sunset"] .vtb-filter-chip {
    background: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
html[data-theme="dark"] .vtb-filter-chip:hover,
html[data-theme="sunset"] .vtb-filter-chip:hover { background: var(--iasa-surface-2) !important; }
/* .vtb-filter-chip.active stays the teal gradient (brand). */

/* profile / community circular thumbs that bake a white plate */
html[data-theme="dark"] .profile_img,
html[data-theme="dark"] .tumor_board_img,
html[data-theme="sunset"] .profile_img,
html[data-theme="sunset"] .tumor_board_img { background-color: var(--iasa-surface) !important; }

/* ============================================================
   LOGIN / SIGN-UP — Dark & Dawn (sunset) support
   The auth pages paint their own hardcoded day sky + tree over the
   global themed sky and use light glass cards. Under dark/sunset we
   drop those backdrops so the themed sky (night stars / warm sunset +
   flock) shows, and recolor the glass cards, fields and labels.
   Classic/light is untouched — every rule here is theme-scoped.
   ============================================================ */
/* reveal the global themed sky: drop the hardcoded day clouds + tree */
html[data-theme="dark"] .img-bg,
html[data-theme="sunset"] .img-bg { background: transparent !important; }
html[data-theme="dark"] .img-patient-dashboard-bg,
html[data-theme="sunset"] .img-patient-dashboard-bg { background-image: none !important; }

/* glass auth cards: login .form_container + signup .join-card */
html[data-theme="dark"] .form_container,  html[data-theme="dark"] .join-card,
html[data-theme="sunset"] .form_container, html[data-theme="sunset"] .join-card {
    background: linear-gradient(150deg, var(--iasa-glass-hilite), var(--iasa-glass-bg)) !important;
    border-color: var(--iasa-glass-border) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
/* input fields */
html[data-theme="dark"] .form_container .form-control,  html[data-theme="dark"] .join-card .form-control,
html[data-theme="sunset"] .form_container .form-control, html[data-theme="sunset"] .join-card .form-control {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-text) !important;
}
html[data-theme="dark"] .form_container .form-control::placeholder,  html[data-theme="dark"] .join-card .form-control::placeholder,
html[data-theme="sunset"] .form_container .form-control::placeholder, html[data-theme="sunset"] .join-card .form-control::placeholder { color: var(--iasa-muted) !important; }
html[data-theme="dark"] .form_container .form-control:focus,  html[data-theme="dark"] .join-card .form-control:focus,
html[data-theme="sunset"] .form_container .form-control:focus, html[data-theme="sunset"] .join-card .form-control:focus { background: var(--iasa-surface) !important; }
/* input-group plates (eye icon, etc.) */
html[data-theme="dark"] .form_container .input-group-text,  html[data-theme="dark"] .join-card .input-group-text,
html[data-theme="sunset"] .form_container .input-group-text, html[data-theme="sunset"] .join-card .input-group-text,
html[data-theme="dark"] .input-group-text.bg-white, html[data-theme="sunset"] .input-group-text.bg-white {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-muted) !important;
}
/* labels + helper text + dividers */
html[data-theme="dark"] .auth-label, html[data-theme="sunset"] .auth-label { color: var(--iasa-heading) !important; }
html[data-theme="dark"] .auth-sub,  html[data-theme="sunset"] .auth-sub,
html[data-theme="dark"] .social-divider span, html[data-theme="sunset"] .social-divider span { color: var(--iasa-muted) !important; }
html[data-theme="dark"] .social-divider hr, html[data-theme="sunset"] .social-divider hr { border-top-color: var(--iasa-border) !important; }
/* social / secondary buttons */
html[data-theme="dark"] .social-btn,  html[data-theme="sunset"] .social-btn,
html[data-theme="dark"] .form_container .btn-secondary, html[data-theme="sunset"] .form_container .btn-secondary {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-text) !important;
}
html[data-theme="dark"] .social-btn:hover:not(:disabled), html[data-theme="sunset"] .social-btn:hover:not(:disabled) { background: var(--iasa-surface) !important; }


/* ============================================================
   11. GLOBAL READABILITY + GLASS SAFETY NET  (dark + sunset)
   ------------------------------------------------------------
   A last-resort, platform-wide layer that guarantees every
   generic text/label/link is legible and every common surface is
   glass-styled under DARK and DAWN(sunset) — even on bespoke pages
   that hardcode light surfaces / navy text via inline style="" or
   per-template <style> blocks. Uses !important to beat those.

   GUARD RAILS (so we don't flatten the brand):
   • Body/structural text & headings EXCLUDE colored utility classes
     (.text-primary/-success/-danger/-warning/-info) and .btn, so
     coloured text, badges and buttons keep their hue.
   • Links exclude .btn and the dashboard action tiles (.dr-act/.dr-card).
   • Inputs keep a visible focus ring. Placeholders use --iasa-muted.
   • Classic / light is never matched — every rule is theme-scoped.
   ============================================================ */

/* ---- Body / structural text ---- */
html[data-theme="dark"]  body,
html[data-theme="sunset"] body,
html[data-theme="dark"]  p:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] p:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"]  li:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] li:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"]  dt, html[data-theme="sunset"] dt,
html[data-theme="dark"]  dd, html[data-theme="sunset"] dd,
html[data-theme="dark"]  td:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] td:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"]  th, html[data-theme="sunset"] th,
html[data-theme="dark"]  .text-body, html[data-theme="sunset"] .text-body {
    color: var(--iasa-text) !important;
}
/* .text-dark is a common "force navy on light" helper — re-point it,
   but never when it's also a button or a coloured-text utility. */
html[data-theme="dark"]  .text-dark:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] .text-dark:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
    color: var(--iasa-text) !important;
}

/* ---- Headings ---- */
html[data-theme="dark"]  h1:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h1:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="dark"]  h2:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h2:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="dark"]  h3:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h3:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="dark"]  h4:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h4:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="dark"]  h5:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h5:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="dark"]  h6:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn),
html[data-theme="sunset"] h6:not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.btn) {
    color: var(--iasa-heading) !important;
}

/* ---- Muted / secondary text ---- */
html[data-theme="dark"]  .text-muted, html[data-theme="sunset"] .text-muted,
html[data-theme="dark"]  .text-secondary, html[data-theme="sunset"] .text-secondary,
html[data-theme="dark"]  small.text-muted, html[data-theme="sunset"] small.text-muted {
    color: var(--iasa-muted) !important;
}

/* ---- Labels ---- */
html[data-theme="dark"]  label:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] label:not(.btn):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="dark"]  .form-label, html[data-theme="sunset"] .form-label,
html[data-theme="dark"]  .col-form-label, html[data-theme="sunset"] .col-form-label {
    color: var(--iasa-heading) !important;
}

/* ---- Links (skip buttons + dashboard action tiles) ----
   :not(.cf-btn) added — a Community button rendered as an <a> was being recoloured
   as a link here, so an <a class="cf-btn"> and a <button class="cf-btn"> sitting
   side by side in the same row came out in different colours on the dark and
   sunset site themes. No page-level rule can win this one back: with eight
   :not()s plus the attribute selector this is (0,9,2), and both declarations are
   !important, so specificity decides and no realistic local selector reaches it.
   The exclusion is the fix, and it is the same one community_polish.css:164 and
   community_theme_fixes.css:194 already make for exactly this reason. */
html[data-theme="dark"]  a:not(.btn):not(.cf-btn):not(.dr-act):not(.dr-card):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
html[data-theme="sunset"] a:not(.btn):not(.cf-btn):not(.dr-act):not(.dr-card):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
    color: var(--iasa-link) !important;
}

/* ---- Surfaces (frosted glass) ---- */
html[data-theme="dark"]  .card, html[data-theme="sunset"] .card,
html[data-theme="dark"]  .card-body, html[data-theme="sunset"] .card-body,
html[data-theme="dark"]  .modal-content, html[data-theme="sunset"] .modal-content,
html[data-theme="dark"]  .dropdown-menu, html[data-theme="sunset"] .dropdown-menu,
html[data-theme="dark"]  .list-group-item, html[data-theme="sunset"] .list-group-item {
    background-color: var(--iasa-surface) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
/* card/modal frames that hardcode a light glass — re-frost them */
html[data-theme="dark"]  .card, html[data-theme="sunset"] .card,
html[data-theme="dark"]  .modal-content, html[data-theme="sunset"] .modal-content {
    background: var(--iasa-glass-bg) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite) !important;
}

/* ---- Inputs ---- */
html[data-theme="dark"]  .form-control, html[data-theme="sunset"] .form-control,
html[data-theme="dark"]  .form-select, html[data-theme="sunset"] .form-select,
html[data-theme="dark"]  textarea, html[data-theme="sunset"] textarea,
html[data-theme="dark"]  input[type="text"], html[data-theme="sunset"] input[type="text"],
html[data-theme="dark"]  input[type="email"], html[data-theme="sunset"] input[type="email"],
html[data-theme="dark"]  input[type="password"], html[data-theme="sunset"] input[type="password"],
html[data-theme="dark"]  input[type="search"], html[data-theme="sunset"] input[type="search"],
html[data-theme="dark"]  input[type="tel"], html[data-theme="sunset"] input[type="tel"],
html[data-theme="dark"]  input[type="number"], html[data-theme="sunset"] input[type="number"] {
    background-color: var(--iasa-surface-2) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
html[data-theme="dark"]  .form-control::placeholder, html[data-theme="sunset"] .form-control::placeholder,
html[data-theme="dark"]  textarea::placeholder, html[data-theme="sunset"] textarea::placeholder,
html[data-theme="dark"]  input[type="text"]::placeholder, html[data-theme="sunset"] input[type="text"]::placeholder,
html[data-theme="dark"]  input[type="email"]::placeholder, html[data-theme="sunset"] input[type="email"]::placeholder,
html[data-theme="dark"]  input[type="password"]::placeholder, html[data-theme="sunset"] input[type="password"]::placeholder,
html[data-theme="dark"]  input[type="search"]::placeholder, html[data-theme="sunset"] input[type="search"]::placeholder,
html[data-theme="dark"]  input[type="tel"]::placeholder, html[data-theme="sunset"] input[type="tel"]::placeholder,
html[data-theme="dark"]  input[type="number"]::placeholder, html[data-theme="sunset"] input[type="number"]::placeholder {
    color: var(--iasa-muted) !important;
    opacity: .85;
}
/* visible focus ring (sky on dark, amber on sunset) */
html[data-theme="dark"]  .form-control:focus, html[data-theme="dark"]  .form-select:focus,
html[data-theme="dark"]  textarea:focus, html[data-theme="dark"]  input:focus {
    border-color: var(--iasa-sky) !important;
    box-shadow: 0 0 0 .2rem rgba(40, 186, 237, 0.22) !important;
}
html[data-theme="sunset"] .form-control:focus, html[data-theme="sunset"] .form-select:focus,
html[data-theme="sunset"] textarea:focus, html[data-theme="sunset"] input:focus {
    border-color: var(--iasa-link) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 170, 110, 0.22) !important;
}

/* ---- Tables ---- */
html[data-theme="dark"]  .table, html[data-theme="sunset"] .table {
    color: var(--iasa-text) !important;
    border-color: var(--iasa-border) !important;
}
html[data-theme="dark"]  .table > :not(caption) > * > *,
html[data-theme="sunset"] .table > :not(caption) > * > * {
    border-color: var(--iasa-border) !important;
}


/* ============================================================
   12. AUTH PAGES — REGISTER  (register.html)
   ------------------------------------------------------------
   register.html paints #section1 / #section2 as light blue glass
   (rgba(238,250,255,.70)) with navy/grey hardcoded text, plus an
   .otp-card white modal. Background/sky is the page's own — left
   untouched per task; only text/label/link + card/input glass.
   ============================================================ */
/* card shells
   -----------------------------------------------------------------
   NOTE THE :not(.auth-shell). These are BARE ID selectors, and
   #section1 / #section2 are not unique to register.html — login.html,
   account_deletion.html, corporate_register.html and
   adult_for_cancer_prevention_register.html all use the same ids.

   On login.html #section1 is not a card at all: it is the layout
   wrapper that CONTAINS the glass card (.form_container) and the
   "New to platform? Join here" link underneath it. Painting it as a
   surface drew a second bordered rectangle around both — visible on
   dark and dawn only, which is why it never showed in classic.

   Anything carrying .auth-shell is declaring "I am a wrapper, not a
   surface". Cheaper than renaming five templates' ids, and it fails
   in the safe direction: forget the class and you get the old
   double-box, not a broken card. */
html[data-theme="dark"]  #section1:not(.auth-shell), html[data-theme="sunset"] #section1:not(.auth-shell),
html[data-theme="dark"]  #section2:not(.auth-shell), html[data-theme="sunset"] #section2:not(.auth-shell),
html[data-theme="dark"]  #section2:not(.auth-shell) .form-container, html[data-theme="sunset"] #section2:not(.auth-shell) .form-container {
    background: var(--iasa-glass-bg) !important;
    border: 1px solid var(--iasa-glass-border) !important;
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite) !important;
    color: var(--iasa-text) !important;
}
/* headings + labels */
html[data-theme="dark"]  #section1 h2, html[data-theme="sunset"] #section1 h2,
html[data-theme="dark"]  #section2 h2, html[data-theme="sunset"] #section2 h2 { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  #section1 .col-form-label, html[data-theme="sunset"] #section1 .col-form-label,
html[data-theme="dark"]  #section2 .col-form-label, html[data-theme="sunset"] #section2 .col-form-label,
html[data-theme="dark"]  #section1 label, html[data-theme="sunset"] #section1 label,
html[data-theme="dark"]  #section2 label, html[data-theme="sunset"] #section2 label { color: var(--iasa-heading) !important; }
/* helper / hint text (navy-grey #6c757d / #4a5568 inline) */
html[data-theme="dark"]  #section2 #contactHint, html[data-theme="sunset"] #section2 #contactHint,
html[data-theme="dark"]  #section2 .text-end p, html[data-theme="sunset"] #section2 .text-end p,
html[data-theme="dark"]  #section1 p.fs-custom, html[data-theme="sunset"] #section1 p.fs-custom,
html[data-theme="dark"]  #section2 small:not(.text-danger), html[data-theme="sunset"] #section2 small:not(.text-danger) {
    color: var(--iasa-muted) !important;
}
/* inputs / selects / textarea in the register cards */
html[data-theme="dark"]  #section1 .form-control, html[data-theme="sunset"] #section1 .form-control,
html[data-theme="dark"]  #section1 .form-select, html[data-theme="sunset"] #section1 .form-select,
html[data-theme="dark"]  #section2 .form-control, html[data-theme="sunset"] #section2 .form-control,
html[data-theme="dark"]  #section2 .form-select, html[data-theme="sunset"] #section2 .form-select,
html[data-theme="dark"]  #section2 textarea, html[data-theme="sunset"] #section2 textarea {
    background-color: var(--iasa-surface-2) !important;
    border-color: var(--iasa-border) !important;
    color: var(--iasa-text) !important;
}
/* the readonly date fields force inline color:#000 via JS — keep readable */
html[data-theme="dark"]  #section1 .p-cabs, html[data-theme="sunset"] #section1 .p-cabs,
html[data-theme="dark"]  #section2 .p-cabs, html[data-theme="sunset"] #section2 .p-cabs { color: var(--iasa-text) !important; }
/* eye-icon input-group plate */
html[data-theme="dark"]  #section2 .input-group-text, html[data-theme="sunset"] #section2 .input-group-text {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-muted) !important;
}
/* terms checkbox label + "Terms and Conditions" link */
html[data-theme="dark"]  #section2 .form-check-label, html[data-theme="sunset"] #section2 .form-check-label { color: var(--iasa-text) !important; }
/* OTP overlay card (white) → dark glass surface */
html[data-theme="dark"]  .otp-card, html[data-theme="sunset"] .otp-card {
    background: var(--iasa-surface) !important; color: var(--iasa-text) !important;
}
html[data-theme="dark"]  .otp-card h3, html[data-theme="sunset"] .otp-card h3 { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  .otp-card p, html[data-theme="sunset"] .otp-card p { color: var(--iasa-muted) !important; }
html[data-theme="dark"]  .otp-card .otp-inputs input, html[data-theme="sunset"] .otp-card .otp-inputs input,
html[data-theme="dark"]  .otp-card .otp-resend, html[data-theme="sunset"] .otp-card .otp-resend {
    color: var(--iasa-text) !important;
}
html[data-theme="dark"]  .otp-card .otp-inputs input, html[data-theme="sunset"] .otp-card .otp-inputs input {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important;
}
html[data-theme="dark"]  .otp-btn-ghost, html[data-theme="sunset"] .otp-btn-ghost {
    background: var(--iasa-surface-2) !important; color: var(--iasa-text) !important;
}
/* Terms modal body inherits the global .modal-content glass + text rules above. */


/* ============================================================
   13. AUTH PAGES — PHONE REGISTER  (phone_register.html)
   ------------------------------------------------------------
   .phone-card is light blue glass with navy/grey text + white OTP
   boxes. Background/sky is the page's own — left untouched.
   ============================================================ */
html[data-theme="dark"]  .phone-card, html[data-theme="sunset"] .phone-card {
    background: var(--iasa-glass-bg) !important;
    border: 1px solid var(--iasa-glass-border) !important;
    box-shadow: var(--iasa-shadow), inset 0 1px 0 var(--iasa-glass-hilite) !important;
    color: var(--iasa-text) !important;
}
html[data-theme="dark"]  .phone-card h4, html[data-theme="sunset"] .phone-card h4 { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  .phone-card label, html[data-theme="sunset"] .phone-card label { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  .phone-card .text-muted, html[data-theme="sunset"] .phone-card .text-muted { color: var(--iasa-muted) !important; }
/* the framed phone-input group (forced white) + its inner input */
html[data-theme="dark"]  .phone-card .phone-input-group, html[data-theme="sunset"] .phone-card .phone-input-group {
    background: var(--iasa-surface-2) !important;
}
html[data-theme="dark"]  .phone-card .phone-input-group input, html[data-theme="sunset"] .phone-card .phone-input-group input {
    color: var(--iasa-text) !important; background: transparent !important;
}
/* OTP boxes (white) → dark surface + light digits */
html[data-theme="dark"]  .phone-card .otp-box, html[data-theme="sunset"] .phone-card .otp-box {
    background: var(--iasa-surface-2) !important; color: var(--iasa-text) !important; border-color: var(--iasa-border) !important;
}
/* "Back to login" link inherits the global link rule; ensure it reads */
html[data-theme="dark"]  .phone-card a, html[data-theme="sunset"] .phone-card a { color: var(--iasa-link) !important; }


/* ============================================================
   14. AUTH PAGES — LOGIN + JOIN text/helper polish
   ------------------------------------------------------------
   The login .form_container + join .join-card glass/fields are
   already recolored in section "LOGIN / SIGN-UP" above. These add
   the remaining hard-to-read TEXT bits flagged in the audit.
   ============================================================ */
/* --- LOGIN (login.html) --- */
/* "Keep me signed in on this device" (inline color:#0C204D) */
html[data-theme="dark"]  #loginForm label[style*="0C204D"], html[data-theme="sunset"] #loginForm label[style*="0C204D"],
html[data-theme="dark"]  #remember_me + *, html[data-theme="sunset"] #remember_me + *,
html[data-theme="dark"]  .form_container label, html[data-theme="sunset"] .form_container label {
    color: var(--iasa-text) !important;
}
/* form col-form-label "Email" / "Password" headings → heading colour */
html[data-theme="dark"]  .form_container .col-form-label, html[data-theme="sunset"] .form_container .col-form-label {
    color: var(--iasa-heading) !important;
}
/* "Forgot password?" + "New to platform? Join here" + section links (.link) */
html[data-theme="dark"]  .form_container a.link, html[data-theme="sunset"] .form_container a.link,
html[data-theme="dark"]  #signup-link, html[data-theme="sunset"] #signup-link,
html[data-theme="dark"]  a.link.mob-font, html[data-theme="sunset"] a.link.mob-font {
    color: var(--iasa-link) !important;
}
/* "or sign in with" divider label + helper <small>/<p> inside the card */
html[data-theme="dark"]  .form_container .social-divider span, html[data-theme="sunset"] .form_container .social-divider span,
html[data-theme="dark"]  .form_container p, html[data-theme="sunset"] .form_container p,
html[data-theme="dark"]  .form_container small, html[data-theme="sunset"] .form_container small {
    color: var(--iasa-muted) !important;
}
/* OTP / reset boxes in login sections (white) → dark surface */
html[data-theme="dark"]  .otp-container .form-control, html[data-theme="sunset"] .otp-container .form-control,
html[data-theme="dark"]  #phone-auth-panel .phone-input-group, html[data-theme="sunset"] #phone-auth-panel .phone-input-group,
html[data-theme="dark"]  #phone-auth-panel .otp-box, html[data-theme="sunset"] #phone-auth-panel .otp-box {
    background: var(--iasa-surface-2) !important; color: var(--iasa-text) !important; border-color: var(--iasa-border) !important;
}
html[data-theme="dark"]  #phone-auth-panel .phone-input-group input, html[data-theme="sunset"] #phone-auth-panel .phone-input-group input {
    color: var(--iasa-text) !important; background: transparent !important;
}

/* --- JOIN (join.html) --- */
/* headings + sub-copy */
html[data-theme="dark"]  .join-h, html[data-theme="sunset"] .join-h { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  .join-sub, html[data-theme="sunset"] .join-sub { color: var(--iasa-muted) !important; }
/* field labels + hints + helper foot */
html[data-theme="dark"]  .join-label, html[data-theme="sunset"] .join-label { color: var(--iasa-heading) !important; }
html[data-theme="dark"]  .join-hint, html[data-theme="sunset"] .join-hint,
html[data-theme="dark"]  .pwd-meter-label, html[data-theme="sunset"] .pwd-meter-label,
html[data-theme="dark"]  .join-recaptcha-legal, html[data-theme="sunset"] .join-recaptcha-legal {
    color: var(--iasa-muted) !important;
}
/* "Already have an account? Log in" foot + the disclaimer line */
html[data-theme="dark"]  .join-foot, html[data-theme="sunset"] .join-foot { color: var(--iasa-text) !important; }
/* inputs / selects / method+type cards in the wizard */
html[data-theme="dark"]  .join-input, html[data-theme="sunset"] .join-input {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-text) !important;
}
html[data-theme="dark"]  .join-input::placeholder, html[data-theme="sunset"] .join-input::placeholder { color: var(--iasa-muted) !important; }
html[data-theme="dark"]  select.join-input, html[data-theme="sunset"] select.join-input { background: var(--iasa-surface-2) !important; }
html[data-theme="dark"]  .method-btn, html[data-theme="sunset"] .method-btn,
html[data-theme="dark"]  .type-card, html[data-theme="sunset"] .type-card {
    background: var(--iasa-surface-2) !important; border-color: var(--iasa-border) !important; color: var(--iasa-text) !important;
}
/* OTP mini boxes (white) → dark surface */
html[data-theme="dark"]  .otp-mini input, html[data-theme="sunset"] .otp-mini input {
    background: var(--iasa-surface-2) !important; color: var(--iasa-text) !important; border-color: var(--iasa-border) !important;
}