/* ==========================================================================
   K-GROUP PREMIUM CSS
   --------------------------------------------------------------------------
   Architecture (ITCSS-inspired, low → high specificity):

     1. SETTINGS    — CSS custom properties (palette, shadows, radius)
     2. GENERIC     — base typography, body, selection, links
     3. LAYOUT      — sidebar, topbar, page-wrapper, footer
     4. COMPONENTS  — cards, buttons, forms, tables, badges, alerts,
                      modals, dropdowns, pagination, nav, toastr, swal2,
                      datepicker, notifications, profile widgets, auth
     5. THEME DARK  — all dark-mode overrides grouped
     6. UTILITIES   — helpers, animations, scrollbar, responsive tweaks

   Palette (Tailwind 700 — deep, anti-blur):
     Primary   #1D4ED8   Secondary #6D28D9   Success #047857
     Danger    #B91C1C   Warning   #B45309   Info    #0E7490
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS — CSS VARIABLES
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Brand palette — override Velzon --dx-* tokens */
    --dx-primary: #1D4ED8;
    --dx-primary-rgb: 29, 78, 216;
    --dx-primary-text-emphasis: #1E40AF;
    --dx-primary-bg-subtle: rgba(29, 78, 216, .1);
    --dx-primary-border-subtle: rgba(29, 78, 216, .25);
    --dx-secondary: #6D28D9;
    --dx-secondary-rgb: 109, 40, 217;
    --dx-success: #047857;
    --dx-success-rgb: 4, 120, 87;
    --dx-danger: #B91C1C;
    --dx-danger-rgb: 185, 28, 28;
    --dx-warning: #B45309;
    --dx-warning-rgb: 180, 83, 9;
    --dx-info: #0E7490;
    --dx-info-rgb: 14, 116, 144;

    /* K-Group tokens — project-scoped namespace */
    --kgp-primary: #1D4ED8;
    --kgp-primary-dark: #1E40AF;
    --kgp-primary-deeper: #1E3A8A;
    --kgp-primary-light: #2563EB;
    --kgp-primary-lighter: #3B82F6;
    --kgp-primary-rgb: 29, 78, 216;

    --kgp-gradient-primary: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    --kgp-gradient-primary-vivid: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%);
    --kgp-gradient-subtle: linear-gradient(135deg, rgba(29,78,216,.05) 0%, rgba(109,40,217,.02) 100%);
    --kgp-gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

    --kgp-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --kgp-shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 6px 12px -2px rgba(15,23,42,.08), 0 12px 24px -6px rgba(15,23,42,.06);
    --kgp-shadow-lg: 0 4px 8px rgba(15,23,42,.04), 0 12px 20px -4px rgba(15,23,42,.08), 0 24px 40px -12px rgba(15,23,42,.1);
    --kgp-shadow-xl: 0 2px 4px rgba(15,23,42,.04), 0 8px 16px rgba(15,23,42,.06), 0 24px 40px -8px rgba(15,23,42,.12), 0 40px 64px -16px rgba(15,23,42,.14);
    --kgp-shadow-primary: 0 2px 6px rgba(29,78,216,.18), 0 8px 20px rgba(29,78,216,.22);
    --kgp-shadow-primary-lg: 0 4px 12px rgba(29,78,216,.22), 0 16px 32px rgba(29,78,216,.28);

    --kgp-radius-sm: 0.5rem;
    --kgp-radius-md: 0.75rem;
    --kgp-radius-lg: 1rem;
    --kgp-radius-xl: 1.25rem;
    --kgp-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --kgp-border-subtle: rgba(29,78,216,.07);

    /* Sidebar/layout tokens */
    --dx-sidebar: 230px;
    --dx-sidebar-font-size: 0.93rem;

    /* Bridge: --bs-* aliases for Blade templates still using Bootstrap's native prefix */
    --bs-primary: var(--dx-primary);
    --bs-primary-rgb: var(--dx-primary-rgb);
    --bs-secondary: var(--dx-secondary);
    --bs-secondary-rgb: var(--dx-secondary-rgb);
    --bs-secondary-color: var(--dx-gray-600);
    --bs-secondary-bg: var(--dx-gray-100);
    --bs-border-color: var(--dx-gray-200);
    --bs-light: var(--dx-gray-100);
}


/* ==========================================================================
   2. GENERIC — BASE
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.025em;
    font-weight: 600;
}

a { transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
a:hover { text-decoration: none; }

::selection { background: rgba(var(--dx-primary-rgb), .2); color: inherit; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* -- Page wrapper & transitions ------------------------------------------- */
.page-wrapper { transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.main-topbar  { transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.main-footer  { transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 1200px) { .container-fluid { padding-left: 2rem; padding-right: 2rem; } }

.page-wrapper > .container-fluid { padding-top: 0 !important; margin-top: -1.5rem !important; }
.page-wrapper > .container-fluid > .page-heading { margin-top: 0 !important; margin-bottom: 0.25rem !important; }
.page-wrapper > .container-fluid > .page-heading h6 { font-size: 0.9rem !important; }
.page-wrapper > .container-fluid > .page-heading .breadcrumb,
.page-wrapper > .container-fluid > .page-heading .breadcrumb-item { font-size: 0.78rem !important; }
.page-wrapper > .container-fluid > .page-heading + .row,
.page-wrapper > .container-fluid > .page-heading + .card { margin-top: 0 !important; }

/* -- Sidebar -------------------------------------------------------------- */
:root[data-sidebar-colors="dark"] { --dx-sidebar-bg: #070F1C; }

#main-sidebar.main-sidebar {
    font-family: "Nunito", sans-serif;
    width: 230px !important;
    background-color: #02060F !important;
    background-image:
        radial-gradient(520px 460px at -15% 5%, rgba(56,189,248,.13), transparent 62%),
        radial-gradient(500px 560px at 115% 45%, rgba(59,130,246,.09), transparent 65%),
        radial-gradient(620px 540px at 50% 110%, rgba(37,99,235,.08), transparent 65%),
        linear-gradient(90deg, rgba(30,58,138,.07) 0%, rgba(30,58,138,.02) 50%, rgba(30,58,138,.07) 100%),
        linear-gradient(180deg, #040A1A 0%, #01040C 100%) !important;
    border-right: 0 !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(59,130,246,.06) inset,
        8px 0 20px -10px rgba(2,6,16,.75),
        20px 0 40px -24px rgba(4,10,28,.75);
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#main-sidebar.main-sidebar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%);
    mix-blend-mode: screen; z-index: 0;
}
#main-sidebar.main-sidebar::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0;
    width: 1px; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(147,197,253,.28) 30%,
        rgba(147,197,253,.28) 70%,
        transparent 100%);
    opacity: .45; z-index: 2;
}
#main-sidebar.main-sidebar > * { position: relative; z-index: 1; }
#main-sidebar .sidebar-wrapper { width: 230px !important; padding-top: 0.5rem !important; }

/* Sidebar: brand row + toggle */
#main-sidebar .sidebar-brand-row { padding: 1rem 14px 1rem !important; }
#main-sidebar .navbar-brand {
    height: auto !important; min-height: auto !important;
    padding: 0 !important; justify-content: flex-start !important;
}
#main-sidebar .sidebar-toggle-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: rgba(255,255,255,.5);
    border-radius: 6px; cursor: pointer;
    transition: var(--kgp-transition);
    padding: 0; margin-right: 13.5px;
}
#main-sidebar .sidebar-toggle-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
#main-sidebar .sidebar-toggle-btn svg { width: 18px; height: 18px; }
.sidebar-toggle-item { display: none !important; }
.sidebar-toggle-open { display: flex; }
#main-sidebar .navbar-brand .logo-lg img { height: 36px !important; margin-left: 8px; }

/* Sidebar: profile dropdown */
#main-sidebar .profile-dropdown > .btn,
#main-sidebar .profile-dropdown > a { padding: 8px 14px !important; min-height: auto !important; }
#main-sidebar .profile-dropdown .profile-avatar-fixed { width: 36px !important; height: 36px !important; }
#main-sidebar .profile-dropdown .profile-identity h6 { font-size: 0.875rem !important; }
#main-sidebar .profile-dropdown .arrow i,
#main-sidebar .profile-dropdown .arrow svg { width: 14px !important; height: 14px !important; }

/* Sidebar: menu titles (Tài khoản / Staff / Leader / Admin) */
#main-sidebar .navbar-nav-menu .nav-menu-title {
    padding: 1.3rem 0.5rem 0.4rem !important;
    margin: 0 0.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.7) !important;
    opacity: 1 !important;
}
#main-sidebar .navbar-nav-menu .nav-menu-title.active { color: #fff !important; }
#main-sidebar .navbar-nav-menu .nav-menu-title-icon { display: none !important; }

/* Sidebar: nav links */
#main-sidebar .navbar-menu { padding-left: 6px !important; padding-right: 6px !important; }
#main-sidebar .navbar-nav-menu .nav-item .nav-link,
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link {
    margin: 1px 0.25rem;
    padding: 6px 10px !important;
    font-size: 0.93rem !important;
    font-weight: 500;
    border-radius: 6px;
    gap: 10px;
    transition: var(--kgp-transition);
    background: transparent !important;
}
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link {
    display: flex; align-items: center;
    color: rgba(255,255,255,.75);
}
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link:hover {
    color: #fff;
}
#main-sidebar .navbar-nav-menu .nav-item .nav-link .content { font-size: 0.93rem !important; }
#main-sidebar .navbar-nav-menu .nav-item .nav-link .icons,
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link .icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    flex-shrink: 0;
}
#main-sidebar .navbar-nav-menu .nav-item .nav-link .icons i,
#main-sidebar .navbar-nav-menu .nav-item .nav-link .icons svg,
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link .icons i,
#main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link .icons svg {
    width: 1.15rem !important; height: 1.15rem !important; stroke-width: 1.8;
}
#main-sidebar .navbar-nav-menu .menu-arrow i,
#main-sidebar .navbar-nav-menu .menu-arrow svg { width: 19px !important; height: 20px !important; }
#main-sidebar .navbar-nav-menu .nav-item .nav-link.active,
#main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] { color: #fff !important; font-weight: 600; }
#main-sidebar .navbar-nav-menu .nav-item .nav-link.active .icons,
#main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] .icons { color: #fff !important; }

/* Sidebar: submenu (large — giữ mặc định, chỉ padding + active) */
#main-sidebar .nav-menu-sub { padding-left: 12px !important; }
#main-sidebar .nav-menu-sub .nav-link {
    padding: 5px 12px 5px 25px !important;
    font-size: 0.93rem !important;
    font-weight: 450;
}
#main-sidebar .nav-menu-sub .nav-link::before {
    display: block !important;
    background-color: transparent !important;
    width: .7rem !important;
    height: .7rem !important;
    outline: none !important;
    border: 1.3px dashed var(--dx-sidebar-link-sub-color) !important;
    border-radius: 50rem !important;
    top: .7rem !important;
    left: -.4rem !important;
    box-sizing: border-box !important;
}
#main-sidebar .nav-menu-sub .nav-link:hover::before {
    border-color: var(--dx-sidebar-link-sub-hover-color) !important;
}
#main-sidebar .nav-menu-sub .nav-link.active::before {
    border-color: var(--dx-sidebar-link-sub-active-color) !important;
}
#main-sidebar .nav-menu-sub .nav-link.active { color: #fff !important; font-weight: 600; }
[data-sidebar="small"] #main-sidebar .nav-menu-sub .nav-link:hover {
    color: #fff !important;
}

/* Sidebar nhỏ (popup): style đồng bộ với dropdown Chọn dự án */
[data-sidebar="small"] #main-sidebar .nav-menu-sub {
    left: 70px !important;
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 0.375rem !important;
    padding: .5rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 2px 4px rgba(0,0,0,.3),
        0 8px 16px -4px rgba(0,0,0,.45),
        0 20px 32px -12px rgba(0,0,0,.55) !important;
}
[data-sidebar="small"] #main-sidebar .nav-menu-sub .nav-link {
    padding: 8px 14px !important;
    margin: 2px 0 !important;
    width: 100%;
}

/* Sidebar: scrollbar (hidden unless track hovered) */
#main-sidebar .simplebar-track.simplebar-vertical { width: 10px !important; background: transparent; }
#main-sidebar .simplebar-scrollbar::before {
    width: 6px !important; border-radius: 4px;
    background: #3B82F6 !important;
    opacity: 0 !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    left: 2px; right: 2px;
}
#main-sidebar .simplebar-track.simplebar-vertical:hover .simplebar-scrollbar::before {
    opacity: 1 !important; background: #60A5FA !important;
}

