/* =============================================================================
   JA Alpha — Dark Mode
   -----------------------------------------------------------------------------
   Light mode is the original, approved design and is NEVER modified here.
   Every rule below is scoped under html[data-theme="dark"] EXCEPT the toggle
   button base (visible in both modes). Dark MIRRORS light's relationships — it
   never adds contrast/borders/boxes that light does not have.
   Brand accent (coral #ec4e4f / --color-primary) is kept unchanged.
   ============================================================================= */

/* ---- 1. Toggle button (visible in BOTH modes; solid header → transparent) -- */
.t4-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; margin:0 .25rem;
  border:0; border-radius:50%;
  background:transparent; color:inherit; cursor:pointer;
  position:relative; line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
.t4-theme-toggle:hover{ background:rgba(127,127,127,.14); }
.t4-theme-toggle svg{ vertical-align:middle; }
/* Icon swap — scope under .t4-theme-toggle so these beat the generic svg rule (light: moon only) */
.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; }

/* =============================================================================
   2. DARK PALETTE + TOKEN REMAP
   ============================================================================= */
html[data-theme="dark"]{
  /* Dark palette (neutral, slightly cool to mirror the near-black secondary) */
  --dm-bg:#15171a;          /* page background                        */
  --dm-band:#1b1d21;        /* subtle band / bg-light sections        */
  --dm-surface:#1f2125;     /* card / panel surface                   */
  --dm-surface-2:#282b30;   /* elevated surface (inputs, dropdowns)   */
  --dm-border:#32363c;      /* one divider token for all borders      */
  --dm-field-border:#474c54;/* one step up: form fields, outlines     */
  --dm-text:#c7cad0;        /* body copy                              */
  --dm-text-muted:#8b9099;  /* meta / muted                           */
  --dm-heading:#f0f2f5;     /* headings                               */

  /* Brand accent kept; lighter hover for dark (light's hover goes darker) */
  --ja-accent:#ec4e4f;
  --ja-accent-hover:#f47374;

  /* Remap the template's own color TOKENS (the big lever) */
  --body-bg-color: var(--dm-bg);
  --body-text-color: var(--dm-text);
  --color-light: var(--dm-band);     /* .bg-light / light sections read this */
  --body-link-color: var(--ja-accent);
  --body-link-hover-color: var(--ja-accent-hover);
  --primary_light: var(--dm-surface);   /* #fff7f5 tint → drives dropdowns, pagination, tint cards */
  /* KEEP --color-primary (brand) unchanged. */

  color-scheme: dark;
}

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

/* Headings (no --heading-color token in this template; literal near-black) */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .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);
}

/* Generic borders → one token (refined per-component in the probe loop) */
html[data-theme="dark"] hr{ border-color:var(--dm-border); }

/* =============================================================================
   4. PER-COMPONENT OVERRIDES  (added below via the probe→fix→verify loop)
   ============================================================================= */

/* ---- 4.1 Header bar + topbar ---------------------------------------------- */
html[data-theme="dark"] .t4-header.t4-palette-mainnav{
  background:var(--dm-bg) !important;
  border-bottom-color:var(--dm-border) !important;
}
html[data-theme="dark"] .t4-topbar{
  border-bottom-color:var(--dm-border);
  color:var(--dm-text-muted);
}
html[data-theme="dark"] .t4-topbar b{ color:var(--dm-text); }
/* hamburger / toggle bars (#2E2E2E in light) */
html[data-theme="dark"] #t4-header-wrap .navbar-toggler .toggle-bars,
html[data-theme="dark"] #t4-header-wrap .navbar-toggler .toggle-bars:before,
html[data-theme="dark"] #t4-header-wrap .navbar-toggler .toggle-bars:after{ background:var(--dm-text); }
html[data-theme="dark"] #t4-header-wrap .navbar-toggler:hover .toggle-bars,
html[data-theme="dark"] #t4-header-wrap .navbar-toggler:hover .toggle-bars:before,
html[data-theme="dark"] #t4-header-wrap .navbar-toggler:hover .toggle-bars:after{ background-color:var(--dm-heading); }

