/* Import Google Fonts - Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent; /* Menghilangkan highlight biru saat elemen disentuh di HP */
}

/* Utility untuk memotong teks menjadi beberapa baris (line-clamp) */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Custom Scrollbar untuk Tampilan Modern Desktop */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animasi Interaktif */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideUpMobile {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glassmorphism untuk Developer Console dan Modal */
.glass-panel {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Custom Focus Ring Form Control */
.custom-focus:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.custom-focus-emerald:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
}

/* ==========================================================================
   OPTIMASI KHUSUS MOBILE (HP & TABLET) - RESPONSIVE UI/UX
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Mencegah auto-zoom yang mengganggu di browser iOS Safari saat input diklik */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* 2. Touch Target Padding (Mempermudah jari guru/karyawan mengetuk tombol) */
    button, a, select, input {
        min-height: 44px; /* Standar kenyamanan ergonomis Apple & Android */
    }

    /* 3. Transformasi Modal Unggah Berkas menjadi Bottom-Sheet ala aplikasi Native */
    #upload-modal,
    #folder-modal,
    #edit-modal {
        align-items: flex-end; /* Memindahkan modal ke bagian bawah layar */
        padding: 0;
    }

    #upload-modal > div,
    #folder-modal > div,
    #edit-modal > div {
        border-radius: 28px 28px 0 0 !important; /* Membuat sudut membulat hanya di bagian atas */
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        transform: translateY(100%);
        animation: slideUpMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Handle garis penarik dekoratif di atas modal bottom sheet */
    #upload-modal > div::before,
    #folder-modal > div::before,
    #edit-modal > div::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        margin: 10px auto 0 auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Menambahkan padding atas di form modal agar konten tidak tertutup penarik modal */
    #upload-modal form,
    #folder-modal form,
    #edit-modal form {
        padding-top: 1.5rem;
    }

    /* 4. Scroll Horizontal Indikator pada Tabel Dokumen */
    .overflow-x-auto {
        position: relative;
        -webkit-overflow-scrolling: touch; /* Membuat scroll terasa sangat mulus di iOS */
    }

    /* Mengurangi ukuran padding tabel di HP agar muat lebih banyak informasi */
    table th, table td {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 5. Minimalisir Developer Console agar tidak menutupi layar HP */
    #developer-console-panel {
        height: 240px;
        transform: translateY(195px); /* Menampilkan judul console saja di bawah */
    }
    #developer-console-panel.translate-y-\[240px\] {
        transform: translateY(195px);
    }
    #developer-console-panel:not(.translate-y-\[240px\]) {
        transform: translateY(0px) !important;
    }
    #developer-console-panel div.p-6 {
        height: 190px;
    }

    /* 6. Atur spacing dashboard utama di HP */
    main {
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
        gap: 1.5rem !important;
    }

    /* Grid Statistik menjadi 2 baris x 2 kolom di HP */
    .grid-cols-2 {
        gap: 0.75rem !important;
    }
    
    .grid-cols-2 > div {
        padding: 1rem !important;
        border-radius: 20px !important;
    }
}