@charset "UTF-8";

/* Helpdesk theme core: one surface engine, one accent engine. */
:root {
    --hd-accent: #0a73eb;
    --hd-accent-rgb: 10, 115, 235;
    --hd-accent-hover: #085ccc;
    --hd-accent-soft: rgba(10, 115, 235, .14);
    --hd-nav-bg: #2c334d;

    --hd-page-bg: #f5f6fa;
    --hd-card-bg: #ffffff;
    --hd-raised-bg: #f3f4f8;
    --hd-border: #e5e7ef;
    --hd-text: #171b2f;
    --hd-muted: #8991aa;

    --bs-primary: var(--hd-accent) !important;
    --bs-primary-rgb: var(--hd-accent-rgb) !important;
    --bs-primary-active: var(--hd-accent-hover) !important;
    --bs-primary-light: var(--hd-accent-soft) !important;
    --bs-link-color: var(--hd-accent) !important;
    --bs-link-hover-color: var(--hd-accent-hover) !important;
}

html[data-theme="red"] {
    --hd-accent: #db2121;
    --hd-accent-rgb: 219, 33, 33;
    --hd-accent-hover: #b91c1c;
    --hd-accent-soft: rgba(219, 33, 33, .14);
    --hd-nav-bg: #27020d;
}
html[data-theme="green"] {
    --hd-accent: #26a942;
    --hd-accent-rgb: 38, 169, 66;
    --hd-accent-hover: #0f7526;
    --hd-accent-soft: rgba(38, 169, 66, .14);
    --hd-nav-bg: #0f2226;
}
html[data-theme="blue"] {
    --hd-accent: #0a73eb;
    --hd-accent-rgb: 10, 115, 235;
    --hd-accent-hover: #085ccc;
    --hd-accent-soft: rgba(10, 115, 235, .14);
    --hd-nav-bg: #2c334d;
}
html[data-theme="yellow"] {
    --hd-accent: #daa00b;
    --hd-accent-rgb: 218, 160, 11;
    --hd-accent-hover: #b08008;
    --hd-accent-soft: rgba(218, 160, 11, .14);
    --hd-nav-bg: #211e02;
}
html[data-theme="orange"] {
    --hd-accent: #e57717;
    --hd-accent-rgb: 229, 119, 23;
    --hd-accent-hover: #b25a00;
    --hd-accent-soft: rgba(229, 119, 23, .14);
    --hd-nav-bg: #241e13;
}

html[data-bs-theme="light"] {
    color-scheme: light;
    --hd-page-bg: #f5f6fa;
    --hd-card-bg: #ffffff;
    --hd-raised-bg: #f3f4f8;
    --hd-border: #e5e7ef;
    --hd-text: #171b2f;
    --hd-muted: #8991aa;
}

html[data-bs-theme="dark"] {
    color-scheme: dark;
    --hd-page-bg: #130d11;
    --hd-card-bg: #181216;
    --hd-raised-bg: #211a1f;
    --hd-border: #342a30;
    --hd-text: #f5f2f4;
    --hd-muted: #99909a;
}

/* Application surfaces. */
html body.hd-shell,
html body.hd-shell #kt_app_root,
html body.hd-shell #kt_app_page,
html body.hd-shell #kt_wrapper,
html body.hd-shell #kt_app_wrapper,
html body.hd-shell #kt_content,
html body.hd-shell #kt_app_content,
html body.hd-shell .app-main {
    background: var(--hd-page-bg) !important;
    background-color: var(--hd-page-bg) !important;
    color: var(--hd-text) !important;
}

html body.hd-shell .card,
html body.hd-shell .dashboard-card,
html body.hd-shell .modal-content,
html body.hd-shell .dropdown-menu,
html body.hd-shell .drawer,
html body.hd-shell .offcanvas,
html body.hd-shell .preferences-panel {
    background: var(--hd-card-bg) !important;
    background-color: var(--hd-card-bg) !important;
    border-color: var(--hd-border) !important;
    color: var(--hd-text) !important;
}

/* Header and primary sidebar always share the selected palette's dark half. */
html body.hd-shell #kt_header,
html body.hd-shell #kt_app_header,
html body.hd-shell .app-header,
html body.hd-shell .header,
html body.hd-shell .app-navbar,
html body.hd-shell #kt_header_container,
html body.hd-shell #kt_app_header_container,
html body.hd-shell #kt_aside,
html body.hd-shell #kt_primary_aside,
html body.hd-shell #kt_app_sidebar,
html body.hd-shell #kt_aside > *,
html body.hd-shell #kt_aside_logo,
html body.hd-shell #kt_aside_menu_wrapper,
html body.hd-shell #kt_aside_menu,
html body.hd-shell #aside_default_content,
html body.hd-shell #aside_default_content > .menu {
    background: var(--hd-nav-bg) !important;
    background-color: var(--hd-nav-bg) !important;
    background-image: none !important;
}

/* Light mode: only the fixed sidebar collapse footer is white. */
html[data-bs-theme="light"] body.hd-shell #hd_primary_aside_toggle {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top-color: #e5e7ef !important;
}
html[data-bs-theme="light"] body.hd-shell #hd_primary_aside_toggle .hd-primary-toggle-icon {
    color: #343847 !important;
}
html[data-bs-theme="dark"] body.hd-shell #hd_primary_aside_toggle {
    background: var(--hd-nav-bg) !important;
    background-color: var(--hd-nav-bg) !important;
    border-top-color: rgba(255,255,255,.10) !important;
}

/* Accent propagation. */
html .btn-primary {
    --bs-btn-bg: var(--hd-accent) !important;
    --bs-btn-border-color: var(--hd-accent) !important;
    --bs-btn-hover-bg: var(--hd-accent-hover) !important;
    --bs-btn-hover-border-color: var(--hd-accent-hover) !important;
    --bs-btn-active-bg: var(--hd-accent-hover) !important;
    --bs-btn-active-border-color: var(--hd-accent-hover) !important;
}
html a:not(.menu-link):not(.btn):not(.dropdown-item),
html .link-primary,
html .btn-link,
html .text-primary,
html .nav-link.active,
html .page-link {
    color: var(--hd-accent) !important;
}
html .border-primary { border-color: var(--hd-accent) !important; }
html .bg-primary { background-color: var(--hd-accent) !important; }
html .form-check-input:checked {
    background-color: var(--hd-accent) !important;
    border-color: var(--hd-accent) !important;
}
html .form-control:focus,
html .form-select:focus {
    border-color: var(--hd-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--hd-accent-rgb), .18) !important;
}