/* ---- 4.2 Main nav links (light uses !important) --------------------------- */
/* a:not(.btn) — exclude .btn CTAs so they keep their own white-on-accent hover (gotcha §7/§35) */
html[data-theme="dark"] .t4-palette-mainnav,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a,
html[data-theme="dark"] .t4-palette-mainnav a:not(.btn){ color:var(--dm-text) !important; }
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li.active>a,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li.show>a,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:hover,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:focus,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:active,
html[data-theme="dark"] .t4-palette-mainnav a:not(.btn):hover,
html[data-theme="dark"] .t4-palette-mainnav a:not(.btn):focus,
html[data-theme="dark"] .t4-palette-mainnav a:not(.btn):active{ color:var(--ja-accent) !important; }
/* caret triangle (border-top-color = link color) */
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a .item-caret::before{ border-top-color:var(--dm-text) !important; }
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li.active>a .item-caret::before,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li.show>a .item-caret::before,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:hover .item-caret::before,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:focus .item-caret::before,
html[data-theme="dark"] .t4-palette-mainnav .navbar-nav>li>a:active .item-caret::before{ border-top-color:var(--ja-accent) !important; }
html[data-theme="dark"] .t4-palette-mainnav .module-title span,
html[data-theme="dark"] .t4-palette-mainnav h3{ color:var(--dm-heading); }

/* ---- 4.3 Megamenu dropdown panels ----------------------------------------- */
html[data-theme="dark"] .t4-megamenu .dropdown-menu{
  background:var(--dm-surface) !important;
  box-shadow:0 0 0 1px var(--dm-border);
}
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>.nav-link,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .dropdown-item{ color:var(--dm-text); }
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>a:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>a:focus,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>a:active,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li>.nav-link:hover,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .dropdown-item:hover{ color:var(--ja-accent); }
html[data-theme="dark"] .t4-megamenu .mega-col-title,
html[data-theme="dark"] .t4-megamenu .mega-col-nav .mega-col-title,
html[data-theme="dark"] .t4-megamenu .mega-col-module .mega-col-title,
html[data-theme="dark"] .t4-megamenu .t4-module .module-title{
  color:var(--dm-heading);
  border-bottom-color:var(--dm-border);
}
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:hover,
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:focus,
html[data-theme="dark"] .t4-megamenu .t4-module .nav li.nav-item a:active{ background-color:var(--dm-surface-2); }
/* collapsed (mobile) megamenu panel: #fff7f5 in light */
html[data-theme="dark"] .nav-breakpoint-sm div.t4-megamenu,
html[data-theme="dark"] .nav-breakpoint-md div.t4-megamenu{
  background:var(--dm-band);
  border-top-color:var(--dm-border);
  border-bottom-color:var(--dm-border);
}

/* ---- 4.4 Header search (dark PNG magnifier → light SVG; dark focus field) -- */
html[data-theme="dark"] .head-search .search .form-control,
html[data-theme="dark"] .head-search .search .inputbox,
html[data-theme="dark"] .head-search .search .search-query{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c7cad0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  color:var(--dm-text);
}
html[data-theme="dark"] .head-search .search .form-control:focus,
html[data-theme="dark"] .head-search .search .inputbox:focus,
html[data-theme="dark"] .head-search .search .search-query:focus{
  background-color:var(--dm-surface-2);
  border-color:var(--dm-field-border);
  color:var(--dm-text);
}

/* ---- 4.5 Global utilities & emphasis text --------------------------------- */
html[data-theme="dark"] .bg-light{ background-color:var(--dm-band) !important; }
html[data-theme="dark"] .text-dark{ color:var(--dm-heading) !important; }
html[data-theme="dark"] .text-dark:hover,
html[data-theme="dark"] a.text-dark:hover,
html[data-theme="dark"] a.text-dark:focus{ color:var(--ja-accent) !important; }
html[data-theme="dark"] .link-dark{ color:var(--dm-heading) !important; }
/* (.link-dark / page-header / categories hover already resolve to #ec4e4f — keep) */
/* .btn-link "Request demo" style text buttons (literal #2E2E2E) */
html[data-theme="dark"] .btn-link{ color:var(--dm-text); }
html[data-theme="dark"] .btn-link:hover,
html[data-theme="dark"] .btn-link:focus{ color:var(--ja-accent); }

