/* Global Resets & Typography Scale Down */
      html { font-size: 14px; box-sizing: border-box; }
      *, *::before, *::after { box-sizing: inherit; }
      
      html, body {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #fcfdfe;
        color: #1e293b;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      /* ═══ ARABIC & QURANIC TYPOGRAPHY ENHANCEMENT ═══ */
      [dir="rtl"], .font-arabic, .arabic-text, .ayat-box {
        font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', 'Scheherazade New', 'Arabic Typesetting', serif !important;
        direction: rtl !important;
        text-align: right !important;
        font-size: 1.45rem;
        line-height: 2.3 !important;
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased;
      }
      .ayat-box {
        background: #f8fafc;
        border: 1.5px solid #cbd5e1;
        border-radius: 1rem;
        padding: 1rem 1.25rem;
        margin: 0.75rem 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        display: block;
      }

      #root {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        overflow-x: hidden;
      }

      /* Layout Fix for Admin Main Scroll Container */
      .force-scroll-container, #main-scroll-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        max-height: 100% !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
      }

      /* Scrollbar Aesthetics */
      ::-webkit-scrollbar { width: 5px; height: 5px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
      ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
      
      /* Animation Utilities */
      .animate-in {
        animation-duration: 0.4s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
      }
      @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
      .fade-up { animation-name: fade-up; }

      .no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

      /* Avoid content being hidden behind fixed navbar */
      main { position: relative; max-width: 100%; }

      /* ═══ WORD-LIKE IMAGE FORMATTING FOR QUESTIONS & EXAM OPTIONS ═══ */
      .rendered-question-text img,
      .prose img,
      [class*="rendered"] img,
      .question-card img,
      table img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
        border-radius: 8px;
        display: inline-block;
        vertical-align: middle;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: zoom-in;
      }
      .rendered-question-text img:hover,
      .question-card img:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      }
      /* Compact styling for option images (A, B, C, D, E) */
      .rendered-option img,
      div[class*="text-slate-"] img,
      div[class*="text-emerald-"] img,
      div[class*="text-blue-"] img,
      div[class*="font-semibold"] img {
        max-width: 100%;
        max-height: 140px;
        height: auto;
        border-radius: 6px;
        display: inline-block;
        vertical-align: middle;
        margin: 2px 0;
      }
    