html body.hd-shell #aside_default_content .menu-link.active .menu-icon,
html body.hd-shell #aside_default_content .menu-link.active .menu-icon i,
html body.hd-shell #aside_default_content .menu-link.here .menu-icon,
html body.hd-shell #aside_default_content .menu-link.here .menu-icon i,
html body.hd-shell #aside_default_content .menu-item.here > .menu-link .menu-icon,
html body.hd-shell #aside_default_content .menu-item.here > .menu-link .menu-icon i {
    color: var(--hd-accent) !important;
}
html body.hd-shell #aside_default_content .hd-sidebar-active-indicator {
    background: var(--hd-accent) !important;
    background-color: var(--hd-accent) !important;
}

/* Logo image: preserve white source, tint to accent with a generated overlay. */
html body.hd-shell #kt_aside_logo,
html body.hd-shell .hd-theme-logo {
    color: var(--hd-accent) !important;
}
html body.hd-shell #kt_aside_logo img,
html body.hd-shell img.hd-theme-logo {
    filter: none !important;
}

/* Preference control states are native radio states; no generated DOM. */
.theme-option input:checked ~ .theme-preview {
    border-color: var(--hd-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--hd-accent-rgb), .24) !important;
}
.theme-option input:checked ~ .theme-label,
.theme-option input:checked ~ .theme-label .checkmark {
    color: var(--hd-accent) !important;
}

/* HD DARK MODE POLISH START */

/* =========================================================
   1. Dark body and application footer
========================================================= */

html[data-hd-resolved-appearance="dark"] {
    --hd-dark-body-bg: #1d1e2c;
    --hd-dark-footer-bg: #1d1e2c;
    --hd-dark-footer-border: rgba(255, 255, 255, 0.08);

    /*
     * Selected-theme accent aliases.
     * The clean theme core already changes --hd-primary.
     */
    --hd-sidebar-active-accent: var(--hd-primary);
    --hd-sidebar-active-soft: rgba(var(--hd-primary-rgb), 0.12);
}

html[data-hd-resolved-appearance="dark"] body,
html[data-hd-resolved-appearance="dark"] body.hd-shell,
html[data-hd-resolved-appearance="dark"] #kt_app_root,
html[data-hd-resolved-appearance="dark"] #kt_app_page,
html[data-hd-resolved-appearance="dark"] #kt_wrapper,
html[data-hd-resolved-appearance="dark"] #kt_app_wrapper,
html[data-hd-resolved-appearance="dark"] #kt_content,
html[data-hd-resolved-appearance="dark"] #kt_app_content,
html[data-hd-resolved-appearance="dark"] .app-main {
    background-color: var(--hd-dark-body-bg) !important;
}

/*
 * Main application footer.
 */
html[data-hd-resolved-appearance="dark"] #kt_footer,
html[data-hd-resolved-appearance="dark"] #kt_app_footer,
html[data-hd-resolved-appearance="dark"] .app-footer,
html[data-hd-resolved-appearance="dark"] footer.footer {
    background: var(--hd-dark-footer-bg) !important;
    background-color: var(--hd-dark-footer-bg) !important;
    border-color: var(--hd-dark-footer-border) !important;
}

/*
 * Footer text remains readable while links use the selected theme color.
 */
html[data-hd-resolved-appearance="dark"] #kt_footer,
html[data-hd-resolved-appearance="dark"] #kt_app_footer,
html[data-hd-resolved-appearance="dark"] .app-footer,
html[data-hd-resolved-appearance="dark"] footer.footer {
    color: #a6a8b8 !important;
}

html[data-hd-resolved-appearance="dark"] #kt_footer a,
html[data-hd-resolved-appearance="dark"] #kt_app_footer a,
html[data-hd-resolved-appearance="dark"] .app-footer a,
html[data-hd-resolved-appearance="dark"] footer.footer a {
    color: var(--hd-primary) !important;
}

/* =========================================================
   2. Active sidebar menu background
========================================================= */

/*
 * Use one neutral active surface with a subtle selected-color tint.
 */
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item > .menu-link.active,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item > .menu-link.here,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link {
    background:
        linear-gradient(
            90deg,
            var(--hd-sidebar-active-soft),
            rgba(255, 255, 255, 0.025)
        ),
        #252838 !important;

    background-color: #252838 !important;
    border-color: rgba(var(--hd-primary-rgb), 0.20) !important;
    box-shadow: none !important;
}

/*
 * Active title stays white.
 * It must not inherit the selected primary color.
 */
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-link.active .menu-title,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-link.here .menu-title,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-title {
    color: #ffffff !important;
}

/* =========================================================
   3. Active icon and indicator use selected primary color
========================================================= */

html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon svg,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon svg,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon svg {
    color: var(--hd-primary) !important;
    fill: none;
}

/*
 * Keenicons normally inherit currentColor.
 */
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon [class*="ki-"],
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon [class*="ki-"],
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link
.menu-icon [class*="ki-"] {
    color: var(--hd-primary) !important;
}

/*
 * Active left line: replace all fixed orange declarations.
 */
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .hd-sidebar-active-indicator,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active::before,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here::before,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link::before {
    background: var(--hd-primary) !important;
    background-color: var(--hd-primary) !important;
    border-color: var(--hd-primary) !important;
}

/*
 * Some sidebar versions use a left border rather than a pseudo-element.
 */
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link {
    border-left-color: var(--hd-primary) !important;
}

/*
 * Collapsed sidebar active icon and indicator.
 */
html[data-hd-theme-engine="1"] body.hd-shell.hd-primary-aside-collapsed
#aside_default_content .menu-link.active .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell.hd-primary-aside-collapsed
#aside_default_content .menu-link.active .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell.hd-primary-aside-collapsed
#aside_default_content .menu-link.here .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell.hd-primary-aside-collapsed
#aside_default_content .menu-link.here .menu-icon i {
    color: var(--hd-primary) !important;
}

/* HD DARK MODE POLISH END */

/* HD DARK PALETTE SURFACES START */

/* =========================================================
   Dark theme surface hierarchy

   navigation = darkest themed surface
   body       = medium themed surface
   cards      = raised themed surface
========================================================= */

