/* =========================================================
   CBT eSchool — Modern Minimal Theme
   Satu lapisan tema terpusat. Dioverlay di atas AdminKit +
   Bootstrap 5. Gaya: bersih, minimalis, satu aksen warna.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palet logo sekolah: oranye #ED5223, emas #FFCC04, hijau #5A9B43 */
  --cbt-primary: #ed5223;
  --cbt-primary-hover: #d24317;
  --cbt-primary-deep: #c2410c;
  --cbt-primary-soft: rgba(237, 82, 35, 0.10);
  --cbt-primary-soft-2: rgba(237, 82, 35, 0.18);

  --cbt-accent: #ffcc04;
  --cbt-accent-soft: rgba(255, 204, 4, 0.18);
  --cbt-green: #4c8c3f;

  --cbt-bg: #faf8f4;
  --cbt-surface: #ffffff;
  --cbt-border: #ece7dd;
  --cbt-border-strong: #dfd8ca;

  --cbt-text: #292524;
  --cbt-heading: #1c1917;
  --cbt-muted: #78716c;

  --cbt-sidebar-bg: #1e3a20;
  --cbt-sidebar-bg-2: #162c18;
  --cbt-sidebar-text: rgba(226, 240, 226, 0.72);
  --cbt-sidebar-text-strong: #f2fbf2;

  --cbt-radius-sm: 8px;
  --cbt-radius: 12px;
  --cbt-radius-lg: 16px;
  --cbt-radius-pill: 999px;

  --cbt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --cbt-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
  --cbt-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);

  --cbt-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */
body {
  background-color: var(--cbt-bg);
  color: var(--cbt-text);
  font-family: "Inter", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--cbt-heading);
  font-weight: 650;
  letter-spacing: -0.01em;
}

a { color: var(--cbt-primary-deep); }
a:hover { color: var(--cbt-primary-hover); }

.text-muted { color: var(--cbt-muted) !important; }

/* Aksen warna primer (override helper Bootstrap) */
.bg-primary { background-color: var(--cbt-primary) !important; }
.text-primary { color: var(--cbt-primary) !important; }
.border-primary { border-color: var(--cbt-primary) !important; }
.link-primary { color: var(--cbt-primary) !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-sm);
  transition: box-shadow 0.25s var(--cbt-ease), transform 0.25s var(--cbt-ease);
}

.card.shadow,
.card.shadow-sm { box-shadow: var(--cbt-shadow) !important; }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cbt-border);
  padding: 1rem 1.35rem;
  font-weight: 600;
}

.card-header .card-title { margin: 0; }

.card-body { padding: 1.35rem; }

.card-title {
  color: var(--cbt-heading);
  font-weight: 650;
  font-size: 1rem;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--cbt-border);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--cbt-radius-sm);
  font-weight: 550;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s var(--cbt-ease), color 0.2s var(--cbt-ease),
    border-color 0.2s var(--cbt-ease), box-shadow 0.2s var(--cbt-ease),
    transform 0.12s var(--cbt-ease);
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cbt-primary-soft-2);
}

.btn-sm { border-radius: var(--cbt-radius-sm); padding: 0.32rem 0.7rem; }
.btn-lg { border-radius: var(--cbt-radius); }

.btn-primary {
  background-color: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cbt-primary-hover);
  border-color: var(--cbt-primary-hover);
  color: #fff;
}

.btn-outline-primary {
  color: var(--cbt-primary);
  border-color: var(--cbt-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
}

.btn-secondary {
  background-color: #f0ece4;
  border-color: #f0ece4;
  color: #44403c;
}
.btn-secondary:hover { background-color: #e7e1d6; border-color: #e7e1d6; color: #292524; }

.btn-outline-secondary {
  color: #57534e;
  border-color: var(--cbt-border-strong);
}
.btn-outline-secondary:hover {
  background-color: #f5f1e9;
  border-color: var(--cbt-border-strong);
  color: #1c1917;
}

.btn-light { background-color: #f5f1e9; border-color: #f5f1e9; color: #44403c; }
.btn-light:hover { background-color: #ece6da; color: #1c1917; }

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: var(--cbt-radius-sm);
  border: 1px solid var(--cbt-border-strong);
  padding: 0.55rem 0.85rem;
  color: var(--cbt-text);
  transition: border-color 0.2s var(--cbt-ease), box-shadow 0.2s var(--cbt-ease),
    background-color 0.2s var(--cbt-ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cbt-primary);
  box-shadow: 0 0 0 3px var(--cbt-primary-soft);
  background-color: #fff;
}

.form-control::placeholder { color: #a8a29e; }

/* Form select: beri ruang untuk chevron */
.form-select {
  padding-right: 1.25rem;
  background-position: right 0.75rem center;
  background-size: 14px 10px;
}

.form-label, label {
  color: #44403c;
  font-weight: 550;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

.input-group-text {
  background: #f5f1e9;
  border-color: var(--cbt-border-strong);
  color: #78716c;
  border-radius: var(--cbt-radius-sm);
}

.form-check-input:checked {
  background-color: var(--cbt-primary);
  border-color: var(--cbt-primary);
}
.form-check-input:focus {
  border-color: var(--cbt-primary);
  box-shadow: 0 0 0 3px var(--cbt-primary-soft);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  color: var(--cbt-text);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--cbt-border);
}

.table > thead {
  background: #faf7f1;
}

.table > thead th {
  color: #57534e;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--cbt-border-strong);
}

.table-hover > tbody > tr:hover > * {
  background-color: #faf7f1;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #fdfcf9;
}

.table-wrapper,
.table-responsive {
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Navbar (topbar) ---------- */
.navbar-bg,
.navbar.navbar-bg {
  background: var(--cbt-surface) !important;
  border-top: 3px solid var(--cbt-accent);
  border-bottom: 1px solid var(--cbt-border);
  box-shadow: var(--cbt-shadow-sm);
  padding: 0.5rem 1.25rem;
}

.navbar .nav-link { color: #57534e; }
.navbar .nav-link:hover { color: var(--cbt-primary); }

.hamburger, .hamburger:before, .hamburger:after {
  background: #57534e;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  box-shadow: var(--cbt-shadow-lg);
  padding: 0.4rem;
  font-size: 0.9rem;
}

.dropdown-item {
  border-radius: var(--cbt-radius-sm);
  padding: 0.5rem 0.7rem;
  color: #44403c;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--cbt-primary-soft);
  color: var(--cbt-primary-hover);
}

.dropdown-divider { border-color: var(--cbt-border); margin: 0.3rem 0; }

/* ---------- Sidebar (hijau tua identitas sekolah) ---------- */
.sidebar .sidebar-content {
  background: var(--cbt-sidebar-bg);
}

.sidebar .sidebar-brand {
  background: var(--cbt-sidebar-bg-2);
  border-bottom: 3px solid var(--cbt-accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 1.15rem 1.5rem;
}

.sidebar .sidebar-header {
  color: rgba(226, 240, 226, 0.50);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 1.1rem 1.5rem 0.4rem;
  background: transparent;
}

.sidebar .sidebar-link {
  background: transparent;
  color: var(--cbt-sidebar-text);
  border-left: 0;
  border-radius: var(--cbt-radius-sm);
  margin: 2px 0.7rem;
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  transition: background 0.18s var(--cbt-ease), color 0.18s var(--cbt-ease);
}

.sidebar .sidebar-link i { font-size: 1rem; width: 1.35rem; text-align: center; }

.sidebar .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cbt-sidebar-text-strong);
}

.sidebar .sidebar-item.active > .sidebar-link,
.sidebar .sidebar-link[aria-expanded="true"] {
  background: var(--cbt-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(237, 82, 35, 0.35);
}

/* Submenu */
.sidebar .sidebar-dropdown {
  background: rgba(0, 0, 0, 0.16);
  border-radius: var(--cbt-radius-sm);
  margin: 2px 0.7rem 6px;
  padding: 0.25rem 0;
}

.sidebar .sidebar-dropdown .sidebar-link {
  margin: 1px 0.4rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  color: rgba(226, 240, 226, 0.66);
}

.sidebar .sidebar-dropdown .sidebar-item.submenu > a.sidebar-link,
.sidebar .sidebar-dropdown .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 0 !important;
  color: #fff;
}

/* ---------- Badges, alerts, modals ---------- */
.badge {
  border-radius: var(--cbt-radius-pill);
  font-weight: 600;
  padding: 0.32em 0.7em;
  letter-spacing: 0.01em;
}

.alert {
  border-radius: var(--cbt-radius);
  border: 1px solid transparent;
}

.modal-content {
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-lg);
  overflow: hidden;
}

.modal-header { border-bottom: 1px solid var(--cbt-border); }
.modal-footer { border-top: 1px solid var(--cbt-border); }

/* ---------- Toast ---------- */
.toast {
  border-radius: var(--cbt-radius) !important;
  border: 0;
  box-shadow: var(--cbt-shadow-lg);
}

/* ---------- Content spacing ---------- */
.content { padding: 1.5rem 1.5rem; }

/* ---------- Utilities / komponen siap pakai ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
  height: 100%;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}
.stat-card .stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cbt-muted);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.stat-card .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--cbt-heading);
  line-height: 1.1;
}

.stat-card .stat-icon {
  position: absolute;
  right: -12px;
  bottom: -18px;
  font-size: 110px;
  color: var(--cbt-primary);
  opacity: 0.08;
  z-index: 0;
  transition: opacity 0.4s var(--cbt-ease), transform 0.4s var(--cbt-ease);
}

/* Animasi hover: icon membesar + rotasi halus */
.stat-card:hover .stat-icon {
  opacity: 0.14;
  transform: scale(1.1) rotate(-6deg);
}

.soft-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-size: 1.15rem;
}

.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cbt-heading);
}

.hover-lift { transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--cbt-shadow); }

