/* =====================================================================
 * Dark mode overrides.
 *
 * Every rule is scoped to html[data-theme="dark"], so the file is inert in
 * light mode. Wrapped in @media screen so printed pages (A4 codes, QR gifts)
 * stay black-on-white. Loaded AFTER @yield('css-page') to outrank the
 * per-page <style> blocks it has to correct.
 * ===================================================================== */

@media screen {

    html[data-theme="dark"] {
        --dk-bg: #12161c;
        --dk-surface: #1a1f27;
        --dk-surface-2: #212832;
        --dk-surface-3: #2a3340;
        --dk-surface-4: #333d4d;

        --dk-border: #303a48;
        --dk-border-strong: #3d4a5c;

        /* Contrast on --dk-surface: text 13.2:1, muted 6.7:1, link 6.9:1 */
        --dk-text: #e4e8ee;
        --dk-text-strong: #f5f7fa;
        --dk-text-muted: #9aa5b4;
        --dk-text-faint: #6f7b8c;

        --dk-link: #6ea8fe;
        --dk-link-hover: #a6c8ff;
        --dk-accent: #3f6ad8;

        /* Lightened from the Bootstrap originals to stay legible on dark */
        --dk-success: #4fd18b;
        --dk-danger: #ff6b81;
        --dk-warning: #ffc861;
        --dk-info: #5ec2ff;

        --dk-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45);

        /* Themes native scrollbars, selects and date pickers */
        color-scheme: dark;
    }

    /* =================================================================
     * 1. App shell
     * ================================================================= */

    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background-color: var(--dk-bg);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .app-container,
    html[data-theme="dark"].app-container,
    html[data-theme="dark"] .app-theme-white.app-container {
        background-color: var(--dk-bg);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .app-main,
    html[data-theme="dark"] .app-main__outer,
    html[data-theme="dark"] .app-main__inner {
        background-color: transparent;
        color: var(--dk-text);
    }

    html[data-theme="dark"] .app-theme-white .app-header,
    html[data-theme="dark"] .app-header {
        background-color: var(--dk-surface);
        color: var(--dk-text);
        border-bottom: 1px solid var(--dk-border);
    }

    html[data-theme="dark"] .app-header.header-shadow {
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .5);
    }

    html[data-theme="dark"] .app-theme-white .app-sidebar,
    html[data-theme="dark"] .app-sidebar {
        background-color: var(--dk-surface);
        border-right: 1px solid var(--dk-border);
    }

    html[data-theme="dark"] .app-sidebar.sidebar-shadow {
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .5);
    }

    html[data-theme="dark"] .app-theme-white .app-page-title,
    html[data-theme="dark"] .app-page-title {
        background-color: rgba(255, 255, 255, .03);
        border-bottom: 1px solid var(--dk-border);
    }

    html[data-theme="dark"] .page-title-heading,
    html[data-theme="dark"] .app-page-title .page-title-heading {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .page-title-subheading,
    html[data-theme="dark"] .app-page-title .page-title-subheading {
        color: var(--dk-text-muted);
        opacity: 1;
    }

    html[data-theme="dark"] .page-title-icon,
    html[data-theme="dark"] .app-page-title .page-title-icon {
        background-color: var(--dk-surface-2);
        border: 1px solid var(--dk-border);
        box-shadow: none;
        color: var(--dk-text);
    }

    html[data-theme="dark"] .app-footer,
    html[data-theme="dark"] .app-footer .app-footer__inner,
    html[data-theme="dark"] .app-theme-white .app-footer .app-footer__inner {
        background-color: var(--dk-surface);
        color: var(--dk-text-muted);
        border-top: 1px solid var(--dk-border);
    }

    /* Header clock */
    html[data-theme="dark"] .daiko-time,
    html[data-theme="dark"] .daiko-time #clock,
    html[data-theme="dark"] .daiko-time #date {
        color: var(--dk-text);
    }

    /* Header user block */
    html[data-theme="dark"] .header-user-info .widget-heading {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .header-user-info .widget-subheading {
        color: var(--dk-text-muted);
        opacity: 1;
    }

    /* =================================================================
     * 2. Theme toggle button
     * ================================================================= */

    #theme-toggle-btn {
        line-height: 1;
    }

    #theme-toggle-btn:focus,
    #theme-toggle-btn:active {
        box-shadow: none;
        outline: none;
    }

    #theme-toggle-btn .theme-icon-to-light {
        display: none;
    }

    html[data-theme="dark"] #theme-toggle-btn .theme-icon-to-dark {
        display: none;
    }

    html[data-theme="dark"] #theme-toggle-btn .theme-icon-to-light {
        display: inline-block;
    }

    /* Font Awesome glyphs read heavier than the ionicons next to them */
    .header-dots #theme-toggle-btn .icon-wrapper-alt i {
        font-size: 1.15rem;
    }

    /* The template's .2 opacity leaves these circles invisible on dark */
    html[data-theme="dark"] .header-dots .icon-wrapper-bg {
        opacity: .3;
    }

    /* =================================================================
     * 3. Sidebar
     * ================================================================= */

    html[data-theme="dark"] .app-sidebar .app-sidebar__heading,
    html[data-theme="dark"] .vertical-nav-menu li.app-sidebar__heading {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .vertical-nav-menu li a {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .vertical-nav-menu li a:hover {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-strong);
    }

    /* Light mode is green (#38bb77 on #e0ffe1) - keep the hue, not blue */
    html[data-theme="dark"] .vertical-nav-menu li a.mm-active,
    html[data-theme="dark"] .vertical-nav-menu li.mm-active > a {
        color: #5fd196;
        background-color: rgba(56, 187, 119, .14);
    }

    html[data-theme="dark"] .vertical-nav-menu li a .metismenu-icon {
        color: var(--dk-text-muted);
        opacity: 1;
    }

    html[data-theme="dark"] .vertical-nav-menu li a:hover .metismenu-icon,
    html[data-theme="dark"] .vertical-nav-menu li a.mm-active .metismenu-icon {
        color: #5fd196;
    }

    html[data-theme="dark"] .vertical-nav-menu ul:before {
        background-color: var(--dk-border);
    }

    html[data-theme="dark"] .vertical-nav-menu ul > li > a {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .vertical-nav-menu ul > li > a:hover {
        color: var(--dk-text-strong);
    }

    /* =================================================================
     * 4. Cards and widgets
     * ================================================================= */

    html[data-theme="dark"] .card,
    html[data-theme="dark"] .main-card,
    html[data-theme="dark"] .card.mb-3,
    html[data-theme="dark"] .profile-responsive {
        background-color: var(--dk-surface);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .card-footer,
    html[data-theme="dark"] .card-header-tab,
    html[data-theme="dark"] .card.card-shadow-primary > .card-header {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .card-title,
    html[data-theme="dark"] .card-body h5,
    html[data-theme="dark"] .card-body .card-title {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .main-card > .card-body > .card-title {
        border-bottom-color: var(--dk-border);
    }

    html[data-theme="dark"] .card-subtitle,
    html[data-theme="dark"] .card-body .text-muted {
        color: var(--dk-text-muted) !important;
    }

    html[data-theme="dark"] .widget-content,
    html[data-theme="dark"] .widget-chart {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .widget-heading,
    html[data-theme="dark"] .widget-numbers,
    html[data-theme="dark"] .widget-chart .widget-numbers {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .widget-subheading,
    html[data-theme="dark"] .widget-description {
        color: var(--dk-text-muted);
        opacity: 1;
    }

    html[data-theme="dark"] .widget-content .widget-content-right .widget-numbers {
        color: var(--dk-text-strong);
    }

    /* Rules and borders */
    html[data-theme="dark"] hr,
    html[data-theme="dark"] .divider {
        border-top-color: var(--dk-border);
        background-color: transparent;
    }

    html[data-theme="dark"] .border,
    html[data-theme="dark"] .border-top,
    html[data-theme="dark"] .border-bottom,
    html[data-theme="dark"] .border-left,
    html[data-theme="dark"] .border-right {
        border-color: var(--dk-border) !important;
    }

    /* =================================================================
     * 5. Typography, links, colour utilities
     * ================================================================= */

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] h5,
    html[data-theme="dark"] h6,
    html[data-theme="dark"] label,
    html[data-theme="dark"] legend,
    html[data-theme="dark"] .col-form-label,
    html[data-theme="dark"] dt {
        color: var(--dk-text-strong);
    }

    /*
     * Only class-less <a>. Anything with a class (.btn-*, .nav-link,
     * .dropdown-item, .k-link...) must keep its component colour, or button
     * labels get repainted. The template's #38bb77 already hits 6.6:1 here,
     * so only hover needs lifting.
     */
    html[data-theme="dark"] a:not([class]):hover,
    html[data-theme="dark"] a:not([class]):focus {
        color: #6fdba4;
    }

    html[data-theme="dark"] .text-dark,
    html[data-theme="dark"] .text-black,
    html[data-theme="dark"] .text-body {
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .text-muted,
    html[data-theme="dark"] .text-secondary,
    html[data-theme="dark"] .text-black-50 {
        color: var(--dk-text-muted) !important;
    }

    html[data-theme="dark"] .text-white-50 {
        color: rgba(255, 255, 255, .6) !important;
    }

    /* Semantic text colours, lightened for contrast */
    html[data-theme="dark"] .text-primary {
        color: var(--dk-link) !important;
    }

    html[data-theme="dark"] .text-success {
        color: var(--dk-success) !important;
    }

    html[data-theme="dark"] .text-danger {
        color: var(--dk-danger) !important;
    }

    html[data-theme="dark"] .text-warning {
        color: var(--dk-warning) !important;
    }

    html[data-theme="dark"] .text-info {
        color: var(--dk-info) !important;
    }

    /* Light utility backgrounds */
    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .bg-light {
        background-color: var(--dk-surface) !important;
        color: var(--dk-text);
    }

    /* Already-dark backgrounds only need their text fixed */
    html[data-theme="dark"] .bg-dark,
    html[data-theme="dark"] .bg-premium-dark,
    html[data-theme="dark"] .bg-slick-carbon {
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] code,
    html[data-theme="dark"] kbd,
    html[data-theme="dark"] samp {
        color: #ff9ec4;
    }

    html[data-theme="dark"] pre {
        background-color: var(--dk-surface-2);
        color: var(--dk-text);
        border: 1px solid var(--dk-border);
    }

    html[data-theme="dark"] ::selection {
        background: rgba(110, 168, 254, .35);
        color: var(--dk-text-strong);
    }

    /* =================================================================
     * 6. Bootstrap tables
     * ================================================================= */

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

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

    html[data-theme="dark"] .table thead th,
    html[data-theme="dark"] .table thead.thead-light th,
    html[data-theme="dark"] .table .thead-light th {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .table thead.thead-dark th {
        background-color: #0e1218;
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

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

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

    html[data-theme="dark"] .table-hover tbody tr:hover {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .table-active,
    html[data-theme="dark"] .table-active > th,
    html[data-theme="dark"] .table-active > td {
        background-color: var(--dk-surface-3);
    }

    /* Bootstrap's contextual rows are near-white tints - retint them */
    html[data-theme="dark"] .table-primary,
    html[data-theme="dark"] .table-primary > th,
    html[data-theme="dark"] .table-primary > td {
        background-color: rgba(63, 106, 216, .18);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .table-success,
    html[data-theme="dark"] .table-success > th,
    html[data-theme="dark"] .table-success > td {
        background-color: rgba(58, 196, 125, .16);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .table-warning,
    html[data-theme="dark"] .table-warning > th,
    html[data-theme="dark"] .table-warning > td {
        background-color: rgba(247, 185, 36, .16);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .table-danger,
    html[data-theme="dark"] .table-danger > th,
    html[data-theme="dark"] .table-danger > td {
        background-color: rgba(217, 37, 80, .18);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .table-info,
    html[data-theme="dark"] .table-info > th,
    html[data-theme="dark"] .table-info > td {
        background-color: rgba(22, 170, 255, .16);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .table-secondary,
    html[data-theme="dark"] .table-light,
    html[data-theme="dark"] .table-secondary > th,
    html[data-theme="dark"] .table-secondary > td,
    html[data-theme="dark"] .table-light > th,
    html[data-theme="dark"] .table-light > td {
        background-color: var(--dk-surface-2);
        color: var(--dk-text);
    }

    /* =================================================================
     * 7. Forms
     * ================================================================= */

    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .custom-select,
    html[data-theme="dark"] .custom-file-label,
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] input[type="text"],
    html[data-theme="dark"] input[type="number"],
    html[data-theme="dark"] input[type="password"],
    html[data-theme="dark"] input[type="email"],
    html[data-theme="dark"] input[type="search"],
    html[data-theme="dark"] input[type="tel"],
    html[data-theme="dark"] input[type="url"],
    html[data-theme="dark"] input[type="date"],
    html[data-theme="dark"] input[type="datetime-local"],
    html[data-theme="dark"] select {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .form-control:focus,
    html[data-theme="dark"] .custom-select:focus,
    html[data-theme="dark"] textarea:focus,
    html[data-theme="dark"] select:focus {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-accent);
        color: var(--dk-text-strong);
        box-shadow: 0 0 0 .2rem rgba(63, 106, 216, .3);
    }

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

    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-control[readonly],
    html[data-theme="dark"] select:disabled,
    html[data-theme="dark"] textarea:disabled {
        background-color: #171c23;
        color: var(--dk-text-muted);
        border-color: var(--dk-border);
    }

    html[data-theme="dark"] .input-group-text,
    html[data-theme="dark"] .custom-file-label::after {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .form-text,
    html[data-theme="dark"] small.form-text {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .custom-control-label {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .custom-control-label::before {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
    }

    html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
        background-color: var(--dk-accent);
        border-color: var(--dk-accent);
    }

    html[data-theme="dark"] .invalid-feedback {
        color: var(--dk-danger);
    }

    html[data-theme="dark"] .valid-feedback {
        color: var(--dk-success);
    }

    html[data-theme="dark"] fieldset,
    html[data-theme="dark"] .form-group {
        color: var(--dk-text);
    }

    /* =================================================================
     * 8. Buttons
     *
     * Solid semantic buttons carry their own background, so they read the same
     * on any page - left alone. Only the ones that borrow the page background
     * (light / secondary / outline / link) are retinted.
     * ================================================================= */

    html[data-theme="dark"] .btn-light,
    html[data-theme="dark"] .btn-white,
    html[data-theme="dark"] .btn-outline-light {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .btn-light:hover,
    html[data-theme="dark"] .btn-white:hover,
    html[data-theme="dark"] .btn-outline-light:hover {
        background-color: var(--dk-surface-4);
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .btn-secondary {
        background-color: #5a6474;
        border-color: #5a6474;
        color: #fff;
    }

    html[data-theme="dark"] .btn-secondary:hover {
        background-color: #6b7686;
        border-color: #6b7686;
        color: #fff;
    }

    /* Outline buttons borrow the page background, so they need retinting */
    html[data-theme="dark"] .btn-outline-secondary,
    html[data-theme="dark"] .btn-outline-dark {
        color: var(--dk-text-muted);
        border-color: var(--dk-border-strong);
    }

    html[data-theme="dark"] .btn-outline-secondary:hover,
    html[data-theme="dark"] .btn-outline-dark:hover {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .btn-outline-primary {
        color: var(--dk-link);
        border-color: var(--dk-link);
    }

    html[data-theme="dark"] .btn-outline-primary:hover {
        background-color: var(--dk-accent);
        border-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .btn-outline-success {
        color: var(--dk-success);
        border-color: var(--dk-success);
    }

    html[data-theme="dark"] .btn-outline-success:hover {
        background-color: var(--dk-success);
        border-color: var(--dk-success);
        color: #0d1a12;
    }

    html[data-theme="dark"] .btn-outline-danger {
        color: var(--dk-danger);
        border-color: var(--dk-danger);
    }

    html[data-theme="dark"] .btn-outline-danger:hover {
        background-color: var(--dk-danger);
        border-color: var(--dk-danger);
        color: #1c0a0f;
    }

    html[data-theme="dark"] .btn-outline-warning {
        color: var(--dk-warning);
        border-color: var(--dk-warning);
    }

    html[data-theme="dark"] .btn-outline-warning:hover {
        background-color: var(--dk-warning);
        border-color: var(--dk-warning);
        color: #1e1705;
    }

    html[data-theme="dark"] .btn-outline-info {
        color: var(--dk-info);
        border-color: var(--dk-info);
    }

    html[data-theme="dark"] .btn-outline-info:hover {
        background-color: var(--dk-info);
        border-color: var(--dk-info);
        color: #06141d;
    }

    html[data-theme="dark"] .btn-link {
        color: var(--dk-link);
    }

    html[data-theme="dark"] .btn-link:hover {
        color: var(--dk-link-hover);
    }

    /* White-on-amber is ~1.9:1 - flip to dark text */
    html[data-theme="dark"] .btn-warning,
    html[data-theme="dark"] .btn-warning:hover,
    html[data-theme="dark"] .btn-warning:focus {
        color: #1e1705;
    }

    html[data-theme="dark"] .btn.disabled,
    html[data-theme="dark"] .btn:disabled {
        opacity: .5;
    }

    /* =================================================================
     * 9. Dropdowns, modals, popovers, tooltips
     * ================================================================= */

    html[data-theme="dark"] .dropdown-menu {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
        box-shadow: var(--dk-shadow);
    }

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

    html[data-theme="dark"] .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-item:focus {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .dropdown-item.active,
    html[data-theme="dark"] .dropdown-item:active {
        background-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .dropdown-item.disabled,
    html[data-theme="dark"] .dropdown-item:disabled {
        color: var(--dk-text-faint);
    }

    html[data-theme="dark"] .dropdown-header,
    html[data-theme="dark"] h6.dropdown-header {
        color: var(--dk-text-muted);
    }

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

    /*
     * These headers keep their own gradient in both themes (bg-deep-blue is a
     * pale lavender), so the rules above must not lighten their text onto it.
     */
    html[data-theme="dark"] .dropdown-menu-header .menu-header-title,
    html[data-theme="dark"] .dropdown-menu-header .menu-header-subtitle,
    html[data-theme="dark"] .dropdown-menu-header .widget-heading,
    html[data-theme="dark"] .dropdown-menu-header .widget-subheading,
    html[data-theme="dark"] .dropdown-menu-header h5,
    html[data-theme="dark"] .dropdown-menu-header h6 {
        color: inherit;
    }

    html[data-theme="dark"] .dropdown-menu-header .text-dark,
    html[data-theme="dark"] .dropdown-menu-header .menu-header-content.text-dark {
        color: #212529 !important;
    }

    html[data-theme="dark"] .dropdown-menu-header .text-white,
    html[data-theme="dark"] .dropdown-menu-header .menu-header-content.text-white {
        color: #fff !important;
    }

    html[data-theme="dark"] .dropdown-menu-header .dropdown-menu-header-inner {
        border-bottom: 1px solid var(--dk-border);
    }

    /* Modal */
    html[data-theme="dark"] .modal-content {
        background-color: var(--dk-surface);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
        box-shadow: var(--dk-shadow);
    }

    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .modal-title,
    html[data-theme="dark"] .modal-header h5,
    html[data-theme="dark"] .modal-header .modal-title {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .modal-body {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .modal-backdrop,
    html[data-theme="dark"] .modal-backdrop.show {
        background-color: #000;
        opacity: .7;
    }

    /* Close buttons */
    html[data-theme="dark"] .close,
    html[data-theme="dark"] .close:hover,
    html[data-theme="dark"] button.close {
        color: var(--dk-text);
        text-shadow: none;
        opacity: .75;
    }

    html[data-theme="dark"] .close:hover {
        opacity: 1;
    }

    /* Popover / tooltip */
    html[data-theme="dark"] .popover {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .popover-header {
        background-color: var(--dk-surface-3);
        border-bottom-color: var(--dk-border);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .popover-body {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .bs-popover-top > .arrow::after,
    html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after {
        border-top-color: var(--dk-surface-2);
    }

    html[data-theme="dark"] .bs-popover-bottom > .arrow::after,
    html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
        border-bottom-color: var(--dk-surface-3);
    }

    html[data-theme="dark"] .bs-popover-left > .arrow::after,
    html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::after {
        border-left-color: var(--dk-surface-2);
    }

    html[data-theme="dark"] .bs-popover-right > .arrow::after,
    html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::after {
        border-right-color: var(--dk-surface-2);
    }

    html[data-theme="dark"] .tooltip-inner {
        background-color: #0b0e13;
        color: var(--dk-text);
    }

    /* =================================================================
     * 10. Alerts, badges, list groups, pagination, tabs, breadcrumbs
     * ================================================================= */

    html[data-theme="dark"] .alert-light,
    html[data-theme="dark"] .alert-secondary {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .alert-primary {
        background-color: rgba(63, 106, 216, .16);
        border-color: rgba(63, 106, 216, .45);
        color: #b9cdff;
    }

    html[data-theme="dark"] .alert-success {
        background-color: rgba(58, 196, 125, .14);
        border-color: rgba(58, 196, 125, .45);
        color: #a5eec7;
    }

    html[data-theme="dark"] .alert-danger {
        background-color: rgba(217, 37, 80, .16);
        border-color: rgba(217, 37, 80, .45);
        color: #ffb3c1;
    }

    html[data-theme="dark"] .alert-warning {
        background-color: rgba(247, 185, 36, .14);
        border-color: rgba(247, 185, 36, .45);
        color: #ffdf9e;
    }

    html[data-theme="dark"] .alert-info {
        background-color: rgba(22, 170, 255, .14);
        border-color: rgba(22, 170, 255, .45);
        color: #a8dfff;
    }

    html[data-theme="dark"] .alert-dark {
        background-color: #0e1218;
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .alert a,
    html[data-theme="dark"] .alert .alert-link {
        color: inherit;
        text-decoration: underline;
    }

    /* Light badges */
    html[data-theme="dark"] .badge-light {
        background-color: var(--dk-surface-3);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .badge-secondary {
        background-color: #5a6474;
        color: #fff;
    }

    html[data-theme="dark"] .badge-warning {
        color: #1e1705;
    }

    /* List group */
    html[data-theme="dark"] .list-group,
    html[data-theme="dark"] .list-group-item {
        background-color: var(--dk-surface);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .list-group-item-action:hover,
    html[data-theme="dark"] .list-group-item-action:focus {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .list-group-item.active {
        background-color: var(--dk-accent);
        border-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .list-group-item.disabled {
        background-color: var(--dk-surface-2);
        color: var(--dk-text-faint);
    }

    /* Pagination */
    html[data-theme="dark"] .page-link {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-link);
    }

    html[data-theme="dark"] .page-link:hover {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border-strong);
        color: var(--dk-link-hover);
    }

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

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

    /* Tab */
    html[data-theme="dark"] .nav-tabs {
        border-bottom-color: var(--dk-border);
    }

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

    html[data-theme="dark"] .nav-tabs .nav-link:hover {
        border-color: var(--dk-border) var(--dk-border) var(--dk-border);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .nav-tabs .nav-link.active,
    html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
        background-color: var(--dk-surface);
        border-color: var(--dk-border) var(--dk-border) var(--dk-surface);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .nav-pills .nav-link {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .nav-pills .nav-link.active {
        background-color: var(--dk-accent);
        color: #fff;
    }

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

    html[data-theme="dark"] .nav-item-header,
    html[data-theme="dark"] .nav .nav-item-header {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .nav-item-divider {
        background-color: var(--dk-border);
    }

    /* Breadcrumb */
    html[data-theme="dark"] .breadcrumb {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
    }

    html[data-theme="dark"] .breadcrumb-item,
    html[data-theme="dark"] .breadcrumb-item a {
        color: var(--dk-link);
    }

    html[data-theme="dark"] .breadcrumb-item.active {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
        color: var(--dk-text-faint);
    }

    /* Progress */
    html[data-theme="dark"] .progress {
        background-color: var(--dk-surface-3);
    }

    /* Empty-state block */
    html[data-theme="dark"] .no-results .results-subtitle {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .no-results .results-title {
        color: var(--dk-text-muted);
    }

    /* Notification timeline */
    html[data-theme="dark"] .vertical-timeline-element-content {
        background-color: var(--dk-surface-2);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .vertical-timeline::before,
    html[data-theme="dark"] .vertical-timeline-item .vertical-timeline-element-content .timeline-title {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .vertical-timeline-element-date {
        color: var(--dk-text-muted);
    }

    /* =================================================================
     * 11. Kendo UI (bootstrap theme) - grid, dropdown, calendar, popup
     * ================================================================= */

    html[data-theme="dark"] .k-widget,
    html[data-theme="dark"] .k-block,
    html[data-theme="dark"] .k-content,
    html[data-theme="dark"] .k-popup,
    html[data-theme="dark"] .k-grid {
        background-color: var(--dk-surface);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-grid-header,
    html[data-theme="dark"] .k-grid-header-wrap,
    html[data-theme="dark"] .k-grid-footer,
    html[data-theme="dark"] .k-grid-footer-wrap,
    html[data-theme="dark"] .k-grouping-header,
    html[data-theme="dark"] .k-header,
    html[data-theme="dark"] .k-grid-header th.k-header,
    html[data-theme="dark"] .k-grid-header .k-header {
        background-color: var(--dk-surface-2);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-grid-header .k-header > .k-link,
    html[data-theme="dark"] .k-grid-header .k-link,
    html[data-theme="dark"] .k-header > .k-link {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-grid-content,
    html[data-theme="dark"] .k-grid-content-locked {
        background-color: var(--dk-surface);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-grid table,
    html[data-theme="dark"] .k-grid tr td,
    html[data-theme="dark"] .k-grid td {
        background-color: transparent;
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-grid tr.k-alt,
    html[data-theme="dark"] .k-grid .k-alt,
    html[data-theme="dark"] .k-alt {
        background-color: rgba(255, 255, 255, .028);
    }

    html[data-theme="dark"] .k-grid tr:hover td,
    html[data-theme="dark"] .k-grid tbody tr:hover,
    html[data-theme="dark"] .k-grid tr.k-state-hover td {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-grid tr.k-state-selected td,
    html[data-theme="dark"] .k-grid td.k-state-selected {
        background-color: rgba(63, 106, 216, .3);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-grid-norecords,
    html[data-theme="dark"] .k-grid .k-grid-norecords-template {
        background-color: var(--dk-surface);
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-grid-toolbar,
    html[data-theme="dark"] .k-grid .k-grid-toolbar {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    /* Kendo pager */
    html[data-theme="dark"] .k-pager-wrap,
    html[data-theme="dark"] .k-grid-pager {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-pager-wrap .k-link,
    html[data-theme="dark"] .k-pager-nav,
    html[data-theme="dark"] .k-pager-numbers .k-link {
        color: var(--dk-link);
        border-color: transparent;
        background-color: transparent;
    }

    html[data-theme="dark"] .k-pager-wrap .k-link:hover,
    html[data-theme="dark"] .k-pager-numbers .k-link:hover {
        background-color: var(--dk-surface-3);
        color: var(--dk-link-hover);
    }

    html[data-theme="dark"] .k-pager-numbers .k-state-selected,
    html[data-theme="dark"] .k-pager-wrap .k-state-selected {
        background-color: var(--dk-accent);
        border-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .k-pager-info,
    html[data-theme="dark"] .k-pager-sizes,
    html[data-theme="dark"] .k-pager-wrap .k-pager-info {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-pager-wrap .k-state-disabled,
    html[data-theme="dark"] .k-state-disabled {
        color: var(--dk-text-faint);
        opacity: .6;
    }

    /* Kendo inputs, dropdowns, date pickers */
    html[data-theme="dark"] .k-textbox,
    html[data-theme="dark"] .k-input,
    html[data-theme="dark"] .k-textbox > input,
    html[data-theme="dark"] .k-autocomplete .k-input,
    html[data-theme="dark"] .k-picker-wrap,
    html[data-theme="dark"] .k-dropdown-wrap,
    html[data-theme="dark"] .k-numeric-wrap,
    html[data-theme="dark"] .k-multiselect-wrap,
    html[data-theme="dark"] .k-picker-wrap.k-state-default,
    html[data-theme="dark"] .k-dropdown-wrap.k-state-default,
    html[data-theme="dark"] .k-numeric-wrap.k-state-default,
    html[data-theme="dark"] .k-autocomplete.k-state-default {
        background-color: var(--dk-surface-2);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-picker-wrap.k-state-hover,
    html[data-theme="dark"] .k-dropdown-wrap.k-state-hover,
    html[data-theme="dark"] .k-numeric-wrap.k-state-hover,
    html[data-theme="dark"] .k-autocomplete.k-state-hover,
    html[data-theme="dark"] .k-multiselect-wrap.k-state-hover {
        background-color: var(--dk-surface-3);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-picker-wrap.k-state-focused,
    html[data-theme="dark"] .k-dropdown-wrap.k-state-focused,
    html[data-theme="dark"] .k-numeric-wrap.k-state-focused,
    html[data-theme="dark"] .k-autocomplete.k-state-focused,
    html[data-theme="dark"] .k-multiselect-wrap.k-state-focused,
    html[data-theme="dark"] .k-state-focused {
        border-color: var(--dk-accent);
        box-shadow: 0 0 0 .15rem rgba(63, 106, 216, .3);
    }

    html[data-theme="dark"] .k-dropdown .k-input,
    html[data-theme="dark"] .k-dropdown-wrap .k-input,
    html[data-theme="dark"] .k-picker-wrap .k-input,
    html[data-theme="dark"] .k-numeric-wrap .k-input {
        color: var(--dk-text);
        background-color: transparent;
    }

    html[data-theme="dark"] .k-input::placeholder,
    html[data-theme="dark"] .k-textbox::placeholder,
    html[data-theme="dark"] .k-multiselect-wrap .k-input::placeholder {
        color: var(--dk-text-faint);
    }

    /* Dropdown arrow / calendar button */
    html[data-theme="dark"] .k-select,
    html[data-theme="dark"] .k-picker-wrap .k-select,
    html[data-theme="dark"] .k-dropdown-wrap .k-select,
    html[data-theme="dark"] .k-numeric-wrap .k-link {
        background-color: var(--dk-surface-3);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-icon,
    html[data-theme="dark"] .k-i-arrow-s,
    html[data-theme="dark"] .k-i-calendar,
    html[data-theme="dark"] .k-link .k-icon {
        color: var(--dk-text);
    }

    /* Kendo popup lists */
    html[data-theme="dark"] .k-list-container,
    html[data-theme="dark"] .k-popup.k-list-container,
    html[data-theme="dark"] .k-animation-container .k-popup,
    html[data-theme="dark"] .k-list-scroller {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
        box-shadow: var(--dk-shadow);
    }

    html[data-theme="dark"] .k-list .k-item,
    html[data-theme="dark"] .k-list > .k-item,
    html[data-theme="dark"] .k-list-container .k-item {
        color: var(--dk-text);
        background-color: transparent;
    }

    html[data-theme="dark"] .k-list .k-item.k-state-hover,
    html[data-theme="dark"] .k-list > .k-item:hover,
    html[data-theme="dark"] .k-list-optionlabel:hover {
        background-color: var(--dk-surface-3);
        background-image: none;
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-list .k-item.k-state-selected,
    html[data-theme="dark"] .k-list > .k-state-selected,
    html[data-theme="dark"] .k-list-optionlabel.k-state-selected,
    html[data-theme="dark"] .k-state-selected {
        background-color: var(--dk-accent);
        background-image: none;
        border-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .k-list-optionlabel,
    html[data-theme="dark"] .k-nodata,
    html[data-theme="dark"] .k-no-data {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-group-header,
    html[data-theme="dark"] .k-list .k-group-header {
        background-color: var(--dk-surface-3);
        color: var(--dk-text-muted);
    }

    /* Multiselect chips */
    html[data-theme="dark"] .k-multiselect-wrap .k-button {
        background-color: var(--dk-surface-4);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    /* Kendo calendar */
    html[data-theme="dark"] .k-calendar {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-calendar .k-header,
    html[data-theme="dark"] .k-calendar .k-nav-fast,
    html[data-theme="dark"] .k-calendar .k-link.k-nav-fast {
        background-color: var(--dk-surface-3);
        background-image: none;
        border-color: var(--dk-border);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-calendar th,
    html[data-theme="dark"] .k-calendar .k-calendar-weekdays th {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border);
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-calendar td,
    html[data-theme="dark"] .k-calendar .k-link {
        color: var(--dk-text);
        border-color: transparent;
    }

    html[data-theme="dark"] .k-calendar .k-link:hover,
    html[data-theme="dark"] .k-calendar td.k-state-hover .k-link {
        background-color: var(--dk-surface-4);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-calendar .k-today .k-link,
    html[data-theme="dark"] .k-calendar td.k-today .k-link {
        border-color: var(--dk-link);
        color: var(--dk-link);
        box-shadow: inset 0 0 0 1px var(--dk-link);
    }

    html[data-theme="dark"] .k-calendar td.k-state-selected .k-link,
    html[data-theme="dark"] .k-calendar .k-state-selected .k-link {
        background-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .k-calendar .k-other-month .k-link,
    html[data-theme="dark"] .k-calendar .k-out-of-range .k-link {
        color: var(--dk-text-faint);
    }

    html[data-theme="dark"] .k-calendar .k-footer,
    html[data-theme="dark"] .k-calendar .k-footer .k-nav-today {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border);
        color: var(--dk-link);
    }

    /* Kendo window - detail and confirm popups */
    html[data-theme="dark"] .k-window {
        background-color: var(--dk-surface);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
        box-shadow: var(--dk-shadow);
    }

    html[data-theme="dark"] .k-window-titlebar,
    html[data-theme="dark"] .k-window .k-window-titlebar.k-header {
        background-color: var(--dk-surface-2);
        background-image: none;
        border-color: var(--dk-border);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-window-content,
    html[data-theme="dark"] .k-window .k-content {
        background-color: var(--dk-surface);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-window-action,
    html[data-theme="dark"] .k-window-titlebar .k-window-action .k-icon {
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-overlay {
        background-color: #000;
        opacity: .7;
    }

    /* Column filter menu */
    html[data-theme="dark"] .k-filter-menu,
    html[data-theme="dark"] .k-filter-menu.k-popup,
    html[data-theme="dark"] .k-columnmenu-item-wrapper,
    html[data-theme="dark"] .k-grid-filter-menu {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-filter-menu .k-filter-help-text,
    html[data-theme="dark"] .k-filter-menu label {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-grid-filter,
    html[data-theme="dark"] .k-grid .k-grid-filter .k-icon {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .k-grid-filter.k-state-active {
        background-color: var(--dk-surface-4);
        color: var(--dk-link);
    }

    /* Kendo buttons */
    html[data-theme="dark"] .k-button,
    html[data-theme="dark"] .k-button.k-state-default {
        background-color: var(--dk-surface-3);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-button:hover,
    html[data-theme="dark"] .k-button.k-state-hover {
        background-color: var(--dk-surface-4);
        background-image: none;
        border-color: var(--dk-border-strong);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .k-button.k-primary,
    html[data-theme="dark"] .k-primary {
        background-color: var(--dk-accent);
        background-image: none;
        border-color: var(--dk-accent);
        color: #fff;
    }

    html[data-theme="dark"] .k-button.k-primary:hover {
        background-color: #4f7ae4;
        border-color: #4f7ae4;
        color: #fff;
    }

    /* Loading */
    html[data-theme="dark"] .k-loading-mask,
    html[data-theme="dark"] .k-loading-mask .k-loading-color {
        background-color: rgba(18, 22, 28, .65);
        opacity: 1;
    }

    html[data-theme="dark"] .k-loading-text,
    html[data-theme="dark"] .k-loading-image {
        color: var(--dk-text);
    }

    /* Kendo tooltip */
    html[data-theme="dark"] .k-tooltip {
        background-color: #0b0e13;
        border-color: var(--dk-border-strong);
        color: var(--dk-text);
    }

    /* Kendo upload */
    html[data-theme="dark"] .k-upload,
    html[data-theme="dark"] .k-upload .k-dropzone,
    html[data-theme="dark"] .k-upload-files {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .k-upload-status,
    html[data-theme="dark"] .k-file .k-file-name {
        color: var(--dk-text);
    }

    /* =================================================================
     * 12. SweetAlert2 (and the SweetAlert1 bundled with Kendo)
     * ================================================================= */

    html[data-theme="dark"] .swal2-popup,
    html[data-theme="dark"] div.swal2-popup {
        background-color: var(--dk-surface) !important;
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .swal2-title,
    html[data-theme="dark"] .swal2-html-container,
    html[data-theme="dark"] .swal2-content,
    html[data-theme="dark"] .swal2-footer {
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .swal2-footer {
        border-top-color: var(--dk-border) !important;
    }

    html[data-theme="dark"] .swal2-input,
    html[data-theme="dark"] .swal2-textarea,
    html[data-theme="dark"] .swal2-select {
        background-color: var(--dk-surface-2) !important;
        border-color: var(--dk-border-strong) !important;
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .swal2-close {
        color: var(--dk-text-muted) !important;
    }

    html[data-theme="dark"] .swal2-container.swal2-backdrop-show,
    html[data-theme="dark"] .swal2-container {
        background-color: rgba(0, 0, 0, .7);
    }

    /* SweetAlert 1, shipped alongside Kendo */
    html[data-theme="dark"] .sweet-alert {
        background-color: var(--dk-surface) !important;
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .sweet-alert h2,
    html[data-theme="dark"] .sweet-alert p {
        color: var(--dk-text) !important;
    }

    /* =================================================================
     * 13. Highcharts HTML parts only - the SVG is themed in theme-toggle.js
     * ================================================================= */

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

    html[data-theme="dark"] .highcharts-data-table caption {
        color: var(--dk-text-muted);
    }

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

    html[data-theme="dark"] .highcharts-data-table th {
        background-color: var(--dk-surface-2);
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .highcharts-data-table tr:nth-child(even) {
        background-color: rgba(255, 255, 255, .028);
    }

    html[data-theme="dark"] .highcharts-data-table tr:hover {
        background-color: var(--dk-surface-3);
    }

    /* Export button context menu */
    html[data-theme="dark"] .highcharts-menu {
        background-color: var(--dk-surface-2) !important;
        border-color: var(--dk-border-strong) !important;
        box-shadow: var(--dk-shadow) !important;
    }

    html[data-theme="dark"] .highcharts-menu-item {
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .highcharts-menu-item:hover {
        background-color: var(--dk-surface-3) !important;
        color: var(--dk-text-strong) !important;
    }

    /* Tooltips built with useHTML: true */
    html[data-theme="dark"] .highcharts-tooltip span {
        color: var(--dk-text);
    }

    /* =================================================================
     * 14. Corrections for hard-coded colours in per-page <style> blocks
     * ================================================================= */

    /* --- configPrize/list --- */
    html[data-theme="dark"] .event-card {
        border-color: var(--dk-border-strong);
        background-color: var(--dk-surface);
    }

    html[data-theme="dark"] .event-card.primary {
        background: linear-gradient(135deg, rgba(58, 196, 125, .12) 0%, var(--dk-surface) 100%);
        border-color: var(--dk-success);
    }

    html[data-theme="dark"] .event-card.inactive {
        background-color: var(--dk-surface-2);
    }

    html[data-theme="dark"] .event-code-title {
        color: var(--dk-link);
    }

    html[data-theme="dark"] .event-card.primary .event-code-title {
        color: var(--dk-success);
    }

    html[data-theme="dark"] .config-count,
    html[data-theme="dark"] .config-item-body {
        color: var(--dk-text-muted);
    }

    html[data-theme="dark"] .config-details {
        background-color: var(--dk-surface-2);
        border-left-color: var(--dk-accent);
    }

    html[data-theme="dark"] .event-card.primary .config-details {
        border-left-color: var(--dk-success);
    }

    html[data-theme="dark"] .config-item {
        background-color: var(--dk-surface-3);
        border-color: var(--dk-border);
    }

    html[data-theme="dark"] .config-item-header {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .item-row {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
    }

    html[data-theme="dark"] .slider {
        background-color: #4a5462;
    }

    html[data-theme="dark"] .slider:before {
        background-color: #e4e8ee;
    }

    html[data-theme="dark"] input:checked + .slider {
        background-color: var(--dk-success);
    }

    /* --- customer/index --- */
    html[data-theme="dark"] .approve-legend {
        background-color: var(--dk-surface-2);
        color: var(--dk-text);
    }

    /* --- database/* --- */
    html[data-theme="dark"] .filter-form,
    html[data-theme="dark"] .record-data,
    html[data-theme="dark"] .sortable:hover {
        background-color: var(--dk-surface-2);
        border-color: var(--dk-border);
        color: var(--dk-text);
    }

    html[data-theme="dark"] .record-data pre,
    html[data-theme="dark"] #json-editor,
    html[data-theme="dark"] #command-result-content {
        background-color: #0e1218 !important;
        border-color: var(--dk-border) !important;
        color: var(--dk-text) !important;
    }

    html[data-theme="dark"] .pagination-info {
        color: var(--dk-text-muted);
    }

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

    /* --- tool/blacklist --- */
    html[data-theme="dark"] .item {
        background-color: var(--dk-surface-3);
        color: var(--dk-text);
    }

    /* Inline style="background: white" needs !important to beat it */
    html[data-theme="dark"] button[style*="background: white"],
    html[data-theme="dark"] button[style*="background:white"] {
        background-color: var(--dk-surface-3) !important;
        color: var(--dk-text) !important;
    }

    /* --- notification/index: unread rows --- */
    html[data-theme="dark"] tr.notif-row-unread,
    html[data-theme="dark"] .k-grid tr.notif-row-unread td {
        background-color: rgba(247, 185, 36, .12) !important;
        color: var(--dk-text-strong);
    }

    /* --- dashboard/tracking --- */
    html[data-theme="dark"] .highcharts-description {
        color: var(--dk-text-muted);
    }

    /* =================================================================
     * 15. Scrollbars
     * ================================================================= */

    html[data-theme="dark"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

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

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: #3a4553;
        border-radius: 6px;
        border: 2px solid var(--dk-bg);
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: #4b586a;
    }

    html[data-theme="dark"] .ps__thumb-y,
    html[data-theme="dark"] .ps__thumb-x {
        background-color: #3a4553;
    }

    html[data-theme="dark"] .ps__rail-y:hover > .ps__thumb-y,
    html[data-theme="dark"] .ps__rail-x:hover > .ps__thumb-x {
        background-color: #4b586a;
    }

    /* =================================================================
     * 16. Login page
     * ================================================================= */

    html[data-theme="dark"] .app-login-box h4,
    html[data-theme="dark"] .app-login-box .divider,
    html[data-theme="dark"] .app-login-box .form-group label {
        color: var(--dk-text-strong);
    }

    html[data-theme="dark"] .app-login-box h4 span,
    html[data-theme="dark"] .app-login-box .text-muted {
        color: var(--dk-text-muted) !important;
    }

    /* Take the glare off the logo */
    html[data-theme="dark"] .app-logo,
    html[data-theme="dark"] .logo-src {
        filter: brightness(.95);
    }
}

/* Everything above is @media screen, so print keeps its original look */
@media print {
    #theme-toggle-wrapper {
        display: none !important;
    }
}