/* ============================================================================
   White-label dark theme — one seamless surface (Claude.ai-style).
   Loaded ONLY when the white label defines theme colors; every rule is scoped
   under body.wl-dark, driven by the --app-* variables the layout emits:
     --app-bg       page + sidebar + topbar (no color blocks between them)
     --app-surface  cards, panels, modals, inputs
     --app-border   hairline separators
     --app-text     primary text
     --app-muted    secondary text
     --app-accent   links, active states, primary buttons
   ========================================================================== */

/* ---- Base surfaces: everything shares ONE background ------------------- */
body.wl-dark,
body.wl-dark .page-wrapper,
body.wl-dark .inner-page-wrapper,
body.wl-dark .page-content-tab,
body.wl-dark .main-container,
body.wl-dark .container-fluid {
    background-color: var(--app-bg) !important;
    color: var(--app-text);
}

/* ---- Sidebar (same bg as content; hairline separator only) -------------- */
body.wl-dark .app-navbar-container,
body.wl-dark .navbar-custom {
    background: var(--app-bg) !important;
    border-right: 1px solid var(--app-border);
}
body.wl-dark .app-navbar-container .app-menu-item .menu-icon,
body.wl-dark .navbar-custom i,
body.wl-dark .navbar-custom a {
    color: var(--app-muted) !important;
}
/* Main-menu labels are primary navigation, not secondary text: muted grey on a
   near-black sidebar read as disabled, and clashed with the white icons. */
body.wl-dark .app-navbar-container .navbar-title,
body.wl-dark .app-navbar-container li.nav-item a {
    color: var(--app-text) !important;
}
body.wl-dark .app-navbar-container .app-menu-item .menu-icon:hover,
body.wl-dark .app-navbar-container .app-menu-item .menu-icon.active,
body.wl-dark .app-navbar-container .app-menu-item .menu-icon.active i,
body.wl-dark .app-navbar-container .app-menu-item .menu-icon:hover i,
body.wl-dark .app-navbar-container .title-box.active .navbar-title,
body.wl-dark .app-navbar-container .menu-icon:hover + .title-box .navbar-title {
    color: var(--app-text) !important;
}
body.wl-dark .app-navbar-container .app-menu-item .menu-icon.active {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px;
}
body.wl-dark .app-navbar-container .app-submenu {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
body.wl-dark .app-navbar-container .app-submenu a,
body.wl-dark .app-navbar-container .app-submenu .submenu-link {
    color: var(--app-muted) !important;
}
body.wl-dark .app-navbar-container .app-submenu a:hover,
body.wl-dark .app-navbar-container .app-submenu .submenu-link:hover {
    color: var(--app-text) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ---- Topbar (same bg; hairline bottom border) --------------------------- */
body.wl-dark .app-topbar-container,
body.wl-dark .topbar,
body.wl-dark .topbar .navbar-custom,
body.wl-dark .topbar-nav {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--app-border);
}
body.wl-dark .app-topbar-container i,
body.wl-dark .app-topbar-container a,
body.wl-dark .topbar i,
body.wl-dark .topbar a {
    color: var(--app-muted);
}
body.wl-dark .app-topbar-container a:hover i,
body.wl-dark .topbar a:hover i {
    color: var(--app-text);
}

/* ---- Cards / panels ------------------------------------------------------ */
body.wl-dark .card,
body.wl-dark .card-header,
body.wl-dark .card-body,
body.wl-dark .card-footer {
    background-color: var(--app-surface) !important;
    color: var(--app-text);
    border-color: var(--app-border) !important;
}
body.wl-dark .card {
    border: 1px solid var(--app-border) !important;
    box-shadow: none !important;
}
body.wl-dark .card-header {
    border-bottom: 1px solid var(--app-border) !important;
}
body.wl-dark .card-footer {
    border-top: 1px solid var(--app-border) !important;
}

/* ---- Typography / links -------------------------------------------------- */
body.wl-dark h1, body.wl-dark h2, body.wl-dark h3,
body.wl-dark h4, body.wl-dark h5, body.wl-dark h6,
body.wl-dark label, body.wl-dark p, body.wl-dark span:not(.badge),
body.wl-dark th, body.wl-dark td, body.wl-dark li, body.wl-dark dt, body.wl-dark dd {
    color: inherit;
}
body.wl-dark a { color: var(--app-accent); }
body.wl-dark a:hover { color: var(--app-accent-hover); }
body.wl-dark .text-dark { color: var(--app-text) !important; }
body.wl-dark .text-muted { color: var(--app-muted) !important; }
body.wl-dark .text-secondary { color: var(--app-muted) !important; }

/* ---- Utility background overrides --------------------------------------- */
body.wl-dark .bg-white { background-color: var(--app-surface) !important; }
body.wl-dark .bg-light { background-color: var(--app-surface) !important; }
body.wl-dark .border,
body.wl-dark .border-top,
body.wl-dark .border-bottom,
body.wl-dark .border-left,
body.wl-dark .border-right { border-color: var(--app-border) !important; }

/* ---- Tables -------------------------------------------------------------- */
body.wl-dark .table { color: var(--app-text); }
body.wl-dark .table th,
body.wl-dark .table td { border-color: var(--app-border) !important; }
body.wl-dark .table thead th {
    background: var(--app-surface) !important;
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); }
body.wl-dark .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--app-text); }

/* ---- Forms ---------------------------------------------------------------
   Controls with an inline background-color are user-colored pickers (stage/
   quality/priority selects on contact edition, duplicate lead, miner agent,
   tasks) — leave their user-configured colors alone. */
