/* =====================================================================
   theme.css — lapisan tema & peningkatan tampilan SIAF
   ---------------------------------------------------------------------
   Dimuat SETELAH main.css dan admin.css, jadi selector dengan spesifisitas
   sama akan menang di sini. Prinsipnya: JANGAN sentuh 100+ view satu per
   satu — cukup timpa token warna/huruf dan naikkan kualitas komponen
   bersama (card, tabel, tombol, stat, sidebar), maka seluruh halaman
   semua peran ikut berubah sekaligus.

   Isi:
     1. Token huruf  (html[data-font], html[data-fontsize])
     2. Token gelap  (html[data-theme="dark"])
     3. Topbar & panel preferensi
     4. Peningkatan komponen bersama
     5. Sidebar
     6. Utilitas dashboard (KPI, sparkline, ring)
   ===================================================================== */

/* ============ 1. HURUF ============ */
:root{
  --font-sans:'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Source Serif 4', Georgia, serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-base:14px;
  --display-tracking:-.01em;
}
/* Modern: satu keluarga huruf untuk semua, judul dirapatkan */
html[data-font="modern"]{ --font-display:'Inter', system-ui, sans-serif; --display-tracking:-.022em }
/* Klasik: judul serif (bawaan) */
html[data-font="klasik"]{ --font-display:'Source Serif 4', Georgia, serif; --display-tracking:-.01em }
/* Jelas: Atkinson Hyperlegible — dirancang untuk keterbacaan & disleksia */
html[data-font="jelas"]{
  --font-sans:'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-display:'Atkinson Hyperlegible', system-ui, sans-serif;
  --display-tracking:0;
}
html[data-fontsize="sm"]{ --font-base:13px }
html[data-fontsize="md"]{ --font-base:14px }
html[data-fontsize="lg"]{ --font-base:15.5px }

body{ font-family:var(--font-sans); font-size:var(--font-base) }
h1,h2,h3,h4,h5,.serif,.card__title,.stat__value{ font-family:var(--font-display); letter-spacing:var(--display-tracking) }
.mono,.tabular{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }

/* ============ 2. TEMA GELAP ============
   Semua token di main.css ditimpa di sini. Karena seluruh komponen sudah
   memakai var(--...), tidak ada satu pun view yang perlu diubah. */
html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0A0D13;
  --surface:#111621;
  --surface-2:#171E2B;
  --ink:#E9EDF4;
  --ink-2:#B3BCCC;
  --muted:#8792A6;
  --border:#212836;
  --border-2:#2C3547;

  --accent:#3FC5D6;
  --accent-2:#7BDCE8;
  --accent-soft:rgba(63,197,214,.13);

  --success:#4ADE80; --success-soft:rgba(74,222,128,.13);
  --warning:#FB923C; --warning-soft:rgba(251,146,60,.13);
  --danger:#F87171;  --danger-soft:rgba(248,113,113,.13);
  --flag:#FBBF24;    --flag-soft:rgba(251,191,36,.13);

  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 20px 48px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.5);
}

/* Tombol utama: di mode gelap accent terlalu terang untuk teks putih,
   jadi gradiennya diturunkan agar rasio kontras tetap aman. */
