/* ==========================================================================
   Dark theme for the client area, the public pages and the order flow.

   head.tpl sets html[data-color-scheme] before any style loads: the visitor's
   own choice from the top bar switch, else the system setting, else light.

   Light rules read the --dark-* tokens with their light colour as the fallback,
   e.g. background: var(--dark-surface, #fff). The tokens exist only while the
   dark theme is on, so the light theme renders exactly as it did before.
   The shared theme tokens are redefined with !important because the light
   blocks in custom.css and the order form set them that way.

   Everything dark sits in @media screen, so printing always uses light.
   Uses px because the theme root font-size is 10px.
   ========================================================================== */

/* Switch in the top bars ---------------------------------------------------- */

.idh-scheme-toggle__sun {
    display: none;
}

html[data-color-scheme="dark"] .idh-scheme-toggle__moon {
    display: none;
}

html[data-color-scheme="dark"] .idh-scheme-toggle__sun {
    display: block;
}

body.whmcs-dashboard-body .hostique-order-control--scheme,
body.whmcs-dashboard-body.is-public-page .hostique-order-control--scheme {
    width: 44px;
    min-width: 44px;
    padding: 0;
}

body.whmcs-dashboard-body .dashboard-focus-link--icon,
body.whmcs-dashboard-body.is-auth-page .dashboard-focus-link--icon {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    cursor: pointer;
}

body.whmcs-dashboard-body .dashboard-focus-link--icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Phone menu row: below 480px the order and public top bar cannot fit a fifth control beside the full logo,
   so the switch moves into the menu panel that opens from the top right button. */
.idh-onav-panel__scheme {
    display: none;
}