body.wl-dark .form-control:not([style*="background-color"]),
body.wl-dark .form-select:not([style*="background-color"]),
body.wl-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([style*="background-color"]),
body.wl-dark textarea:not([style*="background-color"]),
body.wl-dark select:not([style*="background-color"]) {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border);
}
body.wl-dark .form-control:focus,
body.wl-dark input:focus,
body.wl-dark textarea:focus,
body.wl-dark select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none;
}
body.wl-dark ::placeholder { color: var(--app-muted) !important; opacity: .7; }
body.wl-dark .input-group-text {
    background: var(--app-surface) !important;
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .form-control:disabled,
body.wl-dark .form-control[readonly] {
    background-color: var(--app-surface) !important;
    opacity: .7;
}

/* select2 */
body.wl-dark .select2-container--default .select2-selection--single,
body.wl-dark .select2-container--default .select2-selection--multiple {
    background: var(--app-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}
body.wl-dark .select2-container--default .select2-selection__rendered { color: var(--app-text) !important; }
body.wl-dark .select2-dropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}
body.wl-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--app-accent) !important;
}
body.wl-dark .select2-search--dropdown .select2-search__field {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

/* bootstrap-multiselect */
body.wl-dark .multiselect-container {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .multiselect-container li a { color: var(--app-text) !important; }
body.wl-dark .multiselect-container li a:hover { background: rgba(255,255,255,.05) !important; }

/* ---- Sidebar credits box ------------------------------------------------ */
body.wl-dark .app-navbar-container .app-menu-credits-box {
    background: var(--app-surface)!important;
    border-color: var(--app-border)!important;
}
body.wl-dark .app-navbar-container .app-menu-credits-value,
body.wl-dark .app-navbar-container .app-menu-credits-value .mdi,
body.wl-dark .app-navbar-container .app-menu-credits-label,
body.wl-dark .app-navbar-container a.app-menu-credits-usage {
    color: var(--app-text)!important;
}
body.wl-dark .app-navbar-container .app-menu-credits-box.is-low {
    border-color: rgba(224, 168, 0, .55)!important;
    background: rgba(224, 168, 0, .12)!important;
}
body.wl-dark .app-menu-credits-box.is-low .app-menu-credits-value,
body.wl-dark .app-menu-credits-box.is-low .app-menu-credits-value .mdi {
    color: #ffc94d!important;
}
body.wl-dark .app-navbar-container .app-menu-credits-box.is-critical {
    border-color: rgba(240, 130, 40, .60)!important;
    background: rgba(240, 130, 40, .14)!important;
}
body.wl-dark .app-menu-credits-box.is-critical .app-menu-credits-value,
body.wl-dark .app-menu-credits-box.is-critical .app-menu-credits-value .mdi {
    color: #ffab5e!important;
}
body.wl-dark .app-navbar-container .app-menu-credits-box.is-urgent,
body.wl-dark .app-navbar-container .app-menu-credits-box.is-zero {
    border-color: rgba(229, 77, 77, .62)!important;
    background: rgba(229, 77, 77, .15)!important;
}
body.wl-dark .app-menu-credits-box.is-urgent .app-menu-credits-value,
body.wl-dark .app-menu-credits-box.is-urgent .app-menu-credits-value .mdi,
body.wl-dark .app-menu-credits-box.is-zero .app-menu-credits-value,
body.wl-dark .app-menu-credits-box.is-zero .app-menu-credits-value .mdi {
    color: #ff8f8f!important;
}
/* On --app-text, not a stacked opacity — see the sidebar-contrast note. */
body.wl-dark .app-navbar-container .app-menu-credits-split {
    color: var(--app-text)!important;
    opacity: .68;
}

/* ---- Buttons (secondary/light variants; primary comes from whl config) --- */
body.wl-dark .btn-light,
body.wl-dark .btn-secondary,
body.wl-dark .btn-outline-secondary,
body.wl-dark .btn-white {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
}
body.wl-dark .btn-light:hover,
body.wl-dark .btn-secondary:hover,
body.wl-dark .btn-outline-secondary:hover,
body.wl-dark .btn-white:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--app-text) !important;
}
/* Outline-primary had no dark rule and fell through to stock Bootstrap blue,
   turning unreadable on hover. Match the accent, keep it clearly a button. */
body.wl-dark .btn-outline-primary { background: transparent!important; color: var(--app-accent)!important; border: 1px solid var(--app-accent)!important; }
body.wl-dark .btn-outline-primary:hover,
body.wl-dark .btn-outline-primary:focus,
body.wl-dark .btn-outline-primary:active { background: var(--app-accent)!important; color: #fff!important; border-color: var(--app-accent)!important; }
body.wl-dark .btn-link { color: var(--app-accent) !important; }

/* ---- Dropdown menus ------------------------------------------------------ */
body.wl-dark .dropdown-menu {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
body.wl-dark .dropdown-item { color: var(--app-text) !important; }
body.wl-dark .dropdown-item i { color: var(--app-muted); }
body.wl-dark .dropdown-item:hover,
body.wl-dark .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--app-text) !important;
}
body.wl-dark .dropdown-divider { border-color: var(--app-border) !important; }

/* ---- Modals -------------------------------------------------------------- */
body.wl-dark .modal-content,
body.wl-dark .app-modal-box {
    background: var(--app-surface) !important;
    color: var(--app-text);
    border: 1px solid var(--app-border) !important;
}
body.wl-dark .modal-header,
body.wl-dark .app-modal-box .app-modal-header { border-bottom: 1px solid var(--app-border) !important; background: transparent !important; }
body.wl-dark .modal-footer,
body.wl-dark .app-modal-box .app-modal-footer { border-top: 1px solid var(--app-border) !important; background: transparent !important; }
body.wl-dark .modal-title { color: var(--app-text) !important; }
body.wl-dark .close, body.wl-dark .btn-close { color: var(--app-muted) !important; text-shadow: none; }

/* sweetalert2 */
body.wl-dark .swal2-popup {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border);
}
body.wl-dark .swal2-title, body.wl-dark .swal2-html-container { color: var(--app-text) !important; }