html[data-theme="dark"] .btn-primary{
  background:linear-gradient(155deg,#1B96A6 0%,#116673 100%);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(17,102,115,.35);
}
html[data-theme="dark"] .btn-primary:hover{ background:linear-gradient(155deg,#22A8BA 0%,#14747F 100%) }
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost{ color:var(--ink-2) }
html[data-theme="dark"] .badge{ border-color:rgba(255,255,255,.06) }
html[data-theme="dark"] .toast{ background:#1B2231; border:1px solid var(--border-2) }
html[data-theme="dark"] img.invert-on-dark{ filter:invert(1) hue-rotate(180deg) }

/* Elemen yang di beberapa view di-hardcode putih lewat inline style tidak
   bisa dijangkau CSS — untuk itu tabel & kartu cetak dikunci tetap terang. */
html[data-theme="dark"] .print-only,
html[data-theme="dark"] .paper{ background:#fff; color:#111 }

/* ============ 3. TOPBAR & PANEL PREFERENSI ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:12px clamp(18px,3vw,32px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar__title{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:var(--display-tracking) }
.topbar__crumb{ font-size:11.5px; color:var(--muted); letter-spacing:.03em }
.topbar__spacer{ flex:1 }
.topbar__actions{ display:flex; align-items:center; gap:8px }

.icon-btn{
  width:36px; height:36px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); cursor:pointer; font-size:14px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px) }
.icon-btn.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent) }

/* Ikon matahari/bulan bertukar mengikuti tema */
.icon-btn .ico-sun{ display:none }
.icon-btn .ico-moon{ display:inline }
html[data-theme="dark"] .icon-btn .ico-sun{ display:inline }
html[data-theme="dark"] .icon-btn .ico-moon{ display:none }

/* Varian di dalam navbar gelap (layout peserta & ortu) */
.icon-btn--onnav{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13); color:rgba(255,255,255,.8);
}
.icon-btn--onnav:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff }

.prefs{ position:relative }
.prefs__panel{
  position:absolute; right:0; top:calc(100% + 10px); width:270px; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:16px; display:none;
}
.prefs__panel.is-open{ display:block }
.prefs__group + .prefs__group{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }
.prefs__label{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px }
.prefs__row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px }
.prefs__opt{
  padding:9px 6px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:500;
  cursor:pointer; text-align:center; line-height:1.25;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.prefs__opt:hover{ border-color:var(--border-2); color:var(--ink) }
.prefs__opt.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600 }
.prefs__opt small{ display:block; font-size:10px; opacity:.7; font-weight:400; margin-top:1px }

/* ============ 4. KOMPONEN BERSAMA ============ */

/* Kartu: bayangan berlapis (ambient + kontak) memberi kesan material,
   bukan kotak datar bergaris. */
.card{
  border-radius:16px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
             0 10px 24px -16px color-mix(in srgb, var(--ink) 26%, transparent);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.card:hover{
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
             0 18px 40px -20px color-mix(in srgb, var(--ink) 32%, transparent);
}
html[data-theme="dark"] .card{ box-shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 32px -20px rgba(0,0,0,.85) }
html[data-theme="dark"] .card:hover{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -24px rgba(0,0,0,.95) }
.card__header{ padding:17px 22px }
.card__title{ font-size:16px; font-weight:600 }

/* Stat/KPI: angka jadi pahlawan, garis aksen tipis di bibir atas kartu */
.stat{
  position:relative; border-radius:14px; padding:18px 20px; overflow:hidden;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
             0 8px 20px -16px color-mix(in srgb, var(--ink) 24%, transparent);
}
.stat::before{
  content:''; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.stat:hover::before{ opacity:.85 }
.stat:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)) }
.stat__label{ font-size:11.5px; letter-spacing:.01em }
.stat__value{ font-size:30px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat__icon{ width:34px; height:34px; border-radius:10px; font-size:13px }
.stat__delta{ font-size:11.5px; display:flex; align-items:center; gap:5px }

/* Chip tren naik/turun */
.trend{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px }
.trend--up{ color:var(--success); background:var(--success-soft) }
.trend--down{ color:var(--danger); background:var(--danger-soft) }
.trend--flat{ color:var(--muted); background:var(--surface-2) }

/* Tabel: kepala menempel saat scroll, baris lebih lega, hover halus */
.table th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-2); font-size:10.5px; letter-spacing:.07em;
  border-bottom:1px solid var(--border);
}
.table td{ padding:13px 18px }
.table tbody tr:hover{ background:color-mix(in srgb, var(--accent) 5%, var(--surface)) }
.table tbody tr:last-child td{ border-bottom:none }

/* Tombol */
.btn{ border-radius:10px; letter-spacing:.005em }
.btn-primary{ box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--accent) 42%, transparent) }
.btn-primary:hover{ box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 26%, transparent), 0 10px 26px -8px color-mix(in srgb, var(--accent) 52%, transparent) }

