/*
==========================================================
SMANSASOO Academic Portal
Main Stylesheet
Version : 1.1.0
==========================================================
FIX (v1.1.0):
- BUG KRITIS: sama seperti kasus glass.css sebelumnya, file
  ini berisi potongan diff mentah yang belum diterapkan
  (baris "+" literal di dalam CSS). Baris seperti
  "+    display:flex;" adalah deklarasi TIDAK VALID (nama
  properti jadi "+    display"), jadi browser membuangnya
  diam-diam. Efeknya: body/.container/.search-section tetap
  memakai layout lama, sama sekali TIDAK jadi flex column —
  search-card tidak pernah benar-benar center secara
  vertikal di viewport, cuma nempel di atas seperti biasa.
- Ada juga DUPLIKAT ".container" (versi lama tanpa flex,
  sisa dari sebelum di-diff) — dihapus, digabung jadi satu
  definisi ".container" yang bersih.
- Sekarang diterapkan dengan benar: body & .container jadi
  flex column (mengisi tinggi viewport via 100dvh, dengan
  fallback 100vh untuk browser lama), .search-section jadi
  flex:1 yang men-center search-card/#result secara vertikal
  DAN horizontal di ruang yang tersisa antara header & footer
  — header tetap di atas, footer tetap di bawah, kartu di
  tengah, apapun tinggi kontennya.
- justify-content:safe center dipakai (progressive
  enhancement, sama pola dengan overlay di glass.css):
  browser lama abaikan baris ini & tetap pakai center biasa;
  browser modern upgrade supaya kalau konten (mis. kartu
  hasil yang panjang) lebih tinggi dari viewport pendek,
  bagian atas TIDAK terpotong — rata atas + tetap bisa
  discroll, bukan center-lalu-clip.
- .search-section > .search-card / #result diberi width:100%
  supaya begitu parent-nya jadi flex, kartu tidak menyusut
  ikut lebar kontennya sendiri (default flex item adalah
  shrink-to-fit) — tetap mengikuti lebar/max-width yang sudah
  diatur di responsive.css seperti sebelumnya.
==========================================================
*/

/* ==============================
   RESET
============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;

    /* Dipindah dari body (lihat catatan di css/kelulusan/glass.css)
       supaya position:sticky navbar shell (js/shell.js) tidak
       rusak -- overflow di <html> tetap dianggap viewport oleh
       browser, jadi tidak membuat scroll-container terpisah. */
    overflow-x:hidden;
}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

    min-height:100vh;
    min-height:100dvh;

    display:flex;
    flex-direction:column;

}

/* ==============================
   CONTAINER
============================== */

.container{

    width:min(92%,1100px);

    margin:auto;

    flex:1;
    display:flex;
    flex-direction:column;

}

/* ==============================
   HEADER
============================== */

.header{

    padding:50px 20px;

    text-align:center;

}

/* .container di dalam header jadi flex column (warisan dari
   rule .container umum di atas, dipakai halaman lain untuk
   layout full-width), tapi tanpa align-items eksplisit, item
   berlebar-tetap (logo, width:110px) jatuh ke kiri -- cuma
   teks di item full-width (h1/p) yang kelihatan center karena
   text-align, padahal logonya sendiri tidak.
   CATATAN: rule ini PERNAH ditambahkan sebelumnya lalu hilang
   lagi (kemungkinan ketiban saat migrasi ke sistem
   navbar+sidebar). Kalau nanti index.html/nilai.html di-refactor
   ulang lagi, pastikan baris ini ikut dipertahankan -- dicari
   lewat "Logo diatas ... belum di tengah" kalau regresi lagi. */
.header .container{

    align-items:center;

}

.logo{

    width:110px;

    margin-bottom:20px;

}

.header h1{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}

.header h1 span{

    display:block;

    color:var(--secondary);

}

.header p{

    margin-top:12px;

    color:var(--text-light);

}

/* ==============================
   SEARCH SECTION
============================== */

.search-section{

    padding:20px;

    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    justify-content:safe center;
    width:100%;

}

.search-section > .search-card,
.search-section > #result{

    width:100%;

}

.search-card{

    background:#ffffff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.search-card h2{

    text-align:center;

    margin-bottom:10px;

    color:var(--primary);

}

.search-card p{

    text-align:center;

    margin-bottom:25px;

    color:var(--text-light);

}

/* ==============================
   FORM
============================== */

/* CATATAN: selector ini SENGAJA menyasar 2 ID sekaligus
   (#searchForm dipakai index.html & kelulusan.html, #nilaiForm
   dipakai pages/nilai.html) -- sebelumnya cuma #searchForm
   yang disebut, jadi form pencarian NIS di halaman Nilai sama
   sekali tidak ke-style (balik ke tampilan default browser:
   input kecil, tombol mepet). rekap.html tidak perlu ikut
   ditambahkan di sini karena sudah punya styling form sendiri
   (lihat .rekap-field di css/rekap.css). */

#searchForm,
#nilaiForm{

    display:flex;

    flex-direction:column;

    gap:15px;

}

#searchForm input,
#nilaiForm input{

    height:55px;

    padding:0 18px;

    border:2px solid #e5e7eb;

    border-radius:12px;

    font-size:16px;

    outline:none;

    transition:.25s;

}

#searchForm input:focus,
#nilaiForm input:focus{

    border-color:var(--primary);

}

#searchForm button,
#nilaiForm button{

    height:55px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:700;

}

/* ==============================
   LOADING
============================== */

.loading-box{

    text-align:center;

    padding:40px;

}

.loading-box p{

    margin-top:15px;

    color:var(--text-light);

}

/* ==============================
   RESULT
============================== */

.result-card{

    background:#ffffff;

    border-radius:20px;

    padding:30px;

    margin-top:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.result-title{

    text-align:center;

    margin-bottom:25px;

    color:var(--success);

}

.result-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #eeeeee;

}

.result-item:last-child{

    border-bottom:none;

}

.result-label{

    font-weight:600;

    color:var(--text-light);

}

.result-value{

    font-weight:700;

    text-align:right;

}

/* ==============================
   ERROR
============================== */

.error-card{

    margin-top:25px;

    background:#ffeaea;

    color:#d32f2f;

    padding:18px;

    border-radius:14px;

    text-align:center;

    font-weight:600;

}

/* ==============================
   FOOTER
============================== */

footer{

    margin-top:60px;

    padding:30px 20px;

    text-align:center;

    color:var(--text-light);

    font-size:14px;

}

footer small{

    display:block;

    margin-top:8px;

}

/* ==============================
   UTILITIES
============================== */

.hidden{

    display:none;

}

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.link-primary{

    color:var(--primary);

    font-weight:700;

    text-decoration:underline;

}