/* =====================================================================
   responsive.css — Global Responsive Stylesheet
   Sistem Informasi Perpustakaan SMA Negeri 10 Pontianak
   Breakpoints:
     - Desktop/PC  : ≥ 1200px
     - Laptop      : 900px – 1199px
     - Tablet      : 640px – 899px
     - Mobile      : ≤ 639px
     - Mobile kecil: ≤ 480px
   ===================================================================== */

/* ════════════════════════════════════════════
   1. VIEWPORT META FIX & BASE UTILITIES
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }
table { width: 100%; }

/* Utility: overflow-x scroll untuk tabel responsif */
.responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Touch-friendly minimum tap target */
button, a, [role="button"] {
    min-height: 36px;
    touch-action: manipulation;
}

/* Global utility: Ensure mobile-hidden elements are visible on desktop by default */
@media (min-width: 769px) {
    .mobile-hidden {
        display: flex !important;
    }
}

/* =====================================================================
   Table Desktop vs Mobile Toggles
   ===================================================================== */
.dt-only { display: table-cell; }
.mb-only { display: none !important; }

@media (max-width: 768px) {
    .dt-only { display: none !important; }
    .mb-only { display: block !important; }
}

/* ════════════════════════════════════════════
   2. ADMIN & PETUGAS — SIDEBAR LAYOUT
════════════════════════════════════════════ */

/* Pastikan sidebar dengan class mobile-open SELALU terlihat */
@media (max-width: 900px) {
    /* Sidebar: slide-in dari kiri di mobile */
    .sidebar {
        transform: translateX(-100%) !important;
        width: 260px !important;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
        z-index: 1200 !important;
    }
    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    .sidebar.collapsed {
        transform: translateX(-100%) !important;
    }
    .sidebar.collapsed.mobile-open {
        transform: translateX(0) !important;
        width: 260px !important;
    }

    /* Semua link & label sidebar tampil normal di mobile */
    .sidebar .link-label,
    .sidebar .link-badge,
    .sidebar .nav-group-label,
    .sidebar .brand-text,
    .sidebar .petugas-detail,
    .sidebar .sidebar-role {
        display: flex !important;
        opacity: 1 !important;
        width: auto !important;
    }
    .sidebar .link-label { flex: 1; }
    .sidebar .sidebar-link { justify-content: flex-start !important; }
    .sidebar .logout-btn { display: flex !important; }
    .sidebar .sidebar-footer { justify-content: flex-start !important; }

    /* Main wrap: hapus margin karena sidebar floating */
    .main-wrap {
        margin-left: 0 !important;
    }
    .main-wrap.expanded {
        margin-left: 0 !important;
    }

    /* Overlay sidebar */
    .sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1100 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s !important;
        backdrop-filter: blur(2px) !important;
    }
    .sidebar-overlay.show {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* Topbar */
    .topbar { padding: 0 14px !important; }
    .topbar-title span { display: none; }
    .topbar-breadcrumb { display: none; }

    /* Compact Topbar Button for Mobile */
    @media (max-width: 480px) {
        .topbar { gap: 8px !important; }
        .topbar-title h1 { font-size: 14px !important; }
        
        #topbarBtn, #btnAjukanPenghapusan {
            padding: 0 8px !important;
            height: 28px !important;
            font-size: 10.5px !important;
            border-radius: 6px !important;
            gap: 4px !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }
        #topbarBtn svg, #btnAjukanPenghapusan svg { width: 10px !important; height: 10px !important; }
        
        /* Hide labels on small mobile to prevent overlap */
        #topbarBtnLabel, 
        #topbarBtn .hide-on-mobile,
        #btnAjukanPenghapusan .hide-on-mobile { 
            display: none !important; 
        }
    }

    /* Content area */
    .content { padding: 18px 16px 48px !important; gap: 16px !important; }
}

@media (max-width: 640px) {
    .content { padding: 14px 12px 48px !important; gap: 14px !important; }
    .topbar-title h1 { font-size: 15px !important; }

    /* Sembunyikan kolom non-esensial di tabel */
    .hide-mobile { display: none !important; }

    /* Toast lebih kecil di mobile */
    .toast {
        font-size: 12px !important;
        padding: 9px 16px !important;
        max-width: calc(100vw - 24px) !important;
        white-space: normal !important;
        text-align: center !important;
        bottom: 20px !important;
    }
}