/* ---- 4.6 Logo swap (logo.png has dark wordmark → light variant in dark) ---- */
html[data-theme="dark"] .logo-img{ content:url("/images/joomlart/logo/logo-light.png"); }
html[data-theme="dark"] .logo-img-sm{ content:url("/images/joomlart/logo/logo-mobile-light.png"); }
/* text logo wordmark (#2E2E2E in light → readable in dark) */
html[data-theme="dark"] .navbar-brand.logo-text .site-name{ color:var(--dm-heading) !important; }
html[data-theme="dark"] .navbar-brand.logo-text .site-slogan{ color:var(--dm-text) !important; }
/* offcanvas burger bars (#2E2E2E in light → readable in dark) */
html[data-theme="dark"] .t4-offcanvas-toggle .toggle-bars,
html[data-theme="dark"] .t4-offcanvas-toggle .toggle-bars:before,
html[data-theme="dark"] .t4-offcanvas-toggle .toggle-bars:after{ background-color:var(--dm-text) !important; }
html[data-theme="dark"] .t4-offcanvas-toggle:hover .toggle-bars,
html[data-theme="dark"] .t4-offcanvas-toggle:hover .toggle-bars:before,
html[data-theme="dark"] .t4-offcanvas-toggle:hover .toggle-bars:after{ background-color:var(--ja-accent) !important; }

/* ---- 4.7 Owl carousel arrows (mask fill #2E2E2E → light) ------------------- */
html[data-theme="dark"] .owl-carousel .owl-nav>button{ background-color:var(--dm-text); }

/* ---- 4.8 Decorative vertical lines (rgba(0,0,0,.03) → light) --------------- */
html[data-theme="dark"] div.t4-verticle-lines .line-item{ background:rgba(255,255,255,.045); }

/* ---- 4.9 Home: service cards overlapping the hero (style-2) ---------------- */
/* The ::before white panel must become an opaque dark surface (it covers the hero). */
html[data-theme="dark"] .acm-features.style-2 .features-item:before,
html[data-theme="dark"] .acm-features.style-2 .features-item.no-link{ background:var(--dm-surface); }
html[data-theme="dark"] .acm-features.style-2 .features-item h4{ border-bottom-color:var(--dm-border); }
/* hover .action keeps its dark circle (#3F3836) → nudge to elevated surface */
html[data-theme="dark"] .acm-features.style-2 .features-item:hover .action{ background:var(--dm-surface-2); color:var(--dm-heading) !important; }

/* ---- 4.10 Home: hero style-2 white decorative SVG (::before) --------------- */
html[data-theme="dark"] .acm-hero.style-2:before{ background-color:rgba(255,255,255,.04); }

/* ---- 4.11 Home: features style-5 (image + side panels) -------------------- */
html[data-theme="dark"] .acm-features.style-5 .features-image .features-item-wrap .features-item{ background:var(--dm-surface); }
html[data-theme="dark"] .acm-features.style-5 .features-image .features-item-wrap .features-item:nth-child(2n){ background:var(--dm-surface-2); }

/* ---- 4.12 Owl carousel dots (#EBEBEB / #fff on white → muted on dark) ------ */
html[data-theme="dark"] .owl-carousel .owl-dots .owl-dot{ background:var(--dm-surface-2); border-color:var(--dm-bg); }
html[data-theme="dark"] .owl-carousel .owl-dots .owl-dot.active{ background:var(--dm-text); }

/* ---- 4.13 Article-list module (carousel) titles (#2E2E2E literal) ---------- */
html[data-theme="dark"] .mod-article-list .article-content .mod-articles-category-title{ color:var(--dm-heading); }

/* ---- 4.14 Mask-image carousel arrows (style-4 / testimonials) ------------- */
/* These arrows are mask-image: the FILL is background-color (#2E2E2E in light).
   The source selector (0,4,1) out-ranks the generic 4.7 rule, so it must be
   re-set here at matching specificity — setting only `color` is a no-op. */
html[data-theme="dark"] .acm-features.style-4 .owl-carousel .owl-nav>button,
html[data-theme="dark"] .acm-testimonial.style-1 .owl-carousel .owl-nav>button{ color:var(--dm-text); background-color:var(--dm-text); }

/* ---- 4.15 Feature / description lists (ul.features-list, .description ul) -- */
html[data-theme="dark"] ul.features-list,
html[data-theme="dark"] .description ul{ color:var(--dm-text); }

/* =============================================================================
   5. SHARED INTERIOR COMPONENTS
   ============================================================================= */

/* ---- 5.1 Form controls ---------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-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);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input:focus{
  background-color:var(--dm-surface-2);
  border-color:var(--dm-field-border);
  color:var(--dm-text);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:var(--dm-text-muted); }
html[data-theme="dark"] .input-group-text{
  background-color:var(--dm-surface);
  border-color:var(--dm-field-border);
  color:var(--dm-text-muted);
}
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label{ color:var(--dm-text); }

/* ---- 5.2 Pagination ------------------------------------------------------- */
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-item.disabled .page-link{
  background-color:var(--dm-surface);
  border-color:var(--dm-border);
  color:var(--dm-text-muted);
}
/* .page-item.active stays Bootstrap blue (#2196F3) — by-design */

