/* =========================================================================
   SiAK — Mobile / responsive layer
   Layer ini di-load PALING AKHIR pada AppAsset & LoginAsset (setelah
   theme.css) sehingga menimpa AdminLTE 3, Bootstrap 4, site.css, dan
   theme.css.

   Prinsip:
   - Halaman TIDAK PERNAH scroll menyamping. Yang boleh scroll menyamping
     hanya pembungkus tabel (.table-responsive / .dataTables_wrapper /
     .grid-view) — dipasang otomatis oleh js/mobile.js.
   - Aturan yang mengubah tata letak dikurung dalam @media agar tampilan
     desktop tidak berubah sama sekali.
   - Breakpoint mengikuti Bootstrap 4: sm <576, md <768, lg <992.

   Tidak berlaku untuk views/print/* dan print-penilaian-* (render ke PDF
   lewat Printer/mPDF, tidak pernah dibuka di browser).
   ========================================================================= */

/* =========================================================================
   1. Dasar — berlaku di semua ukuran layar
   ========================================================================= */

html {
    /* Cegah Safari/iOS membesarkan font sendiri saat layar diputar. */
    -webkit-text-size-adjust: 100%;
}

/* Pembungkus scroll tabel. Dipasang otomatis oleh js/mobile.js ke setiap
   <table> yang belum punya pembungkus. */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTables & GridView punya pembungkus sendiri — beri scroll menyamping
   sebagai cadangan bila JS tidak sempat jalan. */
.dataTables_wrapper,
.grid-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Media tidak boleh melebihi kolomnya. */
img,
video,
embed,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* Pager GridView/DataTables: boleh turun baris daripada memaksa halaman
   melebar (BS4 .pagination adalah flex tanpa wrap). */
.pagination {
    flex-wrap: wrap;
}

/* Teks panjang tanpa spasi (URL, nama berkas) dipatahkan, bukan melebarkan
   halaman. */
