/* ==========================================================
   batch3-fix.css (Batch 3.1)
   Fix paket:
   1. Dropdown Setting: position absolute (bukan fixed) → stabil
   2. Judul website: font auto-scale (clamp) di mobile
   3. Admin menu: hamburger di mobile
   4. PDF mobile landscape: fit ke box
   Load SETELAH style.css & batch2/batch3-style.css.
   ========================================================== */

/* ============================================================
   FIX 1: DROPDOWN SETTING (Edisi / Font / Qari)
   Masalah lama: position:fixed + koordinat JS → muncul di luar
   viewport (scrollbar ke kanan), tidak kelihatan terbuka.
   Solusi: position:absolute relatif ke .custom-select parent.
   Otomatis muncul tepat di bawah tombol, tanpa hitung koordinat.
   ============================================================ */
.custom-select-list {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: 260px;
    /* z-index tetap tinggi supaya overlay di atas field lain */
    z-index: 100 !important;
}

/* Drop-up variant: kalau ruang bawah sempit, JS tambah class drop-up */
.custom-select.drop-up .custom-select-list {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}

/* Cegah scrollbar horizontal liar di dalam modal setting */
.setting-modal-content,
.setting-modal-body {
    overflow-x: hidden !important;
}

/* Pastikan parent .custom-select jadi anchor positioning */
.custom-select {
    position: relative !important;
}

/* Saat dropdown terbuka, naikkan stacking context */
.custom-select.is-open {
    z-index: 100 !important;
}

/* ============================================================
   FIX 4: JUDUL WEBSITE — font auto-scale di mobile
   Pakai clamp() supaya font menyesuaikan lebar layar.
   Judul tetap 1 baris (nowrap + ellipsis sebagai fallback ekstrem),
   tapi font mengecil dulu sebelum kena ellipsis.
   ============================================================ */
.logo-text {
    /* Desktop: tetap proporsional. Mobile: auto-scale. */
    font-size: clamp(0.82rem, 3.2vw, 1.05rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Beri ruang lebih lega di mobile — biar nama panjang muat */
    max-width: 62vw;
}

.logo-subtitle {
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
}

/* Layar sangat kecil (≤360px): beri sedikit ruang lebih */
@media (max-width: 360px) {
    .logo-text { max-width: 56vw; font-size: clamp(0.78rem, 3.4vw, 0.95rem); }
    .logo-subtitle { max-width: 56vw; }
}

/* Layar lebar (desktop): batas atas wajar */
@media (min-width: 768px) {
    .logo-text { max-width: 320px; }
    .logo-subtitle { max-width: 320px; }
}

/* ============================================================
   FIX 4 (lanjutan): PDF MOBILE — landscape fit ke box
   Canvas pakai width 100% dari container, sehingga saat
   container melebar (landscape), PDF ikut melebar.
   JS akan re-render saat orientationchange untuk ketajaman.
   ============================================================ */
.bar-pdf-canvas-wrap {
    width: 100%;
    max-width: 100%;
}

.bar-pdf-canvas-page {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

.bar-pdf-mobile-pages {
    width: 100%;
    box-sizing: border-box;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}