/* ---- 5.3 Tables ----------------------------------------------------------- */
html[data-theme="dark"] .table{ color:var(--dm-text); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th{ color:var(--dm-heading); }
html[data-theme="dark"] table thead th{ border-bottom-color:var(--dm-border); }
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th{ border-color:var(--dm-border); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){ background-color:rgba(255,255,255,.04); color:var(--dm-text); }
html[data-theme="dark"] .table-hover tbody tr:hover{ color:var(--dm-heading); }

/* ---- 5.4 Titles & heading links (literal #2E2E2E) ------------------------- */
html[data-theme="dark"] h2.item-title a,
html[data-theme="dark"] .item-title h2 a,
html[data-theme="dark"] .page-header h2 a,
html[data-theme="dark"] .categories-list h2 a,
html[data-theme="dark"] .heading-link,
html[data-theme="dark"] .contact .plain-style .contact-title h2,
html[data-theme="dark"] .contact .plain-style .title-info h2{ color:var(--dm-heading); }
html[data-theme="dark"] .categories-portfolio li a{ color:var(--dm-text); }

/* ---- 5.5 Text utilities --------------------------------------------------- */
html[data-theme="dark"] .text-light{ color:#e9ecef !important; }       /* dual-use --color-light: keep light */
html[data-theme="dark"] .text-secondary{ color:var(--dm-text-muted) !important; }
html[data-theme="dark"] .display-1,
html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3,
html[data-theme="dark"] .display-4{ color:var(--dm-heading); }

/* ---- 5.6 Sidebar module list links (categories, latest, etc.) ------------- */
html[data-theme="dark"] .categories-module a,
html[data-theme="dark"] .categories-module>li a,
html[data-theme="dark"] .latestnews li a{ color:var(--dm-text); }
html[data-theme="dark"] .categories-module>li{ color:var(--dm-text-muted); }
/* .mod-light module title stays accent (#ec4e4f) — by-design */

/* ---- 5.7 Tags (article tags, popular tags, all-tags) ---------------------- */
html[data-theme="dark"] .tags>li>a{ background:rgba(255,255,255,.07); color:var(--dm-text); }
html[data-theme="dark"] .tags>li>a:hover,
html[data-theme="dark"] .tags>li>a:focus,
html[data-theme="dark"] .tags>li>a:active{ background:var(--dm-surface-2); color:var(--dm-heading); }
html[data-theme="dark"] .tagspopular ul>li{ background:var(--dm-surface-2); color:var(--dm-text); }
html[data-theme="dark"] .tagspopular ul>li>a{ color:var(--dm-text-muted); }
html[data-theme="dark"] .all-tags li a{ border-color:var(--dm-field-border); color:var(--dm-text-muted); }
html[data-theme="dark"] .all-tags li a:hover,
html[data-theme="dark"] .all-tags li a:focus,
html[data-theme="dark"] .all-tags li a:active{ background-color:var(--dm-surface-2); color:var(--dm-heading); }

/* ---- 5.8 Portfolio detail meta list (.list-info) -------------------------- */
html[data-theme="dark"] ul.list-info{ color:var(--dm-text); }
/* .text-primary labels (Client:/Date:) stay Bootstrap blue — by-design */

/* ---- 5.9 List groups (com-tags category list, generic) -------------------- */
html[data-theme="dark"] .list-group-item{
  background-color:var(--dm-surface);
  border-color:var(--dm-border);
  color:var(--dm-text);
}
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item a{ color:var(--dm-text); }
/* light explicitly removes the item hover bg → mirror it (don't add a fill) */
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item:hover{ background-color:transparent; }
/* separator between items is an ID/3-class #EBEBEB border the generic 5.9 rule can't beat */
html[data-theme="dark"] .com-tags-tag.tag-category .list-group .list-group-item+.list-group-item{ border-top-color:var(--dm-border); }

/* ---- 5.10 Smart Search / com_finder filter select (4-level specificity) --- */
html[data-theme="dark"] .com-finder #finder-filter-window .filter-branch .controls select{
  color:var(--dm-text);
  background-color:var(--dm-surface-2);
  border-color:var(--dm-field-border);
}

/* ---- 5.11 Portfolio task list + service-detail clients/accordion ---------- */
html[data-theme="dark"] .task-wrap>li .task-title{ color:var(--dm-heading); }
html[data-theme="dark"] .view-services-detail .clients-inner{ background:var(--dm-surface); border-color:var(--dm-border); }
html[data-theme="dark"] .view-services-detail .clients-inner .row+.row{ border-top-color:var(--dm-border); }
html[data-theme="dark"] .view-services-detail .clients-inner .row .client-item+.client-item{ border-left-color:var(--dm-border); }
html[data-theme="dark"] .view-services-detail #accordion .card .card-header a{ color:var(--dm-heading); }

/* ---- 5.12 Fieldset legends (registration overlap label, profile divider) -- */
html[data-theme="dark"] .registration fieldset legend{ background-color:var(--dm-bg); color:var(--dm-text); }
html[data-theme="dark"] .profile fieldset legend{ border-bottom-color:var(--dm-border); color:var(--dm-heading); }
html[data-theme="dark"] #member-profile fieldset legend{ color:var(--dm-heading); }

/* ---- 5.12b com_users remind / reset cards (#fafafa surface + #EBEBEB frame) --
   Centered bordered card on the page in light → mirror as a subtle dark surface. */
html[data-theme="dark"] div.com-users-remind,
html[data-theme="dark"] div.com-users-reset,
html[data-theme="dark"] .com-users-remind,
html[data-theme="dark"] .com-users-reset{
  background-color:var(--dm-surface);
  border-color:var(--dm-border);
}
html[data-theme="dark"] .com-users-remind fieldset legend,
html[data-theme="dark"] .com-users-reset fieldset legend,
html[data-theme="dark"] .com-users-remind .control-label,
html[data-theme="dark"] .com-users-reset .control-label{ color:var(--dm-text); }
/* profile is a TRANSPARENT bordered card (#EBEBEB frame, no fill) → border only */
html[data-theme="dark"] .com-users-profile{ border-color:var(--dm-border); }

/* ---- 5.13 Tag-category ordering select (high specificity) ----------------- */
html[data-theme="dark"] .tag-category #adminForm .btn-group.float-end .form-select{
  color:var(--dm-text);
  background-color:var(--dm-surface-2);
  border-color:var(--dm-field-border);
}