/* Kolom input */
.form-control,.form-input,.form-select,.form-textarea{ border-radius:10px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease) }
.form-control:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{ box-shadow:0 0 0 3.5px var(--accent-soft) }

/* Judul halaman */
.page-header h1{ font-size:27px; letter-spacing:calc(var(--display-tracking) - .008em) }
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:.11em; color:var(--accent) }

.empty-state{ color:var(--muted) }

/* ============ 5. SIDEBAR (struktur menu TIDAK diubah, hanya tampilan) ============ */
/* main.css memaksa .app-shell jadi flex — sisa dari pola layout lama.
   Sidebar sekarang position:fixed (di luar alur flex), jadi .app-main
   yang tersisa sendirian sebagai flex child menyusut ke lebar kontennya
   sendiri, bukan mengisi sisa ruang — itu sebabnya sisi kanan dashboard
   kosong. Balikkan ke block supaya .app-main mengisi penuh via margin-left. */
.app-shell{ display:block }
.sidebar-admin{
  width:252px; padding:16px 12px;
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--sidebar-bg,#0F1729) 92%, white) 0%,
      var(--sidebar-bg,#0F1729) 42%);
  border-right:1px solid rgba(255,255,255,.06);
}
.app-main{ margin-left:252px; transition:margin-left .25s var(--ease) }

.sidebar-admin__brand{ padding:6px 8px 15px; border-bottom:1px solid rgba(255,255,255,.07) }
.sidebar-admin__logo{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
  box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
.sidebar-admin__role{ color:rgba(255,255,255,.42); font-weight:600 }
.sidebar-admin__section{ color:rgba(255,255,255,.34); font-size:10px; letter-spacing:.13em; padding:16px 12px 6px }

/* State aktif: batang aksen di tepi kiri + latar lembut.
   Jauh lebih terbaca daripada sekadar blok warna penuh. */
.sidebar-admin__link{ position:relative; padding:9px 12px; border-radius:9px; transition:background-color .2s var(--ease), color .2s var(--ease) }
.sidebar-admin__link::before{
  content:''; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:0 3px 3px 0;
  background:var(--accent); transform:translateY(-50%);
  transition:height .25s var(--ease);
}
.sidebar-admin__link.is-active::before{ height:60% }
.sidebar-admin__link.is-active{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 82%);
  color:#fff; font-weight:600;
}
.sidebar-admin__link:hover{ background:rgba(255,255,255,.055) }
.sidebar-admin__link i{ font-size:13px; opacity:.9 }
.sidebar-admin__link.is-active i{ opacity:1 }

/* Sebelumnya submenu tidak punya warna sendiri, jadi ikut warna default
   link global (var(--accent), teal) — kontras jelek & tidak nyambung di
   atas latar sidebar gelap. Disamakan dengan warna teks menu utama. */
/* Sebelumnya sublink cuma punya border-radius+color, tanpa display:flex/
   padding/gap/margin-bottom — beda jauh dari .sidebar-admin__link induknya.
   Akibatnya ikon+label jadi satu baris teks liar (rapat tak beraturan,
   ikon tak sejajar) di semua submenu (Guru, Siswa, Lembaga, Pengaturan
   Kurikulum, dst — dipakai bareng admin/ortu/peserta). Disamakan iramanya
   dengan .sidebar-admin__link supaya jarak antar-item seragam. */
.sidebar-admin__sublink{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; margin-bottom:2px;
  border-radius:7px; font-size:12.5px; line-height:1.3;
  color:rgba(255,255,255,.68); text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.sidebar-admin__sublink:last-child{ margin-bottom:0 }
.sidebar-admin__sublink i{ width:16px; text-align:center; font-size:12px; opacity:.85; flex-shrink:0 }
.sidebar-admin__sublink:hover{ color:#fff; background:rgba(255,255,255,.055) }
.sidebar-admin__sublink.is-active{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:#fff; font-weight:500 }
.sidebar-admin__sublink.is-active i{ opacity:1 }

/* Grup menu bisa dilipat (dipakai sidebar admin, peserta, & ortu — pindah
   ke sini dari admin.blade.php supaya ketiga layout otomatis konsisten,
   tidak perlu disalin manual ke tiap layout satu-satu). */
.sidebar-admin__group{ display:flex; flex-direction:column }
.sidebar-admin__group-toggle{ display:flex; align-items:center; gap:10px; background:none; border:none; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit }
.sidebar-admin__group-toggle .sidebar-admin__chev{ margin-left:auto; font-size:10px; transition:transform .2s }
.sidebar-admin__group.is-open .sidebar-admin__chev{ transform:rotate(180deg) }
.sidebar-admin__submenu{ display:none; flex-direction:column; padding-left:18px; margin-top:2px; margin-left:18px; border-left:1px solid rgba(255,255,255,.08) }
.sidebar-admin__group.is-open .sidebar-admin__submenu{ display:flex }

.sidebar-admin__footer{
  margin-top:22px; border-radius:11px; padding:13px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06);
}

/* ============ 5b. SIDEBAR: ciutkan ke rail ikon (desktop) ============
   Beda dari drawer mobile (.sidebar-admin.is-open) — ini mode terpisah
   utk layar lebar, murni menyembunyikan teks & menyempitkan lebar.
   Dipicu lewat atribut [data-sidebar-collapsed] di <html> (bukan class di
   .sidebar-admin) supaya skrip pre-paint di app_head.blade.php bisa
   menerapkannya SEBELUM <body> dirender — menghindari kedipan sidebar
   lebar-lalu-menyempit tiap reload, sama seperti pola data-theme/data-font
   yang sudah ada. Disimpan ke localStorage & tombolnya di ui-prefs.js. */
html[data-sidebar-collapsed="1"] .sidebar-admin{ width:72px }
html[data-sidebar-collapsed="1"] .app-main{ margin-left:72px }
html[data-sidebar-collapsed="1"] .sidebar-admin__brand{ justify-content:center; padding-left:0; padding-right:0 }
html[data-sidebar-collapsed="1"] .sidebar-admin__brand-text,
html[data-sidebar-collapsed="1"] .sidebar-admin__section,
html[data-sidebar-collapsed="1"] .sidebar-admin__label,
html[data-sidebar-collapsed="1"] .sidebar-admin__label-inline,
html[data-sidebar-collapsed="1"] .sidebar-admin__chev,
html[data-sidebar-collapsed="1"] .sidebar-admin__submenu{ display:none }
html[data-sidebar-collapsed="1"] .sidebar-admin__link,
html[data-sidebar-collapsed="1"] .sidebar-admin__group-toggle{ justify-content:center; padding-left:0; padding-right:0; gap:0 }
html[data-sidebar-collapsed="1"] .sidebar-admin__footer{ padding:10px 4px; text-align:center }
html[data-sidebar-collapsed="1"] .sidebar-collapse-btn{ left:72px }
html[data-sidebar-collapsed="1"] .sidebar-collapse-btn i{ transform:rotate(180deg) }

/* Tombol bundar yang "menunggangi" tepi sidebar — pola premium ala
   Notion/Linear. Elemen SIBLING (bukan anak sidebar), sebab sidebar
   overflow-y:auto membuat overflow-x ikut clip (aturan CSS overflow-
   computed-value) — kalau jadi anak, tombol yg nongol di luar tepi kanan
   akan terpotong. */
.sidebar-collapse-btn{
  position:fixed; top:66px; left:252px; z-index:55;
  width:26px; height:26px; border-radius:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2);
  font-size:11px; cursor:pointer; padding:0;
  box-shadow:0 2px 10px -3px color-mix(in srgb, var(--ink) 30%, transparent);
  transition:left .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sidebar-collapse-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }
.sidebar-collapse-btn i{ transition:transform .25s var(--ease) }
@media (max-width:900px){ .sidebar-collapse-btn{ display:none } }

/* ============ 6. UTILITAS DASHBOARD ============ */
/* Panel sambutan di puncak dashboard */
.hero-panel{
  position:relative; overflow:hidden; border-radius:18px; padding:26px 28px;
  background:linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%,
      var(--surface) 58%);
  border:1px solid var(--border);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
             0 14px 34px -22px color-mix(in srgb, var(--ink) 30%, transparent);
}
.hero-panel::after{
  content:''; position:absolute; right:-70px; top:-90px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%);
  pointer-events:none;
}
.hero-panel__title{ font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:var(--display-tracking); color:var(--ink); margin:0 }
.hero-panel__sub{ color:var(--ink-2); font-size:13.5px; margin-top:5px }

