/* The theme runtime (Theme Colors / Font Size / Font Family) is pulled in
   from here rather than from a <link> on all 452 pages: this file is already
   linked everywhere, and an @import at the top of it loads after style.css
   and before the dark rules below -- exactly the order both files need. */
@import url("/assets/css/theme-runtime.css");

[data-bs-theme="dark"] {
    /* elevation ramp: page < card < popover < hover */
    --dtf-bg: #05051a;
    /* page canvas */
    --dtf-surface: #0d0d26;
    /* cards, panels, table rows */
    --dtf-surface-2: #13132e;
    /* dropdowns, modals, offcanvas */
    --dtf-surface-3: #1b1b3c;
    /* hover / active / input wells */
    --dtf-border: #26264f;
    /* visible borders and dividers */
    --dtf-border-soft: #1c1c3e;
    /* hairlines inside panels */
    --dtf-heading: #e8eaff;
    /* headings, strong text */
    --dtf-text: #a9b1c7;
    /* body text */
    --dtf-muted: #7f869e;
    /* secondary / meta text */
    --dtf-faint: #666d85;
    /* placeholders, disabled */
    --dtf-tint: rgba(255, 255, 255, .055);
    /* neutral fill on dark */
    --dtf-tint-2: rgba(255, 255, 255, .09);

    /* back-fill the grey ramp the dark root skipped (these are consumed by
       inline Tailwind utilities AND by style.css component rules) */
    --gray-100: #262646;
    --gray-200: #2e2e52;

    --vr-tile-yellow: var(--dtf-surface);

    --gray-300: #3a3a63;
    --gray-400: #6e7391;
    --gray-500: #9099b3;
    --gray-600: #a6adc4;
    --gray-700: #b9c0d4;
    --gray-800: #cdd3e6;

    /* #e6e0fc used as a background tint 630+ times -> translucent brand tint */
    --primary-light: rgba(103, 76, 226, .26);

    /* referenced as var(--card-bg,#fff) by the livechat panes; undefined in
       both themes, so the #fff fallback was winning in dark mode */
    --card-bg: var(--dtf-surface);
}


/* ==========================================================================
   2. PAGE CANVAS
   --------------------------------------------------------------------------
   PROBLEM: style.css has `body { background-color: #f1f2f4 }` — a literal,
   so the whole page stayed light grey in dark mode and every "frosted glass"
   component (which is translucent white over the body) stayed light too.
   ========================================================================== */
