/* Custom CSS untuk Aplikasi Data Bantuan Tanaman Pangan */

/* ========================================================================
   PUBLIC MAP SIZE - Ukuran peta publik yang ideal
   ======================================================================== */
#public-map {
    height: 600px;
    width: 100%;
    border-radius: 12px;
}

@media (max-width: 768px) {
    #public-map {
        height: 400px;
    }
}

/* ========================================================================
   LOGO SIZE FIX - Meningkatkan Ukuran Logo di Seluruh Aplikasi
   ======================================================================== */

/* ========================================================================
   SIDEBAR LOGO FIX - LOGO TIDAK TERPOTONG SAAT MINIMIZE
   ========================================================================

   MASALAH: Logo terpotong horizontal saat sidebar diminimalkan
   PENYEBAB: Container sidebar menyusut tapi logo tidak ikut adjust
   SOLUSI: Hide logo-lg, show logo-sm dengan sizing yang pas

   ======================================================================== */

/* ===== ADMIN DASHBOARD - SIDEBAR LOGO ===== */

/* Logo Small (collapsed sidebar) - OPTIMIZED SIZE */
.app-menu .navbar-brand-box .logo-sm img,
.navbar-brand-box .logo .logo-sm img,
span.logo-sm img {
    height: 32px !important; /* Reduced dari 40px agar tidak terpotong */
    width: 32px !important; /* Square untuk logo icon */
    max-height: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
}

/* ===== SIDEBAR MINIMIZE STATE (data-sidebar-size="sm" atau "sm-hover") ===== */

/* Container navbar-brand-box - CENTER & NO OVERFLOW */
[data-sidebar-size="sm"] .app-menu .navbar-brand-box,
[data-sidebar-size="sm-hover"] .app-menu .navbar-brand-box {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important; /* PENTING: Jangan potong logo */
    min-height: 70px !important;
    width: 70px !important; /* Match sidebar minimize width */
}

/* Logo wrapper - CENTER alignment */
[data-sidebar-size="sm"] .app-menu .navbar-brand-box .logo,
[data-sidebar-size="sm-hover"] .app-menu .navbar-brand-box .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* HIDE logo-lg (logo penuh) saat sidebar minimize */
[data-sidebar-size="sm"] .app-menu .navbar-brand-box .logo-lg,
[data-sidebar-size="sm-hover"] .app-menu .navbar-brand-box .logo-lg {
    display: none !important;
}

/* SHOW logo-sm (logo icon) saat sidebar minimize */
[data-sidebar-size="sm"] .app-menu .navbar-brand-box .logo-sm,
[data-sidebar-size="sm-hover"] .app-menu .navbar-brand-box .logo-sm {
    display: inline-block !important;
}

/* Sembunyikan button toggle saat sidebar minimize */
[data-sidebar-size="sm"] .app-menu .navbar-brand-box .btn-vertical-sm-hover,
[data-sidebar-size="sm-hover"] .app-menu .navbar-brand-box .btn-vertical-sm-hover {
    display: none !important;
}

/* ===== SIDEBAR EXPANDED STATE (default, logo penuh tampil) ===== */

/* SHOW logo-lg saat sidebar expanded */
.app-menu .navbar-brand-box .logo-lg {
    display: inline-block !important;
}

/* HIDE logo-sm saat sidebar expanded */
.app-menu .navbar-brand-box .logo-sm {
    display: none !important;
}

/* Logo Large (expanded sidebar) - UKURAN BESAR UNTUK READABILITY */
.app-menu .navbar-brand-box .logo-lg img,
.navbar-brand-box .logo .logo-lg img,
span.logo-lg img,
.logo-dark-theme,
.logo-light-theme {
    height: 130px !important;           /* ⬆️ BESAR: +67% dari 78px untuk tulisan jelas terbaca */
    width: auto !important;             /* Maintain aspect ratio */
    max-height: 130px !important;
    max-width: 96% !important;          /* 96% dari sidebar (~250px dari 260px) */
    object-fit: contain !important;
    padding: 6px 0 !important;          /* Reduced padding untuk compact container */
    margin: 0 auto !important;          /* Perfect center */
    display: block !important;          /* Block untuk margin center bekerja */
}

/* ===== ADMIN DASHBOARD - TOPBAR/HORIZONTAL LOGO ===== */
.navbar-header .navbar-brand-box.horizontal-logo .logo-sm img,
.horizontal-logo .logo .logo-sm img {
    height: 65px !important;
    width: auto !important;
    max-height: 65px !important;
    object-fit: contain !important;
}

.navbar-header .navbar-brand-box.horizontal-logo .logo-lg img,
.horizontal-logo .logo .logo-lg img {
    height: 78px !important;
    width: auto !important;
    max-height: 78px !important;
    max-width: 220px !important;
    object-fit: contain !important;
}

/* ===== HALAMAN PUBLIK - NAVBAR LOGO ===== */
.navbar-landing .navbar-brand img:not(.logo-pemprov),
.navbar-landing .card-logo,
.navbar-brand .card-logo {
    height: 95px !important;
    width: auto !important;
    max-height: 95px !important;
    max-width: 280px !important;
    object-fit: contain !important;
}

/* Logo Pemprov - Proporsional seperti di footer */
.navbar-landing .navbar-brand img.logo-pemprov {
    height: 75px !important;
    width: auto !important;
    max-height: 75px !important;
    object-fit: contain !important;
}

/* ===== HALAMAN PUBLIK - LOGO SWITCHING (SCROLL-BASED) ===== */
/* Container for overlapping logos */
.navbar-brand .d-flex.flex-column {
    position: relative;
    min-height: 35px; /* Match logo height */
    margin-left: -2.9rem !important; /* Negative margin untuk mendekatkan ke separator - proporsi ideal */
    transform: translateY(-26px) !important; /* Geser ke atas untuk center dengan separator */
}

/* Both logos positioned absolutely to overlap */
.logo-hero-dark,
.logo-scrolled-white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show state (default for dark logo) */
.logo-hero-dark {
    z-index: 2;
}

