/* ==========================================================================
   JA Nova — Dark mode
   --------------------------------------------------------------------------
   Light mode is the original, approved design and is NOT modified here.
   Every rule below is scoped under html[data-theme="dark"] (the dark hook set by
   js/darkmode.js + the index.php pre-paint, which also set data-bs-theme="dark" so
   Bootstrap's own dark palette activates for BS components).

   Delivery (vega standard): this file is its OWN file (not custom.css), loaded
   AFTER template.css via addCustomTag() in index.php; the toggle button is STATIC
   markup in html/layouts/t4/block/mainnav.html; js/darkmode.js only wires the click.

   Principles: dark MIRRORS light (same relationships, every state); remap the
   template's color TOKENS rather than chasing individual elements; keep the
   brand accent (--color-primary #5e48db).
   ========================================================================== */

/* ---- 1. Dark palette + TOKEN REMAP --------------------------------------- */
html[data-theme="dark"] {
  /* Dark palette (one source of truth — tune here, GUI-friendly) */
  --dm-bg:#14171c;          /* page background                     */
  --dm-band:#1a1e25;        /* subtle band / bg-light sections     */
  --dm-surface:#1e232b;     /* cards / panels                      */
  --dm-surface-2:#262c36;   /* elevated surface (dropdowns, hover) */
  --dm-border:#2e353f;      /* dividers / frames                   */
  --dm-field-border:#3c444f;/* form fields / outline buttons       */
  --dm-text:#c2c9d2;        /* body copy                           */
  --dm-text-muted:#8b94a0;  /* meta / muted                        */
  --dm-heading:#eef1f6;     /* headings                            */
  --dm-link:#9d8cff;        /* lifted brand purple for text links  */
  --dm-link-hover:#b6a9ff;

  /* Brand accent — KEEP the template's primary (buttons stay purple). */
  /* --color-primary stays #5e48db */

  /* Remap JA color tokens (the big lever) */
  --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);
  --color-dark: var(--dm-surface-2);
  --body-link-color: var(--dm-link);
  --body-link-hover-color: var(--dm-link-hover);
  --jas-link-color: var(--dm-heading);

  /* Main nav */
  --mainnav-link-color: var(--dm-text);
  --mainnav-text-color: var(--dm-text);
  --mainnav-link-hover-color: var(--dm-link);
  --mainnav-link-active-color: var(--dm-link);

  color-scheme: dark;
}

/* ---- 2. Base surfaces ---------------------------------------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .t4-wrapper,
html[data-theme="dark"] #t4-main-body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-section { background-color: transparent; }

/* bg-light / light utility sections become a subtle band */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .palette-light,
html[data-theme="dark"] [class*="bg-color-light"] {
  background-color: var(--dm-band) !important;
}

/* ---- 3. Header ----------------------------------------------------------- */
html[data-theme="dark"] #t4-header {
  background-color: var(--dm-bg);
  /* light header has no bottom divider (transparent over the page) → mirror it */
}
html[data-theme="dark"] .header-block { background-color: var(--dm-bg); }
/* swap logo to the shipped white-wordmark variant (item-2.png) */
html[data-theme="dark"] .logo-img {
  content: url('../../../images/joomlart/logo/item-2.png');
}

