/* ============================================================
 * Zender — UI v4 "MIDNIGHT TOSCA" (May 7 2026)
 * Total redesign: dark sidebar, neon accents, glass topbar,
 * gradient stat cards, vibrant active states.
 * Loaded LAST, overrides v1/v2/v3.
 * ============================================================ */

:root {
    --z-bg: #f0f4f8;
    --z-surface: #ffffff;
    --z-ink: #0f1b2e;
    --z-ink-2: #2d3e52;
    --z-mute: #6b7c8e;
    --z-border: #e1e8ee;

    --z-side-bg: #0d1b2a;
    --z-side-bg-2: #14253a;
    --z-side-ink: #c8d4e4;
    --z-side-mute: #6b7d92;
    --z-side-border: rgba(255,255,255,0.06);

    --z-neon: #2dd4bf;
    --z-neon-2: #14b8a6;
    --z-neon-glow: 0 0 20px rgba(45,212,191,0.45);

    --z-grad-1: linear-gradient(135deg,#2dd4bf 0%,#0891b2 100%);
    --z-grad-2: linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%);
    --z-grad-3: linear-gradient(135deg,#fb923c 0%,#f97316 100%);
    --z-grad-4: linear-gradient(135deg,#f472b6 0%,#db2777 100%);
    --z-grad-5: linear-gradient(135deg,#60a5fa 0%,#2563eb 100%);
    --z-grad-6: linear-gradient(135deg,#34d399 0%,#059669 100%);
    --z-grad-7: linear-gradient(135deg,#facc15 0%,#ca8a04 100%);
    --z-grad-8: linear-gradient(135deg,#94a3b8 0%,#475569 100%);
}

/* ===== Page bg ===== */
body, .app, .page, .page-main {
    background: var(--z-bg) !important;
    color: var(--z-ink) !important;
}

/* ============================================================
 * SIDEBAR — dark navy, glass border, neon
 * ============================================================ */
.app-sidebar, aside.app-sidebar {
    background: linear-gradient(180deg, var(--z-side-bg) 0%, var(--z-side-bg-2) 100%) !important;
    border-right: 0 !important;
    box-shadow: 8px 0 32px -12px rgba(13,27,42,0.35) !important;
    width: 250px !important;
    color: var(--z-side-ink) !important;
}

/* Brand block */
.app-sidebar__logo {
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid var(--z-side-border) !important;
    margin-bottom: 8px !important;
    padding: 12px 18px !important;
}
.app-sidebar__logo .header-brand-img { max-height: 38px !important; filter: brightness(1.2); }
/* Hide old "Z+Zender" pill from v2 — use logo only on dark */
.app-sidebar__logo .header-brand::before,
.app-sidebar__logo .header-brand::after { display: none !important; content: none !important; }

/* Side menu list */
.side-menu, .app-sidebar3 {
    padding: 6px 12px 28px !important;
    margin: 0 !important;
}

.app-sidebar::-webkit-scrollbar { width: 5px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(45,212,191,0.25); border-radius: 8px; }
.app-sidebar::-webkit-scrollbar-thumb:hover { background: var(--z-neon); }

/* Section labels */
.side-item-category {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--z-side-mute) !important;
    padding: 16px 14px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    list-style: none !important;
    position: relative !important;
}
.side-item-category::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 4px !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--z-side-border) 0%, transparent 100%) !important;
}
.side-item-category .text-primary,
.side-item-category .text-yellow { color: var(--z-neon) !important; font-weight: 700 !important; }

/* HR dividers — invisible (use category labels) */
.side-menu hr, .app-sidebar hr { display: none !important; }

/* Menu rows */
.side-menu li.slide { margin: 1px 0 !important; padding: 0 !important; list-style: none !important; }

.side-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    color: var(--z-side-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    transition: background-color .18s ease, color .18s ease, transform .12s ease !important;
    position: relative !important;
}
.side-menu__item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
}

/* ACTIVE — neon gradient pill with glow */
.side-menu__item.active,
.slide.active > .side-menu__item,
.side-menu li.is-expanded > .side-menu__item {
    background: var(--z-grad-1) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 20px -6px rgba(45,212,191,0.55), 0 0 0 1px rgba(45,212,191,0.3) inset !important;
}
.side-menu__item.active::before,
.slide.active > .side-menu__item::before {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--z-neon) !important;
    box-shadow: var(--z-neon-glow) !important;
}

