/* ============================================================================
   MOBILE FULL SUPPORT
   Dukungan tampilan penuh untuk Android, iPhone, dan Tablet.

   Dimuat PALING AKHIR (sesudah blok <style> inline) pada setiap halaman,
   sehingga aturan di sini dapat menimpa gaya sebelumnya pada spesifisitas
   yang sama tanpa perlu !important berlebihan.

   PRINSIP:
   - Tampilan DESKTOP tidak diubah. Hampir semua aturan berada di dalam
     media query <= 1024px.
   - Hanya properti layout/ukuran/scroll yang disentuh, bukan warna/branding.
   - Aman untuk dibatalkan: cukup hapus <link> ke file ini.

   BREAKPOINT:
     <= 1024px  Tablet (iPad, tab Android) + semua ponsel
     <= 768px   Ponsel besar / tablet kecil potrait
     <= 480px   Ponsel umum
     <= 360px   Ponsel kecil
     landscape  Ponsel posisi mendatar
   ============================================================================ */

/* ===========================================================================
   1. FONDASI GLOBAL (aman untuk semua ukuran layar, termasuk desktop)
   =========================================================================== */

html {
    /* Cegah iOS/Android membesarkan teks sendiri saat ganti orientasi */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Cegah "geser samping" tak diinginkan di ponsel */
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    /* Scroll lebih halus di iOS */
    -webkit-overflow-scrolling: touch;
}

/* Media & embed tidak boleh melebihi lebar layar */
img,
video,
canvas,
svg,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Teks panjang / URL tidak memaksa halaman melebar */
p,
li,
dd,
blockquote,
figcaption,
small {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

pre,
code,
kbd,
samp {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wrapper scroll horizontal untuk tabel (dipakai mobile-enhance.js) */
.mfs-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Petunjuk visual bahwa area ini bisa digeser */
    scrollbar-width: thin;
}

.mfs-table-scroll::-webkit-scrollbar {
    height: 7px;
}

.mfs-table-scroll::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 99px;
}

.mfs-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.55);
    border-radius: 99px;
}


/* ===========================================================================
   2. TABLET + PONSEL  (<= 1024px)
   Termasuk iPad potrait/landscape dan tablet Android.
   =========================================================================== */
@media screen and (max-width: 1024px) {

    /* --- 2.1 Cegah zoom otomatis iOS saat field difokuskan ---------------
       iOS Safari akan memperbesar halaman jika font input < 16px.
       Semua jenis input dicakup, termasuk yang sering terlewat.
       CATATAN: hanya font-size & lebar yang diatur di sini. `appearance`
       TIDAK direset untuk date/time/select karena dapat merusak pemilih
       tanggal bawaan iOS. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime-local"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* Reset tampilan bawaan HANYA untuk field teks biasa, supaya sudut
       membulat konsisten di iOS tanpa mengganggu date picker / dropdown. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input:not([type]),
    textarea {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
    }

    /* iOS kadang memotong tinggi input tanggal/waktu - beri tinggi minimum */
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 44px;
    }

    /* Checkbox & radio jangan ikut di-reset */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: auto;
        appearance: auto;
        /* Target sentuh lebih nyaman */
        min-width: 20px;
        min-height: 20px;
    }

    input[type="file"] {
        max-width: 100%;
        font-size: 14px !important;
    }

    /* --- 2.2 Target sentuh nyaman (rekomendasi 44px) --------------------- */
    .btn,
    .tab-btn,
    .rekap-btn,
    .btn-music,
    button[type="submit"],
    button[type="button"].btn,
    a.btn {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Tombol aksi kecil di dalam tabel: cukup 32px agar baris tidak melebar */
    td .btn-action,
    td .btn-sm,
    td button {
        min-height: 32px;
        touch-action: manipulation;
    }

    /* --- 2.3 Kontainer utama menyesuaikan lebar layar -------------------- */
    .container,
    .container.full-width,
    .main-content,
    main,
    section {
        max-width: 100%;
        box-sizing: border-box;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- 2.4 Semua tabel bisa digeser horizontal ------------------------- */
    .mobile-table-wrapper,
    .table-container,
    .table-responsive,
    .mfs-table-scroll,
    .odt-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 2.5 Grid otomatis menyesuaikan, tidak memaksa banyak kolom ------ */
    .rdp-stats,
    .rdp-bb-grid,
    .odm-grid,
    .kategori-stats,
    .bb-cards,
    .summary-cards,
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }

    /* --- 2.6 Modal / popup dinamis ramah layar sentuh --------------------
       Modal di aplikasi ini dibuat lewat JS dengan inline style, sehingga
       perlu !important untuk menimpanya. Hanya ukuran & jarak yang diubah. */
    [id$="Modal"] > div,
    .modal-content,
    .modal-box {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 12px auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 2.7 Baris tab dapat digeser, tidak terpotong -------------------- */
    .mobile-tab-scroll,
    .dashboard-tabs,
    .rekap-tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .mobile-tab-scroll::-webkit-scrollbar,
    .dashboard-tabs::-webkit-scrollbar,
    .rekap-tabs::-webkit-scrollbar {
        height: 5px;
    }

    .mobile-tab-scroll::-webkit-scrollbar-thumb,
    .dashboard-tabs::-webkit-scrollbar-thumb,
    .rekap-tabs::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.45);
        border-radius: 99px;
    }
}