/* Sidebar: small (collapsed) state */
[data-sidebar="small"] #main-sidebar.main-sidebar,
[data-sidebar="small"] #main-sidebar .sidebar-wrapper { width: 70px !important; }
[data-sidebar="small"] #main-sidebar .navbar-brand { padding: 10px 0 10px 10px !important; justify-content: flex-start !important; }
[data-sidebar="small"] #main-sidebar .navbar-menu .nav-item .nav-link,
[data-sidebar="small"] #main-sidebar .navbar-menu .sidebar-toggle-item .nav-link {
    width: auto !important; margin: 1px 0.25rem !important;
    padding: 6px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}
[data-sidebar="small"] #main-sidebar .navbar-menu .nav-item .nav-link .icons,
[data-sidebar="small"] #main-sidebar .navbar-menu .sidebar-toggle-item .nav-link .icons {
    width: 1.15rem;
    margin: 0 auto;
}
[data-sidebar="small"] .sidebar-toggle-open { display: none !important; }
[data-sidebar="small"] .sidebar-toggle-item { display: list-item !important; }
[data-sidebar="small"] #main-sidebar .sidebar-brand-row { padding: 0.75rem 0 0.25rem !important; }
[data-sidebar="small"] #main-sidebar .navbar-brand .logo-lg img { margin-left: 0 !important; }

/* Sidebar: hidden state */
[data-sidebar="hidden"] #main-sidebar.main-sidebar { display: none !important; }
[data-sidebar="hidden"] .page-wrapper { margin-left: 0 !important; }
[data-sidebar="hidden"] .main-topbar  { left: 0 !important; }
[data-sidebar="hidden"] .main-footer  { left: 0 !important; }
[data-sidebar="hidden"] .topbar-mobile-nav {
    display: flex !important; align-items: center; gap: 2px; padding-left: 0.5rem;
}
[data-sidebar="hidden"] .topbar-mobile-nav .topbar-sidebar-restore { display: inline-flex !important; }

/* Sidebar restore button: only on tablet+ when hidden */
.topbar-sidebar-restore { display: none !important; }
[data-sidebar="hidden"] .topbar-sidebar-restore { display: inline-flex !important; }

/* Sidebar: responsive ------------------------------------------------------ */
@media (max-width: 991.98px) {
    #main-sidebar.main-sidebar { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }
    .main-topbar  { left: 0 !important; }
    .main-footer  { left: 0 !important; }
    .topbar-sidebar-restore { display: none !important; }
}
@media (min-width: 992px) {
    #main-sidebar.main-sidebar { left: 0 !important; }
    .page-wrapper { margin-left: 230px; }
    .main-topbar  { left: 230px !important; right: 0 !important; width: auto !important; margin: 0 !important; }
    .main-footer  { left: 230px; }
    [data-sidebar="small"] .page-wrapper { margin-left: 70px; }
    [data-sidebar="small"] .main-topbar  { left: 70px !important; }
    [data-sidebar="small"] .main-footer  { left: 70px; }
}

/* -- Topbar --------------------------------------------------------------- */
.main-topbar {
    background-color: #0C1829 !important;
    background-image:
        radial-gradient(40px 70px at 0% 50%, rgba(0,0,0,.14), rgba(0,0,0,.02) 55%, transparent 75%),
        radial-gradient(520px 460px at -15% 5%, rgba(56,189,248,.09), transparent 58%),
        radial-gradient(500px 560px at 115% 45%, rgba(59,130,246,.06), transparent 60%),
        radial-gradient(620px 540px at 50% 110%, rgba(37,99,235,.04), transparent 55%),
        linear-gradient(90deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,0) 20px),
        linear-gradient(180deg, rgba(0,0,0,.4) 0px, rgba(0,0,0,0) 10px),
        linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border-bottom: 0 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(59,130,246,.06) inset;
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
}
.main-topbar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 50%);
    mix-blend-mode: screen; z-index: 0;
}
.main-topbar::after  { content: none !important; }
.main-topbar > *     { position: relative; z-index: 1; }