/* ---- 5.14 Tag-category list-group container (#adminForm ID-specificity) --- */
html[data-theme="dark"] .tag-category #adminForm .category{ background-color:var(--dm-surface); }

/* ---- 5.15 Portfolio info-detail labels (3-class specificity) -------------- */
html[data-theme="dark"] .info-task-wrap .info-detail>li label{ color:var(--dm-text); }

/* ---- 5.16 Bordered tables (#e9ecef → dm-border) --------------------------- */
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); }

/* ---- 5.17 Feature-card descriptions (literal #585858 → dm-text) ----------- */
html[data-theme="dark"] .acm-features .features-item .features-desc,
html[data-theme="dark"] .acm-features .features-content .desc,
html[data-theme="dark"] .features-item .desc{ color:var(--dm-text); }

/* ---- 5.18 Typography utility-demo boxes: keep dark text on LIGHT bg utils -- */
/* (.text-dark normally lifts to light in dark mode, but on explicit light/white/
   warning utility backgrounds it must stay dark to remain readable.) */
html[data-theme="dark"] .bg-white.text-dark,
html[data-theme="dark"] .bg-white .text-dark,
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .bg-warning .text-dark{ color:#2E2E2E !important; }

/* ---- 5.19 Section palette-primary text (inherited #585858) ---------------- */
html[data-theme="dark"] .t4-palette-primary{ color:var(--dm-text); }
html[data-theme="dark"] .t4-palette-primary .module-title span,
html[data-theme="dark"] .t4-palette-primary h3{ color:var(--dm-heading); }
/* .features-more white links stay white (over dark) — by-design */

/* =============================================================================
   6. RE-REVIEW FIXES (15-page parallel audit, 2026-06-24)
   Each verified light-vs-dark with a computed probe before adding.
   ============================================================================= */

/* ---- 6.1 "Read more" buttons (literal #2E2E2E, excluded from .btn-link 4.5) -
   .btn-readmore is a .btn-classed link so the §4.5 .btn-link remap and the §5.4
   title-link remap both skip it → it stays #2E2E2E (1.19:1) on the dark card.
   Recurs on every blog / featured / category view. (gotcha §15) */
html[data-theme="dark"] .btn-readmore,
html[data-theme="dark"] .readmore .btn,
html[data-theme="dark"] a.btn-readmore{ color:var(--dm-text); }
html[data-theme="dark"] .btn-readmore:hover,
html[data-theme="dark"] .btn-readmore:focus,
html[data-theme="dark"] a.btn-readmore:hover,
html[data-theme="dark"] a.btn-readmore:focus{ color:var(--ja-accent); }

/* ---- 6.2 Header "Request A Quote" outline CTA — REST text (#3F3836) ---------
   §4.2 deliberately excludes .btn from the nav-link lift (so the white-on-coral
   hover is preserved), but nothing lifts the outline CTA's REST text → #3F3836
   on the dark header = 1.57:1, label invisible (only the coral border shows).
   Lift rest text to heading; hover stays white-on-coral (untouched). */
/* source sets .t4-palette-mainnav a colour with !important → must match it */
html[data-theme="dark"] .t4-palette-mainnav a.btn.btn-outline-primary{ color:var(--dm-heading) !important; }
html[data-theme="dark"] .t4-palette-mainnav a.btn.btn-outline-primary:hover,
html[data-theme="dark"] .t4-palette-mainnav a.btn.btn-outline-primary:focus{ color:#fff !important; }

/* ---- 6.3 Featured "More Articles" tab links (literal #1d1f22) --------------- */
html[data-theme="dark"] .items-more .nav-tabs>li>a,
html[data-theme="dark"] .items-more .nav-tabs .nav-link{ 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 .nav-link:hover{ color:var(--ja-accent); }
html[data-theme="dark"] .items-more .nav-tabs>li>a:before{ border-top-color:var(--dm-border); }

/* ---- 6.4 Bright #EBEBEB / #e9ecef borders & pseudo-bars not yet remapped ----
   Subtle hairlines on white in light → glaring near-white rules on the dark page
   (13-15:1). One token for all. (gotcha §41 — a strong dark bar in light does NOT
   mirror to a bright bar on dark.) */
html[data-theme="dark"] .t4-typo-example{ border-color:var(--dm-border); }
html[data-theme="dark"] .registration fieldset:before,
html[data-theme="dark"] .com-users-registration fieldset:before{ background-color:var(--dm-border); }
html[data-theme="dark"] .com-finder__search{ border-color:var(--dm-border); }
html[data-theme="dark"] #search-results .result-item{ border-bottom-color:var(--dm-border); }
/* user profile: legend solid rule + dt/dd dashed rows (#EBEBEB → dm-border) */
html[data-theme="dark"] .profile fieldset legend,
html[data-theme="dark"] .profile fieldset dt,
html[data-theme="dark"] .profile fieldset dd{ border-color:var(--dm-border); }

/* ---- 6.5 Smart Search advanced-search "tips" card (stays #fff) -------------- */
/* .card-outline-secondary keeps a white fill + #ebebeb border; hidden by default
   so the scanners miss it, but it flashes white when Advanced search is opened. */
html[data-theme="dark"] .com-finder__tips,
html[data-theme="dark"] .com-finder__tips.card{ background-color:var(--dm-surface); border-color:var(--dm-border); color:var(--dm-text); }

/* ---- 6.6 404 / error-code numeral (literal #2E2E2E heading color) ----------
   In light this is a bold near-black "404" (~12:1, prominent); in dark it stayed
   #2E2E2E (~1.3:1, vanishes). Mirror the prominence → lift to the heading token. */
html[data-theme="dark"] .error-code{ color:var(--dm-heading); }

/* ---- 6.7 Bootstrap alert boxes (pastel bg + dark text → dark tint + light text)
   System/validation messages (login errors, form notices). Mirror light's RELATIONSHIP:
   keep the semantic hue identity but as a dark translucent tint with readable light text. */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-message{ color:#7ddc82; background-color:rgba(40,167,69,.12); border-color:rgba(40,167,69,.38); }
html[data-theme="dark"] .alert-info{ color:#6ed9e6; background-color:rgba(0,160,180,.12); border-color:rgba(0,160,180,.38); }
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-notice{ color:#e6c66b; background-color:rgba(230,180,40,.12); border-color:rgba(230,180,40,.38); }
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error{ color:#f08d86; background-color:rgba(220,53,69,.14); border-color:rgba(220,53,69,.42); }
html[data-theme="dark"] .alert-light{ color:var(--dm-text); background-color:var(--dm-surface); border-color:var(--dm-border); }