/* Baris meta ringkas (dipakai di header dashboard tiap peran) */
.meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.meta-pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500;
  padding:6px 12px; border-radius:99px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--border);
}
.meta-pill i{ color:var(--accent); font-size:11px }

/* Grid KPI responsif — menggantikan grid-template-columns kaku di view */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-bottom:20px }

/* Ring progres kecil */
.ring{ position:relative; width:78px; height:78px; flex-shrink:0 }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.ring__track{ fill:none; stroke:var(--surface-2); stroke-width:9 }
.ring__bar{ fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease) }
.ring__val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink) }

/* Daftar ringkas di dalam kartu (agenda, jadwal, dsb) */
.list-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 22px; border-bottom:1px solid var(--border); transition:background-color .2s var(--ease) }
.list-row:last-child{ border-bottom:none }
.list-row:hover{ background:var(--surface-2) }
.list-row__title{ font-weight:500; font-size:13px; color:var(--ink) }
.list-row__sub{ font-size:11.5px; color:var(--muted); margin-top:2px }

@media (max-width:900px){
  .app-main{ margin-left:0 }
  .topbar{ padding:10px 16px }
  .prefs__panel{ width:min(270px, calc(100vw - 32px)) }
  .kpi-grid{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)) }

  /* Banyak halaman menyusun kartu 2 kolom lewat inline style="display:grid;
     grid-template-columns:...". CSS eksternal tidak bisa menang lawan style
     inline kecuali lewat !important — jadi dipaksa 1 kolom di layar sempit
     lewat selector atribut ini, tanpa perlu menyunting tiap view satu-satu. */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important }
}

