@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
   modern.css  --  lapisan tampilan bersama (dimuat paling akhir di <head>)
   1. Tombol kembali = ikon saja
   2. Tanpa border berwarna: pemisah memakai bayangan lembut
   3. Avatar foto profil + zoom saat hover
   ===================================================================== */
:root {
    --md-ink: var(--navy, #192C4D);
    --md-shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --md-shadow-2: 0 4px 14px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);
    --md-soft: #e6eaf1;
}

/* ---------- 1. tombol kembali (ikon) ---------- */
a.icon-back, button.icon-back {
    display: inline-flex !important; align-items: center; justify-content: center;
    flex: none; width: 38px !important; height: 38px !important; min-width: 0 !important;
    padding: 0 !important; margin-bottom: 10px;
    border: 0 !important; border-radius: 50% !important;
    background: #fff !important; color: var(--md-ink) !important;
    box-shadow: var(--md-shadow-1) !important;
    font-size: 14px !important; line-height: 1 !important; text-decoration: none !important;
    cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
a.icon-back:hover, button.icon-back:hover { transform: translateX(-2px); box-shadow: var(--md-shadow-2) !important; background: #f6f8fc !important; }
a.icon-back:focus-visible, button.icon-back:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(25,44,77,.18) !important; }
a.icon-back i, button.icon-back i { margin: 0 !important; }

/* ---------- 2. tanpa border berwarna ---------- */
.card, .alert, .list-group-item, .modal-content, .dropdown-menu, .toast {
    border-color: transparent !important;
}
.card, .modal-content, .dropdown-menu { box-shadow: var(--md-shadow-2); }
.alert { box-shadow: var(--md-shadow-1); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info, .btn-outline-dark, .btn-outline-light {
    border-color: transparent !important; background: rgba(16,24,40,.05);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
.btn-outline-dark:hover { background: rgba(16,24,40,.1); }
.form-control, .form-select, .input-group-text { border-color: var(--md-soft); }
.form-control:focus, .form-select:focus {
    border-color: #c9d1de; box-shadow: 0 0 0 3px rgba(25,44,77,.10);
}
.border, .border-primary, .border-secondary, .border-success, .border-danger,
.border-warning, .border-info, .border-dark { border-color: var(--md-soft) !important; }
.border-start, .border-end, .border-top, .border-bottom { border-color: var(--md-soft) !important; }
hr { border-color: var(--md-soft); opacity: 1; }

/* ---------- 3. avatar + zoom foto ---------- */
.av.av {
    --av: 40px; margin: 0; padding: 0; font-style: normal; white-space: normal; line-height: 1;
    position: relative !important; display: inline-grid !important; place-items: center; flex: none; vertical-align: middle;
    width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--navy, #192C4D), var(--gold, #C89C3D));
    color: #fff; box-shadow: var(--md-shadow-1);
}
.av.av em { font-style: normal; font-weight: 700; font-size: calc(var(--av) * .42); line-height: 1; color: #fff; display: block; }
.av.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.av-zoomable, [data-zoom-src], img[data-zoom] { cursor: zoom-in; }

.av-pop {
    position: fixed; z-index: 2147483000; left: 0; top: 0; pointer-events: none;
    width: 240px; max-width: 70vw; padding: 6px; border-radius: 18px; background: #fff;
    box-shadow: 0 18px 48px rgba(16,24,40,.28), 0 2px 8px rgba(16,24,40,.12);
    opacity: 0; transform: scale(.88); transform-origin: top center;
    transition: opacity .14s ease, transform .14s ease;
}
.av-pop[hidden] { display: none; }
.av-pop.on { opacity: 1; transform: scale(1); }
.av-pop img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 13px; background: #eef1f7; }
.av-pop span { display: block; padding: 7px 6px 3px; text-align: center; font-size: 13px; font-weight: 600; color: var(--md-ink); }

.av-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

/* ---------- 4. cetak: buang semua "chrome" portal ----------
   Navbar atas (.mhs-topbar), sidebar, tombol hamburger/kembali, overlay,
   notifikasi, chat, dan tur onboarding tidak boleh ikut tercetak di halaman
   mahasiswa mana pun (E-KTM, Nilai Ujian, KRS, dst). Dimuat paling akhir,
   jadi berlaku untuk semua halaman yang memakai modern.css. */
@media print {
    .mhs-topbar, .mhs-page-back,
    .sidebar, .sidebar-toggle-btn, .sidebar-overlay,
    .top-bar-profile, .topbar, .breadcrumb,
    .floating-menu, .chatwidget, #chatWidget, .chat-widget,
    [class^="obt-"], .obt-fab,
    .notif-toast, .presensi-status, .av-pop,
    .no-print, .print-toolbar {
        display: none !important;
    }
    html, body { background: #fff !important; height: auto !important; }
    .app-layout, .wrapper { display: block !important; }
    .main-content, .content, section.main {
        margin: 0 !important; padding: 0 !important; width: auto !important;
        max-width: none !important; animation: none !important;
    }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- 5. font seragam: Poppins (sama dengan Beranda dashboard) ----------
   :where() = spesifisitas 0, jadi ikon Font Awesome (kelas .fa-*), kode/monospace,
   dan aturan khusus yang sengaja memakai font lain tetap menang. */
:where(body, body *) { font-family: 'Poppins', sans-serif; }
:where(input, select, textarea, button, optgroup) { font-family: inherit; }
:where(code, kbd, pre, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