/* Hide state - controlled by JavaScript */
.logo-hero-dark.logo-hidden,
.logo-scrolled-white.logo-hidden {
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

/* Initial state: white logo starts hidden */
.logo-scrolled-white {
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

/* Show state for white logo - override initial hidden state */
.logo-scrolled-white.logo-visible {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ===== HALAMAN PUBLIK - FOOTER LOGO ===== */
footer img[alt*="logo"],
footer .logo,
.landing footer img {
    height: 150px !important;
    width: auto !important;
    max-height: 150px !important;
    max-width: 380px !important;
    object-fit: contain !important;
}

/* ===== RESPONSIVE - TABLET (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Admin Dashboard - Tablet */
    .app-menu .navbar-brand-box .logo-lg img,
    .navbar-brand-box .logo .logo-lg img,
    span.logo-lg img,
    .logo-dark-theme,
    .logo-light-theme {
        height: 110px !important;       /* Scaled dari 130px */
        max-width: 94% !important;
        padding: 5px 0 !important;      /* Compact padding */
    }

    [data-layout="vertical"] .navbar-brand-box,
    [data-layout="semibox"] .navbar-brand-box,
    [data-layout="twocolumn"] .navbar-brand-box {
        min-height: 120px !important;   /* Compact */
        padding: 5px 6px !important;
    }
}

/* ===== RESPONSIVE - MOBILE DEVICES (≤767px) ===== */
@media (max-width: 767px) {
    /* Admin Dashboard - Mobile */
    .app-menu .navbar-brand-box .logo-sm img,
    .navbar-brand-box .logo .logo-sm img,
    span.logo-sm img {
        height: 32px !important;
    }

    .app-menu .navbar-brand-box .logo-lg img,
    .navbar-brand-box .logo .logo-lg img,
    span.logo-lg img,
    .logo-dark-theme,
    .logo-light-theme {
        height: 90px !important;        /* Lebih besar dari sebelumnya (62px) */
        max-width: 92% !important;
        padding: 4px 0 !important;      /* Compact untuk mobile */
    }

    [data-layout="vertical"] .navbar-brand-box,
    [data-layout="semibox"] .navbar-brand-box,
    [data-layout="twocolumn"] .navbar-brand-box {
        min-height: 100px !important;   /* Compact */
        padding: 4px 4px !important;
    }

    /* Public Landing - Mobile */
    .navbar-landing .navbar-brand img:not(.logo-pemprov),
    .navbar-landing .card-logo,
    .navbar-brand .card-logo {
        height: 75px !important;
        max-width: 220px !important;
    }

    /* Logo Pemprov - Mobile */
    .navbar-landing .navbar-brand img.logo-pemprov {
        height: 60px !important;
    }

    footer img[alt*="logo"],
    footer .logo,
    .landing footer img {
        height: 110px !important;
        max-width: 280px !important;
    }
}

/* ===== LOGO THEME SWITCHING - AGGRESSIVE SINGLE LOGO ONLY ===== */
/* PENTING: Hanya 1 logo tampil, yang lain COMPLETELY HIDDEN */

/* Base: Hide both logos first */
.logo-dark-theme,
.logo-light-theme {
    position: absolute !important;      /* Remove from layout flow */
    top: -9999px !important;            /* Hide far away */
    left: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Light theme: Show ONLY dark logo */
.logo-dark-theme {
    position: relative !important;      /* Back to layout */
    top: auto !important;
    left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Dark theme: Show ONLY light logo */
[data-bs-theme="dark"] .logo-dark-theme {
    position: absolute !important;      /* Remove from layout */
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

[data-bs-theme="dark"] .logo-light-theme {
    position: relative !important;      /* Back to layout */
    top: auto !important;
    left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Horizontal layout logo handling */
[data-layout="horizontal"] .horizontal-logo .logo-dark .logo-dark-theme {
    display: inline-block !important;
}

[data-layout="horizontal"] .horizontal-logo .logo-dark .logo-light-theme {
    display: none !important;
}

[data-layout="horizontal"] .horizontal-logo .logo-light .logo-dark-theme {
    display: none !important;
}

[data-layout="horizontal"] .horizontal-logo .logo-light .logo-light-theme {
    display: inline-block !important;
}

/* Dark mode untuk horizontal */
[data-bs-theme="dark"][data-layout="horizontal"] .horizontal-logo .logo-dark .logo-dark-theme {
    display: none !important;
}

[data-bs-theme="dark"][data-layout="horizontal"] .horizontal-logo .logo-dark .logo-light-theme {
    display: inline-block !important;
}

/* ===== CONTAINER FIXES ===== */
/* Pastikan container logo tidak memotong gambar */
.navbar-brand-box,
.navbar-brand {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

/* Min-height hanya untuk vertical layout, tidak untuk horizontal */
[data-layout="vertical"] .navbar-brand-box,
[data-layout="semibox"] .navbar-brand-box,
[data-layout="twocolumn"] .navbar-brand-box {
    min-height: 140px !important;       /* Compact height untuk logo 130px */
    padding: 5px 8px !important;        /* Minimal padding untuk compact look */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo wrapper untuk ensure perfect centering */
.app-menu .navbar-brand-box .logo {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* NO TRANSITION - Instant switch untuk zero flicker */
.logo-dark-theme,
.logo-light-theme {
    transition: none !important;        /* Instant switch, no animation */
}

/* Ensure no cut-off */
.app-menu .navbar-brand-box {
    overflow: visible !important;
}

/* ===== VERTICAL SIDEBAR - SMOOTH DROPDOWN ANIMATIONS ===== */
/* ✅ Apply same smooth animation principles untuk vertical sidebar */

/* Base collapse state untuk vertical sidebar */
.app-menu .navbar-nav .collapse {
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;

    /* Smooth multi-property transition */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s !important;
}

/* Show state untuk vertical sidebar collapse */
.app-menu .navbar-nav .collapse.show {
    max-height: 2000px !important; /* Large enough untuk semua content */
    opacity: 1 !important;
    visibility: visible !important;

    /* Remove visibility delay saat opening */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s !important;
}

/* Smooth animation untuk menu items saat collapse opens */
.app-menu .navbar-nav .collapse .nav-item {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-menu .navbar-nav .collapse.show .nav-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Stagger effect untuk vertical menu items */
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(1) { transition-delay: 0.05s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(2) { transition-delay: 0.1s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(3) { transition-delay: 0.15s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(4) { transition-delay: 0.2s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(5) { transition-delay: 0.25s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(6) { transition-delay: 0.3s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(7) { transition-delay: 0.35s !important; }
.app-menu .navbar-nav .collapse.show .nav-item:nth-child(8) { transition-delay: 0.4s !important; }

/* ===== FIX: SEMBUNYIKAN LOGO DUPLIKAT ===== */
/* Di vertical/semibox/twocolumn: Hanya tampilkan logo sidebar */
[data-layout="vertical"] .navbar-header .navbar-brand-box.horizontal-logo,
[data-layout="semibox"] .navbar-header .navbar-brand-box.horizontal-logo,
[data-layout="twocolumn"] .navbar-header .navbar-brand-box.horizontal-logo {
    display: none !important;
}

/* Di horizontal layout: Sembunyikan logo sidebar saja, bukan menu */
[data-layout="horizontal"] .app-menu .navbar-brand-box {
    display: none !important;
}

[data-layout="horizontal"] .navbar-header .navbar-brand-box.horizontal-logo {
    display: flex !important;
}

/* Di horizontal: logo-dark tampil default, logo-light disembunyikan (JS akan handle) */
[data-layout="horizontal"] .navbar-brand-box.horizontal-logo .logo-dark {
    display: flex !important;
}

[data-layout="horizontal"] .navbar-brand-box.horizontal-logo .logo-light {
    display: none !important;
}

/* ========================================================================
   SMOOTH DROPDOWN ANIMATIONS - BEST PRACTICE 2025
   ========================================================================

   🎯 PROBLEM SOLVED: Flickering/Choppy Dropdown Animations

   ❌ OLD METHOD (CAUSES FLICKERING):
      - display: none → display: block switching
      - Triggers full layout reflow (expensive!)
      - CSS transitions DON'T work on display property
      - Results in FOUC (Flash of Unstyled Content)

   ✅ NEW METHOD (BUTTERY SMOOTH):
      - visibility + opacity + transform combination
      - Hardware-accelerated (GPU-powered)
      - Only triggers repaint/composite (cheap!)
      - Professional animations dengan timing functions

   🚀 PERFORMANCE BENEFITS:
      - 60 FPS animations (16.67ms per frame)
      - Minimal CPU usage - GPU does the heavy lifting
      - No layout reflow - hanya composite layer changes
      - Pointer-events management untuk accessibility

   📚 KEY TECHNIQUES:
      1. translateZ(0) - Force GPU acceleration layer
      2. will-change - Hint browser untuk optimization
      3. visibility delays - Proper timing untuk show/hide
      4. pointer-events - Disable interaction saat hidden
      5. cubic-bezier - Custom easing untuk smooth feel

   ======================================================================== */

/* ===== DROPDOWN MULTI-KOLOM untuk Horizontal Layout ===== */
/* ✅ BEST PRACTICE 2025: Hardware-Accelerated Animations */
/* Menggunakan opacity + transform + visibility (BUKAN display!) */

/* Parent nav-item harus relative */
[data-layout="horizontal"] .navbar-nav .nav-item {
    position: relative !important;
}

/* Menu dropdown dengan multi-kolom - INITIAL STATE */
[data-layout="horizontal"] .navbar-nav .menu-dropdown {
    /* ✅ USE: visibility (can be transitioned) instead of display */
    visibility: hidden !important;
    opacity: 0 !important;

    /* ✅ Hardware-accelerated properties */
    transform: translateX(-50%) scale(0.95) translateZ(0) !important;
    will-change: opacity, transform !important;

    /* Position & Layout */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform-origin: top center !important;
    z-index: 9999 !important;

    /* Dimensions */
    min-width: 500px !important;
    max-width: 650px !important;
    width: max-content !important;

    /* Styling */
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,.15) !important;
    margin-top: 0.5rem !important;
    padding: 1.25rem !important;

    /* ✅ Smooth transition using cubic-bezier easing */
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.25s !important; /* Delay visibility change */

    /* ✅ Pointer events disabled when hidden untuk accessibility */
    pointer-events: none !important;
}

/* Auto-adjust jika keluar dari viewport kanan */
[data-layout="horizontal"] .navbar-nav .nav-item:nth-last-child(-n+3) .menu-dropdown {
    left: auto !important;
    right: 0 !important;
    transform: scale(0.95) !important;
    transform-origin: top right !important;
}

/* Auto-adjust jika keluar dari viewport kiri */
[data-layout="horizontal"] .navbar-nav .nav-item:nth-child(-n+3) .menu-dropdown {
    left: 0 !important;
    right: auto !important;
    transform: scale(0.95) !important;
    transform-origin: top left !important;
}

/* ✅ SHOW STATE - Smooth entrance animation tanpa flickering */
[data-layout="horizontal"] .navbar-nav .menu-dropdown.show {
    /* ✅ Visible state menggunakan visibility + opacity */
    visibility: visible !important;
    opacity: 1 !important;

    /* ✅ Full scale dengan hardware acceleration */
    transform: translateX(-50%) scale(1) translateZ(0) !important;

    /* ✅ Enable pointer events saat visible */
    pointer-events: auto !important;

    /* ✅ Remove delay on visibility when opening */
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s !important; /* No delay on show */
}

/* ✅ Override transform untuk edge cases (right-aligned dropdowns) */
[data-layout="horizontal"] .navbar-nav .nav-item:nth-last-child(-n+3) .menu-dropdown.show {
    transform: scale(1) translateZ(0) !important;
}

[data-layout="horizontal"] .navbar-nav .nav-item:nth-child(-n+3) .menu-dropdown.show {
    transform: scale(1) translateZ(0) !important;
}

/* ✅ CLOSING STATE - Smooth exit animation dengan timing optimal */
[data-layout="horizontal"] .navbar-nav .menu-dropdown.collapsing {
    /* Fade out lebih cepat untuk responsiveness */
    opacity: 0 !important;
    transform: translateX(-50%) scale(0.95) translateZ(0) !important;

    /* Slightly faster exit dengan ease-in curve */
    transition:
        opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.6, 1),
        visibility 0s linear 0.2s !important; /* Hide after animation */

    /* Disable interactions immediately */
    pointer-events: none !important;
}

/* ✅ Edge cases untuk closing animation */
[data-layout="horizontal"] .navbar-nav .nav-item:nth-last-child(-n+3) .menu-dropdown.collapsing {
    transform: scale(0.95) translateZ(0) !important;
}

[data-layout="horizontal"] .navbar-nav .nav-item:nth-child(-n+3) .menu-dropdown.collapsing {
    transform: scale(0.95) translateZ(0) !important;
}


/* Layout multi-kolom untuk submenu - ONLY for top-level dropdown items, NOT nested */
[data-layout="horizontal"] .navbar-nav > .nav-item > .menu-dropdown > .nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0 !important;
}

/* Untuk menu dengan banyak item (>3), gunakan 2 kolom - ONLY top-level */
[data-layout="horizontal"] .navbar-nav > .nav-item > .menu-dropdown > .nav:has(> .nav-item:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Untuk menu dengan sedikit item (≤3), gunakan 1 kolom - ONLY top-level */
[data-layout="horizontal"] .navbar-nav > .nav-item > .menu-dropdown > .nav:has(> .nav-item:nth-child(1)):not(:has(> .nav-item:nth-child(4))) {
    grid-template-columns: 1fr !important;
    min-width: 280px !important;
}

/* CRITICAL: Force VERTICAL layout for nested submenu items (Pengaturan Sistem, etc.) */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav,
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.menu-dropdown .nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
}

/* Dark mode border for nested submenu */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav {
    border-top-color: rgba(255,255,255,0.1) !important;
}

/* Nested submenu items - initial hidden state */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-item {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Nested submenu items - show state with stagger animation */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Stagger delays for nested menu items */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(1) {
    transition-delay: 0.05s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(2) {
    transition-delay: 0.1s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(3) {
    transition-delay: 0.15s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(4) {
    transition-delay: 0.2s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(5) {
    transition-delay: 0.25s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show .nav-item:nth-child(6) {
    transition-delay: 0.3s !important;
}

/* Submenu items dalam grid */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-item {
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Stagger animation untuk menu items */
[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(1) {
    transition-delay: 0.05s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(2) {
    transition-delay: 0.1s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(3) {
    transition-delay: 0.15s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(4) {
    transition-delay: 0.2s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(5) {
    transition-delay: 0.25s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown.show .nav-item:nth-child(6) {
    transition-delay: 0.3s !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link {
    padding: 0.75rem 1rem !important;
    color: #495057 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    white-space: normal !important;
    border-radius: 0.375rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link i {
    font-size: 1.125rem !important;
    flex-shrink: 0 !important;
    margin-top: 0.125rem !important;
}

/* Hover state - Smooth slide effect */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link:hover {
    background-color: rgba(10, 179, 156, 0.1) !important;
    color: #0ab39c !important;
    transform: translateX(6px) !important;
    box-shadow: 0 2px 8px rgba(10, 179, 156, 0.15) !important;
}

[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link:hover i {
    transform: scale(1.1) !important;
    transition: transform 0.2s ease !important;
}

/* ===== CLEAN DROPDOWN STYLING - NO ACTIVE STATE FOR COLLAPSE TRIGGERS ===== */

/* Remove active background from collapse triggers (parent items like "Pengaturan Sistem") */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse].active,
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"].active {
    background-color: transparent !important;
    color: #495057 !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Active state ONLY for actual page links - WHITE background with left border only */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link.active:not([data-manual-collapse]):not([href^="#sidebar"]) {
    background-color: transparent !important;
    color: #0ab39c !important;
    font-weight: 500 !important;
    border-left: 3px solid #0ab39c !important;
    padding-left: calc(1rem - 3px) !important;
    box-shadow: none !important;
}

/* Dark mode support */
[data-layout="horizontal"][data-bs-theme="dark"] .navbar-nav .menu-dropdown {
    background: #2a2f34 !important;
    border-color: rgba(255,255,255,.1) !important;
}

[data-layout="horizontal"][data-bs-theme="dark"] .navbar-nav .menu-dropdown .nav-link {
    color: #ced4da !important;
}

[data-layout="horizontal"][data-bs-theme="dark"] .navbar-nav .menu-dropdown .nav-link:hover {
    background-color: rgba(10, 179, 156, 0.15) !important;
    color: #0ab39c !important;
}

/* Dark mode - collapse triggers (no background) */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse].active,
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"].active {
    background-color: transparent !important;
    color: #ced4da !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Dark mode - active page links - transparent background with border only */
[data-layout="horizontal"][data-bs-theme="dark"] .navbar-nav .menu-dropdown .nav-link.active:not([data-manual-collapse]):not([href^="#sidebar"]) {
    background-color: transparent !important;
    color: #0ab39c !important;
    border-left: 3px solid #0ab39c !important;
    padding-left: calc(1rem - 3px) !important;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    [data-layout="horizontal"] .navbar-nav .menu-dropdown {
        min-width: 400px !important;
        max-width: calc(100vw - 40px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Override positioning untuk tablet */
    [data-layout="horizontal"] .navbar-nav .nav-item:nth-last-child(-n+3) .menu-dropdown,
    [data-layout="horizontal"] .navbar-nav .nav-item:nth-child(-n+3) .menu-dropdown {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    [data-layout="horizontal"] .navbar-nav .menu-dropdown {
        min-width: 280px !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        width: auto !important;
    }

    [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Override positioning untuk mobile */
    [data-layout="horizontal"] .navbar-nav .nav-item:nth-last-child(-n+3) .menu-dropdown,
    [data-layout="horizontal"] .navbar-nav .nav-item:nth-child(-n+3) .menu-dropdown {
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
    }
}

/* ===== HORIZONTAL LAYOUT - NESTED SUBMENU SUPPORT ===== */
/* ✅ Nested collapse smooth height transition - MODERN APPROACH */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse {
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;

    /* ✅ Smooth transitions untuk multiple properties */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s !important;
}

/* ✅ Nested collapse - SHOW STATE */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.show {
    max-height: 1000px !important; /* Large enough untuk konten */
    opacity: 1 !important;
    visibility: visible !important;

    /* ✅ No delay pada visibility saat opening */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s !important;
}

/* Nested submenu trigger styling */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse],
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"] {
    position: relative !important;
    cursor: pointer !important;
}

/* Arrow indicator for nested submenu */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse]::after,
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"]::after {
    content: '\ea4e' !important; /* Remix Icon chevron-down */
    font-family: 'remixicon' !important;
    position: absolute !important;
    right: 12px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 14px !important;
    opacity: 0.7 !important;
}

/* Rotate arrow when submenu is open */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse][aria-expanded="true"]::after,
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"][aria-expanded="true"]::after {
    transform: rotate(-180deg) !important;
}

/* Hover effect for collapse triggers */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse]:hover,
[data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"]:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Dark mode hover for collapse triggers */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[data-manual-collapse]:hover,
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .nav-link[href^="#sidebar"]:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Indent nested submenu items for visual hierarchy - WHITE BACKGROUND */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link {
    padding: 0.65rem 1rem 0.65rem 2.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
    margin: 0 0.5rem !important;
    transition: all 0.2s ease !important;
    background-color: #fff !important;
}

/* Dark mode - nested items white background */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link {
    background-color: #2a2f34 !important;
}

/* Nested submenu item hover state - slightly gray */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link:hover {
    background-color: #f8f9fa !important;
    padding-left: 2.75rem !important;
    color: #0ab39c !important;
}

/* Dark mode - nested hover */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link:hover {
    background-color: #343a40 !important;
}

/* Nested submenu container styling */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse.menu-dropdown {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0.25rem !important;
    padding: 0 !important;
}

/* Nested submenu hover state */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link:hover {
    background-color: rgba(10, 179, 156, 0.08) !important;
    padding-left: 2.75rem !important;
}

/* Active state for nested items - WHITE background with left border accent */
[data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link.active {
    background-color: #fff !important;
    color: #0ab39c !important;
    font-weight: 500 !important;
    border-left: 3px solid #0ab39c !important;
    padding-left: calc(2.5rem - 3px) !important;
}

/* Dark mode - nested active items */
[data-bs-theme="dark"] [data-layout="horizontal"] .navbar-nav .menu-dropdown .collapse .nav-link.active {
    background-color: #2a2f34 !important;
    border-left-color: #0ab39c !important;
}

/* ===== THEME PRESET CARDS - DARK MODE FIX ===== */
/* Ensure preset card icons are visible in both light and dark modes */

/* Light theme preset card - add border in dark mode */
[data-bs-theme="dark"] .theme-preset-card[data-preset="default"] .avatar-title.bg-light {
    background-color: #fff !important;
    border: 2px solid #495057 !important;
    color: #212529 !important;
}

/* Dark theme preset card - add border in light mode AND dark mode */
.theme-preset-card[data-preset="dark"] .avatar-title.bg-dark {
    background-color: #212529 !important;
    border: 2px solid #dee2e6 !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .theme-preset-card[data-preset="dark"] .avatar-title.bg-dark {
    background-color: #000 !important;
    border: 2px solid #495057 !important;
    color: #f8f9fa !important;
}

/* Info preset card - ensure visibility */
[data-bs-theme="dark"] .theme-preset-card[data-preset="horizontal"] .avatar-title.bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border: 1px solid rgba(13, 202, 240, 0.3) !important;
    color: #0dcaf0 !important;
}

/* Success preset card - ensure visibility */
[data-bs-theme="dark"] .theme-preset-card[data-preset="twocolumn"] .avatar-title.bg-success-subtle {
    background-color: rgba(10, 179, 156, 0.15) !important;
    border: 1px solid rgba(10, 179, 156, 0.3) !important;
    color: #0ab39c !important;
}

/* Add hover effect to all preset cards */
.theme-preset-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.theme-preset-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .theme-preset-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4) !important;
}

.logo,
a.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
}

/* Smooth transition untuk logo */
.logo img,
.navbar-brand img,
.card-logo {
    transition: all 0.3s ease !important;
}

.logo img:hover,
.navbar-brand img:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

/* Perbaikan jarak internal paginasi di card footer */
.card-footer.d-flex {
    gap: 1.5rem;
}

/* Menghilangkan margin default pagination */
.card-footer .pagination {
    margin-bottom: 0;
}

/* Memastikan alignment yang sempurna untuk pagination wrapper */
.card-footer nav {
    margin-bottom: 0;
}

/* ========================================================================
   HERO SECTION - OPTIMIZED TYPOGRAPHY HIERARCHY (BEST PRACTICE 2025)
   ========================================================================

   Strategy: Graduated Opacity + Golden Keyword Accent
   - Clear visual hierarchy through opacity differentiation
   - Golden accent on "Tanaman Pangan" for memorable visual anchor
   - Thematic alignment: yellow/gold = agriculture, harvest, food security
   - WCAG AAA compliant (all levels exceed 7:1 contrast ratio)

   ======================================================================== */

/* Base Hero Title Container */
.hero-section .hero-title {
    margin-bottom: 1.5rem !important;
}

/* Title Line 1: "Sistem Informasi" - PRIMARY ATTENTION */
.hero-section .hero-title .title-line-1 {
    color: #FFFFFF !important;
    opacity: 1 !important; /* 100% - BRIGHTEST */
    font-weight: 700 !important;
    font-size: 2.75rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
    text-shadow:
        2px 2px 10px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(0, 0, 0, 0.5),
        4px 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: inline-block !important;
}

/* Title Line 2: "Bantuan" part - WHITE */
.hero-section .hero-title .title-line-2 {
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 2.75rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
    text-shadow:
        2px 2px 10px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(0, 0, 0, 0.5),
        4px 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: inline-block !important;
}

/* GOLDEN ACCENT KEYWORD: "Tanaman Pangan" - VISUAL ANCHOR */
.hero-section .hero-title .accent-keyword {
    color: #fbbf24 !important; /* Warm Golden - Agricultural Theme */
    font-weight: 800 !important; /* Extra Bold untuk emphasis */
    text-shadow:
        2px 2px 10px rgba(251, 191, 36, 0.5),
        0 0 20px rgba(251, 191, 36, 0.4),
        2px 2px 15px rgba(0, 0, 0, 0.8) !important;
    /* Subtle glow effect untuk premium look */
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.35)) !important;
    display: inline-block !important;
}

/* Base Subtitle Container */
.hero-section .hero-subtitle {
    max-width: 700px !important;
    margin-bottom: 2rem !important;
}

/* Subtitle Primary: Key Message - SECONDARY ATTENTION */
.hero-section .hero-subtitle .subtitle-primary {
    color: #FFFFFF !important;
    opacity: 0.95 !important; /* 95% - Slightly dimmed for hierarchy */
    font-weight: 500 !important; /* Medium weight untuk emphasis */
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.65),
        0 0 20px rgba(0, 0, 0, 0.45) !important;
    display: inline-block !important;
}

/* Subtitle Secondary: Supporting Info - TERTIARY */
.hero-section .hero-subtitle .subtitle-secondary {
    color: #FFFFFF !important;
    opacity: 0.85 !important; /* 85% - More dimmed for clear hierarchy */
    font-weight: 400 !important; /* Regular weight */
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.65),
        0 0 18px rgba(0, 0, 0, 0.45) !important;
    display: inline-block !important;
}

/* ====================================================================
   RESPONSIVE TYPOGRAPHY - MOBILE OPTIMIZATIONS
   ==================================================================== */

/* Tablet (≤768px) */
@media (max-width: 768px) {
    .hero-section .hero-title .title-line-1,
    .hero-section .hero-title .title-line-2 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }

    .hero-section .hero-title .accent-keyword {
        font-size: 2rem !important;
        font-weight: 800 !important;
        /* Slightly reduced glow for mobile performance */
        filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.3)) !important;
    }

    .hero-section .hero-subtitle .subtitle-primary {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    .hero-section .hero-subtitle .subtitle-secondary {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        opacity: 0.80 !important; /* Slightly more dimmed on mobile */
    }

    .hero-section .hero-subtitle {
        max-width: 100% !important;
    }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
    .hero-section .hero-title .title-line-1,
    .hero-section .hero-title .title-line-2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.25px !important;
    }

    .hero-section .hero-title .accent-keyword {
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        /* Minimal glow for small screens */
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.25)) !important;
    }

    .hero-section .hero-subtitle .subtitle-primary {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
    }

    .hero-section .hero-subtitle .subtitle-secondary {
        font-size: 0.875rem !important;
        opacity: 0.75 !important;
    }
}

/* Extra Small Mobile (≤375px) */
@media (max-width: 375px) {
    .hero-section .hero-title .title-line-1,
    .hero-section .hero-title .title-line-2,
    .hero-section .hero-title .accent-keyword {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    .hero-section .hero-subtitle .subtitle-primary {
        font-size: 0.875rem !important;
    }

    .hero-section .hero-subtitle .subtitle-secondary {
        font-size: 0.8125rem !important;
    }
}

/* PRIMARY BUTTON - Velzon Success Green (#3cd188) */
.hero-section .btn-light {
    background: linear-gradient(135deg, #3cd188 0%, #2eb876 100%) !important;
    border: 2px solid #3cd188 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.7rem 1.5rem !important;
    box-shadow:
        0 8px 20px rgba(60, 209, 136, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-section .btn-light:hover {
    background: linear-gradient(135deg, #2eb876 0%, #26a665 100%) !important;
    border-color: #2eb876 !important;
    color: #FFFFFF !important;
    box-shadow:
        0 12px 28px rgba(60, 209, 136, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-3px) !important;
}

/* SECONDARY BUTTON - Golden Yellow Outline with Smooth Animation */
.btn-warning-custom {
    background: linear-gradient(135deg, transparent 0%, transparent 100%) !important;
    border: 3px solid #fbbf24 !important;
    color: #fbbf24 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.9rem 2rem !important;
    box-shadow:
        0 6px 20px rgba(251, 191, 36, 0.4),
        0 3px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Shine animation effect */
.btn-warning-custom::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
}

.btn-warning-custom:hover::before {
    left: 100% !important;
}

/* Background fill on hover */
.btn-warning-custom:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border-color: #f59e0b !important;
    color: #1f2937 !important;
    box-shadow:
        0 8px 24px rgba(251, 191, 36, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-3px) scale(1.01) !important;
    text-shadow: none !important;
}

/* Ensure icon and text stay above animations */
.btn-warning-custom * {
    position: relative !important;
    z-index: 2 !important;
}

/* Overlay Gradient - Natural Blue-Green Blend (Agricultural Theme) */
.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(10, 40, 50, 0.88) 0%,
        rgba(15, 55, 65, 0.85) 50%,
        rgba(20, 65, 75, 0.83) 100%
    ) !important;
}

.hero-overlay::after {
    background: radial-gradient(
        ellipse at center,
        rgba(15, 55, 65, 0.1) 0%,
        rgba(10, 40, 50, 0.3) 100%
    ) !important;
}

/* Icon Visibility Enhancement */
.hero-section .btn i {
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4)) !important;
    font-size: 1.2em !important;
}

/* Button Spacing untuk Hierarki yang Jelas */
.hero-section .d-flex {
    gap: 1.25rem !important;
}

/* ========================================================================
   NAVIGATION HEADER - ADAPTIF & SCROLLING (Dua State)
   ======================================================================== */

/* ===== STATE DEFAULT: TRANSPARENT (Di Puncak) ===== */
.navbar-landing {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 1rem 0 !important;
}

/* Navigation Links - White Text (Default State) */
.navbar-landing .navbar-nav .nav-link {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.25s ease !important;
    border-bottom: 2px solid transparent !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Active Link - White Bold (Default State) */
.navbar-landing .navbar-nav .nav-link.active {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #FFFFFF !important;
    background-color: transparent !important;
}

/* Hover State - White (Default State) */
.navbar-landing .navbar-nav .nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.85;
}

/* Login Button - White Outline (Default State) */
.navbar-landing .btn-primary {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.5rem !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.navbar-landing .btn-primary:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #3cd188 !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3) !important;
}

/* Mobile Menu Toggle - White (Default State) */
.navbar-landing .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

.navbar-landing .navbar-toggler-icon {
    filter: invert(1) !important;
}

/* ===== STATE SCROLLED: SOLID WHITE (Setelah Scroll) ===== */
.navbar-landing.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 0.5rem 0 !important;
}

/* Navigation Links - Dark Text (Scrolled State) */
.navbar-landing.navbar-scrolled .navbar-nav .nav-link {
    color: #495057 !important;
    text-shadow: none !important;
}

/* Active Link - Green (Scrolled State) */
.navbar-landing.navbar-scrolled .navbar-nav .nav-link.active {
    color: #3cd188 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #3cd188 !important;
}

/* Hover State - Green (Scrolled State) */
.navbar-landing.navbar-scrolled .navbar-nav .nav-link:hover {
    color: #3cd188 !important;
    opacity: 1;
}

/* Login Button - Green Solid (Scrolled State) */
.navbar-landing.navbar-scrolled .btn-primary {
    background: linear-gradient(135deg, #3cd188 0%, #2eb876 100%) !important;
    border: 2px solid #3cd188 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(60, 209, 136, 0.3) !important;
}

.navbar-landing.navbar-scrolled .btn-primary:hover {
    background: linear-gradient(135deg, #2eb876 0%, #26a665 100%) !important;
    border: 2px solid #2eb876 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(60, 209, 136, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Mobile Menu Toggle - Dark (Scrolled State) */
.navbar-landing.navbar-scrolled .navbar-toggler {
    border-color: rgba(73, 80, 87, 0.2) !important;
    color: #495057 !important;
}

.navbar-landing.navbar-scrolled .navbar-toggler-icon {
    filter: none !important;
}

.navbar-landing .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(60, 209, 136, 0.25) !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 991px) {
    .navbar-landing .navbar-collapse,
    .navbar-landing.navbar-scrolled .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.98) !important;
        padding: 1rem !important;
        margin-top: 0.5rem !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .navbar-landing .navbar-nav .nav-link,
    .navbar-landing.navbar-scrolled .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        color: #495057 !important;
        text-shadow: none !important;
    }

    .navbar-landing .navbar-nav .nav-link.active,
    .navbar-landing.navbar-scrolled .navbar-nav .nav-link.active {
        background-color: rgba(60, 209, 136, 0.1) !important;
        border-radius: 0.375rem !important;
        border-bottom: none !important;
        border-left: 3px solid #3cd188 !important;
        color: #3cd188 !important;
    }

    .navbar-landing .navbar-nav .nav-link:hover,
    .navbar-landing.navbar-scrolled .navbar-nav .nav-link:hover {
        color: #3cd188 !important;
    }

    /* ===== CRITICAL FIX: MOBILE BUTTON VISIBILITY - NON-SCROLLED STATE ===== */
    /* Make "Masuk" button green on mobile to ensure visibility against white menu background */
    /* Issue: White button (text + border) on white mobile menu = invisible */
    /* Solution: Apply green button style in non-scrolled state, matching scrolled state */
    .navbar-landing:not(.navbar-scrolled) .btn-primary {
        background: linear-gradient(135deg, #3cd188 0%, #2eb876 100%) !important;
        border: 2px solid #3cd188 !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(60, 209, 136, 0.4) !important;
    }

    .navbar-landing:not(.navbar-scrolled) .btn-primary:hover {
        background: linear-gradient(135deg, #2eb876 0%, #26a665 100%) !important;
        border: 2px solid #2eb876 !important;
        color: #FFFFFF !important;
        box-shadow: 0 6px 16px rgba(60, 209, 136, 0.5) !important;
        transform: translateY(-2px) !important;
    }
}

/* ========================================================================
   PHASE 1: UI ANIMATIONS - BEST PRACTICES 2025
   Implemented: Button Feedback, Form Validation, Skeleton Loaders
   ======================================================================== */

/* ========================================================================
   1. BUTTON FEEDBACK ANIMATIONS - SMOOTH INTERACTIONS
   ======================================================================== */

/* Base transition untuk semua button */
.btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Click Effect - Subtle Scale */
.btn:active:not(:disabled):not(.disabled) {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
}

/* Hover Effect dengan Elevation */
.btn-primary:hover:not(:disabled):not(.disabled),
.btn-success:hover:not(:disabled):not(.disabled),
.btn-info:hover:not(:disabled):not(.disabled),
.btn-warning:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Button Loading State - Rotating Spinner */
.btn-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
    color: transparent !important;
}

.btn-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: btn-spinner 0.6s linear infinite !important;
}

/* Dark mode spinner */
[data-bs-theme="dark"] .btn-loading::after {
    border-color: rgba(0,0,0,0.3) !important;
    border-top-color: #000 !important;
}

@keyframes btn-spinner {
    to { transform: rotate(360deg); }
}

/* Success State - Pulse Animation */
.btn-success-flash {
    animation: success-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes success-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(10, 179, 156, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(10, 179, 156, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(10, 179, 156, 0);
    }
}

/* Error State - Shake Animation */
.btn-error-shake {
    animation: error-shake 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-8px); }
    30%, 70% { transform: translateX(8px); }
}

/* ========================================================================
   2. FORM VALIDATION ANIMATIONS - REAL-TIME FEEDBACK
   ======================================================================== */

/* Base Input Transition */
.form-control,
.form-select {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Focus State Enhancement */
.form-control:focus,
.form-select:focus {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Valid State - Green Border with Slide Animation */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #0ab39c !important;
    border-width: 2px !important;
    animation: input-valid-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes input-valid-slide {
    from {
        border-color: var(--vz-input-border);
        box-shadow: none;
    }
    to {
        border-color: #0ab39c;
        box-shadow: 0 0 0 0.2rem rgba(10, 179, 156, 0.15);
    }
}

/* Invalid State - Red Border with Shake */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #f06548 !important;
    border-width: 2px !important;
    animation: input-invalid-shake 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes input-invalid-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Validation Feedback Messages - Fade In */
.valid-feedback,
.invalid-feedback {
    animation: feedback-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes feedback-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================
   3. SKELETON LOADERS - MODERN LOADING STATES
   ======================================================================== */

/* Base Skeleton Animation */
@keyframes skeleton-loading {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* Skeleton Chart Placeholder */
.skeleton-chart {
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e8e8e8 40px,
        #f0f0f0 80px
    ) !important;
    background-size: 600px !important;
    animation: skeleton-loading 1.5s ease-in-out infinite !important;
    border-radius: 0.5rem !important;
    height: 350px !important;
    width: 100% !important;
}

/* Dark Mode Skeleton */
[data-bs-theme="dark"] .skeleton-chart {
    background: linear-gradient(
        90deg,
        #2a2f34 0px,
        #343a40 40px,
        #2a2f34 80px
    ) !important;
    background-size: 600px !important;
}

/* Skeleton Table Row */
.skeleton-row {
    height: 48px !important;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e8e8e8 40px,
        #f0f0f0 80px
    ) !important;
    background-size: 600px !important;
    animation: skeleton-loading 1.5s ease-in-out infinite !important;
    border-radius: 0.25rem !important;
    margin-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .skeleton-row {
    background: linear-gradient(
        90deg,
        #2a2f34 0px,
        #343a40 40px,
        #2a2f34 80px
    ) !important;
    background-size: 600px !important;
}

/* Skeleton Card */
.skeleton-card {
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e8e8e8 40px,
        #f0f0f0 80px
    ) !important;
    background-size: 600px !important;
    animation: skeleton-loading 1.5s ease-in-out infinite !important;
    border-radius: 0.5rem !important;
    height: 120px !important;
}

[data-bs-theme="dark"] .skeleton-card {
    background: linear-gradient(
        90deg,
        #2a2f34 0px,
        #343a40 40px,
        #2a2f34 80px
    ) !important;
    background-size: 600px !important;
}

/* ========================================================================
   4. CARD & TABLE ANIMATIONS
   ======================================================================== */

/* Card Hover Effect */
.card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .card-hover:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Table Row Animations */
@keyframes row-add {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.row-added {
    animation: row-add 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes row-delete {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 100px;
    }
    to {
        opacity: 0;
        transform: translateX(20px);
        max-height: 0;
    }
}

.row-deleted {
    animation: row-delete 0.3s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
}

@keyframes row-highlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(10, 179, 156, 0.15); }
}

.row-highlighted {
    animation: row-highlight 1s ease-in-out !important;
}

/* ========================================================================
   5. PAGE CONTENT FADE IN
   ======================================================================== */

.page-content {
    animation: page-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================
   6. ACCESSIBILITY - REDUCED MOTION SUPPORT
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable skeleton loading animation */
    .skeleton-chart,
    .skeleton-row,
    .skeleton-card {
        animation: none !important;
        background: #f0f0f0 !important;
    }

    [data-bs-theme="dark"] .skeleton-chart,
    [data-bs-theme="dark"] .skeleton-row,
    [data-bs-theme="dark"] .skeleton-card {
        background: #2a2f34 !important;
    }
}

/* ========================================================================
   END OF PHASE 1 ANIMATIONS
   ======================================================================== */

/* ========================================================================
   PHASE 2: ADVANCED ANIMATIONS - BEST PRACTICES 2025
   Implemented: Modals, Micro-interactions, Tooltips, Icon Effects
   ======================================================================== */

/* ========================================================================
   1. MODAL ANIMATIONS - SMOOTH ENTRANCE/EXIT
   ======================================================================== */

/* Bootstrap Modal Enhancements */
.modal.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
    transform: scale(0.9) translateY(-20px) !important;
    opacity: 0 !important;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

/* Large Modal - Slide from Right */
.modal-lg.fade .modal-dialog,
.modal-xl.fade .modal-dialog {
    transform: translateX(50px) !important;
}

.modal-lg.show .modal-dialog,
.modal-xl.show .modal-dialog {
    transform: translateX(0) !important;
}

/* Modal Backdrop Smooth Fade */
.modal-backdrop.fade {
    transition: opacity 0.2s ease !important;
}

/* ========================================================================
   2. MICRO-INTERACTIONS - TOOLTIPS & POPOVERS
   ======================================================================== */

/* Tooltip Smooth Fade */
.tooltip.fade {
    transition: opacity 0.15s ease !important;
}

.tooltip.show {
    animation: tooltip-bounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes tooltip-bounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Popover Animation */
.popover.fade {
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: scale(0.95) !important;
}

.popover.show {
    transform: scale(1) !important;
}

/* ========================================================================
   3. ICON ANIMATIONS - INTERACTIVE FEEDBACK
   ======================================================================== */

/* Icon Spin on Hover */
.icon-spin-hover:hover {
    animation: icon-spin 0.6s ease-in-out !important;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Icon Pulse Effect */
.icon-pulse {
    animation: icon-pulse-animation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes icon-pulse-animation {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Icon Bounce on Hover */
.icon-bounce-hover:hover {
    animation: icon-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Icon Shake - For Notifications/Alerts */
.icon-shake {
    animation: icon-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes icon-shake-animation {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Icon Scale Hover - Universal */
i:not(.no-hover):hover,
.ri:hover,
.feather:hover {
    transform: scale(1.15);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   4. BADGE ANIMATIONS
   ======================================================================== */

/* Badge Slide In */
.badge-slide-in {
    animation: badge-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes badge-slide {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Badge Pulse for Notifications */
.badge-pulse {
    animation: badge-pulse-animation 1.5s ease-in-out infinite !important;
}

@keyframes badge-pulse-animation {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--vz-danger-rgb), 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(var(--vz-danger-rgb), 0);
    }
}

/* ========================================================================
   5. DROPDOWN ENHANCEMENTS
   ======================================================================== */

/* Smooth Dropdown Menu Animation */
.dropdown-menu {
    animation: dropdown-fadein 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes dropdown-fadein {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Item Hover */
.dropdown-item {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dropdown-item:hover {
    transform: translateX(4px) !important;
}

/* ========================================================================
   6. ACCORDION SMOOTH TRANSITIONS
   ======================================================================== */

/* Bootstrap Accordion Enhancement */
.accordion-button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(var(--vz-primary-rgb), 0.08) !important;
}

.accordion-collapse {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================================================
   7. PROGRESS BAR ANIMATIONS
   ======================================================================== */

/* Animated Progress Bar */
.progress-bar {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Progress Bar Striped Animation Speed */
.progress-bar-striped {
    background-size: 1rem 1rem !important;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite !important;
}

@keyframes progress-bar-stripes {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

/* ========================================================================
   8. OFFCANVAS SMOOTH SLIDE
   ======================================================================== */

/* Offcanvas Enhancement */
.offcanvas {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.offcanvas-backdrop.fade {
    transition: opacity 0.25s ease !important;
}

/* ========================================================================
   9. ALERT ANIMATIONS
   ======================================================================== */

/* Alert Slide Down */
.alert {
    animation: alert-slidein 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes alert-slidein {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert Fade Out on Dismiss */
.alert.fade.show {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* ========================================================================
   10. TAB TRANSITIONS
   ======================================================================== */

/* Tab Content Fade */
.tab-content > .tab-pane {
    transition: opacity 0.2s ease !important;
}

.tab-content > .tab-pane:not(.active) {
    opacity: 0;
}

.tab-content > .tab-pane.active {
    opacity: 1;
    animation: tab-fadein 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes tab-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================
   11. SPINNER VARIANTS
   ======================================================================== */

/* Smooth Spinner */
.spinner-border,
.spinner-grow {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Custom Spinner Sizes */
.spinner-border-xs {
    width: 1rem !important;
    height: 1rem !important;
    border-width: 0.15rem !important;
}

/* ========================================================================
   END OF PHASE 2 ANIMATIONS
   ======================================================================== */

/* ========================================================================
   VELZON ORIGINAL - DROPDOWN ANIMATION
   Copied from official Velzon template
   ======================================================================== */

/* Keyframes animation - exact copy from Velzon */
@keyframes DropDownSlide {
    to {
        margin-top: -1px;
    }
    0% {
        margin-top: 8px;
    }
}

@keyframes DropDownSlideDown {
    to {
        margin-bottom: 0;
    }
    0% {
        margin-bottom: 8px;
    }
}

/* Apply to all dropdown menus */
.dropdown-menu {
    box-shadow: 0 5px 10px rgba(30, 32, 37, 0.12);
    animation-name: DropDownSlide;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

/* For dropdowns that open upwards */
.dropdown-menu[data-popper-placement="top-start"],
.dropdown-menu[data-popper-placement="top-end"] {
    animation-name: DropDownSlideDown;
}

/* Enhanced styling for topbar dropdown */
.topbar-user .dropdown-menu {
    margin-top: 0.5rem;
}

/* Dark mode support */
[data-bs-theme="dark"] .dropdown-menu {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* Smooth hover effect on dropdown items */
.topbar-user .dropdown-item {
    transition: all 0.2s ease;
}

.topbar-user .dropdown-item:hover {
    background-color: rgba(var(--vz-primary-rgb), 0.08);
    padding-left: 1.75rem;
}