/* ============================================================
   E-SURAT - MOBILE & RESPONSIVE STYLESHEET (HP & TABLET)
   SD Muhammadiyah Serut
   - Dioptimalkan khusus untuk layar HP, Tablet, & Touch Interface
   - Drawer Sidebar Off-Canvas (max-width: 768px)
   - Navigasi Bawah Mobile (Bottom Nav) & Tombol FAB Tambah
   - Tampilan Daftar Surat versi Mobile (mobile-list-container)
   ============================================================ */

/* ===== 1. TABLET BREAKPOINT (<= 1024px) ===== */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 2. HANDPHONE / HP BREAKPOINT (<= 768px) ===== */
@media (max-width: 768px) {
    /* Sidebar berubah menjadi Drawer Off-Canvas */
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0; width: 100%; }

    /* Tampilkan tombol hamburger & tutup sidebar */
    .btn-hamburger { display: block; }
    .btn-close-sidebar-mobile { display: block; }

    /* Topbar dengan Safe-Area (Poni / Notch / Status Bar APK) */
    .app-topbar {
        height: auto;
        min-height: calc(54px + env(safe-area-inset-top, 0px));
        padding-top: max(env(safe-area-inset-top, 0px), 10px);
        padding-bottom: 10px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    /* Sembunyikan elemen topbar yang hanya tampil di desktop */
    .topbar-breadcrumb { display: none; }
    .topbar-actions { display: none; }

    /* Grid statistik ringkas 2 kolom di HP */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Tampilan tabel tersembunyi, diganti daftar versi mobile */
    .desktop-table-card { display: none !important; }
    .mobile-list-container { display: flex !important; }

    /* Navigasi bawah & tombol FAB Tambah Surat tampil di HP */
    .mobile-bottom-nav { display: flex; }
    .mobile-fab-add { display: flex; }

    /* Area konten dengan jarak bawah untuk bottom nav */
    main { padding: 14px 14px 80px; }
}
/* ===== Perbaikan UI/UX: komponen baru di HP ===== */
@media (max-width: 768px) {
    .ai-grid { grid-template-columns: 1fr; }
    .ai-act.ghost { margin-left: 0; }
    #toastHost { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .app-toast { font-size: 0.8rem; }
}