/* ============ 7. SIDEBAR RESPONSIF: drawer + tombol mengambang ============
   Di layar sempit sidebar default TERTUTUP (digeser keluar viewport lewat
   transform, bukan display:none, supaya animasinya mulus). Tombol bundar
   mengambang di kiri-bawah membukanya; latar gelap semi-transparan +
   klik-di-luar atau menekan sebuah link menutupnya lagi. Berlaku sama untuk
   ketiga layout (admin/peserta/ortu) karena semuanya memakai class yang
   sama — lihat partials/sidebar_toggle.blade.php untuk markupnya. */
@media (max-width:900px){
  .sidebar-admin{
    transform:translateX(-100%); z-index:220;
    transition:transform .3s var(--ease-out-soft, cubic-bezier(.22,1,.36,1));
  }
  .sidebar-admin.is-open{
    transform:translateX(0);
    box-shadow:24px 0 60px -16px rgba(0,0,0,.5);
  }
  .sidebar-backdrop{
    position:fixed; inset:0; z-index:210;
    background:rgba(4,6,10,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .sidebar-backdrop.is-open{ opacity:1; pointer-events:auto }

  .sidebar-fab{
    position:fixed; left:18px; bottom:18px; z-index:200;
    width:52px; height:52px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center;
    background:var(--sidebar-bg,#0F1729); color:#fff; font-size:18px; cursor:pointer;
    box-shadow:0 12px 30px -8px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
    transition:transform .25s var(--ease-out-soft, cubic-bezier(.22,1,.36,1)), opacity .2s ease;
  }
  .sidebar-fab:active{ transform:scale(.92) }
  .sidebar-fab.is-hidden{ opacity:0; pointer-events:none; transform:scale(.7) }
}
@media (min-width:901px){
  .sidebar-fab, .sidebar-backdrop{ display:none !important }
}