/* ============================================================================
   UJIAN CBT — theme di atas Bootstrap 5 (persis warna & struktur file sumber)
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;600;700&display=swap');

:root{
  --bs-primary:#4e73df; --bs-primary-rgb:78,115,223;
  --bs-danger:#e74a3b; --bs-danger-rgb:231,74,59;
  --bs-success:#1cc88a; --bs-success-rgb:28,200,138;
  --bs-warning:#f6c23e; --bs-warning-rgb:246,194,62;
  --bs-info:#36b9cc; --bs-info-rgb:54,185,204;
  --bs-body-font-family:'Inter','Noto Naskh Arabic',sans-serif;
  --bs-border-radius:.5rem; --bs-border-radius-sm:.35rem; --bs-border-radius-lg:.75rem;
}
.btn-primary,.bg-primary{ --bs-btn-bg:#4e73df; --bs-btn-border-color:#4e73df; --bs-btn-hover-bg:#3f5fc7; --bs-btn-hover-border-color:#3f5fc7; }
.btn-danger{ --bs-btn-bg:#e74a3b; --bs-btn-border-color:#e74a3b; }
.btn-success{ --bs-btn-bg:#1cc88a; --bs-btn-border-color:#1cc88a; }
.text-primary{color:#4e73df !important;}

body{ font-family:'Inter','Noto Naskh Arabic',sans-serif; background-color:#f8f9fc; color:#333; }
.hidden{display:none !important;}

/* ---------- login ---------- */
.login-container{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0) 0 0/28px 28px,
    linear-gradient(135deg,#4e73df 0%,#224abe 100%);
  padding:20px; }