/* Icons — outlined chip on dark, becomes solid gradient on active */
.side-menu__icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--z-neon) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    transition: all .18s ease !important;
}
.side-menu__item:hover .side-menu__icon {
    background: rgba(45,212,191,0.12) !important;
    color: #ffffff !important;
    border-color: rgba(45,212,191,0.3) !important;
}
.side-menu__item.active .side-menu__icon,
.slide.active > .side-menu__item .side-menu__icon {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* Force-override inline color="..." */
.side-menu__icon[style*="color"] { color: var(--z-neon) !important; }
.side-menu__item:hover .side-menu__icon[style*="color"] { color: #ffffff !important; }
.side-menu__item.active .side-menu__icon[style*="color"],
.slide.active > .side-menu__item .side-menu__icon[style*="color"] { color: #ffffff !important; }

.side-menu__label {
    flex: 1 1 auto !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: inherit !important;
}

.side-menu .angle {
    color: var(--z-side-mute) !important;
    font-size: 11px !important;
    margin-left: auto !important;
    transition: transform .2s ease, color .15s ease !important;
}
.side-menu__item:hover .angle { color: var(--z-neon) !important; }
.slide.is-expanded > .side-menu__item .angle,
.slide.active > .side-menu__item .angle { color: #ffffff !important; transform: rotate(90deg) !important; }

/* Submenu — dark indented with vertical neon line */
.slide-menu {
    list-style: none !important;
    padding: 4px 0 6px 36px !important;
    margin: 4px 0 6px !important;
    background: rgba(0,0,0,0.15) !important;
    border-radius: 0 0 10px 10px !important;
    position: relative !important;
}
.slide-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 2px !important;
    background: linear-gradient(180deg, var(--z-neon) 0%, transparent 100%) !important;
    opacity: 0.4 !important;
    border-radius: 2px !important;
}
.slide-menu li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.slide-item {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px 6px 14px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    color: var(--z-side-mute) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all .12s ease !important;
    position: relative !important;
}
.slide-item::before {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--z-side-bg-2) !important;
    border: 2px solid var(--z-side-mute) !important;
    transform: translateY(-50%) !important;
    transition: all .15s ease !important;
}
.slide-item:hover {
    background: rgba(45,212,191,0.08) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}
.slide-item:hover::before { border-color: var(--z-neon) !important; background: var(--z-neon) !important; box-shadow: var(--z-neon-glow) !important; }
.slide-item.active, .slide-menu li.active > .slide-item {
    background: rgba(45,212,191,0.18) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
.slide-item.active::before { background: var(--z-neon) !important; border-color: var(--z-neon) !important; box-shadow: var(--z-neon-glow) !important; }

/* Mini sidebar */
.sidenav-toggled .app-sidebar { width: 76px !important; }
.sidenav-toggled .app-sidebar .side-menu__label,
.sidenav-toggled .app-sidebar .angle,
.sidenav-toggled .app-sidebar .side-item-category { display: none !important; }
.sidenav-toggled .side-menu__item { justify-content: center !important; padding: 10px !important; }
.sidenav-toggled .side-menu__icon { margin: 0 !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; }

/* ============================================================
 * TOPBAR — glass / floating
 * ============================================================ */
.app-header, header.app-header {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
    border-bottom: 1px solid var(--z-border) !important;
    box-shadow: 0 1px 0 rgba(15,27,46,0.04), 0 4px 20px -10px rgba(15,27,46,0.08) !important;
    height: 64px !important;
}
.app-header .header-brand-img { max-height: 32px !important; }
.app-header .nav-link.icon {
    color: var(--z-ink-2) !important;
    background: var(--z-bg) !important;
    border-radius: 10px !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .15s ease !important;
}
.app-header .nav-link.icon:hover {
    background: rgba(45,212,191,0.12) !important;
    color: var(--z-neon-2) !important;
}
/* Avatar */
.app-header .profile-1 .avatar,
.app-header .nav-link.profile-user img {
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 2px var(--z-neon), 0 4px 12px -4px rgba(45,212,191,0.5) !important;
}

/* ============================================================
 * PAGE HEADER (breadcrumb area)
 * ============================================================ */
.page-header {
    background: transparent !important;
    border: 0 !important;
    padding: 28px 0 16px !important;
    margin-bottom: 4px !important;
    box-shadow: none !important;
}
.page-header .page-title, .page-header h4, .page-header h1 {
    color: var(--z-ink) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    letter-spacing: -0.02em !important;
}
.page-header .breadcrumb {
    background: transparent !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
}
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    color: var(--z-mute) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
.page-header .breadcrumb-item.active { color: var(--z-neon-2) !important; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--z-border) !important; }

/* ============================================================
 * STAT CARDS — gradient, vibrant, big numbers
 * ============================================================ */
.card {
    background: var(--z-surface) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,27,46,0.04), 0 8px 24px -16px rgba(15,27,46,0.10) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(15,27,46,0.06), 0 12px 32px -12px rgba(15,27,46,0.18) !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--z-border) !important;
    padding: 18px 22px !important;
    color: var(--z-ink) !important;
    font-weight: 700 !important;
}
.card-body { padding: 20px 22px !important; }

