/* ============================================================
   DAFTAR PRESTASI
   ------------------------------------------------------------
   Berkas terpisah karena hanya dipakai satu halaman. Menaruhnya
   di gaya.css berarti setiap pengunjung beranda ikut mengunduh
   gaya yang tidak pernah mereka pakai.
   ============================================================ */

/* ---------- Ringkasan angka ---------- */
.ringkas-prestasi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.ringkas-butir {
  padding: 1.1rem 1.2rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--pusaka);
  border-radius: var(--lengkung);
}
.ringkas-butir.sorot { border-left-color: var(--emas); }
.ringkas-butir strong {
  display: block;
  font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--pusaka);
}
.ringkas-butir.sorot strong { color: var(--emas-teks); }
.ringkas-butir span { display: block; margin-top: .25rem; font-size: var(--t-sm); color: var(--tinta-lembut); }

/* ---------- Penyaring ---------- */
.saring-prestasi {
  display: flex; flex-wrap: wrap; gap: .8rem;
  padding: 1.1rem;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  margin-bottom: 1.4rem;
}
.saring-prestasi label { display: flex; flex-direction: column; gap: .3rem; min-width: 140px; }
.saring-prestasi label.tumbuh { flex: 1; min-width: 200px; }
.saring-prestasi label > span {
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta-lembut);
}
.saring-prestasi select,
.saring-prestasi input {
  padding: .55rem .7rem;
  background: var(--kartu); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: var(--lengkung-s);
  font-family: inherit; font-size: var(--t-sm);
}
.saring-prestasi select:focus,
.saring-prestasi input:focus {
  outline: none; border-color: var(--pusaka); box-shadow: 0 0 0 3px var(--pusaka-muda);
}
.saring-aksi { display: flex; gap: .5rem; align-items: flex-end; }

.petunjuk-tabel { font-size: var(--t-sm); color: var(--tinta-lembut); margin-bottom: .6rem; }
.jumlah-tampil { text-align: center; font-size: var(--t-sm); color: var(--tinta-lembut); margin-top: 1.2rem; }

/* ---------- Tabel ---------- */
.bingkai-prestasi {
  overflow-x: auto;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
}
.tabel-prestasi { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.tabel-prestasi thead th {
  position: sticky; top: 0; z-index: 1;
  padding: .8rem .9rem;
  background: var(--pusaka-muda); color: var(--pusaka);
  font-size: var(--t-xs); font-weight: 700;
  text-align: left; white-space: nowrap;
}
.tabel-prestasi tbody td { padding: .8rem .9rem; border-top: 1px solid var(--garis); vertical-align: top; }

.baris-prestasi { cursor: pointer; transition: background-color var(--laju-cepat) ease; }
.baris-prestasi:hover,
.baris-prestasi:focus-visible { background: var(--pusaka-muda); outline: none; }
/* Garis warna unit muncul di tepi kiri saat baris disorot */
.baris-prestasi td:first-child { box-shadow: inset 3px 0 0 transparent; }
.baris-prestasi:hover td:first-child,
.baris-prestasi:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--warna-unit, var(--pusaka)); }

.kol-no      { width: 48px; color: var(--tinta-lembut); font-variant-numeric: tabular-nums; }
.kol-tingkat { width: 148px; }
.kol-unit    { width: 120px; color: var(--tinta-lembut); }
.kol-tahun   { width: 74px; color: var(--tinta-lembut); font-variant-numeric: tabular-nums; }

.nama-siswa    { font-weight: 600; }
.kelas-siswa,
.jml-prestasi  { display: inline-block; font-size: var(--t-xs); }
.kelas-siswa   { color: var(--tinta-lembut); margin-left: .4rem; }
.jml-prestasi {
  padding: .06rem .4rem; margin-left: .4rem;
  border-radius: 100px;
  background: var(--emas); color: #2A1405; font-weight: 700;
}
.judul-prestasi { display: block; line-height: 1.4; }
.peringkat {
  display: inline-block; margin-top: .2rem;
  font-size: var(--t-xs); font-weight: 700; color: var(--emas-teks);
}

