/* frontend/assets/css/layouts.css
   Tata letak kerangka aplikasi.

   Mobile-first dengan SATU titik henti kerangka di 768px: di bawahnya bottom
   navigation, di atasnya sidebar. Titik henti lain hanya dipakai komponen
   yang memang membutuhkannya (grid kartu, layar masuk). */

.aplikasi {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.konten {
  flex: 1 1 auto;
  width: 100%;
  padding: var(--jarak-4);
  padding-left: calc(var(--jarak-4) + var(--aman-kiri));
  padding-right: calc(var(--jarak-4) + var(--aman-kanan));
  padding-bottom: var(--jarak-8);
  outline: none;
}

/* Halaman masuk/penyiapan memenuhi layar sendiri, tanpa bantalan kerangka. */
body.tanpa-appbar .konten { padding: 0; }

/* Animasi masuk halaman: naik sedikit sambil memudar. Hanya opacity dan
   transform — keduanya dikerjakan GPU, tidak memicu tata letak ulang. */
.konten--masuk > * { animation: halaman-masuk 260ms var(--kurva) both; }
@keyframes halaman-masuk {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Halaman: pembungkus isi tiap modul. */
.halaman { display: flex; flex-direction: column; gap: var(--jarak-4); }
.halaman--pusat { justify-content: center; min-height: 60dvh; }
.halaman__kepala { display: flex; flex-direction: column; gap: var(--jarak-1); }
.halaman__judul { font-size: var(--teks-xl); font-weight: var(--tebal-berat); letter-spacing: -.01em; }
.halaman__sub { font-size: var(--teks-sm); color: var(--warna-teks-lembut); }

/* Grid kartu yang menyesuaikan lebar layar. */
.grid-kartu {
  display: grid;
  gap: var(--jarak-3);
  grid-template-columns: 1fr;
}
.grid-2 { display: grid; gap: var(--jarak-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--jarak-3); grid-template-columns: 1fr; }

/* Matriks input capaian: kolom nama tetap, kolom indikator digulir. */
.matriks-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Wizard bertahap (sesi uji baru, promosi). */
.langkah {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  font-size: var(--teks-xs);
  color: var(--warna-teks-lembut);
}
.langkah__titik {
  width: 8px; height: 8px;
  border-radius: var(--radius-penuh);
  background: var(--warna-garis-kuat);
}
.langkah__titik--aktif { background: var(--warna-primer); }
.langkah__titik--selesai { background: var(--warna-sukses); }

/* Halaman publik (industri & verifikasi) tanpa navigasi aplikasi. */
.halaman-publik {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--jarak-4);
}
.kartu-verifikasi {
  text-align: center;
  padding: var(--jarak-8) var(--jarak-4);
  border-radius: var(--radius-4);
  border: 2px solid var(--warna-sukses);
  background: var(--warna-sukses-lembut);
}
.kartu-verifikasi--gagal { border-color: var(--warna-bahaya); background: var(--warna-bahaya-lembut); }
.kartu-verifikasi__lencana { font-size: 44px; line-height: 1; }
.kartu-verifikasi__judul {
  font-size: var(--teks-lg);
  font-weight: var(--tebal-berat);
  letter-spacing: .04em;
  margin-top: var(--jarak-2);
}
.kartu-verifikasi__rincian {
  margin-top: var(--jarak-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--jarak-2) var(--jarak-4);
  text-align: left;
  font-size: var(--teks-sm);
}
.kartu-verifikasi__rincian dt { color: var(--warna-teks-lembut); }
.kartu-verifikasi__rincian dd { font-weight: var(--tebal-sedang); }

/* ============================================================ layar masuk */

/* Ponsel: pita merek di atas, kartu formulir menumpang di tepinya.
   Layar lebar: dua kolom — panel merek setinggi layar dan formulir. */
.masuk {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--warna-latar);
}

.masuk__merek {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--jarak-10) + var(--aman-atas)) var(--jarak-6) var(--jarak-16);
  background: var(--merek-latar);
  color: var(--merek-teks);
  text-align: center;
}
/* Kisi titik halus: tekstur kertas buku saku, bukan sekadar gradien. */
.masuk__merek::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
/* Dua cahaya lembut (emas PGRI dan biru) yang bergeser perlahan. */
.masuk__cahaya {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  pointer-events: none;
  animation: cahaya-geser 14s ease-in-out infinite alternate;
}
.masuk__cahaya--emas { background: var(--emas-500); top: -140px; right: -120px; opacity: .28; }
.masuk__cahaya--biru { background: var(--navy-500); bottom: -180px; left: -140px; animation-delay: -7s; }
@keyframes cahaya-geser {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(30px, 24px, 0) scale(1.12); }
}

