* { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; padding: 0; }
  body { font-family: 'Plus Jakarta Sans', sans-serif; }
  .app-root { height: 100%; }

  ::-webkit-scrollbar { width: 15px; height: 15px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; }

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

  @keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .anim-fade { animation: fadeUp 0.5s ease both; }

  .anim-slide { animation: slideIn 0.35s ease both; }
  .pulse-dot { animation: pulse-dot 2s infinite; }

  

  .data-table { border-collapse: separate; border-spacing: 0; }
  .data-table th { position: sticky; top: 0; z-index: 2; }
  .data-table tr:hover td { background: #1e293b; }

  .sidebar-btn { transition: all 0.2s; }
  .sidebar-btn:hover, .sidebar-btn.active { 
            background: rgba(16, 185, 129, 0.15); 
            color: #34d399;}
  .sidebar-btn.active { border-right: 3px solid #10b981; }

  .modal-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }

  

  .toast { animation: slideIn 0.3s ease both; }

  .table-wrap { overflow-x: auto; }
  .tab-btn.active { background: #4f46e5; color: #fff; }

/* CSS MENU LOGIN */
.anim-fade {  animation: fadeIn 0.25s ease; } 
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

  
    /* Membuat garis pembatas antar kolom agar navigasi horizontal jelas */
    .table-bordered th, .table-bordered td {
        border-right: 1px solid #334155; /* Warna border disesuaikan dengan tema gelap Anda */
    }
    
    /* Efek sorotan baris saat mouse di atasnya agar data tidak tertukar */
    tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Memastikan tabel tetap rapi saat di-scroll */
    .overflow-x-auto {
        scrollbar-width: auto;
        scrollbar-color: #475569 #1e293b;
    }

    /* Tambahkan ini di style */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: #0f172a; /* Sesuaikan dengan warna background baris Anda */
    z-index: 10;
    border-right: 2px solid #475569;
}



    /* Membuat header tabel menempel di atas saat di-scroll */
    thead {
        position: sticky;
        top: 0;
        z-index: 20; /* Lebih tinggi dari kolom Nama (sticky kiri) agar header selalu di depan */
        background-color: #0f172a; /* Sesuaikan dengan warna background header Anda */
    }

/* Animasi Loading Overlay */
  @keyframes spin-reverse {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
    }
    .animate-spin-reverse {
        animation: spin-reverse 1s linear infinite;
    }