/* ---- Tabs / pills / pagination / breadcrumbs ----------------------------- */
body.wl-dark .nav-tabs { border-color: var(--app-border) !important; }
body.wl-dark .nav-tabs .nav-link { color: var(--app-muted); border-color: transparent; }
body.wl-dark .nav-tabs .nav-link.active {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) var(--app-border) transparent !important;
}
body.wl-dark .nav-pills .nav-link { color: var(--app-muted); }
body.wl-dark .nav-pills .nav-link.active { background: var(--app-accent) !important; color: #fff !important; }
body.wl-dark .page-link {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .page-item.active .page-link { background: var(--app-accent) !important; border-color: var(--app-accent) !important; color: #fff !important; }
body.wl-dark .page-item.disabled .page-link { color: var(--app-muted) !important; opacity: .5; }
body.wl-dark .breadcrumb { background: transparent !important; }
body.wl-dark .breadcrumb-item, body.wl-dark .breadcrumb-item a { color: var(--app-muted); }

/* ---- List groups / misc components --------------------------------------- */
body.wl-dark .list-group-item {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .progress { background: rgba(255, 255, 255, 0.08) !important; }
body.wl-dark hr { border-color: var(--app-border) !important; }
body.wl-dark .jumbotron { background: var(--app-surface) !important; }

/* rich text editors */
body.wl-dark .note-editor.note-frame,
body.wl-dark .ql-toolbar, body.wl-dark .ql-container {
    background: var(--app-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}
body.wl-dark .note-editor .note-toolbar { background: var(--app-surface) !important; border-color: var(--app-border) !important; }
body.wl-dark .note-editable { background: var(--app-bg) !important; color: var(--app-text) !important; }
body.wl-dark .ql-snow .ql-stroke { stroke: var(--app-muted); }
body.wl-dark .ql-snow .ql-fill { fill: var(--app-muted); }
body.wl-dark .ql-snow .ql-picker { color: var(--app-muted); }

/* daterangepicker */
body.wl-dark .daterangepicker {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}
body.wl-dark .daterangepicker .calendar-table { background: var(--app-surface) !important; border-color: var(--app-border) !important; }
body.wl-dark .daterangepicker td.off { background: transparent !important; color: var(--app-muted) !important; }
body.wl-dark .daterangepicker td.available:hover { background: rgba(255,255,255,.08) !important; }

/* ---- Scrollbars ----------------------------------------------------------- */
body.wl-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.wl-dark ::-webkit-scrollbar-track { background: var(--app-bg); }
body.wl-dark ::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 6px; }
body.wl-dark ::-webkit-scrollbar-thumb:hover { background: var(--app-muted); }

/* ---- Tayon custom bits ----------------------------------------------------- */
body.wl-dark .tooltipTayon { color: var(--app-accent); }
body.wl-dark .menu-arrow:before { border-right-color: var(--app-surface); }
body.wl-dark .accessing-subaccount-pill { background: var(--app-surface) !important; color: var(--app-text) !important; border: 1px solid var(--app-border); }

/* ============================================================================
   CRM Kanban board (Leads stages view) — Trello-like on the dark theme.
   body.wl-dark prefix outranks kanban-boards.css / blade inline styles.
   ========================================================================== */

/* The board floats directly on the page background (no white card frame). */
body.wl-dark .lead-card,
body.wl-dark .lead-card > .card-body,
body.wl-dark .contact-board-kanban .card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.wl-dark .app-stages { background: transparent !important; }

/* Columns: one subtle raised lane, rounded like Trello lists. */
body.wl-dark .app-stages-wrapper-box {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 14px !important;
    padding: 6px !important;
}
body.wl-dark .app-stages-box {
    border-radius: 10px !important; /* stage keeps its user-configured color */
}
body.wl-dark .app-stages-content {
    background: transparent !important;
}

/* Cards: dark surfaces, readable text, gentle hover lift. */
body.wl-dark .app-single-stage-box {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
    transition: border-color .15s ease, transform .15s ease;
}
body.wl-dark .app-single-stage-box:hover {
    border-color: var(--app-muted) !important;
    transform: translateY(-1px);
}
body.wl-dark .app-single-stage-box .app-single-stage-name {
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
/* Muted card metadata — but NEVER tag pills (.app-single-stage-tags-wrapper li),
   the quality pill (.select-badge) or owner badges (.badge): those carry
   user-configured inline colors that must survive the theme. */
body.wl-dark .app-single-stage-box .app-single-stage-data-wrapper,
body.wl-dark .app-single-stage-box .app-single-stage-data-wrapper li:not(.app-single-stage-tags-wrapper *),
body.wl-dark .app-single-stage-box .app-single-stage-data-wrapper span:not(.select-badge):not(.badge) {
    color: var(--app-muted) !important;
}
body.wl-dark .app-single-stage-box .app-stages-icon,
body.wl-dark .app-single-stage-box .app-stages-icon i {
    color: var(--app-muted) !important;
}
body.wl-dark .app-single-stage-box .app-single-stage-btn-edit,
body.wl-dark .app-single-stage-box .app-single-stage-btn-edit i {
    color: var(--app-muted) !important;
    background: transparent !important;
}
body.wl-dark .app-single-stage-box .app-single-stage-btn-edit:hover,
body.wl-dark .app-single-stage-box .app-single-stage-btn-edit:hover i {
    color: var(--app-text) !important;
}
/* dashed separators inside cards */
body.wl-dark .app-single-stage-box hr,
body.wl-dark .app-single-stage-box [style*="border-bottom"] {
    border-color: var(--app-border) !important;
}

/* Tag/quality pills keep their own colors (inline styles win) — fine on dark. */

/* Drag & drop placeholders (were greenyellow / lightblue). */
body.wl-dark .app-stages-move-box-background {
    background: rgba(99, 102, 241, 0.10) !important;
    border: 1px dashed var(--app-accent) !important;
    border-radius: 14px !important;
}
body.wl-dark .app-single-stage-move-box-background {
    background: rgba(99, 102, 241, 0.18) !important;
    border: 1px dashed var(--app-accent) !important;
    border-radius: 10px !important;
}

/* Scrollbars: slim, dark, auto-hiding (kill the chunky white !important bars). */
body.wl-dark .app-stages,
body.wl-dark .app-stages-content {
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
}
body.wl-dark .app-stages:hover,
body.wl-dark .app-stages-content:hover {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}
body.wl-dark .app-stages ::-webkit-scrollbar,
body.wl-dark .app-stages::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
body.wl-dark .app-stages ::-webkit-scrollbar-track,
body.wl-dark .app-stages::-webkit-scrollbar-track {
    background: transparent !important;
}
body.wl-dark .app-stages ::-webkit-scrollbar-thumb,
body.wl-dark .app-stages::-webkit-scrollbar-thumb {
    background-color: transparent !important;
    border-radius: 8px !important;
}
body.wl-dark .app-stages:hover ::-webkit-scrollbar-thumb,
body.wl-dark .app-stages:hover::-webkit-scrollbar-thumb,
body.wl-dark .app-stages-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18) !important;
}
body.wl-dark .app-stages ::-webkit-scrollbar-thumb:hover,
body.wl-dark .app-stages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   List views (round-10): Bootstrap zebra stripes + contacts mobile cards.
   ========================================================================== */

/* Bootstrap paints even rows #f1f5fa — replace the zebra with a subtle dark
   alternation and keep row text readable. Applies to every striped list. */
body.wl-dark .table-striped tbody tr:nth-of-type(2n) {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
body.wl-dark .table-striped tbody tr:nth-of-type(2n + 1) {
    background-color: transparent !important;
}
body.wl-dark .table-striped tbody tr,
body.wl-dark .table tbody td {
    color: var(--app-text) !important;
}

/* Contacts list — the responsive "show more" info card is a NESTED card inside
   the row: keep it flat (no surface box, no border) and fix its label colors
   (#333333 / #808080 were unreadable on dark). */
body.wl-dark #app-contacts .card.card-all-information {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.wl-dark #app-contacts .card.card-all-information .card-body,
body.wl-dark #app-contacts .card.card-all-information .card-footer {
    background: transparent !important;
    border: none !important;
    color: var(--app-text) !important;
}
body.wl-dark #app-contacts .card-body .label-title {
    color: var(--app-muted) !important;
}
body.wl-dark #app-contacts .card-body .label-name {
    color: var(--app-text) !important;
}

/* ============================================================================
   Round-11: nav-pills containers (image library categories & friends).
   app.min.css paints .nav-pills #f8f8fc (near-white) — flatten on dark.
   ========================================================================== */
body.wl-dark .nav-pills {
    background-color: transparent !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .files-nav .nav-link {
    color: var(--app-text);
}
body.wl-dark .files-nav .nav-link small {
    color: var(--app-muted);
}
/* Image library marks the current category with .selected (not .active). */
body.wl-dark .nav-pills .nav-link.selected {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: var(--app-text) !important;
}

/* ============================================================================
   Round-12: dark-on-dark text (dashboard title, filter controls).
   ========================================================================== */

/* Page titles: app.min.css hardcodes #303e67. */
body.wl-dark .page-title-box .page-title,
body.wl-dark .page-title,
body.wl-dark .header-title {
    color: var(--app-text) !important;
}

/* Filter/dropdown trigger buttons (btn border dropdown-toggle pattern used on
   Dashboard, Leads, Kanban filters): Bootstrap's default .btn text is near
   black. Style them like inputs. */
body.wl-dark .btn.border {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .btn.dropdown-toggle:not(.btn-primary):not(.btn-secondary):not(.btn-info):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-light) {
    color: var(--app-text) !important;
}

/* .text-black labels inside filter dropdown menus. */
body.wl-dark .text-black {
    color: var(--app-text) !important;
}

/* Chart axis/legend text (ApexCharts / Chart.js) drawn with dark defaults. */
body.wl-dark .apexcharts-text,
body.wl-dark .apexcharts-legend-text {
    fill: var(--app-muted) !important;
    color: var(--app-muted) !important;
}
body.wl-dark .apexcharts-gridline { stroke: var(--app-border) !important; }
body.wl-dark .apexcharts-tooltip {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
}
body.wl-dark .apexcharts-tooltip-title {
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border) !important;
}
body.wl-dark .apexcharts-menu {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}
body.wl-dark .apexcharts-menu-item:hover { background: rgba(255,255,255,.06) !important; }

/* ============================================================================
   Round-13: Messenger + global .btn light-glow shadow.
   ========================================================================== */

/* app.min.css gives EVERY .btn a light glow (rgba(234,240,249,.5)) — a white
   halo on dark. Kill it app-wide. */
body.wl-dark .btn {
    box-shadow: none !important;
}

/* Messenger light palette variables -> theme surfaces (color-4 stays: it's the
   indigo accent used for small highlights). */
body.wl-dark {
    --messenger-color-1: var(--app-surface);
    --messenger-color-2: var(--app-bg);
    --messenger-color-3: var(--app-surface);
    --messenger-color-5: var(--app-border);
    --messenger-color-6: var(--app-surface);
    --messenger-color-7: var(--app-muted);
    --messenger-color-8: var(--app-border);
}

/* Contacts column: was solid #506ee4 indigo — now seamless dark. */
body.wl-dark .app-messenger-box .contacts-container {
    background-color: var(--app-bg) !important;
    border-right: 1px solid var(--app-border) !important;
}
body.wl-dark .contacts-container h2.contact-name { color: var(--app-text) !important; }
body.wl-dark .contacts-container h3.contact-phone-mail { color: var(--app-muted) !important; }
body.wl-dark .contact-list-title { color: var(--app-muted) !important; }
body.wl-dark ul.contact-list .contact-item-wrapper.active,
body.wl-dark ul.contact-list .contact-item-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}
body.wl-dark .contact-avatar {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Messenger navbars: contacts side was #506ee4, messages side #fff. */
body.wl-dark .app-messenger-box .messenger-navbar,
body.wl-dark .messages-container .messenger-navbar {
    background-color: var(--app-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}
body.wl-dark .app-messenger-box .messenger-navbar .navbar-buttons a,
body.wl-dark .app-messenger-box .messenger-navbar .navbar-buttons a i,
body.wl-dark .app-messenger-box .messages-container .messenger-navbar .navbar-buttons a,
body.wl-dark .app-messenger-box .messenger-navbar i {
    color: var(--app-muted) !important;
}
body.wl-dark .app-messenger-box .messenger-navbar .navbar-buttons a.active i,
body.wl-dark .app-messenger-box .messenger-navbar .navbar-buttons a:hover i {
    color: var(--app-text) !important;
}
body.wl-dark .messages-container .message-active-name { color: var(--app-text) !important; }

/* Message bubbles: dark chat style (incoming = surface, outgoing = accent tint). */
body.wl-dark .message-incoming {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .message-outgoing {
    background-color: rgba(99, 102, 241, 0.26) !important;
}
body.wl-dark .message-item,
body.wl-dark .message-item p {
    color: var(--app-text) !important;
}
body.wl-dark .reply-message-wrapper .message-reply {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: var(--app-text) !important;
}
body.wl-dark .reply-message-wrapper .message-reply .close-reply {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

/* Message-type selector + white dropdown toggles inside the messenger. */
body.wl-dark .messenger-wrapper .dropdown-toggle {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}
body.wl-dark .messenger-wrapper .dropdown-message-type {
    background-color: var(--app-surface) !important;
}

/* ============================================================================
   Round-13b: Messenger leftovers — contacts navbar, composer bar, no-channel
   notice, mention popup.
   ========================================================================== */
body.wl-dark .messenger-navbar-left,
body.wl-dark .app-messenger-box .messenger-navbar-left {
    background-color: var(--app-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}
body.wl-dark .messenger-navbar-left i,
body.wl-dark .messenger-navbar-left .navbar-buttons a i {
    color: var(--app-muted) !important;
}
body.wl-dark .messenger-navbar-left .navbar-buttons a.active i,
body.wl-dark .messenger-navbar-left .navbar-buttons a:hover i {
    color: var(--app-text) !important;
}

/* Composer bar (Type here…) */
body.wl-dark .messages-container .send-message {
    background-color: var(--app-bg) !important;
    border-top: 1px solid var(--app-border) !important;
}
body.wl-dark .messages-container .send-message textarea {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .messages-container .send-message button {
    color: var(--app-muted);
}

/* "No channels" inline notice + shortcut/mention popup (inline-styled whites). */
body.wl-dark .send-message > div[style*="background:#f8f9fa"] {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .send-message > div[style*="background:#f8f9fa"] p { color: var(--app-muted) !important; }
body.wl-dark #shortcutDropdown {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* ============================================================================
   Round-14: systemic dark-on-dark text.
   app.min.css sets h1-h6 AND body to #303e67 (dark navy) — force headings to
   theme text everywhere; badges keep their own colors via inline styles.
   ========================================================================== */
/* Exception: headings inside a kanban stage header sit on the stage's
   user-configured background and carry an inline user font color. */
body.wl-dark h1:not(.app-stages-box *), body.wl-dark h2:not(.app-stages-box *),
body.wl-dark h3:not(.app-stages-box *), body.wl-dark h4:not(.app-stages-box *),
body.wl-dark h5:not(.app-stages-box *), body.wl-dark h6:not(.app-stages-box *) {
    color: var(--app-text) !important;
}

/* Blades are littered with inline style="color: black" / #333 / #222 on icons
   and labels — a stylesheet !important outranks non-important inline styles,
   so defeat them all at once.
   Exemptions: elements that ALSO set an inline background (stage/quality/tag
   pills and owner badges — user-configured colors that must not be themed) and
   anything inside a kanban stage header (sits on the stage's own color). */
body.wl-dark [style*="color: black"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color:black"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color: #333"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color:#333"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color: #222"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color:#222"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color: #000"]:not([style*="background"]):not(.app-stages-box *),
body.wl-dark [style*="color:#000"]:not([style*="background"]):not(.app-stages-box *) {
    color: var(--app-text) !important;
}

/* ============================================================================
   Round-14b: full-sweep fixes (systemic variables + per-screen leftovers)
   from the dark-color audit, plus messenger contact-name regression.
   ========================================================================== */

/* --- Messenger contacts: names are SPANS inside an <a>, so they inherited the
       link accent color (invisible on dark). --- */
body.wl-dark ul.contact-list a.contact-item-wrapper { color: var(--app-text) !important; }
body.wl-dark .contacts-container .contact-name { color: var(--app-text) !important; }
body.wl-dark .contacts-container .contact-phone-email { color: var(--app-muted) !important; }
body.wl-dark .contacts-container .contact-first-letter { color: var(--app-text) !important; }

/* --- Design-token variables from legacy stylesheets, remapped in one shot --- */
body.wl-dark {
    /* app-new-layout.css */
    --title-color: var(--app-text);
    --table-th-color: var(--app-text);
    --table-tr-color: var(--app-muted);
    --table-icon-color: var(--app-muted);
    /* app-modal.css (every custom x-modal in the app) */
    --app-modal-background-color: var(--app-surface);
    --app-modal-title-color: var(--app-text);
    --app-modal-text-color: var(--app-text);
    --app-modal-header-background-color: var(--app-bg);
    --app-modal-button-x-color: var(--app-muted);
    --app-modal-button-disabled-color: rgba(255, 255, 255, 0.08);
    --app-modal-button-disabled-text-color: var(--app-muted);
}

/* --- Global element rules from app.min.css that force dark-on-dark --- */
body.wl-dark th { color: var(--app-text); }
body.wl-dark label { color: var(--app-text); }
body.wl-dark .nav-link { background-color: transparent; }
body.wl-dark .nav-user-name { color: var(--app-text) !important; }
body.wl-dark .mdi-menu { color: var(--app-muted) !important; }
body.wl-dark .messages-title { color: var(--app-text) !important; }
body.wl-dark .clear-filter-icon {
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
}
body.wl-dark .span-hover-effect:hover { color: var(--app-text) !important; }

/* --- Rows-per-page control (all paginated lists) --- */
body.wl-dark #rowsPerPage { background: var(--app-surface) !important; color: var(--app-text) !important; }
body.wl-dark .rows-per-page, body.wl-dark .rows-per-page * { color: var(--app-text) !important; }

/* --- Copy-link icons repeated across list screens --- */
body.wl-dark .button-click-to-copy i { color: var(--app-muted) !important; }

/* --- Calendar / booking screens --- */
body.wl-dark .app-calendar, body.wl-dark #box__tayon-calendar { background: var(--app-bg) !important; }
body.wl-dark .calendar_wrapper,
body.wl-dark .calendar_info,
body.wl-dark .calendar_time,
body.wl-dark .calendar_date_time_wrapper,
body.wl-dark .calendar_date_time_row_2 {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}
body.wl-dark .calendar_wrapper *:not(.badge):not(.btn) { color: inherit; }
/* flatpickr datepicker widget */
body.wl-dark .flatpickr-calendar {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
    color: var(--app-text) !important;
}
body.wl-dark .flatpickr-day { color: var(--app-text); }
body.wl-dark .flatpickr-day:hover { background: rgba(255,255,255,.08) !important; border-color: transparent !important; }
body.wl-dark .flatpickr-day.flatpickr-disabled, body.wl-dark .flatpickr-day.prevMonthDay, body.wl-dark .flatpickr-day.nextMonthDay { color: var(--app-muted) !important; opacity: .5; }
body.wl-dark .flatpickr-months .flatpickr-month, body.wl-dark .flatpickr-weekday { color: var(--app-text) !important; fill: var(--app-text) !important; }
body.wl-dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--app-surface) !important; color: var(--app-text) !important; }
body.wl-dark .flatpickr-time input { background: var(--app-surface) !important; color: var(--app-text) !important; }

/* --- Multi-select plugin --- */
body.wl-dark .ms-choice, body.wl-dark .ms-drop {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .ms-drop li:hover { background: rgba(255,255,255,.06) !important; }

/* --- CRM inbox rows + WhatsApp scheduled-messages modal --- */
body.wl-dark .email-row:hover { background: rgba(255,255,255,.05) !important; }
body.wl-dark #modal-messaging .whatsapp-messages-list li,
body.wl-dark .whatsapp-messages-list li {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}
body.wl-dark .selected-message { background: rgba(99,102,241,.16) !important; }
body.wl-dark #whatsappInputLabel { color: var(--app-text) !important; }

/* --- Misc per-screen leftovers from the audit --- */
body.wl-dark .placeholder-black::placeholder { color: var(--app-muted) !important; }
body.wl-dark .icone-lupa { color: var(--app-text) !important; }
body.wl-dark .top-container p.top-text { color: var(--app-text) !important; }
body.wl-dark .lead-card { background: transparent !important; }
body.wl-dark .accordion-codes-btn.collapsed { color: var(--app-accent) !important; }

/* ============================================================================
   Round-15: login / auth pages (payment & receipt pages stay light by design).
   ========================================================================== */
body.wl-dark.account-body,
body.wl-dark.accountbg {
    background: var(--app-bg) !important;
    background-image: none !important;
    color: var(--app-text);
}
body.wl-dark .auth-card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text);
}
/* No chip behind the logo — the white plate clashed with the card/background. */
body.wl-dark .account-body .auth-card .auth-logo-box .auth-logo { background-color: transparent !important; border-radius: 0; padding: 0 !important; box-shadow: none !important; }

/* Login form specifics (#app-login) — white inputs / pale borders / gray text. */
body.wl-dark #app-login label,
body.wl-dark #app-login a.text-muted,
body.wl-dark #app-login p,
body.wl-dark #app-login .mdi {
    color: var(--app-muted) !important;
}
body.wl-dark #app-login input,
body.wl-dark #app-login .auth-form-icon {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark #app-login input:focus {
    border: 3px solid var(--app-accent) !important;
}
body.wl-dark #app-login button {
    background: var(--app-accent) !important;
    color: #fff !important;
}
/* :before is the box/track, :after is the knob (switches) or the glyph SVG
   (checkbox/radio) — they need OPPOSITE treatment, so :after is deliberately
   not in this rule. See Round-16 below for the knob/glyph colours. --app-bg
   rather than --app-surface because cards AND modals are themselves
   --app-surface, so a surface-coloured control is invisible on them. */
body.wl-dark .custom-control-label:before {
    border-color: var(--app-border) !important;
    background-color: var(--app-bg);
}
body.wl-dark .custom-switch.switch-success .custom-control-input:checked ~ .custom-control-label:before {
    background: var(--app-accent) !important;
}
/* custom-radio never got the same treatment as custom-switch above, so a
   checked radio's circle stayed stuck at the unchecked --app-surface fill in
   dark mode — functionally selected, but visually indistinguishable from
   unchecked until it's clicked/focused (first hit by the 2FA method radios,
   the first custom-radio control in this codebase — every other control
   uses custom-switch). */
body.wl-dark .custom-radio .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
}

/* ============================================================================
   Round-15b: Chrome autofill — it paints black text on its own light fill,
   ignoring normal color rules. The inset shadow covers Chrome's fill and
   -webkit-text-fill-color is the one text property autofill respects.
   Applies to ALL autofilled inputs in dark mode (login, CRM forms, etc.).
   ========================================================================== */
body.wl-dark input:-webkit-autofill,
body.wl-dark input:-webkit-autofill:hover,
body.wl-dark input:-webkit-autofill:focus,
body.wl-dark textarea:-webkit-autofill,
body.wl-dark select:-webkit-autofill {
    -webkit-text-fill-color: var(--app-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--app-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--app-bg) inset !important;
    caret-color: var(--app-text);
    border-color: var(--app-border) !important;
    transition: background-color 99999s ease-in-out 0s;
}

/* ============================================================================
   Plan presentation / pricing cards (.pricingTable1 in plan-card-comp).
   Vendor theme hard-codes navy text (#303e67) on the feature list, the CTA
   is btn-dark (invisible on a dark card), and plan logos are PNGs with black
   text baked in — invert+hue-rotate flips them light while keeping the hue.
   ========================================================================== */
body.wl-dark .pricing-content-2 li {
    color: var(--app-text) !important;
}
body.wl-dark .pricingTable1 .amount {
    color: var(--app-text) !important;
}
body.wl-dark .pricingTable1 .text-muted,
body.wl-dark .pricing-content-2 + h3 small {
    color: var(--app-muted) !important;
}
body.wl-dark .pricingTable1 > img {
    filter: invert(1) hue-rotate(180deg);
}
body.wl-dark .pricingTable1 .btn-dark {
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}
body.wl-dark .pricingTable1 .btn-dark:hover {
    background: var(--app-accent-hover, var(--app-accent)) !important;
    border-color: var(--app-accent-hover, var(--app-accent)) !important;
}

/* Web chat inbox switch — the light-mode pills sit on an indigo panel that
   the dark theme flattens, so they need their own surface here. */
body.wl-dark .contacts-container .wb-inbox-tab {
    background-color: var(--app-surface) !important;
    color: var(--app-muted) !important;
}
body.wl-dark .contacts-container .wb-inbox-tab.active {
    background-color: var(--app-primary, #4f6ef7) !important;
    color: #fff !important;
}
body.wl-dark .contacts-container .wb-empty { color: var(--app-muted) !important; }

/* ---- Native date/time picker indicators ---------------------------------
   No color-scheme rule existed anywhere in the repo, so the UA kept painting
   the calendar/clock glyph for a light scheme — a black icon on the dark
   inputs the Forms block above produces. color-scheme also darkens the
   dropdown panel the browser opens.

   Scoped to the input types (never to body) so UA widgets elsewhere are
   untouched, and skipping inputs with an inline background-color for the same
   reason the Forms rules do: those are user-colored and stay light, where a
   dark color-scheme would paint the glyph white-on-white.

   The login page is covered on purpose — #app-login inputs are themed dark
   too (background: var(--app-bg)), despite what the comment up at the
   "Login form specifics" block says. */
body.wl-dark input[type="date"]:not([style*="background-color"]),
body.wl-dark input[type="datetime-local"]:not([style*="background-color"]),
body.wl-dark input[type="time"]:not([style*="background-color"]),
body.wl-dark input[type="week"]:not([style*="background-color"]),
body.wl-dark input[type="month"]:not([style*="background-color"]) {
    color-scheme: dark;
}

/* Legacy WebKit that predates color-scheme: invert the glyph instead. The
   @supports gate guarantees this never stacks on the rule above, which would
   double-invert straight back to black. */
@supports not (color-scheme: dark) {
    body.wl-dark input[type="date"]::-webkit-calendar-picker-indicator,
    body.wl-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    body.wl-dark input[type="time"]::-webkit-calendar-picker-indicator,
    body.wl-dark input[type="week"]::-webkit-calendar-picker-indicator,
    body.wl-dark input[type="month"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        opacity: .75;
    }
}

/* ============================================================================
   Round-16: form controls — checkboxes, radios and switches.

   Round-15 painted BOTH custom-control pseudo-elements with --app-surface, the
   same colour as the cards (:88) and modals (:288) they sit on, so every
   unchecked control was invisible. The knob was the worst case: Bootstrap's
   `.custom-switch .custom-control-label::after` is only (0,2,1) and lost to
   that (0,2,2) rule, so ~230 switches app-wide had a knob painted the same
   colour as their own track. The blanket rule above is now :before-only;
   everything the knob/glyph needs lives here.

   Only .custom-switch.switch-success ever got a checked colour, so every other
   variant (switch-primary and friends) had no visible ON state, and native
   inputs — form-check-input plus bare <input type=radio|checkbox> — had no
   dark rules at all, being excluded from the Forms block at :146.
   ========================================================================= */

/* ---- Unchecked outline --------------------------------------------------
   The recessed --app-bg fill is only 1.09:1 against an --app-surface card, so
   the OUTLINE is what actually delineates an unchecked control — and
   --app-border is just 1.24:1, which is why these still read as missing
   rather than merely subtle. --app-muted measures 6.64:1 and matches the knob
   treatment below. Scoped to :not(:checked) so the accent borders set by the
   checked rules further down are untouched. */
body.wl-dark .custom-control-input:not(:checked) ~ .custom-control-label:before {
    border-color: var(--app-muted) !important;
}

/* ---- Switch knob --------------------------------------------------------
   Must never inherit the track colour. Muted when off so it reads against the
   recessed track, white when on so it reads against the accent fill. */
body.wl-dark .custom-switch .custom-control-label:after {
    background-color: var(--app-muted) !important;
}
body.wl-dark .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
    background-color: #fff !important;
}

/* ---- Switch ON state, every colour variant ------------------------------
   app.min.css defines per-colour rules at (0,5,1); this only supplies the
   default for the variants it doesn't cover (bare custom-switch, switch-purple
   ...). Generalises the switch-success-only rule above. */
body.wl-dark .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
}

