/* ==========================================================================
   JA Athena — DARK MODE
   Light mode is the original design and is NOT modified. Every rule here is
   scoped under the dark hook (html[data-theme="dark"] / html.t4-dark /
   [data-bs-theme="dark"]) and loaded LAST so it wins equal-specificity ties.
   Dark MIRRORS light — same relationships, never adds contrast light lacks.
   Brand accent (--color-primary #204397) is KEPT.
   ========================================================================== */

/* ---- 1) Palette + TOKEN REMAP (the big lever) --------------------------- */
html[data-theme="dark"] {
  /* Dark palette — one source of truth (blue-leaning to mirror the brand). */
  --dm-bg:        #0f1623;
  --dm-band:      #131c2b;
  --dm-surface:   #18222f;
  --dm-surface-2: #202c3d;
  --dm-border:    #2a3850;
  --dm-field-border: #3a4a64;
  --dm-text:      #c3ccda;
  --dm-text-muted:#8a96a8;
  --dm-heading:   #eef2f8;

  /* Brand accent — KEEP primary; a lighter hover for dark surfaces. */
  --dm-accent:       #4d7cff;
  --dm-accent-hover: #6f97ff;

  /* Remap the template's own JA color TOKENS — fixes whole swaths at once. */
  --body-bg-color:   var(--dm-bg);
  --body-text-color: var(--dm-text);
  --heading-color:   var(--dm-heading);
  --border-color:    var(--dm-border);
  --color-light:     var(--dm-band);   /* .bg-light / light sections (text-light restored below) */
  /* --color-primary kept (brand). --color-secondary kept. */

  /* Links + nav — brand blue (#204397) is too dark on the dark page; lift to a
     readable accent for TEXT uses (solid buttons keep --color-primary). */
  --body-link-color:          var(--dm-accent);
  --body-link-hover-color:     #e2748a;
  --mainnav-link-color:        var(--dm-text);
  --mainnav-link-hover-color:  var(--dm-accent);
  --mainnav-link-active-color: var(--dm-accent);
  /* Bootstrap nav/link hover vars used by secondary menus (off-canvas, topbar,
     footer-area) and content links — lift brand blue to a readable accent. */
  --t4-link-color:             var(--dm-accent);
  --t4-link-hover-color:       var(--dm-accent-hover);
  --t4-nav-link-hover-color:   var(--dm-accent);
  --link-hover-color:          var(--dm-accent);
  /* Footer zone: mirror LIGHT's 2-colour separation. In light the footer navy
     (#131e3c) is the DARKER zone under the lighter (white) content, and the CTA
     straddles that crisp boundary. In dark, keeping the light navy makes the
     footer LIGHTER than the page (#0f1623) — inverted + muddy. Re-point it to a
     deep navy clearly BELOW the content so the same boundary reads cleanly
     through the CTA. Keep the existing light footer hover. */
  --footer-bg-color:           #090d18;

  /* Bootstrap-as-T4 tokens (data-bs-theme=dark also sets these — beat them). */
  --t4-body-bg:        var(--dm-bg);
  --t4-body-bg-rgb:    15, 22, 35;
  --t4-body-color:     var(--dm-text);
  --t4-body-color-rgb: 195, 204, 218;
  --t4-border-color:   var(--dm-border);
  --t4-light:          var(--dm-band);
  --t4-light-rgb:      19, 28, 43;
  --t4-secondary-bg:   var(--dm-surface);
  --t4-tertiary-bg:    var(--dm-surface-2);
  --t4-emphasis-color: var(--dm-heading);
  --t4-heading-color:  var(--dm-heading);

  color-scheme: dark;
}

/* ---- 2) Page foundation -------------------------------------------------- */
html[data-theme="dark"] body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] .body-wrap,
html[data-theme="dark"] #t4-main-body {
  background-color: var(--dm-bg);
}
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 {
  color: var(--dm-heading);
}

/* ==========================================================================
   TOGGLE BUTTON — the ONE block visible in BOTH modes (icon swap is scoped).
   Solid header → transparent background, inherit header text color.
   ========================================================================== */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 .25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, color .2s ease;
}
.t4-theme-toggle:hover {
  background: rgba(127, 140, 160, .14);
}
.t4-theme-toggle svg { display: block; width: 20px; height: 20px; }
/* Cross-fade the two icons; stack them in the same cell. */
.t4-theme-toggle__moon,
.t4-theme-toggle__sun {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
/* Light mode: show the moon (click → go dark). */
.t4-theme-toggle__moon { opacity: 1; }
.t4-theme-toggle__sun  { opacity: 0; }
/* Dark mode: show the sun (click → go light). */
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; }
html[data-theme="dark"] .t4-theme-toggle__sun  { opacity: 1; }

/* ==========================================================================
   3) COMPONENTS — scoped under html[data-theme="dark"]. Dark MIRRORS light.
   ========================================================================== */

/* ---- Dual --color-light trap: restore LIGHT text utilities -------------- */
/* --color-light is remapped to a dark band (for .bg-light backgrounds), but it
   also drives .text-light / .btn-outline-light TEXT — those must stay light,
   especially over the kept-blue masthead. */
