/* ============================================================
   GEBYAR MAN 2 AGAM — Mobile & Android Enhancement Layer
   ------------------------------------------------------------
   Dimuat TERAKHIR pada semua layout sehingga dapat menimpa
   aturan sebelumnya tanpa mengubah file CSS lain.

   Fokus:
   1. Aman untuk layar berponi / gesture bar (safe-area inset)
   2. Target sentuh nyaman (>= 44px) sesuai panduan Android
   3. Tidak ada scroll horizontal tak sengaja
   4. Drawer navigasi yang benar untuk panel admin & peserta
   5. Tabel, kartu, modal, dan dropdown tetap terbaca di layar kecil
   6. Performa: kurangi efek berat di perangkat kelas bawah
   ============================================================ */

/* ------------------------------------------------------------
   0. Fondasi
   ------------------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-tap-highlight-color: rgba(13, 148, 136, .14);
}

/*
 * JANGAN memakai `overflow-x: hidden` pada <body>.
 *
 * Bila <body> diberi overflow-x selain `visible`, maka overflow-y-nya ikut
 * berubah menjadi `auto` sehingga <body> berubah menjadi wadah gulir sendiri
 * (computed: body overflow-x:hidden / overflow-y:auto). Akibatnya gulir roda
 * di desktop maupun usapan layar di Android tidak lagi menggerakkan halaman —
 * inilah penyebab keluhan "tidak bisa di-scroll".
 *
 * Penjagaan scroll horizontal cukup pada elemen akar <html>, karena nilai
 * overflow elemen akar diteruskan ke viewport.
 */

/* Anak flex/grid tidak boleh memaksa induknya melebar */
.admin-shell,
.main-area,
.content-area,
.container,
.container-fluid {
    min-width: 0;
}

/* Jaring pengaman: tidak ada scroll horizontal di level dokumen.
   `clip` dipakai agar tidak membentuk wadah gulir baru dan
   position: sticky tetap bekerja. */
html {
    overflow-x: clip;
}

/* Cadangan untuk browser lama yang belum mengenal `clip`.
   Tetap hanya pada <html>, tidak pernah pada <body>. */
@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
}

/* ------------------------------------------------------------
   0b. Gutter Bootstrap di layar kecil
   ------------------------------------------------------------
   Baris Bootstrap memakai margin negatif sebesar setengah gutter,
   sedangkan .container hanya memiliki padding 0.75rem. Kelas seperti
   .g-5 (gutter 3rem) membuat baris melebar ~12px melewati layar —
   inilah penyebab scroll horizontal di halaman beranda pada Android.
   Di layar kecil gutter diseragamkan ke 1.5rem sehingga baris selalu
   sejajar dengan container. */
@media (max-width: 991px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 1.5rem;
    }

    /* Mengalahkan .g-0 … .g-5 pada elemen yang sama */
    .row {
        --bs-gutter-x: 1.5rem !important;
    }

    /* Baris di dalam kolom tidak perlu gutter besar */
    .row .row {
        --bs-gutter-x: 1rem !important;
    }
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

/* PENTING: `height: auto` hanya untuk gambar TANPA atribut height.
   Aturan CSS mengalahkan atribut HTML `height="44"` pada logo navbar,
   sehingga tanpa pengecualian ini logo tampil raksasa mengikuti ukuran
   aslinya dan merusak seluruh tata letak header.

   `:where()` dipakai agar specificity tetap 0-0-1 — dengan begitu kelas
   seperti .hero-visual-logo { height: 72px } tetap menang. */
img:where(:not([height])) {
    height: auto;
}

/* Tautan/teks panjang (nomor pendaftaran, email) tidak menembus layar */
.wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ------------------------------------------------------------
   1. Safe area — layar berponi & gesture bar Android
   ------------------------------------------------------------ */