/* Kartu fitur (dashboard siswa) */
.feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-sm);
  padding: 1.9rem 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease),
    border-color 0.25s var(--cbt-ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cbt-shadow);
  border-color: var(--cbt-primary-soft-2);
  color: inherit;
  text-decoration: none;
}
.feature-card .feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.feature-card h5 { font-weight: 650; margin: 0; }
.feature-card p { color: var(--cbt-muted); font-size: 0.875rem; margin: 0; }
.feature-card .btn { margin-top: 0.9rem; }

/* Kartu daftar ujian (siswa/ujian.php) */
.exam-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-sm);
  padding: 1.5rem 1.25rem;
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.exam-card:hover { transform: translateY(-4px); box-shadow: var(--cbt-shadow); }
.exam-card .qr-tile {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.9rem;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exam-card h5 { font-weight: 650; margin-bottom: 0.5rem; }
.exam-card .exam-meta { color: var(--cbt-muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
.exam-card .btn { margin-top: auto; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d6cec0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #bfb5a3; background-clip: content-box; }

/* ---------- Halaman Login / Auth ---------- */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(237, 82, 35, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255, 204, 4, 0.16), transparent 55%),
    var(--cbt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: 20px;
  box-shadow: var(--cbt-shadow-lg);
  padding: 2.25rem 2rem;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: var(--cbt-radius-pill);
  margin-bottom: 1.1rem;
}

.auth-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}
.auth-logo img { max-width: 240px; height: auto; }

.auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  color: var(--cbt-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.auth-card .form-control {
  border-radius: var(--cbt-radius-sm);
  padding: 0.65rem 0.9rem;
}

.auth-captcha-row { display: flex; align-items: center; gap: 0.6rem; }
.auth-captcha-row img {
  border-radius: var(--cbt-radius-sm);
  height: 42px;
  border: 1px solid var(--cbt-border-strong);
}

.auth-btn {
  width: 100%;
  border-radius: var(--cbt-radius-sm);
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 1rem;
}

.auth-foot {
  margin-top: 1.25rem;
  color: var(--cbt-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Global overrides (dipindah dari inc/css.php) ---------- */

/* Toast container — posisi fixed kanan bawah */
#toast-container {
  position: fixed !important;
  bottom: 1rem;
  right: 1rem;
  left: auto !important;
  z-index: 9999;
}

/* Perpanjang durasi animasi FontAwesome (2 detik) */
.fa-beat,
.fa-bounce,
.fa-fade,
.fa-beat-fade,
.fa-flip,
.fa-pulse,
.fa-shake,
.fa-spin,
.fa-spin-pulse {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

/* Semua tabel: teks rata kiri */
table th,
table td {
  text-align: left !important;
}

/* Animasi kedip untuk notifikasi penting */
.blinking {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ---------- Dashboard ---------- */

/* Header halaman dashboard */
.dashboard-header {
  margin-bottom: 1.5rem;
}
.dashboard-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbt-heading);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}
.dashboard-header p {
  color: var(--cbt-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Tombol di dalam stat-card (varian pill kecil) */
.stat-card .btn {
  border-radius: var(--cbt-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.32rem 0.85rem;
  transition: all 0.2s var(--cbt-ease);
}
.stat-card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
.stat-card .btn i {
  margin-right: 0.35rem;
}

/* Wrapper chart card */
.chart-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chart-card .card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.35rem 1.35rem;
}
.chart-card canvas {
  max-height: 320px;
  width: 100% !important;
}

/* Icon kecil di card-title (chart card) */
.card-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-size: 0.9rem;
  margin-right: 0.6rem;
  flex-shrink: 0;
}

/* Entrance animation */
@keyframes cbtFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cbt-animate-in {
  animation: cbtFadeInUp 0.5s var(--cbt-ease) both;
}
.cbt-delay-1 { animation-delay: 0.05s; }
.cbt-delay-2 { animation-delay: 0.10s; }
.cbt-delay-3 { animation-delay: 0.15s; }
.cbt-delay-4 { animation-delay: 0.20s; }
.cbt-delay-5 { animation-delay: 0.25s; }
.cbt-delay-6 { animation-delay: 0.30s; }

/* Responsive dashboard */
@media (max-width: 768px) {
  .dashboard-header h1 { font-size: 1.35rem; }
  .chart-card canvas { max-height: 260px; }
}

@media (max-width: 576px) {
  .auth-card { padding: 1.75rem 1.25rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .content { padding: 1rem; }
  .card-body { padding: 1rem; }
  .stat-card .stat-value { font-size: 1.6rem; }
}

/* ---------- Halaman Hasil / Tabel Data ---------- */

/* Wrapper tabel dengan scroll tinggi terbatas */
.table-wrapper--scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* =========================================
   TABLE — Data-Dense Model
   Header gelap + border tegas + zebra soft
   ========================================= */

/* Header kolom: gelap, tegas, kontras */
.table-wrapper--scroll .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cbt-heading);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 0.9rem;
  border-bottom: 2px solid var(--cbt-primary);
  border-top: 0;
  white-space: nowrap;
}

/* Row dasar: lebih rapat, border tegas */
.table-wrapper--scroll .table tbody td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--cbt-border-strong);
  vertical-align: middle;
  font-size: 0.875rem;
  color: var(--cbt-text);
}

/* Hilangkan border row terakhir (biar tidak double dengan wrapper) */
.table-wrapper--scroll .table tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra: baris ganjil cream soft */
.table-wrapper--scroll .table tbody tr:nth-child(odd) td {
  background-color: #fdfbf7;
}

/* Hover row: tetap putih + aksen kiri oranye + tint */
.table-hover > tbody > tr {
  transition: background-color 0.15s var(--cbt-ease);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(237, 82, 35, 0.05) !important;
}
.table-hover > tbody > tr:hover > *:first-child {
  box-shadow: inset 3px 0 0 var(--cbt-primary);
}

/* Kolom Nama Siswa — lebih menonjol */
.table-wrapper--scroll .table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--cbt-heading);
  font-size: 0.9rem;
}

/* Kolom Kode Soal — monospace look */
.table-wrapper--scroll .table tbody td:nth-child(3) {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
  color: var(--cbt-muted);
  letter-spacing: -0.01em;
}

/* =========================================
   KOLOM NILAI AKHIR — pusat perhatian
   ========================================= */
.table td.nilai-col {
  background: linear-gradient(135deg, var(--cbt-primary-soft), transparent) !important;
  font-weight: 800;
  font-size: 1rem;
  color: var(--cbt-primary-deep);
  border-left: 3px solid var(--cbt-primary);
  letter-spacing: -0.01em;
}

/* =========================================
   BADGE STATUS KOREKSI
   ========================================= */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35em 0.75em;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.badge-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-status.is-done {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.badge-status.is-pending {
  background: rgba(237, 82, 35, 0.12);
  color: var(--cbt-primary);
}
.badge-status.is-pending::before {
  animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* =========================================
   TOMBOL PREVIEW
   ========================================= */
.btn-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  transition: all 0.2s var(--cbt-ease);
  text-decoration: none;
}
.btn-preview:hover,
.btn-preview:focus {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
  text-decoration: none;
}
.btn-preview i { font-size: 0.85em; }

/* =========================================
   TOMBOL HAPUS
   ========================================= */
.btn-hapus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid rgba(220, 53, 69, 0.3);
  background: var(--cbt-surface);
  color: #dc3545;
  transition: all 0.2s var(--cbt-ease);
}
.btn-hapus:hover,
.btn-hapus:focus {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}
.btn-hapus i { font-size: 0.85em; }

