/* =====================================================================
   RESPONSIVE GLOBAL -- jaring pengaman untuk SEMUA halaman.
   Dimuat otomatis oleh middleware InjeksiResponsif (paling akhir di <head>),
   jadi halaman baru ikut tanpa perlu edit satu per satu.

   Aturan di sini sengaja konservatif: tidak mengubah tata letak yang sudah
   benar, hanya mencegah hal yang SELALU rusak di layar sempit (gambar/tabel/
   teks panjang yang melebihi lebar layar, zoom otomatis iOS di input, dll).
   Layout spesifik per halaman tetap diatur di CSS masing-masing.
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Media tidak boleh lebih lebar dari kontainernya. */
img, video, canvas, iframe, embed, object {
    max-width: 100%;
}
img, video {
    height: auto;
}

/* Teks/URL/kode panjang tidak boleh mendorong halaman melebar. */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, a, label, span {
    overflow-wrap: break-word;
}
pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pembungkus tabel lebar: dipasang otomatis oleh responsive-global.js hanya
   kalau tabelnya benar-benar melebihi lebar layar. */
.rwd-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rwd-scroll > table {
    min-width: 100%;
}

@media (max-width: 992px) {
    /* Pengaman terakhir: kalau masih ada elemen yang meluber, halaman tidak
       ikut bergeser ke samping. `clip` (bukan `hidden`) supaya header sticky
       tetap jalan. */
    body {
        overflow-x: clip;
    }
}

@media (max-width: 768px) {
    /* iOS Safari otomatis zoom-in kalau font input < 16px, dan halaman
       tidak balik ke ukuran semula. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Popup/modal umum tidak boleh lebih lebar dari layar. */
    [class*="modal"] > [class*="box"],
    [class*="modal"] > [class*="content"],
    [class*="modal"] > [class*="dialog"],
    [class*="popup"] > [class*="box"],
    [class*="popup"] > [class*="content"] {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    /* Isi utama halaman dengan sidebar: padding lebih rapat di HP. */
    .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Hormati preferensi pengguna yang mematikan animasi. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   Kartu foto di halaman "Ubah Profil" (Admin & Dosen)
   ===================================================================== */
.pwd-foto { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 14px; border: 1px solid #e5e9f0; border-radius: 14px; background: rgba(148, 163, 184, .08); }
.pwd-foto-avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--navy, #192C4D); color: var(--gold, #C89C3D); box-shadow: 0 0 0 3px var(--gold, #C89C3D); }
.pwd-foto-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pwd-foto-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pwd-foto-info small { color: #7a8699; font-size: 12px; }
.pwd-foto-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; cursor: pointer; background: var(--navy, #192C4D); color: #fff; font: 600 13px 'Poppins', sans-serif; }
.pwd-foto-btn:hover { background: color-mix(in srgb, var(--navy, #192C4D) 78%, #000); }

/* =====================================================================
   Navbar atas Admin/Dosen di HP: tombol tema/bahasa tidak boleh membuat
   isi topbar saling menimpa. Satu baris, semua mengecil rapi.
   ===================================================================== */
@media (max-width: 768px) {
    html body .topbar { flex-wrap: nowrap; }
    html body .topbar-right { flex-shrink: 0; gap: 6px; }
    html body .topbar-left { min-width: 0; }
    html body .topbar h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html body .dashboard-preferences { gap: 4px; margin-right: 0; }
    html body .dashboard-preferences__theme { width: 34px; height: 34px; padding: 0; }
    html body .dashboard-preferences__language select {
        width: 46px; min-width: 0; height: 34px; padding: 0; text-align: center; text-align-last: center;
        -webkit-appearance: none; appearance: none; background-image: none; font-size: 16px;
    }
}
@media (max-width: 480px) {
    /* Layar sangat sempit: pilihan bahasa disembunyikan, tombol tema tetap ada. */
    html body .topbar .dashboard-preferences__language,
    html body .mhs-topbar .dashboard-preferences__language { display: none; }
}

/* Dropdown hasil "Cari Menu" tidak boleh melebihi lebar layar (penyebab halaman bergeser ke kiri). */
.search-results, .mhs-topbar__results { max-width: calc(100vw - 24px); box-sizing: border-box; }
@media (max-width: 768px) {
    html body .search-results { right: auto; left: 0; width: min(320px, calc(100vw - 24px)); }
}