/* =========================================================================
   JA Event Camp — dark mode
   -------------------------------------------------------------------------
   Light mode is untouched. Every rule is scoped under html[data-theme="dark"];
   the only unscoped blocks are the theme toggle and the login-field layout fix
   at the end of the file.

   The template is Bootstrap 4 with mostly literal hex, so most rules here are
   specificity-matched literal overrides rather than token remaps, and the
   palette is built in the navy family the template already uses for its own
   .t4-palette-dark bands.
   ========================================================================= */

/* 1. Palette */
html[data-theme="dark"] {
  --dm-bg: #0d0c38;           /* page                                        */
  --dm-band: #12114a;         /* the template's own dark-palette bg          */
  --dm-surface: #171753;      /* cards / panels                              */
  --dm-surface-2: #1f1e63;    /* elevated: inputs, pills, hover chips        */
  --dm-border: #2b2a6b;       /* THE divider token (~rgba(255,255,255,.1))   */
  --dm-field-border: #454483; /* one step up — form fields need to read      */
  --dm-heading: #f2f2f8;
  --dm-text: #c3c3d6;
  --dm-text-muted: #9191a2;   /* the template's own dark-palette text colour */

  --dm-accent: #e812b8;

  color-scheme: dark;
}

/* 2. Token remap.
   NOT remapped: --color-light, --color-white, --color-dark. Each is dual-use —
   .bg-light and .text-light read the same token — so remapping them would make
   the .text-* utilities invisible. Those get literal overrides instead. */
html[data-theme="dark"] {
  --body-bg-color: var(--dm-bg);       /* body + .t4-content only            */
  --body-text-color: var(--dm-text);   /* body + off-canvas + category links */
  --heading_color: var(--dm-heading);  /* headings; text-only, never a bg    */

  --gray_light: var(--dm-border);
}

/* 3. Theme toggle button — the one block that applies in BOTH modes. */
.t4-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 .5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
  flex: 0 0 auto;
}

.t4-theme-toggle:hover,
.t4-theme-toggle:focus {
  background: rgba(255, 255, 255, .26);
  color: #fff;
  outline: none;
}

.t4-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

.t4-theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

/* Light mode shows the moon ("switch to dark"); dark shows the sun. */
.t4-theme-toggle__sun { opacity: 0; transform: rotate(-45deg); }
.t4-theme-toggle__moon { opacity: 1; transform: none; }

html[data-theme="dark"] .t4-theme-toggle__sun { opacity: 1; transform: none; }
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; transform: rotate(45deg); }

@media (min-width: 576px) {
  .t4-header .t4-theme-toggle { margin-left: 1.75rem; margin-right: 0; }
  .t4-header .head-action { margin-left: .85rem; }
}

/* The standalone pages (error/offline) have no header, so this copy is surface-aware. Both modes. */
.t4-theme-toggle--floating {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  margin: 0;
  background: rgba(18, 17, 74, .08);
  color: #12114a;
}

.t4-theme-toggle--floating:hover,
.t4-theme-toggle--floating:focus {
  background: rgba(18, 17, 74, .16);
  color: #12114a;
}