.login-card{ background:#fff; border-radius:16px; padding:40px; width:100%; max-width:400px; box-shadow:0 10px 30px rgba(0,0,0,.2); }

/* ---------- shell ---------- */
.wrapper{ display:flex; width:100%; align-items:stretch; min-height:100vh; }
.sidebar{ min-width:250px; max-width:250px; background:#fff; border-right:1px solid #e3e6f0; transition:all .3s; z-index:1040; height:100vh; overflow-y:auto; position:sticky; top:0; }
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px;}
.sidebar-header{ padding:20px; border-bottom:1px solid #e3e6f0; text-align:center; font-weight:700; color:#4e73df; font-size:1.2rem; position:sticky; top:0; background:#fff; z-index:10; }
.nav-item-custom{ padding:12px 20px; color:#5a5c69; display:block; text-decoration:none; font-weight:500; transition:.2s; cursor:pointer; }
.nav-item-custom:hover{ background:#f8f9fc; color:#4e73df; }
.nav-item-custom.active{ color:#4e73df; background:#eaecf4; border-right:3px solid #4e73df; }
.nav-item-custom i{ width:20px; text-align:center; margin-right:10px; }
.main-content{ width:100%; padding:20px; overflow-y:auto; }
.topbar{ background:#fff; min-height:70px; border-radius:12px; box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15); display:flex; justify-content:space-between; align-items:center; padding:10px 20px; margin-bottom:24px; flex-wrap:wrap; gap:10px; }

@media (max-width:991.98px){
  .sidebar{ position:fixed; left:-250px; height:100%; box-shadow:0 0 15px rgba(0,0,0,.1); }
  .sidebar.active{ left:0; }
  .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1030; }
  .sidebar-overlay.active{ display:block; }
}

.nav-tabs .nav-link{ color:#6c757d; font-weight:500; cursor:pointer; }
.nav-tabs .nav-link.active{ color:#4e73df; font-weight:600; }

/* ---------- ruang ujian ---------- */
.exam-room-wrapper{ background:#f8f9fc; min-height:100vh; }
.exam-header{ background:#fff; padding:15px 30px; box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; flex-wrap:wrap; gap:10px; }
.timer-badge{ font-size:1.2rem; font-weight:700; background:#e74a3b; color:#fff; padding:5px 15px; border-radius:50px; }
.question-card{ background:#fff; border-radius:12px; padding:40px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0,0,0,.05); border-left:5px solid #4e73df; min-height:400px; }
.q-image{ max-width:100%; max-height:300px; border-radius:8px; margin-top:15px; margin-bottom:15px; border:1px solid #e3e6f0; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }

.option-label{ display:flex; align-items:center; padding:12px 16px; border:1px solid #e3e6f0; border-radius:8px; margin-bottom:10px; cursor:pointer; transition:.2s; font-size:1.05rem; }
.option-label:hover{ background:#f8f9fc; }
.opt-letter{ display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:8px; background:#eaecf4; border:1px solid #e3e6f0; margin-right:15px; font-weight:bold; color:#5a5c69; transition:.2s; flex-shrink:0; }
#examRoom input[type="radio"]{ display:none; }
#examRoom input[type="radio"]:checked + .option-label{ background:#e8f0fe; border-color:#4e73df; font-weight:600; color:#4e73df; box-shadow:0 0 0 .15rem rgba(78,115,223,.15); }
#examRoom input[type="radio"]:checked + .option-label .opt-letter{ background:#4e73df; color:#fff; border-color:#4e73df; }
.answered-field{ border-color:#4e73df !important; background-color:#e8f0fe !important; color:#4e73df !important; font-weight:600 !important; box-shadow:0 0 0 .15rem rgba(78,115,223,.15) !important; }

.mj-row{ display:flex; align-items:center; margin-bottom:10px; gap:15px; }
.mj-item{ flex:1; padding:10px; background:#f8f9fc; border-radius:6px; font-weight:500; border:1px solid #e3e6f0; }
.mj-select{ flex:1; }

.placeholder-glow .placeholder{ background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.opacity-60{ opacity:.6; pointer-events:none; }
.nav-q-btn.border-primary{ border-width:3px !important; transform:scale(1.1); font-weight:bold; }
.hover-btn-primary:hover{ background-color:#e8f0fe !important; color:#4e73df !important; border-color:#4e73df !important; }

/* lockdown pelanggaran (fullscreen, di atas segalanya) */
.lockdown-overlay{ position:fixed; inset:0; background:rgba(220,53,69,.98); color:#fff; display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; backdrop-filter:blur(8px); }
.lockdown-box{ max-width:420px; text-align:center; }
.lockdown-box i{ font-size:3rem; color:#f6c23e; margin-bottom:14px; display:block; }
.lockdown-cd{ font-size:2.2rem; font-weight:700; margin:16px 0; color:#f6c23e; }

/* ---------- pencarian dengan tombol clear ---------- */
.search-box{ position:relative; }
.search-box .clear-btn{ border-top-right-radius:.375rem; border-bottom-right-radius:.375rem; }

/* ---------- Rich Text Editor (Quill), bisa di-resize ---------- */
.rte-wrap .ql-toolbar{ border:1px solid #ced4da; border-radius:.375rem .375rem 0 0; background:#f8f9fc; font-family:inherit; }
.rte-wrap .ql-container{ border:1px solid #ced4da; border-top:none; border-radius:0 0 .375rem .375rem; font-family:inherit; font-size:.95rem; background:#fff; }
.rte-wrap .ql-editor{ min-height:120px; resize:vertical; overflow-y:auto; }
.rte-wrap.compact .ql-editor{ min-height:70px; }
.rte-content{ line-height:1.6; }
.rte-content p{ margin:0 0 .6em; }
.rte-content img{ max-width:100%; border-radius:8px; }

/* ---------- upload gambar soal/logo ---------- */
.dropzone{ border:2px dashed #ced4da; border-radius:.375rem; padding:22px; text-align:center; color:#5a5c69; cursor:pointer; font-size:.85rem; transition:.2s; }
.dropzone:hover, .dropzone.dragover{ border-color:#4e73df; background:#f8f9fc; }
.image-preview{ max-height:150px; border-radius:8px; border:1px solid #e3e6f0; margin-top:8px; display:block; }

/* ---------- LMS: progress ---------- */
.progress-track{ width:100%; height:8px; background:#eaecf4; border-radius:20px; overflow:hidden; }
.progress-fill{ height:100%; background:#1cc88a; border-radius:20px; transition:width .3s ease; }

.material-card{ cursor:pointer; transition:.2s; }
.material-card:hover{ box-shadow:0 .3rem 2rem 0 rgba(58,59,69,.18) !important; transform:translateY(-2px); }

/* pengaman: tombol outline yang (tidak sengaja) digabung bg-white tetap kontras saat hover */
.btn-outline-primary.bg-white:hover{ background-color:#4e73df !important; color:#fff !important; }
.btn-outline-danger.bg-white:hover{ background-color:#e74a3b !important; color:#fff !important; }
.btn-outline-success.bg-white:hover{ background-color:#1cc88a !important; color:#fff !important; }
.btn-outline-info.bg-white:hover{ background-color:#36b9cc !important; color:#fff !important; }
.btn-outline-secondary.bg-white:hover{ background-color:#858796 !important; color:#fff !important; }

/* ---------- widget kamera pengawasan (siswa) ---------- */
.webcam-widget{
  position:fixed; left:16px; bottom:16px; z-index:1040; width:150px; background:#1a1a2e; border-radius:10px;
  overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.35); border:2px solid #1cc88a;
}
.webcam-widget video{ width:100%; height:110px; object-fit:cover; display:block; background:#000; pointer-events:none; }
.webcam-widget .webcam-label{ color:#fff; font-size:.65rem; padding:4px 8px; display:flex; align-items:center; gap:5px; cursor:move; user-select:none; touch-action:none; }
.webcam-widget.dragging{ opacity:.85; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:none; }
.webcam-widget .webcam-dot{ width:7px; height:7px; border-radius:50%; background:#e74a3b; animation:blink 1.4s infinite; flex-shrink:0; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@media (max-width:768px){ .webcam-widget{ width:90px; left:8px; bottom:8px; } .webcam-widget video{ height:66px; } .webcam-widget .webcam-label{ font-size:.58rem;padding:3px 5px; } }

/* ---------- grid pantauan kamera (admin/guru) ---------- */
.cam-card{ background:#111; border-radius:10px; overflow:hidden; cursor:pointer; position:relative; box-shadow:0 .1rem .5rem rgba(0,0,0,.15); transition:.15s; }
.cam-card:hover{ transform:translateY(-2px); box-shadow:0 .3rem 1rem rgba(0,0,0,.25); }
.cam-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#222; }
.cam-card .cam-overlay{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.85)); color:#fff; padding:20px 10px 8px; }
.cam-card .cam-overlay .name{ font-weight:700; font-size:.85rem; }
.cam-card .cam-overlay .kelas{ font-size:.7rem; opacity:.8; }
.cam-card .cam-live-dot{ position:absolute; top:8px; left:8px; width:9px; height:9px; border-radius:50%; background:#1cc88a; box-shadow:0 0 0 2px rgba(255,255,255,.6); z-index:2; }
.cam-card .cam-noimg{ width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#666; background:#1a1a1a; font-size:.78rem; text-align:center; padding:10px; }
.cam-focus-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:1085; display:flex; align-items:center; justify-content:center; padding:24px; }
.cam-focus-box{ max-width:820px; width:100%; }
.cam-focus-box img{ width:100%; border-radius:10px; background:#222; aspect-ratio:4/3; object-fit:contain; }
.cam-nav-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; opacity:.8; box-shadow:0 2px 10px rgba(0,0,0,.4); }
.cam-nav-btn:hover{ opacity:1; transform:translateY(-50%) scale(1.08); }

.pw-mono{ font-family:monospace; background:#f8f9fc; padding:2px 6px; border-radius:4px; border:1px solid #e3e6f0; font-size:.82rem; }

/* tombol Kirim Jawaban — CTA utama ruang ujian, dibuat lebih modern */
.submit-exam-btn{ border-radius:50px; font-size:1.02rem; letter-spacing:.01em; box-shadow:0 4px 14px rgba(231,74,59,.25); transition:transform .15s ease, box-shadow .15s ease; border:none; }
.submit-exam-btn:not(:disabled):hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(231,74,59,.35); }
.submit-exam-btn:disabled{ box-shadow:none; opacity:.85; }
#globalLoader.show{ display:flex !important; }
@keyframes fadeIn{ from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }

/* ---------- lapisan kompatibilitas kelas ringkas ---------- */
.vstack-sm{ display:flex; flex-direction:column; gap:.75rem; }

/* .swal2-* dikecualikan: kotak isian di dialog SweetAlert punya ukuran & margin sendiri
   (dulu ikut lebar 100% + margin sehingga menjorok keluar dialog) */
input[type=text]:not(.form-control):not(.btn):not(.swal2-input),
input[type=password]:not(.form-control):not(.swal2-input),
input[type=number]:not(.form-control):not(.swal2-input),
input[type=email]:not(.form-control):not(.swal2-input),
input[type=url]:not(.form-control):not(.swal2-input),
input[type=datetime-local]:not(.form-control):not(.swal2-input),
select:not(.form-select):not(.form-control):not(.swal2-select),
textarea:not(.form-control):not(.swal2-textarea){
  display:block; width:100%; padding:.375rem .75rem; font-size:1rem; font-weight:400; line-height:1.5;
  color:#212529; background-color:#fff; background-clip:padding-box; border:1px solid #ced4da; border-radius:.375rem;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* catatan: kotak centang/radio DIKECUALIKAN — dulu aturan ini membuat centang yang sedang fokus
   berlatar putih (tanda centang putih jadi tak terlihat) sampai pengguna menyentuh bagian lain */
input:not(.form-control):not([type=checkbox]):not([type=radio]):not(.swal2-input):focus, select:not(.form-select):not(.swal2-select):focus, textarea:not(.form-control):not(.swal2-textarea):focus{
  color:#212529; background-color:#fff; border-color:#9db3f0; outline:0; box-shadow:0 0 0 .25rem rgba(78,115,223,.25);
}

.empty-state{ text-align:center; padding:50px 20px; color:#858796; }
.empty-state i{ font-size:2rem; margin-bottom:10px; display:block; color:#d1d7e6; }
.skeleton{ background:linear-gradient(90deg,#eaecf4 25%,#f5f6fa 50%,#eaecf4 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px; height:16px; }

.muted{ color:#858796; }
.mono{ font-family:ui-monospace,'Courier New',monospace; letter-spacing:.03em; }
.login-error{ background:#fbe4e1; color:#e74a3b; border-radius:.375rem; padding:10px 12px; font-size:.85rem; }

.app-footer{ text-align:center; padding:16px 20px 8px; font-size:.75rem; color:#858796; }
.auth-footer{ text-align:center; margin-top:22px; font-size:.75rem; color:#858796; }

/* ============================================================================
   LMS — komponen tambahan (mengikuti palet & gaya CBT)
   ============================================================================ */
.clickable{ cursor:pointer; }
.lms-card{ transition:.2s; }
.lms-card.clickable:hover, .stat-tile.clickable:hover{ box-shadow:0 .3rem 2rem 0 rgba(58,59,69,.18) !important; transform:translateY(-2px); }
.lms-icon{ width:44px; height:44px; border-radius:10px; background:#eaecf4; color:#4e73df; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }

.stat-tile{ border-left:4px solid #4e73df !important; transition:.2s; }
.stat-tile-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

/* daftar centang yang bisa di-scroll (kelas/siswa target) */
.checkbox-scroll{ max-height:210px; overflow-y:auto; border:1px solid #e3e6f0; border-radius:.5rem; padding:.6rem .8rem; background:#f8f9fc; }
.checkbox-scroll .form-check{ margin-bottom:.35rem; }

/* lampiran file */
.file-badge{ display:inline-flex; align-items:center; padding:.4rem .75rem; background:#f8f9fc; border:1px solid #e3e6f0; border-radius:.5rem; font-size:.85rem; color:#4e73df; text-decoration:none; margin:0 .4rem .4rem 0; transition:.2s; max-width:100%; word-break:break-all; }
a.file-badge:hover{ background:#eaecf4; border-color:#4e73df; color:#224abe; }

/* pengumuman */
.announcement-card{ border-left:4px solid #4e73df !important; }
.announcement-card .rte-content p:last-child{ margin-bottom:0; }

/* area pengumpulan tugas siswa */
.submit-area{ border:1px solid rgba(78,115,223,.35); background:rgba(78,115,223,.06); border-radius:.75rem; padding:1.25rem; }

/* alur belajar (timeline) */
.timeline-alur{ border-left:2px solid #e3e6f0; margin-left:1rem; padding-left:1.5rem; }
.alur-item{ position:relative; margin-bottom:1rem; padding:1rem; border:1px solid #e3e6f0; border-radius:.6rem; background:#fff; }
.alur-item::before{ content:''; position:absolute; left:-1.95rem; top:1.3rem; width:13px; height:13px; border-radius:50%; background:#d1d3e2; border:2px solid #fff; box-shadow:0 0 0 2px #e3e6f0; }
.alur-item.locked{ background:#f8f9fc; opacity:.65; }
.alur-item.locked button{ pointer-events:none; }
.alur-item.active{ border-color:#4e73df; box-shadow:0 4px 12px rgba(78,115,223,.12); }
.alur-item.active::before{ background:#4e73df; box-shadow:0 0 0 2px #224abe; }
.alur-item.completed{ border-color:#1cc88a; }
.alur-item.completed::before{ background:#1cc88a; box-shadow:0 0 0 2px #17a673; }

/* buku nilai & input nilai */
.nilai-table th, .nilai-table td{ white-space:nowrap; }
.grade-input{ max-width:150px; margin-left:auto; flex-wrap:nowrap; }

/* ---------- Manajemen Pengguna ---------- */
.user-tabs .nav-link{ padding:.6rem 1rem; border:0; border-bottom:3px solid transparent !important; background:transparent; }
.user-tabs .nav-link.active{ border-bottom-color:#4e73df !important; background:transparent; }
.user-toolbar #userKelasFilter{ width:auto; min-width:170px; }
.user-toolbar .user-search{ width:260px; max-width:100%; }
.selection-bar{ display:none; background:#eef2fd; border-bottom:1px solid #d6e0fa; }
.selection-bar.show{ display:flex; }
.user-table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#858796; font-weight:600; }
.user-table td{ padding-top:.65rem; padding-bottom:.65rem; }
.user-avatar{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
.pw-cell{ font-family:ui-monospace,'Courier New',monospace; font-size:.88rem; }
@media (max-width:576px){
  .user-toolbar, .user-toolbar #userKelasFilter, .user-toolbar .user-search{ width:100%; }
}
.user-table th, .user-table td{ white-space:nowrap; }
.exam-card{ border-left:4px solid #d1d3e2 !important; }
.exam-card.exam-open{ border-left-color:#f6c23e !important; }
.announcement-card.cat-ujian{ border-left-color:#f6c23e !important; }
.announcement-card.cat-umum{ border-left-color:#858796 !important; }
.min-w-0{ min-width:0; }
/* Pengaturan: pratinjau login */
.login-preview-wrap{ background:linear-gradient(135deg,#4e73df 0%,#224abe 100%); border-radius:0 0 .5rem .5rem; }
.login-preview{ background:#fff; border-radius:14px; padding:22px 24px; max-width:300px; margin:0 auto; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.login-preview img{ max-height:56px; max-width:100%; object-fit:contain; }
.login-preview-icon{ width:52px; height:52px; border-radius:50%; background:#eaecf4; color:#4e73df; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; }
.login-preview .rte-content p{ margin-bottom:.25rem; }
.login-preview .pv-input{ height:30px; border:1px solid #e3e6f0; border-radius:8px; margin-bottom:8px; background:#f8f9fc; }
.login-preview .pv-btn{ height:32px; border-radius:8px; background:#4e73df; color:#fff; font-size:.8rem; font-weight:600; display:flex; align-items:center; justify-content:center; }
.danger-zone .list-group-item:last-child{ background:#fdf3f2; }
.exam-msg-card{ border-left:4px solid #f6c23e !important; }
.exam-msg-preview{ background:#f8f9fc; border-radius:8px; padding:8px 12px; }
.exam-msg-preview p:last-child{ margin-bottom:0; }
/* Penampil gambar (zoom) */
img.zoomable{ cursor:zoom-in; }
.img-zoom-overlay{ position:fixed; inset:0; z-index:5000; background:rgba(15,17,26,.92); display:flex; flex-direction:column; user-select:none; -webkit-user-select:none; }
.img-zoom-stage{ flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; cursor:zoom-out; }
.img-zoom-stage.zoomed{ cursor:grab; }
.img-zoom-stage img{ max-width:94vw; max-height:calc(100vh - 90px); object-fit:contain; transform-origin:center center; background:#fff; border-radius:6px; pointer-events:none; -webkit-user-drag:none; }
.img-zoom-bar{ display:flex; gap:6px; align-items:center; justify-content:center; padding:10px 12px 16px; flex-wrap:wrap; }
.img-zoom-bar button{ border:0; background:rgba(255,255,255,.14); color:#fff; border-radius:10px; min-width:44px; height:42px; padding:0 12px; font-size:1rem; }
.img-zoom-bar button:hover{ background:rgba(255,255,255,.26); }
.img-zoom-bar .img-zoom-close{ background:#e74a3b; font-weight:600; margin-left:8px; }
.img-zoom-pct{ color:#fff; min-width:54px; text-align:center; font-weight:600; font-size:.9rem; }
.q-text img{ max-width:100%; height:auto; border-radius:8px; border:1px solid #e3e6f0; }
.q-img-hint{ font-size:.75rem; color:#858796; margin-top:-8px; margin-bottom:12px; }
a.link-disabled{ color:inherit; text-decoration:underline dotted; cursor:default; }
/* Pratinjau lampiran materi */
.att-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.att-chip{ display:inline-flex; align-items:center; max-width:100%; border:1px solid #e3e6f0; background:#fff; border-radius:10px; padding:7px 12px; font-size:.85rem; color:#3a3b45; transition:.15s; }
.att-chip:hover{ border-color:#4e73df; }
.att-chip.active{ border-color:#4e73df; background:#eef2fd; box-shadow:0 0 0 2px rgba(78,115,223,.15); }
.att-preview{ border:1px solid #e3e6f0; border-radius:12px; overflow:hidden; background:#f8f9fc; }
.att-preview:empty{ display:none; }
.att-preview-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-bottom:1px solid #e3e6f0; font-size:.85rem; font-weight:600; }
.att-preview-media{ display:flex; justify-content:center; padding:12px; }
.att-preview-media img{ max-width:100%; max-height:70vh; border-radius:8px; background:#fff; }
.att-preview-video{ display:block; width:100%; max-height:70vh; background:#000; }
.att-preview-frame{ display:block; width:100%; height:72vh; border:0; background:#fff; }
.pdf-pages{ max-height:75vh; overflow:auto; padding:8px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.pdf-page{ position:relative; min-height:200px; width:100%; flex:none; display:flex; justify-content:center; align-items:flex-start; }
.pdf-page canvas{ box-shadow:0 1px 6px rgba(0,0,0,.15); background:#fff; max-width:100%; flex:none; }
.pdf-page-num{ position:absolute; right:12px; bottom:8px; font-size:.7rem; background:rgba(0,0,0,.55); color:#fff; padding:1px 7px; border-radius:8px; }
.rte-content img{ max-width:100%; height:auto; }
.img-zoom-note{ color:#f8f9fc; background:rgba(231,74,59,.18); border-top:1px solid rgba(255,255,255,.12); text-align:center; font-size:.82rem; padding:8px 14px 14px; line-height:1.5; }
.img-zoom-note .fa-triangle-exclamation{ color:#f6c23e; }
/* Link materi (YouTube / Google Drive) */
.link-card{ border:1px solid #e3e6f0; border-radius:12px; overflow:hidden; background:#fff; }
.link-card-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #e3e6f0; font-size:.85rem; font-weight:600; min-width:0; }
.link-card-head > span{ min-width:0; }
.link-card-frame{ display:block; width:100%; height:72vh; border:0; background:#f8f9fc; }
.link-card-frame.is-folder{ height:55vh; }
/* Opsi jawaban teks / gambar — form soal */
.opt-field{ display:flex; align-items:center; gap:6px; min-width:0; position:relative; }
.opt-field .opt-text-input{ flex:1; min-width:0; }
.opt-field .opt-img-btn{ flex-shrink:0; width:40px; padding:0; height:38px; }
.opt-field .opt-img-btn:disabled{ opacity:.35; }
.opt-img-chip{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; border:1px solid #d1d3e2; border-radius:8px; background:#fff; padding:4px 6px; }
.opt-img-chip img{ height:56px; max-width:120px; object-fit:contain; border-radius:6px; background:#f8f9fc; }
.opt-field.uploading::after{ content:'Mengunggah...'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.85); border-radius:8px; font-size:.8rem; color:#4e73df; font-weight:600; }
/* Opsi gambar — tampilan */
.opt-img-wrap{ position:relative; display:inline-block; vertical-align:middle; line-height:0; }
.opt-img{ max-width:min(100%, 320px); max-height:180px; border-radius:8px; border:1px solid #e3e6f0; background:#fff; object-fit:contain; }
.opt-img-wrap.sm .opt-img{ max-height:56px; max-width:110px; }
.opt-zoom{ position:absolute; right:6px; bottom:6px; border:0; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.opt-zoom:hover{ background:#4e73df; }
.option-label.has-img{ align-items:center; }
.mj-item .opt-img{ max-height:110px; max-width:200px; }
.mj-choices{ background:#f8f9fc; border:1px solid #e3e6f0; border-radius:12px; padding:12px; margin-bottom:14px; }
.mj-choice-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.mj-choice{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e3e6f0; border-radius:10px; padding:6px 10px; }
.mj-choice .opt-img{ max-height:100px; max-width:160px; cursor:zoom-in; }
/* daftar soal: ringkasan opsi */
.q-opts-preview{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.q-opt-prev{ display:flex; align-items:center; gap:6px; border:1px solid #e3e6f0; border-radius:8px; padding:4px 8px; font-size:.82rem; background:#fff; }
.q-opt-prev.is-key{ border-color:#1cc88a; background:#e9f9f2; }
.opt-letter-sm{ font-weight:700; color:#4e73df; font-size:.75rem; }

/* Teks Arab: huruf Arab otomatis memakai Noto Naskh Arabic (Inter tidak punya huruf Arab).
   Paragraf berarah kanan-ke-kiri (tombol RTL di editor / dir="rtl" dari Word) */
.rte-content .ql-direction-rtl, .ql-editor .ql-direction-rtl, [dir="rtl"]{ direction:rtl; }
.rte-content .ql-direction-rtl, .ql-editor .ql-direction-rtl{ font-size:1.25em; line-height:2.1; }
.rte-content .ql-align-right{ text-align:right; } .rte-content .ql-align-center{ text-align:center; } .rte-content .ql-align-justify{ text-align:justify; }
.opt-text[dir="auto"]{ unicode-bidi:plaintext; }
.ql-editor{ font-family:'Inter','Noto Naskh Arabic',sans-serif; }
.is-arabic{ font-size:1.25em; line-height:2.1; }
span.opt-text.is-arabic{ font-size:1.3em; line-height:1.8; }
.ql-editor .ql-direction-rtl:not(.ql-align-center):not(.ql-align-justify):not(.ql-align-left),
.rte-content .ql-direction-rtl:not(.ql-align-center):not(.ql-align-justify):not(.ql-align-left){ text-align:right; }

/* ===== Ramah HP ===== */
.min-w-0{ min-width:0; }
.page-title{ font-size:1rem; }
.menu-dot{ position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#e74a3b; border:2px solid #fff; }
.nav-item-custom{ position:relative; }
.nav-badge{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:.7rem; }
.badge-new{ font-size:.65rem; vertical-align:middle; }
.save-status{ white-space:nowrap; font-size:.78rem; }
.user-tabs{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.user-tabs .nav-link{ white-space:nowrap; }
/* tombol navigasi soal: 3 tombol sejajar */
.q-nav-bar{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.q-nav-bar #btnNextQ{ justify-self:end; } .q-nav-bar #btnPrevQ{ justify-self:start; }
@media (max-width:575.98px){
  .q-nav-text{ display:none; }
  .q-nav-bar .btn{ padding:.45rem .8rem; }
  .stat-tile .card-body{ flex-direction:column; align-items:flex-start !important; gap:.5rem !important; padding:.8rem; }
  .stat-tile .stat-tile-icon{ width:38px; height:38px; font-size:1.05rem; }
  .stat-tile .text-truncate{ white-space:normal; }
  .stat-tile .fs-4{ font-size:1.3rem !important; }
}
/* tabel daftar -> kartu bertumpuk di HP */
@media (max-width:767.98px){
  table.table-stack thead{ display:none; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td{ display:block; width:100%; }
  table.table-stack tr{ border:1px solid #e3e6f0; border-radius:12px; margin:0 0 10px; padding:6px 12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04); }
  table.table-stack td{ border:0 !important; padding:5px 0 !important; text-align:right !important; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:30px; }
  table.table-stack td::before{ content:attr(data-label); font-weight:600; font-size:.78rem; color:#858796; text-align:left; flex-shrink:0; max-width:45%; }
  table.table-stack td[data-label=""]::before{ display:none; }
  table.table-stack td[data-label=""]{ justify-content:flex-end; }
  table.table-stack td:first-child{ text-align:left !important; font-size:1rem; border-bottom:1px solid #f1f2f6 !important; padding-bottom:7px !important; margin-bottom:3px; }
  table.table-stack td:first-child::before{ display:none; }
  table.table-stack td:first-child{ justify-content:flex-start; }
  table.table-stack td[colspan]{ justify-content:center; }
  table.table-stack td[colspan]::before{ display:none; }
  .table-responsive:has(> table.table-stack){ background:transparent !important; box-shadow:none !important; border:0 !important; overflow:visible; }
  table.table-stack{ background:transparent; }
  table.table-stack > tbody > tr > td{ background:transparent !important; box-shadow:none !important; }
}
@media (max-width:767.98px){
  table.table-stack tr{ position:relative; }
  table.table-stack td.td-check, table.table-stack td:first-child:has(> input.form-check-input:only-child){
    position:absolute; top:10px; right:12px; width:auto; padding:0 !important; margin:0; min-height:0; border:0 !important; display:block;
  }
  table.table-stack td:first-child:has(> input.form-check-input:only-child) + td{
    text-align:left !important; justify-content:flex-start; font-size:1rem; padding-right:34px !important;
    border-bottom:1px solid #f1f2f6 !important; padding-bottom:7px !important; margin-bottom:3px;
  }
  table.table-stack td:first-child:has(> input.form-check-input:only-child) + td::before{ display:none; }
}
/* Impor Google Form */
.gf-card.gf-off{ opacity:.55; }
.gf-card.gf-invalid{ border-color:#e74a3b !important; box-shadow:0 0 0 .15rem rgba(231,74,59,.2) !important; }
.gf-toolbar{ position:sticky; top:-1rem; z-index:3; }
.gf-opt-row .opt-field{ min-width:0; }

/* ===== Layar sentuh ===== */
/* kotak centang/radio: tanpa kilatan abu-abu saat diketuk */
.form-check-input{ -webkit-tap-highlight-color:transparent; }
@media (pointer:coarse){
  .form-check-input{ width:1.3em; height:1.3em; margin-top:.1em; }
  .form-check{ min-height:1.9rem; padding-top:.15rem; }
  .form-check-label{ padding-left:.15rem; }
  .btn-sm{ min-height:34px; }
}
/* efek hover (kartu terangkat, dll.) hanya untuk mouse — di layar sentuh tidak "nyangkut" */
@media (hover:none){
  .lms-card.clickable:hover, .stat-tile.clickable:hover, .material-card:hover, .cam-card:hover,
  .submit-exam-btn:not(:disabled):hover, .cam-nav-btn:hover{ transform:none !important; }
  .nav-item-custom:hover{ background:transparent; color:#5a5c69; }
  .nav-item-custom.active, .nav-item-custom.active:hover{ background:#eaecf4; color:#4e73df; }
  .option-label:hover{ background:inherit; }
}
.alur-title{ overflow-wrap:anywhere; }
@media (max-width:575.98px){ .alur-actions{ width:100%; } .timeline-alur{ margin-left:.5rem; padding-left:1.1rem; } .alur-item::before{ left:-1.55rem; } }
.form-check-input:checked{ background-color:#4e73df; border-color:#4e73df; }
.form-check-input:focus{ border-color:#9db3f0; box-shadow:0 0 0 .2rem rgba(78,115,223,.25); }

/* dialog SweetAlert: isian selalu muat di dalam kotak dialog (HP s.d. layar lebar) */
.swal2-popup .swal2-input, .swal2-popup .swal2-textarea, .swal2-popup .swal2-select{ box-sizing:border-box; width:auto; max-width:calc(100% - 2em); margin-left:1em; margin-right:1em; font-size:1rem; }
.swal2-popup .swal2-input{ display:flex; width:calc(100% - 2em); }
.swal2-popup .swal2-input:focus, .swal2-popup .swal2-textarea:focus{ border-color:#9db3f0; box-shadow:0 0 0 .2rem rgba(78,115,223,.25); }
.swal2-popup{ max-width:calc(100vw - 24px); }

/* dialog konfirmasi selalu di atas layar blokir ujian & penampil gambar */
.swal2-container{ z-index:10050 !important; }
.swal2-confirm:disabled{ opacity:.45; cursor:not-allowed; }

/* contoh tiap tipe soal pada jendela impor */
.ex-pre{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font-size:.8rem; background:#f8f9fc; border:1px solid #e3e6f0; border-radius:8px; padding:8px 10px; max-height:220px; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.ex-box .ex-tab{ font-size:.78rem; padding:.2rem .55rem; }
.pw-mono{ overflow-wrap:anywhere; word-break:break-word; }

/* footer: kredit pengembang bertautan */
#loginFooter p, #appFooter p, .app-footer-html p{ margin:0; }
#loginFooter a, #appFooter a, .app-footer-html a{ color:inherit; font-weight:600; text-decoration:none; transition:color .15s; }
#loginFooter a:hover, #appFooter a:hover, .app-footer-html a:hover{ color:#4e73df; text-decoration:none; }

/* Buku Nilai: tabel digeser ke samping; kolom nama menempel tapi ramping (nama panjang turun
   ke baris berikutnya) supaya tidak menutupi kolom nilai */
.nilai-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.nilai-scroll::-webkit-scrollbar{ height:8px; }
.nilai-scroll::-webkit-scrollbar-thumb{ background:#c5cbe0; border-radius:8px; }
table.nilai-sticky th:first-child, table.nilai-sticky td:first-child{
  position:sticky; left:0; z-index:2; background:#fff; box-shadow:3px 0 5px -2px rgba(0,0,0,.12);
  white-space:normal; overflow-wrap:anywhere; width:220px; min-width:150px; max-width:220px; text-align:left; line-height:1.25;
}
table.nilai-sticky.table-striped > tbody > tr:nth-of-type(odd) > td:first-child{ background:#f7f8fb; }
table.nilai-sticky thead th:first-child{ background:#f8f9fc; z-index:3; }
@media (max-width:767.98px){
  table.nilai-sticky th:first-child, table.nilai-sticky td:first-child{ width:118px; min-width:118px; max-width:118px; font-size:.82rem; }
}
.nilai-scroll-hint{ display:none; }
@media (max-width:991.98px){ .nilai-scroll-hint{ display:block; } }