/* =====================================================================
   CBT MA Mathla'ul Anwar Kedondong - Tema Hijau / Putih / Biru
   ===================================================================== */
:root{
  --hijau:#198754;
  --hijau-tua:#146c43;
  --biru:#0d6efd;
  --biru-tua:#0a58ca;
  --abu:#f4f7f6;
  --teks:#1f2d3d;
  --radius:14px;
  --shadow:0 2px 14px rgba(25,135,84,.08);
  --sidebar-w:248px;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--abu);
  color:var(--teks);
  margin:0;
}

/* ---------- Navbar ---------- */
.app-navbar{
  background:linear-gradient(90deg,var(--hijau),var(--biru));
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.avatar-circle{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.25);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;
}

/* ---------- Layout ---------- */
.app-wrapper{display:flex;min-height:calc(100vh - 56px)}
.app-sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:#fff;border-right:1px solid #e6ece9;
  box-shadow:var(--shadow);transition:transform .25s ease;
}
.app-main{flex:1;min-width:0}
.sidebar-school{background:linear-gradient(135deg,var(--hijau),var(--hijau-tua))}

.app-sidebar .nav-link{
  display:flex;align-items:center;gap:.7rem;
  color:#42514c;border-radius:10px;margin:.15rem 0;padding:.62rem .9rem;font-weight:500;
}
.app-sidebar .nav-link i{font-size:1.15rem;width:22px;text-align:center}
.app-sidebar .nav-link:hover{background:#eef6f1;color:var(--hijau-tua)}
.app-sidebar .nav-link.active{
  background:linear-gradient(90deg,var(--hijau),var(--biru));color:#fff;
  box-shadow:0 4px 10px rgba(25,135,84,.25);
}

/* ---------- Card & komponen ---------- */
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{background:#fff;border-bottom:1px solid #eef2f0;font-weight:600;border-radius:var(--radius) var(--radius) 0 0!important}
.stat-card{border-radius:var(--radius);color:#fff;overflow:hidden;position:relative}
.stat-card .stat-icon{position:absolute;right:-6px;bottom:-10px;font-size:4.6rem;opacity:.18}
.stat-card .stat-value{font-size:2rem;font-weight:700;line-height:1}
.bg-grad-green{background:linear-gradient(135deg,#198754,#20c997)}
.bg-grad-blue{background:linear-gradient(135deg,#0d6efd,#3d8bfd)}
.bg-grad-teal{background:linear-gradient(135deg,#0dcaf0,#0d6efd)}
.bg-grad-amber{background:linear-gradient(135deg,#fd7e14,#ffc107)}

.btn-primary{background:var(--hijau);border-color:var(--hijau)}
.btn-primary:hover{background:var(--hijau-tua);border-color:var(--hijau-tua)}
.btn-info{background:var(--biru);border-color:var(--biru);color:#fff}
.text-hijau{color:var(--hijau)!important}
.page-title{font-weight:700;color:var(--hijau-tua)}

/* ---------- Auth ---------- */
.auth-bg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--hijau) 0%,var(--biru) 100%);padding:1rem;
}
.auth-card{max-width:410px;width:100%;border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.25)}

/* ---------- Footer ---------- */
.app-footer{background:#fff;border-top:1px solid #e6ece9}

/* ---------- Sidebar mobile ---------- */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1039}
@media(max-width:991.98px){
  .app-sidebar{position:fixed;top:56px;bottom:0;left:0;z-index:1040;transform:translateX(-100%)}
  .app-sidebar.show{transform:translateX(0)}
  .sidebar-backdrop.show{display:block}
}

/* ---------- Halaman ujian ---------- */
.exam-topbar{background:#fff;border-bottom:2px solid var(--hijau);position:sticky;top:0;z-index:100}
.exam-timer{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.exam-timer.danger{color:#dc3545;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.q-nav-btn{
  width:42px;height:42px;border-radius:9px;border:1.5px solid #ced4da;background:#fff;
  font-weight:600;margin:3px;transition:.15s;
}
.q-nav-btn.answered{background:var(--hijau);color:#fff;border-color:var(--hijau)}
.q-nav-btn.ragu{background:var(--biru);color:#fff;border-color:var(--biru)}
.q-nav-btn.current{outline:3px solid #ffc107;outline-offset:1px}
.option-item{cursor:pointer;border:1.5px solid #e0e6e3;border-radius:10px;padding:.8rem 1rem;margin-bottom:.6rem;transition:.15s}
.option-item:hover{border-color:var(--hijau);background:#f3faf6}
.option-item.selected{border-color:var(--hijau);background:#e8f6ee}
.violation-badge{position:fixed;bottom:16px;left:16px;z-index:1050}

/* anti-select saat ujian */
.no-select{user-select:none;-webkit-user-select:none}

/* =====================================================================
   Sentuhan "aplikasi Android" — umpan balik ketuk, safe-area, dst.
   ===================================================================== */
.btn,.card,.bottom-nav-item,.more-sheet-item,.q-nav-btn,.option-item{-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.stat-card:active,.option-item:active{transform:scale(.985)}

/* ---------- Bottom Navigation (guru & siswa, mobile) ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  display:flex;background:#fff;border-top:1px solid #e6ece9;
  box-shadow:0 -3px 16px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:.5rem 0 .4rem;color:#7c8b85;text-decoration:none;
  font-size:.68rem;font-weight:600;border:none;background:none;
}
.bn-icon-wrap{display:flex;align-items:center;justify-content:center;width:54px;height:26px;border-radius:16px;transition:background-color .2s,color .2s}
.bn-icon-wrap i{font-size:1.22rem;color:#7c8b85;transition:color .2s}
.bottom-nav-item.active .bn-icon-wrap{background:linear-gradient(135deg,var(--hijau),var(--biru))}
.bottom-nav-item.active .bn-icon-wrap i{color:#fff}
.bottom-nav-item.active .bn-label{color:var(--hijau-tua);font-weight:700}
.bottom-nav-item:active{opacity:.7}

@media(max-width:991.98px){
  body.has-bottom-nav .app-main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-bottom-nav .app-footer{display:none} /* footer tidak perlu, bottom-nav sudah jadi penutup layar */
}

/* ---------- Sheet "Lainnya" (offcanvas bawah) ---------- */
.more-sheet{border-radius:20px 20px 0 0}
.more-sheet .offcanvas-body{padding:.5rem 1rem 1.25rem}
.more-sheet-item{
  display:flex;align-items:center;gap:.9rem;padding:.85rem .6rem;border-radius:12px;
  color:#33413c;text-decoration:none;font-weight:500;
}
.more-sheet-item i{font-size:1.3rem;width:26px;text-align:center;color:var(--hijau)}
.more-sheet-item.active{background:#eef6f1;color:var(--hijau-tua);font-weight:700}
.more-sheet-item:active{background:#f2f5f4}

/* ---------- Halaman ujian: gerbang mulai (fullscreen) ---------- */
.start-gate{
  position:fixed;inset:0;z-index:4000;color:#fff;text-align:center;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,var(--hijau) 0%,var(--biru) 100%);
}
.start-gate.hide{display:none}
.start-gate-card{max-width:420px}
.start-gate .btn-start{border-radius:14px;padding:.9rem 2.2rem;font-size:1.05rem}

/* ---------- Halaman ujian: bar aksi bawah (mobile) ---------- */
.exam-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:stretch;
  background:#fff;border-top:1px solid #e6ece9;box-shadow:0 -3px 16px rgba(0,0,0,.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.exam-bottombar .ebtn{
  flex:0 0 78px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;border:none;background:none;color:#42514c;font-size:.68rem;font-weight:600;padding:.5rem 0;
}
.exam-bottombar .ebtn i{font-size:1.15rem}
.exam-bottombar .ebtn:disabled{opacity:.32}
.exam-bottombar .ebtn-mid{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
  border:none;border-left:1px solid #eef2f0;border-right:1px solid #eef2f0;background:#fafcfb;
  font-weight:700;color:var(--hijau-tua);font-size:.82rem;
}
.exam-bottombar .ebtn-next.finish-mode{color:#fff;background:var(--hijau)}
.exam-bottombar .ebtn:active,.exam-bottombar .ebtn-mid:active{background:#eef6f1}

@media(max-width:991.98px){
  body.exam-mode .app-main{padding-bottom:70px}
  body.exam-mode .app-footer{display:none}
}
@media(max-width:575.98px){
  .exam-topbar{flex-wrap:wrap;row-gap:.4rem}
  .exam-topbar .gap-3{gap:.5rem!important;flex-wrap:wrap}
  .exam-timer{font-size:1.05rem}
}

/* ---------- Toast peringatan tombol Back (gaya notifikasi Android) ---------- */
.back-warn-toast{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);
  z-index:5000;background:#1f2d27;color:#fff;padding:.7rem 1.1rem;border-radius:30px;
  font-size:.85rem;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:flex;align-items:center;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.back-warn-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:991.98px){ .back-warn-toast{bottom:78px} }