/* sticky header + collapsed mobile megamenu hardcode white in light → darken */
html[data-theme="dark"] .not-at-top #t4-header.t4-sticky {
  background-color: var(--dm-bg);
  box-shadow: 0 1px 0 0 var(--dm-border);
}
html[data-theme="dark"] .t4-megamenu.navbar-collapse.show,
html[data-theme="dark"] .t4-megamenu.navbar-collapse.collapsing {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
/* dropdown caret triangle is a hardcoded dark #212529 (built from border-top)
   → invisible on the dark header; match the nav-link text colour instead */
html[data-theme="dark"] .t4-megamenu .item-caret::before {
  border-top-color: var(--mainnav-link-color);
}

/* ---- 4. Theme toggle button (static markup; JS only wires the click) ------ */
/* Single round button with cross-fading sun/moon icons (vega standard).
   The button itself is visible in BOTH modes; only the icon swap is scoped.
   Solid light header → transparent bg + header-text-color icon (gotcha §53). */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mainnav-link-color, #333);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease, color .15s ease;
}
.t4-theme-toggle:hover { background: rgba(127,140,160,.12); color: var(--color-primary, #5e48db); }
.t4-theme-toggle:focus-visible { outline: 2px solid var(--color-primary, #5e48db); outline-offset: 2px; }
/* Icon cross-fade: light shows MOON ("go dark"); dark shows SUN ("go light").
   Scope the swap under .t4-theme-toggle so it beats a generic svg display rule. */
.t4-theme-toggle .t4-theme-toggle__moon { display: block; }
.t4-theme-toggle .t4-theme-toggle__sun { display: none; }
html[data-theme="dark"] .t4-theme-toggle .t4-theme-toggle__moon { display: none; }
html[data-theme="dark"] .t4-theme-toggle .t4-theme-toggle__sun { display: block; }
/* On the dark page the header icon uses the dark nav colour (already remapped). */
html[data-theme="dark"] .t4-theme-toggle { color: var(--dm-text); }
html[data-theme="dark"] .t4-theme-toggle:hover { color: var(--dm-link); }

/* ---- 5. Surfaces: white (#fff) cards → dark surface ---------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .mod-view-article-list .item,
html[data-theme="dark"] .acm-teams.style-1 .teams-item-inner,
html[data-theme="dark"] .acm-teams .teams-item-inner,
html[data-theme="dark"] .relateditems.type-project .item-inner,
html[data-theme="dark"] .acm-text-slider.style-1 .item,
html[data-theme="dark"] .acm-features.style-6 .features-item,
html[data-theme="dark"] .author-block.author-block-post-detail,
html[data-theme="dark"] .acm-accordion .card {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* ---- 6. Surfaces: gray-100/#f7f7f7 fills → subtle band ------------------- */
html[data-theme="dark"] .features-item,
html[data-theme="dark"] .features-inner,
html[data-theme="dark"] .acm-features .features-item,
html[data-theme="dark"] .acm-features .features-inner,
html[data-theme="dark"] .acm-pricing .pricing-wrap,
html[data-theme="dark"] .acm-pricing .pricing-title,
html[data-theme="dark"] .acm-pricing .pricing-detail,
html[data-theme="dark"] .author,
html[data-theme="dark"] .author-detail,
html[data-theme="dark"] .menu-box,
html[data-theme="dark"] .latestnews.type-1 .content-right .item,
html[data-theme="dark"] .tabs-category .nav-link,
html[data-theme="dark"] .tabs-category .item-inner,
html[data-theme="dark"] .t4-introduction,
html[data-theme="dark"] .t4-banner {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
}

/* team card name (hardcoded #333 heading + link) */
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text h4,
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text .h4 {
  color: var(--dm-heading);
}
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text h4 a,
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text .h4 a {
  color: var(--dm-heading);
}
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text h4 a:hover,
html[data-theme="dark"] .acm-teams .teams-item-inner .teams-text .h4 a:hover {
  color: var(--dm-link);
}

/* text-slider pill heading (hardcoded #333) */
html[data-theme="dark"] .acm-text-slider .item,
html[data-theme="dark"] .acm-text-slider .item h3,
html[data-theme="dark"] .acm-text-slider .item .h3 {
  color: var(--dm-heading);
}

/* brand-purple text utility: lift to a readable lilac on the dark page
   (light's #5E48DB on white ≈ 5:1; on the dark page it drops to ~2.8:1) */
html[data-theme="dark"] .text-purple { color: var(--dm-link); }

/* rest-state purple HEADINGS/LABELS — lift for readability on dark.
   (hover states stay brand purple — they read fine momentarily and match light.) */
html[data-theme="dark"] .footer-info h5,
html[data-theme="dark"] .footer-info .h5,
html[data-theme="dark"] .contact .contact-address .title,
html[data-theme="dark"] .contact .contact-address .contact-emailto .title,
html[data-theme="dark"] .item-page .top-project h5,
html[data-theme="dark"] .item-page .top-project .h5 {
  color: var(--dm-link);
}

/* highlighted purple feature card stays branded (by-design) — leave it. */

/* ---- 7. Soft-tint bands (.bg-*-light) → neutral dark band ---------------- */
/* These are light pastel sections with dark text in light mode → must darken
   so the (now light) headings/body stay readable. The FULL-colour accent bands
   (.bg-purple / .bg-yellow / .bg-green, white text) are by-design — left alone. */
html[data-theme="dark"] .bg-purple-light,
html[data-theme="dark"] .bg-green-light,
html[data-theme="dark"] .bg-gray-light,
html[data-theme="dark"] .bg-blue-light,
html[data-theme="dark"] .bg-yellow-light,
html[data-theme="dark"] .bg-cyan-light,
html[data-theme="dark"] .bg-orange-light {
  background-color: var(--dm-band) !important;
}

/* Pricing plan tabs (rest white, active purple-tint) */
html[data-theme="dark"] .acm-pricing .pricing-wrap .nav-tabs .nav-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .acm-pricing .pricing-wrap .nav-tabs .nav-link.active {
  background-color: var(--dm-surface-2);
  border-color: var(--color-primary);
  color: var(--dm-link);
}

/* menu-box pills (white rest, purple-tint active) */
html[data-theme="dark"] .menu-box .navbar-nav > li > a {
  background-color: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .menu-box .navbar-nav > li > a:hover,
html[data-theme="dark"] .menu-box .navbar-nav > .active > a,
html[data-theme="dark"] .menu-box .navbar-nav > li.active > a {
  background-color: var(--dm-surface-2);
  border-color: var(--color-primary);
  color: var(--dm-link);
}

/* ---- 8. Carousel nav buttons (white → surface, light icon) -------------- */
html[data-theme="dark"] .cw-owl-nav > span,
html[data-theme="dark"] .cw-owl-next,
html[data-theme="dark"] .cw-owl-prev,
html[data-theme="dark"] .acm-teams .cw-owl-nav > span {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border);
  color: var(--dm-heading);
}
html[data-theme="dark"] .cw-owl-nav > span:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ---- 9. Megamenu dropdown + items --------------------------------------- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .megamenu > .dropdown-menu,
html[data-theme="dark"] .t4-megamenu .mega-dropdown-menu {
  background-color: var(--dm-surface);
  box-shadow: 0 0 0 1px var(--dm-border), 0 8px 24px rgba(0,0,0,.4);
}

/* ---- 10. Pagination ----------------------------------------------------- */
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagenav a {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .pagenav a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- 11. Tags / category pills (white bg → surface; hover keeps accent) -- */
html[data-theme="dark"] .tagspopular ul li a {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .tagspopular ul li a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ---- 12. Forms: inputs → dark fields ------------------------------------ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"] {
  background-color: var(--dm-surface);
  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 {
  background-color: var(--dm-surface);
  border-color: var(--color-primary);
  color: var(--dm-heading);
}

/* ---- 13. Buttons: btn-light on dark band → readable -------------------- */
html[data-theme="dark"] .btn-light {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-heading);
}
html[data-theme="dark"] .btn-light:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- 14. Background-image icons → light/dark-safe ----------------------- */
/* breadcrumb arrow + search magnifier PNGs are dark → invert for dark page */
html[data-theme="dark"] .mod-breadcrumbs .divider:before,
html[data-theme="dark"] .mod-finder .icon-search:after,
html[data-theme="dark"] .form-inline .search:before {
  filter: invert(1) brightness(1.6);
}
/* breadcrumb block top divider is a hardcoded near-white #e9ecef — faint on a
   light page, glaring on dark. Mirror the faint relationship with --dm-border */
html[data-theme="dark"] .t4-section.t4-breadcrumb {
  border-top-color: var(--dm-border);
}

/* client-logo grid dividers use the global --border-color: in light that's a
   barely-there rgba(0,0,0,.1); the dark token (--dm-border, solid) reads far too
   strong. Mirror light's faintness with a low-opacity white hairline. */
html[data-theme="dark"] .acm-clients .item {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- 15. Off-canvas (mobile) ------------------------------------------- */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] .t4-off-canvas-body {
  background-color: var(--dm-bg);
}
html[data-theme="dark"] .t4-off-canvas-header {
  background-color: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border);
}
html[data-theme="dark"] .t4-off-canvas-body .nav-link,
html[data-theme="dark"] .t4-off-canvas-body a {
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-off-canvas-body .nav-link:hover,
html[data-theme="dark"] .t4-off-canvas-body a:hover {
  color: var(--dm-link);
}
html[data-theme="dark"] .t4-off-canvas-body .btn-toggle,
html[data-theme="dark"] .t4-off-canvas-body .btn-toggle:before,
html[data-theme="dark"] .t4-off-canvas-body .btn-toggle:after {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .t4-off-canvas-body li {
  border-color: var(--dm-border);
}

/* ---- 16. Misc borders / separators ------------------------------------- */
html[data-theme="dark"] .blog-list .item-meta span::after,
html[data-theme="dark"] .testimonial-block:after {
  background-color: var(--dm-border);
}
/* literal #e9ecef ($gray-200) dividers on surfaces → one dark token */
html[data-theme="dark"] .pricing-head,
html[data-theme="dark"] .pricing-detail .pricing-features li,
html[data-theme="dark"] .pane-sliders .panel h3.title.pane-toggler-down,
html[data-theme="dark"] .acm-accordion .card-header,
html[data-theme="dark"] .author-detail,
html[data-theme="dark"] .comment-item {
  border-color: var(--dm-border) !important;
}

/* ---- 16b. Cross-page light fills & utilities ---------------------------- */

/* gray-100 (#f7f7f7) chips/counters/pills → band or surface */
html[data-theme="dark"] .counter,
html[data-theme="dark"] .com-content-category-blog__counter,
html[data-theme="dark"] .pane-sliders .panel h3.title,
html[data-theme="dark"] .pane-sliders .panel .title.h3 {
  background-color: var(--dm-band);
  color: var(--dm-text);
}
html[data-theme="dark"] .tags > li > a,
html[data-theme="dark"] .badge.badge-info,
html[data-theme="dark"] .finder #search-results .badge,
html[data-theme="dark"] .blog-list .item-readmore .pagenavigation .pagination a,
html[data-theme="dark"] .blog-list .item-readmore p.readmore a,
html[data-theme="dark"] .btn.btn-readmore,
html[data-theme="dark"] .contact .contact-links ul.nav li a {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .tags > li > a:hover,
html[data-theme="dark"] .blog-list .item-readmore .pagenavigation .pagination a:hover,
html[data-theme="dark"] .blog-list .item-readmore p.readmore a:hover,
html[data-theme="dark"] .btn.btn-readmore:hover,
html[data-theme="dark"] .contact .contact-links ul.nav li a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Pagers / pagination / isotope filter (all hardcode #f7f7f7 fills) */
html[data-theme="dark"] .paginationjs-pages ul li a,
html[data-theme="dark"] ul.pagination .page-link,
html[data-theme="dark"] .tabs-category #nav-tab .nav-link,
html[data-theme="dark"] .pagenavigation .pagination a.btn,
html[data-theme="dark"] .blog-list .item-readmore .pagenavigation .pagination a {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .paginationjs-pages ul li.active a,
html[data-theme="dark"] .paginationjs-pages ul li a:hover,
html[data-theme="dark"] ul.pagination .page-link:hover,
html[data-theme="dark"] ul.pagination .page-item.active .page-link,
html[data-theme="dark"] .tabs-category #nav-tab .nav-link.active,
html[data-theme="dark"] .pagenavigation .pagination a.btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* project / category grid cards (#f7f7f7, ID-scoped source) */
html[data-theme="dark"] .tabs-category #nav-tabContent .item .item-inner,
html[data-theme="dark"] .categories-list .com-content-categories__items .com-content-categories__item .item-inner,
html[data-theme="dark"] .blog.type-project .item,
html[data-theme="dark"] .blog-featured.type-project .item {
  background-color: var(--dm-band);
  border-color: var(--dm-border);
}

/* contact info blocks (dd.show-0 gray panel) */
html[data-theme="dark"] .contact .contact-address dd.show-0 {
  background-color: var(--dm-band);
}

/* outline buttons: the theme sets `color` DIRECTLY via var(--color-light/dark)
   (which we remap dark), so override the color property itself + the border. */
html[data-theme="dark"] .btn.btn-outline-light,
html[data-theme="dark"] .btn.btn-outline-dark {
  color: var(--dm-heading);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .btn.btn-outline-light:hover,
html[data-theme="dark"] .btn.btn-outline-dark:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* tag/list results title links (hardcoded #212529) */
html[data-theme="dark"] .list-group-item a,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a {
  color: var(--dm-heading);
}
html[data-theme="dark"] .list-group-item a:hover,
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:hover {
  color: var(--dm-link);
}

/* feature pills (.list-features) — gray rest, purple hover */
html[data-theme="dark"] .acm-features.style-6 .list-features ul a,
html[data-theme="dark"] .acm-features .list-features a {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .acm-features.style-6 .list-features ul a:hover,
html[data-theme="dark"] .acm-features .list-features a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Bootstrap list-group → blend with page, dark borders */
html[data-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* <mark> highlight → dark-friendly */
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
  background-color: rgba(157,140,255,.22);
  color: var(--dm-heading);
}

/* Contact icon circles (white + dark base64 PNG glyph) → surface + invert glyph */
html[data-theme="dark"] .has-icon .icon,
html[data-theme="dark"] .contact .contact-address .has-icon .icon {
  background-color: var(--dm-surface-2);
}
html[data-theme="dark"] .has-icon .icon:before,
html[data-theme="dark"] .contact .contact-address .has-icon .icon:before {
  filter: invert(1) brightness(1.7);
}
html[data-theme="dark"] .has-icon {
  background-color: var(--dm-band);
}

/* .text-dark / .text-light utilities — remap independent of bg utilities.
   (--color-dark/--color-light drive both a text AND a bg util with opposite
   needs, so the text variants are fixed here explicitly.) */
html[data-theme="dark"] .text-dark { color: var(--dm-heading) !important; }
html[data-theme="dark"] .text-light { color: var(--dm-text) !important; }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-title { color: var(--dm-heading); }

/* ---- 16c. Standalone error / offline pages ----------------------------- */
html[data-theme="dark"] .t4-error-page,
html[data-theme="dark"] body.error-page,
html[data-theme="dark"] body.offline {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text);
}
html[data-theme="dark"] body.error-page .error-info h2,
html[data-theme="dark"] body.error-page .error-code,
html[data-theme="dark"] body.error-page .error-msg h2 { color: var(--dm-heading) !important; }
html[data-theme="dark"] body.error-page .error-other-info .page-redirect a {
  color: var(--dm-link);
}
html[data-theme="dark"] .t4-error-page .t4-error-msg,
html[data-theme="dark"] body.offline .form-wrap {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border);
}
html[data-theme="dark"] body.offline .form-wrap h1,
html[data-theme="dark"] body.offline .form-wrap .offline-message,
html[data-theme="dark"] .t4-error-page h1,
html[data-theme="dark"] .t4-error-page .cta-wrap h3 { color: var(--dm-heading); }
/* offline login inputs */
html[data-theme="dark"] body.offline #form-login input {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-field-border) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .t4-error-page .cta-wrap a {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}
html[data-theme="dark"] .t4-error-page .cta-wrap a:hover {
  background-color: var(--color-primary);
  color: #fff;
}
html[data-theme="dark"] .t4-error-page code {
  background-color: var(--dm-surface-2);
}

/* ---- 16d. Bootstrap bits: thumbnails, close buttons, dropdowns --------- */
html[data-theme="dark"] .img-thumbnail {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
/* close (×) buttons use a dark SVG mask → invert on dark */
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
/* dropdown menus (Joomla actions, language switcher, etc.) */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .dropdown-item { color: var(--dm-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
}

/* ---- 17. Footer --------------------------------------------------------- */
/* Footer is already dark (#212529) in light; lift its border for separation. */
html[data-theme="dark"] #t4-footer,
html[data-theme="dark"] .t4-footer {
  border-top: 1px solid var(--dm-border);
}