html[data-theme="dark"] .text-light { color: var(--dm-heading) !important; }
html[data-theme="dark"] .btn-outline-light {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:focus {
  color: #131c2b;
  background-color: #f1f5f9;
  border-color: #f1f5f9;
}

/* ---- Brand-blue TEXT lift (low contrast on dark page) ------------------- */
html[data-theme="dark"] .text-primary { color: var(--dm-accent) !important; }
html[data-theme="dark"] a.text-primary:hover { color: var(--dm-accent-hover) !important; }
html[data-theme="dark"] .btn-outline-primary {
  color: var(--dm-accent);
  border-color: var(--dm-accent);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
}
/* Outline-primary button sitting ON a kept brand panel (.bg-secondary rose CTA)
   is white/white-border in light — the global accent remap makes it unreadable
   accent-on-rose (1.25). Mirror light: keep it white on the coloured panel. */
html[data-theme="dark"] .bg-secondary .btn-outline-primary,
html[data-theme="dark"] .bg-primary .btn-outline-primary,
html[data-theme="dark"] .feature-inner.bg-secondary .btn-outline-primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255, 255, 255, .85) !important;
}
html[data-theme="dark"] .bg-secondary .btn-outline-primary:hover,
html[data-theme="dark"] .bg-secondary .btn-outline-primary:focus,
html[data-theme="dark"] .feature-inner.bg-secondary .btn-outline-primary:hover,
html[data-theme="dark"] .feature-inner.bg-secondary .btn-outline-primary:focus {
  color: var(--color-secondary) !important;
  -webkit-text-fill-color: var(--color-secondary) !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

/* ---- .bg-white literal leak (white panel → surface) -------------------- */
/* NOTE: do NOT blanket-override .text-dark — it is correct (dark) on bright
   semantic badges/buttons (.bg-info/.bg-warning + .text-dark), same as light. */
html[data-theme="dark"] .bg-white { background-color: var(--dm-surface) !important; }

/* ---- Light/dark themed buttons that broke on the dark page -------------- */
html[data-theme="dark"] .btn-outline-dark {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus {
  color: var(--dm-bg);
  background-color: var(--dm-text);
  border-color: var(--dm-text);
}
html[data-theme="dark"] .btn-light {
  color: var(--dm-heading);
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
  color: var(--dm-heading);
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-link { color: var(--dm-accent); }
html[data-theme="dark"] .btn-link:hover { color: var(--dm-accent-hover); }

/* ---- Blog article "Read more" button (.readmore .btn-readmore) keeps the
   brand-blue text (#204397) → unreadable on the dark page. Lift to the readable
   accent, exactly like the other brand-blue text links do. Light untouched. */
/* source winner is a deep chain `.blog-list .item-readmore p.readmore a` (0,3,2)
   → force past it (dark-scoped, single text color, light untouched). The visible
   text is painted via -webkit-text-fill-color (defaults to currentColor), so set
   both or the rendered glyphs keep the brand blue even when `color` changes. */
html[data-theme="dark"] .readmore .btn-readmore,
html[data-theme="dark"] .item-readmore .btn-readmore,
html[data-theme="dark"] .btn-readmore {
  color: var(--dm-accent) !important;
  -webkit-text-fill-color: var(--dm-accent) !important;
}
html[data-theme="dark"] .readmore .btn-readmore:hover,
html[data-theme="dark"] .readmore .btn-readmore:focus,
html[data-theme="dark"] .item-readmore .btn-readmore:hover,
html[data-theme="dark"] .btn-readmore:hover,
html[data-theme="dark"] .btn-readmore:focus {
  color: var(--dm-accent-hover) !important;
  -webkit-text-fill-color: var(--dm-accent-hover) !important;
}

/* ---- "More articles" list (.items-more .nav-tabs a): light rest is a faint
   #F8FAFC pill (near-invisible on white) → a subtle elevated pill on dark; the
   light hover is a strong #333 chip w/ white text → mirror with an accent chip. */
html[data-theme="dark"] .items-more .nav-tabs > li > a {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .items-more .nav-tabs > li > a:hover,
html[data-theme="dark"] .items-more .nav-tabs > li > a:active,
html[data-theme="dark"] .items-more .nav-tabs > li > a:focus {
  background: var(--dm-accent);
  color: #fff;
}

/* ---- <mark> / highlight — keep a light highlight chip in dark ----------- */
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
  background-color: #f4e7a1;
  color: #1a1a1a;
}

/* ---- Subtle bands (mirror light's #F8FAFC / bg-gray / highlight) -------- */
html[data-theme="dark"] .t4-topbar,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray {
  background-color: var(--dm-band) !important;
}
/* NOTE: .section-highlight is a KEPT brand-primary band (template sets
   background:var(--color-primary) + white text) — NOT a subtle grey band.
   It's handled by the brand-panel mirror block below, same as .bg-primary. */

/* ---- KEEP by design: blue masthead, navy footer ------------------------ */
html[data-theme="dark"] .ja-masthead { background-color: var(--color-primary); }
html[data-theme="dark"] .t4-masthead .breadcrumb li a,
html[data-theme="dark"] .ja-masthead .page-title,
html[data-theme="dark"] .ja-masthead .page-description { color: #fff; }

/* ---- Title / tag / heading links — REST white, HOVER lifted accent ------ */
/* Light: dark heading rest → brand-blue hover (great on white). On the dark
   page brand blue (#204397/#1a3679) is unreadable on hover; lift to --dm-accent. */
html[data-theme="dark"] .item-title a,
html[data-theme="dark"] .blog-item-title a,
html[data-theme="dark"] .page-header h2 a,
html[data-theme="dark"] .list-title a,
html[data-theme="dark"] h2 a,
html[data-theme="dark"] h3 a,
html[data-theme="dark"] h4 a { color: var(--dm-heading); }
html[data-theme="dark"] .item-title a:hover,
html[data-theme="dark"] .item-title a:focus,
html[data-theme="dark"] .item-title a:active,
html[data-theme="dark"] .blog-item-title a:hover,
html[data-theme="dark"] .list-title a:hover,
html[data-theme="dark"] .page-header h2 a:hover,
html[data-theme="dark"] h2 a:hover,
html[data-theme="dark"] h3 a:hover,
html[data-theme="dark"] h4 a:hover,
html[data-theme="dark"] .tagspopular ul > li > a:hover,
html[data-theme="dark"] .tagspopular ul > li > a:focus,
html[data-theme="dark"] .com-tags-tag .list-group .list-group-item a:hover,
html[data-theme="dark"] .all-tags li a:hover { color: var(--dm-accent); }
/* mod_articles_category title link (news module on home) — rest is the white
   heading (correct), but hover falls to brand blue #204397 → lift like the rest.
   Painted via -webkit-text-fill-color, so set both. */
html[data-theme="dark"] a.mod-articles-category-title:hover,
html[data-theme="dark"] a.mod-articles-category-title:focus,
html[data-theme="dark"] .mod-articles-category-title a:hover,
html[data-theme="dark"] .mod-articles-category-title a:focus {
  color: var(--dm-accent) !important;
  -webkit-text-fill-color: var(--dm-accent) !important;
}
/* Category-name / category-navigation links (article category label, footer
   category widget) hover to brand blue #204397 → unreadable on dark; lift to the
   accent like every other title/tag hover. Guard against .btn-styled links. */
html[data-theme="dark"] [class*="category"] a:not(.btn):hover,
html[data-theme="dark"] [class*="category"] a:not(.btn):focus,
html[data-theme="dark"] .category-name a:hover,
html[data-theme="dark"] .category-name a:focus {
  color: var(--dm-accent) !important;
  -webkit-text-fill-color: var(--dm-accent) !important;
}
/* topbar / utility nav hover (light uses a dark rose — unreadable on dark) */
html[data-theme="dark"] .t4-topbar .nav > li > a:hover,
html[data-theme="dark"] .t4-topbar .nav > li > a:focus { color: var(--dm-accent); }
/* generic Bootstrap .nav-link hover fallback (secondary menus on bands) —
   excludes the navy footer (kept) which has its own light hover. */
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link:focus { color: var(--dm-accent); }
html[data-theme="dark"] .t4-footnav .nav-link:hover,
html[data-theme="dark"] .t4-footnav a:hover { color: #fff; }

/* ---- Article detail: muted lead paragraphs + author bio band ----------- */
/* Light styles the intro/italic lead as soft gray #4F4F4F (~8:1 on white);
   mirror it as a soft light-gray on the dark page. Selectors match the source
   chain (.layout-default-sublayout .detail-page .content-article …, 0,4,1). */
html[data-theme="dark"] .layout-default-sublayout .detail-page .content-article p:not(:last-child),
html[data-theme="dark"] .layout-default-sublayout .detail-page .content-article .text-style-italic {
  color: var(--dm-text);
}
/* Only the article-footer author bio (.author-block-post-detail) is a real
   surface in light (bg #F8FAFC); the profile-page/listing .author-block is
   TRANSPARENT in light — banding it added a 2nd background. Scope to the card. */
html[data-theme="dark"] .author-block.author-block-post-detail {
  background-color: var(--dm-band) !important;
}
html[data-theme="dark"] .author-block-post-detail .author-other-info .author-about-me,
html[data-theme="dark"] .author-block-post-detail .author-other-info .author-phone,
html[data-theme="dark"] .author-block-post-detail .author-other-info .author-address,
html[data-theme="dark"] .detail-block .author-other-info .author-about-me { color: var(--dm-text); }

/* ---- Home: features / video / play button / carousel dots -------------- */
html[data-theme="dark"] .features-item,
html[data-theme="dark"] .features-item-inner,
html[data-theme="dark"] .features-text {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] .features-item .description,
html[data-theme="dark"] .features-text .description,
html[data-theme="dark"] .description { color: var(--dm-text); }
html[data-theme="dark"] .btn-play { background-color: var(--dm-surface); color: var(--dm-heading); }
html[data-theme="dark"] .owl-dot { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] .owl-dot.active { background-color: var(--color-primary) !important; }

/* ---- Kept brand panels (.bg-primary / .bg-secondary) --------------------
   The panel background IS the brand colour in BOTH modes, so every piece of
   content inside must MIRROR light — dark must not box the inner surfaces,
   grey the white headings/descriptions, or hijack the title-hover to the
   accent. Neutralise the generic dark overrides so light's own rules show.
   (blue "graduating" / rose "A Better World Together" / about-us stats etc.) */
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) {
  --heading-color: #fff;   /* headings + .link-heading base → white (light) */
  --dm-heading:    #fff;
  /* dividers inside the panel are faint white in light (rgba 255/.1); the global
     --dm-border/--border-color remap turns them navy → re-assert the light tone
     so list-item / section borders mirror light. */
  --border-color:    rgba(255, 255, 255, .1);
  --dm-border:       rgba(255, 255, 255, .1);
  --t4-border-color: rgba(255, 255, 255, .1);
}
/* inner content wrappers keep light's transparent bg + inherit the panel's
   own text tone (some panels are full-white, some 50%-white) */
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .features-item,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .features-item-inner,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .features-text {
  background-color: transparent !important;
  color: inherit;
}
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .features-item .description,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .description { color: inherit; }
/* title-link hover → the panel's own light hover colour, not the dm accent
   (structure is <h2><a.link-heading>, so h2 a:hover was stealing it) */
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) :is(h1,h2,h3,h4,h5,h6) a:hover,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) :is(h1,h2,h3,h4,h5,h6) a:focus,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .link-heading:hover,
html[data-theme="dark"] :is(.bg-primary, .bg-secondary, .section-highlight) .link-heading:focus {
  color: var(--body-link-hover-color);
  -webkit-text-fill-color: var(--body-link-hover-color);
}

/* ---- bg-image sections — darken with an overlay (mirror light tone) -----
   ONLY sections that actually paint a background image. .cta-overlap has NO
   section background (the home CTA is acm-cta.style-1: transparent section, a
   solid bg-primary panel + tiny decor PNGs on the panel corners) — adding the
   overlay there just paints a translucent dark rectangle over the page bg,
   which reads as a mismatched band. So .cta-overlap is intentionally excluded. */
html[data-theme="dark"] .acm-hero.style-1,
html[data-theme="dark"] .features-img,
html[data-theme="dark"] .features-background {
  position: relative;
}
html[data-theme="dark"] .acm-hero.style-1::after,
html[data-theme="dark"] .features-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, .45);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] .acm-hero.style-1 > *,
html[data-theme="dark"] .features-background > * { position: relative; z-index: 1; }

