/* =========================================================================
   JA Resort — Dark Mode
   -------------------------------------------------------------------------
   Light mode is the original design and is NOT modified. Every rule below is
   scoped under html[data-theme="dark"]. Dark MIRRORS light — it never adds
   contrast light lacks. Loaded AFTER the T4 optimize bundle (via addCustomTag
   in index.php) so equal-specificity ties resolve to dark.

   Palette family: warm deep-green to match JA Resort's identity (the light
   design pairs a cream page #fbf6f3 with deep-green bands #122223/#294138 and
   a tan accent #d3b298). In dark, the page goes deep green-black, the green
   bands stay as slightly-elevated feature blocks, the tan accent is kept.
   ========================================================================= */

html[data-theme="dark"] {
  /* 1) Dark palette — one source of truth */
  --dm-bg:        #0f1613;   /* page                                   */
  --dm-band:      #14201b;   /* subtle band vs page                    */
  --dm-surface:   #172420;   /* cards / panels                         */
  --dm-surface-2: #1f2f28;   /* elevated / inputs                      */
  --dm-border:    #2b3a33;   /* dividers / frames                      */
  --dm-field-border:#3d4f46;  /* input outlines (one step lighter)     */
  --dm-heading:   #f1efe9;   /* warm off-white headings                */
  --dm-text:      #b8bfb8;   /* body copy                              */
  --dm-muted:     #8b938c;   /* meta / muted                           */

  /* 2) Brand accent — KEEP the tan; lighter hover for dark */
  --dm-accent:      #d3b298;
  --dm-accent-hover:#e3c9b2;

  /* 3) REMAP the template's own color TOKENS (the big lever). */
  --body-bg-color:      var(--dm-bg);
  --body-text-color:    var(--dm-text);
  --body-link-color:    var(--dm-accent);
  --body-link-hover-color: var(--dm-accent-hover);
  --heading_color:      var(--dm-heading);
  --color-light:        var(--dm-band);    /* .bg-light / palette-light surfaces */
  --title_module:       var(--dm-accent);  /* burnt-orange module titles → tan   */
  /* KEEP: --color-primary (tan brand accent).
     KEEP: --color-dark / --color-secondary (the deep-green feature bands). */

  /* Native controls (checkbox, radio, scrollbar, date/color pickers, unstyled
     selects) follow color-scheme — without this they paint with light OS chrome
     (bright white squares) on the dark page. */
  color-scheme: dark;
}

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

/* Headings inherit the remapped --heading_color, but assert for safety ------ */
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);
}

/* Tables (typography page + article prose) — th/td dark text, hairline borders */
html[data-theme="dark"] table,
html[data-theme="dark"] .table { color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] table th,
html[data-theme="dark"] .table th,
html[data-theme="dark"] table thead th { color: var(--dm-heading); border-color: var(--dm-border); }
html[data-theme="dark"] table td,
html[data-theme="dark"] .table td { color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); color: var(--dm-text); }
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--dm-border); }
html[data-theme="dark"] .table > :not(caption) > * > * { box-shadow: none; }