html[data-hd-resolved-appearance="dark"] {
    /* Orange fallback */
    --hd-dark-nav: #24140f;
    --hd-dark-body: #211a17;
    --hd-dark-card: #2a211d;
    --hd-dark-card-hover: #302620;
    --hd-dark-footer: #211a17;
    --hd-dark-border: #463229;

    --hd-dark-active-bg:
        rgba(var(--hd-primary-rgb), 0.18);

    --hd-dark-active-border:
        rgba(var(--hd-primary-rgb), 0.42);
}

/* Red */
html[data-hd-resolved-appearance="dark"][data-hd-theme="red"] {
    --hd-dark-nav: #2b050d;
    --hd-dark-body: #21171b;
    --hd-dark-card: #291c21;
    --hd-dark-card-hover: #302127;
    --hd-dark-footer: #21171b;
    --hd-dark-border: #492730;
}

/* Green */
html[data-hd-resolved-appearance="dark"][data-hd-theme="green"] {
    --hd-dark-nav: #102426;
    --hd-dark-body: #17221f;
    --hd-dark-card: #1d2a26;
    --hd-dark-card-hover: #23322d;
    --hd-dark-footer: #17221f;
    --hd-dark-border: #2d4941;
}

/* Blue */
html[data-hd-resolved-appearance="dark"][data-hd-theme="blue"] {
    --hd-dark-nav: #171b30;
    --hd-dark-body: #1b1e31;
    --hd-dark-card: #22263b;
    --hd-dark-card-hover: #282d45;
    --hd-dark-footer: #1b1e31;
    --hd-dark-border: #353c60;
}

/* Yellow */
html[data-hd-resolved-appearance="dark"][data-hd-theme="yellow"] {
    --hd-dark-nav: #272310;
    --hd-dark-body: #232116;
    --hd-dark-card: #2b281b;
    --hd-dark-card-hover: #322e1f;
    --hd-dark-footer: #232116;
    --hd-dark-border: #4b4324;
}

/* Orange */
html[data-hd-resolved-appearance="dark"][data-hd-theme="orange"] {
    --hd-dark-nav: #261610;
    --hd-dark-body: #221b17;
    --hd-dark-card: #2b221d;
    --hd-dark-card-hover: #322720;
    --hd-dark-footer: #221b17;
    --hd-dark-border: #4a3428;
}

/* =========================================================
   Body and main application background
========================================================= */

html[data-hd-resolved-appearance="dark"],
html[data-hd-resolved-appearance="dark"] body,
html[data-hd-resolved-appearance="dark"] body.hd-shell,
html[data-hd-resolved-appearance="dark"] #kt_app_root,
html[data-hd-resolved-appearance="dark"] #kt_app_page,
html[data-hd-resolved-appearance="dark"] #kt_wrapper,
html[data-hd-resolved-appearance="dark"] #kt_app_wrapper,
html[data-hd-resolved-appearance="dark"] #kt_main,
html[data-hd-resolved-appearance="dark"] #kt_content,
html[data-hd-resolved-appearance="dark"] #kt_app_content,
html[data-hd-resolved-appearance="dark"] .app-main,
html[data-hd-resolved-appearance="dark"] .app-content {
    background:
        var(--hd-dark-body) !important;

    background-color:
        var(--hd-dark-body) !important;
}

/* Dashboard toolbar / Action Center heading row */
html[data-hd-resolved-appearance="dark"] #kt_toolbar,
html[data-hd-resolved-appearance="dark"] #kt_app_toolbar,
html[data-hd-resolved-appearance="dark"] .app-toolbar,
html[data-hd-resolved-appearance="dark"] .toolbar {
    background:
        var(--hd-dark-body) !important;

    background-color:
        var(--hd-dark-body) !important;

    border-color:
        var(--hd-dark-border) !important;
}

/* =========================================================
   Dashboard cards and panels
========================================================= */

html[data-hd-resolved-appearance="dark"] .card,
html[data-hd-resolved-appearance="dark"] .dashboard-card,
html[data-hd-resolved-appearance="dark"] .action-center-card,
html[data-hd-resolved-appearance="dark"] .action-center-panel,
html[data-hd-resolved-appearance="dark"] .metric-card,
html[data-hd-resolved-appearance="dark"] .stat-card,
html[data-hd-resolved-appearance="dark"] .queue-card,
html[data-hd-resolved-appearance="dark"] .sla-risk-card,
html[data-hd-resolved-appearance="dark"] .modal-content,
html[data-hd-resolved-appearance="dark"] .dropdown-menu,
html[data-hd-resolved-appearance="dark"] .drawer,
html[data-hd-resolved-appearance="dark"] .offcanvas,
html[data-hd-resolved-appearance="dark"] .preferences-panel {
    background:
        var(--hd-dark-card) !important;

    background-color:
        var(--hd-dark-card) !important;

    border-color:
        var(--hd-dark-border) !important;
}

/*
 * Your Action Center cards may be plain direct children rather than
 * Bootstrap .card elements. These selectors cover those containers.
 */
html[data-hd-resolved-appearance="dark"]
#kt_app_content .row > [class*="col-"] > .h-100,

html[data-hd-resolved-appearance="dark"]
#kt_app_content .row > [class*="col-"] > .rounded,

html[data-hd-resolved-appearance="dark"]
#kt_app_content .row > [class*="col-"] > .shadow-sm {
    background:
        var(--hd-dark-card) !important;

    background-color:
        var(--hd-dark-card) !important;

    border-color:
        var(--hd-dark-border) !important;
}

/* Card headers and footers */
html[data-hd-resolved-appearance="dark"] .card-header,
html[data-hd-resolved-appearance="dark"] .card-footer,
html[data-hd-resolved-appearance="dark"] .modal-header,
html[data-hd-resolved-appearance="dark"] .modal-footer,
html[data-hd-resolved-appearance="dark"] .offcanvas-header {
    background:
        var(--hd-dark-card) !important;

    background-color:
        var(--hd-dark-card) !important;

    border-color:
        var(--hd-dark-border) !important;
}

/* =========================================================
   Header and primary sidebar
========================================================= */

html[data-hd-resolved-appearance="dark"] body.hd-shell #kt_header,
html[data-hd-resolved-appearance="dark"] body.hd-shell #kt_app_header,
html[data-hd-resolved-appearance="dark"] body.hd-shell .app-header,
html[data-hd-resolved-appearance="dark"] body.hd-shell .header,
html[data-hd-resolved-appearance="dark"] body.hd-shell .app-navbar,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_header_container,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_app_header_container,