/* ---- Pagination (white card → surface) --------------------------------- */
html[data-theme="dark"] .pagination .page-link {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
  border-color: var(--dm-border);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background-color: var(--dm-band);
  color: var(--dm-text-muted);
}

/* ---- Megamenu dropdown panel ------------------------------------------- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .mega-dropdown-menu,
html[data-theme="dark"] .t4-megamenu .megamenu > li > .nav-child {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a,
html[data-theme="dark"] .t4-megamenu .nav-child li > a { color: var(--dm-text); }
html[data-theme="dark"] .t4-megamenu .dropdown-menu li > a:hover,
html[data-theme="dark"] .t4-megamenu .nav-child li > a:hover { color: var(--dm-accent); }
/* ACTIVE/current dropdown child (the flat rule above greyed it) — mirror light's
   active highlight (#0a58ca via --mainnav-link-active-color, remapped to accent). */
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.active > a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.current > a,
html[data-theme="dark"] .t4-megamenu .nav-child li.active > a,
html[data-theme="dark"] .t4-megamenu .nav-child li.current > a { color: var(--mainnav-link-active-color); }
html[data-theme="dark"] .t4-megamenu .module-title,
html[data-theme="dark"] .t4-megamenu .mega-col-nav .module-title { color: var(--dm-heading); }