[data-bs-theme="dark"] body {
    background-color: var(--dtf-bg);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .content,
[data-bs-theme="dark"] .page-container {
    background-color: transparent;
}

/* PROBLEM: .text-white in style.css is `color: var(--white) !important`, and
   --white is #030318 in dark mode. Every element that asked for white text
   (avatars on gradients, buttons, badges, .step-progress steps, chart titles)
   turned near-black. This was the single largest text defect (~130 nodes).   */
[data-bs-theme="dark"] .text-white,
[data-bs-theme="dark"] .text-white a,
[data-bs-theme="dark"] .step-progress .step,
[data-bs-theme="dark"] .avatar .text-white {
    color: #fff !important;
}

/* Same root cause: `color: var(--white)` used as "white text" in these rules. */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .btn-indigo,
[data-bs-theme="dark"] .btn-purple,
[data-bs-theme="dark"] .btn-pink,
[data-bs-theme="dark"] .btn-teal {
    color: #fff;
}


/* ==========================================================================
   3. TAILWIND LITERAL LIGHT UTILITIES (written inline in the markup)
   --------------------------------------------------------------------------
   PROBLEM: these utilities compile to literal light values, so no amount of
   variable switching reaches them. `bg-white` alone appears ~4,725 times and
   is what kept the "Add Apps" slide-over, search wells, list wrappers and
   dozens of sub-panels white in dark mode.
   FIX: remap them onto the elevation ramp. !important is required because
   Tailwind's own output uses !important for some of these and because the
   Tailwind stylesheet can be injected after this file.
   ========================================================================== */

/* --- white / near-white surfaces -> card surface ------------------------- */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-\[\#ffffff\],
[data-bs-theme="dark"] .bg-\[\#fff\],
[data-bs-theme="dark"] .bg-\[\#fafafa\],
[data-bs-theme="dark"] .bg-\[\#f9f9f9\],
[data-bs-theme="dark"] .bg-\[\#f8f8f8\],
[data-bs-theme="dark"] .bg-slate-50,
[data-bs-theme="dark"] .bg-gray-50 {
    background-color: var(--dtf-surface) !important;
}

/* violet-tinted "paper" shades used for wells, hover rows and sub-headers */
[data-bs-theme="dark"] .bg-\[\#faf8ff\],
[data-bs-theme="dark"] .bg-\[\#f7f5ff\],
[data-bs-theme="dark"] .bg-\[\#f7f8ff\],
[data-bs-theme="dark"] .bg-\[\#f8f9fc\],
[data-bs-theme="dark"] .bg-\[\#f5f8ff\],
[data-bs-theme="dark"] .bg-\[\#fbfbfd\],
[data-bs-theme="dark"] .bg-\[\#f2f4f6\],
[data-bs-theme="dark"] .bg-\[\#fffaf3\],
[data-bs-theme="dark"] .bg-\[\#fcf5ff\],
[data-bs-theme="dark"] .bg-\[\#f5fff8\],
[data-bs-theme="dark"] .bg-\[\#f0fdf4\] {
    background-color: var(--dtf-surface-2) !important;
}

[data-bs-theme="dark"] .bg-\[\#f3f0ff\],
[data-bs-theme="dark"] .bg-\[\#f5f3ff\],
[data-bs-theme="dark"] .bg-\[\#ece9ff\],
[data-bs-theme="dark"] .bg-\[\#eee8fb\],
[data-bs-theme="dark"] .bg-\[\#e2e0ff\],
[data-bs-theme="dark"] .bg-\[\#ebebeb\],
[data-bs-theme="dark"] .bg-\[\#e0dfdf\],
[data-bs-theme="dark"] .bg-slate-100,
[data-bs-theme="dark"] .bg-gray-100,
[data-bs-theme="dark"] .bg-gray-200 {
    background-color: var(--dtf-surface-3) !important;
}

/* hover / focus-within variants of the same values */
[data-bs-theme="dark"] .hover\:bg-\[\#faf8ff\]:hover,
[data-bs-theme="dark"] .hover\:bg-\[\#f3f0ff\]:hover,
[data-bs-theme="dark"] .hover\:bg-white:hover,
[data-bs-theme="dark"] .hover\:bg-slate-50:hover,
[data-bs-theme="dark"] .hover\:bg-slate-100:hover,
[data-bs-theme="dark"] .hover\:bg-blue-50:hover,
[data-bs-theme="dark"] .focus-within\:bg-white:focus-within,
[data-bs-theme="dark"] .hover\:bg-\[var\(--gray-100\)\]:hover {
    background-color: var(--dtf-surface-3) !important;
}

/* PROBLEM: bg-[var(--gray-100)] (674x) + hover variant. --gray-100 is also
   read as a *text* colour by 3 style.css rules, so it is remapped to a mid
   tone in §1 rather than to a near-black; the utility gets the flat tint. */
[data-bs-theme="dark"] .bg-\[var\(--gray-100\)\] {
    background-color: var(--dtf-tint) !important;
}

/* --- semantic status chips: keep the hue, drop the luminance ------------- */
/* PROBLEM: pastel chips (bg-[#d1f1e3] + text-[#1c9b4a] etc.) are light pills
   with dark text. They survive on a dark page but read as glaring blobs and
   fight the dark surface. Recolour both halves so the semantics survive.    */
[data-bs-theme="dark"] .bg-\[\#d1f1e3\],
[data-bs-theme="dark"] .bg-\[\#e8f9e8\],
[data-bs-theme="dark"] .bg-\[\#e4f7e3\] {
    background-color: rgba(26, 190, 23, .18) !important;
}

[data-bs-theme="dark"] .bg-\[\#c3dbfc\],
[data-bs-theme="dark"] .bg-\[\#e6f1ff\],
[data-bs-theme="dark"] .bg-\[\#edf7ff\] {
    background-color: rgba(47, 128, 237, .20) !important;
}

[data-bs-theme="dark"] .bg-\[\#fbf0ce\],
[data-bs-theme="dark"] .bg-\[\#fff4d5\],
[data-bs-theme="dark"] .bg-\[\#faf9d7\] {
    background-color: rgba(249, 184, 1, .18) !important;
}

[data-bs-theme="dark"] .bg-\[\#ffd0d0\],
[data-bs-theme="dark"] .bg-\[\#fdeaea\],
[data-bs-theme="dark"] .bg-\[\#f4c0c0\],
[data-bs-theme="dark"] .bg-\[\#fbdcdc\],
[data-bs-theme="dark"] .bg-\[\#fdf1f1\] {
    background-color: rgba(239, 30, 30, .20) !important;
}

/* --- near-black inline text colours ------------------------------------- */
/* PROBLEM: text-[#1c1b2d] (2,711x), text-[#1a1535] (280x) and friends are the
   heading/body colours of every Tailwind-built panel in the app — the "Add
   Apps" switcher, detail drawers, campaign builders. On a dark surface they
   were effectively invisible (contrast ~1.2:1).                             */
[data-bs-theme="dark"] .text-\[\#1c1b2d\],
[data-bs-theme="dark"] .text-\[\#1a1535\],
[data-bs-theme="dark"] .text-\[\#1f2020\],
[data-bs-theme="dark"] .text-\[\#0f1b3d\],
[data-bs-theme="dark"] .text-\[\#1f2233\],
[data-bs-theme="dark"] .text-\[\#272727\],
[data-bs-theme="dark"] .text-\[\#000\],
[data-bs-theme="dark"] .text-\[\#000000\],
[data-bs-theme="dark"] .text-\[\#000000e3\],
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-slate-900,
[data-bs-theme="dark"] .text-gray-900 {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .text-\[\#7b7890\],
[data-bs-theme="dark"] .text-\[\#6d6885\],
[data-bs-theme="dark"] .text-\[\#4f5052\],
[data-bs-theme="dark"] .text-\[\#4d4a63\],
[data-bs-theme="dark"] .text-\[\#3d3a52\],
[data-bs-theme="dark"] .text-slate-700,
[data-bs-theme="dark"] .text-slate-600,
[data-bs-theme="dark"] .text-gray-600,
[data-bs-theme="dark"] .hover\:text-slate-600:hover {
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .text-\[\#87878c\],
[data-bs-theme="dark"] .text-\[\#a2a3a8\],
[data-bs-theme="dark"] .text-\[\#8a8a9a\],
[data-bs-theme="dark"] .text-\[\#9a9aac\],
[data-bs-theme="dark"] .text-slate-500,
[data-bs-theme="dark"] .text-gray-500 {
    color: var(--dtf-muted) !important;
}

/* PROBLEM: --gray-700 / --gray-800 were never given dark values; see §1.
   These two utilities are the ones that consumed them in the markup.        */
[data-bs-theme="dark"] .text-\[var\(--gray-700\)\],
[data-bs-theme="dark"] .text-\[var\(--gray-800\)\] {
    color: var(--dtf-text) !important;
}

/* --- semantic text colours: same hue, raised luminance ------------------- */
/* PROBLEM: these are "coloured label" tokens picked for a white background
   (e.g. #2563eb on white = 5.2:1; on #05051a it is 2.6:1).                  */
[data-bs-theme="dark"] .text-\[\#2563eb\],
[data-bs-theme="dark"] .text-\[\#1f6fe0\] {
    color: #7aa9f7 !important;
}

[data-bs-theme="dark"] .text-\[\#1c9b4a\],
[data-bs-theme="dark"] .text-\[\#198050\] {
    color: #56d68c !important;
}

[data-bs-theme="dark"] .text-\[\#b6790a\],
[data-bs-theme="dark"] .text-\[\#e08a00\] {
    color: #e9b martin;
}

[data-bs-theme="dark"] .text-\[\#b6790a\],
[data-bs-theme="dark"] .text-\[\#e08a00\] {
    color: #e9b64a !important;
}

[data-bs-theme="dark"] .text-\[\#6d28d9\],
[data-bs-theme="dark"] .text-\[\#725bee\],
[data-bs-theme="dark"] .text-\[\#5235ef\] {
    color: #a992fb !important;
}

[data-bs-theme="dark"] .text-\[\#c2255c\] {
    color: #f279a3 !important;
}

[data-bs-theme="dark"] .text-\[\#9b1c1c\],
[data-bs-theme="dark"] .text-\[\#e0451f\] {
    color: #f58b6d !important;
}

[data-bs-theme="dark"] .text-\[\#95b20d\] {
    color: #c3dd4e !important;
}

/* --- light borders ------------------------------------------------------- */
/* PROBLEM: border-[#ede9ff] (2,427x) / border-[#f0ecff] (560x) /
   border-[#ececec] / border-[#e5e0fd] draw near-white 1px lines. On a dark
   canvas they became the brightest thing on screen.                         */
[data-bs-theme="dark"] .border-\[\#ede9ff\],
[data-bs-theme="dark"] .border-\[\#f0ecff\],
[data-bs-theme="dark"] .border-\[\#ececec\],
[data-bs-theme="dark"] .border-\[\#e5e0fd\],
[data-bs-theme="dark"] .border-\[\#e7e3fd\],
[data-bs-theme="dark"] .border-\[\#ebe8ff\],
[data-bs-theme="dark"] .border-\[\#ece8fb\],
[data-bs-theme="dark"] .border-\[\#ebe7ff\],
[data-bs-theme="dark"] .border-\[\#e5e7eb\],
[data-bs-theme="dark"] .border-\[\#dddddd\],
[data-bs-theme="dark"] .border-\[\#eef0f5\],
[data-bs-theme="dark"] .border-white,
[data-bs-theme="dark"] .border-slate-100,
[data-bs-theme="dark"] .border-gray-200,
[data-bs-theme="dark"] .divide-\[\#ede9ff\]>*+* {
    border-color: var(--dtf-border) !important;
}

/* placeholder text inside Tailwind-built inputs */
[data-bs-theme="dark"] .placeholder\:text-\[\#9b95c9\]::placeholder {
    color: var(--dtf-faint) !important;
}


/* ==========================================================================
   4. CARDS, PANELS AND KPI TILES
   --------------------------------------------------------------------------
   PROBLEM A: .card resolves to var(--white) = #030318, i.e. *darker* than the
   page. Cards read as holes instead of raised surfaces.
   PROBLEM B: many dashboard tiles carry an inline
   style="background:#dfdeff" or style="background:linear-gradient(...pastel)".
   Inline styles beat stylesheets, so those tiles stayed pastel with dark body
   text on them (contrast 2.2-2.6:1). Only !important can reach them.
   ========================================================================== */
[data-bs-theme="dark"] .card {
    background-color: var(--dtf-surface);
    border-color: var(--dtf-border-soft);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .card .card-header,
[data-bs-theme="dark"] .card .card-footer {
    background-color: transparent;
    border-color: var(--dtf-border-soft);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .card .card-title,
[data-bs-theme="dark"] .card h1,
[data-bs-theme="dark"] .card h2,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card h4,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card h6 {
    color: var(--dtf-heading);
}

/* the exact pastel values used inline on .card tiles across the dashboards.
   Listed explicitly so the *dark* saturated gradients used on the same class
   (e.g. linear-gradient(135deg,#7b61ff,#5235ef)) are left untouched.         */
[data-bs-theme="dark"] .card[style*="#dfdeff" i],
[data-bs-theme="dark"] .card[style*="#e2eeff" i],
[data-bs-theme="dark"] .card[style*="#fdf0ff" i],
[data-bs-theme="dark"] .card[style*="#f4f8ff" i],
[data-bs-theme="dark"] .card[style*="#f6f5ff" i],
[data-bs-theme="dark"] .card[style*="#fff7fd" i],
[data-bs-theme="dark"] .card[style*="#f6f4ff" i],
[data-bs-theme="dark"] .card[style*="#f5fff5" i],
[data-bs-theme="dark"] .card[style*="#f0fff3" i],
[data-bs-theme="dark"] .card[style*="#eef7ff" i],
[data-bs-theme="dark"] .card[style*="#fff0f0" i],
[data-bs-theme="dark"] .card[style*="#f8f8f8" i],
[data-bs-theme="dark"] .card[style*="#ffffff" i],
[data-bs-theme="dark"] .card[style*="#fff;" i] {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border-soft) !important;
}

/* KPI tiles: every .kpi carrying an inline background uses a pastel gradient
   (verified across all 8 modules), so a blanket override is safe here.      */
[data-bs-theme="dark"] .kpi[style*="background" i],
[data-bs-theme="dark"] .kpi {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border) !important;
}

/* .kpi::before paints white diagonal stripes at .18 alpha — a visible white
   hatch on a dark tile. */
[data-bs-theme="dark"] .kpi::before {
    background: repeating-linear-gradient(-25deg,
            rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 2px,
            transparent 2px, transparent 8px);
}

/* .kpi-label was a literal #3d3a52; .kpi-value inherits --heading-color. */
[data-bs-theme="dark"] .kpi-label {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .kpi-value {
    color: var(--dtf-heading);
}

/* .kpi-badge is `background: rgba(255,255,255,.7)` and its text colour comes
   from an inline style="color:#1c9b4a|#1f6fe0|..." that this file cannot
   safely rewrite per-instance. Keeping the pill light preserves the
   semantic colour's contrast instead of breaking it. */
[data-bs-theme="dark"] .kpi-badge {
    background: rgba(255, 255, 255, .88);
}

/* generic raised panels that used literal #fff */
[data-bs-theme="dark"] .vryno-notification-list-card,
[data-bs-theme="dark"] .kbd-card,
[data-bs-theme="dark"] .chat-left,
[data-bs-theme="dark"] body.sidebar-menu-hidden .sidebar-logo,
[data-bs-theme="dark"] body.sidebar-menu-hidden .nav-bottom {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .chat-left {
    border-color: var(--dtf-border) !important;
}


/* ==========================================================================
   5. TABLES
   --------------------------------------------------------------------------
   PROBLEM: the list-view "frosted glass" pattern is literal white:
     .vryno-list-table tbody tr.lead-row td { background: rgba(255,255,255,.82) }
     .vryno-list-table thead th              { background: rgb(229 238 255) !important }
   That produced the largest single background defect (300+ cells per list
   page). The row borders are rgba(255,255,255,.95) hairlines, and
   .table:not(.vryno-data-table) thead th is a literal #ffffe6 (cream).
   .vryno-data-table's even rows are `background:#fff`.
   ========================================================================== */
[data-bs-theme="dark"] #leadsListTable thead th,
[data-bs-theme="dark"] .vryno-list-table thead th,
[data-bs-theme="dark"] #leadsListTable .lead-head-row th,
[data-bs-theme="dark"] .vryno-list-table .lead-head-row th,
[data-bs-theme="dark"] .vryno-list-table.no-glass thead th {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] #leadsListTable tbody tr.lead-row td,
[data-bs-theme="dark"] .vryno-list-table tbody tr.lead-row td,
[data-bs-theme="dark"] .vryno-list-table.no-glass tbody tr.lead-row td {
    background: var(--dtf-surface) !important;
    border-top-color: var(--dtf-border-soft);
    border-bottom-color: var(--dtf-border-soft);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .vryno-list-table tbody tr.lead-row td:first-child {
    border-left-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .vryno-list-table tbody tr.lead-row td:last-child {
    border-right-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] #leadsListTable tbody tr.lead-row:hover td,
[data-bs-theme="dark"] .vryno-list-table tbody tr.lead-row:hover td,
[data-bs-theme="dark"] .vryno-list-table tbody tr.lead-row:hover td[data-col="actions"],
[data-bs-theme="dark"] .vryno-list-table.no-glass tbody tr.lead-row td[data-col="actions"] {
    background: var(--dtf-surface-3) !important;
}

/* Bootstrap paints every cell with --bs-table-bg; style.css leaves the light
   value in place, and the cream thead override is a literal.                */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table>:not(caption)>*>* {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dtf-text);
    background-color: transparent;
    border-color: var(--dtf-border-soft);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .table:not(.vryno-data-table) thead tr th {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
    border-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] table.vryno-data-table tbody tr:nth-child(even) td {
    background: var(--dtf-tint) !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--dtf-surface-3);
    background-color: var(--dtf-surface-3);
    color: var(--dtf-heading);
}

/* DataTables chrome */
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_length,
[data-bs-theme="dark"] .dataTables_filter {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .dataTables_length label .form-select,
[data-bs-theme="dark"] #dataTables_length label .form-select {
    color: var(--dtf-text);
    background-color: var(--dtf-surface-3);
    border-color: var(--dtf-border);
}

/* 
[data-bs-theme="dark"] .header-item .dropdown img{
    
    filter: invert(1);
} */


[data-bs-theme="dark"] .custom-card-icon {
    outline: 10px solid #10102a;
}

[data-bs-theme="dark"] .custom-card-icon::before {
    box-shadow: 7px -11px 0 0 #0f0f2a;
}

[data-bs-theme="dark"] .custom-card-icon::after {
    box-shadow: 7px -9px 0 0 #0f0f29;
}

[data-bs-theme="dark"] .tab-icon {
    background: #05051a !important;
}

[data-bs-theme="dark"] .nav-tabs.nav-solid-primary li a img {
    filter: none;
}

[data-bs-theme="dark"] .sidebar .sidebar-menu>ul li .submenu>ul li a.active,
[data-bs-theme="dark"] .sidebar .sidebar-menu>ul li .submenu>a.active,
[data-bs-theme="dark"] .sidebar .sidebar-menu>ul li .submenu>ul li a:hover,
[data-bs-theme="dark"] .sidebar .sidebar-menu>ul>li>ul>li>a:hover,
[data-bs-theme="dark"] .sidebar .sidebar-menu>ul>li ul li a.active {
    color: #b3a2ff;
}

/* ==========================================================================
   6. FORMS, INPUTS, SELECTS
   --------------------------------------------------------------------------
   PROBLEM: form controls inherited a transparent background over light
   wrappers, and page-level <style> blocks set literal light fills
   (.product-settings-page .form-control { background:#fbfbfe }). Vendor
   widgets (Select2, Choices, Quill, flatpickr) ship light-only CSS.
   ========================================================================== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--dtf-surface-3);
    border-color: var(--dtf-border);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder {
    color: var(--dtf-faint);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--dtf-surface-3);
    border-color: var(--primary);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--dtf-surface-2);
    color: var(--dtf-muted);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .form-check-label {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--dtf-surface-3);
    border-color: var(--dtf-border);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-bs-theme="dark"] .input-icon .form-control,
[data-bs-theme="dark"] .header-search-wrap .form-control {
    background-color: var(--dtf-surface-2);
}

/* PROBLEM: literal `background:#f1f1f1` on the topbar search scope pill. */
[data-bs-theme="dark"] .header-search-wrap .search-scope-btn {
    background: var(--dtf-surface-3);
    color: var(--dtf-text);
}

/* PROBLEM: literal `background:#f4f4f4` on the list-unstyled search results
   and on Select2 multi-select chips. */
[data-bs-theme="dark"] .list-unstyled a,
[data-bs-theme="dark"] .select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-text);
}

/* vendor widgets: light-only stylesheets, no dark variant shipped */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-search__field,
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .choices__list--dropdown,
[data-bs-theme="dark"] .choices__list[aria-expanded],
[data-bs-theme="dark"] .flatpickr-calendar,
[data-bs-theme="dark"] .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-weekdays,
[data-bs-theme="dark"] .daterangepicker,
[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow {
    background-color: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .daterangepicker td,
[data-bs-theme="dark"] .daterangepicker th,
[data-bs-theme="dark"] .ql-editor,
[data-bs-theme="dark"] .ql-snow .ql-stroke {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--dtf-text);
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
    fill: var(--dtf-text);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

/* inline-edit affordance used literal #f6f6f8 as its hover well */
[data-bs-theme="dark"] .inline-editable-field:hover,
[data-bs-theme="dark"] .inline-editable-field:focus {
    background-color: var(--dtf-surface-3) !important;
}


/* ==========================================================================
   7. DROPDOWNS, MODALS, OFFCANVAS, NOTIFICATION PANEL
   --------------------------------------------------------------------------
   PROBLEM: these are hidden at load, so nothing in the base theme was ever
   corrected for them. .dropdown-item:hover is a literal #f5f3ff, and the
   notification panel colour-codes its rows with eight literal pastels
   (.notification-body .dropdown-item:nth-child(n) { background:#e9f2ff ... }),
   each of which stayed light with dark text on it.
   ========================================================================== */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--dtf-surface-2);
    border-color: var(--dtf-border);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .dropdown-divider,
[data-bs-theme="dark"] .dropdown-header {
    border-color: var(--dtf-border);
    color: var(--dtf-muted);
}

[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-start,
[data-bs-theme="dark"] .offcanvas-end,
[data-bs-theme="dark"] .offcanvas-top,
[data-bs-theme="dark"] .offcanvas-bottom,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .toast {
    background-color: var(--dtf-surface-2);
    border-color: var(--dtf-border);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .offcanvas-footer {
    border-color: var(--dtf-border);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .modal-title,
[data-bs-theme="dark"] .offcanvas-title {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(220%);
}

/* notification panel: eight literal pastel rows -> translucent hue tints so
   the colour coding survives without a light background. */
[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(1),
[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(5) {
    background-color: rgba(47, 128, 237, .14) !important;
}

[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(2),
[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(6) {
    background-color: rgba(239, 30, 30, .14) !important;
}

[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(3),
[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(7) {
    background-color: rgba(26, 190, 23, .14) !important;
}

[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(4),
[data-bs-theme="dark"] .notification-body .dropdown-item:nth-child(8) {
    background-color: rgba(249, 184, 1, .14) !important;
}

[data-bs-theme="dark"] .notification-body .dropdown-item,
[data-bs-theme="dark"] .notification-body .dropdown-item h6,
[data-bs-theme="dark"] .notification-body .dropdown-item p {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .notification-body .dropdown-item h6 {
    color: var(--dtf-heading);
}

/* the theme-settings offcanvas hard-codes its swatch backgrounds */
[data-bs-theme="dark"] .sidebar-themesettings .offcanvas-body .bg-white {
    background: var(--dtf-surface-3) !important;
}


/* ==========================================================================
   8. SIDEBAR, TOPBAR, BOTTOM APP SWITCHER
   --------------------------------------------------------------------------
   PROBLEM: submenu icon chips use a literal #f1f2f4
   (.sidebar .sidebar-menu>ul>li ul li a i) — 216 light squares in the nav.
   The bottom app switcher (.vr-module-strip) is a literal #ffffff bar pinned
   across the viewport, and the "Add Apps" slide-over inside .bottom-apps is
   built entirely from Tailwind light utilities (covered in §3).
   ========================================================================== */
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .sidebar .sidebar-menu {
    background: var(--menu-bg);
}

[data-bs-theme="dark"] .sidebar .sidebar-menu>ul>li ul li a i {
    background-color: var(--dtf-surface-3);
    color: var(--menu-item-color);
}

[data-bs-theme="dark"] .sidebar .sidebar-menu>ul>li>a,
[data-bs-theme="dark"] .sidebar .sidebar-menu ul li a {
    color: var(--menu-item-color);
}

[data-bs-theme="dark"] .navbar-header {
    background: var(--topbar-bg);
    border-bottom-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .vr-module-strip {
    background: var(--dtf-surface-2) !important;
    border-top: 1px solid var(--dtf-border);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .55);
}

[data-bs-theme="dark"] .vr-module-strip li a {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .vr-module-strip li a.active,
[data-bs-theme="dark"] .vr-module-strip li a:hover {
    color: var(--dtf-heading);
}

/* .vrd-iconbar is a literal #fff pill of view-mode icons */
[data-bs-theme="dark"] .vrd-iconbar {
    background: var(--dtf-surface-2);
    border-color: var(--dtf-border);
}

[data-bs-theme="dark"] .vrd-iconbar a:not(.active):hover {
    background: var(--dtf-surface-3);
}

/* view-mode chevrons: literal #fff on a literal light border */
[data-bs-theme="dark"] .view-toggle-arrow {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
}


/* ==========================================================================
   9. BUTTONS, BADGES, TABS, PAGINATION, ACCORDIONS
   --------------------------------------------------------------------------
   PROBLEM: .btn-outline-light resolves to color:var(--light) on
   background:var(--white) — in dark mode both are near-black, so the label
   vanished. .btn-white uses var(--gray-900) text on var(--white). .badge has
   a literal color:#282727. .nav-tabs.nav-solid-primary li a is a literal
   #212121 and its .active state a literal #e6e0fc pill. .ac-bg /
   .ac-bg.accordion-button are `background:#fff !important`.
   ========================================================================== */
[data-bs-theme="dark"] .btn-outline-light,
[data-bs-theme="dark"] .btn-white,
[data-bs-theme="dark"] .btn-light {
    background-color: var(--dtf-surface-3);
    border-color: var(--dtf-border);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .btn-outline-light:hover,
[data-bs-theme="dark"] .btn-white:hover,
[data-bs-theme="dark"] .btn-light:hover {
    background-color: var(--dtf-border);
    border-color: var(--dtf-border);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .btn.border,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-dark {
    border-color: var(--dtf-border);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .badge {
    color: #fff;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-white {
    background-color: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

/* soft badges: transparent-tint tokens are already dark-aware, but the text
   token is not always legible on them */
[data-bs-theme="dark"] .badge-soft-primary {
    color: #a992fb;
}

[data-bs-theme="dark"] .badge-soft-success {
    color: #56d68c;
}

[data-bs-theme="dark"] .badge-soft-danger {
    color: #f58b6d;
}

[data-bs-theme="dark"] .badge-soft-warning {
    color: #e9b64a;
}

[data-bs-theme="dark"] .badge-soft-info {
    color: #7aa9f7;
}

[data-bs-theme="dark"] .nav-tabs.nav-solid-primary li a {
    color: var(--dtf-text);
    border-right-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .nav-tabs.nav-solid-primary li a.active {
    background-color: var(--primary-light);
    color: #b7a4ff;
}

[data-bs-theme="dark"] .nav-tabs.nav-solid-light li a.active,
[data-bs-theme="dark"] .nav-tabs.nav-solid-light.nav-tabs-rounded li a.active,
[data-bs-theme="dark"] .nav-tabs.nav-solid-light.nav-tabs-rounded-fill li a.active {
    background-color: var(--dtf-surface-3);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .nav-tabs.nav-bordered-dark .nav-item .nav-link.active,
[data-bs-theme="dark"] .nav-tabs.nav-bordered-dark .nav-item .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs.nav-solid-dark li a:hover {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link,
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--primary);
    border-color: transparent;
}

/* pagination: .page-link inherits a light border/colour pair */
[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--dtf-surface-2);
    border-color: var(--dtf-border);
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--dtf-surface-3);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* the list-view pager bar is a translucent-white "glass" strip */
[data-bs-theme="dark"] .lead-pagerbar {
    background: var(--dtf-surface-2);
    border-color: var(--dtf-border);
    box-shadow: none;
}

[data-bs-theme="dark"] .lead-pagerbar .page-link {
    background: transparent;
    border: 0;
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .lead-pagerbar .page-link:hover {
    background: var(--dtf-surface-3);
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .lead-pagerbar-count {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .lead-pagerbar-count b {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button,
[data-bs-theme="dark"] .accordion-body {
    background-color: var(--dtf-surface);
    border-color: var(--dtf-border-soft);
    color: var(--dtf-text);
}

/* .ac-bg and .ac-bg.accordion-button are `!important` literals in style.css,
   so the override needs both higher specificity and !important. */
[data-bs-theme="dark"] .accordion .ac-bg,
[data-bs-theme="dark"] .accordion .ac-bg.accordion-button,
[data-bs-theme="dark"] div.ac-bg,
[data-bs-theme="dark"] button.ac-bg.accordion-button {
    background-color: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(200%);
}

/* empty / no-data states */
[data-bs-theme="dark"] .empty-state,
[data-bs-theme="dark"] .no-data,
[data-bs-theme="dark"] .dataTables_empty,
[data-bs-theme="dark"] .table td.dt-empty {
    background-color: transparent;
    color: var(--dtf-muted);
}

[data-bs-theme="dark"] .empty-state h5,
[data-bs-theme="dark"] .empty-state h6,
[data-bs-theme="dark"] .no-data h5 {
    color: var(--dtf-heading);
}


/* ==========================================================================
   10. CHARTS (ApexCharts)
   --------------------------------------------------------------------------
   PROBLEM: ApexCharts writes colours into the SVG at render time from its JS
   config, which is light-theme only. Axis labels arrive as fill="#6b7280",
   legend labels as an inline style="color:rgb(55,61,63)", gridlines as
   stroke="#e5e7eb" (near-white) and tooltips as a light popover. Because the
   legend colour is an inline style attribute, !important is required.
   These are SVG presentation attributes, so `fill`/`stroke` must be set
   (not `color`), and the fixes must survive chart re-renders.
   ========================================================================== */
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-text tspan,
[data-bs-theme="dark"] .apexcharts-xaxis text,
[data-bs-theme="dark"] .apexcharts-yaxis text,
[data-bs-theme="dark"] .apexcharts-xaxis-label,
[data-bs-theme="dark"] .apexcharts-yaxis-label,
[data-bs-theme="dark"] .apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-datalabel-value,
[data-bs-theme="dark"] .apexcharts-pie-label {
    fill: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .apexcharts-title-text,
[data-bs-theme="dark"] .apexcharts-subtitle-text {
    fill: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .apexcharts-legend-text {
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-grid-borders line,
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line,
[data-bs-theme="dark"] .apexcharts-xaxis-tick {
    stroke: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .apexcharts-radialbar-track .apexcharts-radialbar-area,
[data-bs-theme="dark"] .apexcharts-radar-series polygon,
[data-bs-theme="dark"] .apexcharts-radar-series line {
    stroke: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .6) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-text,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-label,
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-value {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:before,
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .apexcharts-menu {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .apexcharts-toolbar svg {
    fill: var(--dtf-text) !important;
}

/* Non-Apex inline SVG (sparklines, donuts) frequently uses a white plot
   background rect. */
[data-bs-theme="dark"] svg rect[fill="#fff"],
[data-bs-theme="dark"] svg rect[fill="#ffffff"],
[data-bs-theme="dark"] svg rect[fill="white"] {
    fill: transparent;
}


/* ==========================================================================
   11. CRM DETAIL VIEW, STICKY NOTES, CHAT
   --------------------------------------------------------------------------
   PROBLEM: .dtl-value is a literal #272727. .crm-sticky-note and its header /
   footer are literal #ffffff / #faf9ff / #fff. The minimised floating chat
   and its composer are literal #fff. .deal-created-badge is #ece7fd.
   ========================================================================== */
[data-bs-theme="dark"] .dtl-value {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .dtl-label,
[data-bs-theme="dark"] .dtl-key {
    color: var(--dtf-muted);
}

[data-bs-theme="dark"] .dtl-card,
[data-bs-theme="dark"] .dtl-panel,
[data-bs-theme="dark"] .dtl-section {
    background: var(--dtf-surface);
    border-color: var(--dtf-border-soft);
}

[data-bs-theme="dark"] .crm-sticky-note {
    background: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .crm-sticky-note-header,
[data-bs-theme="dark"] .crm-sticky-note-footer {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .chat-wrapper.chat-is-minimized,
[data-bs-theme="dark"] .chat-wrapper.chat-is-minimized .message-footer {
    background: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border);
}

[data-bs-theme="dark"] .deal-created-badge {
    background: var(--primary-light) !important;
    color: #b7a4ff;
}


/* ==========================================================================
   12. PER-PAGE <style> BLOCKS
   --------------------------------------------------------------------------
   These live in the page's own <style> element, which is parsed AFTER this
   file. Selectors below intentionally repeat the page-scope class
   (.user-settings-page, .product-settings-page) so the specificity exceeds
   the original rule; !important is added where the original also wins on
   source order alone.
   ========================================================================== */

/* --- settings / user-profile (.us-*, .kbd-*) ----------------------------- */
[data-bs-theme="dark"] .user-settings-page .us-hero,
[data-bs-theme="dark"] .user-settings-page .us-nav,
[data-bs-theme="dark"] .user-settings-page .us-panel {
    background: var(--dtf-surface) !important;
    box-shadow: none;
}

[data-bs-theme="dark"] .user-settings-page .us-tile {
    background: var(--dtf-surface-2) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-tile small {
    color: var(--dtf-muted) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-tile b {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-row {
    background: var(--dtf-surface-2) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-row:hover {
    background: var(--dtf-surface-3) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-row .t {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-row .s,
[data-bs-theme="dark"] .user-settings-page .us-nav .nav-group-label {
    color: var(--dtf-muted) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link {
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link:hover {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link i {
    background: var(--dtf-surface-3) !important;
    color: #b7a4ff !important;
}

[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link.active,
[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link.active i {
    color: #fff !important;
}

/* keyboard-shortcut keycaps: literal #f2f2f8 on #e2e2ee (192 nodes) */
[data-bs-theme="dark"] .user-settings-page .kbd-key {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .user-settings-page .kbd-key.kbd-key-accent {
    background: var(--primary-light) !important;
    border-color: var(--dtf-border) !important;
    color: #b7a4ff !important;
}

[data-bs-theme="dark"] .user-settings-page .tpl-canvas .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .user-settings-page .tpl-merge .dropdown-item code {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

/* --- settings / product-settings (.ps-*, .sp-*, .side-col) --------------- */
[data-bs-theme="dark"] .product-settings-page .side-col,
[data-bs-theme="dark"] .product-settings-page .ps-content {
    background: var(--dtf-surface) !important;
    box-shadow: none;
}

[data-bs-theme="dark"] .product-settings-page .ps-logo {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .product-settings-page .ps-btn-white {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .product-settings-page .sp-current {
    background: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .product-settings-page .sp-current .sp-ico {
    background: var(--dtf-surface-3) !important;
}

[data-bs-theme="dark"] .product-settings-page .sp-current small,
[data-bs-theme="dark"] .product-settings-page .sp-current .ti-chevron-down,
[data-bs-theme="dark"] .product-settings-page .prod-head p {
    color: var(--dtf-muted) !important;
}

[data-bs-theme="dark"] .product-settings-page .prod-head {
    background: var(--dtf-surface-2) !important;
    border-bottom-color: var(--dtf-border-soft) !important;
}

[data-bs-theme="dark"] .product-settings-page .prod-head h5 {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .product-settings-page .form-control,
[data-bs-theme="dark"] .product-settings-page .form-select {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
    color: var(--dtf-heading) !important;
}

/* --- livechat (.lc-*) --------------------------------------------------- */
/* .lc-pane reads var(--card-bg,#fff); --card-bg is now defined in §1.
   .lc-in (incoming chat bubble) is a literal #f1f4f9.                       */
[data-bs-theme="dark"] .lc-pane {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border-soft) !important;
}

[data-bs-theme="dark"] .lc-pane-head,
[data-bs-theme="dark"] .lc-pane-foot {
    border-color: var(--dtf-border-soft) !important;
}

[data-bs-theme="dark"] .lc-in {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .lc-row:hover,
[data-bs-theme="dark"] .lc-list .lc-row.active {
    background: var(--dtf-surface-3) !important;
}


/* ==========================================================================
   13. GENERIC TEXT, BORDERS, ICONS, SCROLLBARS
   --------------------------------------------------------------------------
   PROBLEM: several heading rules resolve through --heading-color (fine) but
   Bootstrap utility text classes (.text-dark, .text-muted, .text-body,
   .text-secondary) and the utility borders (.border, .border-top, ...) still
   resolve to light-theme values in places. Tabler icon glyphs inherit
   currentColor, so they follow the text fixes above; only the ones given an
   explicit dark literal need help.
   ========================================================================== */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .sub-title,
[data-bs-theme="dark"] .page-name,
[data-bs-theme="dark"] .card-subtitle,
[data-bs-theme="dark"] .custom-title {
    color: var(--dtf-heading);
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-body-emphasis {
    color: var(--dtf-heading) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] .fs-12.text-muted {
    color: var(--dtf-muted) !important;
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] li,
[data-bs-theme="dark"] span,
[data-bs-theme="dark"] td,
[data-bs-theme="dark"] th,
[data-bs-theme="dark"] b,
[data-bs-theme="dark"] strong,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] summary {
    border-color: var(--dtf-border-soft);
}

/* Bootstrap border utilities still point at the light --bs-border-color. */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-light {
    border-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--dtf-border);
    opacity: 1;
}

/* Links: style.css gives `a` the heading colour, which is fine, but link
   utilities and the underlined variants fall back to Bootstrap's light blue
   emphasis tokens. */
[data-bs-theme="dark"] a.link-primary,
[data-bs-theme="dark"] a.text-primary,
[data-bs-theme="dark"] .link-primary {
    color: #a992fb !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dtf-bg);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dtf-surface-3);
}

[data-bs-theme="dark"] .us-nav::-webkit-scrollbar-thumb {
    background: var(--dtf-surface-3);
}

/* simplebar (sidebar / panel scrollers) */
[data-bs-theme="dark"] .simplebar-scrollbar::before {
    background: var(--dtf-surface-3);
}


/* ==========================================================================
   14. SECOND PASS — measured with the file actually loaded
   --------------------------------------------------------------------------
   Everything above was written before this file was linked into the pages.
   With it linked, an automated sweep of 12 representative pages (largest
   light-luminance backgrounds, light gradients, and text below 2.5:1 against
   its own background) surfaced the remainder. Each block below names the
   defect it closes.

   Specificity note: rules that beat a per-page <style> block need !important,
   because those blocks come later in the document than this file. Rules that
   beat an inline style="" attribute need !important for the same reason.
   ========================================================================== */

/* --- 14.1  The page canvas itself -------------------------------------------
   #contentContainer paints `linear-gradient(180deg,#f7f8fb,#eff1f6)` plus a
   noise tile. It is the largest single surface in the app (1.7 Mpx on a
   1600x1000 viewport) and it stayed light, which is what made the module
   headings look washed out even though their own colour was correct. The noise
   layer is kept -- it is what stops the canvas looking flat -- at lower
   opacity so it does not read as grain on a dark ground. */
[data-bs-theme="dark"] #contentContainer,
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .page-wrapper.ml-0 {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #07071e 0%, #05051a 100%);
}

/* the calendar page and one page that puts the gradient in a style attribute */
[data-bs-theme="dark"] .content.content-two.vryno-calendar-page,
[data-bs-theme="dark"] body[style*="gradient" i] {
    background-image: linear-gradient(180deg, #07071e 0%, #05051a 100%) !important;
}

/* --- 14.2  .vrd-* dashboard tiles (details + module dashboards) -------------
   These carry an inline pastel background (#d3efdd, #cae1fb, #e8f2b9,
   #ffe7e7). Section 4 darkened the *text* colours globally, so the figure in
   each tile ended up #a9b1c7 on a pastel ground: a measured 1.00:1 -- the
   numbers were invisible. Same treatment as .kpi: dark surface, semantic
   colour retained on the badge only. */
[data-bs-theme="dark"] .vrd-kpi,
[data-bs-theme="dark"] .vrd-kpi[style*="background" i] {
    background: var(--dtf-surface) !important;
    border: 1px solid var(--dtf-border) !important;
    box-shadow: none;
}

[data-bs-theme="dark"] .vrd-kpi::before {
    background: repeating-linear-gradient(-25deg,
            rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 2px,
            transparent 2px, transparent 8px);
    border-radius: 16px;

}

[data-bs-theme="dark"] .vrd-kpi .vrd-kpi-label {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] .vrd-kpi .vrd-kpi-value {
    color: var(--dtf-heading);
}

/* .vrd-stripe-* use a white base under a coloured hatch */
[data-bs-theme="dark"] .vrd-stripe-green,
[data-bs-theme="dark"] .vrd-stripe-blue,
[data-bs-theme="dark"] .vrd-stripe-amber,
[data-bs-theme="dark"] .vrd-stripe-red {
    background-color: rgba(255, 255, 255, .10);
}

/* insight strip: #FFF7E0 ground with #7a6a3f text */
[data-bs-theme="dark"] .vrd-insight {
    background: rgba(255, 196, 0, .09) !important;
    color: #e2c98a !important;
}

/* bottom CTA banner: pastel lavender gradient */
[data-bs-theme="dark"] .vrd-cta {
    background: linear-gradient(120deg, #191a3d 0%, #14203c 100%) !important;
}

[data-bs-theme="dark"] .vrd-cta h5,
[data-bs-theme="dark"] .vrd-cta h6 {
    color: var(--dtf-heading);
}

/* --- 14.3  Status badges on tiles ------------------------------------------
   .kpi-badge and .vrd-kpi-badge are `background: rgba(255,255,255,.7-.88)`
   with the semantic colour supplied inline (style="color:#1c9b4a"). Section 4
   left the pill light on purpose, to protect that colour's contrast -- but a
   near-white pill on a near-black tile is the loudest thing on the screen, and
   the paler semantics (#95b20d measured 1.93:1) were failing anyway.

   Both are solved without knowing the colour: color-mix derives the pill from
   the badge's own currentColor, and the filter lifts that colour to dark-mode
   luminance. The pill therefore stays semantic, on-theme, and legible for
   every value in the markup. */
[data-bs-theme="dark"] .kpi-badge,
[data-bs-theme="dark"] .vrd-kpi .vrd-kpi-badge,
[data-bs-theme="dark"] .vrd-kpi-badge {
    background: color-mix(in srgb, currentColor 16%, transparent) !important;
    filter: brightness(1.5) saturate(1.05);
}

/* --- 14.4  Bottom app strip: the "Add Apps" affordance ---------------------
   .vr-strip-add is #EAE8FD / #4B3AC2 -- the one light block left in an
   otherwise dark strip, and the thing the screenshot showed most clearly. */
[data-bs-theme="dark"] .vr-strip-add,
[data-bs-theme="dark"] .vr-strip-add.ad-app {
    background: var(--dtf-surface-3);
    color: #b3a4ff;
}

[data-bs-theme="dark"] .vr-strip-add:hover {
    background: #24244d;
    color: #cdc2ff;
}

/* --- 14.5  Inline translucent-white chips ---------------------------------
   Written as style="background:rgba(255,255,255,.72);color:#4b5a7a" on the
   dashboard stat rows (measured 1.49:1). Matched on the attribute because the
   class list is generic Bootstrap utilities shared with chips that are fine. */
[data-bs-theme="dark"] [style*="rgba(255,255,255,.72)" i],
[data-bs-theme="dark"] [style*="rgba(255, 255, 255, .72)" i],
[data-bs-theme="dark"] [style*="rgba(255,255,255,0.72)" i] {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-text) !important;
}

/* pinned filter buttons carry inline pastel tints (#eef6ff, #fffbe2) */
[data-bs-theme="dark"] .pinned-filter-btn[style*="background" i] {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-text) !important;
    border-color: var(--dtf-border) !important;
}

/* --- 14.6  Kanban boards --------------------------------------------------
   Column headers use a pastel tint (bg-[#c3dbfc] and friends) and the count
   pill plus the per-view select sit on bg-white/60. */
[data-bs-theme="dark"] .k-card {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .k-card>.sticky {
    background: var(--dtf-surface-2) !important;
}

[data-bs-theme="dark"] .k-card [data-kanban-stat] {
    background: rgba(255, 255, 255, .07) !important;
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] select[data-kanban-stat] option {
    background: var(--dtf-surface-2);
    color: var(--dtf-text);
}

/* the pipeline rows in Manage Statuses are `bg-white` utilities */
[data-bs-theme="dark"] .pipeline-item {
    background: var(--dtf-surface-2) !important;
    border-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] .pipeline-item h6 {
    color: var(--dtf-heading);
}

/* --- 14.7  Chat and LiveChat transcripts ---------------------------------- */
[data-bs-theme="dark"] .message-box.receive-message,
[data-bs-theme="dark"] .lc-bubble.lc-bot {
    background: var(--dtf-surface-2) !important;
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .message-box.sent-message,
[data-bs-theme="dark"] .lc-bubble.lc-agent {
    background: #211a33 !important;
    color: var(--dtf-text) !important;
}

[data-bs-theme="dark"] .lc-av {
    filter: brightness(.8) saturate(1.1);
}

/* --- 14.8  Calendar ------------------------------------------------------
   calendar.html and bookings-calendar.html redefine --cal-text/--cal-muted/
   --cal-border/--cal-page in a page-level `:root` block. That block comes
   later in the document than this file, and `:root` and `[data-bs-theme=dark]`
   have identical specificity -- so the page won every tie. `html[...]` adds a
   type selector and takes the tokens back. Retargeting the tokens fixes the
   panel, the toolbar and the grid in one place.

   FullCalendar's own surfaces are driven by its --fc-* variables, so they are
   set here rather than chased class by class.

   The mini-month and the event chips are deliberately NOT recoloured: their
   text was already light (#d8d6db) or already dark-on-a-coloured-chip, and it
   only measured badly because the panel behind it was white. Darkening the
   panel is the fix; touching the text as well made it worse (1.90 -> 1.58 on
   the first attempt). */
html[data-bs-theme="dark"] {
    --cal-text: #e8eaff;
    --cal-muted: #8c93ab;
    --cal-border: #26264f;
    --cal-page: #05051a;
    --primary-soft: #1c1b3f;

    --fc-page-bg-color: #0d0d26;
    --fc-neutral-bg-color: #13132e;
    --fc-border-color: #26264f;
    --fc-today-bg-color: rgba(130, 108, 255, .10);
    --fc-list-event-hover-bg-color: #1b1b3c;
    --fc-highlight-color: rgba(130, 108, 255, .14);
}

html[data-bs-theme="dark"] .vryno-calendar-main,
html[data-bs-theme="dark"] .vryno-calendar-toolbar,
html[data-bs-theme="dark"] .cal-side-panel {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .cal-view-switch {
    background: var(--dtf-surface-3) !important;
}

html[data-bs-theme="dark"] .cal-view-switch button.active {
    background: var(--dtf-surface) !important;
    color: var(--dtf-heading) !important;
    box-shadow: none;
}

html[data-bs-theme="dark"] .cal-mini-day:hover {
    background: var(--dtf-surface-3) !important;
}

/* FullCalendar surfaces that are literals rather than --fc-* variables */
html[data-bs-theme="dark"] .fc .fc-col-header,
html[data-bs-theme="dark"] .fc .fc-col-header-cell,
html[data-bs-theme="dark"] .fc .fc-timegrid-col,
html[data-bs-theme="dark"] .fc .fc-daygrid-day,
html[data-bs-theme="dark"] .fc .fc-scrollgrid,
html[data-bs-theme="dark"] .fc .fc-list,
html[data-bs-theme="dark"] .fc-theme-standard td,
html[data-bs-theme="dark"] .fc-theme-standard th {
    background-color: transparent !important;
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .fc .fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}

html[data-bs-theme="dark"] .fc-col-header-cell-cushion,
html[data-bs-theme="dark"] .fc-daygrid-day-number,
html[data-bs-theme="dark"] .fc-timegrid-slot-label-cushion,
html[data-bs-theme="dark"] .fc-list-day-text,
html[data-bs-theme="dark"] .fc-list-day-side-text {
    color: var(--dtf-text) !important;
}

html[data-bs-theme="dark"] .cal-navigation button,
html[data-bs-theme="dark"] #calendarToday {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-text) !important;
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .cs-logo,
html[data-bs-theme="dark"] .cal-logo {
    background: var(--dtf-surface-3) !important;
}

/* --- 14.9  Settings pages (per-page <style> blocks) ----------------------- */
[data-bs-theme="dark"] .cs-tile,
[data-bs-theme="dark"] .us-tile {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border-soft) !important;
}

[data-bs-theme="dark"] .cs-phead,
[data-bs-theme="dark"] .us-phead {
    background: linear-gradient(120deg, #10102b 0%, #0c0c22 100%) !important;
}

[data-bs-theme="dark"] .us-phead .ic,
[data-bs-theme="dark"] .cs-phead .ic,
[data-bs-theme="dark"] .offcanvas-header .ic {
    background: var(--dtf-surface-3) !important;
}

/* --- 14.10  Remaining literals ------------------------------------------- */

/* a bare `thead { background:#ededee }` on two list pages */
[data-bs-theme="dark"] thead {
    background-color: var(--dtf-surface-2);
}

/* the "previous period" bar in the dashboard column chart is a white hatch */
[data-bs-theme="dark"] .bar.previous {
    background: repeating-linear-gradient(45deg,
            #1b1b3c, #20204a 3px, #2c2c5e 3px, #2c2c5e 4px) !important;
    border-color: var(--dtf-border) !important;
}

[data-bs-theme="dark"] #section-details {
    background: var(--dtf-surface) !important;
}

/* chip and legend text measured 1.79 / 2.17 */
[data-bs-theme="dark"] .filter-chip {
    color: #b3a4ff;
    border-color: rgba(130, 108, 255, .38);
}

[data-bs-theme="dark"] .legend-item {
    color: var(--dtf-text);
}

/* form labels (1.41), muted helper paragraphs (1.36) and <small> (1.76) all
   inherit a grey that was tuned for a white field. */
[data-bs-theme="dark"] label.form-label,
[data-bs-theme="dark"] .form-label {
    color: var(--dtf-text);
}

[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] p.fs-14 {
    color: #8c93ab !important;
}

/* stat headings that hard-code their colour inline (style="color:#1f2544") */
[data-bs-theme="dark"] h1[style*="color:#" i],
[data-bs-theme="dark"] h2[style*="color:#" i],
[data-bs-theme="dark"] h3[style*="color:#" i],
[data-bs-theme="dark"] h4[style*="color:#" i],
[data-bs-theme="dark"] h5[style*="color:#" i],
[data-bs-theme="dark"] h6[style*="color:#" i] {
    color: var(--dtf-heading) !important;
}


/* ==========================================================================
   15. INLINE PASTEL BACKGROUNDS, ENUMERATED
   --------------------------------------------------------------------------
   The markup carries 7,124 inline `background:#hex` declarations. 61 of the
   distinct values are light (relative luminance > 0.62). Inline styles beat
   every stylesheet, so each one has to be named.

   Two groups are deliberately left alone:

     * the eight app tints used by the bottom strip's .tab-icon chips and the
       matching Add Apps tiles (#ede3fd #faebe3 #e6f1ff #e3f8ff #e4f7e3
       #ffe6f4 #fff1e6 #e3f5f3 and the four -wh variants). The app logos drawn
       on them are dark-on-light artwork; darkening the chip hides the logo,
       and the chips already read correctly against the dark strip.
     * high-chroma accents (#f5a623 #9bcaff #ef9dce #ffd36e). These are legend
       swatches and status dots, not surfaces -- the colour IS the content.

   That leaves 45 values across 1,339 elements, listed below. Enumerating them
   rather than matching `[style*="background" i]` is what keeps the saturated
   dark gradients used on the same classes untouched.
   ========================================================================== */
[data-bs-theme="dark"] [style*="background:#ffffff" i],
[data-bs-theme="dark"] [style*="background: #ffffff" i],
[data-bs-theme="dark"] [style*="background-color:#ffffff" i],
[data-bs-theme="dark"] [style*="background-color: #ffffff" i],
[data-bs-theme="dark"] [style*="background:#eef6ff" i],
[data-bs-theme="dark"] [style*="background: #eef6ff" i],
[data-bs-theme="dark"] [style*="background-color:#eef6ff" i],
[data-bs-theme="dark"] [style*="background-color: #eef6ff" i],
[data-bs-theme="dark"] [style*="background:#e6e0fc" i],
[data-bs-theme="dark"] [style*="background: #e6e0fc" i],
[data-bs-theme="dark"] [style*="background-color:#e6e0fc" i],
[data-bs-theme="dark"] [style*="background-color: #e6e0fc" i],
[data-bs-theme="dark"] [style*="background:#fafad7" i],
[data-bs-theme="dark"] [style*="background: #fafad7" i],
[data-bs-theme="dark"] [style*="background-color:#fafad7" i],
[data-bs-theme="dark"] [style*="background-color: #fafad7" i],
[data-bs-theme="dark"] [style*="background:#e9e7ff" i],
[data-bs-theme="dark"] [style*="background: #e9e7ff" i],
[data-bs-theme="dark"] [style*="background-color:#e9e7ff" i],
[data-bs-theme="dark"] [style*="background-color: #e9e7ff" i],
[data-bs-theme="dark"] [style*="background:#d8d4ff" i],
[data-bs-theme="dark"] [style*="background: #d8d4ff" i],
[data-bs-theme="dark"] [style*="background-color:#d8d4ff" i],
[data-bs-theme="dark"] [style*="background-color: #d8d4ff" i],
[data-bs-theme="dark"] [style*="background:#c9c3ff" i],
[data-bs-theme="dark"] [style*="background: #c9c3ff" i],
[data-bs-theme="dark"] [style*="background-color:#c9c3ff" i],
[data-bs-theme="dark"] [style*="background-color: #c9c3ff" i],
[data-bs-theme="dark"] [style*="background:#d3efdd" i],
[data-bs-theme="dark"] [style*="background: #d3efdd" i],
[data-bs-theme="dark"] [style*="background-color:#d3efdd" i],
[data-bs-theme="dark"] [style*="background-color: #d3efdd" i],
[data-bs-theme="dark"] [style*="background:#cae1fb" i],
[data-bs-theme="dark"] [style*="background: #cae1fb" i],
[data-bs-theme="dark"] [style*="background-color:#cae1fb" i],
[data-bs-theme="dark"] [style*="background-color: #cae1fb" i],
[data-bs-theme="dark"] [style*="background:#e8f2b9" i],
[data-bs-theme="dark"] [style*="background: #e8f2b9" i],
[data-bs-theme="dark"] [style*="background-color:#e8f2b9" i],
[data-bs-theme="dark"] [style*="background-color: #e8f2b9" i],
[data-bs-theme="dark"] [style*="background:#ffe7e7" i],
[data-bs-theme="dark"] [style*="background: #ffe7e7" i],
[data-bs-theme="dark"] [style*="background-color:#ffe7e7" i],
[data-bs-theme="dark"] [style*="background-color: #ffe7e7" i],
[data-bs-theme="dark"] [style*="background:#fffbe2" i],
[data-bs-theme="dark"] [style*="background: #fffbe2" i],
[data-bs-theme="dark"] [style*="background-color:#fffbe2" i],
[data-bs-theme="dark"] [style*="background-color: #fffbe2" i],
[data-bs-theme="dark"] [style*="background:#ffedfa" i],
[data-bs-theme="dark"] [style*="background: #ffedfa" i],
[data-bs-theme="dark"] [style*="background-color:#ffedfa" i],
[data-bs-theme="dark"] [style*="background-color: #ffedfa" i],
[data-bs-theme="dark"] [style*="background:#efe9ff" i],
[data-bs-theme="dark"] [style*="background: #efe9ff" i],
[data-bs-theme="dark"] [style*="background-color:#efe9ff" i],
[data-bs-theme="dark"] [style*="background-color: #efe9ff" i],
[data-bs-theme="dark"] [style*="background:#e2eeff" i],
[data-bs-theme="dark"] [style*="background: #e2eeff" i],
[data-bs-theme="dark"] [style*="background-color:#e2eeff" i],
[data-bs-theme="dark"] [style*="background-color: #e2eeff" i],
[data-bs-theme="dark"] [style*="background:#fff4e0" i],
[data-bs-theme="dark"] [style*="background: #fff4e0" i],
[data-bs-theme="dark"] [style*="background-color:#fff4e0" i],
[data-bs-theme="dark"] [style*="background-color: #fff4e0" i],
[data-bs-theme="dark"] [style*="background:#e6fff5" i],
[data-bs-theme="dark"] [style*="background: #e6fff5" i],
[data-bs-theme="dark"] [style*="background-color:#e6fff5" i],
[data-bs-theme="dark"] [style*="background-color: #e6fff5" i],
[data-bs-theme="dark"] [style*="background:#ffe9f3" i],
[data-bs-theme="dark"] [style*="background: #ffe9f3" i],
[data-bs-theme="dark"] [style*="background-color:#ffe9f3" i],
[data-bs-theme="dark"] [style*="background-color: #ffe9f3" i],
[data-bs-theme="dark"] [style*="background:#e3fbf6" i],
[data-bs-theme="dark"] [style*="background: #e3fbf6" i],
[data-bs-theme="dark"] [style*="background-color:#e3fbf6" i],
[data-bs-theme="dark"] [style*="background-color: #e3fbf6" i],
[data-bs-theme="dark"] [style*="background:#e9f2fe" i],
[data-bs-theme="dark"] [style*="background: #e9f2fe" i],
[data-bs-theme="dark"] [style*="background-color:#e9f2fe" i],
[data-bs-theme="dark"] [style*="background-color: #e9f2fe" i],
[data-bs-theme="dark"] [style*="background:#f1ecff" i],
[data-bs-theme="dark"] [style*="background: #f1ecff" i],
[data-bs-theme="dark"] [style*="background-color:#f1ecff" i],
[data-bs-theme="dark"] [style*="background-color: #f1ecff" i],
[data-bs-theme="dark"] [style*="background:#dfdeff" i],
[data-bs-theme="dark"] [style*="background: #dfdeff" i],
[data-bs-theme="dark"] [style*="background-color:#dfdeff" i],
[data-bs-theme="dark"] [style*="background-color: #dfdeff" i],
[data-bs-theme="dark"] [style*="background:#fdf0ff" i],
[data-bs-theme="dark"] [style*="background: #fdf0ff" i],
[data-bs-theme="dark"] [style*="background-color:#fdf0ff" i],
[data-bs-theme="dark"] [style*="background-color: #fdf0ff" i],
[data-bs-theme="dark"] [style*="background:#fff" i],
[data-bs-theme="dark"] [style*="background: #fff" i],
[data-bs-theme="dark"] [style*="background-color:#fff" i],
[data-bs-theme="dark"] [style*="background-color: #fff" i],
[data-bs-theme="dark"] [style*="background:#fff4e1" i],
[data-bs-theme="dark"] [style*="background: #fff4e1" i],
[data-bs-theme="dark"] [style*="background-color:#fff4e1" i],
[data-bs-theme="dark"] [style*="background-color: #fff4e1" i],
[data-bs-theme="dark"] [style*="background:#eaf2fd" i],
[data-bs-theme="dark"] [style*="background: #eaf2fd" i],
[data-bs-theme="dark"] [style*="background-color:#eaf2fd" i],
[data-bs-theme="dark"] [style*="background-color: #eaf2fd" i],
[data-bs-theme="dark"] [style*="background:#f2f2f7" i],
[data-bs-theme="dark"] [style*="background: #f2f2f7" i],
[data-bs-theme="dark"] [style*="background-color:#f2f2f7" i],
[data-bs-theme="dark"] [style*="background-color: #f2f2f7" i],
[data-bs-theme="dark"] [style*="background:#dcfce7" i],
[data-bs-theme="dark"] [style*="background: #dcfce7" i],
[data-bs-theme="dark"] [style*="background-color:#dcfce7" i],
[data-bs-theme="dark"] [style*="background-color: #dcfce7" i],
[data-bs-theme="dark"] [style*="background:#ffedd5" i],
[data-bs-theme="dark"] [style*="background: #ffedd5" i],
[data-bs-theme="dark"] [style*="background-color:#ffedd5" i],
[data-bs-theme="dark"] [style*="background-color: #ffedd5" i],
[data-bs-theme="dark"] [style*="background:#f1f1f1" i],
[data-bs-theme="dark"] [style*="background: #f1f1f1" i],
[data-bs-theme="dark"] [style*="background-color:#f1f1f1" i],
[data-bs-theme="dark"] [style*="background-color: #f1f1f1" i],
[data-bs-theme="dark"] [style*="background:#fed4e6" i],
[data-bs-theme="dark"] [style*="background: #fed4e6" i],
[data-bs-theme="dark"] [style*="background-color:#fed4e6" i],
[data-bs-theme="dark"] [style*="background-color: #fed4e6" i],
[data-bs-theme="dark"] [style*="background:#fce7f3" i],
[data-bs-theme="dark"] [style*="background: #fce7f3" i],
[data-bs-theme="dark"] [style*="background-color:#fce7f3" i],
[data-bs-theme="dark"] [style*="background-color: #fce7f3" i],
[data-bs-theme="dark"] [style*="background:#fdecea" i],
[data-bs-theme="dark"] [style*="background: #fdecea" i],
[data-bs-theme="dark"] [style*="background-color:#fdecea" i],
[data-bs-theme="dark"] [style*="background-color: #fdecea" i],
[data-bs-theme="dark"] [style*="background:#f7f6fb" i],
[data-bs-theme="dark"] [style*="background: #f7f6fb" i],
[data-bs-theme="dark"] [style*="background-color:#f7f6fb" i],
[data-bs-theme="dark"] [style*="background-color: #f7f6fb" i],
[data-bs-theme="dark"] [style*="background:#efecff" i],
[data-bs-theme="dark"] [style*="background: #efecff" i],
[data-bs-theme="dark"] [style*="background-color:#efecff" i],
[data-bs-theme="dark"] [style*="background-color: #efecff" i],
[data-bs-theme="dark"] [style*="background:#e6f8ec" i],
[data-bs-theme="dark"] [style*="background: #e6f8ec" i],
[data-bs-theme="dark"] [style*="background-color:#e6f8ec" i],
[data-bs-theme="dark"] [style*="background-color: #e6f8ec" i],
[data-bs-theme="dark"] [style*="background:#fdf2e3" i],
[data-bs-theme="dark"] [style*="background: #fdf2e3" i],
[data-bs-theme="dark"] [style*="background-color:#fdf2e3" i],
[data-bs-theme="dark"] [style*="background-color: #fdf2e3" i],
[data-bs-theme="dark"] [style*="background:#f9f9f9" i],
[data-bs-theme="dark"] [style*="background: #f9f9f9" i],
[data-bs-theme="dark"] [style*="background-color:#f9f9f9" i],
[data-bs-theme="dark"] [style*="background-color: #f9f9f9" i],
[data-bs-theme="dark"] [style*="background:#f5fff5" i],
[data-bs-theme="dark"] [style*="background: #f5fff5" i],
[data-bs-theme="dark"] [style*="background-color:#f5fff5" i],
[data-bs-theme="dark"] [style*="background-color: #f5fff5" i],
[data-bs-theme="dark"] [style*="background:#fff0f0" i],
[data-bs-theme="dark"] [style*="background: #fff0f0" i],
[data-bs-theme="dark"] [style*="background-color:#fff0f0" i],
[data-bs-theme="dark"] [style*="background-color: #fff0f0" i],
[data-bs-theme="dark"] [style*="background:#fffefd" i],
[data-bs-theme="dark"] [style*="background: #fffefd" i],
[data-bs-theme="dark"] [style*="background-color:#fffefd" i],
[data-bs-theme="dark"] [style*="background-color: #fffefd" i],
[data-bs-theme="dark"] [style*="background:#ffeff6" i],
[data-bs-theme="dark"] [style*="background: #ffeff6" i],
[data-bs-theme="dark"] [style*="background-color:#ffeff6" i],
[data-bs-theme="dark"] [style*="background-color: #ffeff6" i],
[data-bs-theme="dark"] [style*="background:#e1f0ff" i],
[data-bs-theme="dark"] [style*="background: #e1f0ff" i],
[data-bs-theme="dark"] [style*="background-color:#e1f0ff" i],
[data-bs-theme="dark"] [style*="background-color: #e1f0ff" i],
[data-bs-theme="dark"] [style*="background:#f8f8f8" i],
[data-bs-theme="dark"] [style*="background: #f8f8f8" i],
[data-bs-theme="dark"] [style*="background-color:#f8f8f8" i],
[data-bs-theme="dark"] [style*="background-color: #f8f8f8" i],
[data-bs-theme="dark"] [style*="background:#f0fff3" i],
[data-bs-theme="dark"] [style*="background: #f0fff3" i],
[data-bs-theme="dark"] [style*="background-color:#f0fff3" i],
[data-bs-theme="dark"] [style*="background-color: #f0fff3" i] {
    background: var(--dtf-surface-2) !important;
}


/* ==========================================================================
   16. THIRD PASS — what the second sweep left
   ========================================================================== */

/* --- 16.1  UA button chrome ------------------------------------------------
   .cal-mini-day sets no background, so it fell through to the UA's ButtonFace.
   Under color-scheme: dark that resolves to #6b6b6b -- a mid-grey pill behind
   every day number, which is why the mini month measured 1.90:1 even after the
   panel around it went dark. */
html[data-bs-theme="dark"] .cal-mini-day,
html[data-bs-theme="dark"] .cal-mini-nav button {
    background-color: transparent;
}

html[data-bs-theme="dark"] .cal-mini-day.muted {
    color: #6e7391;
}

html[data-bs-theme="dark"] .cal-mini-day.today,
html[data-bs-theme="dark"] .cal-mini-day.selected {
    background-color: rgba(130, 108, 255, .22);
    color: #d9dcff;
}

/* .cal-day-number / .cal-day-name are literal #25232b / #8b8b91 */
html[data-bs-theme="dark"] .cal-day-number {
    color: var(--dtf-heading);
}

html[data-bs-theme="dark"] .cal-day-name {
    color: var(--dtf-text);
}

/* FullCalendar declares its --fc-* defaults on .fc itself, and a variable set
   on the element always beats one inherited from <html>. Setting them again at
   .fc scope is what makes them take. */
html[data-bs-theme="dark"] .fc {
    --fc-page-bg-color: #0d0d26;
    --fc-neutral-bg-color: #13132e;
    --fc-border-color: #26264f;
    --fc-today-bg-color: rgba(130, 108, 255, .12);
    --fc-list-event-hover-bg-color: #1b1b3c;
    --fc-highlight-color: rgba(130, 108, 255, .14);
    --fc-neutral-text-color: #a9b1c7;
}

html[data-bs-theme="dark"] .fc .fc-day-today,
html[data-bs-theme="dark"] .fc th.fc-day-today,
html[data-bs-theme="dark"] .fc td.fc-day-today {
    background-color: rgba(130, 108, 255, .12) !important;
}

/* --- 16.2  Company / user settings pages ----------------------------------
   These use `.company-settings-page .cs-*` (specificity 0,2,0) in a page
   <style> block that loads after this file, so the dark rules need the same
   depth plus !important to win the cascade. */
html[data-bs-theme="dark"] .cs-nav,
html[data-bs-theme="dark"] .cs-content,
html[data-bs-theme="dark"] .us-nav,
html[data-bs-theme="dark"] .us-content {
    background: var(--dtf-surface) !important;
    border-color: var(--dtf-border-soft) !important;
}

html[data-bs-theme="dark"] .cs-nav .nav-link,
html[data-bs-theme="dark"] .us-nav .nav-link {
    color: var(--dtf-text) !important;
}

html[data-bs-theme="dark"] .cs-nav .nav-link:hover,
html[data-bs-theme="dark"] .us-nav .nav-link:hover {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-heading) !important;
}

html[data-bs-theme="dark"] .cs-nav .nav-link.active,
html[data-bs-theme="dark"] .us-nav .nav-link.active {
    background: rgba(130, 108, 255, .18) !important;
    color: #cdc2ff !important;
}

html[data-bs-theme="dark"] .cs-btn-white,
html[data-bs-theme="dark"] .us-btn-white {
    background: var(--dtf-surface-3) !important;
    color: var(--dtf-text) !important;
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .cs-tile b,
html[data-bs-theme="dark"] .us-tile b {
    color: var(--dtf-heading) !important;
}

html[data-bs-theme="dark"] .cs-tile small,
html[data-bs-theme="dark"] .us-tile small {
    color: var(--dtf-text) !important;
}

html[data-bs-theme="dark"] .profile-upload-img,
html[data-bs-theme="dark"] .profile-upload-file,
html[data-bs-theme="dark"] .cs-tile .ic,
html[data-bs-theme="dark"] .ic[style*="background" i] {
    background: var(--dtf-surface-3) !important;
    border-color: var(--dtf-border) !important;
}

/* --- 16.3  Coloured step chips -------------------------------------------
   `<button class="step bg-sky-500 active">` gets its text from style.css's
   `color: var(--white)`, which is #030318 in dark mode -- dark text on a
   saturated chip. Section 2 covered `.step-progress .step`; these are the
   standalone variant on the campaign and journey pages. */
html[data-bs-theme="dark"] button.step,
html[data-bs-theme="dark"] .step.active,
html[data-bs-theme="dark"] .step[class*="bg-"] {
    color: #fff !important;
}

/* --- 16.4  Text that still inherits a light-field grey -------------------- */
html[data-bs-theme="dark"] .cs-content b,
html[data-bs-theme="dark"] .cs-content p,
html[data-bs-theme="dark"] .us-content b,
html[data-bs-theme="dark"] .us-content p {
    color: var(--dtf-text) !important;
}

html[data-bs-theme="dark"] .cs-content h1,
html[data-bs-theme="dark"] .cs-content h2,
html[data-bs-theme="dark"] .cs-content h3,
html[data-bs-theme="dark"] .cs-content h4,
html[data-bs-theme="dark"] .cs-content h5,
html[data-bs-theme="dark"] .cs-content h6 {
    color: var(--dtf-heading) !important;
}


/* ==========================================================================
   17. PER-PAGE <style> BLOCKS, ENUMERATED
   --------------------------------------------------------------------------
   Sections 12 and 16 chased these by hand, page by page, and every new page
   audited produced a new family of class names (.section-card, .recipient-card,
   .upload-dropzone, .ap-box, .kbd-key, .ps-tile, ...). There are 476 pages,
   each with its own <style> block, so hand-chasing does not terminate.

   These rules are generated instead, by reading every <style> block in the
   project and selecting the declarations that cannot survive a dark canvas:

     background / background-color   relative luminance > 0.62, chroma <= 60
     background: linear-gradient()   any stop above 0.62 luminance
     color                           luminance < 0.42, chroma <= 45
     border / border-color           luminance > 0.70, chroma <= 40

   Colours are read as #hex, rgb()/rgba() and the light CSS keywords -- the
   first pass parsed only #hex and so missed things like calendar.html's
   `#calendar .fc-day-today { background: rgb(255,255,255) !important }`.

   The chroma ceilings are what keep semantic colour intact: a red status pill
   (#e0451f, chroma 193) or an amber chart stop is a *value*, not a surface, and
   is left alone. Only near-neutral light surfaces and near-neutral dark text
   are rewritten. The eight app tints are excluded for the reason in section 15.

   Prefixing each page selector with html[data-bs-theme="dark"] also raises its
   specificity, which is what lets these beat the page's own !important on
   ID-scoped rules.

   278 light backgrounds, 32 light gradients, 66 dark text colours and 126 light
   borders, emitted in groups of 40 so one selector a browser dislikes cannot
   invalidate the rest. Regenerate with _build/gen_page_dark.py.
   ========================================================================== */

/* page <style> rules with a light background (278 selectors) */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] th,
html[data-bs-theme="dark"] pre,
html[data-bs-theme="dark"] thead,
html[data-bs-theme="dark"] .cal-profile-avatar,
html[data-bs-theme="dark"] .cal-icon-button,
html[data-bs-theme="dark"] .cal-sidebar-card,
html[data-bs-theme="dark"] .cal-mini-nav button,
html[data-bs-theme="dark"] .cal-mini-day:hover,
html[data-bs-theme="dark"] .cal-next-card,
html[data-bs-theme="dark"] .cal-category-line,
html[data-bs-theme="dark"] .vryno-calendar-main,
html[data-bs-theme="dark"] .vryno-calendar-toolbar,
html[data-bs-theme="dark"] .cal-view-switch,
html[data-bs-theme="dark"] .cal-view-switch button.active,
html[data-bs-theme="dark"] #calendar .fc-col-header,
html[data-bs-theme="dark"] #calendar .fc-col-header-cell,
html[data-bs-theme="dark"] #calendar .fc-day-today,
html[data-bs-theme="dark"] .cal-event-popover,
html[data-bs-theme="dark"] .cal-popover-close,
html[data-bs-theme="dark"] .cal-popover-footer button:last-child,
html[data-bs-theme="dark"] .cal-popover-more-btn,
html[data-bs-theme="dark"] .cal-popover-more-btn:hover,
html[data-bs-theme="dark"] .cal-popover-more-btn.show,
html[data-bs-theme="dark"] .cal-popover-more-menu .dropdown-item:hover,
html[data-bs-theme="dark"] .cal-popover-more-menu .dropdown-item.text-danger:hover,
html[data-bs-theme="dark"] .cal-action-icon.success,
html[data-bs-theme="dark"] .cal-action-icon.danger,
html[data-bs-theme="dark"] .app-card,
html[data-bs-theme="dark"] .vr-input,
html[data-bs-theme="dark"] .biz-card,
html[data-bs-theme="dark"] .biz-card.selected .biz-radio::after,
html[data-bs-theme="dark"] .scroll-area::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .guide-toggle,
html[data-bs-theme="dark"] .guide-toggle-btn::after,
html[data-bs-theme="dark"] .form-floating>label,
html[data-bs-theme="dark"] .mini-app-icon,
html[data-bs-theme="dark"] #onboardModalCard,
html[data-bs-theme="dark"] .onboard-avatar-circle {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] .onboard-photo-btn.camera,
html[data-bs-theme="dark"] .onboard-photo-btn.camera:hover,
html[data-bs-theme="dark"] .onboard-photo-btn.upload,
html[data-bs-theme="dark"] .onboard-workspace-input-wrap input:disabled,
html[data-bs-theme="dark"] .vryno-notification-search .form-control:focus,
html[data-bs-theme="dark"] .vryno-summary-card,
html[data-bs-theme="dark"] .vryno-notification-list-card,
html[data-bs-theme="dark"] .vryno-notification-row:hover,
html[data-bs-theme="dark"] .vryno-notification-row .notification-avatar,
html[data-bs-theme="dark"] .vryno-reminder-card,
html[data-bs-theme="dark"] .ac-bg.accordion-button,
html[data-bs-theme="dark"] .list-unstyled a,
html[data-bs-theme="dark"] .custom-scroll::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .inline-editable-field:hover,
html[data-bs-theme="dark"] .inline-editable-field:focus,
html[data-bs-theme="dark"] .view-toggle-arrow,
html[data-bs-theme="dark"] .view-toggle-arrow:hover,
html[data-bs-theme="dark"] .recipient-row,
html[data-bs-theme="dark"] .upload-dropzone,
html[data-bs-theme="dark"] .upload-dropzone:hover,
html[data-bs-theme="dark"] .quick-preview-modal .preview-sheet,
html[data-bs-theme="dark"] .vrd-kpi .vrd-kpi-badge,
html[data-bs-theme="dark"] .kpi-icon,
html[data-bs-theme="dark"] .vrd-card,
html[data-bs-theme="dark"] .vrd-pill-select,
html[data-bs-theme="dark"] .insight-banner,
html[data-bs-theme="dark"] .recent-table thead th,
html[data-bs-theme="dark"] .recent-table tbody tr:hover,
html[data-bs-theme="dark"] .attention-item,
html[data-bs-theme="dark"] .forms-card,
html[data-bs-theme="dark"] .metric-card,
html[data-bs-theme="dark"] .template-card,
html[data-bs-theme="dark"] .builder-step,
html[data-bs-theme="dark"] .builder-canvas,
html[data-bs-theme="dark"] .builder-paper,
html[data-bs-theme="dark"] .field-block,
html[data-bs-theme="dark"] .form-sidebar-card,
html[data-bs-theme="dark"] .bar-chart-row .bar-track,
html[data-bs-theme="dark"] .send-layout-card,
html[data-bs-theme="dark"] .section-card {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] .section-card-header,
html[data-bs-theme="dark"] .send-step,
html[data-bs-theme="dark"] .upload-dropzone.dragover,
html[data-bs-theme="dark"] .file-row,
html[data-bs-theme="dark"] .recipient-card,
html[data-bs-theme="dark"] .preview-page,
html[data-bs-theme="dark"] .notice,
html[data-bs-theme="dark"] .user-settings-page .us-nav,
html[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link i,
html[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link:hover,
html[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link.active i,
html[data-bs-theme="dark"] .user-settings-page .us-panel,
html[data-bs-theme="dark"] .user-settings-page .us-avatar-edit img,
html[data-bs-theme="dark"] .user-settings-page table tbody tr:hover,
html[data-bs-theme="dark"] .role-chip,
html[data-bs-theme="dark"] .user-settings-page .lead-action-btn,
html[data-bs-theme="dark"] .user-settings-page .ap-act,
html[data-bs-theme="dark"] .user-settings-page .ap-act:hover,
html[data-bs-theme="dark"] .sig-tabs,
html[data-bs-theme="dark"] .sig-tabs button.active,
html[data-bs-theme="dark"] .sig-pane,
html[data-bs-theme="dark"] .dropzone,
html[data-bs-theme="dark"] .user-settings-page .offcanvas-header .ic,
html[data-bs-theme="dark"] .perm-group-head,
html[data-bs-theme="dark"] .swiper-pagination-bullet,
html[data-bs-theme="dark"] .swiper-pagination-bullet-active,
html[data-bs-theme="dark"] .left-side::before,
html[data-bs-theme="dark"] .continue-divider::before,
html[data-bs-theme="dark"] .continue-divider::after,
html[data-bs-theme="dark"] .tab-indicator,
html[data-bs-theme="dark"] select option,
html[data-bs-theme="dark"] .vn-bell,
html[data-bs-theme="dark"] .vn-panel,
html[data-bs-theme="dark"] .vn-icon-box,
html[data-bs-theme="dark"] .send-otp,
html[data-bs-theme="dark"] .verify-page::before,
html[data-bs-theme="dark"] .verify-page::after,
html[data-bs-theme="dark"] .step-connector.pending,
html[data-bs-theme="dark"] .step-num.pending,
html[data-bs-theme="dark"] .secured-badge {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] .vr-nav-item.vr-active .vr-icon-chip,
html[data-bs-theme="dark"] .vr-promo-btn,
html[data-bs-theme="dark"] .vr-footer-row,
html[data-bs-theme="dark"] .vr-theme-pill .dot,
html[data-bs-theme="dark"] .flyout,
html[data-bs-theme="dark"] .notification-cont .group:nth-child(2),
html[data-bs-theme="dark"] .notification-cont .group:nth-child(3),
html[data-bs-theme="dark"] .notification-cont .group:nth-child(4),
html[data-bs-theme="dark"] .rail-btn:hover,
html[data-bs-theme="dark"] .rail-btn.active,
html[data-bs-theme="dark"] .vr-module-strip,
html[data-bs-theme="dark"] .vr-strip-add,
html[data-bs-theme="dark"] #vrApp,
html[data-bs-theme="dark"] .vr-pill,
html[data-bs-theme="dark"] .vr-pill:focus,
html[data-bs-theme="dark"] .vr-btn-secondary,
html[data-bs-theme="dark"] .vr-btn-secondary:hover,
html[data-bs-theme="dark"] .vr-btn-back,
html[data-bs-theme="dark"] .vr-btn-back:hover,
html[data-bs-theme="dark"] .vr-app-tile,
html[data-bs-theme="dark"] .vr-app-tile:hover,
html[data-bs-theme="dark"] .vr-app-tile.sel,
html[data-bs-theme="dark"] .vr-chip,
html[data-bs-theme="dark"] .vr-app-count-pill,
html[data-bs-theme="dark"] .vr-guide-bubble,
html[data-bs-theme="dark"] .vr-progress-bar,
html[data-bs-theme="dark"] #vrSidebar,
html[data-bs-theme="dark"] .vr-sb-step:not(:last-child)::after,
html[data-bs-theme="dark"] .vr-sb-step.step-done::after,
html[data-bs-theme="dark"] .sbn-inactive,
html[data-bs-theme="dark"] .sbn-done,
html[data-bs-theme="dark"] .vr-sb-contact,
html[data-bs-theme="dark"] .vr-sb-contact:hover,
html[data-bs-theme="dark"] .vr-skip-all:hover,
html[data-bs-theme="dark"] .view-switch,
html[data-bs-theme="dark"] .view-switch a.active,
html[data-bs-theme="dark"] .vw-card,
html[data-bs-theme="dark"] .kb-col,
html[data-bs-theme="dark"] .kb-col-head .cnt,
html[data-bs-theme="dark"] .kb-card {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] #section-activity .reaction-pop,
html[data-bs-theme="dark"] .view-toggle-pill,
html[data-bs-theme="dark"] .deal-created-badge,
html[data-bs-theme="dark"] #quickLead .header-icon,
html[data-bs-theme="dark"] #quickLead .custom-btn-close,
html[data-bs-theme="dark"] #quickLead .custom-btn-close:hover,
html[data-bs-theme="dark"] .vrd-stripe-green,
html[data-bs-theme="dark"] .vrd-stripe-blue,
html[data-bs-theme="dark"] .vrd-stripe-red,
html[data-bs-theme="dark"] .vrd-insight,
html[data-bs-theme="dark"] .company-settings-page .cs-hero::after,
html[data-bs-theme="dark"] .company-settings-page .cs-hero::before,
html[data-bs-theme="dark"] .company-settings-page .cs-logo,
html[data-bs-theme="dark"] .company-settings-page .cs-hero .plan-badge,
html[data-bs-theme="dark"] .company-settings-page .cs-btn-white,
html[data-bs-theme="dark"] .company-settings-page .cs-btn-glass,
html[data-bs-theme="dark"] .company-settings-page .cs-btn-glass:hover,
html[data-bs-theme="dark"] .company-settings-page .cs-tile,
html[data-bs-theme="dark"] .company-settings-page .cs-nav,
html[data-bs-theme="dark"] .company-settings-page .cs-nav .nav-link:hover,
html[data-bs-theme="dark"] .company-settings-page .cs-content,
html[data-bs-theme="dark"] .company-settings-page .form-control,
html[data-bs-theme="dark"] .company-settings-page .form-select,
html[data-bs-theme="dark"] .company-settings-page .select,
html[data-bs-theme="dark"] .product-tile,
html[data-bs-theme="dark"] .us-panel,
html[data-bs-theme="dark"] .builder-top,
html[data-bs-theme="dark"] .node,
html[data-bs-theme="dark"] .type-pop,
html[data-bs-theme="dark"] .side-panel,
html[data-bs-theme="dark"] .product-settings-page .ps-logo,
html[data-bs-theme="dark"] .product-settings-page .ps-hero .plan-badge,
html[data-bs-theme="dark"] .product-settings-page .ps-btn-white,
html[data-bs-theme="dark"] .product-settings-page .ps-btn-glass,
html[data-bs-theme="dark"] .product-settings-page .ps-btn-glass:hover,
html[data-bs-theme="dark"] .product-settings-page .ps-tile,
html[data-bs-theme="dark"] .product-settings-page .side-col,
html[data-bs-theme="dark"] .product-settings-page .sp-current,
html[data-bs-theme="dark"] .product-settings-page .sp-current .sp-ico,
html[data-bs-theme="dark"] .product-settings-page .switch-product .dropdown-item:hover {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] .product-settings-page .switch-product .dropdown-item.current,
html[data-bs-theme="dark"] .product-settings-page .side-menu .nav-link:hover,
html[data-bs-theme="dark"] .product-settings-page .ps-content,
html[data-bs-theme="dark"] .product-settings-page .form-control,
html[data-bs-theme="dark"] .product-settings-page .form-select,
html[data-bs-theme="dark"] .product-settings-page .ps-hero::after,
html[data-bs-theme="dark"] .product-settings-page .ps-hero::before,
html[data-bs-theme="dark"] .product-settings-page .prod-nav,
html[data-bs-theme="dark"] .product-settings-page .prod-nav .nav-link:hover,
html[data-bs-theme="dark"] .product-settings-page .prod-nav .nav-link.active .prod-ico,
html[data-bs-theme="dark"] .product-settings-page .sub-nav::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .product-settings-page .sub-nav .nav-link:hover,
html[data-bs-theme="dark"] .user-settings-page .us-hero,
html[data-bs-theme="dark"] .user-settings-page .us-avatar,
html[data-bs-theme="dark"] .user-settings-page .us-tile,
html[data-bs-theme="dark"] .user-settings-page .us-ring::before,
html[data-bs-theme="dark"] .user-settings-page .us-nav::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .user-settings-page .us-row,
html[data-bs-theme="dark"] .user-settings-page .us-row:hover,
html[data-bs-theme="dark"] .user-settings-page .dropzone,
html[data-bs-theme="dark"] .user-settings-page .lead-action-btn:hover,
html[data-bs-theme="dark"] .al-scope-btn.active,
html[data-bs-theme="dark"] .user-settings-page .ap-subnav,
html[data-bs-theme="dark"] .user-settings-page .ap-tab,
html[data-bs-theme="dark"] .user-settings-page .ap-tab.active,
html[data-bs-theme="dark"] .user-settings-page .ap-box,
html[data-bs-theme="dark"] .user-settings-page .ap-box-head,
html[data-bs-theme="dark"] .user-settings-page .ap-box-foot,
html[data-bs-theme="dark"] .user-settings-page .ap-note,
html[data-bs-theme="dark"] .user-settings-page .ap-legend,
html[data-bs-theme="dark"] .ap-role-row:hover,
html[data-bs-theme="dark"] .user-settings-page .ap-role-row.active,
html[data-bs-theme="dark"] .user-settings-page .ap-role-row mark,
html[data-bs-theme="dark"] .user-settings-page .ap-pill,
html[data-bs-theme="dark"] .user-settings-page .ap-prow:hover,
html[data-bs-theme="dark"] .user-settings-page .ap-prow.active,
html[data-bs-theme="dark"] .user-settings-page .ap-seg,
html[data-bs-theme="dark"] .user-settings-page .ap-seg button.active,
html[data-bs-theme="dark"] .user-settings-page .ap-dirty,
html[data-bs-theme="dark"] #ap_offcanvas .offcanvas-header .ic {
    background-color: var(--dtf-surface) !important;
}

html[data-bs-theme="dark"] #ap_offcanvas .ap-oc-foot,
html[data-bs-theme="dark"] .user-settings-page .rp-card,
html[data-bs-theme="dark"] .user-settings-page .rp-chead,
html[data-bs-theme="dark"] .user-settings-page .rp-savebar,
html[data-bs-theme="dark"] .user-settings-page .rp-savebar.rp-dirty,
html[data-bs-theme="dark"] .node-card .card-head .dot,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] input[type=time],
html[data-bs-theme="dark"] input[type=text],
html[data-bs-theme="dark"] .card-head .icon-btn:hover,
html[data-bs-theme="dark"] .btn-ghost:hover,
html[data-bs-theme="dark"] .user-settings-page .tpl-back,
html[data-bs-theme="dark"] .user-settings-page .tpl-hint code,
html[data-bs-theme="dark"] .user-settings-page .tpl-divider,
html[data-bs-theme="dark"] .user-settings-page .lr-cond-idx,
html[data-bs-theme="dark"] .user-settings-page .wf-step-line,
html[data-bs-theme="dark"] .user-settings-page .wf-action-step,
html[data-bs-theme="dark"] .user-settings-page .wf-chip-wrap,
html[data-bs-theme="dark"] .user-settings-page .int-card,
html[data-bs-theme="dark"] .user-settings-page .tpl-stage,
html[data-bs-theme="dark"] .user-settings-page .tpl-canvas,
html[data-bs-theme="dark"] .user-settings-page .tpl-canvas .ql-toolbar.ql-snow,
html[data-bs-theme="dark"] .user-settings-page .tpl-merge .dropdown-item code,
html[data-bs-theme="dark"] .user-settings-page .tpl-attach-row,
html[data-bs-theme="dark"] .user-settings-page .tpl-chip,
html[data-bs-theme="dark"] .user-settings-page .tpl-chip button,
html[data-bs-theme="dark"] .user-settings-page .kbd-key,
html[data-bs-theme="dark"] .user-settings-page .kbd-key.kbd-key-accent,
html[data-bs-theme="dark"] .user-settings-page .kbd-row-edit:hover,
html[data-bs-theme="dark"] .user-settings-page .kbd-custom-row,
html[data-bs-theme="dark"] .user-settings-page .kbd-custom-row input.kbd-capture,
html[data-bs-theme="dark"] .lc-pane,
html[data-bs-theme="dark"] .lc-chat-item:hover,
html[data-bs-theme="dark"] .lc-chat-item.active,
html[data-bs-theme="dark"] .lc-in,
html[data-bs-theme="dark"] .lc-bot,
html[data-bs-theme="dark"] .lc-node {
    background-color: var(--dtf-surface) !important;
}


/* page <style> rules with a light gradient (32 selectors) */
html[data-bs-theme="dark"] .page-wrapper .content,
html[data-bs-theme="dark"] .page-wrapper,
html[data-bs-theme="dark"] .vryno-notifications-page,
html[data-bs-theme="dark"] .vryno-summary-card:before,
html[data-bs-theme="dark"] .vryno-reminder-card.overdue,
html[data-bs-theme="dark"] #contentContainer,
html[data-bs-theme="dark"] .vrd-kpi::before,
html[data-bs-theme="dark"] .bottom-cta,
html[data-bs-theme="dark"] .floating-actions,
html[data-bs-theme="dark"] .fixed-instagram,
html[data-bs-theme="dark"] .fixed-instagram span,
html[data-bs-theme="dark"] .vr-promo-card,
html[data-bs-theme="dark"] .inst-card.active-inst,
html[data-bs-theme="dark"] .nav-item:hover,
html[data-bs-theme="dark"] .nav-item.active,
html[data-bs-theme="dark"] .hatch,
html[data-bs-theme="dark"] .vrd-cta,
html[data-bs-theme="dark"] .bar.previous,
html[data-bs-theme="dark"] .company-settings-page .cs-phead,
html[data-bs-theme="dark"] .builder-main,
html[data-bs-theme="dark"] .product-settings-page .prod-head,
html[data-bs-theme="dark"] .product-settings-page .tile-p,
html[data-bs-theme="dark"] .product-settings-page .tile-g,
html[data-bs-theme="dark"] .product-settings-page .tile-g .ic,
html[data-bs-theme="dark"] .product-settings-page .tile-b,
html[data-bs-theme="dark"] .product-settings-page .tile-b .ic,
html[data-bs-theme="dark"] .product-settings-page .tile-a,
html[data-bs-theme="dark"] .product-settings-page .tile-a .ic,
html[data-bs-theme="dark"] .user-settings-page .us-tile,
html[data-bs-theme="dark"] .user-settings-page .us-ring,
html[data-bs-theme="dark"] .user-settings-page .set-card,
html[data-bs-theme="dark"] .lc-canvas {
    background-image: linear-gradient(160deg, #10102b 0%, #0b0b22 100%) !important;
}


/* page <style> rules with near-black text (44 selectors) */
html[data-bs-theme="dark"] .cal-mini-day.today,
html[data-bs-theme="dark"] .cal-view-switch button.active,
html[data-bs-theme="dark"] #calendar .cal-day-number,
html[data-bs-theme="dark"] #calendar .fc-col-header-cell.fc-day-today .cal-day-name,
html[data-bs-theme="dark"] #calendar .fc-event-time,
html[data-bs-theme="dark"] .fc-v-event .fc-event-main,
html[data-bs-theme="dark"] .cal-popover-title,
html[data-bs-theme="dark"] .cal-popover-footer button:last-child,
html[data-bs-theme="dark"] .cal-popover-more-btn,
html[data-bs-theme="dark"] .cal-action-title,
html[data-bs-theme="dark"] .cal-action-event-preview strong,
html[data-bs-theme="dark"] .vr-input,
html[data-bs-theme="dark"] .member-tag,
html[data-bs-theme="dark"] .btn-secondary,
html[data-bs-theme="dark"] .mini-app-title,
html[data-bs-theme="dark"] .onboard-summary-value,
html[data-bs-theme="dark"] .onboard-workspace-input-wrap input:disabled,
html[data-bs-theme="dark"] .tab-tab li button,
html[data-bs-theme="dark"] .recent-table thead th,
html[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link:hover,
html[data-bs-theme="dark"] select option,
html[data-bs-theme="dark"] .vr-logo-txt,
html[data-bs-theme="dark"] .vr-step-title,
html[data-bs-theme="dark"] .vr-pill,
html[data-bs-theme="dark"] .vr-app-name,
html[data-bs-theme="dark"] .vr-chip-lbl,
html[data-bs-theme="dark"] .vr-sb-step-title,
html[data-bs-theme="dark"] .vr-sb-help-t,
html[data-bs-theme="dark"] .vr-success-t,
html[data-bs-theme="dark"] .view-switch a:hover,
html[data-bs-theme="dark"] .kb-col-head,
html[data-bs-theme="dark"] .kb-card .t,
html[data-bs-theme="dark"] .company-settings-page .cs-tile b,
html[data-bs-theme="dark"] .company-settings-page .cs-nav .nav-link:hover,
html[data-bs-theme="dark"] .company-settings-page .cs-phead h5,
html[data-bs-theme="dark"] .product-settings-page .ps-tile b,
html[data-bs-theme="dark"] .product-settings-page .sp-current,
html[data-bs-theme="dark"] .product-settings-page .side-menu .nav-link:hover,
html[data-bs-theme="dark"] .product-settings-page .prod-head h5,
html[data-bs-theme="dark"] .product-settings-page .prod-nav .nav-link:hover {
    color: var(--dtf-heading) !important;
}

html[data-bs-theme="dark"] .product-settings-page .sub-nav .nav-link:hover,
html[data-bs-theme="dark"] .user-settings-page .us-tile small,
html[data-bs-theme="dark"] .user-settings-page .ap-tab:hover,
html[data-bs-theme="dark"] .user-settings-page .ap-seg button:hover {
    color: var(--dtf-heading) !important;
}


/* page <style> rules with dark-grey text (22 selectors) */
html[data-bs-theme="dark"] .cal-mini-day.muted,
html[data-bs-theme="dark"] .cal-navigation button,
html[data-bs-theme="dark"] .cal-popover-row,
html[data-bs-theme="dark"] .cal-popover-more-menu .dropdown-item,
html[data-bs-theme="dark"] .cal-action-modal .form-label,
html[data-bs-theme="dark"] .tracking-widest,
html[data-bs-theme="dark"] .mini-app-desc,
html[data-bs-theme="dark"] .onboard-close-btn,
html[data-bs-theme="dark"] .onboard-summary-label,
html[data-bs-theme="dark"] .kpi-label,
html[data-bs-theme="dark"] .user-settings-page .us-nav .nav-link,
html[data-bs-theme="dark"] .vr-step-sub,
html[data-bs-theme="dark"] .vr-field-label,
html[data-bs-theme="dark"] .vr-btn-skip:hover,
html[data-bs-theme="dark"] .vr-btn-back,
html[data-bs-theme="dark"] .vr-success-s,
html[data-bs-theme="dark"] .company-settings-page .cs-nav .nav-link,
html[data-bs-theme="dark"] .product-settings-page .side-menu .nav-link,
html[data-bs-theme="dark"] .user-settings-page .us-row .t,
html[data-bs-theme="dark"] .user-settings-page .ap-tab,
html[data-bs-theme="dark"] .user-settings-page .kbd-row .kbd-label,
html[data-bs-theme="dark"] .user-settings-page .kbd-key {
    color: var(--dtf-text) !important;
}


/* page <style> rules with a light border (126 selectors) */
html[data-bs-theme="dark"] td,
html[data-bs-theme="dark"] .cal-icon-button,
html[data-bs-theme="dark"] .cal-sidebar-card,
html[data-bs-theme="dark"] .vryno-calendar-main,
html[data-bs-theme="dark"] .cal-navigation button,
html[data-bs-theme="dark"] #calendar .fc-theme-standard td,
html[data-bs-theme="dark"] #calendar .fc-theme-standard th,
html[data-bs-theme="dark"] .cal-event-popover,
html[data-bs-theme="dark"] .cal-action-modal .modal-header,
html[data-bs-theme="dark"] .cal-action-modal .modal-footer,
html[data-bs-theme="dark"] .cal-action-event-preview,
html[data-bs-theme="dark"] .cal-action-modal .form-control,
html[data-bs-theme="dark"] .cal-action-modal .form-select,
html[data-bs-theme="dark"] .rail-btn,
html[data-bs-theme="dark"] .guide-avatar,
html[data-bs-theme="dark"] .guide-toggle,
html[data-bs-theme="dark"] .onboard-header-bar,
html[data-bs-theme="dark"] .onboard-avatar-circle,
html[data-bs-theme="dark"] .vryno-activity-dot,
html[data-bs-theme="dark"] .view-toggle-arrow,
html[data-bs-theme="dark"] .signer-avatar-stack img,
html[data-bs-theme="dark"] .recipient-row,
html[data-bs-theme="dark"] .upload-dropzone,
html[data-bs-theme="dark"] .quick-preview-modal .preview-sheet,
html[data-bs-theme="dark"] .vrd-card,
html[data-bs-theme="dark"] .activity-item,
html[data-bs-theme="dark"] .builder-canvas,
html[data-bs-theme="dark"] .builder-paper,
html[data-bs-theme="dark"] .field-block,
html[data-bs-theme="dark"] .form-sidebar-card .card-head,
html[data-bs-theme="dark"] .setting-line,
html[data-bs-theme="dark"] .send-layout-card,
html[data-bs-theme="dark"] .section-card-header,
html[data-bs-theme="dark"] .setting-row,
html[data-bs-theme="dark"] .preview-page,
html[data-bs-theme="dark"] .summary-row,
html[data-bs-theme="dark"] .notice,
html[data-bs-theme="dark"] .user-settings-page .us-phead,
html[data-bs-theme="dark"] .user-settings-page .us-avatar-edit img,
html[data-bs-theme="dark"] .user-settings-page table thead th {
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .sig-tabs,
html[data-bs-theme="dark"] .sig-pane,
html[data-bs-theme="dark"] .dropzone.has-file,
html[data-bs-theme="dark"] .user-settings-page .modal-header,
html[data-bs-theme="dark"] .user-settings-page .offcanvas-header,
html[data-bs-theme="dark"] .user-settings-page .modal-footer,
html[data-bs-theme="dark"] .perm-group,
html[data-bs-theme="dark"] .perm-group-head,
html[data-bs-theme="dark"] .template-card,
html[data-bs-theme="dark"] .template-thumb,
html[data-bs-theme="dark"] .vn-badge,
html[data-bs-theme="dark"] .vn-header,
html[data-bs-theme="dark"] .step-num.done,
html[data-bs-theme="dark"] .step-num.active,
html[data-bs-theme="dark"] .step-num.pending,
html[data-bs-theme="dark"] #vrApp,
html[data-bs-theme="dark"] .vr-pill,
html[data-bs-theme="dark"] .vr-btn-secondary,
html[data-bs-theme="dark"] .vr-btn-back,
html[data-bs-theme="dark"] .vr-app-tile,
html[data-bs-theme="dark"] .vr-chip,
html[data-bs-theme="dark"] .vr-app-count-pill,
html[data-bs-theme="dark"] .vr-guide-bubble,
html[data-bs-theme="dark"] #vrSidebar,
html[data-bs-theme="dark"] .sbn-inactive,
html[data-bs-theme="dark"] .sbn-done,
html[data-bs-theme="dark"] .vr-sb-help,
html[data-bs-theme="dark"] .vr-sb-contact,
html[data-bs-theme="dark"] .vw-card,
html[data-bs-theme="dark"] .kb-card,
html[data-bs-theme="dark"] .hatch,
html[data-bs-theme="dark"] .view-toggle-pill,
html[data-bs-theme="dark"] .lead-owner-avatar,
html[data-bs-theme="dark"] .bar.previous,
html[data-bs-theme="dark"] .legend-line.dotted,
html[data-bs-theme="dark"] .funnel-divider,
html[data-bs-theme="dark"] .company-settings-page .cs-btn-glass,
html[data-bs-theme="dark"] .company-settings-page .cs-phead,
html[data-bs-theme="dark"] .company-settings-page .set-card,
html[data-bs-theme="dark"] .company-settings-page .form-control {
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .company-settings-page .form-select,
html[data-bs-theme="dark"] .company-settings-page .select,
html[data-bs-theme="dark"] .company-settings-page table thead th,
html[data-bs-theme="dark"] .product-tile,
html[data-bs-theme="dark"] .product-settings-page .ps-btn-glass,
html[data-bs-theme="dark"] .product-settings-page .sp-current,
html[data-bs-theme="dark"] .product-settings-page .switch-product .dropdown-menu,
html[data-bs-theme="dark"] .product-settings-page .prod-head,
html[data-bs-theme="dark"] .product-settings-page .cfg-card,
html[data-bs-theme="dark"] .product-settings-page .form-control,
html[data-bs-theme="dark"] .product-settings-page .form-select,
html[data-bs-theme="dark"] .product-settings-page table thead th,
html[data-bs-theme="dark"] .product-settings-page .ps-tile,
html[data-bs-theme="dark"] .user-settings-page .us-tile,
html[data-bs-theme="dark"] .user-settings-page .set-card,
html[data-bs-theme="dark"] .user-settings-page .set-card:hover,
html[data-bs-theme="dark"] .user-settings-page .ap-subnav,
html[data-bs-theme="dark"] .user-settings-page .ap-box,
html[data-bs-theme="dark"] .user-settings-page .ap-box-head,
html[data-bs-theme="dark"] .user-settings-page .ap-box-foot,
html[data-bs-theme="dark"] .user-settings-page .ap-note,
html[data-bs-theme="dark"] .user-settings-page .ap-legend,
html[data-bs-theme="dark"] .ap-tree-children,
html[data-bs-theme="dark"] .user-settings-page .ap-role-row.active,
html[data-bs-theme="dark"] .user-settings-page .ap-prow.active,
html[data-bs-theme="dark"] .user-settings-page .ap-seg,
html[data-bs-theme="dark"] #ap_offcanvas .offcanvas-header,
html[data-bs-theme="dark"] #ap_offcanvas .ap-oc-foot,
html[data-bs-theme="dark"] .user-settings-page .rp-card,
html[data-bs-theme="dark"] .user-settings-page .rp-card.rp-child,
html[data-bs-theme="dark"] .user-settings-page .rp-chead,
html[data-bs-theme="dark"] .user-settings-page .rp-savebar,
html[data-bs-theme="dark"] .user-settings-page .tpl-back,
html[data-bs-theme="dark"] .user-settings-page .wf-action-step,
html[data-bs-theme="dark"] .user-settings-page .wf-chip-wrap,
html[data-bs-theme="dark"] .user-settings-page .int-card:hover,
html[data-bs-theme="dark"] .user-settings-page .tpl-canvas,
html[data-bs-theme="dark"] .user-settings-page .tpl-canvas .ql-toolbar.ql-snow,
html[data-bs-theme="dark"] .user-settings-page .tpl-merge,
html[data-bs-theme="dark"] .user-settings-page .tpl-attach-row {
    border-color: var(--dtf-border) !important;
}

html[data-bs-theme="dark"] .user-settings-page .kbd-key,
html[data-bs-theme="dark"] .user-settings-page .kbd-key.kbd-key-accent,
html[data-bs-theme="dark"] .user-settings-page .kbd-section-divider,
html[data-bs-theme="dark"] .user-settings-page .kbd-section-top,
html[data-bs-theme="dark"] .user-settings-page .kbd-custom-row,
html[data-bs-theme="dark"] .user-settings-page .kbd-custom-list .kbd-row {
    border-color: var(--dtf-border) !important;
}


/* ==========================================================================
   18. FOURTH PASS
   ========================================================================== */

/* --- 18.1  FullCalendar event chips ---------------------------------------
   Section 17 caught `#calendar .fc-event-time { color:#3b3b47 }` as "dark text"
   and lightened it -- but the chip it sits on is a light pastel that carries
   the event's category colour, and darkening the chip would throw that colour
   away. So the chip stays light and the text goes back to dark. This is the
   one place in the file where dark-on-light is the correct dark-mode answer.
   Measured 1.07:1 before, 8.9:1 after. */
html[data-bs-theme="dark"] .fc-event,
html[data-bs-theme="dark"] .fc-event .fc-event-title,
html[data-bs-theme="dark"] .fc-event .fc-event-time,
html[data-bs-theme="dark"] .fc-event .fc-event-main,
html[data-bs-theme="dark"] .fc-event .fc-event-main-frame,
html[data-bs-theme="dark"] #calendar .fc-event-time,
html[data-bs-theme="dark"] #calendar .fc-event-title {
    color: #1b1b2e !important;
}

/* the all-day / list variants sit on the canvas rather than on a chip */
html[data-bs-theme="dark"] .fc-list-event-title a,
html[data-bs-theme="dark"] .fc-list-event-time {
    color: var(--dtf-text) !important;
}

/* --- 18.2  Remaining chips and pills -------------------------------------- */
html[data-bs-theme="dark"] .recipient-number,
html[data-bs-theme="dark"] .field-chip,
html[data-bs-theme="dark"] .smart-field-btn,
html[data-bs-theme="dark"] .role-chip,
html[data-bs-theme="dark"] .member-tag {
    color: var(--dtf-text) !important;
}

html[data-bs-theme="dark"] .avatar.badge-soft-purple,
html[data-bs-theme="dark"] .avatar[class*="badge-soft-"] {
    color: #cdc2ff !important;
}

html[data-bs-theme="dark"] .avatar.bg-danger-transparent {
    background: rgba(255, 90, 90, .16) !important;
}

/* nav pills that mark the current item with a light fill */
html[data-bs-theme="dark"] a.d-block.fw-medium.active,
html[data-bs-theme="dark"] #upcomingDetails.primary {
    background: rgba(130, 108, 255, .18) !important;
    color: #cdc2ff !important;
}
html[data-bs-theme="dark"] .vp-need.crit,html[data-bs-theme="dark"] .vp-need.high {
    background: 
color-mix(in srgb, #030318 34%, transparent);
}
.card-body{
        border-radius: 16px;
}
/* ==========================================================================
   19. FIFTH PASS
   ========================================================================== */

/* Tailwind's translucent-white utilities. `bg-white/60` and friends resolve to
   rgba(255,255,255,.6), which over a dark card is a light grey block -- the
   kanban "add a card" placeholders and the column stat pills both use it. */
html[data-bs-theme="dark"] .bg-white\/5,
html[data-bs-theme="dark"] .bg-white\/10,
html[data-bs-theme="dark"] .bg-white\/20,
html[data-bs-theme="dark"] .bg-white\/30,
html[data-bs-theme="dark"] .bg-white\/40,
html[data-bs-theme="dark"] .bg-white\/50,
html[data-bs-theme="dark"] .bg-white\/60,
html[data-bs-theme="dark"] .bg-white\/70,
html[data-bs-theme="dark"] .bg-white\/75,
html[data-bs-theme="dark"] .bg-white\/80,
html[data-bs-theme="dark"] .bg-white\/90 {
    background-color: rgba(255, 255, 255, .06) !important;
}
/* ---- Add-record form: one neutral head, theme colour on the icon only ---- */
html[data-bs-theme="dark"] .vp-form-rail {
    background: #252525;
    border-color: rgba(255, 255, 255, .09);
}
html[data-bs-theme="dark"] .vp-rail-step {
    background: transparent;
}
html[data-bs-theme="dark"] .vp-rail-step:hover {
    background: rgba(255, 255, 255, .06);
    color: #d7d7e0;
}
html[data-bs-theme="dark"] .vp-rail-step.active {
    color: #fff;
}
html[data-bs-theme="dark"] .vp-rail-dot {
    background: rgba(255, 255, 255, .09);
    color: #a8a8b8;
}
html[data-bs-theme="dark"] .vp-rail-line {
    background: rgba(255, 255, 255, .12);
}
html[data-bs-theme="dark"] .vp-form-card {
    background: #252525;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: none;
}
html[data-bs-theme="dark"] .vp-form-card-head {
    border-bottom-color: rgba(255, 255, 255, .09);
}
html[data-bs-theme="dark"] .vp-form-card-head::after {
    background: rgba(255, 255, 255, .09);
    color: #a8a8b8;
}
html[data-bs-theme="dark"] .vp-form-card .form-label {
    color: #d7d7e0;
}
html[data-bs-theme="dark"] .vp-form-actions {
    background: linear-gradient(180deg, rgb(37 37 37 / 0%) 0%, #252525 45%);
}