/* =========================================
   EMPTY STATE
   ========================================= */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--cbt-muted);
}
.empty-state i {
  font-size: 3rem;
  opacity: 0.25;
  color: var(--cbt-primary);
  margin-bottom: 1rem;
  display: block;
}
.empty-state h6 {
  color: var(--cbt-heading);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.empty-state p {
  font-size: 0.875rem;
  margin: 0;
}

/* =========================================
   PAGE HEADER
   ========================================= */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header .page-title {
  margin: 0;
}
.page-header .page-subtitle {
  color: var(--cbt-muted);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* Card header ber-icon */
.card-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-size: 0.95rem;
  margin-right: 0.6rem;
}

/* =========================================
   DataTables length menu & filter — rapikan
   ========================================= */
.dataTables_length label,
.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--cbt-muted);
  font-size: 0.875rem;
}

.dataTables_length select {
  min-width: 80px;
  padding-right: 2.25rem;
  padding-left: 0.75rem;
  margin: 0 0.25rem;
}

.dataTables_filter input {
  min-width: 200px;
}

/* Pagination DataTables */
.dataTables_paginate .pagination {
  margin: 0;
  gap: 0.25rem;
}
.dataTables_paginate .page-link {
  border-radius: var(--cbt-radius-sm) !important;
  border-color: var(--cbt-border);
  color: var(--cbt-text);
  font-weight: 500;
  padding: 0.4rem 0.75rem;
}
.dataTables_paginate .page-item.active .page-link {
  background-color: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
}

/* Skeleton loading untuk tabel */
.skeleton-table {
  padding: 1.5rem;
}
.skeleton-row {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cbt-border);
}
.skeleton-cell {
  height: 14px;
  background: linear-gradient(90deg, #f0ece4 25%, #faf7f1 50%, #f0ece4 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s infinite;
}
.skeleton-cell.w-5  { width: 5%; }
.skeleton-cell.w-15 { width: 15%; }
.skeleton-cell.w-20 { width: 20%; }
.skeleton-cell.w-25 { width: 25%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Soal.php */
/* Dropdown aksi (menu 3-dot) */
.btn-actions-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cbt-radius-sm);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  transition: all 0.2s var(--cbt-ease);
  padding: 0;
  font-size: 0.9rem;
}
.btn-actions-dropdown:hover,
.btn-actions-dropdown:focus,
.btn-actions-dropdown[aria-expanded="true"] {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}

/* Icon-only button (untuk kolom Generate) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cbt-radius-sm);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  transition: all 0.2s var(--cbt-ease);
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-icon:hover {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
.btn-icon.is-danger:hover {
  background: #dc3545;
  border-color: #dc3545;
}
.btn-icon.is-success:hover {
  background: var(--cbt-green);
  border-color: var(--cbt-green);
}

/* Kode token — monospace + soft bg */
.token-code {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-deep);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Baris tabel dengan banyak aksi — biar tidak "pegang" lebar */
.dropdown-menu {
  font-size: 0.85rem;
}
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
}
.dropdown-item i {
  width: 16px;
  text-align: center;
}

/* =========================================
   TOMBOL TRIGGER DROPDOWN "KELOLA"
   ========================================= */
.btn-actions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  transition: all 0.2s var(--cbt-ease);
  text-decoration: none;
  cursor: pointer;
}
.btn-actions-trigger:hover,
.btn-actions-trigger:focus,
.btn-actions-trigger[aria-expanded="true"] {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
.btn-actions-trigger .caret {
  font-size: 0.7em;
  transition: transform 0.2s var(--cbt-ease);
  margin-left: 0.1rem;
}
.btn-actions-trigger[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* =========================================
   DROPDOWN MENU "KELOLA" — rapikan
   ========================================= */
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--cbt-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cbt-text);
  transition: all 0.15s var(--cbt-ease);
}
.dropdown-menu .dropdown-item i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--cbt-muted);
  transition: color 0.15s var(--cbt-ease);
}
.dropdown-menu .dropdown-item:hover {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-hover);
}
.dropdown-menu .dropdown-item:hover i {
  color: var(--cbt-primary);
}
.dropdown-menu .dropdown-item.text-danger {
  color: #dc3545;
}
.dropdown-menu .dropdown-item.text-danger i {
  color: #dc3545;
}
.dropdown-menu .dropdown-item.text-danger:hover {
  background: rgba(220, 53, 69, 0.10);
  color: #dc3545;
}
.dropdown-menu .dropdown-item.text-danger:hover i {
  color: #dc3545;
}

/* ---------- Halaman Monitor Ujian ---------- */

/* =========================================
   STAT-CARD RINGKASAN MONITOR
   ========================================= */
.monitor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .monitor-stats {
    grid-template-columns: 1fr;
  }
}

.monitor-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.monitor-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}

.monitor-stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Varian warna */
.monitor-stat.is-active .stat-icon-wrap {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.monitor-stat.is-done .stat-icon-wrap {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}
.monitor-stat.is-warning .stat-icon-wrap {
  background: rgba(255, 204, 4, 0.20);
  color: #b88a00;
}

.monitor-stat .stat-body {
  flex: 1;
  min-width: 0;
}
.monitor-stat .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.monitor-stat .stat-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================
   LIVE INDICATOR (dot hijau berdenyut)
   ========================================= */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--cbt-radius-pill);
  background: rgba(90, 155, 67, 0.10);
  color: var(--cbt-green);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.live-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cbt-green);
  box-shadow: 0 0 0 0 rgba(90, 155, 67, 0.7);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(90, 155, 67, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(90, 155, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(90, 155, 67, 0);
  }
}

/* =========================================
   TIMESTAMP SUBTLE
   ========================================= */
.live-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--cbt-muted);
  font-weight: 500;
}
.live-timestamp i {
  color: var(--cbt-green);
  font-size: 0.75rem;
}

/* =========================================
   PROGRESS BAR UPGRADE (dari monitor_data.php)
   ========================================= */
#monitor .progress {
  height: 8px !important;
  border-radius: 999px !important;
  background: #f0ece4 !important;
  overflow: hidden;
  margin-top: 4px;
}
#monitor .progress-bar {
  border-radius: 999px !important;
  transition: width 0.6s var(--cbt-ease) !important;
}
#monitor .progress-bar.bg-success {
  background: var(--cbt-green) !important;
}
#monitor .progress-bar.bg-warning {
  background: var(--cbt-accent) !important;
}
#monitor .progress-bar.bg-danger {
  background: var(--cbt-primary) !important;
}

/* Label progres di atas bar */
#monitor td:has(.progress) {
  min-width: 110px;
}
#monitor td:has(.progress) > div:first-child {
  font-weight: 700;
  color: var(--cbt-heading);
  font-size: 0.85rem;
}

/* =========================================
   TOMBOL "SELESAI PAKSA" (dari monitor_data.php)
   ========================================= */
#monitor .simpan-paksa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid rgba(220, 53, 69, 0.3);
  background: var(--cbt-surface);
  color: #dc3545;
  transition: all 0.2s var(--cbt-ease);
}
#monitor .simpan-paksa-btn:hover,
#monitor .simpan-paksa-btn:focus {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}
#monitor .simpan-paksa-btn i {
  font-size: 0.85em;
  order: 2;
}

/* =========================================
   BADGE STATUS (dari monitor_data.php)
   ========================================= */
#monitor .badge.bg-success,
#monitor .badge.bg-danger {
  border-radius: var(--cbt-radius-pill);
  font-weight: 600;
  padding: 0.35em 0.75em;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
#monitor .badge.bg-success::before,
#monitor .badge.bg-danger::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
#monitor .badge.bg-success {
  background: rgba(90, 155, 67, 0.12) !important;
  color: var(--cbt-green) !important;
}
#monitor .badge.bg-danger {
  background: rgba(237, 82, 35, 0.12) !important;
  color: var(--cbt-primary) !important;
}

/* =========================================
   KOLOM NAMA SISWA — lebih menonjol
   ========================================= */
#monitor tbody td:first-child {
  font-weight: 600;
  color: var(--cbt-heading);
}

/* Waktu — monospace */
#monitor tbody td:nth-child(3),
#monitor tbody td:nth-child(4) {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
}

/* ---------- Halaman Log Aktivitas ---------- */