/* ════════════════════════════════════════════
   3. MINI STATS CARDS — SEMUA ROLE
════════════════════════════════════════════ */
.mini-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .mini-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    .mini-stats { 
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; 
        gap: 6px !important; 
    }
    .mini-stat { 
        padding: 8px 10px !important; 
        border-radius: 10px !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    /* Biar item ganjil/terakhir memenuhi sisa baris */
    .mini-stat:last-child:nth-child(odd):not(:nth-child(2)) {
        grid-column: 1 / -1 !important;
    }

    .mini-val  { 
        font-size: 18px !important; 
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }
    .mini-label { 
        font-size: 9px !important; 
        line-height: 1.2 !important;
    }
    .mini-stat .mini-icon, .mini-stat svg {
        display: none !important;
    }
}

/* ════════════════════════════════════════════
   4. TOOLBAR & FILTER ROW
════════════════════════════════════════════ */
.toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.search-wrap {
    flex: 1 1 320px !important;
    min-width: 260px !important;
}

.search-input {
    height: 42px !important;
    font-size: 13.5px !important;
}

.filter-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .search-wrap { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }
    .filter-group { width: 100% !important; justify-content: flex-start !important; }
    .toolbar { gap: 8px !important; }
    .search-input { font-size: 13px !important; }
    
    /* Custom select di filter lebih kecil */
    .cs-trigger { font-size: 12px !important; padding: 7px 10px !important; }
    .filter-reset { padding: 7px 12px !important; font-size: 12px !important; }
}

/* ════════════════════════════════════════════
   5. BOOK GRID — KOLEKSI
════════════════════════════════════════════ */
.book-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 900px) {
    .book-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; gap: 12px !important; }
}

@media (max-width: 640px) {
    .book-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .book-cover { height: 150px !important; }
    .book-judul { font-size: 12px !important; }
    .book-penulis { font-size: 11px !important; }
}

@media (max-width: 380px) {
    .book-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .book-cover { height: 130px !important; }
}

/* ════════════════════════════════════════════
   6. MODAL — SEMUA ROLE
════════════════════════════════════════════ */
/* Admin/Petugas modals (kol-modal style) */
.kol-modal-overlay,
.modal-overlay {
    padding: 12px !important;
    align-items: flex-end !important;
}

@media (min-width: 640px) {
    .kol-modal-overlay,
    .modal-overlay {
        align-items: center !important;
        padding: 20px !important;
    }
}

.kol-modal {
    width: 100% !important;
    max-width: 560px !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 16px 16px !important;
}

@media (min-width: 640px) {
    .kol-modal { border-radius: 20px !important; }
}

.kol-modal-xl {
    max-width: 860px !important;
}