.masuk__logo {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--jarak-4);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .35), 0 12px 30px rgba(0, 0, 0, .35);
  animation: logo-masuk 520ms var(--kurva) both;
}
@keyframes logo-masuk { from { transform: scale(.85) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.masuk__nama {
  font-size: var(--teks-2xl);
  font-weight: var(--tebal-berat);
  letter-spacing: -.015em;
  color: #fff;
}
.masuk__sekolah { margin-top: var(--jarak-1); font-size: var(--teks-sm); color: var(--merek-teks-lembut); }
.masuk__garis {
  width: 44px;
  height: 3px;
  margin: var(--jarak-4) auto 0;
  border-radius: var(--radius-penuh);
  background: linear-gradient(90deg, var(--emas-500), var(--emas-200));
}
.masuk__fitur { display: none; }

.masuk__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--jarak-4) calc(var(--jarak-6) + var(--aman-bawah));
}
.masuk__kartu {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-top: calc(var(--jarak-10) * -1);
  padding: var(--jarak-6) var(--jarak-5);
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-4);
  box-shadow: var(--bayang-3);
  display: flex;
  flex-direction: column;
  gap: var(--jarak-5);
  animation: kartu-masuk 420ms 80ms var(--kurva) both;
}
@keyframes kartu-masuk { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.masuk__judul { font-size: var(--teks-xl); font-weight: var(--tebal-berat); letter-spacing: -.01em; }
.masuk__sub { margin-top: var(--jarak-1); font-size: var(--teks-sm); color: var(--warna-teks-lembut); }

.masuk__pemisah {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  color: var(--warna-teks-samar);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-sedang);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.masuk__pemisah::before,
.masuk__pemisah::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--warna-garis);
}

.masuk__kaki {
  width: 100%;
  max-width: 440px;
  margin-top: var(--jarak-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--jarak-1) var(--jarak-3);
  font-size: var(--teks-sm);
  color: var(--warna-teks-lembut);
}

@media (min-width: 900px) {
  .masuk { flex-direction: row; }
  .masuk__merek {
    flex: 1 1 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--jarak-16) clamp(var(--jarak-10), 6vw, 96px);
    text-align: left;
  }
  .masuk__logo { margin: 0 0 var(--jarak-6); width: 88px; height: 88px; }
  .masuk__nama { font-size: 40px; line-height: 1.1; }
  .masuk__sekolah { font-size: var(--teks-lg); }
  .masuk__garis { margin: var(--jarak-6) 0 0; }
  .masuk__fitur {
    display: grid;
    gap: var(--jarak-4);
    margin-top: var(--jarak-8);
    max-width: 420px;
  }
  .masuk__fitur-item { display: flex; gap: var(--jarak-3); align-items: flex-start; }
  .masuk__fitur-ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-2);
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--merek-garis);
    color: var(--emas-400);
  }
  .masuk__fitur-judul { font-weight: var(--tebal-tebal); color: #fff; font-size: var(--teks-md); }
  .masuk__fitur-teks { font-size: var(--teks-sm); color: var(--merek-teks-lembut); }

  .masuk__panel {
    flex: 1 1 48%;
    justify-content: center;
    padding: var(--jarak-10) var(--jarak-8);
  }
  .masuk__kartu { margin-top: 0; padding: var(--jarak-8); }
}

@media (prefers-reduced-motion: reduce) {
  .masuk__cahaya, .masuk__logo, .masuk__kartu { animation: none; }
}

/* ================================================= tablet & desktop ≥768px */