/* =========================================
   STAT-CARD RINGKASAN LOG
   ========================================= */
.log-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .log-stats {
    grid-template-columns: 1fr;
  }
}

.log-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.log-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}

.log-stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.log-stat.is-online .stat-icon-wrap {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.log-stat.is-idle .stat-icon-wrap {
  background: rgba(255, 204, 4, 0.20);
  color: #b88a00;
}
.log-stat.is-offline .stat-icon-wrap {
  background: #f0ece4;
  color: var(--cbt-muted);
}

.log-stat .stat-body {
  flex: 1;
  min-width: 0;
}
.log-stat .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.log-stat .stat-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================
   DOT INDIKATOR ONLINE/OFFLINE
   ========================================= */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
  flex-shrink: 0;
  vertical-align: middle;
}
.status-dot.is-online {
  background: var(--cbt-green);
  box-shadow: 0 0 0 0 rgba(90, 155, 67, 0.5);
  animation: status-pulse 2s infinite;
}
.status-dot.is-idle {
  background: var(--cbt-accent);
}
.status-dot.is-offline {
  background: #d6cec0;
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(90, 155, 67, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(90, 155, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 155, 67, 0); }
}

/* Nama siswa dengan dot */
.student-with-dot {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--cbt-heading);
}

/* =========================================
   SESSION TOKEN — truncate + copy
   ========================================= */
.token-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.token-text {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.72rem;
  color: var(--cbt-muted);
  background: var(--cbt-primary-soft);
  padding: 0.15rem 0.45rem;
  border-radius: var(--cbt-radius-sm);
  cursor: help;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  display: inline-block;
  vertical-align: middle;
}
.btn-copy-token {
  background: transparent;
  border: 0;
  color: var(--cbt-muted);
  padding: 0.15rem 0.3rem;
  border-radius: var(--cbt-radius-sm);
  cursor: pointer;
  font-size: 0.72rem;
  transition: all 0.15s var(--cbt-ease);
  line-height: 1;
}
.btn-copy-token:hover {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}

/* =========================================
   PAGE URL — truncate
   ========================================= */
.url-cell {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

/* =========================================
   RELATIVE TIME
   ========================================= */
.time-cell {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.3;
}
.time-cell .time-relative {
  font-weight: 600;
  color: var(--cbt-heading);
  font-size: 0.82rem;
}
.time-cell .time-full {
  font-size: 0.7rem;
  color: var(--cbt-muted);
}

/* =========================================
   FILTER CHIPS
   ========================================= */
.filter-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--cbt-ease);
}
.filter-chip:hover {
  border-color: var(--cbt-primary);
  color: var(--cbt-primary);
}
.filter-chip.is-active {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
}
.filter-chip .chip-count {
  background: rgba(0, 0, 0, 0.08);
  padding: 0.05rem 0.4rem;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.68rem;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}
.filter-chip.is-active .chip-count {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- Halaman Who's Online ---------- */

/* =========================================
   STAT-CARD RINGKASAN ONLINE
   ========================================= */
.online-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .online-stats {
    grid-template-columns: 1fr;
  }
}

.online-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.online-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}
.online-stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.online-stat.is-active .stat-icon-wrap {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.online-stat.is-popular .stat-icon-wrap {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}
.online-stat .stat-body {
  flex: 1;
  min-width: 0;
}
.online-stat .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.online-stat .stat-num.is-text {
  font-size: 1.1rem;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-weight: 700;
}
.online-stat .stat-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================
   CARD SISWA ONLINE
   ========================================= */
.student-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.student-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cbt-shadow);
}

.student-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--cbt-border);
  background: #fdfbf7;
}

.student-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  position: relative;
}
.student-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cbt-green);
  border: 2px solid var(--cbt-surface);
  animation: status-pulse 2s infinite;
}

.student-info {
  flex: 1;
  min-width: 0;
}
.student-name {
  font-weight: 700;
  color: var(--cbt-heading);
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-class {
  font-size: 0.72rem;
  color: var(--cbt-muted);
  font-weight: 500;
  margin-top: 0.1rem;
}

.student-card-body {
  flex: 1;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.student-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--cbt-muted);
}
.student-meta i {
  width: 14px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cbt-primary);
  opacity: 0.7;
  flex-shrink: 0;
}
.student-meta.is-page {
  padding: 0.35rem 0.6rem;
  background: var(--cbt-primary-soft);
  border-radius: var(--cbt-radius-sm);
  color: var(--cbt-primary-deep);
  font-weight: 600;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  overflow: hidden;
}
.student-meta.is-page i {
  color: var(--cbt-primary);
  opacity: 1;
}
.student-meta.is-page span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-card-footer {
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--cbt-border);
  background: #fdfbf7;
}

.btn-force-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-sm);
  border: 1.5px solid rgba(220, 53, 69, 0.3);
  background: var(--cbt-surface);
  color: #dc3545;
  transition: all 0.2s var(--cbt-ease);
  cursor: pointer;
}
.btn-force-logout:hover:not(:disabled) {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.btn-force-logout:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* =========================================
   EMPTY STATE (khusus grid)
   ========================================= */
.online-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--cbt-muted);
}
.online-empty i {
  font-size: 3rem;
  opacity: 0.25;
  color: var(--cbt-primary);
  margin-bottom: 1rem;
  display: block;
}
.online-empty h6 {
  color: var(--cbt-heading);
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}
.online-empty p {
  font-size: 0.875rem;
  margin: 0;
}

/* =========================================
   PAGINATION (custom)
   ========================================= */
.cbt-pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.cbt-pagination .page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 0.65rem;
  border-radius: var(--cbt-radius-sm);
  border: 1.5px solid var(--cbt-border);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s var(--cbt-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cbt-pagination .page-btn:hover:not(:disabled):not(.is-active) {
  background: var(--cbt-primary-soft);
  border-color: var(--cbt-primary);
  color: var(--cbt-primary);
}
.cbt-pagination .page-btn.is-active {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
.cbt-pagination .page-btn:disabled,
.cbt-pagination .page-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cbt-pagination .page-ellipsis {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cbt-muted);
  font-weight: 600;
}

/* =========================================
   SEARCH INPUT — rapikan
   ========================================= */
.online-search-wrap {
  margin-bottom: 1rem;
}
.online-search-wrap .input-group {
  max-width: 340px;
}
.online-search-wrap .form-control {
  border-right: 0;
}
.online-search-wrap .input-group-text,
.online-search-wrap .btn {
  background: var(--cbt-surface);
  border-color: var(--cbt-border-strong);
  color: var(--cbt-muted);
}
.online-search-wrap .form-control:focus + .btn,
.online-search-wrap .form-control:focus ~ .btn {
  border-color: var(--cbt-primary);
}

/* ---------- Halaman Pengaturan ---------- */

/* =========================================
   FORM SECTION GROUPING
   ========================================= */
.form-section {
  margin-bottom: 2rem;
}
.form-section:last-of-type {
  margin-bottom: 1rem;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1.5px solid var(--cbt-border);
}
.form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.form-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin: 0;
  letter-spacing: -0.01em;
}
.form-section-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  margin: 0;
  font-weight: 500;
}

/* =========================================
   COLOR PALETTE
   ========================================= */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.color-box {
  width: 38px;
  height: 38px;
  border-radius: var(--cbt-radius-sm);
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--cbt-ease), box-shadow 0.18s var(--cbt-ease);
  border: 2px solid transparent;
}
.color-box:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.color-box.is-selected {
  border-color: var(--cbt-heading);
  box-shadow: 0 0 0 2px var(--cbt-surface), 0 0 0 4px var(--cbt-heading);
  transform: scale(1.05);
}
.color-box.is-selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Color picker (input type=color) */
.color-picker-input {
  width: 100%;
  height: 42px;
  padding: 0.25rem;
  border: 1.5px solid var(--cbt-border-strong);
  border-radius: var(--cbt-radius-sm);
  cursor: pointer;
  background: var(--cbt-surface);
  transition: border-color 0.2s var(--cbt-ease);
}
.color-picker-input:hover {
  border-color: var(--cbt-primary);
}

/* =========================================
   LOGO PREVIEW
   ========================================= */
.logo-preview-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fdfbf7;
  border: 1.5px dashed var(--cbt-border-strong);
  border-radius: var(--cbt-radius);
  margin-bottom: 0.75rem;
  min-width: 180px;
  min-height: 100px;
  transition: border-color 0.2s var(--cbt-ease);
}
.logo-preview-wrap:hover {
  border-color: var(--cbt-primary);
}
.logo-preview-wrap img {
  max-width: 150px;
  max-height: 80px;
  object-fit: contain;
}
.logo-preview-wrap .logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--cbt-muted);
  font-size: 0.78rem;
}
.logo-preview-wrap .logo-placeholder i {
  font-size: 2rem;
  opacity: 0.4;
  color: var(--cbt-primary);
}

