/* ==========================================================================
   SIAP IPDN — DASAR
   ==========================================================================

   Tipografi, elemen HTML dasar, dan penyesuaian kelas Bootstrap 5. Berkas ini
   memuat gaya yang berlaku untuk ELEMEN; komponen bernama ada di
   components.css.

   Dimuat SETELAH Bootstrap supaya penyesuaian di sini menang tanpa !important.
   Satu-satunya !important yang tersisa dijelaskan di tempatnya.
   ========================================================================== */

/* ── Skala teks seluruh aplikasi ───────────────────────────────────────────
   Penggunanya dosen senior; 0.7–0.8rem terlalu kecil untuk dibaca nyaman.
   Seluruh aplikasi memakai `rem` (1.531 deklarasi di 114 view) dan `rem`
   relatif ke elemen root — jadi satu nilai di sini menaikkan semuanya
   proporsional, tanpa menyunting satu pun view. Kalau masih terasa kecil,
   naikkan angka ini saja (mis. 18px). */
html { font-size: 17px; }

/* Cetak WAJIB kembali ke 16px. cetak/khs.blade.php dan cetak/transkrip.blade.php
   memakai layout aplikasi; tanpa penjaga ini tata letak KHS & transkrip
   membesar dan meleset dari halaman kertas. */
@media print { html { font-size: 16px; } }

/* font-size isi, bukan 1rem bawaan Bootstrap: tanpa ini teks lepas (isi
   kartu, paragraf, pesan kosong) tampil 17px sementara isi tabel di
   sebelahnya 14,9px — dua ukuran "isi" di satu layar. */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--t-base);
    line-height: 1.55;
    background: var(--surface-app);
    color: var(--text-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Diterapkan ke body dan diwarisi, BUKAN ke `*`.
   Selektor `*` sebelumnya menimpa font-family ikon Font Awesome pada beberapa
   pseudo-element dan memaksa penulisan ulang di tempat lain. */
button, input, select, textarea { font-family: inherit; }

/* Ketuk langsung, tanpa jeda ~300ms menunggu ketuk ganda; sorotan ketuk
   bawaan WebKit (kotak abu-abu) diganti tint dongker yang disengaja. */
a, button, input, select, textarea, label, summary, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(27, 69, 133, .12);
}

/* balance: judul dua baris terbagi rata, bukan satu kata yatim di baris kedua. */
h1, h2, h3, h4, h5, h6 { color: var(--text); text-wrap: balance; }

/* ── Tipografi bawaan Bootstrap, dikunci ke skala ─────────────────────────
   Bootstrap membawa ukuran & ketebalannya sendiri yang tidak mengenal skala
   di tokens.css: h5 21px, <small> dan .form-text 0,875em (jadi 13px di sel
   tabel tapi 15px di judul — berubah mengikuti induknya), <strong> dan
   .fw-bold 700 sementara .fw-semibold 600. Hasilnya dua "tebal" berbeda di
   layar yang sama. Selektor elemen di sini sama spesifiknya dengan milik
   Bootstrap dan dimuat sesudahnya, jadi menang; kelas apa pun di view
   (mis. .page-title) tetap lebih spesifik dan tetap berlaku. */
h1, h2, h3 { font-size: var(--t-xl); font-weight: var(--fw-semi); }
h4, h5, h6 { font-size: var(--t-lg); font-weight: var(--fw-semi); }

b, strong { font-weight: var(--fw-semi); }

small, .small, .form-text { font-size: var(--t-sm); }

/* Utilitas Bootstrap memakai !important, jadi penggantinya juga harus. */
.fw-bold, .fw-bolder, .fw-semibold { font-weight: var(--fw-semi) !important; }

a { color: var(--a-500); }

/* ── Cincin fokus ──────────────────────────────────────────────────────────
   Terlihat di seluruh aplikasi, tidak hanya di kendali form. Aksesibilitas
   papan tik sebelumnya bergantung pada bawaan peramban yang nyaris tidak
   terlihat di atas latar terang. */
:focus-visible {
    outline: 2px solid var(--a-500);
    outline-offset: 2px;
}