/* Utility additions for gradients and button visibility */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))!important}
.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))!important}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))!important}
.from-blue-950{--tw-gradient-from:#172554 var(--tw-gradient-from-position);--tw-gradient-to:rgb(23 37 84 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-indigo-800{--tw-gradient-to:#3730a3 var(--tw-gradient-to-position)}
.to-indigo-900{--tw-gradient-to:#312e81 var(--tw-gradient-to-position)}
.to-indigo-950{--tw-gradient-to:#1e1b4b var(--tw-gradient-to-position)}
.via-indigo-950{--tw-gradient-to:rgb(30 27 75 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e1b4b var(--tw-gradient-via-position),var(--tw-gradient-to)}

/* ═══ RESPONSIVE ENHANCEMENTS FOR ADMIN & TABLES (ZERO REGRESSION) ═══ */

/*
 * ROOT CAUSE FIX (from bundle analysis line 2385):
 * Container filter pills mapel punya class "overflow-hidden" yang memotong pills.
 * Selector di bawah menarget container tersebut untuk menggantinya ke overflow-x: auto
 * agar pills bisa di-scroll secara horizontal alih-alih terpotong.
 *
 * class bundle: "bg-white p-2.5 sm:p-3 rounded-2xl border border-slate-200 shadow-2xs
 *                flex items-center gap-2 overflow-hidden"
 */

/* 1. Fix container filter pills mapel — ubah overflow-hidden → visible/auto agar pills tidak terpotong */
div[class*="rounded-2xl"][class*="overflow-hidden"]:has(div[class*="overflow-x-auto"]) {
  overflow: visible !important;
}
/* Pastikan inner scroll container pills tetap bisa scroll horizontal */
div[class*="rounded-2xl"] > div[class*="overflow-x-auto"][class*="custom-scrollbar"] {
  overflow-x: auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 2. Toolbar Search+Sesi — flex wrap agar tidak meluber keluar layar */
div[class*="rounded-2xl"][class*="flex"][class*="items-stretch"],
div[class*="rounded-2xl"][class*="flex"][class*="items-center"][class*="justify-between"] {
  flex-wrap: wrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Search input: tidak boleh punya min-width yang terlalu besar */
div[class*="relative"][class*="flex-1"][class*="min-w-"] {
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

/* 3. Tabel Bank Soal — pastikan ada horizontal scroll */
div[class*="overflow-x-auto"][class*="custom-scrollbar"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important;
}
/* Fix: outer wrapper tabel sudah rounded-2xl overflow-hidden → jangan block scroll */
div[class*="rounded-2xl"][class*="overflow-hidden"]:has(div[class*="overflow-x-auto"][class*="custom-scrollbar"]) {
  overflow: visible !important;
  border-radius: 16px;
}

/* 4. Umum: semua div flex harus wrap dan tidak meluber */
#root div[class*="flex"][class*="gap-2"],
#root div[class*="flex"][class*="gap-3"] {
  flex-wrap: wrap;
}
#root div[class*="shrink-0"] {
  flex-shrink: 0;
  min-width: 0;
}

/* 5. Input search global fix */
input[placeholder*="Cari"], input[placeholder*="cari"], input[type="search"],
input[placeholder*="kata kunci"] {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* 6. Buttons whitespace-nowrap dalam pills — biarkan pill tetap nowrap tapi container wraps */
div[class*="overflow-x-auto"] button[class*="whitespace-nowrap"] {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  #__live_session_pill__ {
    display: none !important;
  }
  #__auto_sync_badge__ {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
  }
  #__auto_sync_badge__ div:last-child {
    font-size: 9.5px !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #__auto_sync_badge__ {
    bottom: 16px !important;
    right: 16px !important;
    max-width: 420px !important;
  }
}

/* ═══ TOPBAR & LOGOUT BUTTON VISIBILITY & CLICKABILITY GUARD (ZERO REGRESSION) ═══ */
nav[class*="sticky"] {
  z-index: 1000 !important;
  overflow: visible !important;
}
nav[class*="sticky"] button {
  position: relative;
  z-index: 1001 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ═══ MODAL EDITOR FULL-SCREEN ISOLATION & ZERO BACKGROUND BLEED-THROUGH ═══ */
body.modal-editor-open {
  overflow: hidden !important;
}
body.modal-editor-open main,
body.modal-editor-open #main-scroll-container,
body.modal-editor-open #root {
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}
body.modal-editor-open nav,
body.modal-editor-open nav[class*="sticky"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal-editor-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(2, 6, 23, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 100000 !important;
}

.zoom-preview-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(2, 6, 23, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 3000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.zoom-preview-modal-box {
  background-color: #ffffff !important;
  width: 100% !important;
  max-width: 1024px !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  z-index: 3000001 !important;
  position: relative !important;
}

/* ═══ RICH TEXT & QUESTION PREVIEW TYPOGRAPHY (UI/UX BEST PRACTICE) ═══ */
/* Override Tailwind Preflight reset: ol,ul,menu{list-style:none;margin:0;padding:0} */
.rendered-question-text,
.prose-question,
.rendered-preview-content {
  line-height: 1.75 !important;
  word-break: break-word !important;
  color: #1e293b !important;
}
.rendered-question-text ul,
.prose-question ul,
.rendered-preview-content ul,
div[dangerouslysetinnerhtml] ul,
div.rendered-question-text ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin: 0.5rem 0 0.5rem 1.8rem !important;
  padding-left: 0.25rem !important;
  display: block !important;
}
.rendered-question-text ol,
.prose-question ol,
.rendered-preview-content ol,
div[dangerouslysetinnerhtml] ol,
div.rendered-question-text ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  margin: 0.5rem 0 0.5rem 1.8rem !important;
  padding-left: 0.25rem !important;
  display: block !important;
}
.rendered-question-text li,
.prose-question li,
.rendered-preview-content li,
div[dangerouslysetinnerhtml] li,
div.rendered-question-text li {
  margin-bottom: 0.35rem !important;
  display: list-item !important;
  line-height: 1.6 !important;
  list-style: inherit !important;
}
.rendered-question-text p,
.prose-question p,
.rendered-preview-content p {
  margin-bottom: 0.65rem !important;
  display: block !important;
}
.rendered-question-text p:last-child,
.prose-question p:last-child,
.rendered-preview-content p:last-child {
  margin-bottom: 0 !important;
}
.rendered-question-text table,
.prose-question table,
.rendered-preview-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0.75rem 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: table !important;
}
.rendered-question-text th, .rendered-question-text td,
.prose-question th, .prose-question td,
.rendered-preview-content th, .rendered-preview-content td {
  border: 1px solid #cbd5e1 !important;
  padding: 6px 12px !important;
  text-align: left !important;
}
.rendered-question-text th,
.prose-question th,
.rendered-preview-content th {
  background-color: #f1f5f9 !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
/* Force br to create line break, not collapsed */
.rendered-question-text br,
.prose-question br,
.rendered-preview-content br {
  display: block !important;
  content: "" !important;
  margin-top: 0.25rem !important;
}

/* ═══ QUILL 2.0 VISUAL RICH TEXT EDITOR MODERN STYLING ═══ */
.ql-toolbar.ql-snow {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
}
.ql-container.ql-snow {
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
  background: #ffffff !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
}
.ql-editor {
  min-height: 140px;
  line-height: 1.7 !important;
  padding: 14px 16px !important;
  color: #1e293b !important;
  font-family: inherit !important;
}
.ql-editor.ql-blank::before {
  color: #94a3b8 !important;
  font-style: italic !important;
  font-size: 13px !important;
  left: 16px !important;
}
.ql-editor p {
  margin-bottom: 0.65rem !important;
}
.ql-editor ul, .ql-editor ol {
  padding-left: 1.5rem !important;
  margin-bottom: 0.65rem !important;
}
.ql-editor li {
  margin-bottom: 0.25rem !important;
}
.ql-snow .ql-stroke {
  stroke: #475569 !important;
}
.ql-snow .ql-fill {
  fill: #475569 !important;
}
.ql-snow .ql-picker {
  color: #475569 !important;
}
.ql-snow .ql-picker-options {
  background-color: #ffffff !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
}

/* ═══ OPTION & STATEMENT COMPACT QUILL RICH TEXT EDITOR ═══ */
.option-quill-wrapper {
  position: relative;
  width: 100%;
}
.option-quill-wrapper .ql-toolbar.ql-snow {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
  padding: 4px 8px !important;
  gap: 2px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.option-quill-wrapper .ql-toolbar.ql-snow .ql-formats {
  margin-right: 6px !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.option-quill-wrapper .ql-toolbar.ql-snow button {
  width: 24px !important;
  height: 24px !important;
  padding: 2px !important;
  border-radius: 4px !important;
}
.option-quill-wrapper .ql-toolbar.ql-snow button:hover {
  background: #e2e8f0 !important;
}
.option-quill-wrapper .ql-toolbar.ql-snow .ql-picker {
  height: 24px !important;
  font-size: 11px !important;
}
.option-quill-wrapper .ql-container.ql-snow {
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
}
.option-quill-wrapper .ql-editor {
  min-height: 56px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  font-size: 12.5px !important;
}
.option-quill-wrapper .ql-editor.ql-blank::before {
  font-size: 11.5px !important;
  left: 12px !important;
  color: #94a3b8 !important;
}
.option-quill-wrapper .ql-editor p {
  margin-bottom: 0.25rem !important;
}
.option-quill-wrapper .ql-editor img {
  max-height: 140px;
  width: auto;
  border-radius: 6px;
  margin: 4px 0;
  display: inline-block;
}

/* ═══ ALIANSI SEKOLAH TERLAYANI LIST & TOGGLE STYLING ═══ */
ul.schools-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 900px) {
  ul.schools-list.collapsed > li:nth-child(n+4):not(.toggle-schools-btn-wrap) {
    display: none !important;
  }
}

.toggle-schools-btn-wrap button:hover {
  background: rgba(212, 168, 67, 0.1) !important;
  border-color: rgba(212, 168, 67, 0.5) !important;
  transform: translateY(-1px);
}
.toggle-schools-btn-wrap button:active {
  transform: translateY(0);
}

/* ═══ QUESTION PREVIEW & ANSWER KEY INDICATOR UTILITIES (ZERO REGRESSION) ═══ */
.bg-emerald-700 {
  background-color: #047857 !important;
}
.hover\:bg-emerald-700:hover {
  background-color: #047857 !important;
}
.bg-emerald-800 {
  background-color: #065f46 !important;
}
.bg-emerald-50\/80 {
  background-color: rgba(236, 253, 245, 0.8) !important;
}
.border-emerald-400 {
  border-color: #34d399 !important;
}
.border-emerald-700 {
  border-color: #047857 !important;
}
.border-emerald-800 {
  border-color: #065f46 !important;
}
.bg-emerald-200 {
  background-color: #a7f3d0 !important;
}
.text-emerald-950 {
  color: #022c22 !important;
}
.shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}