/* Dashboard stat cards: detect by .billing-card OR generic .card with single big number */
.billing-card,
.card.bg-primary,
.card.bg-success,
.card.bg-warning,
.card.bg-danger,
.card.bg-info {
    color: #ffffff !important;
    border: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
.billing-card::after,
.card.bg-primary::after,
.card.bg-success::after,
.card.bg-warning::after,
.card.bg-danger::after,
.card.bg-info::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none !important;
}
.billing-card .card-body, .billing-card * { color: #ffffff !important; }

/* Auto-color stat cards in dashboard grid by sequence using nth-of-type */
.row > [class*="col-"]:nth-of-type(8n+1) > .card { background: var(--z-grad-1) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+2) > .card { background: var(--z-grad-2) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+3) > .card { background: var(--z-grad-3) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+4) > .card { background: var(--z-grad-4) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+5) > .card { background: var(--z-grad-5) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+6) > .card { background: var(--z-grad-6) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+7) > .card { background: var(--z-grad-7) !important; color: #fff !important; }
.row > [class*="col-"]:nth-of-type(8n+8) > .card { background: var(--z-grad-8) !important; color: #fff !important; }

/* Only stat cards (small height ~140px), not chart cards */
.row > [class*="col-"] > .card .chartsh,
.row > [class*="col-"] > .card .card-header { /* if has header → not stat */ }

/* Revert non-stat: cards containing chart/canvas back to white */
.card:has(canvas),
.card:has(.chartsh),
.card:has(.card-header) {
    background: var(--z-surface) !important;
    color: var(--z-ink) !important;
}
.card:has(canvas) *,
.card:has(.chartsh) *,
.card:has(.card-header) * {
    color: inherit !important;
}
.card:has(.card-header) .card-header { color: var(--z-ink) !important; }
.card:has(.card-header)::after { display: none !important; }

/* Stat card inner styling — make number HUGE */
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) {
    min-height: 130px !important;
    padding: 4px !important;
    position: relative !important;
}
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) .card-body {
    padding: 22px 24px !important;
}
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) h6,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) .text-uppercase,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) small {
    color: rgba(255,255,255,0.85) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) h2,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) h1,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) .h2 {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 6px 0 0 !important;
    letter-spacing: -0.02em !important;
}
/* Icon in stat cards → glass circle */
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) i,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) .fa,
.row > [class*="col-"] > .card:not(:has(canvas)):not(:has(.chartsh)):not(:has(.card-header)) [class*="fa-"] {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15) !important;
}

/* ============================================================
 * BUTTONS
 * ============================================================ */