/* <mark> highlight — keep it a highlight but tune for dark (amber wash, dark text) */
html[data-theme="dark"] mark { background-color: #d9c07a; color: #1a1a1a; }

/* Inline code + <pre> code blocks (article prose) — readable dark */
html[data-theme="dark"] code { color: var(--dm-accent); background-color: rgba(255,255,255,.05); }
html[data-theme="dark"] pre { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] pre code { color: var(--dm-text); background: transparent; }
html[data-theme="dark"] blockquote { color: var(--dm-text); border-color: var(--dm-border); }

/* The two spots that use the green tokens as TEXT would be dark-green-on-dark.
   .text-dark / .text-secondary are !important utilities → beat them.           */
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-dark { color: var(--dm-text) !important; }
/* .text-light is a "light text for dark backgrounds" utility — Bootstrap 5.3's
   data-bs-theme=dark can flip it dark; keep it light. */
html[data-theme="dark"] .text-light { color: var(--dm-heading) !important; }

/* =========================================================================
   T4 palette bands — LITERAL hex, NOT var-driven (won't follow the remap).
     .t4-palette-dark  = #294138 deep green   → KEEP (feature band, header)
     .t4-palette-light = #122223 near-black    → KEEP (footer / footnav)
     .t4-palette-gray  = #e1dbd5 taupe         → darken (blog band, testimonial-right)
     .t4-palette-blue  = transparent→cream     → now falls to dark page (ok)
   ========================================================================= */
html[data-theme="dark"] .t4-palette-gray { background-color: var(--dm-band); }
html[data-theme="dark"] .t4-palette-gray,
html[data-theme="dark"] .t4-palette-gray p,
html[data-theme="dark"] .t4-palette-gray li { color: var(--dm-text); }

/* Utility bg/text classes — all !important in the bundle */
html[data-theme="dark"] .bg-white  { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] .bg-light  { background-color: var(--dm-band) !important; }
html[data-theme="dark"] .bg-secondary { background-color: var(--dm-surface-2) !important; }

/* =========================================================================
   Cards / panels — blog + article items (cream #fbf6f3 in light → surface).
   These sit on the (now dark) palette-gray band, so lift to an elevated surface
   with a subtle border, mirroring light's card-on-band relationship.
   ========================================================================= */
html[data-theme="dark"] .article-item,
html[data-theme="dark"] .article-item.has-bg,
html[data-theme="dark"] .blog .item {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .article-item .item-title,
html[data-theme="dark"] .article-item .item-title a,
html[data-theme="dark"] .article-item h1 a, html[data-theme="dark"] .article-item h2 a,
html[data-theme="dark"] .article-item h3 a, html[data-theme="dark"] .article-item h4 a,
html[data-theme="dark"] .article-item h4 a span,
html[data-theme="dark"] .blog .item-title a { color: var(--dm-heading); }
html[data-theme="dark"] .article-meta,
html[data-theme="dark"] .article-hit,
html[data-theme="dark"] .article-item .text-muted { color: var(--dm-muted); }

/* Section titles built on .sub-heading use a LITERAL #294138 (not the var) →
   dark-green-on-dark. Lift them; keep the tan .text-primary eyebrows as-is. */
html[data-theme="dark"] .sub-heading:not(.text-primary) { color: var(--dm-heading); }

/* Outline-secondary buttons ("View All") = green text + green border → lift.
   Hover mirrors light's filled state with the accent. */
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn.btn-outline-secondary {
  color: var(--dm-heading) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:active,
html[data-theme="dark"] .btn.btn-outline-secondary:hover {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: var(--color-dark) !important;
}

/* Solidres booking labels (bare <label>, literal #294138) */
html[data-theme="dark"] .sr-checkavailability-wrap label,
html[data-theme="dark"] div#solidres label,
html[data-theme="dark"] .solidres-module-checkavailability label { color: var(--dm-text); }

/* Display headings (typography demo) + any literal near-black heading text */
html[data-theme="dark"] .display-1, html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3, html[data-theme="dark"] .display-4,
html[data-theme="dark"] .display-5, html[data-theme="dark"] .display-6 { color: var(--dm-heading); }

/* .bg-warning demo swatch carries .text-dark — on the (unchanged) bright-yellow
   fill the text must stay DARK for contrast, not follow the page's light token.
   (.bg-light/.bg-white ARE darkened above, so their .text-dark stays LIGHT via
   the general .text-dark rule — do NOT force them dark here.) */
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .bg-warning .text-dark { color: var(--color-dark) !important; }

/* =========================================================================
   com_content CATEGORY BLOG (view=category&layout=blog) — distinct markup
   (.item-content, not .article-item).
   ========================================================================= */
/* Leading/featured card OVERLAPS the photo (margin-top:-144px) → opaque surface
   + square the top corners so it meets the image flush (no page-bg notch). */
html[data-theme="dark"] .items-leading .item-content {
  background-color: var(--dm-surface);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Content title links (literal green #294138) → heading. Match the template's
   own high-specificity chains so we win (.blog-item .item-content .page-header
   h2 a, category .list-title a, search .result-title a). */
html[data-theme="dark"] .page-header h1 a,
html[data-theme="dark"] .page-header h2 a,
html[data-theme="dark"] .page-header h3 a,
html[data-theme="dark"] .blog-item .item-content .page-header h2 a,
html[data-theme="dark"] .items-row .item-content .page-header h2 a,
html[data-theme="dark"] .blog-item .item-content h2.item-title a,
html[data-theme="dark"] .items-row .item-content h2.item-title a,
html[data-theme="dark"] .item-content h2 a,
html[data-theme="dark"] .item-content h3 a,
html[data-theme="dark"] .item-content .item-title a,
html[data-theme="dark"] h2.item-title a,
html[data-theme="dark"] .item-title h2 a,
html[data-theme="dark"] .category .list-title a,
html[data-theme="dark"] .search .search-results .result-title a,
html[data-theme="dark"] .search #search-results .result-title a,
html[data-theme="dark"] .com-finder #search-results .result-title a,
html[data-theme="dark"] .items-more .com-content-category-blog__link a,
html[data-theme="dark"] .items-more ol a { color: var(--dm-heading); }

/* Pagination (.page-link white #fff, blue text) → dark; active stays tan */
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.disabled .page-link { color: var(--dm-muted); background-color: var(--dm-surface); }

/* Login-module input-group icon boxes (cream #e1dbd5) → dark, matching the field */
html[data-theme="dark"] .input-group-text {
  background-color: var(--dm-surface-2);
  color: var(--dm-muted);
  border-color: var(--dm-field-border);
}

/* =========================================================================
   Chrome — nav caret, breadcrumb divider, dividers/borders
   ========================================================================= */
/* Nav dropdown caret is a CSS triangle border-top-color = body text/tan.
   In the dark-green header (palette-dark) it's already recolored per band;
   just ensure any base caret reads on dark. */
html[data-theme="dark"] .item-caret::before { border-top-color: currentColor; }

/* Breadcrumb "/" divider uses literal #7b8383 — mute it on dark */
html[data-theme="dark"] .breadcrumb-item::before { color: var(--dm-muted); }

/* =========================================================================
   DESKTOP MEGA-MENU dropdown panels — white #fff surface with near-black
   links + dark-green #294138 column titles in light (a light panel dropping
   from the deep-green header). Wholly unthemed in dark → white panel + dark
   text. These are display:none when closed so static scans never see them
   (gotcha §47). Mirror as a dark surface; keep light's tan hover.
   ========================================================================= */
html[data-theme="dark"] .t4-megamenu .dropdown-menu,
html[data-theme="dark"] .mega-dropdown-menu {
  background: var(--dm-surface);
  border-color: 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"] .mega-dropdown-menu .nav-link { 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.active > a,
html[data-theme="dark"] .t4-megamenu .dropdown-menu li.current > a,
html[data-theme="dark"] .mega-dropdown-menu .nav-link:hover { color: var(--dm-accent); }
/* mega column headings (h3.mega-col-title + its inner span, literal #294138) */
html[data-theme="dark"] .t4-megamenu .dropdown-menu .mega-col-title,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .mega-col-title span,
html[data-theme="dark"] .t4-megamenu .dropdown-menu .mega-group-title,
html[data-theme="dark"] .mega-dropdown-menu .mega-col-title { color: var(--dm-heading); }
/* dropdown divider hairlines */
html[data-theme="dark"] .t4-megamenu .dropdown-menu .dropdown-divider,
html[data-theme="dark"] .t4-megamenu .dropdown-menu hr { border-color: var(--dm-border); }

/* Generic hairlines that used light literals */
html[data-theme="dark"] hr { border-color: var(--dm-border); }
html[data-theme="dark"] .t4-section + .t4-section { border-color: var(--dm-border); }

/* Sidebar divider (taupe #e1dbd5 vertical border between mainbody and sidebar-r) —
   subtle on the cream page, a bright line on dark. Route to the divider token. */
html[data-theme="dark"] .t4-col.sidebar-r,
html[data-theme="dark"] .t4-col.sidebar-l { border-color: var(--dm-border); }

/* Pagination counter box + category "Page N of M" counter (taupe #e1dbd5 frame). */
html[data-theme="dark"] .counter,
html[data-theme="dark"] .com-content-category-blog__counter,
html[data-theme="dark"] .pagination-counter { border-color: var(--dm-border); }

/* Contact view — "Get In Touch" column right divider + the round contact-icon
   frames are all taupe #e1dbd5. Mirror light's subtlety with the divider token. */
html[data-theme="dark"] .contact-information,
html[data-theme="dark"] .contact .plain-style .contact-information { border-color: var(--dm-border); border-right-color: var(--dm-border); }
html[data-theme="dark"] .contact-information .fa,
html[data-theme="dark"] .contact-information [class^="fa-"],
html[data-theme="dark"] .contact-information [class*=" fa-"],
html[data-theme="dark"] .jicons-icons,
html[data-theme="dark"] .contact-information .icon { border-color: var(--dm-border); }
/* Stacked social links in the contact "Get In Touch" column use a taupe
   #e1dbd5 top-border as a row separator → the divider token. */
html[data-theme="dark"] .contact-links .nav-stacked > li > a,
html[data-theme="dark"] .contact-links .nav > li > a,
html[data-theme="dark"] .contact-links li + li > a { border-color: var(--dm-border); }

/* Featured / category "column-N" item cards are white #fff (a visible card on the
   cream page) → elevated dark surface, mirroring light's card-on-page relationship. */
html[data-theme="dark"] .item.column-1,
html[data-theme="dark"] .item.column-2,
html[data-theme="dark"] .item.column-3,
html[data-theme="dark"] .item.column-4 {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* --heading_color is DUAL-USE: text color (remapped light) AND a decorative
   dark-green BACKGROUND on the room feature carousel + the Solidres vertical
   form tab. Keep those backgrounds green (mirror light's #294138 band). */
html[data-theme="dark"] .acm-features.style-3 .acm-feature-slide .owl-item,
html[data-theme="dark"] .bg-heading { background: var(--color-secondary); }

/* Room-feature carousel content band: .acm-feature-intro .container-inner::before
   is a large cream #E1DBD5 backdrop. In dark the title is whitened + body/labels
   are light, but the band stays cream → washed white-on-cream (found in review).
   Darken the band to a dark surface so the content reads, mirroring light's
   content-on-band relationship. */
html[data-theme="dark"] .acm-features.style-3 .acm-feature-intro .container-inner::before {
  background: var(--dm-surface);
}
/* Feature line-icon <img>s are dark on the cream band → invert so they read light
   on the darkened band (mirrors their dark-on-light look in light mode). */
html[data-theme="dark"] .acm-features.style-3 .acm-feature-intro .feature-icon img {
  filter: brightness(0) invert(0.8);
}

/* =========================================================================
   SOLIDRES booking component (com_solidres.css — all literal hex, its own
   file NOT in the optimize bundle, so nothing here follows the var remap).
   Container: div#solidres / .com_solidres #solidres / .sr-checkavailability-wrap
   / .solidres-module-checkavailability. Re-skin every white/taupe surface.
   ========================================================================= */
/* Base container text */
html[data-theme="dark"] .com_solidres,
html[data-theme="dark"] div#solidres,
html[data-theme="dark"] .solidres-module-checkavailability { color: var(--dm-text); }

/* Panels / cards (white #fff + rgba(26,68,68,.12) border in light) */
html[data-theme="dark"] div#solidres .box-wrap,
html[data-theme="dark"] div#solidres .button-row-top,
html[data-theme="dark"] div#solidres .button-row-bottom,
html[data-theme="dark"] div#solidres .room_type_row,
html[data-theme="dark"] div#solidres div[id*=tariff-holder-] .tariff-box,
/* NOTE: the BASE `.reservation-single-step-holder` (the /rooms listing wrapper
   that holds ALL the room_type_row cards) is intentionally NOT painted here — in
   light it's transparent (rgba 0,0,0,0) so the warm page bg shows in the 20px
   gaps between the white cards, which is what separates them. Painting it
   --dm-surface filled the whole listing with the card-green, erasing the gaps so
   the cards read as one continuous mass. Only the single-panel checkout steps
   (.guestinfo / .confirmation) get a surface — there the holder IS the card. */
html[data-theme="dark"] div#solidres .reservation-single-step-holder.guestinfo,
html[data-theme="dark"] div#solidres .reservation-single-step-holder.confirmation,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item .wizard ul.steps li.complete {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* The hero booking search bar — opaque white card in light → dark panel */
html[data-theme="dark"] div[id*=t4-section-] .sr-checkavailability-wrap,
html[data-theme="dark"] .sr-checkavailability-wrap {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .sr-checkavailability-wrap .col-sm-6 > div { background: transparent; }

/* Inputs / selects / date fields (bg #fff, text #294138, border #E1DBD5) */
html[data-theme="dark"] div#solidres input[type=text],
html[data-theme="dark"] div#solidres input[type=email],
html[data-theme="dark"] div#solidres input[type=password],
html[data-theme="dark"] div#solidres input[type=number],
html[data-theme="dark"] div#solidres select,
html[data-theme="dark"] div#solidres textarea,
html[data-theme="dark"] .sr-checkavailability-wrap .form-control,
html[data-theme="dark"] .sr-checkavailability-wrap .inputbox,
html[data-theme="dark"] .solidres-module-checkavailability .input-group input.form-control,
html[data-theme="dark"] .solidres-module-checkavailability .input-group .input-group-text,
html[data-theme="dark"] div#solidres .form-select,
html[data-theme="dark"] .sr-checkavailability-wrap .form-select,
html[data-theme="dark"] .sr-checkavailability-wrap .form-control,
html[data-theme="dark"] .solidres-module-checkavailability .form-select,
html[data-theme="dark"] .solidres-module-checkavailability select,
html[data-theme="dark"] select.solidres-module-currency {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-field-border) !important;
}
html[data-theme="dark"] div#solidres input:focus,
html[data-theme="dark"] div#solidres select:focus,
html[data-theme="dark"] div#solidres textarea:focus,
html[data-theme="dark"] .sr-checkavailability-wrap .form-control:focus {
  background: var(--dm-surface-2) !important;
  color: var(--dm-heading) !important;
  border-color: var(--dm-accent) !important;
}
html[data-theme="dark"] div#solidres .datefield,
html[data-theme="dark"] .sr-checkavailability-wrap .datefield { border-color: var(--dm-field-border); }
html[data-theme="dark"] .sr-checkavailability-wrap .datefield i { color: var(--dm-muted); }

/* Headings / green text inside Solidres (#294138 → heading; #7b8383 → muted) */
html[data-theme="dark"] div#solidres .roomtype_name,
html[data-theme="dark"] div#solidres .roomtype_name a,
html[data-theme="dark"] div#solidres .room_index_form_heading,
html[data-theme="dark"] div#solidres h1,
html[data-theme="dark"] div#solidres h2,
html[data-theme="dark"] div#solidres h3,
html[data-theme="dark"] div#solidres h4 { color: var(--dm-heading); }
html[data-theme="dark"] div#solidres .roomtype_desc,
html[data-theme="dark"] div#solidres .text-muted { color: var(--dm-muted); }

/* Badges / labels (bg #E1DBD5 taupe → band; keep light text) */
html[data-theme="dark"] div#solidres .room_type_row .roomtype_name .label-default,
html[data-theme="dark"] div#solidres .room_type_row .roomtype_name .badge {
  background: var(--dm-surface-2) !important;
  color: var(--dm-heading) !important;
}

/* Availability calendar week-day row (#FBF6F3 → band) + asset tabs active */
html[data-theme="dark"] div#solidres div.availability-calendar table tr.row-week-day,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item ul#asset-infoTabs > li.nav-item a.nav-link.active {
  background: var(--dm-band) !important;
  color: var(--dm-heading);
}

/* jQuery-UI datepicker popup (media/com_solidres jquery-ui) */
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .ui-widget-content {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-datepicker-header,
html[data-theme="dark"] .ui-widget-header {
  background: var(--color-secondary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-heading) !important;
}
html[data-theme="dark"] .ui-datepicker td a,
html[data-theme="dark"] .ui-datepicker td span,
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .ui-datepicker td a.ui-state-active,
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-widget-content .ui-state-active {
  background: var(--dm-accent) !important;
  color: var(--color-dark) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-datepicker-title,
html[data-theme="dark"] .ui-datepicker .ui-icon { color: var(--dm-heading); }

/* Solidres asset gallery tab strip is dark-green in light (keep) — ensure text stays light */
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item .sr-photo { color: var(--dm-heading); }

/* Room-detail (reservationasset) headings/labels are painted #294138 by HIGH-specificity
   com_solidres chains that beat the generic #solidres h1..h4 remap above:
     .com_solidres #solidres .reservation_asset_item h1   (room name "Sunflower")
     #solidres .box-information .custom-field-row .info-heading  ("General" etc.)
     div#solidres strong  (tariff "Standard rate")
   → dark-green-on-dark. Match/beat each chain and lift to heading/text. */
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h1,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h2,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h3,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h4,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h5,
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item h6,
html[data-theme="dark"] #solidres .box-information .custom-field-row .info-heading,
html[data-theme="dark"] #solidres .info-heading { color: var(--dm-heading); }
html[data-theme="dark"] #solidres strong { color: var(--dm-heading); }

/* Solidres joomla-tabs strip (Description / Amenities) — the .nav-tabs bottom rule
   keeps a literal cream #fbf6f3 border, a bright line on dark. Route to the token. */
html[data-theme="dark"] .com_solidres #solidres .reservation_asset_item ul#asset-infoTabs,
html[data-theme="dark"] #solidres .joomla-tabs.nav-tabs,
html[data-theme="dark"] .joomla-tabs.nav-tabs,
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--dm-border) var(--dm-border) transparent; }

/* =========================================================================
   GENERIC FORMS — the template HARDCODES every control white with dark-green
   text (`.form-control{color:#294138;background:#fff}`, `.form-select`, native
   `select` incl. a dark caret SVG) and ships NO data-bs-theme support. So ANY
   Joomla form (login, registration, contact, profile, comments, search, com_*
   filters) would render white-on-dark. Dark-skin them all.
   ========================================================================= */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .inputbox,
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"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-select {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  /* The template styles fields with a `border` SHORTHAND (1px solid #e1dbd5)
     that ties/beats a bare border-color override, so the field outline stayed
     taupe on dark. !important on the colour reliably lands the dark token
     (width/style keep coming from the template's shorthand). */
  border-color: var(--dm-field-border) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .inputbox:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--dm-surface-2);
  color: var(--dm-heading);
  border-color: var(--dm-accent) !important;
  box-shadow: none;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .inputbox::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--dm-muted); opacity: 1; }
/* Selects on this template are NATIVE (appearance:auto) — light mode paints NO
   caret background-image and lets the browser draw the native arrow. In dark,
   `color-scheme: dark` (set on :root) already recolours that native arrow light,
   so we must NOT add a background-image caret: a viewBox-only SVG with no
   background-size balloons to the default replaced size (the giant double-arrow
   bug on Room types / Guests). Force it off so we mirror light exactly. */
html[data-theme="dark"] select,
html[data-theme="dark"] .form-select {
  background-image: none;
}
/* form labels + help text */
html[data-theme="dark"] .t4-content label,
html[data-theme="dark"] #t4-main-body label,
html[data-theme="dark"] form label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .form-label { color: var(--dm-text); }
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] small.text-muted { color: var(--dm-muted); }
/* Bootstrap-4 custom-control checkbox/radio pseudos (white box in light) */
html[data-theme="dark"] .custom-control-label::before {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-check-input {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
}

/* Bootstrap cards (white #fff in light) — e.g. com_finder advanced-search
   tips box .com-finder__tips.card.card-outline-secondary → dark surface. */
html[data-theme="dark"] .card {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .card-outline-secondary,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { border-color: var(--dm-border); }
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header { color: var(--dm-heading); }

/* List-group rows (com_tags tagged-items list, etc.) — white #fff + green text */
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"] .list-group-item-action { color: var(--dm-text); }
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  color: var(--dm-heading);
  background-color: var(--dm-surface-2);
}
html[data-theme="dark"] .list-group-item-action:active {
  color: var(--dm-heading);
  background-color: var(--dm-surface-2);
}

/* com_users reset/remind form card (literal cream #fbf6f3 in light → blends on
   the cream page; mirror by making it transparent so text reads on the page). */
html[data-theme="dark"] div.com-users-remind,
html[data-theme="dark"] div.com-users-reset { background-color: transparent; }
/* registration fieldset legend (white) + its divider bar (taupe) */
html[data-theme="dark"] .registration fieldset legend { background-color: transparent; color: var(--dm-heading); }
html[data-theme="dark"] .registration fieldset::before { background-color: var(--dm-border); }

/* Bootstrap semantic alerts — keep the hue, darken the fill, lighten the text
   (mirror: recognizable status colour, readable on the dark page). */
html[data-theme="dark"] .alert-info {
  background-color: rgba(23, 162, 184, .14); border-color: rgba(23, 162, 184, .4); color: #9fdbe4;
}
html[data-theme="dark"] .alert-success {
  background-color: rgba(40, 167, 69, .14); border-color: rgba(40, 167, 69, .4); color: #9ad9a8;
}
html[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .4); color: #e8cf8a;
}
html[data-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, .14); border-color: rgba(220, 53, 69, .4); color: #eda2ab;
}
html[data-theme="dark"] .alert-info a,
html[data-theme="dark"] .alert-success a,
html[data-theme="dark"] .alert-warning a,
html[data-theme="dark"] .alert-danger a { color: var(--dm-accent); }

/* =========================================================================
   Re-review 2026-07 — four "un-remapped affordance" leaks the scanners caught.
   Each is a case where the LITERAL value is identical in light and dark, but the
   VISUAL RELATIONSHIP inverts (a faint chip/hairline that reads on white goes
   invisible on dark, or a semantic colour my generic rule flattened). Mirror the
   relationship, not the hex (principle 2).
   ========================================================================= */
/* 1) Pagination ACTIVE page — light fills it tan (#d3b298) to mark the current
   page; my generic .pagination .page-link rule repaints EVERY link the surface,
   erasing that highlight. Restore the tan fill on the active item (beats the
   generic rule on specificity — .active adds a class). */
html[data-theme="dark"] .pagination .active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--dm-accent);
  border-color: var(--dm-accent);
  color: var(--color-dark);
}