html[data-hd-resolved-appearance="dark"] body.hd-shell #kt_aside,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_primary_aside,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_app_sidebar,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_aside > *,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_aside .aside-logo,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_aside_logo,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_aside_menu_wrapper,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#kt_aside_menu,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content > .menu {
    background:
        var(--hd-dark-nav) !important;

    background-color:
        var(--hd-dark-nav) !important;

    border-color:
        var(--hd-dark-border) !important;
}

/* =========================================================
   Main footer and sidebar footer
========================================================= */

html[data-hd-resolved-appearance="dark"] #kt_footer,
html[data-hd-resolved-appearance="dark"] #kt_app_footer,
html[data-hd-resolved-appearance="dark"] .app-footer,
html[data-hd-resolved-appearance="dark"] footer.footer {
    background:
        var(--hd-dark-footer) !important;

    background-color:
        var(--hd-dark-footer) !important;

    border-color:
        var(--hd-dark-border) !important;
}

html[data-hd-resolved-appearance="dark"] body.hd-shell
#hd_primary_aside_toggle {
    background:
        var(--hd-dark-nav) !important;

    background-color:
        var(--hd-dark-nav) !important;

    border-top-color:
        var(--hd-dark-border) !important;
}

/* =========================================================
   Active sidebar row
========================================================= */

html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item > .menu-link.active,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item > .menu-link.here,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link {
    background:
        linear-gradient(
            90deg,
            rgba(var(--hd-primary-rgb), 0.20),
            rgba(var(--hd-primary-rgb), 0.07)
        ) !important;

    background-color:
        var(--hd-dark-card-hover) !important;

    border-color:
        var(--hd-dark-active-border) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(var(--hd-primary-rgb), 0.10) !important;
}

/* Active title remains white */
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-link.active .menu-title,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-link.here .menu-title,
html[data-hd-resolved-appearance="dark"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-title {
    color: #ffffff !important;
}

/* Active icon must follow the selected primary theme */
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active .menu-icon svg,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here .menu-icon svg,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon i,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link .menu-icon svg {
    color:
        var(--hd-primary) !important;
}

/* Active left indicator and border */
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .hd-sidebar-active-indicator,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active::before,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here::before,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link::before {
    background:
        var(--hd-primary) !important;

    background-color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.active,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-link.here,
html[data-hd-theme-engine="1"] body.hd-shell
#aside_default_content .menu-item.here > .menu-link {
    border-left-color:
        var(--hd-primary) !important;
}

/* HD DARK PALETTE SURFACES END */

/* =========================================================
   HD final dark palette variable bridge
========================================================= */

html[data-hd-resolved-appearance="dark"] {
    /*
     * Feed the selected surfaces into Bootstrap/Metronic variables.
     * The actual elements use these variables internally.
     */
    --bs-body-bg: var(--hd-themed-body) !important;
    --bs-app-bg-color: var(--hd-themed-body) !important;
    --bs-app-blank-bg-color: var(--hd-themed-body) !important;

    --bs-card-bg: var(--hd-themed-card) !important;
    --bs-card-cap-bg: var(--hd-themed-card-raised) !important;

    --bs-app-toolbar-base-bg-color:
        var(--hd-themed-body) !important;

    --bs-app-footer-bg-color:
        var(--hd-themed-footer) !important;

    --aside-bg:
        var(--hd-themed-nav) !important;

    --hd-sidebar-v2-active-bg:
        var(--hd-themed-card-raised) !important;

    --hd-sidebar-v2-accent:
        var(--hd-primary) !important;
}

/* Real page canvas */
html[data-hd-resolved-appearance="dark"]
body.hd-shell,
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_content,
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_content_container,
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_wrapper,
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_app_wrapper {
    background-color:
        var(--hd-themed-body) !important;
}

/* Real Bootstrap cards */
html[data-hd-resolved-appearance="dark"]
body.hd-shell .card {
    --bs-card-bg:
        var(--hd-themed-card) !important;

    background-color:
        var(--hd-themed-card) !important;

    border-color:
        var(--hd-themed-border) !important;
}

/* Actual footer found in the console */
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_footer.aside-footer,
html[data-hd-resolved-appearance="dark"]
body.hd-shell #kt_footer.bg-body {
    background:
        var(--hd-themed-footer) !important;

    background-color:
        var(--hd-themed-footer) !important;

    border-color:
        var(--hd-themed-border) !important;
}

/* Active sidebar row */
html[data-hd-resolved-appearance="dark"]
body.hd-shell
#aside_default_content
.menu-link.active {
    background:
        linear-gradient(
            90deg,
            rgba(var(--hd-primary-rgb), 0.22),
            rgba(var(--hd-primary-rgb), 0.07)
        ) !important;

    background-color:
        var(--hd-themed-card-raised) !important;

    border-left-color:
        var(--hd-primary) !important;
}

/*
 * Active menu icon:
 * override the fixed #F4812A inherited from aside.css.
 */