.main-topbar .profile-dropdown > .btn.topbar-link { padding: 4px 8px; }
.main-topbar .profile-dropdown > .btn.topbar-link > img {
    width: 34px !important; height: 34px !important; border-radius: 9px;
    display: block !important; opacity: 1 !important; visibility: visible !important;
}
.topbar-link { border-radius: var(--kgp-radius-sm); transition: var(--kgp-transition); }
.main-topbar .topbar-link,
.main-topbar .topbar-link svg,
.main-topbar .topbar-link i { color: #E2E8F0 !important; opacity: 1 !important; visibility: visible !important; }
.main-topbar .topbar-link:hover,
.main-topbar .topbar-link:hover svg,
.main-topbar .topbar-link:hover i { background: rgba(147,197,253,.12) !important; color: #F8FAFC !important; }
.main-topbar .topbar-mobile-nav .topbar-mobile-icon,
.main-topbar .topbar-mobile-nav .topbar-mobile-icon svg,
.main-topbar .topbar-mobile-nav .topbar-mobile-icon i { color: #E2E8F0 !important; opacity: 1 !important; visibility: visible !important; }
.main-topbar .topbar-mobile-nav .topbar-mobile-icon:hover { background: rgba(147,197,253,.12) !important; color: #F8FAFC !important; }

/* Topbar: force right-side action cluster always visible */
.main-topbar { z-index: 1050 !important; }
.main-topbar > .d-flex.ms-auto,
.main-topbar > .d-flex.align-items-center.ms-auto {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.main-topbar .dropdown > .btn.topbar-link,
.main-topbar #darkModeButton,
.main-topbar .profile-dropdown > .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.main-topbar .profile-dropdown > .btn > img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.notification-animate.bg-success { background-color: var(--dx-success) !important; }

/* Topbar: mobile nav */
.topbar-mobile-nav { display: none !important; }
.topbar-mobile-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--dx-body-color);
    border-radius: 6px; padding: 0; cursor: pointer;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}
.topbar-mobile-icon:hover { background: rgba(0,0,0,.06); color: var(--dx-body-color); }
.topbar-mobile-icon svg,
.topbar-mobile-icon i { width: 18px !important; height: 18px !important; }
@media (max-width: 991.98px) {
    .topbar-mobile-nav { display: flex !important; align-items: center; gap: 2px; padding-left: 0.5rem; }
}

/* -- Footer --------------------------------------------------------------- */
.main-footer {
    border-top: 1px solid var(--kgp-border-subtle);
    padding: 1rem 0;
    font-size: 0.8125rem;
    color: var(--dx-gray-400);
}
.main-footer a { transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.main-footer a:hover { color: var(--dx-primary) !important; }


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* -- Cards ---------------------------------------------------------------- */
.card {
    border: 1px solid var(--kgp-border-subtle);
    border-radius: var(--kgp-radius-lg);
    box-shadow: var(--kgp-shadow-sm);
    transition: var(--kgp-transition);
    background: var(--kgp-gradient-card);
}
.card > .card-img-top,
.card > .card-img,
.card > .card-img-bottom {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.card > .card-img-bottom {
    border-radius: 0 0 inherit inherit;
}
.card .card-body .card-subtitle:first-child,
.card .card-body > div > .card-subtitle:first-child,
.card .card-body div .card-subtitle:first-child {
    margin-top: 0 !important;
}
.card:hover { box-shadow: var(--kgp-shadow-sm); }

.card-header {
    position: relative;
    background:
        radial-gradient(circle at 1px 1px, rgba(96, 165, 250, 0.10) 1px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(135deg, #102038 0%, #0C1829 60%, #081221 100%);
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}
.card-header .card-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.card-body { padding: 1.5rem; }
.card-footer {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%);
    border-top: none;
}

.card-icon {
    transition: var(--kgp-transition);
    width: 44px; height: 44px;
    border-radius: var(--kgp-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.card:hover .card-icon { transform: none; }

/* Stat card (có .card-icon hoặc icon-box nhỏ bên trong) vẫn giữ hiệu ứng
   nhảy nhẹ khi hover, nhưng không sáng viền */
.card:has(> .card-body .card-icon):hover,
.card:has(> .card-body > .rounded-2[class*="bg-"][class*="-subtle"]):hover,
.card:has(> .card-body > .d-flex > .rounded-2[class*="bg-"][class*="-subtle"]):hover {
    transform: translateY(-2px);
    box-shadow: var(--kgp-shadow-md);
}
.card:has(> .card-body .card-icon):hover .card-icon,
.card:has(> .card-body > .rounded-2[class*="bg-"][class*="-subtle"]):hover > .card-body > .rounded-2[class*="bg-"][class*="-subtle"],
.card:has(> .card-body > .d-flex > .rounded-2[class*="bg-"][class*="-subtle"]):hover .rounded-2[class*="bg-"][class*="-subtle"] {
    transform: scale(1.05);
}

/* Border cho icon-box nhỏ trong stat card compact, đồng bộ với .card-icon */
.card > .card-body > .rounded-2[class*="bg-"][class*="-subtle"],
.card > .card-body > .d-flex > .rounded-2[class*="bg-"][class*="-subtle"] {
    border: 1px solid var(--kgp-border-subtle);
    transition: var(--kgp-transition);
}
[data-bs-theme="dark"] .card > .card-body > .rounded-2[class*="bg-"][class*="-subtle"],
[data-bs-theme="dark"] .card > .card-body > .d-flex > .rounded-2[class*="bg-"][class*="-subtle"] {
    border-color: rgba(96, 165, 250, .14);
}

/* -- Buttons -------------------------------------------------------------- */
.btn {
    border-radius: var(--kgp-radius-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: var(--kgp-transition);
}
.btn-icon { border-radius: var(--kgp-radius-sm); }

.btn-primary {
    background: var(--kgp-gradient-primary) !important;
    border-color: transparent !important;
    box-shadow: var(--kgp-shadow-primary);
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%) !important;
    border-color: transparent !important;
    box-shadow: var(--kgp-shadow-primary);
    color: #fff !important;
}
.btn-primary:active { box-shadow: var(--kgp-shadow-primary); }

.btn-secondary {
    background: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(109,40,217,.25);
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #5B21B6 0%, #4C1D95 100%);
    box-shadow: 0 4px 14px rgba(109,40,217,.25);
}

.btn-success {
    background: linear-gradient(135deg, #047857 0%, #065F46 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(4,120,87,.25);
}
.btn-success:hover {
    background: linear-gradient(135deg, #065F46 0%, #064E3B 100%);
    box-shadow: 0 4px 14px rgba(4,120,87,.25);
}

.btn-danger {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(185,28,28,.25);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #991B1B 0%, #7F1D1D 100%);
    box-shadow: 0 4px 14px rgba(185,28,28,.25);
}

.btn-warning {
    background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(180,83,9,.25);
    color: #fff;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #92400E 0%, #78350F 100%);
    box-shadow: 0 4px 14px rgba(180,83,9,.25);
    color: #fff;
}

.btn-info {
    background: linear-gradient(135deg, #0E7490 0%, #155E75 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(14,116,144,.25);
    color: #fff;
}
.btn-info:hover {
    background: linear-gradient(135deg, #155E75 0%, #164E63 100%);
    box-shadow: 0 4px 14px rgba(14,116,144,.25);
    color: #fff;
}

.btn-light, .btn-white {
    border: 1px solid var(--kgp-border-subtle);
    box-shadow: var(--kgp-shadow-sm);
}
.btn-light:hover, .btn-white:hover {
    box-shadow: var(--kgp-shadow-sm);
}

.btn-outline-primary { color: var(--dx-primary); border-color: var(--dx-primary); border-width: 1.5px; }
.btn-outline-primary:hover {
    background: var(--dx-primary); border-color: var(--dx-primary);
    box-shadow: var(--kgp-shadow-primary);
    color: #fff;
}

.btn-sub-primary {
    background: rgba(var(--dx-primary-rgb), .08);
    color: var(--dx-primary);
    border: 1px solid rgba(var(--dx-primary-rgb), .15);
}
.btn-sub-primary:hover {
    background: rgba(var(--dx-primary-rgb), .14);
    color: var(--dx-primary-text-emphasis);
}

/* -- Forms ---------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--kgp-radius-sm);
    border-color: var(--dx-gray-200);
    transition: var(--kgp-transition);
    padding: 0.5rem 0.875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 3px rgba(var(--dx-primary-rgb), .15);
}
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--dx-gray-300); }

.form-label {
    font-weight: 500; font-size: 0.8125rem;
    letter-spacing: 0.01em; margin-bottom: 0.375rem;
    color: var(--dx-gray-600);
}

.form-check-input:checked {
    background-color: var(--dx-primary);
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 3px rgba(var(--dx-primary-rgb), .15);
}
.form-switch .form-check-input:checked { background-color: var(--dx-primary); border-color: var(--dx-primary); }
.form-switch .form-check-input { transition: var(--kgp-transition); }
.check-primary .form-check-input:checked { background-color: var(--dx-primary); border-color: var(--dx-primary); }
.switch-outline-primary input:checked + .label { border-color: var(--dx-primary); }
.switch-outline-primary input:checked + .label::after { background: var(--dx-primary); }

.input-group .form-control, .input-group .btn { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--kgp-radius-sm) !important; border-bottom-left-radius: var(--kgp-radius-sm) !important; }
.input-group > :last-child  { border-top-right-radius: var(--kgp-radius-sm) !important; border-bottom-right-radius: var(--kgp-radius-sm) !important; }

/* -- Tables --------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: rgba(var(--dx-primary-rgb), .03);
    border-collapse: separate;
    border-spacing: 0;
}
.table thead th {
    position: relative;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dx-gray-500);
    background: transparent;
    border-bottom: 1px solid var(--kgp-border-subtle);
    padding: 0.875rem 1rem;
    white-space: nowrap;
}
[data-bs-theme="dark"] .table thead th { color: #c9d1d9; }
.table thead th:first-child { border-top-left-radius: var(--kgp-radius-md); }
.table thead th:last-child  { border-top-right-radius: var(--kgp-radius-md); }

.table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--kgp-border-subtle);
    font-size: 0.875rem;
}
.table tbody tr { transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.table tbody tr:hover { background-color: rgba(var(--dx-primary-rgb), .025) !important; }
.table tbody tr:last-child td { border-bottom: none; }

.table-responsive { border-radius: var(--kgp-radius-md); scrollbar-width: thin; }

/* DataTables — higher specificity than jquery.dataTables.css */
table.dataTable thead th,
table.dataTable thead td,
.dataTables_scrollHead table.dataTable thead th,
.dataTables_scrollHead table.dataTable thead td,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_disabled,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    background: transparent !important;
    background-image: none !important;
    color: var(--dx-gray-500) !important;
    border-bottom: 1px solid var(--kgp-border-subtle) !important;
}
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td { color: #c9d1d9 !important; }
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner > table.dataTable { background: transparent !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
    border: 1px solid var(--dx-gray-200);
    padding: 0.1875rem 0.75rem;
    line-height: 1.2;
}
.dataTables_wrapper .dataTables_length select {
    min-width: 6rem;
    padding-right: 2rem;
}
.dataTables_wrapper .dataTables_length label { white-space: nowrap; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--kgp-radius-sm) !important; margin: 0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--kgp-gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--kgp-shadow-primary);
}
.dataTables_wrapper .dataTables_info { font-size: 0.8125rem; color: var(--dx-gray-500); }

/* -- Badges --------------------------------------------------------------- */
.badge {
    border-radius: 9999px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.3em 0.7em;
    font-size: 0.7rem;
}

.badge.bg-primary,
.bg-primary:not(.btn):not(.nav-link):not(.card):not(.page-link):not(.dropdown-item) { background: var(--dx-primary) !important; }
.badge.bg-secondary { background: var(--dx-secondary) !important; }
.badge.bg-success   { background: var(--dx-success) !important; }
.badge.bg-danger    { background: var(--dx-danger) !important; }
.badge.bg-warning   { background: var(--dx-warning) !important; color: #fff !important; }
.badge.bg-info      { background: var(--dx-info) !important; color: #fff !important; }

.badge.bg-soft-primary,   .badge.bg-primary-subtle   { background: rgba(var(--dx-primary-rgb), .1) !important; color: var(--dx-primary-text-emphasis) !important; }
.badge.bg-soft-success,   .badge.bg-success-subtle   { background: rgba(0, 193, 138, .06) !important; color: #00c18a !important; }
.badge.bg-soft-danger,    .badge.bg-danger-subtle    { background: rgba(220, 38, 38, .06) !important; color: #B91C1C !important; }
.badge.bg-soft-warning,   .badge.bg-warning-subtle   { background: rgba(var(--dx-warning-rgb), .08) !important; color: #78350F !important; }
.badge.bg-soft-info,      .badge.bg-info-subtle      { background: rgba(var(--dx-info-rgb), .08) !important; color: #155E75 !important; }
.badge.bg-soft-secondary, .badge.bg-secondary-subtle { background: rgba(var(--dx-secondary-rgb), .08) !important; color: #5B21B6 !important; }

/* -- Toggle badges (API on/off, Trạng thái Hoạt động/Tạm dừng) ------------ */
/* Dịu mắt: tint background 8%, border mềm, chữ + icon tone đậm vừa phải */
.toggle-badge,
.badge.bg-success-subtle,
.badge.bg-danger-subtle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35em !important;
    padding: 0.4em 0.75em !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em;
    line-height: 1.2 !important;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
/* SUCCESS — Emerald tone, dịu mắt */
span.badge.bg-success-subtle,
span.badge.bg-success-subtle.text-success,
.badge.bg-success-subtle.border-success-subtle,
.badge.bg-success-subtle.text-success.border-success-subtle {
    background-color: rgba(0, 193, 138, .06) !important;
    border-color: rgba(0, 193, 138, .35) !important;
    color: #00c18a !important;
}
.badge.bg-success-subtle svg,
.badge.bg-success-subtle svg *,
.badge.bg-success-subtle.text-success svg,
.badge.bg-success-subtle.text-success svg * {
    stroke: #00c18a !important;
    color: #00c18a !important;
    fill: none !important;
    stroke-width: 2.25 !important;
}
.toggle-badge.bg-success-subtle:hover,
.badge.bg-success-subtle.toggle-badge:hover {
    background-color: rgba(0, 193, 138, .10) !important;
    border-color: rgba(0, 193, 138, .55) !important;
}
/* DANGER — Rose/Red tone, ấm và không chói */
span.badge.bg-danger-subtle,
span.badge.bg-danger-subtle.text-danger,
.badge.bg-danger-subtle.border-danger-subtle,
.badge.bg-danger-subtle.text-danger.border-danger-subtle {
    background-color: rgba(220, 38, 38, .06) !important;
    border-color: rgba(220, 38, 38, .35) !important;
    color: #B91C1C !important;
}
.badge.bg-danger-subtle svg,
.badge.bg-danger-subtle svg *,
.badge.bg-danger-subtle.text-danger svg,
.badge.bg-danger-subtle.text-danger svg * {
    stroke: #B91C1C !important;
    color: #B91C1C !important;
    fill: none !important;
    stroke-width: 2.25 !important;
}
.toggle-badge.bg-danger-subtle:hover,
.badge.bg-danger-subtle.toggle-badge:hover {
    background-color: rgba(220, 38, 38, .10) !important;
    border-color: rgba(220, 38, 38, .55) !important;
}

/* -- Text colors ---------------------------------------------------------- */
.text-primary { color: var(--dx-primary) !important; }
.text-success { color: var(--dx-success) !important; }
.text-danger  { color: var(--dx-danger) !important; }
.text-warning { color: var(--dx-warning) !important; }
.text-info    { color: var(--dx-info) !important; }
.icon-primary { color: var(--dx-primary); }
.link-primary, a.link-primary { color: var(--dx-primary); }
.link-primary:hover, a.link-primary:hover { color: var(--dx-primary-text-emphasis); }
.border-primary { border-color: var(--dx-primary) !important; }

/* -- Bg helpers (tint) ---------------------------------------------------- */
.bg-primary.bg-opacity-10,   .bg-primary-subtle   { background-color: rgba(var(--dx-primary-rgb), .1) !important; }
.bg-success.bg-opacity-10,   .bg-success-subtle   { background-color: rgba(5, 150, 105, .06) !important; }
.bg-danger.bg-opacity-10,    .bg-danger-subtle    { background-color: rgba(220, 38, 38, .06) !important; }
.bg-warning.bg-opacity-10,   .bg-warning-subtle   { background-color: rgba(var(--dx-warning-rgb), .1) !important; }
.bg-info.bg-opacity-10,      .bg-info-subtle      { background-color: rgba(var(--dx-info-rgb), .1) !important; }
.bg-secondary.bg-opacity-10, .bg-secondary-subtle { background-color: rgba(var(--dx-secondary-rgb), .1) !important; }

/* -- Dropdowns ------------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 14px;
    padding: 0.5rem;
    animation: kgpDropIn 0.18s ease-out;
    transform-origin: top center;
    background-color: #ffffff;
    box-shadow:
        0 0 0 1px rgba(15,23,42,.02),
        0 2px 4px rgba(15,23,42,.04),
        0 8px 16px -4px rgba(15,23,42,.08),
        0 20px 32px -12px rgba(30,58,138,.14),
        0 32px 56px -20px rgba(30,58,138,.18);
}
.dropdown-item {
    border-radius: var(--kgp-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.8375rem;
    font-weight: 450;
    transition: var(--kgp-transition);
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--dx-primary-rgb), .06); color: var(--dx-primary); }
.dropdown-item.active, .dropdown-item:active { background: rgba(var(--dx-primary-rgb), .1); color: var(--dx-primary); }
.dropdown-divider { border-color: var(--kgp-border-subtle); margin: 0.375rem 0; }

/* -- Alerts --------------------------------------------------------------- */
.alert {
    border-radius: var(--kgp-radius-md);
    border: none;
    font-size: 0.875rem;
    padding: 1rem 1.25rem;
}
.alert-primary { background: rgba(var(--dx-primary-rgb), .07); color: var(--dx-primary-text-emphasis); border-left: 4px solid var(--dx-primary); }
.alert-success { background: rgba(var(--dx-success-rgb), .07); color: #065F46; border-left: 4px solid var(--dx-success); }
.alert-danger  { background: rgba(var(--dx-danger-rgb), .07);  color: #7F1D1D; border-left: 4px solid var(--dx-danger); }
.alert-warning { background: rgba(var(--dx-warning-rgb), .07); color: #78350F; border-left: 4px solid var(--dx-warning); }
.alert-info    { background: rgba(var(--dx-info-rgb), .07);    color: #164E63; border-left: 4px solid var(--dx-info); }

/* -- Modals --------------------------------------------------------------- */
.modal-backdrop.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-content {
    border: 1px solid var(--kgp-border-subtle);
    border-radius: var(--kgp-radius-xl);
    box-shadow: var(--kgp-shadow-xl);
    overflow: hidden;
}
.modal.fade .modal-dialog { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
.modal-header { border-bottom: 1px solid var(--kgp-border-subtle); padding: 1.25rem 1.5rem; }
.modal-footer { border-top: 1px solid var(--kgp-border-subtle); padding: 1rem 1.5rem; }
.modal-title  { font-weight: 600; letter-spacing: -0.01em; }

/* -- Breadcrumbs + page heading ------------------------------------------ */
.breadcrumb { background: none; padding: 0; margin: 0; font-size: 0.8125rem; }
.breadcrumb-item a { color: var(--dx-gray-500); text-decoration: none; transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.breadcrumb-item a:hover { color: var(--dx-primary); }
.breadcrumb-item.active { color: var(--dx-gray-400); }

.page-heading { padding-bottom: 0.5rem; }
.page-heading h6 { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: #ffffff; opacity: 0.8; }

/* -- Nav pills ------------------------------------------------------------ */
.nav-pills .nav-link {
    border-radius: var(--kgp-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: var(--kgp-transition);
    color: var(--dx-gray-600);
}
.nav-pills .nav-link:hover:not(.active) { background: rgba(var(--dx-primary-rgb), .05); color: var(--dx-primary); }
.nav-pills .nav-link.active {
    background: var(--kgp-gradient-primary) !important;
    box-shadow: var(--kgp-shadow-primary);
    color: #fff !important;
}

/* -- Pagination ----------------------------------------------------------- */
.pagination .page-link {
    border-radius: var(--kgp-radius-sm);
    margin: 0 2px;
    border: 1px solid var(--kgp-border-subtle);
    font-weight: 500;
    font-size: 0.8125rem;
    transition: var(--kgp-transition);
}
.pagination .page-item.active .page-link {
    background: var(--kgp-gradient-primary);
    border-color: transparent;
    box-shadow: var(--kgp-shadow-primary);
}
.pagination .page-link:hover:not(.active) {
    background: rgba(var(--dx-primary-rgb), .06);
    color: var(--dx-primary);
    border-color: rgba(var(--dx-primary-rgb), .2);
}

/* -- Accordion ------------------------------------------------------------ */
.accordion-item {
    border: 1px solid var(--kgp-border-subtle);
    border-radius: var(--kgp-radius-md) !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.accordion-button { font-weight: 500; border-radius: var(--kgp-radius-md) !important; }
.accordion-button:not(.collapsed) {
    background: rgba(var(--dx-primary-rgb), .04);
    color: var(--dx-primary);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(var(--dx-primary-rgb), .12); }

/* -- Progress ------------------------------------------------------------- */
.progress {
    border-radius: 9999px;
    height: 6px;
    background: var(--dx-gray-100);
    overflow: hidden;
}
.progress-bar {
    background: var(--kgp-gradient-primary);
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- Tooltip -------------------------------------------------------------- */
.tooltip-inner {
    border-radius: var(--kgp-radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 450;
    background: #1e293b;
}

/* -- Toastr (CDN) --------------------------------------------------------- */
#toast-container > .toast {
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
    padding: 10px 14px !important;
    border: none !important;
    background-image: none !important;
    min-height: auto !important;
    min-width: auto !important;
    width: auto !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    text-align: center !important;
}
#toast-container > .toast::before { display: none !important; }
#toast-container > .toast-error   { background-color: rgba(220, 38, 38, .85) !important; }
#toast-container > .toast-success { background-color: rgba(22, 163, 74, .85) !important; }
#toast-container > .toast-warning { background-color: rgba(217, 119, 6, .85) !important; }
#toast-container > .toast-info    { background-color: rgba(37, 99, 235, .85) !important; }
#toast-container .toast-progress { background: rgba(255,255,255,.3) !important; height: 2px !important; border-radius: 0 0 8px 8px !important; }

/* -- SweetAlert2 ---------------------------------------------------------- */
.swal2-popup {
    border-radius: var(--kgp-radius-xl) !important;
    box-shadow: var(--kgp-shadow-xl) !important;
    border: 1px solid var(--kgp-border-subtle) !important;
    padding: 2rem !important;
}
.swal2-title { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.swal2-confirm {
    border-radius: var(--kgp-radius-sm) !important;
    background: var(--kgp-gradient-primary) !important;
    box-shadow: var(--kgp-shadow-primary) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.5rem !important;
}
.swal2-cancel { border-radius: var(--kgp-radius-sm) !important; }

/* -- Air Datepicker ------------------------------------------------------- */
.air-datepicker {
    border-radius: var(--kgp-radius-md) !important;
    box-shadow: var(--kgp-shadow-xl) !important;
    border: 1px solid var(--kgp-border-subtle) !important;
}
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-focus- { background: var(--dx-primary) !important; color: #fff !important; }
.air-datepicker-cell.-in-range- { background: rgba(var(--dx-primary-rgb), .1) !important; }
.air-datepicker-cell.-focus-    { background: rgba(var(--dx-primary-rgb), .06) !important; }

/* -- Notifications -------------------------------------------------------- */
.dropdown-menu-lg { border-radius: var(--kgp-radius-lg); min-width: 360px; }
.notification-item { border-radius: var(--kgp-radius-sm); transition: var(--kgp-transition); }
.notification-item:hover  { background: rgba(var(--dx-primary-rgb), .04); }
.notification-item.unread {
    background: rgba(var(--dx-primary-rgb), .04);
    border-left: 3px solid var(--dx-primary);
}

/* -- Profile widget ------------------------------------------------------- */
.profile-widget {
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 40%, #6D28D9 100%);
    border-radius: var(--kgp-radius-lg);
}
.profile-avatar-img {
    border-radius: var(--kgp-radius-lg);
    border: 4px solid var(--dx-body-bg);
    box-shadow: var(--kgp-shadow-lg);
}
.profile-avatar-dot {
    border: 3px solid var(--dx-body-bg);
    box-shadow: 0 0 0 1px rgba(5,150,105,.3);
}

/* -- Auth pages ----------------------------------------------------------- */
.auth-modern {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(37,99,235,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(16,185,129,.10) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(59,130,246,.06) 0%, transparent 70%),
        linear-gradient(135deg, #020617 0%, #0B1220 35%, #0F1B2E 65%, #020617 100%);
}
.auth-modern::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.08) 0%, transparent 50%);
    pointer-events: none;
}
.auth-modern > .bg-black.opacity-50 {
    background: transparent !important;
    opacity: 1 !important;
}
:root[data-bs-theme="dark"] .auth-modern .card,
html[data-bs-theme="dark"] .auth-modern .card {
    position: relative;
    background-color: #02060F !important;
    background-image:
        radial-gradient(520px 460px at -15% 5%, rgba(56,189,248,.13), transparent 62%),
        radial-gradient(500px 560px at 115% 45%, rgba(59,130,246,.09), transparent 65%),
        radial-gradient(620px 540px at 50% 110%, rgba(37,99,235,.08), transparent 65%),
        linear-gradient(90deg, rgba(30,58,138,.07) 0%, rgba(30,58,138,.02) 50%, rgba(30,58,138,.07) 100%),
        linear-gradient(180deg, #040A1A 0%, #01040C 100%) !important;
    border: 0 !important;
    border-radius: var(--kgp-radius-xl) !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(59,130,246,.06) inset,
        0 20px 50px rgba(2,6,16,.55),
        0 8px 24px rgba(4,10,28,.45) !important;
    backdrop-filter: saturate(140%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(20px) !important;
    overflow: hidden;
}
:root[data-bs-theme="dark"] .auth-modern .card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%);
    mix-blend-mode: screen;
    z-index: 0;
}
:root[data-bs-theme="dark"] .auth-modern .card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(147,197,253,.28) 30%,
        rgba(147,197,253,.28) 70%,
        transparent 100%);
    opacity: .55;
    z-index: 2;
}
:root[data-bs-theme="dark"] .auth-modern .card > * { position: relative; z-index: 1; }
:root[data-bs-theme="dark"] .auth-modern .card .form-control,
html[data-bs-theme="dark"] .auth-modern .card .form-control {
    background: rgba(255,255,255,.06) !important;
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #F1F5F9 !important;
}
:root[data-bs-theme="dark"] .auth-modern .card .form-control:focus {
    background: rgba(255,255,255,.10) !important;
    background-color: rgba(255,255,255,.10) !important;
    border-color: rgba(147,197,253,.5) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
    color: #FFFFFF !important;
}
.auth-modern .form-control {
    background: rgba(255,255,255,.04);
    border-color: rgba(148,163,184,.12);
    color: #e2e8f0;
}
.auth-modern .form-control:focus {
    background: rgba(255,255,255,.06);
    border-color: rgba(59,130,246,.4);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    color: #f1f5f9;
}
.auth-modern .form-control::placeholder { color: rgba(255,255,255,.3); }
.auth-modern .form-label { color: rgba(255,255,255,.65); }
.auth-modern .btn-primary { padding: 0.625rem 1.5rem; font-weight: 600; font-size: 0.9375rem; }
.auth-modern .social-link { border-radius: var(--kgp-radius-sm); transition: var(--kgp-transition); }
.auth-modern .social-link:hover {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.2) !important;
}
.auth-modern a.text-white:hover { color: #93C5FD !important; }

/* ── Light mode: trang auth (login/register) ── */
:root:not([data-bs-theme="dark"]) .auth-modern {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 50%, #F8FAFC 100%);
}
:root:not([data-bs-theme="dark"]) .auth-modern::before {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.08) 0%, transparent 50%);
}
:root:not([data-bs-theme="dark"]) .auth-modern .bg-black.opacity-50 {
    background: rgba(255,255,255,.25) !important;
    opacity: 1 !important;
}
:root:not([data-bs-theme="dark"]) .auth-modern .card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 25px 60px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.03) inset;
    color: #1E293B;
}
:root:not([data-bs-theme="dark"]) .auth-modern .card h4,
:root:not([data-bs-theme="dark"]) .auth-modern .card h4.text-white,
:root:not([data-bs-theme="dark"]) .auth-modern .card .text-white,
:root:not([data-bs-theme="dark"]) .auth-modern .card a.text-white {
    color: #0F172A !important;
}
:root:not([data-bs-theme="dark"]) .auth-modern a.text-white:hover { color: var(--dx-primary) !important; }
:root:not([data-bs-theme="dark"]) .auth-modern .form-control {
    background: #FFFFFF;
    border-color: rgba(15,23,42,.12);
    color: #0F172A;
}
:root:not([data-bs-theme="dark"]) .auth-modern .form-control:focus {
    background: #FFFFFF;
    border-color: rgba(37,99,235,.5);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    color: #0F172A;
}
:root:not([data-bs-theme="dark"]) .auth-modern .form-control::placeholder { color: rgba(15,23,42,.35); }
:root:not([data-bs-theme="dark"]) .auth-modern .form-label { color: #334155; }
:root:not([data-bs-theme="dark"]) .auth-modern hr.border-white {
    border-color: rgba(15,23,42,.12) !important;
    opacity: 1 !important;
}
:root:not([data-bs-theme="dark"]) .auth-modern .btn-outline-light {
    background: #FFFFFF;
    border-color: rgba(15,23,42,.12) !important;
    color: #1E293B;
}
:root:not([data-bs-theme="dark"]) .auth-modern .btn-outline-light:hover {
    background: #F8FAFC;
    border-color: rgba(15,23,42,.20) !important;
    color: #0F172A;
}
:root:not([data-bs-theme="dark"]) .auth-modern .form-check-label { color: #334155; }
:root:not([data-bs-theme="dark"]) .auth-modern .form-check .form-check-input,
:root:not([data-bs-theme="dark"]) .auth-modern input[type="checkbox"].form-check-input {
    background-color: #FFFFFF !important;
    border: 1.5px solid #94A3B8 !important;
}
:root:not([data-bs-theme="dark"]) .auth-modern .form-check .form-check-input:checked,
:root:not([data-bs-theme="dark"]) .auth-modern input[type="checkbox"].form-check-input:checked {
    background-color: var(--dx-primary) !important;
    border-color: var(--dx-primary) !important;
}

/* -- 2FA / OTP ------------------------------------------------------------ */
#twofaReminderModal .modal-content { border-radius: var(--kgp-radius-xl); }
.pattern-input {
    border-radius: var(--kgp-radius-sm) !important;
    font-weight: 600;
    transition: var(--kgp-transition);
}
.pattern-input:focus {
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 3px rgba(var(--dx-primary-rgb), .18);
    transform: scale(1.05);
}

/* -- Loading overlay ------------------------------------------------------ */
#loading-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#loading-overlay .spinner-border {
    width: 2.5rem; height: 2.5rem;
    border-width: 3px;
    color: var(--dx-primary);
}

/* -- Apex charts ---------------------------------------------------------- */
.apexcharts-canvas { filter: drop-shadow(0 1px 2px rgba(0,0,0,.04)); }

/* Dark: ApexCharts text + grid lines to match navy card background */
[data-bs-theme="dark"] .apexcharts-canvas text,
[data-bs-theme="dark"] .apexcharts-xaxis-label,
[data-bs-theme="dark"] .apexcharts-yaxis-label,
[data-bs-theme="dark"] .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-title-text,
[data-bs-theme="dark"] .apexcharts-subtitle-text {
    fill: #CBD5E1 !important;
    color: #CBD5E1 !important;
}
[data-bs-theme="dark"] .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-xaxis-tick,
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line {
    stroke: rgba(148,163,184,.14) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    color: #E2E8F0 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: rgba(37,99,235,.12) !important;
    border-bottom: 1px solid rgba(148,163,184,.14) !important;
    color: #F1F5F9 !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
    background: #0C1829 !important;
    border-color: rgba(148,163,184,.2) !important;
    color: #E2E8F0 !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:before,
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: rgba(148,163,184,.2) !important;
}


/* ==========================================================================
   5. THEME: DARK MODE
   All dark overrides grouped here for maintainability.
   ========================================================================== */

[data-bs-theme="dark"] {
    /* Brand palette — lifted 1 step for dark backgrounds */
    --dx-primary: #2563EB;
    --dx-primary-rgb: 37, 99, 235;
    --dx-primary-text-emphasis: #3B82F6;
    --dx-primary-bg-subtle: rgba(37, 99, 235, .15);
    --dx-primary-border-subtle: rgba(37, 99, 235, .3);
    --dx-secondary: #8B5CF6;
    --dx-secondary-rgb: 139, 92, 246;
    --dx-success: #059669;
    --dx-success-rgb: 5, 150, 105;
    --dx-danger: #DC2626;
    --dx-danger-rgb: 220, 38, 38;
    --dx-warning: #D97706;
    --dx-warning-rgb: 217, 119, 6;
    --dx-info: #0891B2;
    --dx-info-rgb: 8, 145, 178;

    --kgp-primary: #2563EB;
    --kgp-primary-dark: #1D4ED8;
    --kgp-primary-rgb: 37, 99, 235;

    --kgp-gradient-primary: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --kgp-gradient-primary-vivid: linear-gradient(135deg, #2563EB 0%, #8B5CF6 100%);
    --kgp-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(139,92,246,.04) 100%);
    --kgp-gradient-card: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%);

    --kgp-shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
    --kgp-shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 6px 12px -2px rgba(0,0,0,.4), 0 12px 24px -6px rgba(0,0,0,.35);
    --kgp-shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 12px 20px -4px rgba(0,0,0,.45), 0 24px 40px -12px rgba(0,0,0,.5);
    --kgp-shadow-xl: 0 2px 4px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.4), 0 24px 40px -8px rgba(0,0,0,.5), 0 40px 64px -16px rgba(0,0,0,.55);
    --kgp-shadow-primary: 0 2px 6px rgba(37,99,235,.22), 0 8px 20px rgba(37,99,235,.3);
    --kgp-shadow-primary-lg: 0 4px 12px rgba(37,99,235,.28), 0 16px 32px rgba(37,99,235,.35);
    --kgp-border-subtle: rgba(37,99,235,.08);

    /* Dark backgrounds — body is a mid slate-blue, lighter than cards */
    --dx-body-bg: #1E293B;
    --dx-body-bg-rgb: 30, 41, 59;
    --dx-secondary-bg: #0C1829;
    --dx-tertiary-bg: #0C1829;

    /* High-contrast text on Obsidian Navy */
    --dx-body-color: #FFFFFF;
    --dx-body-color-rgb: 255, 255, 255;
    --dx-heading-color: #FFFFFF;
    --dx-emphasis-color: #FFFFFF;
    --dx-emphasis-color-rgb: 255, 255, 255;
    --dx-secondary-color: #CBD5E1;
    --dx-secondary-color-rgb: 203, 213, 225;
    --dx-tertiary-color: #CBD5E1;
    --dx-tertiary-color-rgb: 203, 213, 225;

    /* Bridge: dark-mode --bs-* aliases */
    --bs-body-bg: #1E293B;
    --bs-body-bg-rgb: 30, 41, 59;
    --bs-secondary-color: var(--dx-gray-400);
    --bs-secondary-bg: #0C1829;
    --bs-border-color: var(--dx-gray-700);
    --bs-light: #0C1829;
}

/* -- Dark: body background — mid slate-blue with subtle pattern ---------- */
[data-bs-theme="dark"] body {
    background-color: #1E293B !important;
    background-image:
        radial-gradient(900px 700px at 12% -8%, rgba(96,165,250,.12), transparent 60%),
        radial-gradient(1000px 800px at 92% 18%, rgba(59,130,246,.09), transparent 62%),
        radial-gradient(800px 700px at 50% 120%, rgba(37,99,235,.08), transparent 65%),
        linear-gradient(rgba(226,232,240,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226,232,240,.05) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 32px 32px, 32px 32px !important;
    background-attachment: fixed !important;
}
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .main-content {
    background-color: transparent !important;
}

/* -- Dark: body/surfaces -------------------------------------------------- */
[data-bs-theme="dark"] .card {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%);
    border-color: rgba(96,165,250,.14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 10px 28px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .card-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
[data-bs-theme="dark"] .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
[data-bs-theme="dark"] .card:hover {
    border-color: rgba(96,165,250,.14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 10px 28px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .card .card-title,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card h6.card-title {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    font-weight: 700;
}
[data-bs-theme="dark"] .card .card-subtitle,
[data-bs-theme="dark"] .card .card-body .text-muted {
    color: #CBD5E1 !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .card .card-icon { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }

[data-bs-theme="dark"] .main-topbar {
    background-color: #0C1829 !important;
    background-image:
        radial-gradient(280px 150px at 0% 50%, rgba(0,0,0,.12), rgba(0,0,0,.03) 55%, transparent 82%),
        radial-gradient(520px 460px at -15% 5%, rgba(56,189,248,.10), transparent 62%),
        radial-gradient(500px 560px at 115% 45%, rgba(59,130,246,.07), transparent 65%),
        radial-gradient(620px 540px at 50% 110%, rgba(37,99,235,.05), transparent 55%),
        linear-gradient(90deg, rgba(30,58,138,.07) 0%, rgba(30,58,138,.03) 50%, rgba(30,58,138,.05) 100%),
        linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.05) 18%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,.5) 0px, rgba(0,0,0,0) 10px),
        linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border-bottom: 0 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(59,130,246,.08) inset,
        inset 3px 0 10px -14px rgba(0,2,10,.22),
        inset 10px 0 20px -32px rgba(2,6,16,.18);
}

[data-bs-theme="dark"] .modal-content {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%);
    border-color: rgba(96,165,250,.14);
}

[data-bs-theme="dark"] .dropdown-menu {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%);
    border-color: rgba(148,163,184,.1);
    box-shadow:
        0 0 0 1px rgba(148,163,184,.04),
        0 2px 4px rgba(0,0,0,.3),
        0 8px 16px -4px rgba(0,0,0,.45),
        0 20px 32px -12px rgba(0,0,0,.55),
        0 32px 56px -20px rgba(0,0,0,.6);
}

/* -- Dark: sidebar -------------------------------------------------------- */
[data-bs-theme="dark"] #main-sidebar.main-sidebar {
    background-color: #02060F !important;
    background-image:
        radial-gradient(520px 460px at -15% 5%, rgba(56,189,248,.13), transparent 62%),
        radial-gradient(500px 560px at 115% 45%, rgba(59,130,246,.09), transparent 65%),
        radial-gradient(620px 540px at 50% 110%, rgba(37,99,235,.08), transparent 65%),
        linear-gradient(90deg, rgba(30,58,138,.07) 0%, rgba(30,58,138,.02) 50%, rgba(30,58,138,.07) 100%),
        linear-gradient(180deg, #030814 0%, #000209 100%) !important;
    border-right: 0 !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(59,130,246,.08) inset,
        8px 0 22px -10px rgba(0,2,10,.85),
        22px 0 44px -24px rgba(2,6,16,.85);
}
[data-bs-theme="dark"] #main-sidebar.main-sidebar::after { opacity: .5; }

/* -- Dark: forms ---------------------------------------------------------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0C1829;
    border-color: rgba(148,163,184,.18);
    color: #e2e8f0;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { border-color: var(--dx-gray-700); }
[data-bs-theme="dark"] .form-control:hover:not(:focus):not(:disabled),
[data-bs-theme="dark"] .form-select:hover:not(:focus):not(:disabled) { border-color: var(--dx-gray-600); }
[data-bs-theme="dark"] .form-label { color: var(--dx-gray-400); }

/* -- Dark: tables --------------------------------------------------------- */
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .table thead th { border-bottom: none; color: #F1F5F9; }
[data-bs-theme="dark"] .table tbody td {
    border-bottom-color: rgba(148,163,184,.10);
    color: #E2E8F0;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { border-color: var(--dx-gray-700); }

/* -- Dark: text colors — jewel tone --------------------------------------- */
[data-bs-theme="dark"] .text-primary { color: #2563EB !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-weight: 600; }
[data-bs-theme="dark"] .text-success { color: #059669 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55); font-weight: 700; }
[data-bs-theme="dark"] .text-danger  { color: #DC2626 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55); font-weight: 700; }
[data-bs-theme="dark"] .text-warning { color: #D97706 !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-weight: 700; }
[data-bs-theme="dark"] .text-info    { color: #0891B2 !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-weight: 700; }
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary { color: #CBD5E1 !important; font-weight: 500; }

/* Accent text inside cards — richer weight on dark surfaces */
[data-bs-theme="dark"] .card .text-success { color: #059669 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700; }
[data-bs-theme="dark"] .card .text-danger  { color: #DC2626 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700; }
[data-bs-theme="dark"] .card .text-warning { color: #D97706 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700; }
[data-bs-theme="dark"] .card .text-info    { color: #0891B2 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700; }
[data-bs-theme="dark"] .card .text-primary { color: #2563EB !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700; }

/* Metric values */
[data-bs-theme="dark"] .card .metric-value { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: 700 !important; }
[data-bs-theme="dark"] .card .metric-value.neutral  { color: #FFFFFF !important; }
[data-bs-theme="dark"] .card .metric-value.positive { color: #059669 !important; }
[data-bs-theme="dark"] .card .metric-value.negative { color: #DC2626 !important; }

/* -- Dark: border subtle variants (lift contrast on dark bg) -------------- */
[data-bs-theme="dark"] .border-primary-subtle   { border-color: rgba(96,165,250,.55) !important; }
[data-bs-theme="dark"] .border-success-subtle   { border-color: rgba(110,231,183,.60) !important; }
[data-bs-theme="dark"] .border-danger-subtle    { border-color: rgba(252,165,165,.60) !important; }
[data-bs-theme="dark"] .border-warning-subtle   { border-color: rgba(253,224,71,.60) !important; }
[data-bs-theme="dark"] .border-info-subtle      { border-color: rgba(103,232,249,.60) !important; }
[data-bs-theme="dark"] .border-secondary-subtle { border-color: rgba(196,181,253,.60) !important; }

/* -- Dark: badges (soft/subtle) ------------------------------------------- */
[data-bs-theme="dark"] .badge.bg-soft-primary,
[data-bs-theme="dark"] .badge.bg-primary-subtle {
    background: rgba(59,130,246,.22) !important;
    color: #BFDBFE !important;
    border-color: rgba(96,165,250,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .badge.bg-soft-success,
[data-bs-theme="dark"] .badge.bg-success-subtle {
    background: transparent !important;
    color: #A7F3D0 !important;
    border-color: rgba(110,231,183,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .badge.bg-soft-danger,
[data-bs-theme="dark"] .badge.bg-danger-subtle {
    background: transparent !important;
    color: #FECACA !important;
    border-color: rgba(252,165,165,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .badge.bg-soft-warning,
[data-bs-theme="dark"] .badge.bg-warning-subtle {
    background: rgba(251,191,36,.22) !important;
    color: #FEF3C7 !important;
    border-color: rgba(253,224,71,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .badge.bg-soft-info,
[data-bs-theme="dark"] .badge.bg-info-subtle {
    background: rgba(34,211,238,.22) !important;
    color: #CFFAFE !important;
    border-color: rgba(103,232,249,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .badge.bg-soft-secondary,
[data-bs-theme="dark"] .badge.bg-secondary-subtle {
    background: rgba(167,139,250,.22) !important;
    color: #DDD6FE !important;
    border-color: rgba(196,181,253,.55) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Badge "subtle + text-*" combo — jewel tone with gradient + glow.
   Higher specificity than the [data-bs-theme="dark"] .text-* rules above. */
[data-bs-theme="dark"] .badge.bg-success-subtle.text-success,
[data-bs-theme="dark"] .badge.bg-soft-success.text-success {
    color: #00c18a !important;
    background: rgba(0, 193, 138, .08) !important;
    background-color: rgba(0, 193, 138, .08) !important;
    background-image: none !important;
    border-color: rgba(0, 193, 138, .45) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
[data-bs-theme="dark"] .badge.bg-danger-subtle.text-danger,
[data-bs-theme="dark"] .badge.bg-soft-danger.text-danger {
    color: #ef0421 !important;
    background: rgba(239, 68, 68, .08) !important;
    background-color: rgba(239, 68, 68, .08) !important;
    background-image: none !important;
    border-color: rgba(239, 68, 68, .45) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
[data-bs-theme="dark"] .badge.bg-warning-subtle.text-warning,
[data-bs-theme="dark"] .badge.bg-soft-warning.text-warning {
    color: #FBBF24 !important;
    background: linear-gradient(135deg, rgba(146,64,14,.45), rgba(120,53,15,.55)) !important;
    border-color: #B45309 !important;
    box-shadow: 0 0 0 1px rgba(146,64,14,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(251,191,36,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
[data-bs-theme="dark"] .badge.bg-info-subtle.text-info,
[data-bs-theme="dark"] .badge.bg-soft-info.text-info {
    color: #22D3EE !important;
    background: linear-gradient(135deg, rgba(14,116,144,.45), rgba(22,78,99,.55)) !important;
    border-color: #0E7490 !important;
    box-shadow: 0 0 0 1px rgba(14,116,144,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(103,232,249,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
[data-bs-theme="dark"] .badge.bg-primary-subtle.text-primary,
[data-bs-theme="dark"] .badge.bg-soft-primary.text-primary {
    color: #60A5FA !important;
    background: linear-gradient(135deg, rgba(30,58,138,.45), rgba(30,64,175,.55)) !important;
    border-color: #1D4ED8 !important;
    box-shadow: 0 0 0 1px rgba(30,58,138,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(96,165,250,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* SVG inside subtle badges — sharpen strokes */
[data-bs-theme="dark"] .badge[class*="-subtle"] svg,
[data-bs-theme="dark"] .badge[class*="bg-soft-"] svg {
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
    flex-shrink: 0;
}

/* Toggle badge — slightly firmer padding */
[data-bs-theme="dark"] .toggle-badge {
    padding: 0.4em 0.75em !important;
    border-width: 1.5px !important;
    letter-spacing: 0.02em;
}

/* -- Dark: bg tint helpers ------------------------------------------------ */
[data-bs-theme="dark"] .bg-primary.bg-opacity-10,   [data-bs-theme="dark"] .bg-primary-subtle   { background-color: rgba(59,130,246,.20) !important; }
[data-bs-theme="dark"] .bg-success.bg-opacity-10,   [data-bs-theme="dark"] .bg-success-subtle   { background-color: rgba(52,211,153,.20) !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle { background-color: rgba(16, 185, 129, .08) !important; background-image: none !important; }
[data-bs-theme="dark"] .bg-danger.bg-opacity-10,    [data-bs-theme="dark"] .bg-danger-subtle    { background-color: rgba(248,113,113,.20) !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle { background-color: rgba(239, 68, 68, .08) !important; background-image: none !important; }
[data-bs-theme="dark"] .bg-warning.bg-opacity-10,   [data-bs-theme="dark"] .bg-warning-subtle   { background-color: rgba(251,191,36,.20) !important; }
[data-bs-theme="dark"] .bg-info.bg-opacity-10,      [data-bs-theme="dark"] .bg-info-subtle      { background-color: rgba(34,211,238,.20) !important; }
[data-bs-theme="dark"] .bg-secondary.bg-opacity-10, [data-bs-theme="dark"] .bg-secondary-subtle { background-color: rgba(167,139,250,.20) !important; }

/* -- Dark: card-icon tints ------------------------------------------------ */
[data-bs-theme="dark"] .card-icon.bg-success-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-success {
    background: linear-gradient(135deg, rgba(5,150,105,.32), rgba(4,120,87,.42)) !important;
    color: #059669 !important;
    border: 1px solid rgba(5,150,105,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(5,150,105,.18);
}
[data-bs-theme="dark"] .card-icon.bg-danger-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-danger {
    background: linear-gradient(135deg, rgba(220,38,38,.28), rgba(185,28,28,.38)) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(220,38,38,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(220,38,38,.18);
}
[data-bs-theme="dark"] .card-icon.bg-warning-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-warning {
    background: linear-gradient(135deg, rgba(217,119,6,.32), rgba(146,64,14,.42)) !important;
    color: #D97706 !important;
    border: 1px solid rgba(217,119,6,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(217,119,6,.18);
}
[data-bs-theme="dark"] .card-icon.bg-info-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-info {
    background: linear-gradient(135deg, rgba(8,145,178,.32), rgba(14,116,144,.42)) !important;
    color: #0891B2 !important;
    border: 1px solid rgba(8,145,178,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(8,145,178,.18);
}
[data-bs-theme="dark"] .card-icon.bg-primary-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-primary {
    background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(30,64,175,.42)) !important;
    color: #2563EB !important;
    border: 1px solid rgba(37,99,235,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(37,99,235,.18);
}
[data-bs-theme="dark"] .card-icon.bg-secondary-subtle,
[data-bs-theme="dark"] .card-icon.bg-soft-secondary {
    background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(91,33,182,.42)) !important;
    color: #A78BFA !important;
    border: 1px solid rgba(167,139,250,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(196,181,253,.15);
}

/* Card-icons defined via inline style="background:..." — override by hue.
   Purple family (#6610f2/#6f42c1) → secondary jewel */
[data-bs-theme="dark"] .card-icon[style*="102,16,242"],
[data-bs-theme="dark"] .card-icon[style*="#6610f2"],
[data-bs-theme="dark"] .card-icon[style*="111,66,193"],
[data-bs-theme="dark"] .card-icon[style*="#6f42c1"] {
    background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(91,33,182,.42)) !important;
    color: #A78BFA !important;
    border: 1px solid rgba(167,139,250,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(196,181,253,.15);
}
[data-bs-theme="dark"] .card-icon[style*="253,126,20"],
[data-bs-theme="dark"] .card-icon[style*="#fd7e14"] {
    background: linear-gradient(135deg, rgba(217,119,6,.32), rgba(146,64,14,.42)) !important;
    color: #D97706 !important;
    border: 1px solid rgba(217,119,6,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(217,119,6,.18);
}
[data-bs-theme="dark"] .card-icon[style*="13,110,253"],
[data-bs-theme="dark"] .card-icon[style*="#0a58ca"],
[data-bs-theme="dark"] .card-icon[style*="#0d6efd"] {
    background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(30,64,175,.42)) !important;
    color: #2563EB !important;
    border: 1px solid rgba(37,99,235,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(37,99,235,.18);
}
[data-bs-theme="dark"] .card-icon[style*="32,201,151"],
[data-bs-theme="dark"] .card-icon[style*="#20c997"] {
    background: linear-gradient(135deg, rgba(5,150,105,.32), rgba(4,120,87,.42)) !important;
    color: #059669 !important;
    border: 1px solid rgba(5,150,105,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(5,150,105,.18);
}
[data-bs-theme="dark"] .card-icon[style*="214,51,132"],
[data-bs-theme="dark"] .card-icon[style*="#d63384"] {
    background: linear-gradient(135deg, rgba(190,24,93,.32), rgba(157,23,77,.42)) !important;
    color: #BE185D !important;
    border: 1px solid rgba(190,24,93,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(190,24,93,.18);
}

/* Card-icon SVG — crisper strokes on dark backdrops */
[data-bs-theme="dark"] .card-icon svg {
    stroke-width: 2.25 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* -- Light: card-icon tints — dùng y hệt dark mode cho đồng nhất thị giác -- */
:root:not([data-bs-theme="dark"]) .card-icon.bg-success-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-success {
    background: linear-gradient(135deg, rgba(5,150,105,.32), rgba(4,120,87,.42)) !important;
    color: #059669 !important;
    border: 1px solid rgba(5,150,105,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(5,150,105,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon.bg-danger-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-danger {
    background: linear-gradient(135deg, rgba(220,38,38,.28), rgba(185,28,28,.38)) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(220,38,38,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(220,38,38,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon.bg-warning-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-warning {
    background: linear-gradient(135deg, rgba(217,119,6,.32), rgba(146,64,14,.42)) !important;
    color: #D97706 !important;
    border: 1px solid rgba(217,119,6,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(217,119,6,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon.bg-info-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-info {
    background: linear-gradient(135deg, rgba(8,145,178,.32), rgba(14,116,144,.42)) !important;
    color: #0891B2 !important;
    border: 1px solid rgba(8,145,178,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(8,145,178,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon.bg-primary-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-primary {
    background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(30,64,175,.42)) !important;
    color: #2563EB !important;
    border: 1px solid rgba(37,99,235,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(37,99,235,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon.bg-secondary-subtle,
:root:not([data-bs-theme="dark"]) .card-icon.bg-soft-secondary {
    background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(91,33,182,.42)) !important;
    color: #A78BFA !important;
    border: 1px solid rgba(167,139,250,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(196,181,253,.15);
}

/* Light: icon với inline style — override theo hue, giống dark mode */
:root:not([data-bs-theme="dark"]) .card-icon[style*="102,16,242"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#6610f2"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="111,66,193"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#6f42c1"] {
    background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(91,33,182,.42)) !important;
    color: #A78BFA !important;
    border: 1px solid rgba(167,139,250,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(196,181,253,.15);
}
:root:not([data-bs-theme="dark"]) .card-icon[style*="253,126,20"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#fd7e14"] {
    background: linear-gradient(135deg, rgba(217,119,6,.32), rgba(146,64,14,.42)) !important;
    color: #D97706 !important;
    border: 1px solid rgba(217,119,6,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(217,119,6,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon[style*="13,110,253"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#0a58ca"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#0d6efd"] {
    background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(30,64,175,.42)) !important;
    color: #2563EB !important;
    border: 1px solid rgba(37,99,235,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(37,99,235,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon[style*="32,201,151"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#20c997"] {
    background: linear-gradient(135deg, rgba(5,150,105,.32), rgba(4,120,87,.42)) !important;
    color: #059669 !important;
    border: 1px solid rgba(5,150,105,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(5,150,105,.18);
}
:root:not([data-bs-theme="dark"]) .card-icon[style*="214,51,132"],
:root:not([data-bs-theme="dark"]) .card-icon[style*="#d63384"] {
    background: linear-gradient(135deg, rgba(190,24,93,.32), rgba(157,23,77,.42)) !important;
    color: #BE185D !important;
    border: 1px solid rgba(190,24,93,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(190,24,93,.18);
}

/* Light: card-icon SVG — nét sắc giống dark mode */
:root:not([data-bs-theme="dark"]) .card-icon svg {
    stroke-width: 2.25 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
:root:not([data-bs-theme="dark"]) .card .card-icon { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }

/* -- Dark: alerts --------------------------------------------------------- */
[data-bs-theme="dark"] .alert-primary { background: rgba(37,99,235,.14);  color: #2563EB; font-weight: 600; }
[data-bs-theme="dark"] .alert-success { background: rgba(5,150,105,.14);  color: #059669; font-weight: 600; }
[data-bs-theme="dark"] .alert-danger  { background: rgba(220,38,38,.14);  color: #DC2626; font-weight: 600; }
[data-bs-theme="dark"] .alert-warning { background: rgba(217,119,6,.14);  color: #D97706; font-weight: 600; }
[data-bs-theme="dark"] .alert-info    { background: rgba(8,145,178,.14);  color: #0891B2; font-weight: 600; }

/* -- Dark: dropdown/nav/pagination/topbar hover --------------------------- */
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus     { background: rgba(var(--dx-primary-rgb), .08); }
[data-bs-theme="dark"] .nav-pills .nav-link:hover:not(.active) { background: rgba(var(--dx-primary-rgb), .08); }
[data-bs-theme="dark"] .topbar-link:hover       { background: rgba(var(--dx-primary-rgb), .08); }
[data-bs-theme="dark"] .topbar-mobile-icon:hover { background: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(var(--dx-primary-rgb), .08); }
[data-bs-theme="dark"] .notification-item:hover  { background: rgba(var(--dx-primary-rgb), .06); }
[data-bs-theme="dark"] .notification-item.unread { background: rgba(var(--dx-primary-rgb), .06); }

/* -- Dark: project members panel (add & update modals) -------------------- */
[data-bs-theme="dark"] #addProjectMembersPanel,
[data-bs-theme="dark"] #updateProjectMembersPanel {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border: 1px solid rgba(148,163,184,.18);
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 4px 8px rgba(0,0,0,.35),
        0 12px 20px -4px rgba(0,0,0,.45),
        0 24px 40px -12px rgba(0,0,0,.5) !important;
}
[data-bs-theme="dark"] #addProjectMembersPanel h6,
[data-bs-theme="dark"] #updateProjectMembersPanel h6 {
    color: #F1F5F9;
}
[data-bs-theme="dark"] #addProjectMembersPanel .border-bottom,
[data-bs-theme="dark"] #updateProjectMembersPanel .border-bottom,
[data-bs-theme="dark"] #addInlineMembersResults .border-bottom,
[data-bs-theme="dark"] #inlineMembersResults .border-bottom {
    border-color: rgba(148,163,184,.12) !important;
}
[data-bs-theme="dark"] #addInlineMembersResults .fw-semibold,
[data-bs-theme="dark"] #inlineMembersResults .fw-semibold {
    color: #E2E8F0;
}
[data-bs-theme="dark"] #addInlineMembersResults .text-muted,
[data-bs-theme="dark"] #inlineMembersResults .text-muted {
    color: #94A3B8 !important;
}
[data-bs-theme="dark"] .progress                { background: var(--dx-gray-800); }
[data-bs-theme="dark"] .tag, [data-bs-theme="dark"] .chip { background: rgba(var(--dx-primary-rgb), .1); }
[data-bs-theme="dark"] .tooltip-inner           { background: #334155; }

/* -- Dropdowns (profile + notifications) — khớp màu dropdown Chọn dự án */
.profile-dropdown-menu,
.main-topbar .dropdown-menu-lg {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 0.375rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 2px 4px rgba(0,0,0,.3),
        0 8px 16px -4px rgba(0,0,0,.45),
        0 20px 32px -12px rgba(0,0,0,.55) !important;
}
.profile-dropdown-menu .border-top,
.main-topbar .dropdown-menu-lg .border-top { border-color: rgba(148,163,184,.12) !important; }

.profile-dropdown-menu { min-width: 14rem !important; max-width: 15rem !important; }
.profile-dropdown-menu h6 { color: #F1F5F9; }
.profile-dropdown-menu .profile-link {
    display: flex; align-items: center;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    font-size: 1rem; font-weight: 500;
    color: #CBD5E1;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-dropdown-menu .profile-link svg { opacity: .8; }
.profile-dropdown-menu .profile-link:hover,
.profile-dropdown-menu .profile-link:focus {
    background: rgba(59,130,246,.12) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.profile-dropdown-menu .profile-link:hover svg,
.profile-dropdown-menu .profile-link:focus svg { opacity: 1; color: #7DD3FC; }

.main-topbar .dropdown-menu-lg { min-width: 320px !important; max-width: 340px !important; }
.main-topbar .dropdown-menu-lg .notification-item,
.main-topbar .dropdown-menu-lg .dropdown-item {
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    color: #CBD5E1;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-topbar .dropdown-menu-lg h6,
.main-topbar .dropdown-menu-lg h5,
.main-topbar .dropdown-menu-lg .notification-item strong { color: #F1F5F9 !important; }
.main-topbar .dropdown-menu-lg small,
.main-topbar .dropdown-menu-lg .text-muted { color: #94A3B8 !important; }
.main-topbar .dropdown-menu-lg .notification-item:hover,
.main-topbar .dropdown-menu-lg .dropdown-item:hover,
.main-topbar .dropdown-menu-lg .dropdown-item:focus {
    background: rgba(59,130,246,.12) !important;
    color: #ffffff !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .profile-dropdown-menu,
[data-bs-theme="dark"] .main-topbar .dropdown-menu-lg {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    background-image: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 2px 4px rgba(0,0,0,.3),
        0 8px 16px -4px rgba(0,0,0,.45),
        0 20px 32px -12px rgba(0,0,0,.55) !important;
}

/* -- Dark: collapsed sidebar flyout (submenu) — đồng bộ dropdown Chọn dự án */
:root[data-sidebar="sm"] #main-sidebar .nav-menu-sub,
:root[data-sidebar="small"] #main-sidebar .nav-menu-sub,
html[data-sidebar-size="sm"] #main-sidebar .nav-menu-sub {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 0.375rem !important;
    padding: 6px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 2px 4px rgba(0,0,0,.3),
        0 8px 16px -4px rgba(0,0,0,.45),
        0 20px 32px -12px rgba(0,0,0,.55) !important;
}
/* Bootstrap collapse: khôi phục transition cho .collapsing
   (app.css built đang thiếu rule mặc định, nên collapse bị giật) */
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: height;
}
@media (prefers-reduced-motion: reduce) {
    .collapsing { transition: none; }
}

/* Kill collapse animation in small mode (avoids perceived delay) */
:root[data-sidebar="sm"] #main-sidebar .collapse,
:root[data-sidebar="small"] #main-sidebar .collapse,
html[data-sidebar-size="sm"] #main-sidebar .collapse,
:root[data-sidebar="sm"] #main-sidebar .collapsing,
:root[data-sidebar="small"] #main-sidebar .collapsing,
html[data-sidebar-size="sm"] #main-sidebar .collapsing { transition: none !important; }


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

/* -- Animations ----------------------------------------------------------- */
[data-bs-theme] { transition: background-color 0.3s ease, color 0.3s ease; }
@keyframes kgpDropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kgpFadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.page-wrapper > .container-fluid { animation: kgpFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* -- Hover lift ----------------------------------------------------------- */
.hover-lift { transition: var(--kgp-transition); }
.hover-lift:hover { box-shadow: var(--kgp-shadow-sm); }

/* -- Misc badges/tags ----------------------------------------------------- */
.status-badge { border-radius: 9999px; padding: 0.25em 0.75em; font-weight: 500; }
.tag, .chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25em 0.625em;
    border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500;
    background: rgba(var(--dx-primary-rgb), .08);
    color: var(--dx-primary);
}
.placeholder { border-radius: var(--kgp-radius-sm); opacity: 0.15; }

/* -- Custom scrollbar (hide native, use virtual fixed bar) --------------- */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

#kgp-fake-scrollbar {
    position: fixed;
    top: 46px; right: 2px; bottom: 4px;
    width: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1040;
}
#kgp-fake-scrollbar.visible { opacity: 1; pointer-events: auto; }
#kgp-fake-scrollbar .kgp-fake-thumb {
    position: absolute;
    left: 1px; right: 1px;
    background: rgba(255,255,255,.8);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.1);
    cursor: pointer;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
#kgp-fake-scrollbar .kgp-fake-thumb:hover,
#kgp-fake-scrollbar.dragging .kgp-fake-thumb {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.2), 0 2px 6px rgba(15,23,42,.15);
}
[data-bs-theme="dark"] #kgp-fake-scrollbar .kgp-fake-thumb {
    background: rgba(255,255,255,.4);
    box-shadow: none;
}
[data-bs-theme="dark"] #kgp-fake-scrollbar .kgp-fake-thumb:hover,
[data-bs-theme="dark"] #kgp-fake-scrollbar.dragging .kgp-fake-thumb {
    background: rgba(255,255,255,.65);
}

/* ==========================================================================
   FINAL OVERRIDE — Toggle badges (API Bật/Tắt, Trạng thái Hoạt động/Tạm dừng)
   Tone Emerald/Red dịu mắt, background tint 8%, border mềm 35%.
   ========================================================================== */
html body span[class~="badge"][class~="bg-success-subtle"],
html body span[class~="badge"][class~="bg-success-subtle"][class~="text-success"],
html body span[class~="badge"][class~="bg-success-subtle"][class~="border-success-subtle"],
html body .badge.bg-success-subtle,
html body .badge.bg-success-subtle.text-success,
html body .badge.bg-success-subtle.border-success-subtle {
    background: rgba(0, 193, 138, .06) !important;
    background-color: rgba(0, 193, 138, .06) !important;
    background-image: none !important;
    border-color: rgba(0, 193, 138, .35) !important;
    color: #00c18a !important;
}
html body span[class~="badge"][class~="bg-success-subtle"] svg,
html body span[class~="badge"][class~="bg-success-subtle"] svg *,
html body .badge.bg-success-subtle svg,
html body .badge.bg-success-subtle svg * {
    color: #00c18a !important;
    stroke: #00c18a !important;
    fill: none !important;
    stroke-width: 2.25 !important;
}
html body span[class~="badge"][class~="bg-danger-subtle"],
html body span[class~="badge"][class~="bg-danger-subtle"][class~="text-danger"],
html body span[class~="badge"][class~="bg-danger-subtle"][class~="border-danger-subtle"],
html body .badge.bg-danger-subtle,
html body .badge.bg-danger-subtle.text-danger,
html body .badge.bg-danger-subtle.border-danger-subtle {
    background: rgba(220, 38, 38, .06) !important;
    background-color: rgba(220, 38, 38, .06) !important;
    background-image: none !important;
    border-color: rgba(220, 38, 38, .35) !important;
    color: #B91C1C !important;
}
html body span[class~="badge"][class~="bg-danger-subtle"] svg,
html body span[class~="badge"][class~="bg-danger-subtle"] svg *,
html body .badge.bg-danger-subtle svg,
html body .badge.bg-danger-subtle svg * {
    color: #B91C1C !important;
    stroke: #B91C1C !important;
    fill: none !important;
    stroke-width: 2.25 !important;
}
html body .toggle-badge.bg-success-subtle:hover,
html body .badge.bg-success-subtle.toggle-badge:hover {
    background-color: rgba(0, 193, 138, .10) !important;
    border-color: rgba(0, 193, 138, .55) !important;
}
html body .toggle-badge.bg-danger-subtle:hover,
html body .badge.bg-danger-subtle.toggle-badge:hover {
    background-color: rgba(220, 38, 38, .10) !important;
    border-color: rgba(220, 38, 38, .55) !important;
}

/* ==========================================================================
   6. DARK MODE: UNIFIED NAVY OVERRIDES
   Catch every light surface (btn-white, btn-light, bg-white, bg-light,
   bg-body) and snap it to the card navy gradient. Sidebar excluded.
   ========================================================================== */

/* -- Dark: bg utility overrides ------------------------------------------- */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-body-secondary {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    color: #E2E8F0 !important;
    border-color: rgba(148,163,184,.18);
}

/* -- Dark: light/white buttons → navy surface ----------------------------- */
[data-bs-theme="dark"] .btn-white,
[data-bs-theme="dark"] .btn-light {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    background-color: #0C1829 !important;
    border-color: rgba(148,163,184,.18) !important;
    color: #E2E8F0 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 6px rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .btn-white:hover,
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-white:focus,
[data-bs-theme="dark"] .btn-light:focus {
    background: linear-gradient(160deg, #102038 0%, #0C1829 55%, #081221 100%) !important;
    background-color: #102038 !important;
    border-color: rgba(96,165,250,.28) !important;
    color: #FFFFFF !important;
}
[data-bs-theme="dark"] .btn-white .text-muted,
[data-bs-theme="dark"] .btn-light .text-muted {
    color: #CBD5E1 !important;
}

/* -- Dark: card specificity lift (beats late-loading admin.css) ----------- */
[data-bs-theme="dark"] .page-wrapper .card,
[data-bs-theme="dark"] .container-fluid .card,
[data-bs-theme="dark"] .main-content .card {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    border-color: rgba(96,165,250,.14) !important;
}
[data-bs-theme="dark"] .page-wrapper .card-header,
[data-bs-theme="dark"] .container-fluid .card-header,
[data-bs-theme="dark"] .main-content .card-header,
[data-bs-theme="dark"] .page-wrapper .card-footer,
[data-bs-theme="dark"] .container-fluid .card-footer,
[data-bs-theme="dark"] .main-content .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(148,163,184,.10) !important;
}

/* -- Dark: sticky table head / thead.bg-light ----------------------------- */
[data-bs-theme="dark"] thead.bg-light,
[data-bs-theme="dark"] .table thead.bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table > :not(caption) > * > .bg-light {
    background: linear-gradient(160deg, #0C1829 0%, #081221 55%, #050B16 100%) !important;
    color: #CBD5E1 !important;
}
[data-bs-theme="dark"] thead.bg-light th,
[data-bs-theme="dark"] .table thead.bg-light th {
    background: transparent !important;
    color: #CBD5E1 !important;
    border-bottom-color: rgba(148,163,184,.14) !important;
}

/* -- Dark: dropdown-item.active / bg-light combo -------------------------- */
[data-bs-theme="dark"] .dropdown-item.bg-light,
[data-bs-theme="dark"] .dropdown-item.active.bg-light {
    background: rgba(37,99,235,.18) !important;
    color: #93C5FD !important;
}

/* -- Dark: notice / extra-cost card inner shell --------------------------- */
[data-bs-theme="dark"] .border.rounded {
    border-color: rgba(148,163,184,.18) !important;
}
[data-bs-theme="dark"] form.border.rounded,
[data-bs-theme="dark"] .dashboard-extra-cost-table {
    background: transparent !important;
}

/* ── Light mode: modern AI-app surface (Linear/Notion/Claude vibe) ──────
   Off-white cool tint + 1px border tinh tế, không gradient loè, không bệch.
   Chữ slate-700, hover slate-900 trên nền slate-100. */
:root:not([data-bs-theme="dark"]) #main-sidebar.main-sidebar {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-right: 1px solid rgba(15,23,42,.07) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px -12px rgba(15,23,42,.06) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar.main-sidebar::before,
:root:not([data-bs-theme="dark"]) #main-sidebar.main-sidebar::after { display: none !important; }

/* Sidebar text — flip sang tông tối */
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-menu-title {
    color: rgba(15,23,42,.50) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-menu-title.active { color: #0F172A !important; }
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link,
:root:not([data-bs-theme="dark"]) #main-sidebar .nav-menu-sub .nav-link {
    color: #475569 !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link:hover,
:root:not([data-bs-theme="dark"]) #main-sidebar .nav-menu-sub .nav-link:hover {
    color: var(--dx-primary) !important;
    background: transparent !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover .icons,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover .content,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .sidebar-toggle-item .nav-link:hover .icons {
    color: var(--dx-primary) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .nav-menu-sub .nav-link:hover::before,
:root:not([data-bs-theme="dark"]) #main-sidebar .nav-menu-sub .nav-link.active::before {
    border-color: var(--dx-primary) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link.active,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"],
:root:not([data-bs-theme="dark"]) #main-sidebar .nav-menu-sub .nav-link.active {
    color: var(--dx-primary) !important;
    background: transparent !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link.active .icons,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] .icons {
    color: var(--dx-primary) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-brand,
:root:not([data-bs-theme="dark"]) #main-sidebar .sidebar-brand-name {
    color: #0F172A !important;
}
/* Tên + thông tin avatar (profile-identity) — lightmode */
:root:not([data-bs-theme="dark"]) #main-sidebar .profile-identity,
:root:not([data-bs-theme="dark"]) #main-sidebar .profile-identity h6,
:root:not([data-bs-theme="dark"]) .main-topbar .profile-identity,
:root:not([data-bs-theme="dark"]) .main-topbar .profile-identity h6 {
    color: #0F172A !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .profile-identity p,
:root:not([data-bs-theme="dark"]) #main-sidebar .profile-identity span,
:root:not([data-bs-theme="dark"]) .main-topbar .profile-identity p,
:root:not([data-bs-theme="dark"]) .main-topbar .profile-identity span {
    color: var(--dx-gray-600) !important;
}
/* Logo: giữ nguyên bên trái 40%, đen 60% bên phải (overlay cùng ảnh với
   filter brightness(0) + mask gradient) — chỉ áp dụng ở lightmode */
.brand-logo-dark-overlay { opacity: 0 !important; }
:root:not([data-bs-theme="dark"]) .brand-logo-dark-overlay {
    opacity: 1 !important;
    filter: brightness(0) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 30%, #000 100%) !important;
            mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 30%, #000 100%) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .sidebar-toggle-btn { color: rgba(15,23,42,.55) !important; }

/* Flyout submenu khi sidebar thu nhỏ — light */
:root:not([data-bs-theme="dark"])[data-sidebar="sm"] #main-sidebar .nav-menu-sub,
:root:not([data-bs-theme="dark"])[data-sidebar="small"] #main-sidebar .nav-menu-sub,
html:not([data-bs-theme="dark"])[data-sidebar-size="sm"] #main-sidebar .nav-menu-sub {
    background: #FFFFFF !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px -12px rgba(15,23,42,.12),
        0 20px 40px -16px rgba(15,23,42,.10) !important;
}
:root:not([data-bs-theme="dark"])[data-sidebar="sm"] #main-sidebar .nav-menu-sub .nav-link,
:root:not([data-bs-theme="dark"])[data-sidebar="small"] #main-sidebar .nav-menu-sub .nav-link,
html:not([data-bs-theme="dark"])[data-sidebar-size="sm"] #main-sidebar .nav-menu-sub .nav-link {
    color: #475569 !important;
}
:root:not([data-bs-theme="dark"])[data-sidebar="sm"] #main-sidebar .nav-menu-sub .nav-link:hover,
:root:not([data-bs-theme="dark"])[data-sidebar="small"] #main-sidebar .nav-menu-sub .nav-link:hover,
html:not([data-bs-theme="dark"])[data-sidebar-size="sm"] #main-sidebar .nav-menu-sub .nav-link:hover {
    color: var(--dx-primary) !important;
    background: transparent !important;
}
:root:not([data-bs-theme="dark"])[data-sidebar="sm"] #main-sidebar .nav-menu-sub .nav-link.active,
:root:not([data-bs-theme="dark"])[data-sidebar="small"] #main-sidebar .nav-menu-sub .nav-link.active,
html:not([data-bs-theme="dark"])[data-sidebar-size="sm"] #main-sidebar .nav-menu-sub .nav-link.active {
    color: var(--dx-primary) !important;
    background: transparent !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .sidebar-toggle-btn:hover {
    color: #0F172A !important; background: rgba(15,23,42,.05) !important;
}

/* Topbar — trắng sạch với border mảnh */
:root:not([data-bs-theme="dark"]) .main-topbar {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:root:not([data-bs-theme="dark"]) .main-topbar::before,
:root:not([data-bs-theme="dark"]) .main-topbar::after { display: none !important; }
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link svg,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link i,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-mobile-nav .topbar-mobile-icon,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-mobile-nav .topbar-mobile-icon svg,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-mobile-nav .topbar-mobile-icon i {
    color: #475569 !important;
}
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link:hover,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link:hover svg,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link:hover i,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-mobile-nav .topbar-mobile-icon:hover {
    color: #0F172A !important;
    background: rgba(15,23,42,.05) !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover .icons .group-logo-icon,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link.active .icons .group-logo-icon,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] .icons .group-logo-icon,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-link .group-logo-icon,
:root:not([data-bs-theme="dark"]) .main-topbar .topbar-mobile-nav .topbar-mobile-icon .group-logo-icon,
:root:not([data-bs-theme="dark"]) .table .group-logo-icon,
:root:not([data-bs-theme="dark"]) td .group-logo-icon,
:root:not([data-bs-theme="dark"]) .card-icon.group-logo-icon,
:root:not([data-bs-theme="dark"]) .card-icon.group-logo-icon svg {
    color: var(--dx-primary) !important;
    opacity: 1 !important;
}
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover .icons .group-logo-icon svg,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link:hover .icons .group-logo-icon svg *,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link.active .icons .group-logo-icon svg,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link.active .icons .group-logo-icon svg *,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] .icons .group-logo-icon svg,
:root:not([data-bs-theme="dark"]) #main-sidebar .navbar-nav-menu .nav-item .nav-link[aria-expanded="true"] .icons .group-logo-icon svg *,
:root:not([data-bs-theme="dark"]) .table .group-logo-icon svg,
:root:not([data-bs-theme="dark"]) .table .group-logo-icon svg *,
:root:not([data-bs-theme="dark"]) td .group-logo-icon svg,
:root:not([data-bs-theme="dark"]) td .group-logo-icon svg *,
:root:not([data-bs-theme="dark"]) .card-icon.group-logo-icon svg,
:root:not([data-bs-theme="dark"]) .card-icon.group-logo-icon svg * {
    stroke: var(--dx-primary) !important;
    stroke-width: 1.9 !important;
}

/* Table header — nền cool tint nhẹ, chữ đậm hơn để nổi */
:root:not([data-bs-theme="dark"]) .table thead th,
:root:not([data-bs-theme="dark"]) table.dataTable thead th,
:root:not([data-bs-theme="dark"]) table.dataTable thead td,
:root:not([data-bs-theme="dark"]) .dataTables_scrollHead table.dataTable thead th,
:root:not([data-bs-theme="dark"]) .dataTables_scrollHead table.dataTable thead td {
    background-image: none !important;
    background-color: #FFFFFF !important;
    color: #334155 !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
:root:not([data-bs-theme="dark"]) .table thead.bg-light,
:root:not([data-bs-theme="dark"]) .table thead.bg-light th {
    background-image: none !important;
    background-color: #FFFFFF !important;
    color: #334155 !important;
}

/* ── Light mode: body + card surface (mirror darkmode pattern) ──
   Dùng cùng palette #defdf9 (mint) ↔ #e0d1e2 (lavender), đặt trên nền
   cool near-white với radial glows + grid line overlay như darkmode. */
:root:not([data-bs-theme="dark"]) body {
    background-color: #F8FAFC !important;
    background-image:
        radial-gradient(900px 700px at 12% -8%, rgba(37,99,235,.06), transparent 60%),
        radial-gradient(1000px 800px at 92% 18%, rgba(59,130,246,.05), transparent 62%),
        radial-gradient(800px 700px at 50% 120%, rgba(96,165,250,.05), transparent 65%),
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 32px 32px, 32px 32px !important;
    background-attachment: fixed !important;
}
:root:not([data-bs-theme="dark"]) .page-wrapper,
:root:not([data-bs-theme="dark"]) .main-content {
    background-color: transparent !important;
}

:root:not([data-bs-theme="dark"]) .card {
    background: #FFFFFF !important;
    border-color: rgba(15,23,42,.08) !important;
    color: #1E293B !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 4px 14px rgba(15,23,42,.05),
        0 10px 28px -12px rgba(15,23,42,.06) !important;
}
:root:not([data-bs-theme="dark"]) .card h1,
:root:not([data-bs-theme="dark"]) .card h2,
:root:not([data-bs-theme="dark"]) .card h3,
:root:not([data-bs-theme="dark"]) .card h4,
:root:not([data-bs-theme="dark"]) .card h5,
:root:not([data-bs-theme="dark"]) .card h6,
:root:not([data-bs-theme="dark"]) .card .h1,
:root:not([data-bs-theme="dark"]) .card .h2,
:root:not([data-bs-theme="dark"]) .card .h3,
:root:not([data-bs-theme="dark"]) .card .h4,
:root:not([data-bs-theme="dark"]) .card .h5,
:root:not([data-bs-theme="dark"]) .card .h6 {
    color: #0F172A !important;
}
:root:not([data-bs-theme="dark"]) .card .metric-value,
:root:not([data-bs-theme="dark"]) .card .metric-value.neutral {
    color: #0F172A !important;
    text-shadow: none !important;
}
:root:not([data-bs-theme="dark"]) .card .metric-value.positive {
    color: #059669 !important;
    text-shadow: none !important;
}
:root:not([data-bs-theme="dark"]) .card .metric-value.negative {
    color: #DC2626 !important;
    text-shadow: none !important;
}
:root:not([data-bs-theme="dark"]) .card:hover {
    border-color: rgba(15,23,42,.10) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 6px 18px rgba(15,23,42,.07),
        0 14px 32px -14px rgba(15,23,42,.08) !important;
}
:root:not([data-bs-theme="dark"]) .card-header,
:root:not([data-bs-theme="dark"]) .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(15,23,42,.07) !important;
}

/* ── Light mode: flip chữ trắng → tối cho dễ đọc trên nền sáng ── */
:root:not([data-bs-theme="dark"]) .card-header .card-title {
    color: #0F172A !important;
    text-shadow: none !important;
}
:root:not([data-bs-theme="dark"]) .card .card-title,
:root:not([data-bs-theme="dark"]) .card h5,
:root:not([data-bs-theme="dark"]) .card h6.card-title {
    color: #0F172A !important;
    text-shadow: none !important;
}
:root:not([data-bs-theme="dark"]) .card h5.text-success,
:root:not([data-bs-theme="dark"]) .card .card-title.text-success,
:root:not([data-bs-theme="dark"]) .card h6.card-title.text-success {
    color: #059669 !important;
}
:root:not([data-bs-theme="dark"]) .card h5.text-danger,
:root:not([data-bs-theme="dark"]) .card .card-title.text-danger,
:root:not([data-bs-theme="dark"]) .card h6.card-title.text-danger {
    color: #DC2626 !important;
}
:root:not([data-bs-theme="dark"]) .card .card-subtitle,
:root:not([data-bs-theme="dark"]) .card .card-body .text-muted {
    color: var(--dx-gray-600) !important;
}
:root:not([data-bs-theme="dark"]) .page-heading h6 {
    color: #0F172A !important;
    opacity: 1 !important;
}

/* Topbar dropdowns (profile + notification) — nền sáng ⇒ chữ tối */
:root:not([data-bs-theme="dark"]) .profile-dropdown-menu,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg {
    background: #FFFFFF !important;
    border-color: rgba(15,23,42,.08) !important;
}
:root:not([data-bs-theme="dark"]) .profile-dropdown-menu .profile-link,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .notification-item,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .dropdown-item {
    color: #334155 !important;
}
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg h6,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg h5,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .notification-item strong {
    color: #0F172A !important;
}
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg small,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .text-muted {
    color: var(--dx-gray-500) !important;
}
:root:not([data-bs-theme="dark"]) .profile-dropdown-menu .profile-link:hover,
:root:not([data-bs-theme="dark"]) .profile-dropdown-menu .profile-link:focus,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .notification-item:hover,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .dropdown-item:hover,
:root:not([data-bs-theme="dark"]) .main-topbar .dropdown-menu-lg .dropdown-item:focus {
    background: rgba(var(--dx-primary-rgb), .08) !important;
    color: #0F172A !important;
}

/* Light mode: filter column dropdowns — nền trắng đục, border + shadow rõ
   để không bị "tàng hình" trên card trắng */
:root:not([data-bs-theme="dark"]) .th-group-filter-dropdown {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #1E293B !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    box-shadow:
        0 0 0 1px rgba(15,23,42,.03),
        0 4px 10px rgba(15,23,42,.08),
        0 14px 28px -10px rgba(15,23,42,.14),
        0 24px 40px -18px rgba(30,58,138,.16) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:root:not([data-bs-theme="dark"]) .th-group-filter-item { color: #334155 !important; }
:root:not([data-bs-theme="dark"]) .th-group-filter-item:hover {
    background: rgba(var(--dx-primary-rgb), .08) !important;
    color: #0F172A !important;
}

/* -- Card-icon: bỏ đổ bóng ngoài, giữ inset highlight nhẹ --------------- */
.card .card-icon,
[data-bs-theme="dark"] .card .card-icon,
:root:not([data-bs-theme="dark"]) .card .card-icon {
    box-shadow: none !important;
}
.card-icon.bg-success-subtle,       .card-icon.bg-soft-success,
.card-icon.bg-danger-subtle,        .card-icon.bg-soft-danger,
.card-icon.bg-warning-subtle,       .card-icon.bg-soft-warning,
.card-icon.bg-info-subtle,          .card-icon.bg-soft-info,
.card-icon.bg-primary-subtle,       .card-icon.bg-soft-primary,
.card-icon.bg-secondary-subtle,     .card-icon.bg-soft-secondary,
.card-icon[style*="102,16,242"],    .card-icon[style*="#6610f2"],
.card-icon[style*="111,66,193"],    .card-icon[style*="#6f42c1"],
.card-icon[style*="253,126,20"],    .card-icon[style*="#fd7e14"],
.card-icon[style*="13,110,253"],    .card-icon[style*="#0a58ca"],
.card-icon[style*="#0d6efd"],
.card-icon[style*="32,201,151"],    .card-icon[style*="#20c997"],
.card-icon[style*="214,51,132"],    .card-icon[style*="#d63384"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* -- Mobile --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .card-body   { padding: 1rem; }
    .card-header { padding: 1rem; }
    .page-heading h6 { font-size: 0.95rem; }
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}