html[data-theme="dark"] .t4-theme-toggle--floating {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

html[data-theme="dark"] .t4-theme-toggle--floating:hover,
html[data-theme="dark"] .t4-theme-toggle--floating:focus {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* 4. Page shell */
html[data-theme="dark"] body,
html[data-theme="dark"] .t4-content,
html[data-theme="dark"] .t4-wrapper {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

/* Light's own `body{background-color:#fff}` (BS reboot) is literal — beat it. */
html[data-theme="dark"] body { background-color: var(--dm-bg); }

html[data-theme="dark"] #t4-main-body { background-color: transparent; }

/* 5. Section palettes / bands. .t4-palette-dark is already dark in light — left alone. */
html[data-theme="dark"] .t4-palette-light,
html[data-theme="dark"] .t4-palette-gray {
  background-color: var(--dm-band);
  color: var(--dm-text);
}

html[data-theme="dark"] .t4-palette-light .bg-pattern,
html[data-theme="dark"] .t4-palette-gray .bg-pattern {
  background-color: var(--dm-band);
}

html[data-theme="dark"] .t4-palette-light .module-title,
html[data-theme="dark"] .t4-palette-gray .module-title {
  color: var(--dm-heading);
}

/* .t4-palette-gray is deliberately excluded: light already paints its links with
   the accent, which is unchanged in dark. :not(.btn) keeps this off button labels —
   without it this scope out-ranks .btn-primary:hover and paints accent-on-accent. */
html[data-theme="dark"] .t4-palette-light a {
  color: var(--dm-heading);
}

html[data-theme="dark"] .t4-palette-light a:not(.btn):hover,
html[data-theme="dark"] .t4-palette-light a:not(.btn):focus,
html[data-theme="dark"] .t4-palette-light a:not(.btn):active {
  color: var(--dm-accent);
}

html[data-theme="dark"] .t4-palette-light .navbar-nav > li > a {
  color: var(--dm-heading) !important;
}

/* Section seam dividers — mirror the template's own rgba(255,255,255,.1). */
html[data-theme="dark"] .section-border-top:before,
html[data-theme="dark"] .section-border-bottom:before {
  background: rgba(255, 255, 255, .1);
}

/* 5b. The #edf5ff divider sweep — invisible on white, a bright line on dark. */
html[data-theme="dark"] hr,
html[data-theme="dark"] .counter,
html[data-theme="dark"] .latestnews .info-article,
html[data-theme="dark"] .sidebar-r,
html[data-theme="dark"] .sidebar-l,
html[data-theme="dark"] .items-row .item,
html[data-theme="dark"] .contact .wrapper-tabs,
html[data-theme="dark"] .contact .wrapper-tabs #myTabContent,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .acm-clients .client-item,
html[data-theme="dark"] .acm-clients.multi-row .row,
html[data-theme="dark"] .border-gray {
  border-color: var(--dm-border);
}

/* 6. Cards — surface vs transparent, decided per layout. */

/* (a) Blog leading item: pulled up over the photo, so it needs an opaque surface. */
html[data-theme="dark"] .items-leading .item-content {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .items-leading .item-image,
html[data-theme="dark"] .items-leading .item-image img {
  background-color: var(--dm-surface);
}

/* (b) Blog secondary items: transparent in light, so transparent here too. */
html[data-theme="dark"] .items-row .item-content {
  background-color: transparent;
}

/* (c) Item frame: only the border darkens, not the fill. */
html[data-theme="dark"] .blog .item {
  border-color: var(--dm-border);
}

/* (d) Grid cards: a genuinely solid white box in light → a real dark surface. */
html[data-theme="dark"] .category-grid-view .item-inner {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* (e) List-group: transparent like light; only the dividers are lifted. */
html[data-theme="dark"] .list-group-item {
  background-color: transparent;
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .list-group-item a {
  color: var(--dm-text);
}

html[data-theme="dark"] .list-group-item a:hover {
  color: var(--dm-accent);
}

html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a {
  color: var(--dm-text);
}

html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a:hover {
  color: var(--dm-accent);
}

/* Light's hover sets a background as well — carry both properties. */
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
}

/* Generic white card panels */
html[data-theme="dark"] .item-content,
html[data-theme="dark"] .content-info,
html[data-theme="dark"] .info-article {
  border-color: var(--dm-border);
}

/* (f) About > speakers: .bg-fixed is a mask over the portrait ring, so it tracks the page colour. */
html[data-theme="dark"] .page-about .box-member .group-member .item .group-content .wrap-effect .bg-border .bg-fixed {
  background-color: var(--dm-bg);
}

/* 7. Typography, links, prose */
/* There is deliberately no blanket h1..h6 rule: headings read --heading_color,
   which §2 already remaps. A scoped heading rule here would out-rank light's
   single-class rules (.module-title{color:#e812b8}) and repaint brand headings. */

/* 7b. Hardcoded navy (#12114a) text */
html[data-theme="dark"] .blog-item .item-content h2.item-title,
html[data-theme="dark"] .items-row .item-content h2.item-title,
html[data-theme="dark"] .blog-item .item-content .page-header h2,
html[data-theme="dark"] .items-row .item-content .page-header h2,
html[data-theme="dark"] .blog-item .item-content .page-header h2 a,
html[data-theme="dark"] .items-row .item-content .page-header h2 a {
  color: var(--dm-heading);
}

html[data-theme="dark"] .blog-item .item-content .page-header h2 a:hover,
html[data-theme="dark"] .items-row .item-content .page-header h2 a:hover {
  color: var(--dm-accent);
}

/* Sidebar "Latest Articles" titles */
html[data-theme="dark"] .latestnews .info-article .title-article h6 a {
  color: var(--dm-heading);
}

html[data-theme="dark"] .latestnews .info-article .title-article h6 a:hover {
  color: var(--dm-accent);
}

/* READ MORE — a box-less underlined link on blog items, a chip elsewhere. */
html[data-theme="dark"] .blog-item .item-content .readmore .btn-readmore,
html[data-theme="dark"] .items-row .item-content .readmore .btn-readmore {
  color: var(--dm-heading);
  -webkit-text-fill-color: var(--dm-heading);
}

html[data-theme="dark"] .blog-item .item-content .readmore .btn-readmore:hover,
html[data-theme="dark"] .items-row .item-content .readmore .btn-readmore:hover {
  color: var(--dm-accent);
  -webkit-text-fill-color: var(--dm-accent);
}

/* The chip variant gets a surface fill. The box-less .btn-readmore is also a
   .btn and must stay excluded, or this rule out-ranks its transparent source rule
   and paints a magenta box with a magenta label on it. */
html[data-theme="dark"] .readmore .btn:not(.btn-readmore) {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] .readmore .btn:not(.btn-readmore):hover,
html[data-theme="dark"] .readmore .btn:not(.btn-readmore):active,
html[data-theme="dark"] .readmore .btn:not(.btn-readmore):focus {
  background-color: var(--dm-accent);
  color: #fff;
}

/* The rest rule out-specifies light's hover, so carry an explicit hover companion. */
html[data-theme="dark"] .items-more .nav-tabs > li > a {
  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:focus,
html[data-theme="dark"] .items-more .nav-tabs li > a:active {
  color: var(--dm-accent);
}

/* Contact social chips — mirror the raised-chip relationship, not the literal #edf5ff. */
html[data-theme="dark"] .contact .contact-links ul.nav li a {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] .contact .contact-links ul.nav li a:hover {
  background: var(--dm-border);
  color: var(--dm-heading);
}

/* Other hardcoded-navy spots */
html[data-theme="dark"] .contact .contact-address dd > span,
html[data-theme="dark"] .registration a.modal,
html[data-theme="dark"] .com-finder .form-inline label {
  color: var(--dm-heading);
}

/* Advanced-search tips panel: a genuinely solid help panel, so it takes an opaque surface. */
html[data-theme="dark"] .com-finder__tips {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme="dark"] .pagination .page-item > a,
html[data-theme="dark"] .pagination .page-item > span {
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme="dark"] .pagination .page-item.active > a,
html[data-theme="dark"] .pagination .page-item.active > span {
  color: #fff;
}

/* Article meta / bylines — near-black literals in light */
html[data-theme="dark"] .article-info,
html[data-theme="dark"] .article-info dd,
html[data-theme="dark"] .article-info time,
html[data-theme="dark"] .item .published,
html[data-theme="dark"] .item-date {
  color: var(--dm-text-muted);
}

/* Bootstrap ships .text-muted with !important, so this needs its own. Guarded to standalone use so a .bg-light.text-muted island keeps its pairing. */
html[data-theme="dark"] .text-muted:not([class*="bg-"]) {
  color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .article-info dd:after { color: var(--dm-text-muted); }

/* Prose code blocks stay legible on dark */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html[data-theme="dark"] blockquote,
html[data-theme="dark"] .blockquote {
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* Image captions — mirror the offset-from-the-page relationship, not the literal #ebebeb. */
html[data-theme="dark"] figure figcaption,
html[data-theme="dark"] figcaption {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] hr { border-color: var(--dm-border); }

/* 8. Sidebar modules */
html[data-theme="dark"] .t4-module,
html[data-theme="dark"] .module {
  color: var(--dm-text);
}

html[data-theme="dark"] .latestnews > li,
html[data-theme="dark"] .latestnews li.clearfix {
  border-color: var(--dm-border);
}

html[data-theme="dark"] .info-article .item-title a,
html[data-theme="dark"] .info-article a {
  color: var(--dm-heading);
}

html[data-theme="dark"] .info-article a:hover { color: var(--dm-accent); }

/* Category tags inside a card stay white in every state — the generic hover above would accent them. */
html[data-theme="dark"] .info-article .category-name a,
html[data-theme="dark"] .info-article .category-name a:hover,
html[data-theme="dark"] .info-article .category-name a:focus,
html[data-theme="dark"] .intro-image .category-name a,
html[data-theme="dark"] .intro-image .category-name a:hover,
html[data-theme="dark"] .intro-image .category-name a:focus {
  color: #fff;
}

/* Category module links. The active item is deliberately not accented: light rests it at the same grey as its siblings. */
html[data-theme="dark"] .categories-module a,
html[data-theme="dark"] .mod-articlescategories a {
  color: var(--dm-text);
}

html[data-theme="dark"] .categories-module a:hover,
html[data-theme="dark"] .mod-articlescategories a:hover {
  color: var(--dm-accent);
}

/* 9. Tags / pills. Both hover rules set a background, so the overrides carry one too. */
html[data-theme="dark"] .tags li,
html[data-theme="dark"] .tagspopular li,
html[data-theme="dark"] .tagspopular ul > li {
  background: var(--dm-surface-2);
}

html[data-theme="dark"] .tags li a,
html[data-theme="dark"] .tagspopular li a,
html[data-theme="dark"] .tagspopular ul > li > a {
  color: var(--dm-text);
}

html[data-theme="dark"] .tags li .tag-count,
html[data-theme="dark"] .tagspopular li .tag-count {
  color: var(--dm-text-muted);
}

/* Hover: carry BOTH properties (light sets bg + colour). */
html[data-theme="dark"] .tags li:hover,
html[data-theme="dark"] .tagspopular li:hover,
html[data-theme="dark"] .tagspopular ul > li:hover {
  background-color: var(--dm-border);
}

html[data-theme="dark"] .tags li a:hover {
  color: var(--dm-accent);
}

/* .tagspopular freezes its label on hover in light (source !important) — match it. */
html[data-theme="dark"] .tagspopular li:hover a,
html[data-theme="dark"] .tagspopular ul > li > a:hover,
html[data-theme="dark"] .tagspopular ul > li > a:focus,
html[data-theme="dark"] .tagspopular ul > li > a:active {
  color: var(--dm-text) !important;
}

/* com_tags list page */
html[data-theme="dark"] .com-tags.tag-category .category li:hover {
  background-color: var(--dm-surface-2);
}

html[data-theme="dark"] .all-tags li a:hover {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
}

/* 10. Pagination + counter */
html[data-theme="dark"] .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .page-link:focus {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-heading);
}

html[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text-muted);
}

/* The current page keeps the brand fill it has in light. */
html[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
  color: #fff;
}

html[data-theme="dark"] p.counter,
html[data-theme="dark"] .pagination-wrap .counter {
  border-color: var(--dm-border);
  color: var(--dm-text-muted);
}

/* 11b. Text utilities that name a dark colour. Applied only standalone: paired with a bg utility the pair is self-consistent. */
html[data-theme="dark"] .text-dark:not([class*="bg-"]) {
  color: var(--dm-heading) !important;
}

html[data-theme="dark"] .text-secondary:not([class*="bg-"]) {
  color: var(--dm-text-muted) !important;
}

/* Hover companions — the rest rules above are !important and would otherwise swallow Bootstrap's. */
html[data-theme="dark"] a.text-dark:not([class*="bg-"]):hover,
html[data-theme="dark"] a.text-dark:not([class*="bg-"]):focus {
  color: #fff !important;
}

html[data-theme="dark"] a.text-secondary:not([class*="bg-"]):hover,
html[data-theme="dark"] a.text-secondary:not([class*="bg-"]):focus {
  color: var(--dm-text) !important;
}

/* 11. Utility background classes are deliberately NOT repainted: they ship paired (.bg-light + .text-dark) and keep their Bootstrap colours in both modes. Section bands use .t4-palette-* instead, handled in §5. */

/* 12. Tables — light blanket-paints every cell white with !important. */
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  background-color: transparent !important;
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table th {
  color: var(--dm-heading);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .table { color: var(--dm-text); border-color: var(--dm-border); }

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) th {
  background-color: rgba(255, 255, 255, .03) !important;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
  border-color: var(--dm-border);
}

/* 13. Forms. Field borders take --dm-field-border: the divider token is tuned against the page and would vanish against the field fill. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
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="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
  color: var(--dm-text);
}

/* Inputs re-assert a light colour/background on :focus. Never leave border-color to inherit — it would resolve to a bright ancestor text colour. */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-accent);
  color: var(--dm-text);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--dm-text-muted);
  opacity: 1;
}

/* The invalid-field edge. The red is semantic and stays literal in both modes.
   !important is deliberate: it has to out-rank every field-theming rule here
   regardless of which wrapper the field sits in. */
html[data-theme="dark"] input.invalid,
html[data-theme="dark"] textarea.invalid,
html[data-theme="dark"] .form-control.invalid {
  border-color: #f44336 !important;
}

/* Focus companion — light lets :focus replace the red edge, so dark must too. */
html[data-theme="dark"] input.invalid:focus,
html[data-theme="dark"] textarea.invalid:focus,
html[data-theme="dark"] .form-control.invalid:focus {
  border-color: var(--dm-accent) !important;
}

/* Joomla's validation tooltip is a Bootstrap popover clone. Repaint the box and
   BOTH arrow pseudo-elements — ::before is the border edge, ::after the fill;
   missing ::after leaves a white spike under a dark bubble. */
html[data-theme="dark"] .popover,
html[data-theme="dark"] .control-label .form-control-feedback {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-heading);
}

html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .control-label .form-control-feedback {
  color: var(--dm-heading);
}

/* Inner arrow = the bubble fill; outer arrow = the bubble edge. */
html[data-theme="dark"] .control-label .form-control-feedback::after,
html[data-theme="dark"] .popover > .arrow::after {
  border-top-color: var(--dm-surface-2);
}

html[data-theme="dark"] .control-label .form-control-feedback::before,
html[data-theme="dark"] .popover > .arrow::before {
  border-top-color: var(--dm-border);
}

html[data-theme="dark"] .input-group-text {
  background-color: var(--dm-surface);
  border-color: var(--dm-field-border);
  color: var(--dm-text-muted);
}

/* The com_tags filter field butts straight against the navy .btn-secondary
   buttons, so the generic §13 field look muddies against them. Lift the fill to a
   clearly lighter navy with a matching (near-invisible) border, mirroring light's
   white-field-vs-navy-buttons reading. Scoped to this filter only. */
html[data-theme="dark"] .com-tags-tag__filters .input-group .form-control {
  background-color: var(--dm-border);
  border-color: var(--dm-border);
  color: var(--dm-heading);
}

html[data-theme="dark"] .com-tags-tag__filters .input-group .form-control:focus {
  background-color: var(--dm-border);
  border-color: var(--dm-accent);
  color: var(--dm-heading);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] legend,
html[data-theme="dark"] .search legend,
html[data-theme="dark"] .search .searchintro,
html[data-theme="dark"] .registration legend,
html[data-theme="dark"] .profile-edit legend,
html[data-theme="dark"] .profile legend {
  color: var(--dm-heading);
}

/* The BS4 custom-select caret is a dark data-URI SVG. background-repeat must be restated or the swapped image tiles. */
html[data-theme="dark"] .custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23c3c3d6' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 8px 10px;
}

/* Fieldset stepper bar (registration) */
html[data-theme="dark"] .registration fieldset::before {
  background-color: var(--dm-border);
}

/* The registration <legend> is a mask that notches the fieldset border, not a surface — it must match the page. */
html[data-theme="dark"] .registration fieldset legend {
  background-color: var(--dm-bg);
}

/* Native form widgets */
html[data-theme="dark"] .custom-control-label::before {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}

/* 14. Buttons that are not brand-filled. The brand fills are identical in light. */
html[data-theme="dark"] .btn.btn-gray {
  background: var(--dm-surface-2);
  color: var(--dm-heading);
}

/* Hover companion — the rest override above out-ranks the source .btn-gray:hover. */
html[data-theme="dark"] .btn.btn-gray:hover,
html[data-theme="dark"] .btn.btn-gray:focus,
html[data-theme="dark"] .btn.btn-gray:active {
  background: linear-gradient(to right, var(--gradient_primary_start), var(--gradient_primary_end));
  color: #fff;
}

/* Close buttons whose glyph is a black data-URI SVG; filter is the only lever
   that repaints a background-image glyph. .js-offcanvas-close is excluded — it is
   already a white × on navy in both modes. */
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .alert .close,
html[data-theme="dark"] .contact .contact-miscinfo .close {
  filter: invert(1) grayscale(1) brightness(2);
}

/* 15. Alerts / badges / Joomla messages */
html[data-theme="dark"] .alert {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme="dark"] .alert-heading { color: var(--dm-heading); }

/* Bootstrap's semantic alerts keep their own hue but on a dark fill. */
html[data-theme="dark"] .alert-success { background-color: rgba(40, 167, 69, .16); border-color: rgba(40, 167, 69, .4); color: #7fe09a; }
html[data-theme="dark"] .alert-info    { background-color: rgba(23, 162, 184, .16); border-color: rgba(23, 162, 184, .4); color: #7fd8e8; }
html[data-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, .16); border-color: rgba(255, 193, 7, .4); color: #ffd85e; }
html[data-theme="dark"] .alert-danger  { background-color: rgba(220, 53, 69, .16); border-color: rgba(220, 53, 69, .4); color: #ff8b95; }

/* Search-results badge: light chip + navy text — flip BOTH. */
html[data-theme="dark"] .com-finder #search-results .badge {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}

/* 16. Megamenu — the panel is already navy in light. Pin only its colour so it can never inherit the page background. */
html[data-theme="dark"] .t4-megamenu .dropdown-menu {
  background-color: var(--dm-band);
}

/* 17. Off-canvas — already navy in light. Keep the panel and its submenu on ONE surface. */
html[data-theme="dark"] .t4-offcanvas,
html[data-theme="dark"] #off-canvas-right {
  background-color: var(--dm-band);
}

html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu,
html[data-theme="dark"] .t4-offcanvas .dropdown-menu {
  background-color: var(--dm-band);
}

/* Re-assert light's computed rgba(255,255,255,.6) so the --body-text-color remap cannot retint the panel. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .separator,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link {
  color: rgba(255, 255, 255, .6);
}

html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header {
  border-color: rgba(255, 255, 255, .1);
}

/* Drilldown carets — one consistent chevron at every level. The full base chain is needed to win on specificity. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
  background-color: transparent;
  color: rgba(255, 255, 255, .6);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle::after {
  color: rgba(255, 255, 255, .6);
}
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,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:active {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover::after,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus::after,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:active::after {
  color: #fff;
}

/* Off-canvas close (×) — clean white glyph on the header, no tint box. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close {
  background-color: transparent;
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close span {
  color: rgba(255, 255, 255, .92);
}
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:focus,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:active {
  background-color: rgba(255, 255, 255, .14);
}

/* 18. Article tools dropdown (print/email icons) */
html[data-theme="dark"] .icons .dropdown-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border);
}

html[data-theme="dark"] .icons .dropdown-menu .dropdown-item {
  color: var(--dm-text);
}

html[data-theme="dark"] .icons .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .icons .dropdown-menu .dropdown-item:focus {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
}

html[data-theme="dark"] .dropdown-divider { border-color: var(--dm-border); }

/* 19. Breadcrumbs */
html[data-theme="dark"] #t4-breadcrumbs,
html[data-theme="dark"] .t4-breadcrumbs {
  background-color: var(--dm-bg);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .breadcrumb { background-color: transparent; }
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
html[data-theme="dark"] .breadcrumb .divider:before {
  color: var(--dm-text-muted);
}
html[data-theme="dark"] .breadcrumb-item a,
html[data-theme="dark"] a.pathway { color: var(--dm-accent); }

/* The rest rule above out-specifies light's a:hover, so carry the hover companion. */
html[data-theme="dark"] .breadcrumb-item a:hover,
html[data-theme="dark"] .breadcrumb-item a:focus,
html[data-theme="dark"] a.pathway:hover,
html[data-theme="dark"] a.pathway:focus { color: #ec0cba; }

/* 20. Owl carousel controls */
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-nav button,
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-nav button.owl-prev,
html[data-theme="dark"] .acm-slideshow .owl-carousel .owl-nav button.owl-next {
  background: var(--dm-surface-2);
  color: var(--dm-heading);
}

html[data-theme="dark"] .carousel-indicators li { background-color: rgba(255, 255, 255, .6); }

/* 21. Misc separators / decorations */
html[data-theme="dark"] .t4-footer .nav > li:before,
html[data-theme="dark"] .t4-footer .footer-info small:after {
  color: var(--dm-text-muted);
}

html[data-theme="dark"] .testimonial-block:after { background-color: rgba(255, 255, 255, .1); }

html[data-theme="dark"] .t4-offcanvas-toggle .toggle-bars:before,
html[data-theme="dark"] .t4-offcanvas-toggle .toggle-bars:after {
  background-color: rgba(255, 255, 255, .8);
}

/* Header search chip (a pseudo-element with its own light-grey background) */
html[data-theme="dark"] .t4-header .form-inline .search:before {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}

/* 22. Standalone documents (error.php / offline.php / error-t4.php). They load only their own error.css / offline.css / jpages.css, so they need explicit surface rules. */
html[data-theme="dark"] body.page-error,
html[data-theme="dark"] body.page-error .main,
html[data-theme="dark"] .error,
html[data-theme="dark"] #outline,
html[data-theme="dark"] #errorboxoutline {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html[data-theme="dark"] .error-message h2,
html[data-theme="dark"] .error-message span,
html[data-theme="dark"] .wrap-text h2 {
  color: var(--dm-heading);
}

/* The giant "404" — mirror light's prominence with the dark heading colour. */
html[data-theme="dark"] .error-code,
html[data-theme="dark"] .error-code span {
  color: var(--dm-heading);
}

/* The exclusions are load-bearing: .button-home and the filled controls sit on magenta and must keep their white labels. */
html[data-theme="dark"] body.page-error a:not(.btn):not(.button-home) {
  color: var(--dm-accent);
}

html[data-theme="dark"] .button-home,
html[data-theme="dark"] .button-home:hover,
html[data-theme="dark"] .button-home:focus {
  color: #fff;
}

html[data-theme="dark"] .t4-error-page {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html[data-theme="dark"] .t4-error-msg h1,
html[data-theme="dark"] .t4-error-msg h3 { color: var(--dm-heading); }

html[data-theme="dark"] #frame.outline,
html[data-theme="dark"] body.contentpane,
html[data-theme="dark"] .offline-wrap {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

/* offline.css paints the site title #12114a — invisible on the dark page. */
html[data-theme="dark"] .outline h1 {
  color: var(--dm-heading);
}

/* Its inputs carry `color:#212529 !important` + an #edf5ff border. */
html[data-theme="dark"] .outline input,
html[data-theme="dark"] #frame.outline .form-control,
html[data-theme="dark"] #frame.outline input[type="text"],
html[data-theme="dark"] #frame.outline input[type="password"] {
  border-color: var(--dm-field-border);
  color: var(--dm-text) !important;
  background-color: var(--dm-surface-2);
}

/* 23. com_users — reset / remind panels, and the component's own field rule, which out-ranks §13 and would otherwise keep light's outline. */
html[data-theme="dark"] div.com-users-remind,
html[data-theme="dark"] div.com-users-reset {
  background-color: var(--dm-surface);
}

html[data-theme="dark"] .com_users fieldset .controls input:not([type=checkbox]) {
  border-color: var(--dm-field-border);
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] .com_users fieldset .controls input:not([type=checkbox]):focus {
  border-color: var(--dm-accent);
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

/* c) The login view has no .com_users/.controls wrapper — its fields live in the
      .login-wrap chain, which out-ranks both §13 and §23-b, so the border has to
      be matched through that same chain. */
html[data-theme="dark"] .login-wrap .form-group:not(.form-check):not(.radio):not(.checkbox) .col input,
html[data-theme="dark"] .login-wrap .control-group:not(.form-check):not(.radio):not(.checkbox) .col input {
  border-color: var(--dm-field-border);
}

html[data-theme="dark"] .login-wrap .form-group:not(.form-check):not(.radio):not(.checkbox) .col input:focus,
html[data-theme="dark"] .login-wrap .control-group:not(.form-check):not(.radio):not(.checkbox) .col input:focus {
  border-color: var(--dm-accent);
}

/* d) Login-module secondary links: #6c757d passes AA on white but not on --dm-bg. Mirror the muted relationship, not the literal hex. */
html[data-theme="dark"] #login-form ul.mod-login__options li a {
  color: var(--dm-text-muted);
}

/* Login view: keep the password field and its show-password button on one row.
   The template's block inputs are width:100%, so Bootstrap's wrapping input-group
   drops the button onto its own line. Layout fix — applies in both modes. */
.login-wrap .input-group { flex-wrap: nowrap; }
.login-wrap .input-group > .form-control { min-width: 0; }

/* ...and square the joining corners so the two read as one control. The 80px pill
   comes from the .login-wrap chain, which also out-ranks Bootstrap's own
   .input-group > .form-control:not(:last-child) — so restate that whole chain. */
.login-wrap .form-group:not(.form-check):not(.radio):not(.checkbox) .col .input-group > input:not(:last-child),
.login-wrap .control-group:not(.form-check):not(.radio):not(.checkbox) .col .input-group > input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}