/* 2) Popular-Tags pill chip — source is `.tagspopular li{background:rgba(0,0,0,.06)
   !important}` (+ a `:hover` rgba(0,0,0,.15) !important): a faint grey pill on the
   white sidebar, but translucent-black over #172420 is invisible (the chip
   affordance vanishes). Mirror with a white wash — MUST carry !important to beat
   the source, and mirror the hover step too. */
html[data-theme="dark"] .tagspopular li { background-color: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .tagspopular li:hover { background-color: rgba(255, 255, 255, .12) !important; }

/* 3) List-group row dividers (tagged-items list) — border-bottom is
   rgba(26,68,68,.12) (a visible hairline on white, invisible on dark). It comes
   from a `border` SHORTHAND that ties/beats my bare .list-group-item border-color
   (same trap as the form fields, §42) → force the divider token with !important. */
html[data-theme="dark"] .list-group-item { border-color: var(--dm-border) !important; }

/* 4) Invalid-field error border — light draws a red (#f44336) outline on a
   failed-validation field; my generic .form-control{border-color:…!important}
   flattened it to the neutral field outline, so the error affordance disappears.
   Re-assert a (slightly lifted for dark) red, mirroring light's error cue. */
html[data-theme="dark"] input.invalid,
html[data-theme="dark"] textarea.invalid,
html[data-theme="dark"] select.invalid,
html[data-theme="dark"] .form-control.invalid,
html[data-theme="dark"] .form-select.invalid { border-color: #f4675c !important; }

/* =========================================================================
   Re-review 2026-07 (round 2) — Solidres booking-flow + off-canvas drilldown
   leaks the computed-value scanners caught (all light==light-page-subtle but
   invert to bright-on-dark; mirror the RELATIONSHIP, not the hex).
   ========================================================================= */
/* 1) Solidres room-listing tariff box — `.tariff-box{background:#fafafa}` /
   style3 `{background-color:#f0f1f2}`. The existing rule only covered the
   `tariff-holder-*` boxes, so the room_type_row listing box stayed near-white on
   dark. Mirror light's subtle card-on-page as an elevated surface. (The
   `.tariff-box.is-whole .tariff-value` red band is semantic — leave it.) */
html[data-theme="dark"] .com_solidres .tariff-box,
html[data-theme="dark"] div#solidres .tariff-box,
html[data-theme="dark"] .sr-reservation-form .tariff-box {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border);
}

/* NOTE (verify-before-fix): the Solidres booking WIZARD step circles were
   flagged by the leak scanner (white `.badge`) but the light-vs-dark screenshots
   are IDENTICAL — the white circle sits on the TAN active band and the white
   rings on the dark-green pending bands (both correct in light too, §31). Forcing
   them dark would make the active circle tan-on-tan (invisible). Left as-is. */

/* 2) Off-canvas / mobile-nav submenu drill-down toggle — the drilldown chevron is
   an inner `.btn-toggle` circle (`.t4-offcanvas .t4-off-canvas-body .navbar
   .btn-toggle{background:#f8f0eb;color:#adb5bd}`), a cream disc + grey chevron:
   subtle on the light panel, a bright cream disc on the dark off-canvas. Drop the
   fill, keep a light chevron (gotcha §25 — arrow reads, circle gone). Match the
   template's 4-class off-canvas chain so we win. */
html[data-theme="dark"] .sub-menu-toggle,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle,
html[data-theme="dark"] .navbar .btn-toggle.sub-menu-toggle {
  background-color: transparent;
  color: var(--dm-text);
}

/* 2b) Off-canvas header close (×) — the template spins the glyph on hover
   (`.t4-off-canvas-header .close:hover span{transform:rotate(180deg)}`). The ×
   glyph is 180°-symmetric so the spin adds NO visual value, but the glyph's ink
   box sits ~2.25px below its line-box centre, so rotating flips that to +2.25px
   ABOVE — the × visibly jumps ~4.5px on hover (the "off-centre" report). Kill the
   transform (keep the hover-background feedback). Beat the template's 4-class
   chain with the dark scope. */
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:hover span,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:focus span,
html[data-theme="dark"] .t4-offcanvas .t4-off-canvas-header .close:active span {
  transform: none;
}

/* 3) Tag / tagged-list link HOVER stays Bootstrap blue (#0056b3) in dark — the
   pill/row background was themed but the anchor's hover COLOR was not (gotcha
   §22/§36). Blue on the light pill/white row reads in light; on the dark pill/row
   it's ~1.9:1, illegible. Mirror the relationship: hover lifts to the accent, the
   same as every other themed link hover. Match the template's selector chains. */
html[data-theme="dark"] .tagspopular ul > li > a:hover,
html[data-theme="dark"] .tagspopular ul > li > a:focus {
  color: var(--dm-accent);
}
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 {
  color: var(--dm-accent);
}
/* ...and the ROW hover background — `.com-tags-tag.tag-category .category li:hover`
   forces a light grey `#dee2e6 !important` (subtle on white, a bright grey row on
   dark). Mirror it to the elevated surface (matches the generic list-group hover). */
html[data-theme="dark"] .com-tags-tag.tag-category .category li:hover {
  background-color: var(--dm-surface-2) !important;
}

/* 4) Password-strength <meter> (registration) — the native `<meter>` TRACK is a
   pale grey bar that Chrome does NOT recolor via color-scheme, so it reads as a
   bright bar on the dark form (subtle on the light form → inverts). Darken the
   track/bar to the field fill; keep the filled value bar's strength colour. */
html[data-theme="dark"] meter {
  background: var(--dm-surface-2);
  border: 1px solid var(--dm-field-border);
  border-radius: 3px;
}
html[data-theme="dark"] meter::-webkit-meter-bar {
  background: var(--dm-surface-2);
  border-color: var(--dm-field-border);
}
html[data-theme="dark"] meter::-moz-meter-bar { background: var(--dm-surface-2); }

/* =========================================================================
   STANDALONE docs (their own <html>/<body>; darkmode.css linked directly)
   offline.php login form + error.php / error-t4.php 404 page.
   ========================================================================= */
html[data-theme="dark"] body #frame { color: var(--dm-text); }
html[data-theme="dark"] #frame h1,
html[data-theme="dark"] #frame .message { color: var(--dm-heading); }
html[data-theme="dark"] #frame label { color: var(--dm-text); }

/* error.php: body cream→dark, the big numeral + message green→light.
   (.button-home is the tan brand button — dark-green text by design, keep.) */
html[data-theme="dark"] body.page-error { background: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .error-code,
html[data-theme="dark"] .error-code span { color: var(--dm-heading); }
html[data-theme="dark"] .error-message h2,
html[data-theme="dark"] .error-message h2 span { color: var(--dm-heading); }
html[data-theme="dark"] #errorboxbody p { color: var(--dm-text); }
/* error-t4.php fallback page */
html[data-theme="dark"] body.t4-error-page { background: var(--dm-bg); color: var(--dm-text); }
html[data-theme="dark"] .t4-error-msg h1 { color: var(--dm-heading); }
html[data-theme="dark"] .t4-error-msg .error-message { color: var(--dm-text); }

/* =========================================================================
   Toggle button — the ONE block visible in BOTH modes.
   Solid/transparent header over a photo → transparent bg, icon follows the
   header text colour (inherit), subtle hover wash. Icons cross-fade on <DARK>.
   ========================================================================= */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background-color .2s ease, color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.t4-theme-toggle:hover,
.t4-theme-toggle:focus { background: rgba(127, 140, 120, .16); color: inherit; outline: none; }
.t4-theme-toggle svg { display: block; width: 20px; height: 20px; }
/* Stack the two icons dead-centre with ABSOLUTE positioning, NOT grid.
   The buttons carry Bootstrap responsive-display utilities
   (`.d-lg-inline-flex` on desktop / `.d-lg-none` on mobile) whose
   `display:…!important` beats any `display:inline-grid` set here — so on desktop
   the grid never applied, `grid-area` was ignored, and moon+sun laid out as a
   FLEX ROW: moon in the left half, sun in the right half. That shifted each icon
   ~10px off-centre AND made the glyph jump left↔right when toggling light/dark
   (the "sun & moon misaligned" report). Absolute centring is immune to the
   container's display, so both icons overlap exactly at the button centre in
   every state. */
.t4-theme-toggle .t4-theme-toggle__moon,
.t4-theme-toggle .t4-theme-toggle__sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
.t4-theme-toggle__sun  { opacity: 0; }
.t4-theme-toggle__moon { opacity: 1; }
html[data-theme="dark"] .t4-theme-toggle__sun  { opacity: 1; }
html[data-theme="dark"] .t4-theme-toggle__moon { opacity: 0; }
/* mobile copy: keep it aligned beside the hamburger */
.t4-theme-toggle--nav { margin-inline: 4px; }
/* desktop copy: last child of the flex .mainnav-wrap (align-items:center),
   sitting just after the nav with a CONSTANT gap so the spacing reads the same
   at every desktop width. (margin-left:auto was width-dependent — jammed on
   narrow screens, adrift on wide ones.) It groups with the nav as a utility. */
.mainnav-wrap > .t4-theme-toggle--action { margin-left: 1.5rem; flex: 0 0 auto; }