/* File input custom */
.form-control[type="file"] {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.form-control[type="file"]::file-selector-button {
  background: var(--cbt-surface);
  border: 1.5px solid var(--cbt-border-strong);
  color: var(--cbt-text);
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--cbt-radius-sm);
  margin-right: 0.75rem;
  cursor: pointer;
  transition: all 0.2s var(--cbt-ease);
  font-size: 0.82rem;
}
.form-control[type="file"]::file-selector-button:hover {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
}

/* =========================================
   SIDE PANEL — Preview & Tips
   ========================================= */
.side-panel-card {
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.side-panel-card .side-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cbt-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.side-panel-card .side-title i {
  color: var(--cbt-primary);
  font-size: 0.85rem;
}

/* Preview tombol dengan warna terpilih */
.theme-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--cbt-radius-sm);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.25s var(--cbt-ease);
}
.theme-preview-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.75em;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  margin-left: 0.5rem;
}
.theme-preview-link {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s var(--cbt-ease);
}
.theme-preview-link:hover {
  opacity: 0.75;
}
.theme-color-code {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: #fdfbf7;
  border-radius: var(--cbt-radius-sm);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cbt-muted);
  border: 1px solid var(--cbt-border);
}

/* Tips list */
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.tips-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--cbt-text);
  line-height: 1.5;
}
.tips-list li i {
  color: var(--cbt-primary);
  font-size: 0.75rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

/* =========================================
   CARD FOOTER FORM ACTIONS
   ========================================= */
.card-footer.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.35rem;
  background: #fdfbf7;
  border-top: 1px solid var(--cbt-border);
}
.card-footer.form-actions .form-actions-left {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.card-footer.form-actions .form-actions-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* =========================================
   PROGRESS BAR (untuk modal update)
   ========================================= */
.cbt-progress {
  height: 20px;
  background: #f0ece4;
  border-radius: 999px;
  overflow: hidden;
}
.cbt-progress-bar {
  height: 100%;
  background: var(--cbt-primary);
  border-radius: 999px;
  transition: width 0.4s var(--cbt-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* =========================================
   MODAL LOG — rapikan
   ========================================= */
.modal-log .modal-body {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fdfbf7;
  color: var(--cbt-text);
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .side-panel-card {
    padding: 1rem;
  }
  .card-footer.form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .card-footer.form-actions .form-actions-left,
  .card-footer.form-actions .form-actions-right {
    width: 100%;
    justify-content: stretch;
  }
  .card-footer.form-actions .btn {
    flex: 1;
  }
}

/* ---------- Halaman Form Tambah/Edit ---------- */

/* Helper text di bawah field */
.form-helper {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--cbt-muted);
  line-height: 1.4;
}
.form-helper code {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-deep);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Kartu contoh di side panel */
.example-block {
  background: #fdfbf7;
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  line-height: 1.7;
}
.example-block .example-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.example-block .example-label {
  color: var(--cbt-muted);
  min-width: 55px;
  font-weight: 500;
}
.example-block .example-value {
  color: var(--cbt-heading);
  font-weight: 600;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.78rem;
}

/* Input dengan prefix (mis. untuk kode soal) */
.input-with-prefix {
  position: relative;
}
.input-with-prefix .input-prefix {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: #f5f1e9;
  border-right: 1px solid var(--cbt-border-strong);
  border-radius: var(--cbt-radius-sm) 0 0 var(--cbt-radius-sm);
  color: var(--cbt-muted);
  font-weight: 600;
  font-size: 0.82rem;
  pointer-events: none;
}
.input-with-prefix .form-control {
  padding-left: 4.5rem;
}

/* Readonly field — tampak beda dari input biasa */
.form-control[readonly] {
  background: #f5f1e9;
  color: var(--cbt-heading);
  font-weight: 600;
  cursor: not-allowed;
  border-color: var(--cbt-border);
}
.form-control[readonly]:focus {
  box-shadow: none;
  border-color: var(--cbt-border);
  background: #f5f1e9;
}

/* Badge status kecil di side panel */
.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.info-badge.is-aktif {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.info-badge.is-nonaktif {
  background: rgba(237, 82, 35, 0.12);
  color: var(--cbt-primary);
}
.info-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Halaman Daftar Butir Soal ---------- */

/* =========================================
   STAT-CARD TIPE SOAL (5 tipe)
   ========================================= */
.butir-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 992px) {
  .butir-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
  .butir-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.butir-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.butir-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}
.butir-stat .stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--cbt-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.butir-stat .stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}
.butir-stat .stat-desc {
  font-size: 0.68rem;
  color: var(--cbt-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}

/* Warna per tipe soal */
.butir-stat.is-pg .stat-icon-wrap {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.butir-stat.is-pgx .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}
.butir-stat.is-bs .stat-icon-wrap {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.butir-stat.is-mjd .stat-icon-wrap {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}
.butir-stat.is-uraian .stat-icon-wrap {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
}

/* ---------- Badge Poin di Daftar Butir ---------- */
.poin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-deep);
  font-weight: 800;
  font-size: 0.82rem;
  border: 1.5px solid var(--cbt-primary-soft-2);
}

/* =========================================
   PREVIEW PERTANYAAN DI TABEL
   ========================================= */
.question-preview {
  max-width: 340px;
  max-height: 66px;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--cbt-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  cursor: help;
  word-break: break-word;
}
.question-preview img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.15rem;
}
.question-preview p {
  margin: 0;
  display: inline;
}
.question-preview br {
  display: none;
}

/* =========================================
   BADGE TIPE SOAL DI TABEL
   ========================================= */
.tipe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}
.tipe-badge.is-pg {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.tipe-badge.is-pgx {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}
.tipe-badge.is-bs {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.tipe-badge.is-mjd {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-deep);
}
.tipe-badge.is-uraian {
  background: rgba(236, 72, 153, 0.12);
  color: #db2777;
}

/* =========================================
   BADGE STATUS SOAL
   ========================================= */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.is-aktif {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.status-badge.is-draft {
  background: #f0ece4;
  color: var(--cbt-muted);
}
.status-badge.is-nonaktif {
  background: rgba(220, 53, 69, 0.10);
  color: #dc3545;
}

/* =========================================
   ACTION BAR DI ATAS TABEL
   ========================================= */
.butir-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cbt-border);
}
.butir-action-bar .action-left,
.butir-action-bar .action-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Badge kode soal di page-header */
.kode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cbt-radius-pill);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary-deep);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.kode-badge i {
  color: var(--cbt-primary);
  font-size: 0.8rem;
}

/* =========================================
   MODAL IMPORT EXCEL — rapikan
   ========================================= */
.import-info-box {
  background: var(--cbt-primary-soft);
  border: 1px solid var(--cbt-primary-soft-2);
  border-radius: var(--cbt-radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: var(--cbt-primary-deep);
  line-height: 1.5;
}
.import-info-box strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--cbt-primary-deep);
}
.import-info-box a {
  color: var(--cbt-primary);
  font-weight: 600;
  text-decoration: none;
}
.import-info-box a:hover {
  text-decoration: underline;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .question-preview {
    max-width: 200px;
    -webkit-line-clamp: 2;
  }
}

/* ---------- Halaman Form Butir Soal ---------- */

/* =========================================
   IMAGE DI SUMMERNOTE — batasi ukuran
   ========================================= */
.note-editable img {
  max-width: 400px !important;
  max-height: 400px !important;
  height: auto;
  width: auto;
  border-radius: var(--cbt-radius-sm);
  margin: 0.25rem 0;
}

/* =========================================
   CARD PILIHAN (PG & PGX)
   ========================================= */
.choice-card {
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  padding: 0.9rem 1rem;
  background: var(--cbt-surface);
  transition: border-color 0.2s var(--cbt-ease), box-shadow 0.2s var(--cbt-ease);
  margin-bottom: 0.85rem;
}
.choice-card:hover {
  border-color: var(--cbt-border-strong);
}
.choice-card.is-correct {
  border-color: var(--cbt-primary);
  background: linear-gradient(135deg, var(--cbt-primary-soft), transparent 60%);
  box-shadow: 0 0 0 3px var(--cbt-primary-soft);
}
.choice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--cbt-heading);
  font-size: 0.85rem;
}
.choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.choice-card.is-correct .choice-letter {
  background: var(--cbt-primary);
  color: #fff;
}