/* ===========================================================================
   3. PONSEL BESAR / TABLET KECIL POTRAIT  (<= 768px)
   =========================================================================== */
@media screen and (max-width: 768px) {

    /* --- 3.1 Jarak tepi lebih rapat --------------------------------------- */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* --- 3.2 Form: satu kolom penuh --------------------------------------- */
    .form-row,
    .form-grid,
    .filter-row,
    .rdp-toolbar,
    .odt-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .form-row > *,
    .form-grid > * {
        width: 100%;
        min-width: 0;
    }

    .form-group {
        width: 100%;
        min-width: 0;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
    }

    /* Grid inline (ditulis di atribut style) ikut turun jadi satu kolom.
       Grid auto-fill / auto-fit DIKECUALIKAN karena sudah responsif sendiri
       - contohnya galeri foto, yang kalau dipaksa 1 kolom jadi terlalu besar. */
    [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
        grid-template-columns: 1fr !important;
    }

    /* --- 3.3 Tombol form melebar penuh, mudah ditekan --------------------- */
    .form-buttons,
    .filter-actions,
    .rdp-toolbar-actions,
    .odt-toolbar-actions,
    .export-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .form-buttons .btn,
    .filter-actions .btn,
    .export-section .btn {
        width: 100%;
        justify-content: center;
    }

    /* --- 3.4 Tabel: lebar minimum agar isi tidak berhimpitan -------------- */
    .mobile-table-wrapper table,
    .mfs-table-scroll table {
        min-width: 640px;
    }

    /* Tabel rekap dengan banyak kolom butuh ruang lebih */
    .mfs-table-scroll table.data-table,
    .mobile-table-wrapper table.data-table {
        min-width: 760px;
    }

    /* --- 3.5 Tab: ukuran teks & padding proporsional ---------------------- */
    .dashboard-tabs .tab-btn,
    .rekap-tabs .rekap-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 12.5px;
        padding: 10px 14px;
    }

    /* --- 3.6 Header halaman lebih ringkas -------------------------------- */
    .section-header {
        padding: 16px 14px;
    }

    .section-header h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    .section-header p {
        font-size: 12.5px;
    }

    /* --- 3.7 Kartu statistik: dua kolom agar tetap terbaca --------------- */
    .rdp-stats,
    .kategori-stats,
    .summary-cards,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* --- 3.8 Modal Detail Target Operasi: layar penuh -------------------- */
    #opsDetailModal {
        padding: 0 !important;
    }

    #opsDetailModal .odm-card {
        max-width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* --- 3.9 Tombol mengambang tidak menutupi konten -------------------- */
    .music-control {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }
}


/* ===========================================================================
   4. PONSEL UMUM  (<= 480px)
   =========================================================================== */