@media (min-width: 768px) {
  .aplikasi {
    display: grid;
    grid-template-columns: var(--lebar-sidebar) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar appbar"
      "sidebar konten";
  }
  /* Belum masuk: tidak ada sidebar, jadi tidak ada kolom kosong selebar sidebar. */
  .aplikasi:has(> .sidebar[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "appbar" "konten";
  }

  .appbar {
    grid-area: appbar;
    padding-left: var(--jarak-6);
    padding-right: var(--jarak-4);
  }
  /* Logo sudah ada di sidebar. */
  .appbar__logo { display: none; }

  .konten {
    grid-area: konten;
    padding: var(--jarak-6) var(--jarak-8) var(--jarak-10);
    max-width: var(--lebar-konten-maks);
    margin-inline: auto;
    /* Item grid punya min-width: auto, yang berarti "jangan menyusut di bawah
       lebar minimum isi". Akibatnya satu tabel lebar cukup untuk mendorong
       kolom melebihi lebar layar, dan seluruh halaman — termasuk appbar —
       ikut bergeser ke samping. */
    min-width: 0;
  }

  /* Bottom navigation digantikan sidebar dengan isi yang sama. */
  .bottomnav { display: none; }

  .sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    padding: var(--jarak-5) var(--jarak-3) var(--jarak-4);
    padding-top: calc(var(--jarak-5) + var(--aman-atas));
    background: var(--merek-latar);
    color: var(--merek-teks);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
  }
  .sidebar[hidden] { display: none; }

  .sidebar__merek {
    display: flex;
    align-items: center;
    gap: var(--jarak-3);
    padding: 0 var(--jarak-2) var(--jarak-5);
    margin-bottom: var(--jarak-2);
    border-bottom: 1px solid var(--merek-garis);
    color: inherit;
  }
  .sidebar__merek:hover { text-decoration: none; }
  .sidebar__logo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .3);
  }
  .sidebar__identitas { display: flex; flex-direction: column; min-width: 0; }
  .sidebar__nama { font-weight: var(--tebal-berat); font-size: var(--teks-md); line-height: 1.2; color: #fff; }
  .sidebar__sekolah { font-size: var(--teks-xs); color: var(--merek-teks-lembut); }

  .sidebar__daftar {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    margin: 0 calc(var(--jarak-1) * -1);
    padding: 0 var(--jarak-1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
  }
  .sidebar__grup {
    padding: var(--jarak-5) var(--jarak-3) var(--jarak-2);
    font-size: 11px;
    font-weight: var(--tebal-tebal);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--merek-teks-lembut);
  }
  .sidebar__grup:first-child { padding-top: var(--jarak-3); }

  .sidebar__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--jarak-3);
    min-height: 40px;
    padding: var(--jarak-2) var(--jarak-3);
    border-radius: var(--radius-2);
    color: var(--merek-teks-lembut);
    font-size: var(--teks-sm);
    font-weight: var(--tebal-sedang);
    transition: background var(--transisi-cepat), color var(--transisi-cepat);
  }
  .sidebar__item:hover { background: var(--merek-sorot); color: var(--merek-teks); text-decoration: none; }
  .sidebar__item[aria-current="page"] {
    background: var(--merek-aktif);
    color: #fff;
    font-weight: var(--tebal-tebal);
  }
  /* Penanda emas di tepi kiri item aktif. */
  .sidebar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--emas-500);
    animation: penanda-muncul 240ms var(--kurva) both;
  }
  @keyframes penanda-muncul { from { transform: scaleY(0); } to { transform: none; } }
  .sidebar__item[aria-current="page"] .sidebar__ikon { color: var(--emas-400); }
  .sidebar__ikon { display: inline-flex; flex: none; }
  .sidebar__ikon .ikon { width: 19px; height: 19px; }
  .sidebar__teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sidebar__pengguna {
    display: flex;
    align-items: center;
    gap: var(--jarak-3);
    margin-top: var(--jarak-3);
    padding: var(--jarak-2) var(--jarak-3);
    border-radius: var(--radius-3);
    background: var(--merek-sorot);
    border: 1px solid var(--merek-garis);
    color: var(--merek-teks);
    transition: background var(--transisi-cepat), border-color var(--transisi-cepat);
  }
  .sidebar__pengguna:hover,
  .sidebar__pengguna[aria-current="page"] {
    text-decoration: none;
    background: rgba(255, 255, 255, .09);
    border-color: rgba(201, 162, 39, .35);
  }
  .sidebar__pengguna .avatar { background: rgba(201, 162, 39, .18); color: var(--emas-200); }
  .sidebar__pengguna-nama { display: block; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: #fff; }
  .sidebar__pengguna-role { display: block; font-size: 11px; color: var(--merek-teks-lembut); }
  .sidebar__pengguna-ikon { color: var(--merek-teks-lembut); display: inline-flex; }

  .sidebar :focus-visible { outline-color: var(--emas-400); }

  .toast-wadah { bottom: var(--jarak-6); left: auto; right: var(--jarak-6); transform: none; }

  .grid-kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .bilah-aksi {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    justify-content: flex-end;
  }
  .bilah-aksi .tombol { flex: 0 0 auto; min-width: 160px; }

  .modal { width: min(640px, 100%); }
}

@media (min-width: 1100px) {
  .grid-kartu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ruang tambahan saat banner jaringan tampil agar app bar tidak tertutup. */
body.ada-banner .appbar { top: 0; }

@media (prefers-reduced-motion: reduce) {
  .konten--masuk > * { animation: none; }
}

/* ================================================================ cetak */

@media print {
  .appbar, .bottomnav, .sidebar, .banner-jaringan, .toast-wadah, .bilah-aksi { display: none !important; }
  .konten { padding: 0; max-width: none; }
  .konten--masuk > * { animation: none; }
  .kartu { box-shadow: none; border-color: #999; break-inside: avoid; }
  body { background: #fff; }
}