/* ============================================================
   HAXD 2027 — Dark Mode Readability Overrides
   Loaded LAST so it wins the cascade over per-component rules.
   Goal: in dark mode, all body text and standalone icons render
   white / near-white and stay readable on hover, across every page.
   Intentionally colored surfaces (buttons, badges, brand chips)
   keep their backgrounds — only their foreground is forced light,
   which is already correct on those colored backgrounds.
   ============================================================ */

/* ---- 1. Base text: force readable near-white everywhere ---- */
html[data-theme="dark"],
html[data-theme="dark"] body {
  color: #FFFFFF !important;
}

/* Headings, paragraphs, lists, spans, labels, table cells, list groups */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd,
html[data-theme="dark"] span:not(.badge):not([class*="bg-"]),
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .lead {
  color: #FFFFFF !important;
}

/* Bootstrap / custom muted + secondary text — the usual "invisible" culprits.
   Slightly softened white so it still reads as secondary but stays legible. */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-light-custom,
html[data-theme="dark"] .small,
html[data-theme="dark"] .text-muted * ,
html[data-theme="dark"] small.text-muted {
  color: #E8E8E8 !important;
}

/* ---- 2. Links ---- */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: #FFFFFF !important;
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
  color: #FFD9B8 !important; /* warm highlight so hover is still perceptible */
  text-decoration: underline;
}

/* ---- 3. Icons: force white standalone icons ---- */
/* Bootstrap Icons and generic <i>/<svg> used as glyphs go white by default. */
html[data-theme="dark"] .bi,
html[data-theme="dark"] i[class*="bi-"],
html[data-theme="dark"] .icon,
html[data-theme="dark"] svg.icon {
  color: #FFFFFF !important;
}

/* Icon "chips"/wraps that carry their own colored (gradient) background:
   keep the icon white — already correct — and leave the background alone.
   Listed explicitly so hover states below can override cleanly. */
html[data-theme="dark"] .topic-icon-wrap i,
html[data-theme="dark"] .git-card-icon,
html[data-theme="dark"] .sub-type-icon,
html[data-theme="dark"] .contact-icon,
html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .card-icon i,
html[data-theme="dark"] .cm-section-icon,
html[data-theme="dark"] .htl-dot {
  color: #FFFFFF !important;
}

/* ---- 4. Hover: keep text and icons white on hover everywhere ---- */
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .card:hover *,
html[data-theme="dark"] .content-card:hover,
html[data-theme="dark"] .content-card:hover *,
html[data-theme="dark"] .hover-card:hover,
html[data-theme="dark"] .hover-card:hover *,
html[data-theme="dark"] .research-topic-card:hover,
html[data-theme="dark"] .research-topic-card:hover *,
html[data-theme="dark"] .sub-type-card:hover,
html[data-theme="dark"] .sub-type-card:hover *,
html[data-theme="dark"] .git-card:hover,
html[data-theme="dark"] .git-card:hover *,
html[data-theme="dark"] .contact-card:hover,
html[data-theme="dark"] .contact-card:hover * {
  color: #FFFFFF !important;
}

/* Icon chips that fill with a gradient on hover already show a white glyph —
   reassert white so no lower-specificity rule dims it. */
html[data-theme="dark"] .research-topic-card:hover .topic-icon-wrap i,
html[data-theme="dark"] .sub-type-card:hover .sub-type-icon,
html[data-theme="dark"] .git-card:hover .git-card-icon,
html[data-theme="dark"] .contact-card:hover .contact-icon,
html[data-theme="dark"] .feature-icon:hover {
  color: #FFFFFF !important;
}

/* ---- 5. Preserve intentionally colored foregrounds ----
   Colored-background badges and buttons must keep white text (readable),
   which the rules above already guarantee. Outline buttons need their
   colored label back so they remain visible on the dark background. */
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-light {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
  color: #FFFFFF !important;
}

/* Badges: keep their own colored/dark text where the badge background is
   light (e.g. bg-warning is light). Only badges with dark backgrounds need
   white — Bootstrap already handles contrast, so leave badge text as-is. */
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.text-dark {
  color: #1A1410 !important; /* dark text stays on the light warning badge */
}

/* ---- 6. Venue page: sections that had light-only backgrounds inline ---- */
html[data-theme="dark"] .gallery-section {
  background: linear-gradient(180deg, #211C16 0%, #16130F 100%) !important;
}
html[data-theme="dark"] .note-callout {
  background: #14201d !important;
  border-color: #1f4d43 !important;
  border-left-color: #10b981 !important;
}