/* =========================================
   JAWABAN BENAR TOGGLE (custom checkbox)
   ========================================= */
.correct-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--cbt-radius-pill);
  background: var(--cbt-surface);
  border: 1.5px solid var(--cbt-border-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cbt-muted);
  cursor: pointer;
  transition: all 0.18s var(--cbt-ease);
  user-select: none;
}
.correct-toggle:hover {
  border-color: var(--cbt-primary);
  color: var(--cbt-primary);
}
.correct-toggle input {
  display: none;
}
.correct-toggle::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  transition: all 0.18s var(--cbt-ease);
  flex-shrink: 0;
}
.correct-toggle input:checked ~ .correct-toggle-text,
.correct-toggle.is-checked {
  color: var(--cbt-primary);
  border-color: var(--cbt-primary);
  background: var(--cbt-primary-soft);
}
.correct-toggle input:checked::before,
.correct-toggle input:checked ~ .correct-toggle-text::before,
.correct-toggle.is-checked::before {
  border-color: var(--cbt-primary);
  background: var(--cbt-primary);
  box-shadow: inset 0 0 0 3px var(--cbt-surface);
}

/* =========================================
   PERNYATAAN BENAR/SALAH
   ========================================= */
.statement-card {
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  padding: 0.9rem 1rem;
  background: var(--cbt-surface);
  margin-bottom: 0.85rem;
  transition: border-color 0.2s var(--cbt-ease);
}
.statement-card:hover {
  border-color: var(--cbt-border-strong);
}
.statement-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.statement-num {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--cbt-heading);
  font-size: 0.85rem;
}
.statement-num .num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Toggle Benar/Salah */
.bs-toggle-group {
  display: inline-flex;
  border-radius: var(--cbt-radius-pill);
  overflow: hidden;
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
}
.bs-toggle-group input {
  display: none;
}
.bs-toggle-group label {
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cbt-muted);
  cursor: pointer;
  transition: all 0.18s var(--cbt-ease);
  margin: 0;
  line-height: 1.4;
  user-select: none;
}
.bs-toggle-group label:hover {
  color: var(--cbt-heading);
}
.bs-toggle-group input:checked + label {
  background: var(--cbt-primary);
  color: #fff;
}
.bs-toggle-group input[value="Salah"]:checked + label {
  background: #dc3545;
}
.bs-toggle-group label:first-of-type {
  border-right: 1.5px solid var(--cbt-border-strong);
}

/* =========================================
   MENJODOHKAN — 2 kolom dengan header
   ========================================= */
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.match-grid-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: #fdfbf7;
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius-sm);
  margin-bottom: 0.6rem;
}
.match-grid-header > div {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cbt-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.match-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  background: var(--cbt-surface);
  margin-bottom: 0.6rem;
  position: relative;
  transition: border-color 0.2s var(--cbt-ease);
}
.match-pair:hover {
  border-color: var(--cbt-border-strong);
}
.match-pair::before {
  content: counter(match-counter) '. ';
  counter-increment: match-counter;
  position: absolute;
  top: 0.75rem;
  left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cbt-muted);
  z-index: 1;
}
.match-pair {
  counter-reset: none;
}
.match-pair-wrap {
  counter-reset: match-counter;
}
.match-pair-wrap .match-pair {
  counter-increment: match-counter;
}
.match-pair .form-control {
  padding-left: 1.8rem;
}
.match-pair input,
.match-pair textarea {
  font-size: 0.82rem;
}
@media (max-width: 768px) {
  .match-grid-header {
    display: none;
  }
  .match-pair {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   INFO BADGE NOMOR SOAL (di form)
   ========================================= */
.form-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: #f5f1e9;
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius-sm);
  color: var(--cbt-heading);
  font-weight: 700;
  font-size: 1rem;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}
.form-readonly-badge .badge-label {
  color: var(--cbt-muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================
   TIPE SOAL SELECT — kartu-kartu pilihan
   ========================================= */
.type-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}
.type-option {
  cursor: pointer;
}
.type-option input {
  display: none;
}
.type-option .type-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  background: var(--cbt-surface);
  transition: all 0.18s var(--cbt-ease);
  text-align: center;
}
.type-option .type-card:hover {
  border-color: var(--cbt-primary-soft-2);
  transform: translateY(-2px);
}
.type-option input:checked + .type-card {
  border-color: var(--cbt-primary);
  background: var(--cbt-primary-soft);
  box-shadow: 0 0 0 3px var(--cbt-primary-soft);
}
.type-option .type-icon {
  font-size: 1.1rem;
  color: var(--cbt-primary);
}
.type-option .type-label {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cbt-heading);
}

/* ---------- Edit Butir Soal — khusus ---------- */

/* Read-only badge untuk info yang tidak bisa diubah */
.form-readonly-info {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: #f5f1e9;
  border: 1.5px solid var(--cbt-border);
  border-radius: var(--cbt-radius-sm);
  color: var(--cbt-heading);
  font-weight: 700;
  font-size: 0.9rem;
  width: 100%;
}
.form-readonly-info i {
  color: var(--cbt-primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.form-readonly-info .info-label {
  color: var(--cbt-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: auto;
}
.form-readonly-info .info-value {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
}

/* ---------- Halaman Reset Login ---------- */

/* =========================================
   FILTER BAR
   ========================================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cbt-border);
}
.filter-bar .filter-search {
  flex: 1;
  min-width: 250px;
}
.filter-bar .filter-select {
  min-width: 160px;
}
.filter-bar .filter-reset {
  flex-shrink: 0;
}

/* =========================================
   TOMBOL RESET LOGIN (pill)
   ========================================= */
.btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid rgba(255, 204, 4, 0.4);
  background: var(--cbt-surface);
  color: #b88a00;
  transition: all 0.2s var(--cbt-ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-reset:hover:not(:disabled),
.btn-reset:focus:not(:disabled) {
  background: var(--cbt-accent);
  border-color: var(--cbt-accent);
  color: var(--cbt-heading);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 204, 4, 0.35);
}
.btn-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.btn-reset i {
  font-size: 0.85em;
}

/* =========================================
   EMPTY STATE (untuk DataTables zeroRecords)
   ========================================= */
.empty-state-dt {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--cbt-muted);
}
.empty-state-dt i {
  font-size: 3rem;
  opacity: 0.25;
  color: var(--cbt-primary);
  margin-bottom: 1rem;
  display: block;
}
.empty-state-dt h6 {
  color: var(--cbt-heading);
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}
.empty-state-dt p {
  font-size: 0.875rem;
  margin: 0;
}

/* =========================================
   KOLOM TABEL RESET — proporsi
   ========================================= */
#tabelReset th:nth-child(1) { width: 50px; }      /* No */
#tabelReset th:nth-child(7) { width: 120px; }     /* Status */
#tabelReset th:nth-child(8) { width: 140px; }     /* Aksi */

#tabelReset td:nth-child(6) {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
  color: var(--cbt-muted);
}

#tabelReset td:nth-child(5) {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cbt-primary-deep);
}

/* ---------- Dashboard Siswa ---------- */

/* =========================================
   STAT-CARD SISWA (3 card)
   ========================================= */
.siswa-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 768px) {
  .siswa-stats {
    grid-template-columns: 1fr;
  }
}

.siswa-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.siswa-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}
.siswa-stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.siswa-stat.is-ujian .stat-icon-wrap {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}
.siswa-stat.is-selesai .stat-icon-wrap {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.siswa-stat.is-nilai .stat-icon-wrap {
  background: rgba(255, 204, 4, 0.20);
  color: #b88a00;
}
.siswa-stat .stat-body {
  flex: 1;
  min-width: 0;
}
.siswa-stat .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.siswa-stat .stat-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================
   SECTION HEADER (untuk grouping)
   ========================================= */
.dashboard-section {
  margin-bottom: 1.75rem;
}
.dashboard-section:last-of-type {
  margin-bottom: 0;
}
.dashboard-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1.5px solid var(--cbt-border);
}
.dashboard-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.dashboard-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =========================================
   QR READER (dalam modal)
   ========================================= */
#qr-reader {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: var(--cbt-radius);
  overflow: hidden;
}
#qr-reader video {
  border-radius: var(--cbt-radius);
}
#qr-reader__scan_region {
  border-radius: var(--cbt-radius) !important;
}
#qr-reader__dashboard_section_csr button {
  background: var(--cbt-primary) !important;
  border: none !important;
  color: #fff !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--cbt-radius-sm) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 0.5rem !important;
}