html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::before,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::after {
    color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

/* Active left indicator */
html body.hd-shell
#aside_default_content
.menu-link.active
.hd-sidebar-active-indicator,

html body.hd-shell
#aside_default_content
.menu-link.active::before {
    background:
        var(--hd-primary) !important;

    background-color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

/* HD THEMED COMPONENT SURFACES START */

/* =========================================================
   Shared derived theme values
========================================================= */

html[data-hd-resolved-appearance="dark"] {
    --hd-themed-light:
        rgba(var(--hd-primary-rgb), 0.09);

    --hd-themed-light-hover:
        rgba(var(--hd-primary-rgb), 0.15);

    --hd-themed-light-active:
        rgba(var(--hd-primary-rgb), 0.20);

    --hd-themed-separator:
        rgba(var(--hd-primary-rgb), 0.16);

    --hd-themed-scrollbar:
        rgba(var(--hd-primary-rgb), 0.58);

    --hd-themed-scrollbar-hover:
        var(--hd-primary);

    /*
     * Bootstrap utility-variable bridge.
     */
    --bs-light:
        var(--hd-themed-light);

    --bs-light-rgb:
        var(--hd-primary-rgb);

    --bs-secondary-bg:
        var(--hd-themed-card);

    --bs-tertiary-bg:
        var(--hd-themed-card-raised);

    --bs-border-color:
        var(--hd-themed-border);

    --bs-border-color-translucent:
        var(--hd-themed-separator);

    --bs-card-cap-bg:
        var(--hd-themed-card-raised);

    --bs-card-border-color:
        var(--hd-themed-border);

    --bs-list-group-bg:
        var(--hd-themed-card);

    --bs-list-group-border-color:
        var(--hd-themed-border);

    --bs-dropdown-bg:
        var(--hd-themed-card);

    --bs-dropdown-border-color:
        var(--hd-themed-border);

    --bs-modal-bg:
        var(--hd-themed-card);

    --bs-offcanvas-bg:
        var(--hd-themed-card);
}

/* =========================================================
   Card, panel and section headers
========================================================= */

html[data-hd-resolved-appearance="dark"]
.card > .card-header,

html[data-hd-resolved-appearance="dark"]
.card-header,

html[data-hd-resolved-appearance="dark"]
.modal-header,

html[data-hd-resolved-appearance="dark"]
.offcanvas-header,

html[data-hd-resolved-appearance="dark"]
.drawer-header,

html[data-hd-resolved-appearance="dark"]
.setup-card-header,

html[data-hd-resolved-appearance="dark"]
.panel-header,

html[data-hd-resolved-appearance="dark"]
.section-header,

html[data-hd-resolved-appearance="dark"]
[class*="card-header"],

html[data-hd-resolved-appearance="dark"]
[class*="panel-header"] {
    background:
        var(--hd-themed-card-raised) !important;

    background-color:
        var(--hd-themed-card-raised) !important;

    border-color:
        var(--hd-themed-border) !important;
}

/*
 * Setup page column headings such as:
 * Organization, User Management, Channels, Self Service.
 */
html[data-hd-resolved-appearance="dark"]
#kt_content .card-header,

html[data-hd-resolved-appearance="dark"]
#kt_content .border-bottom,

html[data-hd-resolved-appearance="dark"]
#kt_content [class*="border-bottom"] {
    border-bottom-color:
        var(--hd-themed-border) !important;
}

/*
 * Preserve readable header text.
 */
html[data-hd-resolved-appearance="dark"]
.card-header .card-title,

html[data-hd-resolved-appearance="dark"]
.card-header h1,

html[data-hd-resolved-appearance="dark"]
.card-header h2,

html[data-hd-resolved-appearance="dark"]
.card-header h3,

html[data-hd-resolved-appearance="dark"]
.card-header h4,

html[data-hd-resolved-appearance="dark"]
.panel-header,

html[data-hd-resolved-appearance="dark"]
.section-header {
    color:
        var(--bs-body-color) !important;
}

/* =========================================================
   Bootstrap bg-light and related utilities
========================================================= */

html[data-hd-resolved-appearance="dark"]
.bg-light,

html[data-hd-resolved-appearance="dark"]
.bg-body-secondary,

html[data-hd-resolved-appearance="dark"]
.bg-body-tertiary,

html[data-hd-resolved-appearance="dark"]
.bg-gray-100,

html[data-hd-resolved-appearance="dark"]
.bg-gray-200 {
    background:
        var(--hd-themed-light) !important;

    background-color:
        var(--hd-themed-light) !important;

    border-color:
        var(--hd-themed-separator) !important;
}

/*
 * Rows or clickable elements using bg-light.
 */
html[data-hd-resolved-appearance="dark"]
a.bg-light:hover,

html[data-hd-resolved-appearance="dark"]
button.bg-light:hover,

html[data-hd-resolved-appearance="dark"]
tr.bg-light:hover,

html[data-hd-resolved-appearance="dark"]
.bg-light-hover:hover,

html[data-hd-resolved-appearance="dark"]
.hover-bg-light:hover {
    background:
        var(--hd-themed-light-hover) !important;

    background-color:
        var(--hd-themed-light-hover) !important;
}

/*
 * Selected or active light rows.
 */
html[data-hd-resolved-appearance="dark"]
.bg-light.active,

html[data-hd-resolved-appearance="dark"]
.bg-light.selected,

html[data-hd-resolved-appearance="dark"]
tr.bg-light.table-active,

html[data-hd-resolved-appearance="dark"]
.table-active {
    background:
        var(--hd-themed-light-active) !important;

    background-color:
        var(--hd-themed-light-active) !important;

    border-color:
        rgba(var(--hd-primary-rgb), 0.32) !important;
}

/*
 * Bootstrap table variables.
 */
html[data-hd-resolved-appearance="dark"]
.table {
    --bs-table-bg:
        var(--hd-themed-card);

    --bs-table-striped-bg:
        var(--hd-themed-light);

    --bs-table-hover-bg:
        var(--hd-themed-light-hover);

    --bs-table-active-bg:
        var(--hd-themed-light-active);

    --bs-table-border-color:
        var(--hd-themed-border);
}

/* =========================================================
   List groups, dropdowns and setup cards
========================================================= */

html[data-hd-resolved-appearance="dark"]
.list-group-item,

html[data-hd-resolved-appearance="dark"]
.dropdown-menu,

html[data-hd-resolved-appearance="dark"]
.dropdown-item,

html[data-hd-resolved-appearance="dark"]
.accordion-item,

html[data-hd-resolved-appearance="dark"]
.accordion-body,

html[data-hd-resolved-appearance="dark"]
.modal-content,

html[data-hd-resolved-appearance="dark"]
.offcanvas,

html[data-hd-resolved-appearance="dark"]
.drawer {
    background-color:
        var(--hd-themed-card) !important;

    border-color:
        var(--hd-themed-border) !important;
}

html[data-hd-resolved-appearance="dark"]
.dropdown-item:hover,

html[data-hd-resolved-appearance="dark"]
.dropdown-item:focus,

html[data-hd-resolved-appearance="dark"]
.list-group-item-action:hover,

html[data-hd-resolved-appearance="dark"]
.list-group-item-action:focus {
    background-color:
        var(--hd-themed-light-hover) !important;
}

html[data-hd-resolved-appearance="dark"]
.dropdown-item.active,

html[data-hd-resolved-appearance="dark"]
.dropdown-item:active,

html[data-hd-resolved-appearance="dark"]
.list-group-item.active {
    background-color:
        var(--hd-themed-light-active) !important;

    border-color:
        rgba(var(--hd-primary-rgb), 0.35) !important;

    color:
        var(--bs-body-color) !important;
}

/* =========================================================
   Dividers and borders
========================================================= */

html[data-hd-resolved-appearance="dark"]
.border,

html[data-hd-resolved-appearance="dark"]
.border-top,

html[data-hd-resolved-appearance="dark"]
.border-bottom,

html[data-hd-resolved-appearance="dark"]
.border-start,

html[data-hd-resolved-appearance="dark"]
.border-end,

html[data-hd-resolved-appearance="dark"]
.separator,

html[data-hd-resolved-appearance="dark"]
.separator-content {
    border-color:
        var(--hd-themed-border) !important;
}

html[data-hd-resolved-appearance="dark"]
hr {
    border-color:
        var(--hd-themed-border) !important;

    opacity:
        1;
}

/* =========================================================
   Native browser scrollbars
========================================================= */

/*
 * Firefox.
 */
html[data-hd-resolved-appearance="dark"],
html[data-hd-resolved-appearance="dark"] body,
html[data-hd-resolved-appearance="dark"] * {
    scrollbar-color:
        var(--hd-themed-scrollbar)
        var(--hd-themed-body);

    scrollbar-width:
        thin;
}

/*
 * Chromium, Edge and Safari.
 */
html[data-hd-resolved-appearance="dark"] ::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}