/* Tautan berjangkar (mis. sidebar → #tarik) tidak boleh mendarat di balik
   #topbar yang position: sticky. */
:target { scroll-margin-top: calc(var(--topbar-height) + var(--s-4)); }

/* ── Kartu ────────────────────────────────────────────────────────────────
   Bayangan sangat halus, TANPA garis — garis atau bayangan, tidak keduanya.
   Garis abu-abu di setiap kartu (ditambah sudut hampir siku) membuat halaman
   terbaca sebagai kisi-kisi kotak yang kaku. Kartu yang bersarang di dalam
   kartu lain (kelas .garis-tebal / .tanpa-bayang) tetap memakai garis. */
.card {
    background: var(--surface-card);
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-kartu);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    /* !important dipertahankan: Bootstrap menyetel radius card-header lewat
       selektor yang lebih spesifik (.card > :first-child). */
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding: var(--s-4) var(--s-5);
}

.card-header .card-title {
    font-size: var(--t-md);
    font-weight: var(--fw-semi);
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    letter-spacing: -.005em;
}

/* Elemen terakhir dalam kartu tidak membawa margin bawahnya: margin itu
   menumpuk dengan padding kartu dan tampil sebagai pita kosong di dasar kartu
   (temuan panel-void pemeriksa skill pada "Riwayat IPS"). !important karena
   margin itu biasanya datang dari utilitas Bootstrap (.mb-3), yang sendiri
   ber-!important — tanpa ini aturannya kalah dan pitanya tetap ada. */
.card-body > :last-child { margin-bottom: 0 !important; }

/* Kepala kartu yang memuat judul DAN lencana/tombol boleh turun baris di layar
   sempit, alih-alih mendorong isinya keluar tepi. */
.card-header.d-flex { flex-wrap: wrap; row-gap: var(--s-2); }

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-soft);
    padding: var(--s-3) var(--s-5);
}

/* ── Tabel ────────────────────────────────────────────────────────────────
   Kepala tabel huruf biasa, bukan KAPITAL berjarak lebar di atas pita abu-abu:
   kapital terbaca seperti formulir isian dan memperlambat pemindaian. */
.table {
    margin-bottom: 0;
    color: var(--text-body);
}

.table thead th {
    background: transparent;   /* tanpa pita kepala: 0 dari 11 tabel yang diteliti */
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: var(--s-3) var(--s-4);
    vertical-align: middle;
    font-size: var(--t-base);
    color: var(--text-body);
    border-bottom: 1px solid var(--border-soft);
    /* Angka sama-lebar: digit dalam kolom berbaris lurus dan tidak bergoyang. */
    font-variant-numeric: tabular-nums;
}

/* Sorotan dipasang pada SEL, bukan <tr>: Bootstrap 5.3 memberi setiap sel
   latar sendiri (--bs-table-bg), yang menutupi latar baris — sorotan pada
   <tr> tidak pernah terlihat. */
.table tbody td { transition: background-color var(--gerak); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover > td { background-color: var(--n-50); }

/* Tabel padat untuk panel dalam (mis. riwayat di halaman detail). */
.table-sm thead th,
.table-sm tbody td { padding: var(--s-2) var(--s-3); }

/* ── Tombol ───────────────────────────────────────────────────────────────*/
.btn {
    border-radius: var(--r-md);
    font-size: var(--t-base);
    font-weight: var(--fw-medium);
    transition: background var(--gerak), border-color var(--gerak),
                color var(--gerak), box-shadow var(--gerak), transform var(--gerak);
}

/* Tombol utama: dongker penuh, rata — satu-satunya bidang ber-hue penuh
   di halaman, sesuai gaya accent ladder. Tanpa bayangan, tanpa gradasi
   (alat pemeriksa skill menandai keduanya). */
.btn-primary {
    background: var(--a-500);
    border-color: var(--a-500);
}
/* :focus-visible, bukan :focus — dengan :focus tombol tetap gelap setelah
   diklik tetikus, seolah masih ditekan. */
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--a-700);
    border-color: var(--a-700);
}

