/* ============================================================
   SMA Al-Qona'ah Baleendah — CBT Theme (mobile-first)
   Presentation only. No functional changes.
   Revert: remove the 2 injected lines from views/template/*.php
   ============================================================ */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}

:root{
  --g:#1f8a4c; --g-light:#4cb863; --g-dark:#15653a; --g-soft:#eaf6ee;
  --ink:#16202a; --muted:#5d6b7a; --line:#e3e9ee; --page:#f4f7f8;
  --amber:#f5a623; --amber-soft:#fef6e7; --red:#e5484d;
  --r:14px; --r-sm:11px; --r-lg:18px;
  --sh:0 1px 2px rgba(16,32,24,.05),0 8px 24px rgba(16,32,24,.07);
}

/* ---------- base ---------- */
body,.wrapper,.content-wrapper,.login-page,.hold-transition{
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif !important;
  background:var(--page) !important; color:var(--ink);
  -webkit-text-size-adjust:100%;
}
body{line-height:1.6}
*{-webkit-tap-highlight-color:rgba(31,138,76,.12)}
a{color:var(--g)}
a:hover,a:focus{color:var(--g-dark)}

/* ---------- page header ---------- */
.content-header{padding:16px 15px 6px !important}
.content-header>h1{
  font-size:19px !important;font-weight:700 !important;color:var(--ink);
  margin:0 0 4px !important;line-height:1.35;
}
.content-header>h1>small{display:block;font-size:13px;color:var(--muted);margin:4px 0 0}
.content-header>.breadcrumb{
  position:static !important;float:none !important;display:flex;align-items:center;gap:6px;
  background:transparent !important;padding:4px 0 !important;margin:0 !important;font-size:12.5px;
}

/* ---------- cards (AdminLTE boxes) ---------- */
.box{
  background:#fff;border:1px solid var(--line) !important;border-top:1px solid var(--line) !important;
  border-radius:var(--r) !important;box-shadow:var(--sh) !important;
  margin-bottom:16px;overflow:hidden;
}
.box-header{padding:14px 16px !important;border-bottom:1px solid var(--line)}
.box-header.with-border{border-bottom:1px solid var(--line) !important}
.box-title{font-size:15.5px !important;font-weight:700 !important;line-height:1.4}
.box-body{padding:16px !important}
.box-footer{padding:14px 16px !important;background:#fbfcfd !important;border-top:1px solid var(--line) !important}

/* solid green header → clean tinted header */
.box.box-solid.box-success,.box.box-success{border-color:var(--line) !important}
.box.box-solid.box-success>.box-header,.box.box-success>.box-header{
  background:var(--g-soft) !important;color:var(--g-dark) !important;
}
.box.box-solid.box-success>.box-header .box-title{color:var(--g-dark) !important}
.box.box-solid.box-primary>.box-header,.box.box-primary>.box-header{background:var(--g-soft) !important;color:var(--g-dark) !important}
.box.box-solid>.box-header .btn,.box.box-solid>.box-header a{color:var(--g-dark) !important}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit !important;font-weight:600 !important;font-size:14.5px !important;
  border-radius:var(--r-sm) !important;border:1.5px solid transparent !important;
  padding:11px 18px !important;transition:.15s ease;min-height:44px;
}
.btn-lg{font-size:16px !important;padding:14px 22px !important}
.btn-sm{font-size:13px !important;padding:7px 12px !important;min-height:36px}
.btn-xs{font-size:12px !important;padding:5px 9px !important;min-height:30px}