html[data-hd-resolved-appearance="dark"] ::-webkit-scrollbar-track {
    background:
        var(--hd-themed-body);

    border-radius:
        999px;
}

html[data-hd-resolved-appearance="dark"] ::-webkit-scrollbar-thumb {
    background:
        var(--hd-themed-scrollbar);

    border:
        2px solid
        var(--hd-themed-body);

    border-radius:
        999px;

    min-height:
        36px;
}

html[data-hd-resolved-appearance="dark"] ::-webkit-scrollbar-thumb:hover {
    background:
        var(--hd-themed-scrollbar-hover);
}

html[data-hd-resolved-appearance="dark"] ::-webkit-scrollbar-corner {
    background:
        var(--hd-themed-body);
}

/* =========================================================
   Metronic custom scroll wrappers
========================================================= */

html[data-hd-resolved-appearance="dark"]
[data-kt-scroll="true"],

html[data-hd-resolved-appearance="dark"]
.scroll,

html[data-hd-resolved-appearance="dark"]
.scroll-y,

html[data-hd-resolved-appearance="dark"]
.scroll-x,

html[data-hd-resolved-appearance="dark"]
.overflow-auto,

html[data-hd-resolved-appearance="dark"]
.overflow-y-auto {
    scrollbar-color:
        var(--hd-themed-scrollbar)
        transparent;
}

/* =========================================================
   Sidebar active icon and indicator — selected primary
========================================================= */

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::before,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::after,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span::before,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span::after {
    color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon svg,

html body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon svg * {
    color:
        var(--hd-primary) !important;

    stroke:
        var(--hd-primary) !important;
}

html body.hd-shell
#aside_default_content
.menu-link.active
.hd-sidebar-active-indicator {
    background:
        var(--hd-primary) !important;

    background-color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

/* HD THEMED COMPONENT SURFACES END */

/* HD LIGHT MODE AUTHORITATIVE START */

/* =========================================================
   Light Mode surface hierarchy

   Header/sidebar:
   dark selected-palette navigation surface

   Body:
   soft neutral gray

   Cards/drawers/footer:
   white
========================================================= */

html[data-hd-resolved-appearance="light"] {
    --hd-light-body: #f5f6fa;
    --hd-light-card: #ffffff;
    --hd-light-card-raised: #fbfbfd;
    --hd-light-footer: #ffffff;

    --hd-light-text: #181c32;
    --hd-light-text-secondary: #7e8299;
    --hd-light-muted: #a1a5b7;

    --hd-light-border: #e4e6ef;
    --hd-light-separator: #eff1f5;

    --hd-light-primary-soft:
        rgba(var(--hd-primary-rgb), 0.08);

    --hd-light-primary-hover:
        rgba(var(--hd-primary-rgb), 0.13);

    --hd-light-primary-active:
        rgba(var(--hd-primary-rgb), 0.18);

    /*
     * Bootstrap and Metronic variable bridge.
     */
    --bs-body-bg:
        var(--hd-light-body) !important;

    --bs-body-bg-rgb:
        245, 246, 250 !important;

    --bs-body-color:
        var(--hd-light-text) !important;

    --bs-body-color-rgb:
        24, 28, 50 !important;

    --bs-secondary-color:
        var(--hd-light-text-secondary) !important;

    --bs-secondary-bg:
        var(--hd-light-card-raised) !important;

    --bs-tertiary-bg:
        var(--hd-light-primary-soft) !important;

    --bs-card-bg:
        var(--hd-light-card) !important;

    --bs-card-cap-bg:
        var(--hd-light-card-raised) !important;

    --bs-card-border-color:
        var(--hd-light-border) !important;

    --bs-border-color:
        var(--hd-light-border) !important;

    --bs-border-color-translucent:
        var(--hd-light-separator) !important;

    --bs-dropdown-bg:
        var(--hd-light-card) !important;

    --bs-dropdown-border-color:
        var(--hd-light-border) !important;

    --bs-modal-bg:
        var(--hd-light-card) !important;

    --bs-offcanvas-bg:
        var(--hd-light-card) !important;

    --bs-list-group-bg:
        var(--hd-light-card) !important;

    --bs-list-group-border-color:
        var(--hd-light-border) !important;

    --bs-app-bg-color:
        var(--hd-light-body) !important;

    --bs-app-content-bg-color:
        var(--hd-light-body) !important;

    --bs-app-toolbar-base-bg-color:
        var(--hd-light-card) !important;

    --bs-app-footer-bg-color:
        var(--hd-light-footer) !important;
}

/* =========================================================
   Palette-specific dark navigation surfaces in Light Mode
========================================================= */

/* Red */
html[data-hd-resolved-appearance="light"][data-hd-theme="red"] {
    --hd-light-navigation: #2b050d;
    --hd-light-navigation-raised: #351018;
    --hd-light-navigation-border: #4a2028;
}

/* Green */
html[data-hd-resolved-appearance="light"][data-hd-theme="green"] {
    --hd-light-navigation: #102426;
    --hd-light-navigation-raised: #183034;
    --hd-light-navigation-border: #294247;
}

/* Blue */
html[data-hd-resolved-appearance="light"][data-hd-theme="blue"] {
    --hd-light-navigation: #171b30;
    --hd-light-navigation-raised: #202640;
    --hd-light-navigation-border: #343b5c;
}

/* Yellow */
html[data-hd-resolved-appearance="light"][data-hd-theme="yellow"] {
    --hd-light-navigation: #272310;
    --hd-light-navigation-raised: #332e16;
    --hd-light-navigation-border: #4b4324;
}

/* Orange */
html[data-hd-resolved-appearance="light"][data-hd-theme="orange"] {
    --hd-light-navigation: #261610;
    --hd-light-navigation-raised: #321f18;
    --hd-light-navigation-border: #4a3428;
}

/* Fallback */
html[data-hd-resolved-appearance="light"] {
    --hd-light-navigation: #261610;
    --hd-light-navigation-raised: #321f18;
    --hd-light-navigation-border: #4a3428;
}

/* =========================================================
   Main application canvas
========================================================= */

html[data-hd-resolved-appearance="light"],
html[data-hd-resolved-appearance="light"] body,
html[data-hd-resolved-appearance="light"] body.hd-shell,
html[data-hd-resolved-appearance="light"] #kt_app_root,
html[data-hd-resolved-appearance="light"] #kt_app_page,
html[data-hd-resolved-appearance="light"] #kt_wrapper,
html[data-hd-resolved-appearance="light"] #kt_app_wrapper,
html[data-hd-resolved-appearance="light"] #kt_main,
html[data-hd-resolved-appearance="light"] #kt_content,
html[data-hd-resolved-appearance="light"] #kt_content_container,
html[data-hd-resolved-appearance="light"] #kt_app_content,
html[data-hd-resolved-appearance="light"] .app-main,
html[data-hd-resolved-appearance="light"] .app-content,
html[data-hd-resolved-appearance="light"] .content {
    background:
        var(--hd-light-body) !important;

    background-color:
        var(--hd-light-body) !important;

    color:
        var(--hd-light-text) !important;
}

/* =========================================================
   Header and primary sidebar remain dark
========================================================= */

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_header,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_app_header,

html[data-hd-resolved-appearance="light"]
body.hd-shell .app-header,

html[data-hd-resolved-appearance="light"]
body.hd-shell .header,

html[data-hd-resolved-appearance="light"]
body.hd-shell .app-navbar,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_header_container,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_app_header_container,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_aside,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_primary_aside,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_app_sidebar,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_aside > *,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_aside_logo,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_aside_menu,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_aside_menu_wrapper,

html[data-hd-resolved-appearance="light"]
body.hd-shell #aside_default_content,

html[data-hd-resolved-appearance="light"]
body.hd-shell #aside_default_content > .menu {
    background:
        var(--hd-light-navigation) !important;

    background-color:
        var(--hd-light-navigation) !important;

    border-color:
        var(--hd-light-navigation-border) !important;
}

/*
 * Keep normal navigation labels and icons readable.
 */
html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_header,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_header i,

html[data-hd-resolved-appearance="light"]
body.hd-shell #kt_header .btn,

html[data-hd-resolved-appearance="light"]
body.hd-shell #aside_default_content .menu-title,

html[data-hd-resolved-appearance="light"]
body.hd-shell #aside_default_content .menu-icon,

html[data-hd-resolved-appearance="light"]
body.hd-shell #aside_default_content .menu-icon i {
    color:
        #ffffff !important;
}