@media (max-width: 479.98px) {
    body.whmcs-dashboard-body .hostique-order-topbar__actions > .hostique-order-control--scheme {
        display: none !important;
    }

    body.whmcs-dashboard-body .idh-onav-panel__scheme:focus:not(:focus-visible) {
        outline: none;
    }

    body.whmcs-dashboard-body .idh-onav-panel__scheme {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 14px 4px;
        border: 0;
        border-top: 1px solid var(--io-line);
        border-radius: 0;
        background: none;
        color: var(--io-ink);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    body.whmcs-dashboard-body .idh-onav-panel__scheme svg {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--io-muted);
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.whmcs-dashboard-body .idh-scheme-toggle__label {
        flex: 1 1 auto;
    }

    body.whmcs-dashboard-body .idh-scheme-toggle__switch {
        position: relative;
        flex: 0 0 40px;
        width: 40px;
        height: 24px;
        border-radius: 999px;
        background: var(--io-field-border);
        transition: background-color 0.18s ease;
    }

    body.whmcs-dashboard-body .idh-scheme-toggle__switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: #fff;
        transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.whmcs-dashboard-body .idh-onav-panel__scheme[aria-pressed="true"] .idh-scheme-toggle__switch {
        background: var(--io-blue);
    }

    body.whmcs-dashboard-body .idh-onav-panel__scheme[aria-pressed="true"] .idh-scheme-toggle__switch::after {
        transform: translateX(16px);
    }
}

/* Login, register and reset: top right of the split layout, level with the logo. On desktop it sits on the photo. */
body.whmcs-dashboard-body .idh-auth {
    position: relative;
}

body.whmcs-dashboard-body .idh-auth__scheme {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(11, 13, 31, 0.5);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

body.whmcs-dashboard-body .idh-auth__scheme:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(11, 13, 31, 0.72);
}

body.whmcs-dashboard-body .idh-auth__scheme svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 991.98px) {
    body.whmcs-dashboard-body .idh-auth__scheme {
        top: 32px;
        right: 24px;
        border-color: var(--idh-line);
        background: var(--dark-surface, #fff);
        color: var(--idh-ink);
    }

    body.whmcs-dashboard-body .idh-auth__scheme:hover {
        border-color: rgba(49, 96, 246, 0.4);
        background: var(--dark-surface, #fff);
        color: var(--dark-link, var(--idh-blue));
    }
}

@media (max-width: 575.98px) {
    body.whmcs-dashboard-body .idh-auth__scheme {
        top: 24px;
        right: 20px;
    }
}

@media (min-width: 992px) and (max-height: 760px) {
    body.whmcs-dashboard-body .idh-auth__scheme {
        top: 32px;
    }
}

body.whmcs-dashboard-body .idh-scheme-toggle:focus-visible {
    outline: 2px solid var(--brand-primary, #3160f6);
    outline-offset: 2px;
}

/* Header logos: logo-on-light.png in light, the white logo.png in dark. */
.hostique-logo-lockup__image--dark {
    display: none !important;
}

@media screen {
    html[data-color-scheme="dark"] .hostique-logo-lockup__image--light {
        display: none !important;
    }

    html[data-color-scheme="dark"] .hostique-logo-lockup__image--dark {
        display: block !important;
    }
}

/* Dark palette ---------------------------------------------------------------
   Cool navy neutrals from the brand ink. Text contrast on --dark-surface:
   text 14.7:1, secondary 10.6:1, muted 7.1:1, links 7.1:1. Brand Blue stays
   the fill for buttons (white text 5.1:1); blue text uses --dark-link. */

@media screen {
    html[data-color-scheme="dark"] {
        color-scheme: dark;

        --dark-page: #0b0e17;
        --dark-surface: #131826;
        --dark-surface-soft: #0f131e;
        --dark-surface-raised: #181e2e;
        --dark-tint: #1a2133;
        --dark-line: #262d3f;
        --dark-line-soft: #1e2434;
        --dark-field-border: #424b62;
        --dark-text: #e7eaf3;
        --dark-text-secondary: #c2c8d6;
        --dark-text-muted: #9ba4b8;
        --dark-text-soft: #8a93a7;
        --dark-link: #84a0ff;
        --dark-link-hover: #a8bbff;
        --dark-blue-soft: #18224a;
        --dark-success-text: #86efac;
        --dark-success-bg: rgba(74, 222, 128, 0.12);
        --dark-warning-text: #fcd34d;
        --dark-danger-text: #fca5a5;
        --dark-danger-bg: rgba(248, 113, 113, 0.12);
        /* --danger turns light for red text on dark; red buttons keep a deep fill so white text stays 5.6:1. */
        --dark-danger-fill: #c62f35;
        /* The white top-edge highlights on light cards become a faint line. */
        --dark-highlight: rgba(255, 255, 255, 0.04);
        /* Blue button shadows read as a glow on dark; buttons lift with a neutral shadow instead. */
        --dark-cta-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.8);
    }

    html[data-color-scheme="dark"],
    html[data-color-scheme="dark"] body.whmcs-dashboard-body,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body[data-theme] {
        --brand-soft-1: #161f3d !important;
        --brand-soft-2: #1a244a !important;
        --brand-soft-3: #1f2b58 !important;
        --brand-border: #2d3d78 !important;
        --brand-border-soft: #1f2a52 !important;
        --surface-page: #0b0e17 !important;
        --surface-main: #0b0e17 !important;
        --surface-card: #131826 !important;
        --surface-soft: #0f131e !important;
        --surface-hover: #1a2133 !important;
        --surface-muted: rgba(38, 45, 63, 0.6) !important;
        --surface-2: rgba(38, 45, 63, 0.6) !important;
        --text-main: #e7eaf3 !important;
        --text-secondary: #c2c8d6 !important;
        --text-muted: #9ba4b8 !important;
        --text-soft: #8a93a7 !important;
        --border: #262d3f !important;
        --border-soft: #1e2434 !important;
        --border-light: #1e2434 !important;
        --success: #4ade80 !important;
        --success-bg: rgba(74, 222, 128, 0.1) !important;
        --success-border: rgba(74, 222, 128, 0.28) !important;
        --warning: #fbbf24 !important;
        --warning-bg: rgba(251, 191, 36, 0.1) !important;
        --warning-border: rgba(251, 191, 36, 0.28) !important;
        --danger: #f87171 !important;
        --danger-bg: rgba(248, 113, 113, 0.1) !important;
        --danger-border: rgba(248, 113, 113, 0.3) !important;
        --gradient-soft: #0f131e !important;
        --background: #0b0e17 !important;
        --foreground: #e7eaf3 !important;
        --card: rgba(19, 24, 38, 0.94) !important;
        --surface: #131826 !important;
        --muted: #9ba4b8 !important;
        --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
        --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.26) !important;
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
        --shadow-soft-lg: 0 18px 44px -28px rgba(0, 0, 0, 0.6) !important;

        --idh-ink: #e7eaf3;
        --idh-muted: #9ba4b8;
        --idh-soft: #8a93a7;
        --idh-line: #262d3f;
        --idh-page: #0b0e17;

        --io-ink: #e7eaf3;
        --io-muted: #9ba4b8;
        --io-soft: #8a93a7;
        --io-line: #262d3f;
        --io-field-border: #424b62;
        --io-page: #0b0e17;
        --io-tint: #1a2133;
        --io-surface: #131826;
        --io-danger: #f87171;
        --io-green: #4ade80;
        --io-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -28px rgba(0, 0, 0, 0.7);
    }

    /* The order form keeps its own set on #order-standard_cart. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body #order-standard_cart,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body[data-theme] #order-standard_cart {
        --order-surface-tint: #0f131e !important;
        --order-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.6) !important;
        --order-shadow-soft: 0 10px 28px -24px rgba(0, 0, 0, 0.55) !important;
        --saas-border: #262d3f !important;
        --saas-text: #e7eaf3 !important;
        --saas-muted: #9ba4b8 !important;
        --saas-bg: #0b0e17 !important;
        --saas-surface: #131826 !important;
        --saas-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
        --cloud-surface: #131826 !important;
        --cloud-border: #262d3f !important;
        --cloud-border-soft: #262d3f !important;
        --cloud-text: #e7eaf3 !important;
        --cloud-muted: #9ba4b8 !important;
        --cloud-primary-soft: #18224a !important;
        --cloud-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
    }

    /* Navy brand marks disappear on dark fields; the brands allow a light mark there. */
    html[data-color-scheme="dark"] body #order-standard_cart .idh-pay-logos__paypal,
    html[data-color-scheme="dark"] body #order-standard_cart .idh-pay-logos__visa {
        color: var(--dark-text);
    }

    /* Page and browser surfaces ----------------------------------------------- */

    html[data-color-scheme="dark"],
    html[data-color-scheme="dark"] body,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body {
        background-color: var(--dark-page) !important;
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] {
        scrollbar-color: #343c50 var(--dark-page);
    }

    html[data-color-scheme="dark"] ::selection {
        background: rgba(132, 160, 255, 0.32);
        color: #fff;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body ::placeholder {
        color: var(--dark-text-soft) !important;
        opacity: 1;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body h1,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body h2,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body h3,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body h4,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body h5,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body h6 {
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body a:not(.btn):not([class*="dashboard-"]):not([class*="hostique-"]):not([class*="idh-"]):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.page-link) {
        color: var(--dark-link);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body hr {
        border-top-color: var(--dark-line);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .text-muted,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .text-secondary,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body small.text-muted {
        color: var(--dark-text-muted) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .text-dark,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .text-body {
        color: var(--dark-text) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .bg-white,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .bg-light {
        background-color: var(--dark-surface) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .border,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .border-top,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .border-bottom {
        border-color: var(--dark-line) !important;
    }

    /* Bootstrap and WHMCS components ------------------------------------------ */

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .card,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .panel,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .well,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .list-group-item,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal-content,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .popover {
        background-color: var(--dark-surface);
        border-color: var(--dark-line);
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .card-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .card-footer,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .panel-heading,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .panel-footer,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal-footer {
        background-color: transparent;
        border-color: var(--dark-line);
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .list-group-item-action:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .list-group-item-action:focus {
        background-color: var(--dark-tint);
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .list-group-item.active {
        background-color: var(--brand-primary, #3160f6);
        border-color: var(--brand-primary, #3160f6);
        color: #fff;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dropdown-menu {
        background-color: var(--dark-surface-raised) !important;
        border-color: var(--dark-line) !important;
        box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7) !important;
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dropdown-item {
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dropdown-item:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dropdown-item:focus {
        background-color: var(--dark-tint) !important;
        color: var(--dark-text) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dropdown-divider {
        border-top-color: var(--dark-line);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-control,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .custom-select {
        background-color: var(--dark-surface-soft) !important;
        border-color: var(--dark-field-border) !important;
        color: var(--dark-text) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-control:focus,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .custom-select:focus {
        border-color: var(--brand-primary, #3160f6) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-control:disabled,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-control[readonly] {
        background-color: var(--dark-tint) !important;
        color: var(--dark-text-muted) !important;
    }

    /* Native autofill paints its own light fill; repaint it with the field colours. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body input:-webkit-autofill,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body input:-webkit-autofill:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--dark-text);
        box-shadow: 0 0 0 1000px var(--dark-surface-soft) inset !important;
        caret-color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .input-group-text,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .input-group-addon {
        background-color: var(--dark-tint) !important;
        border-color: var(--dark-field-border) !important;
        color: var(--dark-text-secondary) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body label,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .col-form-label,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .control-label {
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-check-input,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .custom-control-label::before {
        background-color: var(--dark-surface-soft);
        border-color: var(--dark-field-border);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .form-check-input:checked,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .custom-control-input:checked ~ .custom-control-label::before {
        background-color: var(--brand-primary, #3160f6);
        border-color: var(--brand-primary, #3160f6);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .icheckbox_square-blue,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .iradio_square-blue {
        background: var(--dark-surface-soft) !important;
        border-color: var(--dark-field-border) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.dataTable {
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table td,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table thead th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.dataTable thead th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.dataTable tbody td {
        border-color: var(--dark-line) !important;
    }

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

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table-hover tbody tr:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.dataTable tbody tr:hover {
        background-color: var(--dark-tint) !important;
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.dataTable tbody tr {
        background-color: transparent;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .nav-tabs {
        border-bottom-color: var(--dark-line);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .nav-tabs .nav-link.active,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .nav-tabs .nav-item.show .nav-link {
        background-color: var(--dark-surface);
        border-color: var(--dark-line) var(--dark-line) var(--dark-surface);
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .page-link {
        background-color: var(--dark-surface);
        border-color: var(--dark-line);
        color: var(--dark-link);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .page-item.disabled .page-link {
        background-color: var(--dark-surface);
        border-color: var(--dark-line);
        color: var(--dark-text-soft);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .breadcrumb {
        background-color: transparent;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-default,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-light,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-outline-secondary,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-secondary {
        background-color: var(--dark-tint);
        border-color: var(--dark-field-border);
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-default:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-light:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-outline-secondary:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .btn-secondary:hover {
        background-color: #222a3e;
        border-color: #4f5870;
        color: #fff;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .close {
        color: var(--dark-text);
        text-shadow: none;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .badge-light,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .badge-secondary {
        background-color: var(--dark-tint);
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .progress {
        background-color: var(--dark-line);
    }

    /* The light alerts set their colours with !important, so these do too. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-info,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-primary {
        background-color: #141d3a !important;
        border-color: #2a3a72 !important;
        color: #c9d5ff !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-success {
        background-color: #0f2619 !important;
        border-color: #1d4a30 !important;
        color: #b7f0cb !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-warning {
        background-color: #2a2110 !important;
        border-color: #54401a !important;
        color: #f6dfa6 !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-danger {
        background-color: #2c1417 !important;
        border-color: #5a262c !important;
        color: #fbc5c8 !important;
    }

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

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .tooltip-inner {
        background-color: #e7eaf3;
        color: #0b0d1f;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal-backdrop.show {
        opacity: 0.7;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body pre,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body code {
        background-color: var(--dark-surface-soft);
        color: var(--dark-text-secondary);
    }

    /* WHMCS Twenty-One (css/theme.min.css) surfaces the theme does not restyle itself: classic list tables,
       tiles, 2FA backup codes, upgrade and promo cards, payment summaries, markdown tables. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .img-thumbnail,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body header.header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm .nav-item a.active,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm-connector .channel,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .client-home-cards .card-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .promo-container,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .promo-banner,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .upgrade .products .product,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body div.product-details-tab-container,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .featured-tld,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .markdown-content table,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-preview table,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body table.table-list thead th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table-list > tbody > tr > td,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .custom-file-label,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .alert-light {
        background-color: var(--dark-surface);
        border-color: var(--dark-line);
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .jumbotron,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table .thead-light th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dataTables_wrapper table.table-list thead th.sorting_asc,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dataTables_wrapper table.table-list thead th.sorting_desc,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .tiles .tile,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .twofa-setup .backup-code,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .verification-banner,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .continue-container,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .invite-box,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .primary-bg-color,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .popover-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal .modal-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .markdown-content table > thead > tr > th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-preview table > thead > tr > th,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .view-ticket .posted-by,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .view-ticket .attachment-list li figure,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .ticketfeedbackstaffcont,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body div.credit-card,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .invoice-summary-table td.total-row,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body tr.masspay-total td,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body div.product-details div.product-icon,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .upgrade .product-to-be-upgraded,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .featured-tld .price {
        background-color: var(--dark-surface-soft);
        border-color: var(--dark-line);
        color: var(--dark-text-secondary);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table-list > tbody > tr:hover > td,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .tiles .tile:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .select-account a:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .popover-user-notifications ul li a:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm .nav-item a:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .kb-category a:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .kb-article-item:hover,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .modal-localisation .item-selector .item:hover {
        background-color: var(--dark-tint);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table-warning,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .table-warning > td,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .list-group-item-warning,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body mark,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .mark {
        background-color: rgba(251, 191, 36, 0.14);
        color: var(--dark-text);
    }

    /* Phone-width tab list: the vendor paints the active tab white with !important. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm .nav-item a.active {
        background-color: var(--dark-surface-raised) !important;
        color: var(--dark-text);
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .responsive-tabs-sm .nav-item {
        border-bottom-color: var(--dark-line) !important;
    }

    /* The vendor breadcrumb paints a box (with !important) that sits flush against its links. */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .breadcrumb,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .master-breadcrumb {
        background: transparent !important;
    }

    /* DirectAdmin panel (idhdirectadmin module) keeps every colour in --idhda-* tokens on .idhda.
       Accent and danger stay the button fills; where the module uses them as text, the lighter tones take over. */
    html[data-color-scheme="dark"] .idhda {
        color-scheme: dark;
        --idhda-surface: #131826;
        --idhda-surface-2: #0f131e;
        --idhda-track: #262d3f;
        --idhda-border: #262d3f;
        --idhda-border-strong: #424b62;
        --idhda-text: #e7eaf3;
        --idhda-muted: #9ba4b8;
        --idhda-soft: #8a93a7;
        --idhda-accent-soft: #18224a;
        --idhda-success: #86efac;
        --idhda-success-soft: rgba(74, 222, 128, 0.12);
        --idhda-warning: #fcd34d;
        --idhda-warning-soft: rgba(251, 191, 36, 0.12);
        --idhda-danger: #c62f35;
        --idhda-danger-soft: rgba(248, 113, 113, 0.12);
        --idhda-backdrop: rgba(0, 0, 0, 0.6);
        --idhda-tooltip: #e7eaf3;
        --idhda-on-tooltip: #0b0d1f;
        --idhda-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        --idhda-pop-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    html[data-color-scheme="dark"] .idhda a:not(.idhda-btn),
    html[data-color-scheme="dark"] .idhda-banner .idhda-icon,
    html[data-color-scheme="dark"] .idhda-id-tile,
    html[data-color-scheme="dark"] .idhda-empty-icon,
    html[data-color-scheme="dark"] .idhda-crumbs button,
    html[data-color-scheme="dark"] .idhda-file-name.is-dir .idhda-icon {
        color: var(--dark-link);
    }

    html[data-color-scheme="dark"] .idhda a:not(.idhda-btn):hover,
    html[data-color-scheme="dark"] .idhda-tag[data-kind="accent"] {
        color: var(--dark-link-hover);
    }

    html[data-color-scheme="dark"] .idhda-btn-quiet-danger,
    html[data-color-scheme="dark"] .idhda-icon-btn.is-danger:hover,
    html[data-color-scheme="dark"] .idhda-menu-danger b,
    html[data-color-scheme="dark"] .idhda-menu-danger .idhda-icon,
    html[data-color-scheme="dark"] .idhda-tag[data-kind="danger"],
    html[data-color-scheme="dark"] .idhda-field .idhda-error,
    html[data-color-scheme="dark"] .idhda-banner[data-kind="danger"] .idhda-icon {
        color: var(--dark-danger-text);
    }

    /* Markdown editor on tickets and replies (bootstrap-markdown). */
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor {
        border-color: var(--dark-line) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor > .md-header,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor > .md-footer {
        background: var(--dark-tint) !important;
        border-color: var(--dark-line) !important;
        color: var(--dark-text-secondary) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor .markdown-editor-status,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor .markdown-editor-status * {
        color: var(--dark-text-muted) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .md-editor > .md-preview {
        background: var(--dark-surface-soft) !important;
        color: var(--dark-text) !important;
    }

    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dataTables_wrapper .dataTables_info,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dataTables_wrapper .dataTables_length,
    html[data-color-scheme="dark"] body.whmcs-dashboard-body .dataTables_wrapper .dataTables_filter {
        color: var(--dark-text-muted);
    }
}