.content-wrapper .card-body,
.content-wrapper td,
.content-wrapper th,
.breadcrumb {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Badge status yang teksnya panjang boleh turun baris. */
.badge {
    white-space: normal;
}

/* -------------------------------------------------------------------------
   Helper: baris filter (dropdown Tahun / Semester / Status, dsb.)
   Dipakai di halaman index yang punya toolbar filter. Di desktop tampil
   sebaris; di layar sempit membungkus ke bawah dan melebar penuh.
   ------------------------------------------------------------------------- */
.siak-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.siak-filter-bar > label,
.siak-filter-bar .siak-filter-label {
    margin: 0;
    font-weight: 400;
}

.siak-filter-bar .siak-filter-item {
    flex: 0 1 200px;
    min-width: 140px;
}

.siak-filter-bar select.form-control,
.siak-filter-bar .siak-filter-item select {
    width: 100%;
    display: block;
}

/* =========================================================================
   2. Tablet & ponsel (< 992px)
   ========================================================================= */

@media (max-width: 991.98px) {
    /* Tidak ada scroll menyamping tingkat halaman. Sidebar AdminLTE yang
       di-geser keluar layar ikut terpotong di sini — memang yang diinginkan.

       height:auto WAJIB menyertai overflow-x. site.css memberi body
       height:100%; begitu salah satu sumbu overflow bukan "visible",
       sumbu lainnya dihitung jadi "auto" — body akan menjadi kotak
       scroll-nya sendiri dan isi halaman terpotong. Dengan height:auto
       body ikut tinggi isinya, jadi scroll tetap milik viewport.
       (Layout main.php sudah memasang style="height:auto"; aturan ini
       menutup layout login yang belum.) */
    body {
        overflow-x: hidden;
        height: auto;
        min-height: 100%;
    }

    .content-wrapper,
    .content-wrapper > .content,
    .content-wrapper > .content-header {
        max-width: 100%;
    }

    /* Padding container dikecilkan supaya lebar konten tidak terbuang. */
    .content-header > .container-fluid,
    .content > .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Judul halaman + breadcrumb: tumpuk, breadcrumb rata kiri (bukan
       float kanan yang menyempitkan judul). */
    .content-header h1 {
        font-size: 1.35rem;
    }

    .content-header .breadcrumb {
        float: none !important;
        justify-content: flex-start;
        padding-left: 0;
        margin-bottom: 0;
        font-size: 12px;
    }

    /* Modal hampir selebar layar. */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-lg,
    .modal-xl {
        max-width: 100%;
    }
}

/* =========================================================================
   3. Ponsel (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {
    body {
        font-size: 13.5px;
    }

    .content-header h1 {
        font-size: 1.15rem;
    }

    /* Kartu: padding lebih kecil supaya isi dapat ruang lebih banyak. */
    .card {
        margin-bottom: 0.75rem;
    }

    .card-header {
        padding: 0.6rem 0.75rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-footer {
        padding: 0.6rem 0.75rem;
    }

    .card-header .card-title {
        font-size: 1rem;
        line-height: 1.35;
        float: none;
    }

    /* Label form rata kiri. Perlu !important karena:
       - site.css memaksa rata kanan untuk .form-horizontal, dan
       - beberapa view memasang style="text-align:right" LANGSUNG pada
         .control-label lewat matchMedia("(min-width: 576px)") yang tidak
         pernah mengembalikannya saat layar mengecil.
       Deklarasi !important pada stylesheet menang atas inline style biasa. */
    .content-wrapper .control-label,
    .form-horizontal .form-group .control-label,
    .col-form-label {
        text-align: left !important;
        padding-top: 0;
    }

    /* Tabel: rapatkan supaya lebih banyak kolom muat sebelum perlu di-scroll. */
    .table {
        font-size: 12.5px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td {
        padding: 0.45rem 0.4rem;
    }

    /* Tombol di dalam sel tabel boleh turun baris (banyak yang sudah
       width:100% + text-align:left dari view-nya). */
    .table .btn {
        white-space: normal;
        margin-bottom: 3px;
    }

    /* Target sentuh minimal ~34px. */
    .btn {
        min-height: 34px;
    }

    .btn-sm {
        min-height: 30px;
        padding: 0.3rem 0.55rem;
    }

    /* Baris tombol status/filter & tombol aksi di atas tabel: beri jarak
       vertikal supaya rapi saat turun baris. */
    .content-wrapper p > .btn,
    .content-wrapper .card-footer > .btn {
        margin-bottom: 6px;
    }

    /* GridView: kotak filter tidak menyempit sampai tak terbaca. */
    .grid-view .filters input.form-control,
    .grid-view .filters select.form-control {
        min-width: 90px;
        font-size: 12px;
        padding: 0.25rem 0.4rem;
    }

    .grid-view .summary {
        font-size: 12px;
    }

    /* Tombol yang di-float kanan (mis. "Kembali" pada .card-footer) menumpuk
       di bawah tombol utama, bukan berdesakan di sampingnya.
       .card-tools dikecualikan — itu tombol collapse/close bawaan AdminLTE
       yang memang harus tetap di ujung kanan card-header. */
    .content-wrapper .float-right:not(.card-tools),
    .content-wrapper .pull-right:not(.card-tools) {
        float: none !important;
    }

    /* Footer AdminLTE. */
    .main-footer {
        padding: 0.75rem;
        font-size: 12px;
        text-align: center;
    }
}

/* =========================================================================
   4. Ponsel kecil (< 576px)
   ========================================================================= */

@media (max-width: 575.98px) {
    .content-header > .container-fluid,
    .content > .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .card-body {
        padding: 0.6rem;
    }

    /* Navbar: nama role sudah disembunyikan AdminLTE lewat .d-none
       .d-sm-inline-block. Sisakan tombol menu + Logout, dengan teks &
       avatar yang lebih ringkas agar muat di layar 320px. */
    .main-header .navbar-nav .nav-link {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 15px !important;
    }

    .main-header .navbar-nav img.img-circle {
        margin-right: 6px !important;
    }

    .siak-filter-bar .siak-filter-item {
        flex: 1 1 100%;
    }
}

/* =========================================================================
   5. Halaman login / register (layout main-login)
   ========================================================================= */

@media (max-width: 575.98px) {
    .login-body {
        margin-top: 60px;
        padding: 0 14px 30px;
    }

    .login-box-center {
        padding: 8px;
    }

    /* Link "Register Mahasiswa" / "Login" tidak lagi float kanan supaya
       tidak menabrak tepi kartu. */
    .login-box-center .pull-right,
    .login-box-center .float-right {
        float: none !important;
        text-align: center;
    }
}