/* ---- Off-canvas panel + drilldown (match source chains 0,4,0) ----------- */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header { background-color: var(--dm-band); }
/* close button (light circle + dark glyph → dark chip + light glyph) */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close { background-color: var(--dm-surface-2); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover { background-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span { color: var(--dm-text); }
/* nav links (rest = --body-text-color already remapped; this re-states for clarity) */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link { color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus { color: var(--dm-accent); }
/* drilldown sub-menu arrow — light circle (#f1f5f9) → dark chip */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus {
  background-color: var(--dm-border);
  color: var(--dm-heading);
}
/* menu-item dividers are literal 1px #eee (faint on white, bright lines on the
   dark surface) — route to the border token, mirror light. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-item,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item .dropdown-menu .nav-item {
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back {
  border-top-color: var(--dm-border);
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after { color: var(--dm-text); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle.is-active::after { color: var(--dm-accent); }
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle { background-color: transparent; }

/* ---- Forms ------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-accent);
  color: var(--dm-text);
  box-shadow: 0 0 0 .2rem rgba(77, 124, 255, .25);
}
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3ccda' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* floating-label ::after white bar behind the label */
html[data-theme="dark"] .form-floating > .form-control ~ label::after,
html[data-theme="dark"] .form-floating > .form-select ~ label::after {
  background-color: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .input-group-text {
  background-color: var(--dm-band);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
/* Typed-text color: the template's element-qualified `input.form-control`
   {color:#828282} (0,1,1) out-specifies the plain `.form-control` remap above
   (0,1,0 under the hook), so typed text stayed dim grey on every form page
   (login/register/profile/contact/search). Match the specificity. */
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] input.form-control:focus { color: var(--dm-text) !important; }
html[data-theme="dark"] input.form-control::placeholder { color: var(--dm-text-muted) !important; }
/* BS checkbox/radio: its bg resolves to the page color (--t4-body-bg → #0f1623)
   with a collapsed 0px border, so the unchecked control vanishes on the dark
   page (e.g. the required contact consent box). Give it a visible field. */
html[data-theme="dark"] .form-check-input {
  background-color: var(--dm-surface-2);
  border: 1px solid var(--dm-field-border);
}
html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- Typography surfaces: code / pre / blockquote / hr / tables --------- */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd {
  background-color: var(--dm-surface);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}
html[data-theme="dark"] blockquote {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] hr { border-color: var(--dm-border); color: var(--dm-border); }
html[data-theme="dark"] .table {
  --t4-table-color: var(--dm-text);
  --t4-table-bg: transparent;
  --t4-table-border-color: var(--dm-border);
  --t4-table-striped-color: var(--dm-text);
  --t4-table-striped-bg: rgba(255, 255, 255, .03);
  --t4-table-hover-color: var(--dm-heading);
  --t4-table-hover-bg: rgba(255, 255, 255, .05);
  color: var(--dm-text);
}

/* ---- Badges (light chip → surface) ------------------------------------- */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge-light {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* ---- Cards / module surfaces that are real white boxes ----------------- */
html[data-theme="dark"] .card {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
/* (no blanket .card color — colored cards .bg-primary/.bg-secondary keep their
   own text-white; plain cards inherit --body-text-color = --dm-text.) */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
  color: var(--dm-heading);
}

/* ---- Alerts (keep semantic tints, lift surface) ------------------------ */
html[data-theme="dark"] .alert {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ==========================================================================
   4) REVIEW FINDINGS — frontend-edit document + leftover surfaces
   ========================================================================== */

/* ---- Frontend-edit layout (com_users/com_content edit forms) ------------ */
html[data-theme="dark"] body.t4-edit-layout { background-color: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-edit-layout legend,
html[data-theme="dark"] .t4-edit-layout .control-label,
html[data-theme="dark"] .t4-edit-layout label { color: var(--dm-text); }
html[data-theme="dark"] .t4-edit-layout fieldset,
html[data-theme="dark"] fieldset.adminform { border-color: var(--dm-border); }
/* Choices.js select widget (used in profile edit) */
html[data-theme="dark"] .choices__inner {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .choices__list--dropdown,
html[data-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--dm-surface);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--dm-surface-2);
}
html[data-theme="dark"] .choices__list--single .choices__item,
html[data-theme="dark"] .choices__placeholder { color: var(--dm-text); }
/* Joomla media-field preview tile */
html[data-theme="dark"] .field-media-preview,
html[data-theme="dark"] .field-media-wrapper .field-media-preview {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
}
/* Joomla switcher (radio toggle) */
html[data-theme="dark"] .switcher .btn-group label.btn,
html[data-theme="dark"] fieldset.radio.btn-group label.btn,
html[data-theme="dark"] fieldset.switcher label {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .switcher .btn-group input:checked + label.btn,
html[data-theme="dark"] fieldset.radio.btn-group input:checked + label.btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- Smart-search "No Results Found" empty panel (white island) -------- */
html[data-theme="dark"] .com-finder__empty,
html[data-theme="dark"] #search-result-empty {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .com-finder__empty h2,
html[data-theme="dark"] .com-finder__empty .h2,
html[data-theme="dark"] #search-result-empty h2 { color: var(--dm-heading); }

/* ---- com_users login panel: source `.login-wrap`{background:#fff} blends into
   the white login page (no border). --dm-surface made a lighter box on the
   #0f1623 page ("2 backgrounds"). Mirror light: interior == PAGE bg → blends. */
html[data-theme="dark"] .login-wrap { background-color: var(--dm-bg); }
/* Text inputs on the login/registration CARD: light has input bg == card (both
   #fff — the field is defined only by its 2px primary border). Match the page bg
   so input == card == page, mirroring light. (Focus keeps its accent border.) */
html[data-theme="dark"] .login-wrap .form-control,
html[data-theme="dark"] .login-wrap .form-control:focus,
html[data-theme="dark"] .registration .form-control,
html[data-theme="dark"] .registration .form-control:focus {
  background-color: var(--dm-bg);
}
/* Reset/Remind card: source is a primary-framed WHITE box on the white page;
   dark never re-themed #fff → solid white island. Mirror: interior == page bg
   (blends), keep the primary frame. Inputs match too, with the field border. */
html[data-theme="dark"] .com-users-reset,
html[data-theme="dark"] .com-users-remind { background-color: var(--dm-bg); }
html[data-theme="dark"] .com-users-reset .form-control,
html[data-theme="dark"] .com-users-remind .form-control {
  background-color: var(--dm-bg);
  border-color: var(--dm-field-border) !important;
}
html[data-theme="dark"] .com-users-reset .form-control:focus,
html[data-theme="dark"] .com-users-remind .form-control:focus {
  background-color: var(--dm-bg);
  border-color: var(--dm-accent);
}

/* ---- off-canvas drilldown submenu panel: BS `.dropdown-menu`{background:#fff}
   is not reached by the megamenu/off-canvas-body remaps, so the mobile
   drilldown submenu opened as a white island under #c3ccda text (1.6:1). */
html[data-theme="dark"] .t4-off-canvas-body .dropdown-menu {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* ---- .btn-secondary --------------------------------------------------------
   It renders TWO ways in LIGHT depending on context:
   • The real app pages (com_users profile/registration/edit, com_finder,
     com_tags) render it as a WHITE GHOST/OUTLINE (white bg, rose #c8475b text,
     2px rose border). The default rule below mirrors that ghost on a dark
     surface and keeps the rose 2px outline (light's signature).
   • The base BS button (only shown in the typography demo's `.bd-example`)
     renders as a SOLID rose fill (#c8475b bg, white text) — mirrored separately. */
html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] .btn-secondary {
  --t4-btn-bg: var(--dm-surface-2);
  --t4-btn-border-color: #e2748a;
  --t4-btn-color: #e2748a;
  --t4-btn-hover-bg: var(--color-secondary);
  --t4-btn-hover-color: #fff;
  --t4-btn-hover-border-color: var(--color-secondary);
  background-color: var(--dm-surface-2) !important;
  border-color: #e2748a;
  color: #e2748a;
}
/* base/demo secondary = solid rose fill (mirror typography's light render) */
html[data-theme="dark"] .bd-example .btn.btn-secondary,
html[data-theme="dark"] .bd-example .btn-secondary {
  --t4-btn-bg: var(--color-secondary);
  --t4-btn-border-color: var(--color-secondary);
  --t4-btn-color: #fff;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary);
  color: #fff;
}
/* Login show-password EYE + WebAuthn PASSKEY button are base .btn-secondary →
   SOLID ROSE in light (#c8475b bg, #fff icon/text). The ghost rule above greyed
   them to dm-surface-2 + rose text (the ugly grey-black boxes). Restore solid
   rose to mirror light. (0,4,1 !important beats the 0,3,1 ghost rule.) */
html[data-theme="dark"] .btn.btn-secondary.input-password-toggle,
html[data-theme="dark"] .btn.btn-secondary.plg_system_webauthn_login_button {
  --t4-btn-bg: var(--color-secondary);
  --t4-btn-border-color: var(--color-secondary);
  --t4-btn-color: #fff;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !important;
}
html[data-theme="dark"] .btn.btn-secondary:hover,
html[data-theme="dark"] .btn.btn-secondary:focus {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary);
  color: #fff;
}

/* ---- .img-thumbnail (white frame on dark) ------------------------------ */
html[data-theme="dark"] .img-thumbnail {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* ---- Form validation tooltips + Joomla system alerts ------------------- */
html[data-theme="dark"] .form-control-feedback,
html[data-theme="dark"] .tooltip-inner {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] joomla-alert .joomla-alert,
html[data-theme="dark"] .joomla-alert,
html[data-theme="dark"] .alert-message {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* ---- Literal dark content text on dark surfaces (gray-700 / #212529 / #333) */
html[data-theme="dark"] .acm-features .features-item .description,
html[data-theme="dark"] .acm-features.style-3 .features-item .description {
  color: var(--dm-text);
}
/* article/blog byline name — #212529 (the masthead copy stays #fff: higher specificity) */
html[data-theme="dark"] .createdby [itemprop="name"],
html[data-theme="dark"] .createdby,
html[data-theme="dark"] .article-info__item,
html[data-theme="dark"] .article-info .createdby { color: var(--dm-text); }
/* form labels — #333 on the dark page */
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .contact label,
html[data-theme="dark"] form .control-label,
html[data-theme="dark"] .com-content-article label { color: var(--dm-text); }
/* card body text on band/surface cards */
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .card .card-text { color: var(--dm-text); }

/* ---- Literal #eee/#333 borders & decorations (faint-on-white in light →
   loud/invisible on dark; literal colors the token remap can't reach). ----- */
/* blog category-list: item divider + "Page N of M" counter pill (both 1px #eee) */
html[data-theme="dark"] .items-leading .blog-item,
html[data-theme="dark"] .com-content-category-blog__item.blog-item { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .counter,
html[data-theme="dark"] .com-content-category-blog__counter { border-color: var(--dm-border); }
/* our-videos: featured-item divider under the leading video (1px #eee) */
html[data-theme="dark"] .ja-videos-list-wrap { border-bottom-color: var(--dm-border); }
/* home news carousel: vertical divider between cards (::before 1px #eee bar) */
html[data-theme="dark"] .mod-article-slide .item-inner::before { background: var(--dm-border); }
/* blog byline decorative rule (::after #333 — visible line in light, gone on dark) */
html[data-theme="dark"] .article-aside .article-info .createdby::after { background: var(--dm-text-muted); }
/* single-article pull-quote: bg-white figure top/bottom #eee frame + #eee thumbtack
   watermark (subtle on white, loud on the dark surface) → step down to the border token */
html[data-theme="dark"] .layout-default-sublayout .detail-page .content-article .block-quote figure {
  border-top-color: var(--dm-border);
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .layout-default-sublayout .detail-page .content-article .block-quote .ic-thumbtack,
html[data-theme="dark"] .layout-default-sublayout .detail-page .content-article .block-quote .ic-thumbtack i {
  color: var(--dm-border);
}

/* ===== Wave-2 page fixes (profile / register / categories / tags / finder) === */

/* com_users PROFILE view: fieldset dividers are literal #eee (legend underline +
   dt/dd row rules) — faint on white, bright lines on dark. Route to the token. */
html[data-theme="dark"] .profile fieldset legend,
html[data-theme="dark"] .profile fieldset dt,
html[data-theme="dark"] .profile fieldset dd { border-bottom-color: var(--dm-border); }

/* com_users REGISTRATION: the whole form sits on a white `.registration` card
   (analog of the login-wrap fix), with literal fieldset chrome on top of it. */
html[data-theme="dark"] .com-users-registration.registration,
html[data-theme="dark"] .registration { background-color: var(--dm-bg) !important; }
html[data-theme="dark"] .registration fieldset { border-color: var(--dm-border); }
html[data-theme="dark"] .registration fieldset legend {
  background-color: var(--dm-bg);
  color: var(--dm-heading);
}
html[data-theme="dark"] .registration fieldset::before { background-color: var(--dm-border); }

/* com_content ALL-CATEGORIES: each category card is a literal #F8FAFC surface
   (title 1.07:1, desc 1.55:1 on it) with a literal #eee title divider. */
html[data-theme="dark"] .categories-list .com-content-categories__items .com-content-categories__item .item-inner {
  background-color: var(--dm-surface);
}
html[data-theme="dark"] .categories-list .page-header {
  border-top-color: var(--dm-border);
  border-bottom-color: var(--dm-border);
}

/* com_tags TAGGED-ITEMS: result rows are a white .list-group island; the title
   link + row divider out-specify the global remap (literal #eee divider). */
html[data-theme="dark"] .com-tags-tag .list-group-item,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item {
  background-color: transparent;
  color: var(--dm-text);
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a { color: var(--dm-heading); }
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:hover,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:focus,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:active { color: var(--dm-accent); }

/* com_finder SMART-SEARCH "Advanced Search" toggle (.btn.btn-secondary[data-bs-target="#advancedSearch"]).
   Light renders it as a BLUE ghost → SOLID-BLUE hover. In dark the btn-secondary
   ghost rule paints its :hover bg rose (!important) while the rest-state accent
   rule out-specifies the source :hover text/border → ugly rose-bg + blue-text +
   blue-border hover. Mirror light exactly: transparent+accent rest, solid brand
   fill + white on hover/focus/active. */
html[data-theme="dark"] .com-finder__search .input-group-append .btn[data-bs-target="#advancedSearch"],
html[data-theme="dark"] .com-finder__search .input-group-addon .btn[data-bs-target="#advancedSearch"] {
  background-color: transparent !important;
  color: var(--dm-accent);
  border-color: var(--dm-accent);
}
html[data-theme="dark"] .com-finder__search .input-group-append .btn[data-bs-target="#advancedSearch"]:hover,
html[data-theme="dark"] .com-finder__search .input-group-append .btn[data-bs-target="#advancedSearch"]:focus,
html[data-theme="dark"] .com-finder__search .input-group-append .btn[data-bs-target="#advancedSearch"]:active,
html[data-theme="dark"] .com-finder__search .input-group-addon .btn[data-bs-target="#advancedSearch"]:hover,
html[data-theme="dark"] .com-finder__search .input-group-addon .btn[data-bs-target="#advancedSearch"]:focus,
html[data-theme="dark"] .com-finder__search .input-group-addon .btn[data-bs-target="#advancedSearch"]:active {
  background-color: var(--color-primary) !important;
  color: #fff;
  border-color: var(--color-primary);
}
html[data-theme="dark"] .com-finder__results { border-top-color: var(--dm-border); }

/* ===== Wave-3 page fixes (about/alumni/author/featured/videos/offcanvas/offline) === */

/* ABOUT-US — ACM tab strip: inactive tab keeps brand-blue #204397 as TEXT
   (1.99:1) + literal #eee underline. Lift text to accent, route border to token.
   (hover/active already resolve to rose by the source rules — leave them.) */
html[data-theme="dark"] .acm-container-tabs .nav-tabs .nav-link {
  color: var(--dm-accent);
  border-bottom-color: var(--dm-border);
}

/* ALUMNI — acm-features style-5 is a side-by-side image+text block that is
   TRANSPARENT in light (blends on the page); the generic .features-item surface
   fill over-reaches onto it and paints a two-tone box light never had. */
html[data-theme="dark"] .acm-features.style-5 .features-item { background-color: transparent !important; }
/* style-6 list rows are likewise transparent in light (blend on page/band) — the
   generic .features-item surface fill over-reaches; mirror + route the #eee divider. */
html[data-theme="dark"] .acm-features.style-6 .features-item {
  background-color: transparent !important;
  border-color: var(--dm-border);
}
/* acm-stats column dividers are literal #eee (bright on the dark band). */
html[data-theme="dark"] .acm-stats.style-1 .stats-inner.col { border-left-color: var(--dm-border); }

/* AUTHOR listing — inner info panel is a literal #F8F9FC island (name 1.07:1)
   with a bright 2px #eee frame; re-surface to the card band + route the border. */
html[data-theme="dark"] .author-page .author-other-info { background-color: var(--dm-band); }
html[data-theme="dark"] .author-page .author-block-list { border-color: var(--dm-border); }

/* FEATURED — category tag chips keep the by-design light-grey #e9ecef chip, but
   the --heading-color remap turns their text near-white (1.06:1). Restore the
   dark text to mirror light exactly (dark text on the kept light chip). */
html[data-theme="dark"] .tags > li > a.badge,
html[data-theme="dark"] .tags .badge.badge-info { color: #333; }

/* VIDEOS list — the grid play badge .btn-play was repainted to a dark surface
   while the featured #ja-btn-play stayed white; both are white-over-photo in
   light. Mirror light: keep .btn-play white with the rose triangle. */
html[data-theme="dark"] .btn-play {
  background-color: #fff;
  color: var(--color-secondary);
}

/* VIDEO single (and any content prev/next) — the article pager is a SOLID rose
   btn-secondary in light (a base button, like the typography demo), so it must
   be solid in dark too, not the form-context ghost. */
html[data-theme="dark"] .content-article .pagenavigation .btn.btn-secondary {
  --t4-btn-bg: var(--color-secondary);
  --t4-btn-border-color: var(--color-secondary);
  --t4-btn-color: #fff;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary);
  color: #fff;
}

/* OFFLINE doc — the login inputs are a hardcoded white island on the dark page
   (jpages.css; darkmode.css had no .offline rules). Surface them + give the
   empty-var heading an explicit accent (theme.css isn't loaded standalone). */
html[data-theme="dark"] .offline .form-wrap #form-login input[type="text"],
html[data-theme="dark"] .offline .form-wrap #form-login input[type="password"] {
  background-color: var(--dm-surface);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .offline .form-wrap #form-login input:focus { border-color: var(--dm-accent); }
html[data-theme="dark"] .offline-header h1 { color: var(--dm-heading); }

/* ========================================================================
   GLOBAL (light + dark) layout fix — NOT dark-scoped on purpose.
   The off-canvas drilldown expand-caret sat ~1.9px above the item row's
   vertical centre in BOTH modes (fixed margin-top:8px on a flex row). This
   centres it properly. Kept here (loads last) rather than editing the
   generated template.css. Affects light mode too — an approved layout fix.
   ======================================================================== */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle {
  margin-top: 0 !important;
  align-self: center;
}

/* ---- outline-primary button in a KEPT brand-blue .section-highlight band ---
   Light = white text/border/transparent; hover only fades (opacity .8), never
   fills. The generic accent rule (153/157) leaked periwinkle; the .bg-secondary
   white-on-panel rule (166-181) FILLS white on hover — wrong for section-highlight
   (stays transparent). Self-contained rest+hover with pure #fff. */
html[data-theme="dark"] .section-highlight .btn-outline-primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #fff !important;
}
html[data-theme="dark"] .section-highlight .btn-outline-primary:hover,
html[data-theme="dark"] .section-highlight .btn-outline-primary:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: transparent !important;   /* light hover only fades — never fills */
  border-color: #fff !important;
}

/* ---- com_tags filter search/clear buttons (/tagged-items) ------------------
   A com_tags source rule (!important) paints these brand-blue #204397 in BOTH
   themes; on the dark field that blue border + ghost ✕ is muddy/unreadable.
   Mirror light's blue-accent pairing using dark's readable brand blue (accent). */
html[data-theme="dark"] .com-tags-tag .filters button[type="submit"],
html[data-theme="dark"] .com-tags-tag .filters .btn-group button[type="button"],
html[data-theme="dark"] .tag-category .filters button[type="submit"],
html[data-theme="dark"] .tag-category .filters .btn-group button[type="button"] {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"],
html[data-theme="dark"] .tag-category .filters button[type="reset"] {
  background-color: transparent !important;
  border-color: var(--dm-accent) !important;
  color: var(--dm-accent) !important;
}
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"] span,
html[data-theme="dark"] .tag-category .filters button[type="reset"] span {
  color: var(--dm-accent) !important;
}
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"]:hover,
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"]:focus,
html[data-theme="dark"] .tag-category .filters button[type="reset"]:hover,
html[data-theme="dark"] .tag-category .filters button[type="reset"]:focus {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"]:hover span,
html[data-theme="dark"] .com-tags-tag .filters button[type="reset"]:focus span,
html[data-theme="dark"] .tag-category .filters button[type="reset"]:hover span,
html[data-theme="dark"] .tag-category .filters button[type="reset"]:focus span {
  color: #fff !important;
}