/* Gerak sebagai umpan balik — satu-satunya gerak di layar kerja. Tombol
   terasa ditekan; tidak ada yang tampil dengan animasi masuk. */
@media (prefers-reduced-motion: no-preference) {
    .btn:active { transform: scale(.98); }
}

.btn-outline-primary {
    border-color: var(--a-200);
    color: var(--a-500);
}
.btn-outline-primary:hover {
    background: var(--a-50);
    border-color: var(--a-300);
    color: var(--a-700);
}

/* Tombol sekunder: netral, bukan biru. Halaman biasanya punya satu tindakan
   utama; sisanya tidak perlu bersaing menariknya. */
.btn-light {
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-body);
}
.btn-light:hover {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-sm {
    font-size: var(--t-sm);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
}

/* ── Form ─────────────────────────────────────────────────────────────────*/
.form-label {
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--text-body);
    margin-bottom: var(--s-1);
}

.form-control, .form-select {
    font-size: var(--t-base);
    color: var(--text-body);
    border-color: var(--border);
    border-radius: var(--r-md);
    padding: var(--s-2) var(--s-3);
    transition: border-color var(--gerak), box-shadow var(--gerak);
}

.form-control:hover, .form-select:hover { border-color: var(--border-strong); }

.form-control::placeholder { color: var(--text-faint); }

.form-control:focus, .form-select:focus {
    border-color: var(--a-500);
    box-shadow: var(--sh-focus);
}

.form-control-sm, .form-select-sm {
    font-size: var(--t-sm);
    border-radius: var(--r-sm);
}

.form-check-label { font-size: var(--t-base); }

/* ── Pesan ────────────────────────────────────────────────────────────────*/
.alert {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--t-base);
    padding: var(--s-3) var(--s-4);
}

.alert-success { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok-800); }
.alert-danger  { background: var(--bad-50);  border-color: var(--bad-200);  color: var(--bad-800); }
.alert-warning { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-800); }
.alert-info    { background: var(--info-50); border-color: var(--info-200); color: var(--info-800); }

.alert-link { color: inherit; font-weight: var(--fw-semi); }

/* ── Jejak & paginasi ─────────────────────────────────────────────────────*/
.breadcrumb {
    font-size: var(--t-sm);
    margin-bottom: 0;
}
.breadcrumb-item a { color: var(--a-500); text-decoration: none; }
.breadcrumb-item.active { color: var(--text-muted); }

/* Boleh turun baris: di 768px deretan nomor halaman sempat mendorong halaman
   menggeser ke samping 19px. */
.pagination { font-size: var(--t-sm); margin-bottom: 0; flex-wrap: wrap; row-gap: var(--s-1); }

.dropdown-menu { font-size: var(--t-base); }
.modal-title   { font-size: var(--t-lg); font-weight: var(--fw-semi); }

.page-link {
    border-radius: var(--r-sm);
    margin: 0 2px;
    border: 1px solid var(--border);
    color: var(--n-600);
}
.page-link:hover { background: var(--surface-sunken); color: var(--text); }

.page-item.active .page-link {
    background: var(--a-500);
    border-color: var(--a-500);
    color: var(--n-0);
}
.page-item.disabled .page-link { color: var(--text-faint); background: transparent; }

/* ── Badge Bootstrap ──────────────────────────────────────────────────────
   Bentuknya dibakukan di sini; WARNA-nya lewat komponen <x-badge> di
   components.css, supaya triplet warna tidak lagi ditulis tangan per view. */
.badge {
    font-size: var(--t-2xs);
    font-weight: var(--fw-semi);
    border-radius: var(--r-pill);
    padding: var(--s-1) 10px;
}

/* ── Ikon dekoratif ───────────────────────────────────────────────────────
   Ikon Font Awesome yang berdampingan dengan teks tidak menambah makna bagi
   pembaca layar. Yang berdiri sendiri (tombol ikon-saja) tetap wajib punya
   aria-label — lihat components.css. */
.fas[aria-hidden="true"], .far[aria-hidden="true"], .fab[aria-hidden="true"] {
    pointer-events: none;
}