/* =============================================
   TalentNotion – Exam Suite | style.css
   ============================================= */

:root {
    --sidebar-w: 260px;
    --sidebar-bg: #1a1f5e;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active-bg: rgba(255,255,255,0.15);
    --sidebar-text: rgba(255,255,255,0.75);
    --sidebar-text-active: #ffffff;
    --accent-orange: #f97316;
    --accent-blue: #1a1f5e;
    --accent-purple: #7c3aed;
    --accent-soft-purple: #c9b2f0;
    --topbar-h: 64px;
    --bg-main: #f4f6fb;
    --card-bg: #ffffff;
    --theme-bg: #f8f4ff;
    --border-color: #e5e7ef;
    --text-primary: #1a1f5e;
    --text-secondary: #6b7280;
    --font: 'Plus Jakarta Sans', sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 18px rgba(0,0,0,0.09);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
    --transition: 0.22s ease;
}

[data-theme="dark"] {
  --bg-main: #0f1123;
  --card-bg: #1c2040;
  --border-color: #2a2f5a;
  --text-primary: #e8eaf6;
  --text-secondary: #9ea3c0;
  --sidebar-bg: #0b0e2a;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; font-family: var(--font); background: var(--bg-main); color: var(--text-primary); transition: background var(--transition), color var(--transition); }

/* =============================================
   LAYOUT
   ============================================= */
.app-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* =============================================
   SIDEBAR OVERLAY (mobile)
   ============================================= */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 200;
  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ---- LOGO (white card style like the image) ---- */
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logo-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0 0 50% 50%;
    padding: 10px 14px 10px 10px;
    flex: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    flex-direction: column;
    text-align: center;
    height: 160px;
}

    .logo-icon-wrap {
  width: 90px;
  height: 100px;
  flex-shrink: 0;
}

.logo-icon-wrap img { width: 100%; height: 100%; object-fit:contain;}

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 1rem;
  color: #1a1f5e;
  letter-spacing: 0.01em;
}

.brand-name strong { font-weight: 800; }

.brand-sub {
  font-size: 0.68rem;
  color: var(--accent-orange);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Close button (only visible on mobile) */
.sidebar-close-btn {
  display: none;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  margin-left: 10px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.sidebar-close-btn:hover { background: rgba(255,255,255,0.2); }

/* NAV */
.sidebar-nav { padding: 0 12px; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  position: relative;
}

.sidebar-nav .nav-link i:first-child { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-nav .nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-active); }

.sidebar-nav .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent-orange);
  border-radius: 0 4px 4px 0;
}

.chevron { font-size: 0.7rem !important; transition: transform var(--transition); width: auto !important; }
.nav-link[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.sub-nav { list-style: none; padding: 4px 0 4px 44px; margin: 0; }
.sub-nav li a { display: block; padding: 6px 10px; font-size: 0.82rem; color: rgba(255,255,255,0.5); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); }
.sub-nav li a:hover, .sub-nav li a.active { color: #fff; background: rgba(255,255,255,0.07); }

.sidebar-footer { padding: 12px 12px 0; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 8px; }

.logout-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.55);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.logout-link:hover { background: rgba(239,68,68,0.15); color: #f87171; }

/* =============================================
   MAIN AREA
   ============================================= */
.main-area { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg-main); transition: background var(--transition); }

/* =============================================
   TOPBAR
   ============================================= */
.topbar {
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background var(--transition), border-color var(--transition);
}

.breadcrumb-text { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }

/* ---- BURGER BUTTON ---- */
.burger-btn {
  display: none; /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}

.burger-btn:hover { background: var(--bg-main); }

.burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Burger → X animation */
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.icon-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.icon-btn:hover { background: var(--bg-main); color: var(--text-primary); }