/* ---- Checkbox ON state --------------------------------------------------
   :before only — the checkmark is a background-image on :after and must keep
   painting. There is no --app-accent-contrast token, so the glyph stays the
   white SVG Bootstrap ships, legible on every accent we default to. */
body.wl-dark .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
}

/* ---- Disabled -----------------------------------------------------------
   The accent rules above (and the custom-radio one at :914) carry !important
   and would otherwise beat Bootstrap's disabled-checked colour, painting a
   disabled control at full strength so it reads as selected AND enabled. The
   2FA method radios are disabled whenever the account has no phone / no email,
   which is exactly where that misleads. Same specificity as the rules above
   but later in the file, so these win. */
body.wl-dark .custom-control-input:disabled ~ .custom-control-label,
body.wl-dark .custom-control-input[disabled] ~ .custom-control-label {
    color: var(--app-muted) !important;
    opacity: .65;
    cursor: not-allowed;
}
body.wl-dark .custom-control-input:disabled ~ .custom-control-label:before,
body.wl-dark .custom-control-input[disabled] ~ .custom-control-label:before {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}
body.wl-dark .custom-control-input:disabled:checked ~ .custom-control-label:before,
body.wl-dark .custom-control-input[disabled]:checked ~ .custom-control-label:before {
    background-color: rgba(99, 102, 241, .45) !important;
    border-color: transparent !important;
}
body.wl-dark .custom-switch .custom-control-input:disabled ~ .custom-control-label:after,
body.wl-dark .custom-switch .custom-control-input[disabled] ~ .custom-control-label:after {
    background-color: var(--app-border) !important;
}