/* Lencana tingkat — makin tinggi tingkatnya, makin pekat warnanya */
.lencana-tingkat {
  display: inline-block; padding: .18rem .55rem;
  border-radius: 100px;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.t-sekolah       { background: #E9EDEF; color: #566473; }
.t-kota          { background: #DCEAF6; color: #1F6E8C; }
.t-provinsi      { background: #CFE0F2; color: #0D5296; }
.t-nasional      { background: #0D5296; color: #fff; }
.t-internasional { background: #B85C1D; color: #fff; }
html[data-tema="gelap"] .t-sekolah  { background: #262F38; color: #9BA8B5; }
html[data-tema="gelap"] .t-kota     { background: #16323F; color: #7FC2DC; }
html[data-tema="gelap"] .t-provinsi { background: #12304F; color: #8AC4F5; }

/* ---------- Kepala kolom yang bisa diurutkan ---------- */
.tabel-prestasi thead th { padding: 0; }
.tabel-prestasi thead .urut {
  display: flex; align-items: center; gap: .3rem;
  padding: .8rem .9rem;
  color: var(--pusaka); text-decoration: none;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.tabel-prestasi thead .urut:hover { background: rgba(13, 82, 150, .1); }
.tabel-prestasi thead .urut.aktif { background: rgba(13, 82, 150, .14); }

.panah-urut { opacity: .32; font-size: .8em; }
.panah-urut.aktif { opacity: 1; }

/* ---------- Pop-up: seluruh prestasi satu peserta didik ---------- */
.tirai-prestasi {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(6, 14, 24, .9);
  backdrop-filter: blur(4px);
}
.tirai-prestasi[hidden] { display: none; }

.kotak-prestasi {
  position: relative;
  display: flex; flex-direction: column;
  width: min(620px, 100%);
  max-height: 92vh;
  background: var(--kartu);
  border-radius: 18px;
  box-shadow: 0 26px 76px rgba(0,0,0,.45);
  animation: masukPr 340ms cubic-bezier(.34, 1.36, .64, 1);
  overflow: hidden;
}
@keyframes masukPr { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Kepala mewarnai dirinya sendiri, bukan ditumpangkan di atas pita
   bertinggi tetap. Sebelumnya tingginya ditetapkan sebagai angka mati
   yang dicocokkan dengan nama satu baris — begitu nama siswa panjang
   dan membelah jadi dua baris, isinya keluar dari pita. Dengan cara
   ini tingginya selalu mengikuti isinya, sepanjang apa pun namanya. */
.pr-kepala {
  flex: none;
  padding: 1.5rem 3.6rem 1.3rem 1.6rem;   /* ruang kanan untuk tombol tutup */
  background: linear-gradient(150deg, var(--warna-unit, #0D5296), rgba(0,0,0,.35));
}
.pr-kepala h3 {
  /* Mengecil sendiri di layar sempit. Dengan ukuran tetap, nama
     panjang memakan hampir separuh tinggi layar ponsel sebelum
     satu prestasi pun terlihat. */
  font-size: clamp(1.15rem, .9rem + 1.6vw, 1.7rem);
  line-height: 1.22; margin: 0 0 .25rem;
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45);
  overflow-wrap: break-word;
}
.pr-sub { font-size: var(--t-sm); color: rgba(255,255,255,.9); margin: 0 0 .6rem;
          text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.pr-sub[hidden] { display: none; }
.pr-jumlah {
  display: inline-block; padding: .2rem .7rem;
  border-radius: 100px;
  background: var(--emas); color: #2A1405;
  font-size: var(--t-xs); font-weight: 700;
}

/* Hanya daftarnya yang menggulir, agar nama siswa tetap terlihat */
.pr-daftar {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: .4rem 1.6rem 1.6rem;
}

.pr-butir {
  display: flex; gap: .9rem;
  padding: .9rem 0;
  border-top: 1px solid var(--garis);
}
.pr-butir:first-child { border-top: 0; padding-top: .6rem; }

.pr-butir-foto {
  flex: none; width: 108px;
  border-radius: 9px; overflow: hidden; line-height: 0;
  border: 2px solid var(--garis);
}
.pr-butir-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.pr-butir-isi { min-width: 0; flex: 1; }

.pr-butir-atas {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .35rem;
}
.pr-butir-no {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--warna-unit, var(--pusaka)); color: #fff;
  font-size: .68rem; font-weight: 700;
}
.pr-butir-peringkat { font-size: var(--t-xs); font-weight: 700; color: var(--emas-teks); }

.pr-butir-isi strong {
  display: block; font-size: var(--t-lg); line-height: 1.3;
  margin-bottom: .45rem;
}

.pr-rincian { margin: 0; font-size: var(--t-sm); }
.pr-rincian > div {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: .5rem; padding: .18rem 0;
}
.pr-rincian dt { color: var(--tinta-lembut); }
.pr-rincian dd { margin: 0; }

.pr-butir-ket {
  margin: .6rem 0 0; padding: .55rem .75rem;
  background: var(--kertas); border-radius: 8px;
  font-size: var(--t-sm); line-height: 1.65; white-space: pre-line;
}

.pr-tutup {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(5, 18, 31, .45); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.pr-tutup:hover { background: rgba(5, 18, 31, .8); }

.kotak-prestasi [hidden] { display: none !important; }

/* ---------- Ponsel ---------- */
@media (max-width: 720px) {
  .saring-prestasi label { min-width: 0; flex: 1 1 calc(50% - .4rem); }
  .saring-prestasi label.tumbuh { flex: 1 1 100%; }
  .saring-aksi { flex: 1 1 100%; }
  .saring-aksi .tombol { flex: 1; justify-content: center; }

  /* Kolom yang datanya sudah muncul di pop-up disembunyikan,
     agar tabelnya tidak perlu digeser ke samping */
  .kol-unit, .kol-tahun, .kol-no { display: none; }
  .tabel-prestasi tbody td { padding: .7rem .8rem; }
  .kol-tingkat { width: 110px; }

  .ringkas-butir strong { font-size: 1.6rem; }
  .pr-kepala { padding: 1.2rem 3.2rem 1.1rem 1.1rem; }
  .pr-daftar { padding: .4rem 1.1rem 1.2rem; }
  /* Kolom label dilepas di layar sempit. Dengan dua kolom, kata
     panjang seperti "Penyelenggara" memenuhi kolomnya sampai
     menempel ke isinya tanpa sisa jarak. */
  .pr-rincian > div { grid-template-columns: 1fr; gap: 0; padding: .3rem 0; }
  .pr-rincian dt { font-size: var(--t-xs); }
  .pr-rincian dd { font-weight: 500; }
  .pr-butir { flex-direction: column; gap: .6rem; }
  .pr-butir-foto { width: 100%; }
  .tabel-prestasi thead .urut { padding: .7rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kotak-prestasi { animation: none; }
}


/* Penanda prestasi lain yang tidak ditampilkan di baris tabel */
.prestasi-lain {
  display: block; margin-top: .25rem;
  font-size: var(--t-xs); color: var(--tinta-lembut); font-style: italic;
}