/* =========================================
   EMPTY STATE di modal QR
   ========================================= */
#qr-placeholder {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--cbt-muted);
}
#qr-placeholder i {
  font-size: 3rem;
  opacity: 0.25;
  color: var(--cbt-primary);
  margin-bottom: 1rem;
  display: block;
}
#qr-placeholder h6 {
  color: var(--cbt-heading);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
#qr-placeholder p {
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Halaman Hasil Ujian Siswa ---------- */

/* =========================================
   STAT-CARD HASIL
   ========================================= */
.hasil-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .hasil-stats {
    grid-template-columns: 1fr;
  }
}

.hasil-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--cbt-radius-lg);
  border: 1px solid var(--cbt-border);
  background: var(--cbt-surface);
  box-shadow: var(--cbt-shadow-sm);
  transition: transform 0.25s var(--cbt-ease), box-shadow 0.25s var(--cbt-ease);
}
.hasil-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--cbt-shadow);
}
.hasil-stat .stat-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--cbt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.hasil-stat.is-total .stat-icon-wrap {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}
.hasil-stat.is-rata .stat-icon-wrap {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.hasil-stat.is-tinggi .stat-icon-wrap {
  background: rgba(255, 204, 4, 0.20);
  color: #b88a00;
}
.hasil-stat .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cbt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.hasil-stat .stat-desc {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================
   INFO BANNER (nilai disembunyikan)
   ========================================= */
.info-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--cbt-radius);
  border: 1.5px solid var(--cbt-accent);
  background: linear-gradient(135deg, rgba(255, 204, 4, 0.10), transparent 70%);
  margin-bottom: 1.5rem;
  color: var(--cbt-heading);
}
.info-banner .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cbt-radius-sm);
  background: rgba(255, 204, 4, 0.25);
  color: #b88a00;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.info-banner .info-text {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.5;
}
.info-banner .info-text strong {
  color: var(--cbt-heading);
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 700;
}

/* =========================================
   TABEL HASIL — kolom styling
   ========================================= */
#tabelHasil td.nilai-col {
  font-weight: 800;
  font-size: 1rem;
  color: var(--cbt-primary-deep);
  text-align: right !important;
}

/* Override tombol aksi di dalam tabel — pill style */
#tabelHasil .btn-outline-secondary,
#tabelHasil .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  transition: all 0.2s var(--cbt-ease);
  text-decoration: none;
  white-space: nowrap;
}
#tabelHasil .btn-outline-secondary:hover:not(:disabled),
#tabelHasil .btn:hover:not(:disabled) {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
#tabelHasil .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.5);
}

/* Kolom aksi — fixed width */
#tabelHasil th:last-child,
#tabelHasil td:last-child {
  width: 140px;
  text-align: center;
}

/* ---------- Halaman Ujian Siswa (Daftar) ---------- */

/* Search di card-header */
.card-header .header-search {
  min-width: 220px;
  max-width: 300px;
}
.card-header .header-search .form-control {
  border-right: 0;
  border-radius: var(--cbt-radius-sm) 0 0 var(--cbt-radius-sm);
}
.card-header .header-search .input-group-text {
  background: var(--cbt-surface);
  border-color: var(--cbt-border-strong);
  border-left: 0;
  border-radius: 0 var(--cbt-radius-sm) var(--cbt-radius-sm) 0;
  color: var(--cbt-muted);
}

/* Grid ujian (kalau di dalam card-body) */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
@media (max-width: 576px) {
  .exam-grid {
    grid-template-columns: 1fr;
  }
}

/* Card-header responsive (search turun di mobile) */
@media (max-width: 768px) {
  .card-header .header-search {
    width: 100%;
    max-width: none;
  }
} 

/* ---------- Auth Split Layout (Login) ---------- */

/* =========================================
   LAYOUT UTAMA
   ========================================= */
.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cbt-bg);
}
@media (min-width: 992px) {
  .auth-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================
   PANEL KIRI — FORM LOGIN
   ========================================= */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  background: var(--cbt-bg);
  min-height: 100vh;
}

.auth-form-wrapper {
  width: 100%;
  max-width: 400px;
}

/* =========================================
   BRAND MINI (Logo + Nama + Tagline)
   ========================================= */
.auth-brand-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.auth-brand-mini img {
  height: 40px;
  width: auto;
}
.auth-brand-mini .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.auth-brand-mini .brand-name {
  font-weight: 700;
  color: var(--cbt-heading);
  font-size: 0.95rem;
}
.auth-brand-mini .brand-tag {
  font-size: 0.72rem;
  color: var(--cbt-muted);
  font-weight: 500;
}

/* =========================================
   CARD LOGIN — dengan aksen gradient atas
   ========================================= */
.auth-form-card {
  position: relative;
  background: var(--cbt-surface);
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-lg);
  box-shadow: var(--cbt-shadow-lg);
  padding: 2.25rem 1.75rem 2rem;
  overflow: hidden;
}

/* Aksen gradient di atas card */
.auth-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--cbt-primary) 0%,
    var(--cbt-accent) 50%,
    var(--cbt-primary) 100%
  );
  z-index: 1;
}

/* Aksen oranye subtle di dalam card (pojok kanan) */
.auth-form-card::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 82, 35, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Semua konten di atas aksen */
.auth-form-card > * {
  position: relative;
  z-index: 1;
}

.auth-form-card .auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.auth-form-card .auth-subtitle {
  color: var(--cbt-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Footer card */
.auth-form-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--cbt-muted);
}

/* Copyright */
.auth-copyright {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--cbt-muted);
}

/* =========================================
   PANEL KANAN — BRANDING (FULL BACKGROUND FOTO)
   ========================================= */
.auth-brand-panel {
  display: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  min-height: 100vh;

  /* Foto sebagai background */
  background-image: url('../images/siswaujian.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .auth-brand-panel {
    display: flex;
  }
}

/* Overlay gelap */
.auth-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 15, 10, 0.78) 0%,
    rgba(30, 20, 15, 0.70) 40%,
    rgba(20, 15, 10, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Aksen oranye lembut di overlay */
.auth-brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(237, 82, 35, 0.20), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(255, 204, 4, 0.10), transparent 60%);
  z-index: 2;
  pointer-events: none;
}

.auth-brand-content {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 3;
  color: #fff;
}

/* Icon besar (di atas judul) */
.auth-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--cbt-primary), var(--cbt-accent));
  color: #fff;
  font-size: 2.75rem;
  margin-bottom: 2.25rem;
  box-shadow:
    0 20px 50px rgba(237, 82, 35, 0.45),
    0 0 0 8px rgba(255, 255, 255, 0.08);
  position: relative;
}
.auth-brand-icon::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 40px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  animation: auth-icon-rotate 25s linear infinite;
}
@keyframes auth-icon-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Judul besar */
.auth-brand-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.auth-brand-title .title-accent {
  background: linear-gradient(135deg, var(--cbt-accent), var(--cbt-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Tagline */
.auth-brand-tagline {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.auth-brand-tagline::before,
.auth-brand-tagline::after {
  content: '"';
  color: var(--cbt-accent);
  font-weight: 700;
  font-size: 1.4rem;
}

/* Divider hias */
.auth-brand-divider {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--cbt-primary), var(--cbt-accent));
  border-radius: 3px;
  margin: 2rem auto 0;
  box-shadow: 0 4px 20px rgba(237, 82, 35, 0.5);
}

/* =========================================
   RESPONSIVE — Mobile
   ========================================= */
@media (max-width: 991.98px) {
  .auth-form-panel {
    padding: 1.5rem 1rem;
  }
  .auth-form-card {
    padding: 1.5rem 1.25rem;
  }
  .auth-form-card::after {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -40px;
  }
}

/* =========================================
   CAPTCHA ROW
   ========================================= */
.auth-captcha-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}
.auth-captcha-row img {
  border-radius: var(--cbt-radius-sm);
  height: 42px;
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s var(--cbt-ease);
}
.auth-captcha-row img:hover {
  border-color: var(--cbt-primary);
}
.auth-captcha-row .form-control {
  flex: 1;
  min-width: 0;
}

/* =========================================
   PASSWORD TOGGLE
   ========================================= */
.password-toggle-wrap {
  position: relative;
}
.password-toggle-wrap .form-control {
  padding-right: 2.75rem;
}
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--cbt-muted);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: var(--cbt-radius-sm);
  transition: all 0.15s var(--cbt-ease);
  line-height: 1;
}
.password-toggle-btn:hover {
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
}

/* =========================================
   FORM LABEL & ALERT
   ========================================= */