/* =========================================================
   Toolbar / page title row
========================================================= */

html[data-hd-resolved-appearance="light"] #kt_toolbar,
html[data-hd-resolved-appearance="light"] #kt_app_toolbar,
html[data-hd-resolved-appearance="light"] .app-toolbar,
html[data-hd-resolved-appearance="light"] .toolbar {
    background:
        var(--hd-light-card) !important;

    background-color:
        var(--hd-light-card) !important;

    border-color:
        var(--hd-light-border) !important;

    color:
        var(--hd-light-text) !important;
}

/* =========================================================
   Cards, panels, drawers and modal surfaces
========================================================= */

html[data-hd-resolved-appearance="light"] .card,
html[data-hd-resolved-appearance="light"] .dashboard-card,
html[data-hd-resolved-appearance="light"] .action-center-card,
html[data-hd-resolved-appearance="light"] .action-center-panel,
html[data-hd-resolved-appearance="light"] .metric-card,
html[data-hd-resolved-appearance="light"] .stat-card,
html[data-hd-resolved-appearance="light"] .queue-card,
html[data-hd-resolved-appearance="light"] .sla-risk-card,
html[data-hd-resolved-appearance="light"] .modal-content,
html[data-hd-resolved-appearance="light"] .dropdown-menu,
html[data-hd-resolved-appearance="light"] .offcanvas,
html[data-hd-resolved-appearance="light"] .drawer,
html[data-hd-resolved-appearance="light"] .preferences-panel,
html[data-hd-resolved-appearance="light"] .list-group-item,
html[data-hd-resolved-appearance="light"] .accordion-item,
html[data-hd-resolved-appearance="light"] .accordion-body {
    background:
        var(--hd-light-card) !important;

    background-color:
        var(--hd-light-card) !important;

    border-color:
        var(--hd-light-border) !important;

    color:
        var(--hd-light-text) !important;
}

/*
 * Force Bootstrap utility surfaces used by dashboard cards.
 */
html[data-hd-resolved-appearance="light"]
#kt_content .bg-body,

html[data-hd-resolved-appearance="light"]
#kt_content .bg-white,

html[data-hd-resolved-appearance="light"]
#kt_content .bg-body-secondary {
    background:
        var(--hd-light-card) !important;

    background-color:
        var(--hd-light-card) !important;
}

/* =========================================================
   Card and section headers
========================================================= */

html[data-hd-resolved-appearance="light"] .card-header,
html[data-hd-resolved-appearance="light"] .modal-header,
html[data-hd-resolved-appearance="light"] .offcanvas-header,
html[data-hd-resolved-appearance="light"] .drawer-header,
html[data-hd-resolved-appearance="light"] .panel-header,
html[data-hd-resolved-appearance="light"] .section-header,
html[data-hd-resolved-appearance="light"] [class*="card-header"],
html[data-hd-resolved-appearance="light"] [class*="panel-header"] {
    background:
        linear-gradient(
            90deg,
            var(--hd-light-primary-soft),
            var(--hd-light-card-raised)
        ) !important;

    background-color:
        var(--hd-light-card-raised) !important;

    border-color:
        var(--hd-light-border) !important;

    color:
        var(--hd-light-text) !important;
}

/* =========================================================
   Light Mode text
========================================================= */