.kol-modal-scroll {
    max-height: calc(90vh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Modal dua-panel (cover+form) jadi stack di mobile */
.form-two-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

@media (min-width: 700px) {
    .form-two-panel {
        flex-direction: row !important;
        gap: 24px !important;
    }
    .form-cover-panel { width: 220px !important; flex-shrink: 0 !important; }
    .form-fields-panel { flex: 1 !important; }
}

/* Form grid 2 kolom → 1 kolom di mobile */
.form-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
}

.form-grid-2 .fg2-full {
    grid-column: 1 / -1 !important;
}

@media (max-width: 520px) {
    .form-grid-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
    .form-grid-2 .fg2-full { grid-column: auto !important; }
    .kol-modal { padding: 16px !important; }
    .kol-modal-header { padding: 0 0 14px !important; gap: 10px !important; }
}

/* Petugas koleksi modal (class lain) */
.modal-form { max-height: 90vh !important; }

/* ════════════════════════════════════════════
   7. TABLE — SEMUA ROLE
════════════════════════════════════════════ */
.table-wrap,
.kol-table-wrap,
.lay-table-wrap,
.usr-table-wrap,
.lap-table-wrap,
.pjn-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    /* Kurangi padding cell tabel di mobile */
    .data-table th,
    .data-table td {
        padding: 9px 10px !important;
        font-size: 11.5px !important;
    }

    /* Tombol aksi tabel lebih kecil */
    .td-actions .act-btn,
    .td-actions button {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ════════════════════════════════════════════
   8. DASHBOARD — CHART & PANEL GRID
════════════════════════════════════════════ */
/* Semua layout 2-kolom di dashboard */
.two-col,
.db-two-col,
.dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
}

@media (max-width: 900px) {
    .two-col,
    .db-two-col,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Chart container */
.chart-wrap,
.chart-container {
    width: 100% !important;
    overflow: hidden !important;
}

/* ════════════════════════════════════════════
   9. ANGGOTA/SISWA — NAVBAR & HALAMAN
════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Bottom padding buat ruang mobile nav */
    body.anggota-body { padding-bottom: 72px !important; }
    
    /* Page wrap lebih compact */
    .page-wrap {
        padding: 16px 12px !important;
    }
}

@media (max-width: 480px) {
    .page-wrap { padding: 12px 10px !important; }
    .page-title { font-size: 20px !important; }
}

/* ════════════════════════════════════════════
   10. FORM ELEMENTS — INPUT, BUTTON, SELECT
════════════════════════════════════════════ */
@media (max-width: 640px) {
    .form-input,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Cegah auto-zoom di iOS */
    }

    /* Tombol aksi besar → full width di mobile kecil */
    .btn-primary,
    .btn-tambah,
    .kol-modal-confirm,
    .kol-modal-cancel {
        padding: 11px 16px !important;
        font-size: 13px !important;
    }
}

/* ════════════════════════════════════════════
   11. LAPORAN — FILTER & CHART
════════════════════════════════════════════ */
.lap-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

@media (max-width: 640px) {
    .lap-filter-row > * { width: 100% !important; flex: 1 1 100% !important; }
    .lap-chart-panel { overflow-x: auto !important; }
}

/* ════════════════════════════════════════════
   12. PENGATURAN GRID
════════════════════════════════════════════ */
.pengaturan-grid,
.settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 768px) {
    .pengaturan-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════
   13. LAYANAN / PEMINJAMAN — ACTION ROW
════════════════════════════════════════════ */
.pmj-action-bar,
.layanan-action-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .pmj-action-bar,
    .layanan-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .pmj-action-bar > *,
    .layanan-action-bar > * {
        width: 100% !important;
    }
}

/* ════════════════════════════════════════════
   14. AUTH PAGES — LOGIN / REGISTER
════════════════════════════════════════════ */
@media (max-width: 540px) {
    .auth-card,
    .login-card,
    .register-card {
        margin: 12px !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
}

/* ════════════════════════════════════════════
   15. PROFIL — SEMUA ROLE
════════════════════════════════════════════ */
.profil-grid,
.profile-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 20px !important;
}

@media (max-width: 900px) {
    .profil-grid,
    .profile-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════
   16. CARD / PANEL RESPONSIVENESS
════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Radius lebih kecil di mobile */
    .panel,
    .kol-modal,
    .card {
        border-radius: 12px !important;
    }

    /* Panel head lebih compact */
    .panel-head {
        padding: 14px 16px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ════════════════════════════════════════════
   17. LANDING PAGE
════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 20px !important;
        text-align: center !important;
    }
    .hero-title { font-size: 28px !important; }
    .feature-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════
   18. PRINT (untuk surat bebas pinjam, PDF)
════════════════════════════════════════════ */
@media print {
    .sidebar, .topbar, .navbar,
    .mobile-nav, .toast, .nav-hamburger,
    .btn-primary, .btn-tambah,
    .no-print { display: none !important; }
    .main-wrap { margin-left: 0 !important; }
    body { padding: 0 !important; background: white !important; }
}

/* ════════════════════════════════════════════
   19. PETUGAS ARSIP LAYOUT (NESTED PAGES)
════════════════════════════════════════════ */
@media (max-width: 640px) {
    .arsip-wrap { padding: 14px 12px !important; }
    .arsip-filter { flex-direction: column !important; gap: 8px !important; }
    .arsip-filter > * { width: 100% !important; }
}

/* ════════════════════════════════════════════
   20. BOTTOM NAV ANGGOTA — safe area for iPhone
════════════════════════════════════════════ */
.mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ════════════════════════════════════════════
   21. SCROLL FIX — Prevent horizontal scroll
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
   21. SCROLL FIX — Prevent horizontal scroll
   Updated for Admin & Petugas responsiveness
════════════════════════════════════════════ */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
}