.btn-primary, .btn.btn-primary {
    background: var(--z-grad-1) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -4px rgba(45,212,191,0.5) !important;
    transition: all .15s ease !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(45,212,191,0.6) !important;
    filter: brightness(1.05);
}
.btn-secondary, .btn-light {
    background: var(--z-bg) !important;
    color: var(--z-ink) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer, footer.footer {
    background: transparent !important;
    border-top: 1px solid var(--z-border) !important;
    color: var(--z-mute) !important;
    padding: 18px 24px !important;
    font-size: 12.5px !important;
}

/* ============================================================
 * Override v1/v2 brand pill in dark sidebar
 * ============================================================ */
.app-sidebar .header-brand { display: flex !important; align-items: center !important; gap: 8px !important; }
.app-sidebar .header-brand-img.desktop-lgo { display: block !important; max-height: 36px !important; filter: brightness(1.3) contrast(1.05); }

/* Force label text white inside dark sidebar (override v2 inline) */
.app-sidebar .side-menu__label,
.app-sidebar .side-menu__label * { color: var(--z-side-ink) !important; }
.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .slide.active > .side-menu__item .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__label { color: #ffffff !important; }

/* ============================================================
 * FIX: Force chart/header cards back to white (override nth)
 * Higher specificity since :has() cascading was overridden
 * ============================================================ */
.row > [class*="col-"] > .card.card,
.row > [class*="col-"] > .card:has(> .card-header),
.row > [class*="col-"] > .card:has(canvas),
.row > [class*="col-"] > .card:has(.chartsh),
.row > [class*="col-"] > .card:has(table),
.row > [class*="col-"] > .card:has(.table),
.row > [class*="col-"] > .card:has(.list-group),
.row > [class*="col-"] > .card:has(form),
.row > [class*="col-"] > .card:has(.tab-content) {
    background: var(--z-surface) !important;
    background-image: none !important;
    color: var(--z-ink) !important;
}
.row > [class*="col-"] > .card:has(> .card-header) *,
.row > [class*="col-"] > .card:has(canvas) *,
.row > [class*="col-"] > .card:has(.chartsh) *,
.row > [class*="col-"] > .card:has(table) *,
.row > [class*="col-"] > .card:has(.table) *,
.row > [class*="col-"] > .card:has(form) * {
    color: inherit !important;
}
.row > [class*="col-"] > .card:has(> .card-header)::after { display: none !important; }
.row > [class*="col-"] > .card:has(> .card-header) .card-header {
    color: var(--z-ink) !important;
    font-weight: 700 !important;
    background: transparent !important;
}
.row > [class*="col-"] > .card:has(> .card-header) .card-header i,
.row > [class*="col-"] > .card:has(> .card-header) .card-header [class*="fa-"] {
    background: linear-gradient(135deg, rgba(45,212,191,0.15), rgba(8,145,178,0.15)) !important;
    color: var(--z-neon-2) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-right: 10px !important;
}

/* Stat detection — only apply gradient to cards WITHOUT card-header & without canvas */
/* Already restricted via :not() chain above; reinforce override here for safety */

/* ============================================================
 * FIX: Brand area in dark sidebar — hide v1/v2 generated pill
 * ============================================================ */
.app-sidebar__logo {
    background: transparent !important;
}
.app-sidebar .header-brand-img.desktop-lgo,
.app-sidebar .header-brand-img.mobile-logo {
    filter: brightness(0) invert(1) !important;
    max-height: 32px !important;
}
/* Hide white "Z+Zender" pill backdrop from v2 if it exists as inline span/before */
.app-sidebar .header-brand {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.app-sidebar .header-brand::before,
.app-sidebar .header-brand::after,
.app-sidebar__logo::before,
.app-sidebar__logo::after { content: none !important; display: none !important; }

/* Overrides for non-active label colors (v2 forced ink) */
.app-sidebar .side-menu li.slide > a.side-menu__item,
.app-sidebar .side-menu li.slide > a.side-menu__item .side-menu__label {
    color: var(--z-side-ink) !important;
}
.app-sidebar .side-menu li.slide > a.side-menu__item:hover,
.app-sidebar .side-menu li.slide > a.side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu li.slide.active > a.side-menu__item,
.app-sidebar .side-menu li.slide.active > a.side-menu__item .side-menu__label,
.app-sidebar .side-menu li.slide > a.side-menu__item.active,
.app-sidebar .side-menu li.slide > a.side-menu__item.active .side-menu__label { color: #ffffff !important; }

/* ============================================================
 * V4 — explicit class-based card detection (final, supersedes :has)
 * Classes added by /js/v4-tagger.js
 * ============================================================ */
/* Reset all cards back to white (override earlier nth + :has rules) */
.row > [class*="col-"] > .card,
.card {
    background: var(--z-surface) !important;
    background-image: none !important;
    color: var(--z-ink) !important;
}
.card::after { display: none !important; }

/* STAT cards — gradient pickup by index */
.card.v4-stat { color: #ffffff !important; border: 0 !important; overflow: hidden !important; position: relative !important; min-height: 130px !important; }
.card.v4-stat::after {
    content: "" !important; position: absolute !important; inset: 0 !important;
    background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.20) 0%, transparent 60%) !important;
    pointer-events: none !important; display: block !important;
}
.card.v4-stat .card-body { padding: 22px 24px !important; }
.card.v4-stat *,
.card.v4-stat h2, .card.v4-stat h1, .card.v4-stat h6, .card.v4-stat .h2, .card.v4-stat small, .card.v4-stat span,
.card.v4-stat .text-uppercase, .card.v4-stat .text-muted { color: #ffffff !important; }

.card.v4-stat h6, .card.v4-stat .text-uppercase, .card.v4-stat small {
    color: rgba(255,255,255,0.88) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}
.card.v4-stat h2, .card.v4-stat h1, .card.v4-stat .h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 8px 0 0 !important;
    letter-spacing: -0.02em !important;
}
/* Glass icon */
.card.v4-stat i, .card.v4-stat .fa, .card.v4-stat [class*="fa-"]:not(.angle) {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 18px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.18) !important;
}

/* Color cycle by row order */
.row > [class*="col-"]:nth-of-type(8n+1) > .card.v4-stat { background: var(--z-grad-1) !important; }
.row > [class*="col-"]:nth-of-type(8n+2) > .card.v4-stat { background: var(--z-grad-2) !important; }
.row > [class*="col-"]:nth-of-type(8n+3) > .card.v4-stat { background: var(--z-grad-3) !important; }
.row > [class*="col-"]:nth-of-type(8n+4) > .card.v4-stat { background: var(--z-grad-4) !important; }
.row > [class*="col-"]:nth-of-type(8n+5) > .card.v4-stat { background: var(--z-grad-5) !important; }
.row > [class*="col-"]:nth-of-type(8n+6) > .card.v4-stat { background: var(--z-grad-6) !important; }
.row > [class*="col-"]:nth-of-type(8n+7) > .card.v4-stat { background: var(--z-grad-7) !important; }
.row > [class*="col-"]:nth-of-type(8n+8) > .card.v4-stat { background: var(--z-grad-8) !important; }

/* Non-stat cards keep header style */
.card.v4-non-stat .card-header {
    color: var(--z-ink) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--z-border) !important;
    padding: 18px 22px !important;
}
.card.v4-non-stat .card-header i,
.card.v4-non-stat .card-header [class*="fa-"]:not(.angle) {
    background: linear-gradient(135deg, rgba(45,212,191,0.15), rgba(8,145,178,0.15)) !important;
    color: var(--z-neon-2) !important;
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important;
    border: 0 !important;
    margin-right: 10px !important;
}

/* Submenu text contrast fix */
.app-sidebar .slide-menu .slide-item,
.app-sidebar .slide-menu li > a {
    color: #94a8c0 !important;
}
.app-sidebar .slide-menu .slide-item:hover,
.app-sidebar .slide-menu li > a:hover { color: #ffffff !important; }
.app-sidebar .slide-menu .slide-item.active,
.app-sidebar .slide-menu li.active > a { color: #ffffff !important; }

/* === SPACING & SCROLLBAR FIX === */
/* Force uniform gap between slide items - collapsed slide-menu must take zero space */
.app-sidebar .side-menu li.slide { margin: 2px 0 !important; }
.app-sidebar .slide-menu { display: none !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.app-sidebar .slide.is-expanded > .slide-menu,
.app-sidebar .slide.active > .slide-menu {
    display: block !important;
    max-height: none !important;
    padding: 4px 0 6px 36px !important;
    margin: 4px 0 6px !important;
    overflow: visible !important;
}

/* Tighten category top padding so "AKUN" gap matches normal item spacing */
.app-sidebar .side-item-category { padding: 14px 14px 8px !important; }
.app-sidebar .side-item-category:first-child { padding-top: 6px !important; }

/* Slim global page scrollbar (Webkit + Firefox) */
html { scrollbar-width: thin !important; scrollbar-color: rgba(45,212,191,0.45) transparent !important; }
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(45,212,191,0.35) !important; border-radius: 8px !important; border: 2px solid transparent !important; background-clip: padding-box !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,212,191,0.7) !important; background-clip: padding-box !important; border: 2px solid transparent !important; }
::-webkit-scrollbar-corner { background: transparent !important; }

/* === HOVER & SCROLLBAR FIX (v7) === */
/* Hard override hover - dark subtle bg + readable text. Defeats v1/v2/AdminTro tosca hover */
.app-sidebar .side-menu li.slide > a.side-menu__item:hover,
.app-sidebar .side-menu .side-menu__item:hover {
    background: rgba(45,212,191,0.10) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--z-neon) !important;
}
.app-sidebar .side-menu li.slide > a.side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu .side-menu__item:hover .side-menu__label { color: #ffffff !important; }
.app-sidebar .side-menu li.slide > a.side-menu__item:hover .side-menu__icon,
.app-sidebar .side-menu .side-menu__item:hover .side-menu__icon {
    background: rgba(45,212,191,0.20) !important;
    color: #ffffff !important;
    border-color: rgba(45,212,191,0.5) !important;
}

/* Force thin scrollbar everywhere including body, html, main wrappers */
html, body, .app-content, .main-container, .page, .page-main, .page-content {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(45,212,191,0.45) transparent !important;
}
body::-webkit-scrollbar,
html::-webkit-scrollbar,
.app-content::-webkit-scrollbar,
.page::-webkit-scrollbar,
.main-container::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
.app-content::-webkit-scrollbar-track { background: transparent !important; }
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
.app-content::-webkit-scrollbar-thumb {
    background: rgba(45,212,191,0.45) !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

/* === HIDE ALL SCROLLBARS (v8) — keep scrolling functional === */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner { display: none !important; background: transparent !important; }