.auth-form-card .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cbt-heading);
  margin-bottom: 0.4rem;
}

.auth-form-card .alert-danger {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.20);
  color: #b02a37;
  border-radius: var(--cbt-radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.65rem 0.85rem;
}

/* ---------- Monitor Pelanggaran (Admin) ---------- */

/* =========================================
   BADGE PELANGGARAN DI TABEL MONITOR
   ========================================= */
.pelanggaran-badge-monitor {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--cbt-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  transition: all 0.2s var(--cbt-ease);
  white-space: nowrap;
}
.pelanggaran-badge-monitor i {
  font-size: 0.75rem;
}
.pelanggaran-badge-monitor.is-safe {
  background: rgba(90, 155, 67, 0.12);
  color: var(--cbt-green);
}
.pelanggaran-badge-monitor.is-warning {
  background: rgba(255, 204, 4, 0.25);
  color: #b88a00;
}
.pelanggaran-badge-monitor.is-orange {
  background: rgba(237, 82, 35, 0.15);
  color: var(--cbt-primary);
}
.pelanggaran-badge-monitor.is-danger {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  animation: pelanggaran-pulse 1.8s infinite;
}
@keyframes pelanggaran-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}
.pelanggaran-badge-monitor[data-id]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  filter: brightness(1.05);
}

/* =========================================
   FILTER CHIP — Tampilkan yang melanggar
   ========================================= */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--cbt-radius-pill);
  border: 1.5px solid var(--cbt-border-strong);
  background: var(--cbt-surface);
  color: var(--cbt-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--cbt-ease);
  line-height: 1;
}
.filter-chip:hover {
  border-color: var(--cbt-primary);
  color: var(--cbt-primary);
}
.filter-chip.is-active {
  background: var(--cbt-primary);
  border-color: var(--cbt-primary);
  color: #fff;
  box-shadow: 0 4px 12px var(--cbt-primary-soft-2);
}
.filter-chip i {
  font-size: 0.8rem;
}

/* =========================================
   MODAL DETAIL PELANGGARAN
   ========================================= */
.modal-pelanggaran .modal-header {
  background: linear-gradient(135deg, rgba(237, 82, 35, 0.08), transparent);
  border-bottom: 1px solid var(--cbt-border);
}
.modal-pelanggaran .modal-title {
  font-weight: 700;
  color: var(--cbt-heading);
}

/* Header info siswa */
.pelanggaran-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #fdfbf7;
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius);
  margin-bottom: 1.25rem;
}
.pelanggaran-info {
  flex: 1;
  min-width: 0;
}
.pelanggaran-nama {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin-bottom: 0.3rem;
}
.pelanggaran-meta {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--cbt-muted);
}
.pelanggaran-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pelanggaran-meta i {
  color: var(--cbt-primary);
  font-size: 0.75rem;
}

.pelanggaran-counter {
  text-align: center;
  flex-shrink: 0;
}
.pelanggaran-counter .counter-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.15rem;
}
.pelanggaran-counter .counter-num.is-warning {
  color: #b88a00;
}
.pelanggaran-counter .counter-num.is-orange {
  color: var(--cbt-primary);
}
.pelanggaran-counter .counter-num.is-danger {
  color: #dc3545;
}
.pelanggaran-counter .counter-max {
  font-size: 0.72rem;
  color: var(--cbt-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* List pelanggaran */
.pelanggaran-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.pelanggaran-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cbt-border);
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-surface);
  transition: border-color 0.2s var(--cbt-ease);
}
.pelanggaran-item:hover {
  border-color: var(--cbt-primary-soft-2);
}
.pelanggaran-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cbt-radius-sm);
  background: var(--cbt-primary-soft);
  color: var(--cbt-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.pelanggaran-body {
  flex: 1;
  min-width: 0;
}
.pelanggaran-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cbt-heading);
  margin-bottom: 0.15rem;
}
.pelanggaran-ket {
  font-size: 0.78rem;
  color: var(--cbt-muted);
  line-height: 1.4;
  word-break: break-word;
}
.pelanggaran-waktu {
  text-align: right;
  flex-shrink: 0;
}
.pelanggaran-waktu .waktu-jam {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cbt-heading);
  line-height: 1.2;
}
.pelanggaran-waktu .waktu-tgl {
  font-size: 0.68rem;
  color: var(--cbt-muted);
  margin-top: 0.15rem;
}

/* Scrollbar list */
.pelanggaran-list::-webkit-scrollbar {
  width: 6px;
}
.pelanggaran-list::-webkit-scrollbar-track {
  background: transparent;
}
.pelanggaran-list::-webkit-scrollbar-thumb {
  background: var(--cbt-border-strong);
  border-radius: 999px;
}

/* Mobile */
@media (max-width: 768px) {
  .pelanggaran-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pelanggaran-meta {
    justify-content: center;
  }
  .pelanggaran-item {
    gap: 0.6rem;
  }
  .pelanggaran-waktu {
    display: none;
  }
}

/* =========================================================
   Preview soal sebagai siswa (modal di halaman admin)
   Meniru markup & rasa visual inc/cssujian.php, discopke ke
   #modalPreviewSoal agar tidak bocor ke layout admin.
   ========================================================= */
#modalPreviewSoal .question-container {
  display: block;
  padding: 1.6rem;
  background: var(--cbt-surface, #fff);
  border: 1px solid var(--cbt-border, #e8ecf3);
  border-radius: var(--cbt-radius-lg, 16px);
  box-shadow: var(--cbt-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
  font-size: 16px;
  line-height: 1.65;
  color: var(--cbt-text, #1f2937);
}

#modalPreviewSoal .question-container .badge {
  font-size: 12px !important;
  border: 1px solid grey;
  color: grey;
  background: transparent;
}

#modalPreviewSoal .question-text {
  font-weight: 600;
  color: var(--cbt-heading, #111827);
  margin-bottom: 1.25rem;
}

#modalPreviewSoal .question-container img {
  height: auto;
  width: 100%;
  max-width: 640px;
  max-height: 320px;
  object-fit: contain;
  display: block;
  border-radius: var(--cbt-radius, 12px);
  margin: 0.5rem 0 1rem;
}

#modalPreviewSoal .option-circle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--cbt-border-strong, #dfe4ee);
  border-radius: var(--cbt-radius, 12px);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#modalPreviewSoal .option-circle:hover {
  border-color: var(--cbt-primary, #ed5223);
  background: var(--cbt-primary-soft, rgba(37, 99, 235, 0.08));
}

#modalPreviewSoal .option-circle input[type="radio"],
#modalPreviewSoal .option-circle input[type="checkbox"] {
  display: none;
}

#modalPreviewSoal .option-circle .option-letter {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cbt-border-strong, #dfe4ee);
  color: var(--cbt-muted, #6b7280);
  background: #fff;
  font-weight: 600;
  transition: all 0.2s ease;
}

#modalPreviewSoal .option-circle input[type="radio"]:checked + .option-letter,
#modalPreviewSoal .option-circle input[type="checkbox"]:checked + .option-letter {
  background-color: var(--cbt-primary, #ed5223);
  border-color: var(--cbt-primary, #ed5223);
  color: #fff;
}

#modalPreviewSoal .option-circle:has(input:checked) {
  border-color: var(--cbt-primary, #ed5223);
  background: var(--cbt-primary-soft, rgba(37, 99, 235, 0.08));
  box-shadow: 0 0 0 3px var(--cbt-primary-soft, rgba(37, 99, 235, 0.08));
}

#modalPreviewSoal .matching-table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cbt-border, #e8ecf3);
  border-radius: var(--cbt-radius, 12px);
  overflow: hidden;
}

#modalPreviewSoal .matching-table td {
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
  text-align: left;
  height: auto;
  border: none;
  border-bottom: 1px solid var(--cbt-border, #e8ecf3);
  background: #fff;
}

#modalPreviewSoal .matching-table tr:last-child td {
  border-bottom: none;
}

#modalPreviewSoal .matching-table td:first-child {
  background: #f8fafc;
  font-weight: 500;
}

#modalPreviewSoal .essay-textarea {
  width: 100%;
  min-height: 170px;
  padding: 0.85rem 1rem;
  border-radius: var(--cbt-radius, 12px);
  border: 1px solid var(--cbt-border-strong, #dfe4ee);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modalPreviewSoal .essay-textarea:focus {
  outline: none;
  border-color: var(--cbt-primary, #ed5223);
  box-shadow: 0 0 0 3px var(--cbt-primary-soft, rgba(37, 99, 235, 0.08));
}