/* =====================================================================
   sidebar.css — PERBAIKAN (Okt 2026): salinan sidebar Supervisi sekolah untuk Supervisi Pengawas — interaktif & responsif,
   mengikuti rasa aplikasi guru (bebasmendalam.com):
   - posisi gulir menu dipertahankan antar halaman (lihat app.js & header.php)
   - pencarian menu, animasi grup, sorotan aktif instan, bilah progres
   - transisi halaman halus (View Transitions lintas dokumen; sidebar tetap di tempat)
   - laci HP: latar gelap, Esc/geser untuk menutup, kunci gulir halaman
   ===================================================================== */

/* Transisi antar halaman (Chrome/Edge 126+; browser lain mengabaikan dengan aman) */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sv-sidebar; }
.tab-bawah { view-transition-name: sv-tabbawah; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
::view-transition-group(sv-sidebar), ::view-transition-group(sv-tabbawah) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Area menu: gulir halus, scrollbar tipis, tidak "memantul" ke halaman */
.nav { scroll-behavior: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding-top: 8px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* Item menu: umpan balik hover/tekan yang terasa */
.nav a { position: relative; transition: background .15s, color .15s, transform .15s, padding-left .15s; }
.nav a:hover { transform: translateX(2px); }
.nav a:active { transform: scale(.98); }
.nav a.active { box-shadow: inset 0 0 0 1px rgba(232,163,23,.18); }
.nav a .ik { transition: transform .2s; }
.nav a:hover .ik { transform: scale(1.08); }
.nav a.sv-menuju { background: rgba(255,255,255,.1); color: #fff; }
.nav a.sv-menuju::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #E8A317; border-radius: 50%; animation: sv-putar .7s linear infinite; }
@keyframes sv-putar { to { transform: rotate(360deg); } }

/* Grup lipat dengan animasi tinggi (menggantikan display:none) */
.nav-grup:not(.terbuka) > .nav-grup-isi { display: grid; }
.nav-grup > .nav-grup-isi { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease, opacity .2s; }
.nav-grup > .nav-grup-isi > * { min-height: 0; }
.nav-grup-isi { overflow: hidden; }
.nav-grup:not(.terbuka) > .nav-grup-isi { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.nav-grup-isi-dalam { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.nav-grup-btn { border-radius: 8px; transition: background .15s, color .15s; }
.nav-grup-btn:hover { background: rgba(255,255,255,.05); }
.nav-grup-btn .nav-jml { margin-left: auto; margin-right: 6px; font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.1); color: #C9DDD2; border-radius: 99px; padding: 1px 7px; letter-spacing: 0; }

/* Pencarian menu (seperti aplikasi guru) */
.sv-cari-menu { padding: 10px 12px 4px; position: relative; }
.sv-cari-menu input { width: 100%; min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #E6F0EA; padding: 8px 34px 8px 34px; font: inherit; font-size: 13.5px; outline: none;
  transition: border-color .15s, background .15s; }
.sv-cari-menu input::placeholder { color: #8FB09F; }
.sv-cari-menu input:focus { border-color: #E8A317; background: rgba(255,255,255,.1); }
.sv-cari-menu .ik-cari { position: absolute; left: 23px; top: 50%; margin-top: 3px; transform: translateY(-50%); color: #8FB09F; pointer-events: none; }
.sv-cari-menu kbd { position: absolute; right: 21px; top: 50%; margin-top: 3px; transform: translateY(-50%); font: 600 11px/1 var(--font-mono, monospace);
  color: #8FB09F; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 3px 6px; }
.sv-cari-menu input:focus ~ kbd, .sv-cari-menu input:not(:placeholder-shown) ~ kbd { display: none; }
.sv-cari-kosong { display: none; padding: 14px 12px; font-size: 13px; color: #8FB09F; }
.nav.sv-mencari .nav-grup-isi { grid-template-rows: 1fr !important; opacity: 1 !important; pointer-events: auto !important; }
.nav.sv-mencari .nav-grup-btn .ik { transform: rotate(180deg); }
.nav a.sv-sembunyi, .nav-grup.sv-sembunyi { display: none !important; }
.nav a mark { background: rgba(232,163,23,.35); color: #fff; border-radius: 3px; padding: 0 1px; }

/* Bilah progres saat berpindah halaman */
.sv-progres { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, #E8A317, #34D399);
  box-shadow: 0 0 8px rgba(232,163,23,.6); transition: width .25s ease, opacity .3s; pointer-events: none; }
.sv-progres.jalan { width: 72%; transition: width 6s cubic-bezier(.1,.7,.2,1); }

/* Laci HP */
.sv-latar { position: fixed; inset: 0; background: rgba(6,24,16,.5); backdrop-filter: blur(2px); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (max-width: 900px) {
  .sidebar { width: min(300px, 86vw); transition: transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .sidebar.open ~ .sv-latar, body.sv-laci-buka .sv-latar { opacity: 1; pointer-events: auto; }
  body.sv-laci-buka { overflow: hidden; }
  .sv-cari-menu kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a, .nav-grup > .nav-grup-isi, .sidebar, .sv-latar, .sv-progres { transition: none !important; }
  .nav a:hover { transform: none; }
}