/* Fix flexbox min-width auto issue that causes tables to stretch page width */
.main-wrap, .content, .page-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

.panel, .card, .sub-section {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ════════════════════════════════════════════
   22. FOCUS & ACCESSIBILITY
════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid #38974f !important;
    outline-offset: 2px !important;
}

/* ════════════════════════════════════════════
   23. UNIFIED STAT GRIDS (ALL ROLES)
════════════════════════════════════════════ */
.lay-stats, 
.stat-row, 
.db-stats, 
.stats-grid, 
.mini-stats, 
.sc-grid, 
.keu-cards, 
.kpi-grid, 
.dashboard-stats,
.prof-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    gap: 10px !important;
}

/* Tablet / Laptop Zoom */
@media (max-width: 1200px) {
    .lay-stats, .stat-row, .db-stats, .stats-grid, .mini-stats, .sc-grid, .keu-cards, .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    /* FORCE 2 COLUMNS FOR ALL STAT GRIDS */
    .lay-stats, 
    .stat-row, 
    .db-stats, 
    .stats-grid, 
    .sc-grid, 
    .keu-cards, 
    .kpi-grid, 
    .prof-stats,
    .dashboard-stats,
    .mini-stats { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important; 
        width: 100% !important;
    }
    
    /* Biar item ganjil di baris terakhir memenuhi lebar jika dia sendirian */
    .stat-card:last-child:nth-child(odd),
    .db-stat:last-child:nth-child(odd),
    .sc-card:last-child:nth-child(odd),
    .keu-card:last-child:nth-child(odd),
    .kpi-card:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
    
    /* Perkecil padding & konten card agar pas 2 per baris */
    .db-stat, .stat-card, .mini-stat, .keu-card, .kpi-card, .sc-card {
        padding: 10px 8px !important; 
        border-radius: 12px !important;
        min-height: 60px !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Sembunyikan icon stat agar lebih bersih di layar sangat kecil (opsional, perkecil saja) */
    .dbs-icon-wrap, .stat-icon, .mini-icon, .keu-icon, .kpi-icon, .sc-icon-wrap, .sc-icon {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 4px !important;
    }
    
    .dbs-icon-wrap svg, .stat-icon svg, .mini-icon svg, .keu-icon svg, .kpi-icon svg, .sc-icon-wrap svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Sesuaikan font size */
    .dbs-val, .stat-val, .mini-val, .keu-val, .kpi-val, .sc-val {
        font-size: 18px !important; 
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dbs-label, .stat-label, .mini-label, .keu-label, .kpi-label, .sc-label {
        font-size: 9px !important; 
        line-height: 1.1 !important;
        white-space: normal !important;
        margin-top: 2px !important;
    }

    /* Sembunyikan badge tambahan jika mengganggu di mobile */
    .sc-badge {
        display: none !important;
    }
}

/* Mobile Kecil */
@media (max-width: 480px) {
    /* Tetap paksa 2 kolom sesuai permintaan user */
    .lay-stats, .stat-row, .db-stats, .stats-grid, .mini-stats, .sc-grid, .keu-cards, .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ════════════════════════════════════════════
   24. GLOBAL TOOLBAR & PANEL FIX
════════════════════════════════════════════ */
.topbar {
    padding: 0 16px !important;
    gap: 10px !important;
}

.topbar-title {
    min-width: 0 !important;
    flex: 1 !important;
}

.topbar-breadcrumb {
    display: flex !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    gap: 4px !important;
}

@media (max-width: 640px) {
    .topbar-breadcrumb {
        display: none !important; /* Hide breadcrumb on very small screens to save space */
    }
    
    .topbar-title h1 {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

.toolbar, .panel-toolbar, .laporan-section-head, .db-hero-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

@media (max-width: 768px) {
    .toolbar > *, .panel-toolbar > *, .filter-group {
        flex: 1 1 auto !important;
        width: auto !important;
    }
    
    /* Search bar take full width if needed */
    .search-wrap, .db-search-wrap {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .filter-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .filter-group > .custom-select, 
    .filter-group > button, 
    .filter-group > a {
        width: 100% !important;
    }

    .filter-reset {
        grid-column: 1 / -1 !important;
    }
}

/* ════════════════════════════════════════════
   25. TABLE RESPONSIVENESS (FORCE WRAP)
════════════════════════════════════════════ */
.table-wrap, 
.kol-table-wrap, 
.lay-table-wrap, 
.lyn-table-wrap, 
.usr-table-wrap, 
.lap-table-wrap, 
.pjn-table-wrap,
.responsive-table {
    display: block;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    margin-bottom: 10px !important;
}

@media (max-width: 640px) {
    .data-table th, .data-table td {
        padding: 10px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important; /* Paksa scroll horizontal daripada stack berantakan */
    }
    
    /* Sembunyikan ID/No di mobile untuk hemat ruang */
    .td-no, .th-no { display: none !important; }
}

/* ════════════════════════════════════════════
   26. MODAL RESPONSIVENESS
════════════════════════════════════════════ */
@media (max-width: 640px) {
    .modal, .kol-modal {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 10px !important;
        max-height: 95vh !important;
    }
    
    .modal-head, .mh-text h3 {
        padding: 14px 16px !important;
    }

    .modal-body {
        padding: 12px 16px !important;
    }

    /* Stack form rows */
    .form-row-2, .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ════════════════════════════════════════════
   27. TAB WRAPPER
════════════════════════════════════════════ */
@media (max-width: 640px) {
    .tab-wrap {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding-bottom: 5px !important;
    }
    .tab-wrap-full {
        overflow-x: hidden !important;
        display: flex !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
        width: 100% !important;
    }
    .tab-wrap-full .tab-btn {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .tab-btn {
        flex: 0 0 auto !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}


/* ════════════════════════════════════════════
   25. DASHBOARD GURU/ANGGOTA SPECIFIC
════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .db-main-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .db-hero-inner {
        padding: 0 16px !important;
    }
    .db-name {
        font-size: 28px !important;
    }
    .db-sub-row {
        flex-wrap: wrap !important;
    }
    .lc-inner {
        padding: 10px !important;
    }
    .loan-cards {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════
   24. HAMBURGER & TOGGLE FIX
════════════════════════════════════════════ */
@media (max-width: 900px) {
    .nav-hamburger, .topbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        border-radius: 10px !important;
    }

    .nav-hamburger span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        background: #fff !important;
        border-radius: 2px !important;
    }

    .topbar-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Fix untuk topbar toggle yang backgroundnya putih di staff dashboard */
    .topbar-toggle {
        background: #f8faf9 !important;
        border-color: rgba(31,99,53,0.1) !important;
        color: #1f6335 !important;
    }
}

@media (max-width: 380px) {
    .lay-stats,
    .stat-row,
    .db-stats,
    .prof-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ════════════════════════════════════════════
   24. GLOBAL MOBILE COMPACT TWEAKS (TYPOGRAPHY & SPACING)
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
   28. ADMIN & PETUGAS SPECIFIC OVERFLOW FIXES
════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Main Layout Constraints */
    .main-wrap, .content-wrap, .content, .panel, .peng-wrap, .laporan-section {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 900 !important;
        background: var(--white) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    }

    .content {
        margin-top: var(--topbar-h, 60px) !important;
        padding-top: 5px !important; /* Rapatkan jarak ke atas */
    }

    /* Laporan Page Fixes */
    .laporan-tabs-wrap, .periode-bar, .periode-custom, .section-divider {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .periode-tabs {
        width: 100% !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }

    .periode-tabs .ptab {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
    
    .ltab {
        width: 100% !important;
        justify-content: center !important;
    }

    .periode-custom {
        margin-left: 0 !important;
    }

    .charts-row, .charts-row-1, .charts-row-2, .charts-row-manajerial, .two-col-info {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .donut-wrap {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
    }

    /* Koleksi & Form Two Panel Fixes */
    .form-two-panel {
        flex-direction: column !important;
        padding: 15px !important;
    }

    .form-cover-panel {
        width: 100% !important;
        flex: none !important;
        align-items: center !important;
    }

    .form-fields-panel {
        width: 100% !important;
    }

    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }

    /* Pengaturan Sistem Fixes */
    .settings-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: var(--white) !important;
    }

    .peng-statusbar {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        padding: 15px !important;
    }

    .psb-left, .psb-right {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .psb-divider {
        display: none !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 12px 15px !important;
    }

    /* General Card Tightening */
    .kpi-card, .keu-card, .sc-card, .mini-stat, .db-stat {
        padding: 12px !important;
    }

    .kpi-val, .keu-val, .sc-val, .mini-val {
        font-size: 18px !important;
    }

    /* Search Bar in Laporan/Users */
    .search-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    /* Compact Text for Admin */
    .panel-title, .chart-title, .card-head h3, .laporan-section-head-label {
        font-size: 13px !important;
    }

    .ltab {
        padding: 8px 10px !important;
        font-size: 11px !important;
        gap: 5px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .laporan-tabs-wrap {
        flex-direction: row !important;
    }

    /* Standardized Form Fields Mobile */
    .form-input, 
    .form-textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select,
    .cs-combo-trigger,
    .cs-combo-val,
    .cs-trigger {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    ::placeholder,
    .cs-combo-val--placeholder {
        font-size: 12.5px !important;
    }

    .periode-custom {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .periode-custom .date-input {
        flex: 1 1 40% !important;
        min-width: 0 !important;
        font-size: 11px !important;
        padding: 6px !important;
        height: 34px !important;
    }

    .periode-custom .date-sep {
        display: block !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .btn-apply {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 4px !important;
        padding: 0 !important;
        height: 36px !important;
        justify-content: center !important;
    }

    .ltab svg {
        width: 12px !important;
        height: 12px !important;
    }

    .ltab .hide-mobile {
        display: none !important;
    }

    /* Transform Ringkasan Pengguna to Collapsible Cards on Mobile */
    .user-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px;
    }

    .user-mob-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.2s;
    }

    .user-mob-main {
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .user-mob-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mob-toggle-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--g50);
        color: var(--g700);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        transition: transform 0.3s;
    }

    .user-mob-detail {
        background: var(--g50);
        border-top: 1px solid var(--border);
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        animation: slideDown 0.2s ease-out;
    }

    /* Sembunyikan ringkasan box (Siswa/Petugas) agar list langsung tampil */
    .user-stat-row {
        display: none !important;
    }

    /* Toolbar & Search Bar Mobile Optimization */
    .toolbar, .panel-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 16px !important;
    }

    .search-wrap {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .search-input {
        width: 100% !important;
        height: 40px !important;
        font-size: 13px !important;
        padding-left: 36px !important;
    }

    .search-input::placeholder {
        font-size: 11px !important;
        opacity: 0.7;
    }

    .search-ico {
        left: 12px !important;
    }

    .filter-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        flex: none !important;
    }

    .filter-reset, .btn-shortcut {
        grid-column: span 2 !important;
        width: 100% !important;
        justify-content: center !important;
        height: 38px !important;
        margin: 0 !important;
    }

    .custom-select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .cs-trigger {
        width: 100% !important;
        height: 38px !important;
        padding: 0 10px !important;
    }

    .cs-val {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Toolbar & Search Bar Mobile Optimization (Filter Popover) */
    .toolbar, .panel-toolbar {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    .search-wrap {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .search-input {
        width: 100% !important;
        height: 40px !important;
        font-size: 13px !important;
        padding-left: 36px !important;
        border-radius: 8px !important;
    }

    .search-input::placeholder {
        font-size: 13px !important;
        opacity: 0.6;
    }

    .search-ico {
        left: 10px !important;
        width: 13px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Even Smaller & Green Filter Toggle Button */
    .btn-filter-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 8px;
        border: none !important;
        background: var(--g700) !important;
        color: white !important;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s;
        padding: 0 !important;
        box-shadow: 0 2px 6px rgba(31,99,53,0.2);
    }

    .btn-filter-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }

    .btn-filter-toggle.active {
        background: var(--g800) !important;
        transform: scale(0.95);
    }

    /* Filter Popover Box */
    .filter-group {
        position: absolute !important;
        top: 34px !important;
        right: 0 !important;
        width: 200px !important;
        background: white !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.18) !important;
        padding: 14px !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .filter-group.mobile-hidden {
        display: none !important;
    }

    /* Section Labels for Dropdown */
    .filter-group .custom-select::before {
        display: block;
        font-size: 9px;
        font-weight: 800;
        color: var(--ink3);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.8;
    }

    .filter-group .custom-select[id*="Kelas"]::before { content: "-- Kelas --"; }
    .filter-group .custom-select[id*="Jenis"]::before { content: "-- Jenis --"; }
    .filter-group .custom-select[id*="Status"]::before { content: "-- Status --"; }
    .filter-group .custom-select[id*="Kategori"]::before { content: "-- Kategori --"; }

    .filter-reset {
        width: 100% !important;
        height: 34px !important;
        justify-content: center !important;
        margin-top: 4px !important;
        background: var(--g50) !important;
        color: var(--g700) !important;
        border: 1px solid var(--g100) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .filter-reset::before {
        content: "-- Reset --";
        display: block;
        font-size: 9px;
        font-weight: 800;
        color: var(--ink3);
        margin-bottom: 4px;
        text-transform: uppercase;
        position: absolute;
        top: -15px;
        width: 100%;
        text-align: center;
    }
    
    .filter-reset { position: relative; margin-top: 18px !important; }

    .custom-select { width: 100% !important; }
    .cs-trigger { height: 34px !important; font-size: 11px !important; padding: 0 10px !important; }

    @media (max-width: 768px) {
        .btn-filter-toggle { display: flex; }
    }

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

    .mob-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 11.5px;
    }

    .mob-detail-item span {
        color: var(--ink3);
        font-weight: 500;
    }

    .mob-detail-item strong {
        color: var(--ink);
    }

    .pop-judul, .buku-judul-td, .anggota-nama {
        font-size: 11px !important;
    }

    .pop-penulis, .buku-penulis-td, .anggota-nis, .k-email, .k-hp {
        font-size: 10px !important;
    }

    /* Stats icon shrinking */
    .kpi-icon, .keu-icon, .sc-icon-wrap, .mini-icon {
        width: 28px !important;
        height: 28px !important;
    }

    /* Penyesuaian info-note agar rapi saat di atas */
    .info-note {
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        margin: 10px 12px 5px !important;
    }

    /* Prevent clipping when dropdowns open */
    .panel {
        height: auto !important;
        overflow: visible !important;
    }

    .kpi-icon svg, .keu-icon svg, .sc-icon-wrap svg, .mini-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Force hide horizontal tables that should be replaced by card views */
    .hide-mobile, .table-wrap.hide-mobile {
        display: none !important;
    }

}

/* ══ MODAL FORM OPTIMIZATION (TAMBAH PEMINJAMAN DLL) ══ */
@media (max-width: 768px) {
    /* Menggunakan selector lebih spesifik untuk mengalahkan rule 16px iOS zoom */
    .lyn-modal .form-lbl, 
    .modal .form-lbl,
    .lyn-modal .form-group label.form-lbl,
    .modal .form-group label.form-lbl {
        font-size: 8.5px !important;
        letter-spacing: 0.05em !important;
        color: var(--ink4) !important;
        margin-bottom: 2px !important;
    }
    
    .lyn-modal .form-lbl-note,
    .modal .form-lbl-note {
        font-size: 8px !important;
        font-weight: 500 !important;
    }
    
    .lyn-modal .form-ctrl,
    .modal .form-ctrl,
    .lyn-modal input.form-ctrl,
    .modal input.form-ctrl,
    .lyn-modal select.form-ctrl,
    .modal select.form-ctrl {
        font-size: 12px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 7px !important;
    }
    
    .lyn-modal .form-ctrl::placeholder,
    .modal .form-ctrl::placeholder {
        font-size: 10.5px !important;
        color: #adb5bd !important;
    }

    /* Force specific rows to stay side-by-side on mobile */
    .lyn-modal .form-row-mobile-2,
    .modal .form-row-mobile-2,
    .lyn-modal div.form-row-mobile-2,
    .modal div.form-row-mobile-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    /* Tombol simpan/batal di modal lebih ramping */
    .lyn-modal-foot .tb-btn,
    .modal-foot .tb-btn,
    .lyn-modal-foot button,
    .modal-foot button,
    .m-foot .btn-cancel,
    .m-foot .btn-confirm {
        height: 34px !important;
        font-size: 11.5px !important;
        padding: 0 10px !important;
        flex: 1 !important; 
        justify-content: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* Penyesuaian Header & Overlay agar tidak terpotong */
    .lyn-modal-overlay,
    .modal-overlay {
        padding: 20px 12px 12px !important;
        padding-top: 45px !important; /* Ruang ekstra di atas agar tidak terpotong notch/status bar */
        align-items: flex-end !important;
    }

    .lyn-modal,
    .modal {
        max-height: 86vh !important;
        border-radius: 20px 20px 0 0 !important; /* Gaya bottom sheet */
    }

    .lyn-modal-head,
    .modal-head,
    .m-head {
        padding: 10px 16px !important;
        gap: 0 !important;
    }
    
    /* Sembunyikan ikon header di mobile untuk hemat ruang vertikal */
    .lyn-mh-icon,
    .mh-icon,
    .mdi {
        display: none !important;
    }
    
    .lyn-mh-text h3,
    .mh-text h3,
    .m-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    
    .lyn-mh-text p,
    .mh-text p,
    .m-sub {
        font-size: 10px !important;
        line-height: 1.2 !important;
        opacity: 0.8 !important;
        margin-top: 2px !important;
    }

    /* Kurangi padding body agar lebih lega */
    .lyn-modal-body,
    .modal-body,
    #formTambah,
    #formEdit {
        padding: 12px 16px 24px !important;
        gap: 10px !important;
        overflow-y: auto !important;
        max-height: calc(86vh - 65px) !important;
    }

    /* Role Picker 3 Kolom di Mobile */
    .role-picker {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 5px !important;
    }
    
    .role-option {
        flex-direction: column !important;
        padding: 10px 5px !important;
        text-align: center !important;
        gap: 6px !important;
        border-width: 1.5px !important;
    }
    
    .ro-icon {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto !important;
    }
    
    .ro-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .ro-label {
        font-size: 11px !important;
    }
    
    .ro-desc, 
    .ro-check {
        display: none !important;
    }

    .tambah-divider {
        padding: 12px 0 !important;
        margin-top: 5px !important;
    }

    /* Label & Input khusus Kelola Pengguna */
    .fl {
        font-size: 8.5px !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        color: var(--ink4) !important;
        margin-bottom: 2px !important;
    }
    .fi {
        font-size: 12px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 7px !important;
    }
    .fi::placeholder {
        font-size: 10.5px !important;
    }

    /* Export Laporan Modal Optimization */
    .export-modal {
        max-height: 86vh !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }

    .export-layout {
        flex-direction: column-reverse !important; /* Preview di atas, filter di bawah */
        height: auto !important;
        overflow-y: auto !important;
    }

    .export-filters {
        width: 100% !important;
        border-right: none !important;
        border-top: 1px solid var(--border) !important;
        padding: 16px !important;
        background: var(--white) !important;
    }

    .export-preview {
        padding: 16px !important;
        height: 280px !important; /* Beri tinggi tetap untuk preview agar tidak terlalu panjang */
        background: #f1f5f9 !important;
        flex: none !important;
    }

    .preview-paper {
        padding: 12px !important;
        height: 100% !important;
    }

    #pdfPreviewFrame {
        height: 100% !important;
    }

    .modal-header h2 {
        font-size: 15px !important;
    }
}


/* Desktop Overrides */
@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
    .hide-mobile {
        display: block !important;
    }
}