@supports (padding: env(safe-area-inset-bottom)) {
    .topbar {
        padding-top: env(safe-area-inset-top);
    }

    .topbar-admin {
        padding-top: calc(.8rem + env(safe-area-inset-top));
    }

    /* Sidebar ikut turun agar brand tidak tertutup status bar */
    .sidebar {
        padding-top: env(safe-area-inset-top);
    }

    .sidebar-foot {
        padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
    }

    .app-footer,
    .footer-bottom {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    /* Tombol aksi tetap di bawah (wizard) tidak tertutup gesture bar */
    .mobile-actionbar {
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------------
   2. Target sentuh nyaman di perangkat sentuh
   ------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 767px) {
    .sidebar-menu a {
        min-height: 44px;
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Kontrol form: font 16px mencegah browser memperbesar halaman
       otomatis saat kolom diisi (perilaku umum Chrome Android). */
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px;
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 96px;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: .15rem;
    }

    /* Tautan paginasi lebih mudah ditekan */
    .pagination .page-link {
        min-width: 42px;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dropdown-item {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    /* Tombol ikon di baris tabel */
    .table .btn-sm {
        min-width: 38px;
    }
}

/* ------------------------------------------------------------
   3. Drawer navigasi (panel admin & dashboard peserta)
   ------------------------------------------------------------ */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Tombol tutup di dalam drawer (khusus layar kecil) */
.sidebar-close {
    margin-left: auto;
    background: rgba(255, 255, 255, .1);
    border: 0;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

@media (max-width: 991px) {
    .sidebar-close { display: inline-flex; }

    .sidebar {
        width: min(86vw, 300px);
        box-shadow: 0 0 40px rgba(15, 23, 42, .45);
        /* Drawer di atas backdrop */
        z-index: 1045;
    }

    /* Karena teks menu disembunyikan (d-none d-lg-inline) pada mobile,
       tampilkan kembali agar menu mudah dipahami. */
    .sidebar-menu a span:not(.visually-hidden) {
        display: inline !important;
    }

    .sidebar-brand > div {
        display: block !important;
    }

    .sidebar-foot .btn span {
        display: inline !important;
    }

    /* Badan halaman tidak ikut ter-scroll saat drawer terbuka */
    body.drawer-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* ------------------------------------------------------------
   4. Tabel: tetap terbaca & bisa digeser di layar kecil
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .table-responsive {
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 620px;
    }

    /* Beberapa tabel sempit tidak perlu dipaksa lebar */
    .table-responsive table.table-compact {
        min-width: 0;
    }

    .table > :not(caption) > * > * {
        padding: .55rem .6rem;
    }

    .table thead th {
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   5. Kartu statistik, kartu umum, dan grid
   ------------------------------------------------------------ */
@media (max-width: 575px) {
    .stat-card {
        padding: .85rem;
    }

    .stat-card h5 {
        font-size: .98rem;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 1.15rem;
    }

    .card-body {
        padding: .95rem;
    }

    /* Judul halaman tidak terlalu besar dan tidak memotong */
    h1, .h1 { font-size: 1.55rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }

    /* Tombol aksi memenuhi lebar agar mudah ditekan */
    .card-header .btn,
    .page-actions .btn {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------
   6. Dropdown & modal tidak keluar dari layar
   ------------------------------------------------------------ */
.dropdown-menu {
    max-width: calc(100vw - 1.5rem);
}

@media (max-width: 575px) {
    /* Dropdown notifikasi (lebar tetap + offset) ditarik ke dalam layar */
    .topbar-admin .dropdown-menu {
        width: min(320px, calc(100vw - 1.5rem)) !important;
        max-height: 70vh;
        overflow-y: auto;
    }
}

.modal-dialog {
    margin: .6rem auto;
}

@media (max-width: 575px) {
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------
   7. Navbar publik di layar kecil
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .navbar-collapse {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navbar .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Tombol aksi header publik menumpuk rapi */
    .navbar .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        gap: .5rem !important;
        padding-bottom: .5rem;
    }
}

@media (max-width: 575px) {
    .topbar .container {
        flex-wrap: wrap;
        justify-content: center !important;
        text-align: center;
        gap: .25rem;
    }

    .topbar-announce {
        justify-content: center;
        width: 100%;
    }

    /* Judul hero tidak memecah kata secara aneh */
    .hero h1, .hero .display-4 {
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------------
   8. Aksi sticky saat mengisi wizard pendaftaran
   ------------------------------------------------------------ */
.mobile-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin-top: 1rem;
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: .5rem;
}

.mobile-actionbar .btn {
    flex: 1 1 0;
}

@media (min-width: 992px) {
    .mobile-actionbar { display: none; }
}

/* ------------------------------------------------------------
   9. Performa: kurangi efek berat di layar kecil
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .sidebar-backdrop { backdrop-filter: none; }

    .mobile-actionbar { backdrop-filter: none; }

    /* Animasi masuk berlebihan dimatikan agar scroll tetap mulus */
    html.js .reveal {
        transform: none;
        transition-duration: .35s;
    }
}

/* ------------------------------------------------------------
   10. Utilitas
   ------------------------------------------------------------ */
.only-mobile { display: none !important; }

@media (max-width: 991px) {
    .only-mobile { display: block !important; }
    .only-mobile-inline { display: inline-flex !important; }
    .hide-mobile { display: none !important; }
}

/* ------------------------------------------------------------
   11. Tautan teks biasa (mis. daftar media sosial di Kontak)
   ------------------------------------------------------------ */
.link-plain {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.link-plain:hover,
.link-plain:focus-visible {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   12. Navigasi bawah layar kecil (gaya aplikasi Android)
   ------------------------------------------------------------
   Menyediakan tombol fitur utama yang selalu terjangkau ibu jari.
   Bilah ini hanya muncul pada layar <= 991px.
   ------------------------------------------------------------ */
.mobile-bottom-nav {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .1);
    padding-bottom: env(safe-area-inset-bottom);
}

.mnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: 58px;
    padding: .45rem .15rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1;
    color: #64748b;
    text-decoration: none;
    text-align: center;
}

.mnav-item i { font-size: 1.2rem; }

.mnav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnav-item.active,
.mnav-item--primary { color: #0d9488; }

.mnav-item--primary {
    background: linear-gradient(180deg, transparent 45%, rgba(13, 148, 136, .12));
}

.mnav-item:active { background: rgba(13, 148, 136, .08); }

@media (max-width: 575px) {
    .mnav-item { font-size: .63rem; }
    .mnav-item i { font-size: 1.12rem; }
}

/* Desktop: bilah tidak ditampilkan. `!important` diperlukan karena
   helper menulis display:grid lewat gaya inline. */
@media (min-width: 992px) {
    .mobile-bottom-nav { display: none !important; }
}

/* Ruang tambahan agar isi paling bawah tidak tertutup bilah navigasi. */
@media (max-width: 991px) {
    .site-footer,
    .app-footer {
        padding-bottom: calc(1.5rem + 72px + env(safe-area-inset-bottom));
    }
}