/* PR80 — Tema Hoot untuk Supervisi Pengawas (PR83): hijau tua + emas, satu merek dengan aplikasi guru.
   Dimuat setelah style.css & manajemen.css, jadi cukup menimpa token dan beberapa nilai yang ditulis langsung. */
:root{
  --ink:#10231A; --ink-soft:#2F4A3C; --muted:#5B7366;
  --bg:#F3F6F4; --surface:#FFFFFF; --border:#D7E2DB;
  --primary:#0F6B3E; --primary-dark:#0A4F2E; --primary-light:#E6F4EC;
  --accent:#E8A317; --accent-light:#FDF0CC;
  --success:#1F9D63; --success-light:#DCF3E6;
  --danger:#C2410C; --danger-light:#FBE3D6;
}
.sidebar{ background:#0B2E1E; }
.sidebar-brand{ border-bottom-color:rgba(255,255,255,.1); }
.sidebar-brand .dot{ box-shadow:0 0 0 4px rgba(232,163,23,.28); }
.sidebar-brand span,.sidebar-sekolah{ color:#8FB09F; }
.sidebar-sekolah strong{ color:#E6F0EA; }
.sidebar-sekolah,.sidebar-foot{ border-color:rgba(255,255,255,.1); }
.nav{ gap:2px; }
.nav a{ color:#C9DDD2; padding:10px 12px; }
.nav a:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nav a.active{ background:#134A32; color:#fff; border-left-color:#E8A317; font-weight:600; }
.nav a .ik{ flex:0 0 18px; opacity:.9; }
.nav-group-label{ color:#6F9582; }
.nav-grup-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:0; cursor:pointer; font-family:inherit; text-align:left;
  min-height:36px; border-radius:8px;
}
.nav-grup-btn:hover{ color:#C9DDD2; }
.nav-grup-btn .ik{ width:14px; height:14px; transition:transform .2s; }
.nav-grup.terbuka > .nav-grup-btn .ik{ transform:rotate(180deg); }
.nav-grup:not(.terbuka) > .nav-grup-isi{ display:none; }
.sidebar-foot a{ display:inline-flex; align-items:center; gap:8px; }
.auth-wrap{ background:#0B2E1E; }
thead th{ background:#F4F8F5; }
tbody tr:hover{ background:#F6FAF7; }
.link-drive:hover{ background:#D2EBDD; }
.nav-grup-btn:focus-visible,.nav a:focus-visible,.tab-bawah a:focus-visible,.tab-bawah button:focus-visible{ outline:2px solid #E8A317; outline-offset:2px; }
.stat-card .delta.warn{ color:#92400E; }
.menu-toggle{ min-width:44px; min-height:44px; }
.topbar h1{ font-size:19px; }

/* ---------- Tab bawah (HP) ---------- */
.tab-bawah{ display:none; }
@media (max-width:900px){
  body{ padding-bottom:78px; }
  .tab-bawah{
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:35;
    background:#fff; border-top:1px solid var(--border); padding:6px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .tab-bawah a,.tab-bawah button{
    display:flex; flex-direction:column; align-items:center; gap:2px; min-height:48px; padding:4px 0;
    background:none; border:0; font-family:inherit; font-size:11px; color:var(--muted); text-decoration:none; cursor:pointer;
  }
  .tab-bawah .pil{ display:flex; padding:4px 16px; border-radius:99px; }
  .tab-bawah .ik{ width:20px; height:20px; }
  .tab-bawah .active{ color:var(--primary); font-weight:600; }
  .tab-bawah .active .pil{ background:var(--primary-light); }
  .toast{ bottom:90px; right:12px; left:12px; }
  .sidebar{ box-shadow:var(--shadow-lg); }
}

/* ---------- Tabel -> kartu (HP) ---------- */
@media (max-width:640px){
  .content{ padding:16px 14px 40px; }
  .topbar{ padding:10px 14px; }
  .table-wrap:has(table.kartu){ border:0; background:transparent; overflow:visible; }
  table.kartu,table.kartu tbody{ display:block; }
  table.kartu thead{ display:none; }
  table.kartu tbody tr{
    display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:10px 14px; margin-bottom:10px; box-shadow:var(--shadow);
  }
  table.kartu tbody tr:hover{ background:var(--surface); }
  table.kartu tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:7px 0; border:0; text-align:right; min-width:0; word-break:break-word;
  }
  table.kartu tbody td[data-label]::before{
    content:attr(data-label); flex:0 0 auto; max-width:45%; text-align:left;
    font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
  }
  table.kartu tbody td:first-child{ font-weight:600; font-size:15px; text-align:left; justify-content:flex-start; padding-top:2px; }
  table.kartu tbody td:first-child::before{ display:none; }
  table.kartu tbody td + td{ border-top:1px dashed var(--border); }
  table.kartu tbody td:not([data-label]){ justify-content:flex-end; }
  table.kartu tbody td .btn{ min-height:44px; justify-content:center; }
  .btn{ min-height:44px; }
  .btn.sm{ min-height:40px; }
}

@media (max-width:640px){
  .filter-bar .form-group{ flex:1 1 100%; min-width:0; }
  .filter-bar select,.filter-bar input{ width:100%; }
}

/* ---------- Tombol suara (PR81) ---------- */
.sidebar-foot{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.sfx-toggle{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 10px; margin-left:-10px;
  background:none; border:0; border-radius:8px; color:#CBD5E1; font:inherit; font-size:12.5px; cursor:pointer;
}
.sfx-toggle:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sfx-toggle.mati{ color:#7E9A8B; }
.sfx-toggle:focus-visible{ outline:2px solid #E8A317; outline-offset:2px; }

/* ---------- Responsif (PR81) ---------- */
canvas,img,svg{ max-width:100%; }
canvas{ height:auto; }
@media (max-width:640px){
  .topbar-sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; }
  .topbar h1{ font-size:17px; }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card{ padding:14px; }
  .stat-card .label{ font-size:11px; }
  .stat-card .value{ font-size:24px; margin-top:4px; }
  .card{ padding:16px; }
  .card-head{ flex-wrap:wrap; gap:8px; }
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal{ max-width:none; border-radius:18px 18px 0 0; max-height:92vh; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .btn{ justify-content:center; }
}

.sidebar-brand span{ line-height:1.3; }
@media (max-width:640px){ .stepper{ grid-template-columns:repeat(2,minmax(0,1fr)); } .skor-pilih{ grid-template-columns:1fr; } }

/* Grid dengan inline-style mengalahkan aturan responsif -> paksa; anak grid boleh menyusut */
.grid > *{ min-width:0; }
@media (max-width:1100px){ .grid-4,.grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:640px){ .grid-3,.grid-2{ grid-template-columns:minmax(0,1fr) !important; } .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
:where(div,form,p,span):has(> .btn){ flex-wrap:wrap; }
.content code,.content td{ overflow-wrap:anywhere; }