.btn-primary,.btn-success{
  background:var(--g) !important;border-color:var(--g) !important;color:#fff !important;
  box-shadow:0 4px 12px rgba(31,138,76,.24);
}
.btn-primary:hover,.btn-success:hover,.btn-primary:focus,.btn-success:focus{
  background:var(--g-dark) !important;border-color:var(--g-dark) !important;color:#fff !important;
}
.btn-default{
  background:#fff !important;border-color:var(--line) !important;color:var(--ink) !important;box-shadow:none;
}
.btn-default:hover,.btn-default:focus{background:#f2f6f4 !important;border-color:var(--g-light) !important;color:var(--g-dark) !important}
.btn-warning{background:var(--amber) !important;border-color:var(--amber) !important;color:#fff !important}
.btn-danger{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important}
.btn-info{background:var(--g-light) !important;border-color:var(--g-light) !important;color:#fff !important}

/* ---------- forms ---------- */
.form-control,select.form-control,textarea.form-control{
  font-family:inherit !important;font-size:16px !important;   /* 16px stops iOS zoom-on-focus */
  border:1.5px solid var(--line) !important;border-radius:var(--r-sm) !important;
  background:#fbfcfd !important;color:var(--ink);
  padding:11px 14px !important;height:auto !important;box-shadow:none !important;
}
.form-control:focus{border-color:var(--g-light) !important;background:#fff !important;box-shadow:0 0 0 3px rgba(76,184,99,.16) !important}
label{font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.help-block{color:var(--muted);font-size:12.5px}
.input-group-addon{border:1.5px solid var(--line) !important;background:#f2f6f4 !important;border-radius:var(--r-sm) !important;color:var(--muted)}
.has-error .form-control{border-color:var(--red) !important}

/* ---------- login ---------- */
.login-page,.register-page{background:var(--page) !important;padding-top:6vh}
.login-box,.register-box{width:100%;max-width:380px;margin:0 auto;padding:0 16px}
.login-logo,.register-logo{margin-bottom:18px}
.login-logo a,.register-logo a{font-family:inherit !important;font-weight:700 !important;font-size:24px !important;color:var(--g-dark) !important}
.login-box-body,.register-box-body{
  background:#fff !important;border:1px solid var(--line);border-radius:var(--r-lg) !important;
  box-shadow:var(--sh) !important;padding:26px 22px !important;
}
.login-box-msg,.register-box-msg{color:var(--muted);font-size:14px;padding:0 0 18px !important}

/* ---------- exam: question body ---------- */
#isi-tes-soal{color:var(--ink);line-height:1.75;word-wrap:break-word}
/* 60% of questions are images — never let them overflow a phone screen */
#isi-tes-soal img,.box-body img,#isi-tes-soal video{
  max-width:100% !important;height:auto !important;
  border-radius:10px;display:block;margin:12px auto;
}
#isi-tes-soal table{max-width:100% !important;width:auto !important}
#isi-tes-soal p{margin-bottom:12px}

/* answer options → large tappable cards */
#isi-tes-soal .radio,.radio{margin:0 0 10px !important;padding:0 !important}
#isi-tes-soal .radio label,#isi-tes-soal .radio>label{
  display:block !important;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:14px 14px 14px 44px !important;margin:0 !important;
  font-weight:400 !important;font-size:15px;line-height:1.6;cursor:pointer;
  position:relative;transition:.15s ease;
}
#isi-tes-soal .radio label:hover{border-color:var(--g-light);background:#fafdfb}
#isi-tes-soal .radio label input[type="radio"]{
  position:absolute !important;left:14px !important;top:50% !important;
  margin:-9px 0 0 0 !important;width:18px;height:18px;accent-color:var(--g);cursor:pointer;
}
/* selected state (progressive enhancement) */
#isi-tes-soal .radio:has(input:checked) label{
  border-color:var(--g) !important;background:var(--g-soft) !important;
  box-shadow:0 0 0 3px rgba(31,138,76,.12);font-weight:500 !important;
}
#isi-tes-soal .radio label img{margin:8px 0 !important}

/* ---------- exam: timer ---------- */
#sisa-waktu{
  font-weight:700;font-size:14.5px;color:var(--g-dark);
  background:#fff;border:1.5px solid var(--g-light);border-radius:999px;
  padding:5px 14px;white-space:nowrap;
}

/* ---------- exam: question-number grid ---------- */
button[id^="btn-soal-"]{
  width:42px !important;height:42px !important;min-height:42px !important;
  padding:0 !important;margin:0 6px 6px 0 !important;
  border-radius:10px !important;font-size:14px !important;font-weight:700 !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  box-shadow:none !important;
}
button[id^="btn-soal-"].btn-primary{background:var(--g) !important;border-color:var(--g) !important;color:#fff !important}
button[id^="btn-soal-"].btn-warning{background:var(--amber) !important;border-color:var(--amber) !important;color:#fff !important}
button[id^="btn-soal-"].btn-default{background:#fff !important;border:1.5px solid var(--line) !important;color:var(--muted) !important}

/* ragu-ragu toggle */
#btn-ragu{
  display:inline-flex !important;align-items:center;gap:8px;
  background:var(--amber-soft) !important;border:1.5px solid var(--amber) !important;
  color:#8a5a00 !important;font-weight:600 !important;border-radius:var(--r-sm) !important;
  padding:11px 16px !important;min-height:44px;
}
#btn-ragu input[type="checkbox"]{width:16px !important;height:16px !important;margin:0 !important;accent-color:var(--amber)}

#btn-sebelumnya,#btn-selanjutnya{font-weight:700 !important}
#btn-selanjutnya{background:var(--g) !important;border-color:var(--g) !important;color:#fff !important;box-shadow:0 4px 12px rgba(31,138,76,.24)}
#btn-hentikan{background:#fff !important;border-color:var(--red) !important;color:var(--red) !important}
#btn-hentikan:hover{background:var(--red) !important;color:#fff !important}

/* ---------- tables ---------- */
.table{font-size:14px;background:#fff}
.table>thead>tr>th{
  background:#f4f8f6;color:var(--g-dark);font-weight:700;font-size:13px;
  border-bottom:2px solid var(--line) !important;padding:12px 10px !important;
}
.table>tbody>tr>td{padding:11px 10px !important;border-top:1px solid var(--line) !important;vertical-align:middle}
.table-hover>tbody>tr:hover{background:var(--g-soft) !important}
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{border-color:var(--line) !important}
.box-body>.table-responsive,.table-responsive{border:0 !important;-webkit-overflow-scrolling:touch}

/* ---------- admin chrome ---------- */
.main-header .navbar,.skin-blue .main-header .navbar,.skin-green .main-header .navbar{background:var(--g) !important}
.main-header .logo,.skin-blue .main-header .logo,.skin-green .main-header .logo{
  background:var(--g-dark) !important;font-family:inherit !important;font-weight:700 !important;
}
.main-header .logo:hover{background:var(--g-dark) !important}
.skin-blue .sidebar-menu>li.active>a,.skin-green .sidebar-menu>li.active>a,
.sidebar-menu>li.active>a{border-left-color:var(--g-light) !important}
.skin-blue .sidebar-menu>li:hover>a,.sidebar-menu>li:hover>a{border-left-color:var(--g-light) !important}
.main-sidebar,.left-side{font-size:14px}
.sidebar-menu>li>a{padding:12px 15px !important}
.user-panel>.info>p{font-weight:600}
.main-footer{
  background:#fff !important;border-top:1px solid var(--line) !important;
  color:var(--muted);font-size:12.5px;padding:14px 16px !important;
}

/* small-box / info-box dashboards */
.small-box{border-radius:var(--r) !important;box-shadow:var(--sh) !important;overflow:hidden}
.small-box>.inner{padding:18px}
.small-box h3{font-weight:700 !important;font-size:30px !important}
.info-box{border-radius:var(--r) !important;box-shadow:var(--sh) !important;background:#fff}
.bg-green,.bg-green-active,.small-box.bg-green{background:var(--g) !important}
.bg-aqua,.small-box.bg-aqua{background:var(--g-light) !important}

/* ---------- modals / alerts ---------- */
.modal-content{border-radius:var(--r-lg) !important;border:0 !important;box-shadow:0 20px 60px rgba(16,32,24,.25) !important}
.modal-header{border-bottom:1px solid var(--line) !important;padding:18px 20px !important}
.modal-header .modal-title{font-weight:700;font-size:16.5px}
.modal-body{padding:20px !important}
.modal-footer{border-top:1px solid var(--line) !important;padding:14px 20px !important}
.alert{border-radius:var(--r-sm) !important;border:1px solid transparent;font-size:14px;padding:13px 16px !important}
.alert-success{background:var(--g-soft) !important;border-color:var(--g-light) !important;color:var(--g-dark) !important}
.alert-danger,.alert-error{background:#fdecec !important;border-color:var(--red) !important;color:#9b1c20 !important}
.alert-warning{background:var(--amber-soft) !important;border-color:var(--amber) !important;color:#8a5a00 !important}
.label,.badge{font-weight:600;border-radius:999px;padding:4px 10px;font-size:11.5px}
.label-success,.badge.bg-green{background:var(--g) !important}
.pagination>li>a,.pagination>li>span{color:var(--g);border-color:var(--line)}
.pagination>.active>a,.pagination>.active>span{background:var(--g) !important;border-color:var(--g) !important}
.nav-tabs-custom>.nav-tabs>li.active{border-top-color:var(--g) !important}

/* ---------- MOBILE (priority) ---------- */
@media (max-width:767px){
  .content-header>h1{font-size:17px !important}
  .content{padding:0 10px 10px !important}
  .container{padding-left:10px !important;padding-right:10px !important;width:100% !important}
  .box{border-radius:12px !important;margin-bottom:12px}
  .box-body{padding:13px !important}
  .box-header{padding:12px 13px !important}
  .box-footer{padding:11px 13px !important}

  /* answer cards: bigger tap targets */
  #isi-tes-soal .radio label,#isi-tes-soal .radio>label{padding:15px 13px 15px 42px !important;font-size:15.5px}

  /* number grid: even, thumb-friendly */
  button[id^="btn-soal-"]{width:40px !important;height:40px !important;min-height:40px !important;margin:0 5px 5px 0 !important}


  /* header + timer stack cleanly */
  .content-header>.breadcrumb{justify-content:flex-start}

  /* wide tables scroll instead of breaking layout */
  .box-body>.table-responsive,.table-responsive{overflow-x:auto !important;width:100%}
  .table{font-size:13px}

  .login-page,.register-page{padding-top:4vh}
  .login-box-body,.register-box-body{padding:22px 18px !important}
  .btn{padding:12px 16px !important}
  .modal-dialog{margin:10px !important}
}

@media (min-width:768px){
  .container{max-width:980px}
}

/* print / accessibility */
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
:focus-visible{outline:3px solid rgba(76,184,99,.45);outline-offset:2px}

/* ---------- refinements ---------- */
.login-logo,.register-logo{
  font-size:22px !important;font-weight:700 !important;color:var(--ink) !important;
  text-align:center;margin-bottom:16px !important;letter-spacing:-.2px;
}
.login-logo b,.register-logo b{font-weight:700}
@media (max-width:767px){
  .login-logo,.register-logo{font-size:19px !important;margin-bottom:14px !important}
  /* clock in navbar shouldn't claim its own row */
  .main-header .navbar-custom-menu,.main-header .navbar-right{float:right !important}
  .main-header .navbar .nav>li>a{padding:12px 10px !important}
}
/* login field icons stay aligned with the taller inputs */
.has-feedback .form-control-feedback{top:0;height:100%;display:flex;align-items:center;justify-content:center;width:42px;right:4px;color:var(--muted)}
.form-horizontal .form-group{margin-left:0;margin-right:0}

/* ---------- robust layout (no :has() dependency) ---------- */
/* card header: title left, tools (timer) right — works on every browser */
.box-header{
  display:flex !important;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.box-header>.box-title{margin:0 !important;text-align:left !important;flex:0 1 auto}
.box-header>.box-tools,.box-header>.box-tools.pull-right{
  position:static !important;float:none !important;margin:0 !important;
  display:flex;align-items:center;gap:8px;
}
.box-header>.box-tools .pull-right{float:none !important}

/* answer radio aligns to the first line, not the middle of tall options */
#isi-tes-soal .radio label input[type="radio"]{top:16px !important;margin-top:0 !important}

/* question nav: desktop keeps the inline row, mobile stacks full-width */
.box-footer #btn-selanjutnya{float:right}
.box-footer::after{content:"";display:table;clear:both}

@media (max-width:767px){
  /* full-width stacked controls — biggest possible tap targets on a phone */
  #btn-sebelumnya,#btn-ragu,#btn-selanjutnya{
    display:flex !important;width:100% !important;float:none !important;
    justify-content:center;margin:0 0 9px 0 !important;
  }
  #btn-selanjutnya{margin-bottom:0 !important}
  .box-footer br{display:none}
  #btn-hentikan{display:block;width:100%;float:none !important}
  #isi-tes-soal .radio label input[type="radio"]{top:17px !important}
}

/* AdminLTE puts a clearfix ::before/::after on .box-header — inside a flex
   container those become flex items and shove the title into the middle. */
.box-header::before,.box-header::after{display:none !important;content:none !important}

/* .btn-info is this app's primary submit (Login, Simpan) — use the school green */
.btn-info{background:var(--g) !important;border-color:var(--g) !important;color:#fff !important;box-shadow:0 4px 12px rgba(31,138,76,.24)}
.btn-info:hover,.btn-info:focus{background:var(--g-dark) !important;border-color:var(--g-dark) !important}

/* AdminLTE callouts → soft tinted cards with an accent bar */
.callout{
  border-radius:var(--r-sm) !important;border:1px solid var(--line) !important;
  border-left:4px solid var(--g) !important;
  background:var(--g-soft) !important;color:var(--ink) !important;
  padding:14px 16px !important;margin-bottom:16px;box-shadow:none !important;
}
.callout h4{font-size:15px !important;font-weight:700 !important;color:var(--g-dark) !important;margin:0 0 6px !important}
.callout p{color:var(--ink) !important;font-size:14px;margin:0}
.callout a{color:var(--g-dark) !important;text-decoration:underline}
.callout.callout-info,.callout.callout-success{border-left-color:var(--g) !important;background:var(--g-soft) !important}
.callout.callout-warning{border-left-color:var(--amber) !important;background:var(--amber-soft) !important}
.callout.callout-warning h4{color:#8a5a00 !important}
.callout.callout-danger{border-left-color:var(--red) !important;background:#fdecec !important}
.callout.callout-danger h4{color:#9b1c20 !important}
.alert-info{background:var(--g-soft) !important;border-color:var(--g-light) !important;color:var(--g-dark) !important}