@media screen and (max-width: 480px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Kartu statistik jadi satu kolom agar angka tidak terpotong */
    .rdp-stats,
    .kategori-stats,
    .summary-cards,
    .stats-grid,
    .rdp-bb-grid,
    .odm-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tipografi menyesuaikan lebar layar */
    .section-header h2 {
        font-size: 16.5px;
    }

    h1 {
        font-size: clamp(18px, 5.5vw, 24px);
        line-height: 1.25;
    }

    h2 {
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.3;
    }

    h3 {
        font-size: clamp(14px, 4.2vw, 18px);
    }

    /* Tabel: sel lebih rapat supaya lebih banyak yang terlihat */
    .mfs-table-scroll table th,
    .mfs-table-scroll table td,
    .mobile-table-wrapper table th,
    .mobile-table-wrapper table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Tab lebih kecil lagi */
    .dashboard-tabs .tab-btn,
    .rekap-tabs .rekap-btn {
        font-size: 11.5px;
        padding: 9px 12px;
    }

    /* Toolbar pencarian melebar penuh */
    #odtPanel .odt-search input,
    #rdpPanel .rdp-toolbar-group select {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Modal: gunakan hampir seluruh layar */
    [id$="Modal"] > div,
    .modal-content {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
        border-radius: 14px !important;
    }
}


/* ===========================================================================
   5. PONSEL KECIL  (<= 360px)
   =========================================================================== */
@media screen and (max-width: 360px) {

    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .dashboard-tabs .tab-btn,
    .rekap-tabs .rekap-btn {
        font-size: 11px;
        padding: 8px 10px;
    }

    .mfs-table-scroll table th,
    .mfs-table-scroll table td,
    .mobile-table-wrapper table th,
    .mobile-table-wrapper table td {
        padding: 7px 8px;
        font-size: 11.5px;
    }
}


/* ===========================================================================
   6. PONSEL POSISI MENDATAR (landscape)
   Tinggi layar sangat terbatas, jadi jarak vertikal dipangkas.
   =========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .section-header {
        padding: 10px 14px;
    }

    .loading-content {
        transform: scale(0.82);
    }

    .loading-image {
        max-height: 120px !important;
        margin-bottom: 18px !important;
    }

    .loading-logo {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 14px !important;
    }

    [id$="Modal"] > div,
    .modal-content {
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 6px auto !important;
    }
}


/* ===========================================================================
   7. SAFE AREA — iPhone dengan notch / Dynamic Island,
      dan ponsel Android dengan gesture bar.
      env() bernilai 0 pada perangkat tanpa notch, jadi aman untuk semua.
      Membutuhkan viewport-fit=cover pada meta viewport.
   =========================================================================== */
@supports (padding: max(0px)) {
    @media screen and (max-width: 1024px) {

        body {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }

        /* Elemen yang menempel di tepi perlu jarak tambahan sendiri */
        .loading-screen,
        [id$="Modal"] {
            padding-top: max(0px, env(safe-area-inset-top));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }

        .music-control {
            bottom: calc(14px + max(0px, env(safe-area-inset-bottom))) !important;
            right: calc(14px + max(0px, env(safe-area-inset-right))) !important;
        }
    }
}


/* ===========================================================================
   8. LAYAR SENTUH (tanpa mouse) — hilangkan efek hover yang "nyangkut"
   =========================================================================== */
@media (hover: none) and (pointer: coarse) {

    .btn:hover,
    .tab-btn:hover,
    .rekap-btn:hover,
    .data-card:hover,
    .summary-item:hover,
    .rdp-stat:hover,
    .odm-item:hover,
    .odt-view-btn:hover,
    .rdp-btn:hover {
        transform: none !important;
    }

    /* Umpan balik saat disentuh, menggantikan hover */
    .btn:active,
    .tab-btn:active,
    .rekap-btn:active,
    .rdp-btn:active,
    .odt-view-btn:active {
        transform: scale(0.97) !important;
        filter: brightness(0.96);
    }
}


/* ===========================================================================
   9. TINGGI VIEWPORT DINAMIS
   Bilah alamat browser mobile membuat 100vh meleset. dvh memperbaikinya;
   --mfs-vh (diisi mobile-enhance.js) sebagai cadangan untuk browser lama.
   =========================================================================== */
.loading-screen {
    height: 100vh;
    height: calc(var(--mfs-vh, 1vh) * 100);
    height: 100dvh;
}


/* ===========================================================================
   10. CETAK — pastikan penyesuaian mobile tidak terbawa ke hasil cetak
   =========================================================================== */
@media print {

    html,
    body {
        overflow: visible !important;
        padding: 0 !important;
    }

    .mfs-table-scroll,
    .mobile-table-wrapper,
    .table-container {
        overflow: visible !important;
    }

    .mfs-table-scroll table,
    .mobile-table-wrapper table {
        min-width: 0 !important;
    }
}