.badge-dot {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 0.6rem; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

.avatar-wrap { position: relative; cursor: pointer; }
.avatar { position:relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--accent-orange); object-fit: cover; display: block; transition: transform var(--transition); }
.avatar:hover { transform: scale(1.05); }
.online-dot { position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px; background: #22c55e; border-radius: 50%; border: 2px solid var(--card-bg); }

/* =============================================
   PAGE CONTENT
   ============================================= */
.page-content { padding: 28px 32px; background:var(--card-bg); }
.page-title { font-size: 1.45rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }

.btn-setting { background: var(--accent-blue); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 9px 18px; border: none; transition: opacity var(--transition), transform var(--transition); }
.btn-setting:hover { opacity: 0.88; color: #fff; transform: translateY(-1px); }

.btn-preview { background: var(--accent-soft-purple); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 9px 18px; border: none; transition: opacity var(--transition), transform var(--transition); }
.btn-preview:hover { opacity: 0.88; color: #fff; transform: translateY(-1px); }

.btn-publish { background: var(--accent-orange); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 9px 18px; border: none; transition: opacity var(--transition), transform var(--transition); }
.btn-publish:hover { opacity: 0.88; color: #fff; transform: translateY(-1px); }

/* =============================================
   BUILDER PANEL
   ============================================= */
.builder-panel { background: var(--theme-bg); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: background var(--transition), border-color var(--transition); }

.btn-add-question { background: var(--accent-orange); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 9px 18px; border: none; transition: all var(--transition); }
.btn-add-question:hover { background: #ea6c04; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.35); }

.btn-add-section { background: var(--accent-blue); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 9px 18px; border: none; transition: all var(--transition); }
.btn-add-section:hover { opacity: 0.88; color: #fff; transform: translateY(-1px); }

.drag-hint { font-size: 0.8rem; color: var(--accent-orange); font-weight: 500; }

.questions-group {
    background: #F3F1FF; border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 20px 8px;
    transition: border-color var(--transition);

}
.questions-group:hover { border-color: #c7cadb; }

.group-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.group-subtitle { font-size: 0.8rem; color: var(--accent-purple); font-weight: 500; }
.group-header { margin-bottom: 16px; }

.question-item { background:var(--card-bg); display: flex; align-items: center; justify-content: space-between; padding: 14px 10px; border-bottom: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: background var(--transition); cursor: grab; animation: fadeSlideIn 0.28s ease both; }
.question-item:last-child { border-bottom: none; }
.question-item:hover { background: rgba(124,58,237,0.04); }
.question-item.dragging { opacity: 0.5; cursor: grabbing; }
.question-item.drag-over { border: 2px dashed var(--accent-purple); }

.q-left { display: flex; align-items: center; gap: 12px; }
.drag-handle { color: #c4c9e0; font-size: 1.1rem; cursor: grab; transition: color var(--transition); }
.question-item:hover .drag-handle { color: var(--accent-purple); }

.q-type-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.q-type-badge.mcq { background: #dbeafe; color: #1d4ed8; }
.q-type-badge.tf  { background: #dcfce7; color: #15803d; }
.q-type-badge.sa  { background: #fef9c3; color: #854d0e; }
.q-type-badge.num { background: #fce7f3; color: #9d174d; }

.q-name { font-size: 0.9rem; font-weight: 600; color: var(--accent-blue); }
[data-theme="dark"] .q-name { color: #93c5fd; }

.q-right { display: flex; align-items: center; gap: 12px; }
.q-pts { font-weight: 700; font-size: 0.875rem; color: var(--text-secondary); min-width: 48px; text-align: right; }

.q-action { background: none; border: none; padding: 5px 7px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: background var(--transition), color var(--transition); }
.q-action.edit { color: var(--accent-purple); }
.q-action.edit:hover { background: rgba(124,58,237,0.1); }
.q-action.delete { color: #ef4444; }
.q-action.delete:hover { background: rgba(239,68,68,0.1); }

.score-bar { padding: 12px 8px; }
.score-label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.score-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border-color); padding: 4px 14px; border-radius: 20px; }

/* =============================================
   EXISTING MODALS (Add Question / Section)
   ============================================= */
.modal-styled { border-radius: var(--radius-md); border: none; background: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-styled .modal-header {  color: #fff; padding: 18px 24px; border-bottom: none; }
.modal-styled .modal-title { font-weight: 700; font-size: 1rem; }
.modal-styled .modal-body { padding: 24px; background: var(--card-bg); }
.modal-styled .modal-footer { background: var(--card-bg); border-top: 1px solid var(--border-color); padding: 16px 24px; }
.modal-styled .form-label { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; }
.modal-styled .form-control, .modal-styled .form-select { border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: var(--font); font-size: 0.875rem; background: var(--bg-main); color: var(--text-primary); transition: border-color var(--transition), box-shadow var(--transition); }
.modal-styled .form-control:focus, .modal-styled .form-select:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); outline: none; }

/* =============================================
   EXAM SETTING MODAL
   ============================================= */
.setting-modal-content {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 90vh;
}

.setting-modal-header {
    background: #f5eaff;
    border-bottom: 1px solid var(--border-color);
    padding: 18px 28px;
}

[data-theme="dark"] .setting-modal-header { background: var(--card-bg); }

.setting-modal-header .modal-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent-blue);
}

[data-theme="dark"] .setting-modal-header .modal-title { color: var(--text-primary); }

.setting-modal-body {
    background: #f5eaff;
    overflow-y: auto;
}

[data-theme="dark"] .setting-modal-body { background: var(--bg-main); }

/* Two-column layout */
.setting-col {
  padding: 28px 28px 16px;
}

.setting-col-left {
  border-right: none;
}

/* Vertical divider between columns */
.setting-vdivider {
  width: 1px;
  background: var(--border-color);
  flex-shrink: 0;
  margin: 16px 0;
}

/* Section blocks */
.setting-section {
  /*background: #fff;*/
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  /*border: 1px solid var(--border-color);*/
  /*box-shadow: var(--shadow-sm);*/
}

[data-theme="dark"] .setting-section { background: var(--card-bg); border-color: var(--border-color); }

.setting-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a60c5;
  margin: 0 0 4px;
}

.setting-section-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.setting-label {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.setting-input {
  font-family: var(--font);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}

[data-theme="dark"] .setting-input { background: var(--bg-main); color: var(--text-primary); border-color: var(--border-color); }

.setting-input:focus {
  border-color: #1a60c5;
  box-shadow: 0 0 0 3px rgba(26,96,197,0.12);
  outline: none;
  background: #fff;
}

/* Radio & Checkbox */
.setting-check .form-check-input,
.setting-radio .form-check-input {
  width: 16px; height: 16px;
  border: 2px solid #c4c9e0;
  cursor: pointer;
  margin-top: 2px;
}

.setting-check .form-check-input:checked { background-color: #1a60c5; border-color: #1a60c5; }
.setting-radio .form-check-input:checked { background-color: #1a60c5; border-color: #1a60c5; }
.setting-check .form-check-input:focus,
.setting-radio .form-check-input:focus { box-shadow: 0 0 0 3px rgba(26,96,197,0.15); outline: none; }

.setting-check .form-check-label,
.setting-radio .form-check-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  margin-left: 2px;
}

.setting-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Grade Scale */
.grade-scale-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    padding: 18px;
    border-radius: 10px;
}

.grade-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

[data-theme="dark"] .grade-row { background: var(--bg-main); }

.grade-letter {
  font-weight: 800;
  font-size: 1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.grade-a { color: #15803d; }
.grade-b { color: #1d4ed8; }
.grade-c { color: #7c3aed; }
.grade-d { color: #b45309; }
.grade-f { color: #dc2626; }

.grade-input {
  flex: 1;
  font-size: 0.875rem;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary);
  transition: border-color var(--transition);
  font-family: var(--font);
}

[data-theme="dark"] .grade-input { background: var(--card-bg); }

.grade-input:focus { border-color: #1a60c5; outline: none; box-shadow: 0 0 0 2px rgba(26,96,197,0.1); }

.grade-del-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: background var(--transition);
  flex-shrink: 0;
}

.grade-del-btn:hover { background: rgba(239,68,68,0.1); }

.btn-add-grade {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  border: none;
  width: 100%;
  transition: opacity var(--transition);
}

.btn-add-grade:hover { opacity: 0.88; color: #fff; }

/* Modal Footer */
.setting-modal-footer {
    background: #f5eaff;
    border-top: 1px solid var(--border-color);
    padding: 16px 28px;
    gap: 12px;
}

[data-theme="dark"] .setting-modal-footer { background: var(--card-bg); }

.btn-setting-save {
  background: #4b5563;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 40px;
  border-radius: var(--radius-sm);
  border: none;
  transition: background var(--transition);
  min-width: 120px;
}

.btn-setting-save:hover { background: #374151; color: #fff; }

.btn-setting-cancel {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition: background var(--transition);
}

.btn-setting-cancel:hover { background: var(--bg-main); color: var(--text-primary); }

/* =============================================
   TOAST
   ============================================= */
.tn-toast {
  position: fixed; bottom: 28px; right: 28px;
  background: #1a1f5e; color: #fff;
  padding: 12px 20px; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.tn-toast.show { opacity: 1; transform: translateY(0); }
.tn-toast.success { background: #166534; }
.tn-toast.warning { background: #92400e; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.builder-panel { animation: fadeSlideIn 0.35s ease both; }


/*---------------------------create exam modal----------------------------------------*/

.exam-modal .modal-dialog , .question-modal .modal-dialog {
    max-width: 1200px;
}

/* ==========================================
       MODAL WRAPPER
       ========================================== */
.create-exam-modal {
    background: #f0f1f8;
    border-radius: 24px;
    padding: 36px 36px 40px;
    max-width: 1200px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(26, 31, 94, 0.14);
}

/* Modal title */
.modal-heading {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1a1f5e;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.modal-subheading {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 400;
    margin: 0 0 30px;
}

/* ==========================================
       CARDS ROW
       ========================================== */
.cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Individual card */
.create-card {
    background: #ffffff;
    border: 1.5px solid #e8eaf2;
    border-radius: 16px;
    padding: 36px 28px 34px;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
    position: relative;
    overflow: hidden;
}

    /* Subtle top accent line */
    .create-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        transition: background 0.22s ease;
        border-radius: 16px 16px 0 0;
    }

    .create-card:hover::before {
        background: #1a60c5;
    }

    .create-card.active::before {
        background: #1a60c5;
    }

    /* Hover / Active states */
    .create-card:hover {
        border-color: #1a60c5;
        box-shadow: 0 8px 28px rgba(26, 96, 197, 0.14);
        transform: translateY(-3px);
    }

    .create-card.active {
        border-color: #1a60c5;
        background: #f0f6ff;
        box-shadow: 0 8px 28px rgba(26, 96, 197, 0.16);
    }

/* Card icon */
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #1a60c5;
    margin-bottom: 18px;
    transition: background 0.22s ease, color 0.22s ease;
}

.create-card:hover .card-icon,
.create-card.active .card-icon {
    background: #1a60c5;
    color: #ffffff;
}

/* Card title */
.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a60c5;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* Card description */
.card-desc {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================
       MODAL PANEL
       ========================================== */
.add-question-modal {
    background: #f0f1f8;
    border-radius: 24px;
    padding: 38px 38px 44px;
    max-width: 1200px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(26, 31, 94, 0.13);
}

.modal-heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1f5e;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.modal-subheading {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 400;
    margin: 0 0 30px;
}

/* ==========================================
       CARDS GRID
       ========================================== */
.cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* ==========================================
       CARD
       ========================================== */
.question-card {
    background: #ffffff;
    border: 1.5px solid #e4e6f0;
    border-radius: 16px;
    padding: 38px 28px 36px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

    /* Top accent bar */
    .question-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        border-radius: 16px 16px 0 0;
        transition: background 0.22s ease;
    }

    .question-card:hover::before,
    .question-card.active::before {
        background: #1a60c5;
    }

    .question-card:hover {
        border-color: #1a60c5;
        box-shadow: 0 8px 28px rgba(26, 96, 197, 0.13);
        transform: translateY(-3px);
    }

    .question-card.active {
        border-color: #1a60c5;
        background: #f0f6ff;
        box-shadow: 0 8px 28px rgba(26, 96, 197, 0.15);
    }

/* Icon badge */
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #1a60c5;
    margin-bottom: 20px;
    transition: background 0.22s ease, color 0.22s ease;
}

.question-card:hover .card-icon,
.question-card.active .card-icon {
    background: #1a60c5;
    color: #fff;
}

/* Card title */
.card-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #1a60c5;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* Card description */
.card-desc {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
}

/*add question modal*/
.aq-modal {
    background: #eceef8;
    border-radius: 20px;
    width: 100%;
    max-width: 1060px;
    box-shadow: 0 24px 70px rgba(26, 31, 94, 0.15);
    overflow: hidden;
}

/* ---- Header ---- */
.aq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 20px;
    background: #eceef8;
    border-bottom: 1px solid #dde0f0;
}

    .aq-header h2 {
        font-size: 1.45rem;
        font-weight: 800;
        color: #1a1f5e;
        letter-spacing: -0.01em;
        margin: 0;
    }

.aq-close-btn {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

    .aq-close-btn:hover {
        background: #e0e3f5;
        color: #1a1f5e;
    }

/* ---- Body two-col ---- */
.aq-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.aq-left {
    padding: 28px 28px 28px 32px;
    border-right: 1px solid #dde0f0;
    overflow-y: auto;
    max-height: 78vh;
}

.aq-right {
    padding: 28px 32px 28px 28px;
    background: #e4e6f4;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 78vh;
}

/* ---- Footer ---- */
.aq-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid #dde0f0;
    background: #eceef8;
}



/* =============================================
       INPUTS  (same as setting modal)
       ============================================= */
.setting-input {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    border-radius: 10px;
    border: 1.5px solid #e0e3f0;
    background: #f9fafc;
    color: #374151;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .setting-input:focus {
        border-color: #1a60c5;
        box-shadow: 0 0 0 3px rgba(26, 96, 197, 0.12);
        outline: none;
        background: #fff;
    }

    .setting-input.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

/* Input with icon buttons inside */
.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .setting-input {
        padding-right: 90px;
    }

.input-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

    .input-icons button {
        background: none;
        border: none;
        padding: 3px 4px;
        border-radius: 5px;
        color: #9ca3af;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.18s, background 0.18s;
    }

        .input-icons button:hover {
            color: #1a60c5;
            background: #eef3ff;
        }

/* =============================================
       SECTION CARDS  (white blocks like setting modal)
       ============================================= */
.setting-section {
  padding:0;
}

.setting-section-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a60c5;
    margin: 0 0 4px;
}

.setting-section-desc {
    font-size: 0.78rem;
    color: #9ca3af;
    margin: 0 0 14px;
}

/* =============================================
       ANSWER ROWS
       ============================================= */
.answer-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 10px;
}

    .answer-hint .green {
        color: #22c55e;
        font-weight: 600;
    }

.correct-badge {
    display: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

    .correct-badge.show {
        display: block;
    }

.answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafc;
    border: 1.5px solid #e0e3f0;
    border-radius: 10px;
    padding: 8px 10px;
    transition: border-color 0.18s, background 0.18s;
}

    .answer-row:focus-within {
        border-color: #1a60c5;
    }

    .answer-row.is-correct, .correct {
        border-color: #22c55e;
        background: #f0fdf4;
    }

.answer-radio {
    width: 16px;
    height: 16px;
    accent-color: #22c55e;
    flex-shrink: 0;
    cursor: pointer;
}

.answer-text {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    color: #374151;
    background: transparent;
}

.answer-actions button {
    background: none;
    border: none;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 0.9rem;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
    display: flex;
    align-items: center;
}

    .answer-actions button:hover {
        color: #1a60c5;
        background: #eef3ff;
    }

.answer-actions .del-btn {
    color: #f87171;
}

    .answer-actions .del-btn:hover {
        color: #dc2626;
        background: #fef2f2;
    }

/* =============================================
       ADD CHOICE BUTTON
       ============================================= */
.btn-add-choice {
    background: #1a1f5e;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 18px;
    transition: opacity 0.18s, transform 0.18s;
}

    .btn-add-choice:hover {
        opacity: 0.88;
        color: #fff;
        transform: translateY(-1px);
    }

/* =============================================
       EXPLANATION TOGGLE
       ============================================= */
.setting-check .form-check-input {
    width: 16px;
    height: 16px;
    border: 2px solid #c4c9e0;
    cursor: pointer;
    margin-top: 2px;
}

    .setting-check .form-check-input:checked {
        background-color: #1a60c5;
        border-color: #1a60c5;
    }

    .setting-check .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(26,96,197,.15);
        outline: none;
    }

.setting-check .form-check-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin-left: 4px;
}

/* Collapsible model-answer section */
.model-answer-section {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

    .model-answer-section.open {
        max-height: 300px;
        opacity: 1;
    }

.model-answer-inner {
    /*background: #f4f5ff;*/
    /*border: 1.5px solid #d4d9f5;*/
   /* border-radius: 12px;
    padding: 16px;*/
    margin-top: 10px;
}

/* Radio options (same style as setting modal) */
.setting-radio .form-check-input {
    width: 15px;
    height: 15px;
    border: 2px solid #c4c9e0;
    cursor: pointer;
    margin-top: 2px;
}

    .setting-radio .form-check-input:checked {
        background-color: #1a60c5;
        border-color: #1a60c5;
    }

    .setting-radio .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(26,96,197,.15);
        outline: none;
    }

.setting-radio .form-check-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin-left: 4px;
}

/* =============================================
       VALIDATION ERROR
       ============================================= */
.field-error {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 500;
    display: none;
    margin-top: 4px;
}

    .field-error.show {
        display: block;
    }

/* =============================================
       PREVIEW PANEL
       ============================================= */
.preview-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1f5e;
    margin: 0;
}

.preview-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid #e0e3f0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.preview-question {
    font-size: 0.925rem;
    font-weight: 700;
    color: #1a1f5e;
    margin-bottom: 16px;
}

.preview-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 10px;
}

.p-radio {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #9ca3af;
    flex-shrink: 0;
}

.preview-choice.correct .p-radio {
    border-color: #22c55e;
    background: #22c55e;
}

.preview-note {
    font-size: 0.73rem;
    color: #9ca3af;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #e0e3f0;
}

/* Quick tips */


    .quick-tips-card h6 {
        font-size: 0.75rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 10px;
    }

    .quick-tips-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .quick-tips-card ul li {
            font-size: 0.8rem;
            color: #6b7280;
            padding-left: 14px;
            position: relative;
        }

            .quick-tips-card ul li::before {
                content: '•';
                position: absolute;
                left: 0;
                color: #c4c9e0;
            }
/* Preview choice row — uses CHECKBOX square */


.p-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid #9ca3af;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
}

/* Checked state in preview */
.preview-choice.correct .p-checkbox {
    border-color: #1a60c5;
    background: #1a60c5;
}

    .preview-choice.correct .p-checkbox::after {
        content: '';
        width: 8px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translateY(-1px);
    }




/* =============================================
       RESPONSIVE
       ============================================= */
@media (max-width: 767px) {
    .aq-body {
        grid-template-columns: 1fr;
    }

    .aq-left {
        border-right: none;
        border-bottom: 1px solid #dde0f0;
        max-height: none;
        padding: 20px 16px;
    }

    .aq-right {
        max-height: none;
        padding: 20px 16px;
    }

    .aq-header {
        padding: 18px 16px 14px;
    }

    .aq-footer {
        padding: 14px 16px;
    }
}
/* ==========================================
       RESPONSIVE
       ========================================== */
@media (max-width: 700px) {
    .cards-row {
        grid-template-columns: 1fr;
    }

    .add-question-modal {
        padding: 24px 18px 30px;
    }

    .modal-heading {
        font-size: 1.3rem;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
       RESPONSIVE
       ========================================== */
@media (max-width: 700px) {
    .cards-row {
        grid-template-columns: 1fr;
    }

    .create-exam-modal {
        padding: 24px 18px 28px;
        margin: 16px;
    }

    .modal-heading {
        font-size: 1.25rem;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


/*-----------------------my edits according to figma design-------------------------*/
a.nav-link.dropdown-toggle.hide-arrow:after {
    appearance: none;
    display: none;
}
.question-list {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.form-check {
    
    align-items: center;
    display: flex;
    gap: 6px;
}
/* =============================================
   RESPONSIVE — 766px breakpoint
   ============================================= */
@media (max-width: 766px) {
    /* Show burger button */
    .burger-btn { display: flex; }

  /* Sidebar off-canvas */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Show close button inside sidebar */
  .sidebar-close-btn { display: flex; }

  /* Main area takes full width */
  .main-area { width: 100%; }

  /* Topbar adjustments */
  .topbar { padding: 0 16px; }

  /* Page content */
  .page-content { padding: 16px; background:var(--card-bg);}

  /* Page title row */
  .page-title { font-size: 1.15rem; }

  /* Hide text labels on header buttons, keep icons */
  .btn-setting span, .btn-preview span, .btn-publish span { display: none; }
  .btn-setting, .btn-preview, .btn-publish { padding: 9px 12px; }
  .btn-setting .bi, .btn-preview .bi, .btn-publish .bi { margin: 0 !important; }

  /* Hide drag hint text */
  .drag-hint { display: none; }

  /* Exam setting modal — stack columns vertically */
  .setting-col { padding: 16px; }
  .setting-vdivider { display: none !important; }
  .setting-col-left { border-right: none; border-bottom: 1px solid var(--border-color); }

  /* Grade rows */
  .grade-input { min-width: 0; }

  /* Score bar */
  .score-bar { padding: 8px; }
}

@media (max-width: 480px) {
  .topbar-actions .icon-btn:first-child { display: none; } /* hide translate on very small */
  .q-pts { min-width: 36px; font-size: 0.8rem; }
  .grade-row { flex-wrap: wrap; }
}

/*datatable css*/
/* =============================================
        CONTENT GRID: Datatable LEFT + Form RIGHT
        ============================================= */
.content-grid {
/*    display: grid;
*/    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

/* =============================================
        DATATABLE CARD
        ============================================= */
.dt-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: fadeSlideIn 0.3s ease both;
}

/* Toolbar */
.dt-toolbar {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dt-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Search box */
.dt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .dt-search-wrap i {
        position: absolute;
        left: 10px;
        color: var(--text-secondary);
        font-size: 0.9rem;
        pointer-events: none;
    }

.dt-search {
    font-family: var(--font);
    font-size: 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 7px 12px 7px 32px;
    background: var(--bg-main);
    color: var(--text-primary);
    width: 200px;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

    .dt-search:focus {
        border-color: #1a60c5;
        box-shadow: 0 0 0 3px rgba(26,96,197,0.1);
    }

/* Filter dropdown */
/* =============================================
   dt-filter Components — DtSingleSelect & DtMultiSelect
   Add to your site.css or wwwroot/css/app.css
   ============================================= */

/* Container */
.dt-filter {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

/* Trigger button */
.dt-filter-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #111827;
    min-height: 36px;
    flex-wrap: wrap;
    user-select: none;
    transition: border-color .15s, box-shadow .15s;
}

    .dt-filter-trigger:hover {
        border-color: #9ca3af;
        background: #f9fafb;
    }

    .dt-filter-trigger.open {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    }

/* Placeholder */
.dt-filter-placeholder {
    color: #9ca3af;
    font-size: 13px;
    flex: 1;
}

/* Arrow */
.dt-filter-arrow {
    margin-left: auto;
    color: #9ca3af;
    font-size: 11px;
    flex-shrink: 0;
    transition: transform .15s;
}

.dt-filter-trigger.open .dt-filter-arrow {
    transform: rotate(180deg);
}

/* Chip (selected item badge) */
.dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 7px 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.dt-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    color: #1d4ed8;
    font-size: 10px;
    line-height: 1;
    border: none;
    background: transparent;
    padding: 0;
    transition: background .1s;
}

    .dt-chip-x:hover {
        background: rgba(29,78,216,.15);
    }

/* Dropdown panel */
.dt-filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 1000;
    overflow: hidden;
    animation: dtDropIn .12s ease;
}

@keyframes dtDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* الحاوية الأساسية */
.dt-filter {
    position: relative;
    min-width: 180px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* خط أفضل */
}

/* زر الزناد (Trigger) */
.dt-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    gap: 10px;
}

    .dt-filter-trigger:hover {
        border-color: #6366f1;
    }

    .dt-filter-trigger.open {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

/* توسيط النص المختار */
.dt-filter-value, .dt-filter-placeholder {
    flex-grow: 1;
    text-align: center; /* توسيط الكتابة */
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.dt-filter-placeholder {
    color: #9ca3af;
}

/* زر الإغلاق الصغير (X) */
.dt-filter-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

    .dt-filter-x:hover {
        background: #e5e7eb;
        color: #ef4444; /* يتحول للأحمر عند الوقوف عليه */
    }

/* أيقونة السهم الجانبي */
.dt-filter-arrow {
    font-size: 12px;
    color: #9ca3af;
    transition: transform 0.2s;
}

.open .dt-filter-arrow {
    transform: rotate(180deg);
}

/* القائمة المنسدلة (Dropdown) */
.dt-filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* حقل البحث داخل الدروب داون */
.dt-filter-search {
    padding: 10px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dt-filter-search input {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 13px;
        outline: none;
        text-align: right; /* للكتابة بالعربي */
    }

/* العناصر داخل القائمة */
.dt-filter-item {
    padding: 10px 15px;
    font-size: 13px;
    cursor: pointer;
    text-align: center; /* توسيط الخيارات */
    transition: background 0.1s;
    color: #4b5563;
}

    .dt-filter-item:hover {
        background: #f3f4f6;
    }

    .dt-filter-item.selected {
        background: #eff6ff;
        color: #2563eb;
        font-weight: 600;
    }

/* حاوية الـ Chips داخل الزناد */
.dt-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center; /* توسيط البطاقات */
    flex-grow: 1;
}

/* شكل البطاقة المختارة (Chip) */
.dt-filter-chip {
    display: inline-flex;
    align-items: center;
    background: #eff6ff; /* لون أزرق فاتح */
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #dbeafe;
}

/* زر إزالة البطاقة */
.dt-filter-chip-x {
    background: none;
    border: none;
    margin-right: 5px; /* مسافة بسيطة بالعربي */
    color: #3b82f6;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0;
}

    .dt-filter-chip-x:hover {
        color: #ef4444;
    }

/* تعديل الـ Checkbox داخل القائمة */
.dt-filter-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #fff;
    transition: all 0.2s;
}

.dt-filter-item.selected .dt-filter-checkbox {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* فاصل عمودي بسيط قبل أيقونة السهم */
.dt-filter-sep {
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 8px;
}


/* Action buttons */
.btn-dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-dt-export {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

    .btn-dt-export:hover {
        background: #15803d;
        color: #fff;
        border-color: #15803d;
    }

.btn-dt-import {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

    .btn-dt-import:hover {
        background: #1d4ed8;
        color: #fff;
        border-color: #1d4ed8;
    }

.btn-dt-arrange {
    background: #faf5ff;
    color: #7c3aed;
    border-color: #e9d5ff;
}

    .btn-dt-arrange:hover {
        background: #7c3aed;
        color: #fff;
        border-color: #7c3aed;
    }

.btn-dt-add {
    background: var(--accent-orange);
    color: #fff;
    border-color: var(--accent-orange);
}

    .btn-dt-add:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* ---- TABLE ---- */
.dt-table-wrap {
    overflow-x: auto;
}

.dt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

    .dt-table thead th {
        background: #f8f9fe;
        color: var(--text-secondary);
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }

[data-theme="dark"] .dt-table thead th {
    background: #1a1f5e22;
}

.dt-table thead th:hover {
    color: var(--text-primary);
}

.dt-table thead th .sort-icon {
    opacity: 0.4;
    margin-left: 4px;
    font-size: 0.65rem;
}

.dt-table thead th.sorted .sort-icon {
    opacity: 1;
    color: #1a60c5;
}

/* Separated rows */
.dt-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition);
}

    .dt-table tbody tr:last-child {
        border-bottom: none;
    }

    .dt-table tbody tr:hover {
        background: #f8f9ff;
    }

[data-theme="dark"] .dt-table tbody tr:hover {
    background: rgba(26,96,197,0.06);
}

.dt-table tbody td {
    padding: 13px 16px;
    color: var(--text-primary);
    vertical-align: middle;
}

/* Row checkbox */
.dt-check {
    width: 16px;
    height: 16px;
    accent-color: #1a60c5;
    cursor: pointer;
}

/* Type badge */
.type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
}

    .type-badge.mcq {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .type-badge.tf {
        background: #dcfce7;
        color: #15803d;
    }

    .type-badge.sa {
        background: #fef9c3;
        color: #854d0e;
    }

    .type-badge.num {
        background: #fce7f3;
        color: #9d174d;
    }

    .type-badge.mr {
        background: #ede9fe;
        color: #6d28d9;
    }

    .type-badge.essay {
        background: #fff7ed;
        color: #c2410c;
    }

/* Difficulty badge */
.diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

    .diff-badge.easy {
        background: #f0fdf4;
        color: #16a34a;
    }

    .diff-badge.medium {
        background: #fffbeb;
        color: #d97706;
    }

    .diff-badge.hard {
        background: #fef2f2;
        color: #dc2626;
    }

/* Status dot */
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

    .status-dot.active {
        background: #22c55e;
    }

    .status-dot.draft {
        background: #f59e0b;
    }

    .status-dot.archived {
        background: #9ca3af;
    }

/* Row actions */
.row-actions {
    display: flex;
    gap: 4px;
}

.row-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
}

    .row-action-btn:hover {
        border-color: #1a60c5;
        color: #1a60c5;
        background: #eff6ff;
    }

    .row-action-btn.del:hover {
        border-color: #ef4444;
        color: #ef4444;
        background: #fef2f2;
    }

/* ---- Pagination ---- */
.dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.dt-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dt-pagination {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pg-btn {
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
}

    .pg-btn:hover, .pg-btn.active {
        background: #1a60c5;
        color: #fff;
        border-color: #1a60c5;
    }

    .pg-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Per-page select */
.per-page-select {
    font-family: var(--font);
    font-size: 0.8rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 20px 4px 8px;
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
}

/* Bulk actions bar (shown when rows selected) */
.bulk-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 0.85rem;
    color: #1d4ed8;
    font-weight: 600;
    flex-wrap: wrap;
}

    .bulk-bar.show {
        display: flex;
    }

    .bulk-bar button {
        background: none;
        border: 1px solid #93c5fd;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #1d4ed8;
        cursor: pointer;
        font-family: var(--font);
        transition: background var(--transition);
    }

        .bulk-bar button:hover {
            background: #bfdbfe;
        }

    .bulk-bar .bulk-del {
        color: #dc2626;
        border-color: #fca5a5;
    }

        .bulk-bar .bulk-del:hover {
            background: #fee2e2;
        }

/* Empty state */
.dt-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

    .dt-empty i {
        font-size: 2.5rem;
        display: block;
        margin-bottom: 12px;
        opacity: 0.35;
    }

    .dt-empty p {
        font-size: 0.875rem;
        margin: 0;
    }

/* =============================================
        FORM CARD (right column)
        ============================================= */
.form-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-h) + 28px);
    animation: fadeSlideIn 0.35s ease both;
}

.form-card-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.form-card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #eff6ff;
    color: #1d4ed8;
}

.form-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Field label */
.f-label {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-bottom: 5px;
}

    .f-label .req {
        color: #ef4444;
        margin-left: 2px;
    }

    .f-label .opt {
        color: var(--text-secondary);
        font-weight: 400;
        font-size: 0.76rem;
    }

/* Inputs */
.f-input, .f-select, .f-textarea {
    font-family: var(--font);
    font-size: 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    width: 100%;
    background: #f9fafc;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

[data-theme="dark"] .f-input, [data-theme="dark"] .f-select, [data-theme="dark"] .f-textarea {
    background: #0f1123;
    border-color: var(--border-color);
}

.f-input:focus, .f-select:focus, .f-textarea:focus {
    border-color: #1a60c5;
    box-shadow: 0 0 0 3px rgba(26,96,197,0.12);
    background: #fff;
}

.f-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

.f-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}

.f-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #f9fafc;
    padding-right: 32px;
}

/* Field error */
.f-error {
    font-size: 0.74rem;
    color: #ef4444;
    font-weight: 500;
    display: none;
    margin-top: 3px;
}

    .f-error.show {
        display: block;
    }

/* Divider */
.f-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* Section mini-title */
.f-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}

/* Checkbox & Radio rows */
.f-check-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.f-check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background: #f9fafc;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

    .f-check-row:hover {
        border-color: #1a60c5;
        background: #eff6ff;
    }

    .f-check-row input[type="checkbox"], .f-check-row input[type="radio"] {
        width: 15px;
        height: 15px;
        margin-top: 1px;
        flex-shrink: 0;
        accent-color: #1a60c5;
        cursor: pointer;
    }

    .f-check-row label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        line-height: 1.4;
    }

        .f-check-row label small {
            display: block;
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 400;
            margin-top: 1px;
        }

/* Radio inline row */
.f-radio-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.f-radio-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: #f9fafc;
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
}

    .f-radio-pill input[type="radio"] {
        accent-color: #1a60c5;
        width: 14px;
        height: 14px;
        cursor: pointer;
    }

    .f-radio-pill:has(input:checked) {
        border-color: #1a60c5;
        background: #eff6ff;
        color: #1a60c5;
        font-weight: 600;
    }

/* Form footer */
.form-card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

.btn-form-save {
    flex: 1;
    padding: 10px;
    background: var(--accent-orange);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

    .btn-form-save:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(249,115,22,0.3);
    }

.btn-form-cancel {
    flex: 1;
    padding: 10px;
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

    .btn-form-cancel:hover {
        border-color: #1a60c5;
        color: #1a60c5;
        background: #eff6ff;
    }

/* =============================================
        TOAST
        ============================================= */
.tn-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #1a1f5e;
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

    .tn-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    .tn-toast.success {
        background: #166534;
    }

    .tn-toast.warning {
        background: #92400e;
    }

    .tn-toast.error {
        background: #991b1b;
    }

/* =============================================
        ANIMATION
        ============================================= */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
        ARRANGE DROPDOWN (custom)
        ============================================= */
.arrange-dropdown {
    position: relative;
}

.arrange-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

    .arrange-menu.open {
        display: flex;
    }

.arrange-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition);
    border: none;
    background: none;
    text-align: left;
}

    .arrange-menu-item:hover {
        background: #f0f6ff;
        color: #1a60c5;
    }

    .arrange-menu-item i {
        width: 16px;
        text-align: center;
        color: var(--text-secondary);
    }

    .arrange-menu-item:hover i {
        color: #1a60c5;
    }

.arrange-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* =============================================
        RESPONSIVE — 766px
        ============================================= */
@media (max-width: 766px) {
    .burger-btn {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

        .sidebar.mobile-open {
            transform: translateX(0);
        }

    .sidebar-close-btn {
        display: flex;
    }

    .main-area {
        width: 100%;
    }

    .topbar {
        padding: 0 16px;
    }

    .page-content {
        padding: 16px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        position: static;
    }

    .dt-search {
        width: 140px;
    }
}

@media (max-width: 480px) {
    .dt-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .dt-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }
}
/* =============================================
   ADD QUESTION MODAL — shared shell
   (used by MCQ, Multi-Response, True/False, etc.)
   ============================================= */

/* Modal wrapper */
.aq-modal {
  background: #eceef8;
  border-radius: 20px;
  width: 100%;
  max-width: 1060px;
  margin: 36px auto 56px;
  box-shadow: 0 24px 70px rgba(26, 31, 94, 0.15);
  overflow: hidden;
}

/* Header */
.aq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 20px;
  background: #eceef8;
  border-bottom: 1px solid var(--border-color);
}

.aq-header h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.aq-close-btn {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.aq-close-btn:hover { background: #e0e3f5; color: var(--text-primary); }

/* Two-column body */
.aq-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.aq-left {
  padding: 24px 28px 28px 32px;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  max-height: 78vh;
}

.aq-right {
  padding: 24px 32px 28px 28px;
  background: #e4e6f4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: 78vh;
}

/* Footer */
.aq-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 32px;
  border-top: 1px solid var(--border-color);
  background: #eceef8;
}

/* ---- Shared field label ---- */
.setting-label        { display: block; font-weight: 600; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 5px; }
.setting-label.blue   { color: #1a60c5; }
.setting-label .opt   { color: #22c55e; font-weight: 600; }

/* ---- Shared inputs ---- */
.setting-input {
  font-family: var(--font);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: #f9fafc;
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.setting-input:focus {
  border-color: #1a60c5;
  box-shadow: 0 0 0 3px rgba(26, 96, 197, 0.12);
  outline: none;
  background: #fff;
}
.setting-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Input with media icons */
.input-icon-wrap { position: relative; }
.input-icon-wrap .setting-input { padding-right: 92px; }
.input-icons { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }
.input-icons button { background: none; border: none; padding: 3px 4px; border-radius: 5px; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; transition: color var(--transition), background var(--transition); }
.input-icons button:hover { color: #1a60c5; background: #eef3ff; }

/* ---- Section card ---- */
.setting-section-title { font-weight: 700; font-size: 0.9rem; color: #1a60c5; margin: 0 0 4px; }
.setting-section-desc  { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 14px; }

/* ---- Answer hint ---- */
.answer-hint { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 10px; }

/* ---- Correct badge ---- */
.correct-badge {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.correct-badge.show { display: block; }

/* ---- Answer rows ---- */
.answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9fafc;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  transition: border-color var(--transition), background var(--transition);
}
.answer-row:focus-within { border-color: #1a60c5; }
.answer-row.is-correct   { border-color: #22c55e; background: #f0fdf4; }

/* Radio input inside answer row */
.answer-radio { width: 16px; height: 16px; accent-color: #22c55e; flex-shrink: 0; cursor: pointer; }

/* Editable text inside answer row */
.answer-text {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: transparent;
}

/* Fixed (non-editable) label for T/F rows */
.tf-fixed-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  cursor: default;
}

/* Action icon buttons inside answer row */
.answer-actions button {
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--transition), background var(--transition);
}
.answer-actions button:hover   { color: #1a60c5; background: #eef3ff; }
.answer-actions .del-btn       { color: #f87171; }
.answer-actions .del-btn:hover { color: #dc2626; background: #fef2f2; }

/* ---- Add-choice button ---- */
.btn-add-choice {
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 18px;
  transition: opacity var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-add-choice:hover { opacity: 0.88; color: #fff; transform: translateY(-1px); }

/* ---- Checkbox / Radio in setting sections ---- */
.setting-check .form-check-input { width: 16px; height: 16px; border: 2px solid #c4c9e0; border-radius: 4px; cursor: pointer; margin-top: 2px; }
.setting-check .form-check-input:checked { background-color: #1a60c5; border-color: #1a60c5; }
.setting-check .form-check-input:focus   { box-shadow: 0 0 0 3px rgba(26,96,197,.15); outline: none; }
.setting-check .form-check-label { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); cursor: pointer; margin-left: 4px; }

.setting-radio .form-check-input { width: 15px; height: 15px; border: 2px solid #c4c9e0; cursor: pointer; margin-top: 2px; }
.setting-radio .form-check-input:checked { background-color: #1a60c5; border-color: #1a60c5; }
.setting-radio .form-check-input:focus   { box-shadow: 0 0 0 3px rgba(26,96,197,.15); outline: none; }
.setting-radio .form-check-label { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); cursor: pointer; margin-left: 4px; }

/* ---- Explanation collapsible ---- */
.model-answer-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.model-answer-section.open { max-height: 300px; opacity: 1; }

.model-answer-inner {
  /*background: #f4f5ff;
  border: 1.5px solid #d4d9f5;
  border-radius: 12px;*/
  padding: 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-answer-inner label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }

/* ---- Validation error ---- */
.field-error { font-size: 0.75rem; color: #ef4444; font-weight: 500; display: none; margin-top: 4px; }
.field-error.show { display: block; }

/* ---- Preview panel ---- */
.preview-heading { font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.preview-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.preview-question { font-size: 0.925rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; min-height: 22px; }

/* Shared preview choice row — radio style (MCQ / T/F) */
.preview-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.p-radio {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #9ca3af;
  flex-shrink: 0;
}
.preview-choice.correct .p-radio { border-color: #22c55e; background: #22c55e; }

/* Checkbox style used in Multi-Response preview */
.p-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #9ca3af;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.preview-choice.correct .p-checkbox { border-color: #1a60c5; background: #1a60c5; }
.preview-choice.correct .p-checkbox::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.preview-note { font-size: 0.73rem; color: var(--text-secondary); margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-color); }

/* Quick tips */
.quick-tips-card h6 { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.quick-tips-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quick-tips-card ul li { font-size: 0.8rem; color: var(--text-secondary); padding-left: 14px; position: relative; line-height: 1.45; }
.quick-tips-card ul li::before { content: '•'; position: absolute; left: 0; color: #c4c9e0; }

/* ---- Footer action buttons ---- */

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .aq-body { grid-template-columns: 1fr; }
  .aq-left  { border-right: none; border-bottom: 1px solid var(--border-color); max-height: none; padding: 20px 16px; }
  .aq-right { max-height: none; padding: 20px 16px; }
  .aq-header { padding: 18px 16px 14px; }
  .aq-footer { padding: 14px 16px; }
}



/* =============================================
                            INPUTS
                            ============================================= */
.setting-input {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    border-radius: 10px;
    border: 1.5px solid #e0e3f0;
    background: #f9fafc;
    color: #374151;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .setting-input:focus {
        border-color: #1a60c5;
        box-shadow: 0 0 0 3px rgba(26, 96, 197, 0.12);
        outline: none;
        background: #fff;
    }

    .setting-input.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

/* Input with media icons */
.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .setting-input {
        padding-right: 92px;
    }

.input-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

    .input-icons button {
        background: none;
        border: none;
        padding: 3px 4px;
        border-radius: 5px;
        color: #9ca3af;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.18s, background 0.18s;
    }

        .input-icons button:hover {
            color: #1a60c5;
            background: #eef3ff;
        }

/* =============================================
                            SECTION CARDS
                            ============================================= */

.setting-section-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a60c5;
    margin: 0 0 4px;
}

/* =============================================
                            ANSWER EVALUATION CHECKBOXES
                            ============================================= */
.setting-check .form-check-input {
    width: 16px;
    height: 16px;
    border: 2px solid #c4c9e0;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 2px;
}

    .setting-check .form-check-input:checked {
        background-color: #1a60c5;
        border-color: #1a60c5;
    }

    .setting-check .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(26,96,197,.15);
        outline: none;
    }

.setting-check .form-check-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin-left: 4px;
}

/* =============================================
                            MODEL ANSWERS
                            ============================================= */
.model-answer-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
    display: block;
}

/* Each model answer row */
.model-answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafc;
    border: 1.5px solid #e0e3f0;
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color 0.18s;
}

    .model-answer-row:focus-within {
        border-color: #1a60c5;
    }

.model-answer-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    color: #374151;
    background: transparent;
}

.model-answer-del {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: background 0.18s, color 0.18s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .model-answer-del:hover {
        color: #dc2626;
        background: #fef2f2;
    }

/* Add Model Answer button */
.btn-add-model {
    background: #1a1f5e;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 18px;
    transition: opacity 0.18s, transform 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

    .btn-add-model:hover {
        opacity: 0.88;
        color: #fff;
        transform: translateY(-1px);
    }

/* =============================================
                            ADVANCED MATCHING (Collapsible)
                            ============================================= */
.advanced-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    padding: 10px 0 4px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: color 0.18s;
}

    .advanced-toggle:hover {
        color: #1a60c5;
    }

    .advanced-toggle .toggle-arrow {
        font-size: 0.7rem;
        transition: transform 0.25s ease;
        color: #6b7280;
    }

    .advanced-toggle.open .toggle-arrow {
        transform: rotate(90deg);
    }

.advanced-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

    .advanced-body.open {
        max-height: 120px;
        opacity: 1;
    }

/* =============================================
                            VALIDATION ERROR
                            ============================================= */
.field-error {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 500;
    display: none;
    margin-top: 4px;
}

    .field-error.show {
        display: block;
    }

/* =============================================
                            PREVIEW PANEL
                            ============================================= */
.preview-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1f5e;
}

.preview-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid #e0e3f0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.preview-question {
    font-size: 0.925rem;
    font-weight: 700;
    color: #1a1f5e;
    margin-bottom: 14px;
    min-height: 22px;
}

/* Short answer text field in preview */
.preview-sa-input {
    width: 100%;
    border: 1.5px solid #e0e3f0;
    border-radius: 8px;
    padding: 9px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    color: #9ca3af;
    background: #f9fafc;
    cursor: not-allowed;
    resize: none;
    outline: none;
}

.preview-note {
    font-size: 0.73rem;
    color: #9ca3af;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #e0e3f0;
}



/* =============================================
                            FOOTER BUTTONS
                            ============================================= */
.btn-cancel-aq {
    padding: 9px 28px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

    .btn-cancel-aq:hover {
        border-color: #1a60c5;
        color: #1a60c5;
        background: #eef3ff;
    }

.btn-save-aq {
    padding: 9px 34px;
    background: #f97316;
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}

    .btn-save-aq:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(249,115,22,0.35);
    }

/* =============================================
                            TOAST
                            ============================================= */
.aq-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #166534;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

    .aq-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    .aq-toast.warning {
        background: #92400e;
    }

    .aq-toast.error {
        background: #991b1b;
    }

/* =============================================
                            RESPONSIVE
                            ============================================= */
@media (max-width: 767px) {
    .aq-body {
        grid-template-columns: 1fr;
    }

    .aq-left {
        border-right: none;
        border-bottom: 1px solid #dde0f0;
        max-height: none;
        padding: 20px 16px;
    }

    .aq-right {
        max-height: none;
        padding: 20px 16px;
    }

    .aq-header {
        padding: 18px 16px 14px;
    }

    .aq-footer {
        padding: 14px 16px;
    }
}