html[data-hd-resolved-appearance="light"] h1,
html[data-hd-resolved-appearance="light"] h2,
html[data-hd-resolved-appearance="light"] h3,
html[data-hd-resolved-appearance="light"] h4,
html[data-hd-resolved-appearance="light"] h5,
html[data-hd-resolved-appearance="light"] h6,
html[data-hd-resolved-appearance="light"] .card-title,
html[data-hd-resolved-appearance="light"] .fw-bold,
html[data-hd-resolved-appearance="light"] .fw-bolder,
html[data-hd-resolved-appearance="light"] .text-gray-900 {
    color:
        var(--hd-light-text) !important;
}

html[data-hd-resolved-appearance="light"] .text-muted,
html[data-hd-resolved-appearance="light"] .text-gray-500,
html[data-hd-resolved-appearance="light"] .text-gray-600,
html[data-hd-resolved-appearance="light"] .text-gray-700 {
    color:
        var(--hd-light-text-secondary) !important;
}

/* =========================================================
   bg-light and theme-tinted utilities
========================================================= */

html[data-hd-resolved-appearance="light"] .bg-light,
html[data-hd-resolved-appearance="light"] .bg-body-tertiary,
html[data-hd-resolved-appearance="light"] .bg-gray-100,
html[data-hd-resolved-appearance="light"] .bg-gray-200 {
    background:
        var(--hd-light-primary-soft) !important;

    background-color:
        var(--hd-light-primary-soft) !important;

    border-color:
        rgba(var(--hd-primary-rgb), 0.16) !important;
}

html[data-hd-resolved-appearance="light"] a.bg-light:hover,
html[data-hd-resolved-appearance="light"] button.bg-light:hover,
html[data-hd-resolved-appearance="light"] tr.bg-light:hover,
html[data-hd-resolved-appearance="light"] .bg-light-hover:hover,
html[data-hd-resolved-appearance="light"] .hover-bg-light:hover {
    background:
        var(--hd-light-primary-hover) !important;

    background-color:
        var(--hd-light-primary-hover) !important;
}

html[data-hd-resolved-appearance="light"] .bg-light.active,
html[data-hd-resolved-appearance="light"] .bg-light.selected,
html[data-hd-resolved-appearance="light"] .table-active {
    background:
        var(--hd-light-primary-active) !important;

    background-color:
        var(--hd-light-primary-active) !important;
}

/* =========================================================
   Tables
========================================================= */

html[data-hd-resolved-appearance="light"] .table {
    --bs-table-bg:
        var(--hd-light-card);

    --bs-table-color:
        var(--hd-light-text);

    --bs-table-striped-bg:
        var(--hd-light-primary-soft);

    --bs-table-hover-bg:
        var(--hd-light-primary-hover);

    --bs-table-active-bg:
        var(--hd-light-primary-active);

    --bs-table-border-color:
        var(--hd-light-border);
}

/* =========================================================
   Footer must be white
========================================================= */

html[data-hd-resolved-appearance="light"] #kt_footer,
html[data-hd-resolved-appearance="light"] #kt_app_footer,
html[data-hd-resolved-appearance="light"] .app-footer,
html[data-hd-resolved-appearance="light"] footer.footer,
html[data-hd-resolved-appearance="light"] #kt_footer.aside-footer,
html[data-hd-resolved-appearance="light"] #kt_footer.bg-body {
    background:
        var(--hd-light-footer) !important;

    background-color:
        var(--hd-light-footer) !important;

    border-color:
        var(--hd-light-border) !important;

    color:
        var(--hd-light-text-secondary) !important;
}

/*
 * Sidebar collapse footer remains part of dark navigation.
 */
html[data-hd-resolved-appearance="light"]
body.hd-shell #hd_primary_aside_toggle {
    background:
        var(--hd-light-navigation) !important;

    background-color:
        var(--hd-light-navigation) !important;

    border-top-color:
        var(--hd-light-navigation-border) !important;

    color:
        #ffffff !important;
}

/* =========================================================
   Active sidebar item
========================================================= */

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active {
    background:
        linear-gradient(
            90deg,
            rgba(var(--hd-primary-rgb), 0.24),
            rgba(var(--hd-primary-rgb), 0.08)
        ) !important;

    background-color:
        var(--hd-light-navigation-raised) !important;

    border-color:
        rgba(var(--hd-primary-rgb), 0.42) !important;

    border-left-color:
        var(--hd-primary) !important;
}

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-title {
    color:
        #ffffff !important;
}

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::before,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon i::after,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span::before,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.menu-icon span::after {
    color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active
.hd-sidebar-active-indicator,

html[data-hd-resolved-appearance="light"]
body.hd-shell
#aside_default_content
.menu-link.active::before {
    background:
        var(--hd-primary) !important;

    background-color:
        var(--hd-primary) !important;

    border-color:
        var(--hd-primary) !important;
}

/* =========================================================
   Form controls
========================================================= */

html[data-hd-resolved-appearance="light"] .form-control,
html[data-hd-resolved-appearance="light"] .form-select,
html[data-hd-resolved-appearance="light"] .input-group-text {
    background-color:
        var(--hd-light-card) !important;

    color:
        var(--hd-light-text) !important;

    border-color:
        var(--hd-light-border) !important;
}

html[data-hd-resolved-appearance="light"] .form-control:focus,
html[data-hd-resolved-appearance="light"] .form-select:focus {
    border-color:
        var(--hd-primary) !important;

    box-shadow:
        0 0 0 0.2rem
        rgba(var(--hd-primary-rgb), 0.12) !important;
}

/* =========================================================
   Light Mode scrollbars
========================================================= */

html[data-hd-resolved-appearance="light"],
html[data-hd-resolved-appearance="light"] body,
html[data-hd-resolved-appearance="light"] * {
    scrollbar-color:
        rgba(var(--hd-primary-rgb), 0.52)
        var(--hd-light-body);

    scrollbar-width:
        thin;
}

html[data-hd-resolved-appearance="light"] ::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}

html[data-hd-resolved-appearance="light"] ::-webkit-scrollbar-track {
    background:
        var(--hd-light-body);
}

html[data-hd-resolved-appearance="light"] ::-webkit-scrollbar-thumb {
    background:
        rgba(var(--hd-primary-rgb), 0.52);

    border:
        2px solid
        var(--hd-light-body);

    border-radius:
        999px;
}

html[data-hd-resolved-appearance="light"] ::-webkit-scrollbar-thumb:hover {
    background:
        var(--hd-primary);
}

html[data-hd-resolved-appearance="light"] ::-webkit-scrollbar-corner {
    background:
        var(--hd-light-body);
}

/* HD LIGHT MODE AUTHORITATIVE END */