/* --- CSS ANIMASI TAILWIND CUSTOM --- */
@keyframes slideInFromLeft {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInFromTopSoft {
    0% { transform: translateY(-15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes dropDownFade {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Kondisi Default (Saat pindah menu / bukan refresh): Langsung tampil penuh */
.animasi-sidebar .sidebar-stagger-1,
.animasi-sidebar .sidebar-stagger-2,
.animasi-sidebar .sidebar-stagger-3,
.animasi-sidebar .sidebar-stagger-4,
.animasi-sidebar .sidebar-stagger-5,
.animasi-sidebar .sidebar-stagger-6,
.animasi-sidebar .sidebar-stagger-7,
.animasi-sidebar .sidebar-stagger-8,
.animasi-sidebar .sidebar-stagger-9,
.animasi-sidebar .sidebar-stagger-10 {
    opacity: 1;
}

/* Kondisi HANYA SAAT DIREFRESH (Desktop & Tablet) */
html.animate-sidebar .animasi-sidebar {
    animation: slideInFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

html.animate-sidebar .animasi-sidebar .sidebar-stagger-1,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-2,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-3,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-4,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-5,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-6,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-7,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-8,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-9,
html.animate-sidebar .animasi-sidebar .sidebar-stagger-10 {
    opacity: 0;
    animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Jeda Waktu Stagger (Desktop) */
html.animate-sidebar .animasi-sidebar .sidebar-stagger-1  { animation-delay: 0.05s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-2  { animation-delay: 0.12s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-3  { animation-delay: 0.18s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-4  { animation-delay: 0.24s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-5  { animation-delay: 0.30s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-6  { animation-delay: 0.36s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-7  { animation-delay: 0.42s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-8  { animation-delay: 0.48s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-9  { animation-delay: 0.54s !important; }
html.animate-sidebar .animasi-sidebar .sidebar-stagger-10 { animation-delay: 0.62s !important; }

/* ==========================================================
   OPTIMASI KHUSUS MODE MOBILE (Layar < 768px / md breakpoint)
   ========================================================== */
@media (max-width: 767px) {
    /* Pangkas jarak geser animasi agar lebih ringkas di layar kecil */
    @keyframes slideInMobile {
        0% { opacity: 0; transform: translateX(-15px); }
        100% { opacity: 1; transform: translateX(0); }
    }

    .main-sidebar {
        animation: slideInMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .main-sidebar .sidebar-stagger-1,
    .main-sidebar .sidebar-stagger-2,
    .main-sidebar .sidebar-stagger-3,
    .main-sidebar .sidebar-stagger-4,
    .main-sidebar .sidebar-stagger-5,
    .main-sidebar .sidebar-stagger-6,
    .main-sidebar .sidebar-stagger-7,
    .main-sidebar .sidebar-stagger-8,
    .main-sidebar .sidebar-stagger-9,
    .main-sidebar .sidebar-stagger-10 {
        opacity: 0;
        animation: slideInMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Jeda Waktu Stagger khusus Mobile agar berurutan mulus */
    .main-sidebar .sidebar-stagger-1  { animation-delay: 0.03s; }
    .main-sidebar .sidebar-stagger-2  { animation-delay: 0.06s; }
    .main-sidebar .sidebar-stagger-3  { animation-delay: 0.09s; }
    .main-sidebar .sidebar-stagger-4  { animation-delay: 0.12s; }
    .main-sidebar .sidebar-stagger-5  { animation-delay: 0.15s; }
    .main-sidebar .sidebar-stagger-6  { animation-delay: 0.18s; }
    .main-sidebar .sidebar-stagger-7  { animation-delay: 0.21s; }
    .main-sidebar .sidebar-stagger-8  { animation-delay: 0.24s; }
    .main-sidebar .sidebar-stagger-9  { animation-delay: 0.27s; }
    .main-sidebar .sidebar-stagger-10 { animation-delay: 0.30s; }
}


/* Animasi untuk Grid Card & Grafik Dashboard */
.dashboard-card-anim {
    animation: dropDownFade 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* Stagger Card Dashboard */
.card-stagger-1 { animation-delay: 0.82s; }
.card-stagger-2 { animation-delay: 0.97s; }
.card-stagger-3 { animation-delay: 1.12s; }
.card-stagger-4 { animation-delay: 1.27s; }
.card-stagger-5 { animation-delay: 1.42s; }
.card-stagger-6 { animation-delay: 1.57s; }
.card-stagger-7 { animation-delay: 1.72s; }
.card-stagger-8 { animation-delay: 1.87s; }
.card-stagger-9 { animation-delay: 2.02s; }
.card-stagger-10 { animation-delay: 2.17s; }
.card-stagger-11 { animation-delay: 2.80s; }

/* SVG Circle Progress */
.svg-circle-ring {
    width: 100px;
    height: 100px;
    transform: rotate(-90deg);
}

.svg-circle-bg {
    fill: none;
    stroke: #f3f4f6;
    stroke-width: 8;
}

.svg-circle-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: fillProgress 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fillProgress {
    from { stroke-dashoffset: 283; }
    to { stroke-dashoffset: 0; }
}

/* Warna Stroke Animasi */
.stroke-primary   { stroke: #3b82f6; }
.stroke-success   { stroke: #10b981; }
.stroke-warning   { stroke: #f59e0b; }
.stroke-info      { stroke: #06b6d4; }
.stroke-danger    { stroke: #ef4444; }
.stroke-secondary { stroke: #6b7280; }

/* Styling Sidebar Collapse HANYA untuk Layar Desktop (xl ke atas) */
@media (min-width: 1280px) {
    .main-sidebar {
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
    }

    .main-sidebar.collapsed {
        width: 80px !important;
    }
    .main-sidebar.collapsed .menu-text {
        display: none !important;
    }
    .main-sidebar.collapsed .menu-header-wrap {
        display: none !important;
    }
    .main-sidebar.collapsed a {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .main-sidebar.collapsed i {
        margin-right: 0 !important;
        font-size: 1.1rem;
    }

    /* Kondisi awal saat halaman dimuat dalam keadaan tersimpan collapsed (Khusus Desktop) */
    .sidebar-is-collapsed .main-sidebar {
        width: 80px !important;
    }
    .sidebar-is-collapsed .main-sidebar .menu-text {
        display: none !important;
    }
    .sidebar-is-collapsed .main-sidebar .menu-header-wrap {
        display: none !important;
    }
    .sidebar-is-collapsed .main-sidebar a {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sidebar-is-collapsed .main-sidebar i {
        margin-right: 0 !important;
        font-size: 1.1rem;
    }

    /* Sembunyikan gambar logo saat collapsed */
    .main-sidebar.collapsed a img,
    .sidebar-is-collapsed .main-sidebar a img {
        display: none !important;
    }

    /* Rapikan posisi pembungkus logo/tombol saat collapsed agar tombol tetap simetris di tengah */
    .main-sidebar.collapsed .sidebar-stagger-1,
    .sidebar-is-collapsed .main-sidebar .sidebar-stagger-1 {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .main-sidebar.collapsed .sidebar-stagger-1 a,
    .sidebar-is-collapsed .main-sidebar .sidebar-stagger-1 a {
        display: none !important;
    }
}

/* Matikan transisi HANYA saat halaman sedang di-preload/pindah halaman */
.preload .main-sidebar {
    transition: none !important;
}

/* ==========================================================
    KUSTOMISASI SWEETALERT2 TOAST (MERAH & ANIMASI SLIDE)
   ========================================================== */

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.swal2-slide-in-right {
    animation: slideInFromRight 0.4s ease-out forwards !important;
}

.swal2-slide-out-right {
    animation: slideOutToRight 0.4s ease-in forwards !important;
}

/* Memastikan progress bar berjalan dari kiri ke kanan dengan warna putih */
.swal2-timer-progress-bar {
    background-color: #ffffff !important;
    transform-origin: left;
}

/* Styling agar border lingkaran dan centang sukses berubah jadi putih */
.custom-success-toast .swal2-success {
    border-color: #ffffff !important;
}

/* Mengubah warna ring lingkaran menjadi putih */
.custom-success-toast .swal2-success-ring {
    border-color: #ffffff !important;
}

/* Memaksa garis centang di dalamnya menjadi putih bersih */
.custom-success-toast .swal2-success-line-tip, 
.custom-success-toast .swal2-success-line-long {
    background-color: #ffffff !important;
}

/* Memastikan teks judul tetap putih bersih dan tebal */
.custom-success-toast .swal2-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ==========================================================
    ANIMASI LANDING PAGE
   ========================================================== */

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideDown {
  animation: slideDown 0.5s ease-out forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeInLeft {
  animation: fadeInLeft 1s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 1s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

html {
  scroll-behavior: smooth;
}