/* ---- Native controls ----------------------------------------------------
   form-check-input (23 views) and bare <input type=radio|checkbox> (42 views)
   are never wrapped in a custom-control, so nothing above reaches them and
   they rendered in light UA chrome on dark cards. accent-color themes the
   checked fill; color-scheme flips the UA widget itself to its dark painting
   (same technique as the date inputs above). Deliberately NOT !important, so
   the per-page accent-color overrides — e.g. the red one at
   contact-list-form.blade.php:180 — keep winning. */
body.wl-dark input[type="checkbox"],
body.wl-dark input[type="radio"],
body.wl-dark .form-check-input {
    accent-color: var(--app-accent);
    color-scheme: dark;
}

/* ---- Focus ring ---------------------------------------------------------
   The Forms block at :154 gives every :focus input a 3px box-shadow sized for
   a text field, which smears around a 1rem checkbox. Give these an outline
   that follows the control's own shape instead. */
body.wl-dark input[type="checkbox"]:focus,
body.wl-dark input[type="radio"]:focus,
body.wl-dark .custom-control-input:focus ~ .custom-control-label:before {
    box-shadow: none !important;
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

/* ============================================================================
   Contextual alerts — keep their own fill in dark mode.
   ==========================================================================
   app-new-layout.css darkens the .alert-* fills to WCAG AA behind white text,
   and those apply in both themes. What breaks the result in dark mode is the
   Round-14 heading rule (:743) and the modal .close rule (:299), which force
   theme text onto anything sitting inside a coloured alert. Alerts are one of
   the few surfaces that legitimately carry their own background, so the text
   has to follow the fill, not the theme.
   ========================================================================== */
body.wl-dark .alert.alert-success,
body.wl-dark .alert.alert-info,
body.wl-dark .alert.alert-danger,
body.wl-dark .alert.alert-success h1, body.wl-dark .alert.alert-success h2,
body.wl-dark .alert.alert-success h3, body.wl-dark .alert.alert-success h4,
body.wl-dark .alert.alert-success h5, body.wl-dark .alert.alert-success h6,
body.wl-dark .alert.alert-info h1, body.wl-dark .alert.alert-info h2,
body.wl-dark .alert.alert-info h3, body.wl-dark .alert.alert-info h4,
body.wl-dark .alert.alert-info h5, body.wl-dark .alert.alert-info h6,
body.wl-dark .alert.alert-danger h1, body.wl-dark .alert.alert-danger h2,
body.wl-dark .alert.alert-danger h3, body.wl-dark .alert.alert-danger h4,
body.wl-dark .alert.alert-danger h5, body.wl-dark .alert.alert-danger h6,
body.wl-dark .alert.alert-success .close,
body.wl-dark .alert.alert-info .close,
body.wl-dark .alert.alert-danger .close {
    color: #fff !important;
}

/* Amber keeps dark text in both themes — white never clears AA on it. */
body.wl-dark .alert.alert-warning,
body.wl-dark .alert.alert-warning h1, body.wl-dark .alert.alert-warning h2,
body.wl-dark .alert.alert-warning h3, body.wl-dark .alert.alert-warning h4,
body.wl-dark .alert.alert-warning h5, body.wl-dark .alert.alert-warning h6,
body.wl-dark .alert.alert-warning .close {
    color: #4a2c00 !important;
}

/* Topbar action buttons (return-to-my-account after an agency take-over or an
   admin impersonation, the agency access request, the linked-account
   switcher) sit on the same contextual fills and inherit the same fix. */
body.wl-dark .btn.btn-success,
body.wl-dark .btn.btn-info,
body.wl-dark .badge.badge-success,
body.wl-dark .badge.badge-info,
body.wl-dark .badge.badge-danger {
    color: #fff !important;
}

body.wl-dark .btn.btn-warning,
body.wl-dark .badge.badge-warning {
    color: #3d2b00 !important;
}