html[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-body-color: #dedede;
    --bs-body-color-rgb: 222, 222, 222;
    --bs-secondary-bg: #1a1a1a;
    --bs-tertiary-bg: #202020;
    --bs-border-color: #333333;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

    --app-body: #121212;
    --app-surface: #1a1a1a;
    --app-surface-raised: #202020;
    --app-surface-muted: #242424;
    --app-surface-subtle: #151515;
    --app-panel-bg: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
    --app-panel-bg-strong: linear-gradient(135deg, #202020 0%, #181818 54%, #141414 100%);
    --app-border: #333333;
    --app-border-soft: #2a2a2a;
    --app-border-strong: #424242;
    --app-divider: #303030;
    --app-text: #dedede;
    --app-text-strong: #f4f4f4;
    --app-text-soft: #c7c7c7;
    --app-text-muted: #a3a3a3;
    --app-text-faint: #7e7e7e;
    --app-primary-deep: color-mix(in srgb, var(--bs-primary) 52%, #101010);
    --app-primary-soft: color-mix(in srgb, var(--bs-primary) 16%, transparent);
    --app-primary-faint: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    --app-secondary-soft: rgba(255, 255, 255, 0.08);
    --app-secondary-faint: rgba(255, 255, 255, 0.05);
    --app-shadow-xs: 0 8px 20px rgba(0, 0, 0, 0.18);
    --app-shadow-sm: 0 16px 36px rgba(0, 0, 0, 0.22);
    --app-shadow-md: 0 22px 46px rgba(0, 0, 0, 0.28);
    --app-shadow-lg: 0 30px 62px rgba(0, 0, 0, 0.36);

    --app-soft-card-border: var(--app-border);
    --app-soft-card-divider: var(--app-divider);
    --app-soft-card-bg: var(--app-panel-bg);
    --app-soft-card-head-bg: linear-gradient(180deg, #202020 0%, #1a1a1a 100%);
    color-scheme: dark;
}

html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .main-content,
html[data-bs-theme="dark"] .admin-layout,
html[data-bs-theme="dark"] .auth-layout,
html[data-bs-theme="dark"] .portal-layout {
    background: var(--app-body) !important;
    color: var(--app-text) !important;
}

html[data-bs-theme="dark"] body.bg-gray-600,
html[data-bs-theme="dark"] body.bg-gray-100,
html[data-bs-theme="dark"] .bg-gray-600,
html[data-bs-theme="dark"] .bg-gray-100 {
    background-color: var(--app-body) !important;
}

html[data-bs-theme="dark"]
    :is(
        .card,
        .dropdown-menu,
        .modal-content,
        .offcanvas,
        .popover,
        .tbl-page-intro,
        .tbl-page-list,
        .tbl-detail-card,
        .tbl-detail-modal__content,
        .mphb,
        .mdc-card,
        .mcc,
        .mkpi,
        .app-navbar,
        .app-navbar__identity,
        .app-navbar__account-menu,
        .theme-toggle,
        .app-notification-bell,
        .portal-shell__header,
        .portal-card,
        .support-public-header,
        .support-public-card
    ) {
    border-color: var(--app-border) !important;
    background: var(--app-panel-bg) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

html[data-bs-theme="dark"]
    :is(
        .card-header,
        .card-footer,
        .modal-header,
        .modal-footer,
        .offcanvas-header,
        .dropdown-header,
        .mui-tabs__nav,
        .mui-tabs__content,
        .tbl-toolbar__hint,
        .tbl-pill,
        .tbl-mini-pill,
        .tbl-stock-indicator,
        .tbl-bulkbar,
        .tbl-bulkbar__count,
        .mdc-check-card,
        .mdc-check-card__icon,
        .mdc-stat-list__item,
        .mcc__chart,
        .mkpi__chart,
        .portal-kpi
    ) {
    border-color: var(--app-border-soft) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"]
    :is(
        .form-control,
        .form-select,
        .input-group-text,
        .select2-selection,
        .select2-dropdown,
        .select2-search--dropdown,
        .select2-results__options,
        textarea,
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
        select
    ) {
    border-color: var(--app-border) !important;
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"]
    :is(
        .form-control,
        .form-select,
        .select2-search__field,
        textarea,
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"])
    )::placeholder {
    color: var(--app-text-faint) !important;
}

html[data-bs-theme="dark"] .sidenav.app-sidenav,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-dark,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-transparent {
    --app-sidenav-section: var(--app-text-muted);
    --app-sidenav-separator: var(--app-border);
    --app-sidenav-submenu-rail: var(--app-border-soft);
    --app-sidenav-hover: rgba(255, 255, 255, 0.06);
    --app-sidenav-nested-hover: rgba(255, 255, 255, 0.05);
    --app-sidenav-icon-bg: var(--app-surface-raised);
    --app-sidenav-icon-border: var(--app-border-soft);
    --app-sidenav-panel-bg: var(--app-panel-bg);
    --app-sidenav-panel-border: var(--app-border);
    --app-sidenav-chip-bg: var(--app-surface-raised);
    --app-sidenav-chip-color: var(--app-text-strong);
    --app-sidenav-search-bg: var(--app-surface);
    --app-sidenav-footer-bg: linear-gradient(
        180deg,
        rgba(18, 18, 18, 0) 0%,
        rgba(18, 18, 18, 0.88) 20%,
        #121212 100%
    );
    border-color: var(--app-border) !important;
    background: var(--app-panel-bg) !important;
    box-shadow: var(--app-shadow-md) !important;
}

html[data-bs-theme="dark"] .sidenav.app-sidenav .navbar-nav .nav-link.active,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-transparent .navbar-nav .nav-link.active,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-light .navbar-nav .nav-link.active,
.dark-version .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active,
html[data-bs-theme="dark"] .sidenav.app-sidenav .navbar-nav .nav-link.active .nav-link-text,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active .nav-link-text,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-transparent .navbar-nav .nav-link.active .nav-link-text,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-light .navbar-nav .nav-link.active .nav-link-text,
.dark-version .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active .nav-link-text,
html[data-bs-theme="dark"] .sidenav.app-sidenav .navbar-nav .nav-link.active i,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active i,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-transparent .navbar-nav .nav-link.active i,
html[data-bs-theme="dark"] .sidenav.app-sidenav.theme-sidebar-light .navbar-nav .nav-link.active i,
.dark-version .sidenav.app-sidenav.theme-sidebar-dark .navbar-nav .nav-link.active i,
html[data-bs-theme="dark"] .sidenav.app-sidenav .navbar-nav .nav-link.active .material-symbols-rounded {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    background-image: none !important;
    color: var(--app-text-strong) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] :is(.mui-tabs__btn, .tbl-page-btn, .btn-outline-dark, .btn.btn-outline-dark) {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface) !important;
    color: var(--app-text-strong) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] :is(.mui-tabs__btn:hover, .tbl-page-btn:hover, .btn-outline-dark:hover, .btn.btn-outline-dark:hover) {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"] .mui-btn.mui-btn--outline {
    --btn-bg: var(--app-surface);
    --btn-color: var(--app-text-strong);
    --btn-border: var(--app-border-strong);
    --btn-hover-accent: rgba(255, 255, 255, 0.06);
    border-color: var(--btn-border) !important;
    background: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .mui-btn.mui-btn--outline:hover,
html[data-bs-theme="dark"] .mui-btn.mui-btn--outline:focus-visible {
    --btn-bg: var(--app-surface-raised);
    --btn-color: var(--app-text-strong);
    --btn-border: var(--app-border-strong);
    background: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    border-color: var(--btn-border) !important;
}

html[data-bs-theme="dark"] .mui-btn:is(:disabled, .disabled, [aria-disabled="true"]) {
    --btn-bg: var(--app-surface-muted);
    --btn-color: var(--app-text-faint);
    --btn-border: var(--app-border-soft);
    border-color: var(--btn-border) !important;
    background: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    opacity: 0.64;
}

html[data-bs-theme="dark"] .mui-btn:is(:disabled, .disabled, [aria-disabled="true"]) .mui-btn__content {
    color: var(--btn-color) !important;
}

html[data-bs-theme="dark"] .mui-tabs__btn.active {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
    box-shadow: inset 0 -2px 0 var(--app-primary) !important;
}

html[data-bs-theme="dark"] :is(.btn-dark, .btn.btn-dark, .bg-gradient-dark, .btn.bg-gradient-dark, .badge.bg-gradient-dark) {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"] .tbl-table thead th,
html[data-bs-theme="dark"] .table > thead > tr > th {
    border-color: var(--app-divider) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-soft) !important;
}

html[data-bs-theme="dark"] .tbl-table tbody td,
html[data-bs-theme="dark"] .table > tbody > tr > td,
html[data-bs-theme="dark"] .tbl-table--compact tbody tr {
    border-color: var(--app-divider) !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-bs-theme="dark"] .tbl-table tbody tr:hover td,
html[data-bs-theme="dark"] .table > tbody > tr:hover > td {
    background: var(--app-surface-muted) !important;
}

html[data-bs-theme="dark"] :is(.app-page-loader, .support-public-page) {
    background: var(--app-body) !important;
}

html[data-bs-theme="dark"] :is(.app-page-loader__panel, .support-public-strip, .support-demo-guide, .portal-ticket-create-strip, .portal-ticket-demo-guide) {
    border-color: var(--app-border) !important;
    background: var(--app-panel-bg-strong) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

html[data-bs-theme="dark"] :is(.app-shell-section__eyebrow, .portal-shell__eyebrow, .badge.text-bg-secondary) {
    border-color: var(--app-border-soft) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"]
    :is(
        .support-public-page__eyebrow,
        .support-public-card__kicker,
        .support-public-card__status,
        .support-public-strip__item i,
        .support-public-page__step span,
        .support-demo-guide__copy span,
        .portal-ticket-create-strip i,
        .portal-ticket-demo-guide__copy span,
        .demo-create-guide__copy > span
    ) {
    border-color: var(--app-border-soft) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"]
    :is(
        .support-demo-guide__icon,
        .portal-ticket-demo-guide__icon,
        .demo-create-guide__icon
    ) {
    border-color: var(--app-border-soft) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
}

html[data-bs-theme="dark"]
    :is(
        .support-demo-guide__fill,
        .portal-ticket-demo-guide__fill,
        .demo-create-guide__fill,
        .demo-create-guide__step-fill
    ) {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-raised) !important;
    color: var(--app-text-strong) !important;
    box-shadow: none !important;
}