/* ── QuesManager — Global Styles ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Core palette (Phase 1, preserved) ── */
  --primary: #00B0F0;
  --primary-dark: #035C96;
  --gray: #969696;
  --dark: #464646;
  --bg: #FFFFFF;
  --bg-muted: #F8F9FA;
  --border: #E5E7EB;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
  --radius: 10px;
  --radius-sm: 6px;

  /* ── Phase 2 — Modern design tokens ── */

  /* Typography families */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* ── Phase 1 named aliases (light palette restored) ── */
  --white:     #FFFFFF;
  --dark-text: #464646;
  --dark-blue: #035C96;
  --bg-light:  #F4F8FB;

  /* Aurora surface — light theme rollback. The Phase 2 templates still
     reference these tokens, so we point them at the light palette. */
  --bg-aurora-deep: #FFFFFF;
  --bg-aurora:      #F4F8FB;
  --bg-aurora-light: #F4F8FB;

  /* Glassmorphism flattened to Phase 1 cards */
  --glass-bg:            #FFFFFF;
  --glass-bg-strong:     #FFFFFF;
  --glass-border:        #E5E7EB;
  --glass-border-strong: #D1D5DB;
  --glass-blur:          none;
  --glass-shadow:        0 2px 8px rgba(0, 0, 0, 0.06);

  /* Glow accents tuned for light backgrounds */
  --glow-primary: 0 0 0 1px rgba(0, 176, 240, 0.35), 0 4px 16px rgba(0, 176, 240, 0.18);
  --glow-violet:  0 0 0 1px rgba(124, 92, 252, 0.35), 0 4px 16px rgba(124, 92, 252, 0.18);
  --glow-mint:    0 0 0 1px rgba(62, 207, 180, 0.35), 0 4px 16px rgba(62, 207, 180, 0.18);

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-swift: cubic-bezier(0.20, 0.90, 0.20, 1);
  --ease-smooth: cubic-bezier(0.40, 0.00, 0.20, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;

  /* "Dark text" scale — repurposed for light theme rollback.
     Phase 2 templates use these on top of light backgrounds, so we map
     them to the Phase 1 grayscale ramp. */
  --text-dark-1: #464646;  /* primary body text — was #E8ECF4 */
  --text-dark-2: #6B7280;  /* secondary text  — was #A9B1C6 */
  --text-dark-3: #969696;  /* tertiary labels — was #6B7394 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--dark);
  background: var(--bg-muted);
  line-height: 1.5;
  font-size: 14px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.app-shell { display: flex; height: 100vh; }

.sidebar {
  width: 220px; min-width: 220px;
  background: var(--primary-dark); color: #fff;
  display: flex; flex-direction: column;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--primary); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.sidebar-logo span { font-weight: 600; font-size: 15px; }

.sidebar-nav {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 8px; display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: none;      /* Firefox — hide the scrollbar, keep scrolling */
  -ms-overflow-style: none;   /* old Edge/IE */
}
/* Chrome/Safari/Edge-Chromium (2026-09-27) — same "hide the bar, keep the
   scroll" as the two properties above; overflow-y:auto is untouched so
   wheel/trackpad/drag scrolling still works exactly as before, only the
   browser-drawn track+thumb decoration is gone. */
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  color: rgba(255,255,255,0.65); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-nav a.active { background: rgba(255,255,255,0.15); color: #fff; }
.sidebar-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }

.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: #fff;
  border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.header-title {
  font-size: 18px; font-weight: 600; border: none; background: none;
  color: var(--dark); outline: none; padding: 4px 8px; border-radius: 6px;
}
.header-title:hover { background: var(--bg-muted); }
.header-actions { display: flex; gap: 8px; }

.content { flex: 1; overflow: auto; padding: 24px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.card-padded { padding: 20px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 14px; font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: none; transition: all 0.2s; line-height: 1;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #009ad6; }
.btn-secondary { background: #fff; color: var(--dark); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-muted); }
.btn-ghost { background: none; color: var(--dark); }
.btn-ghost:hover { background: var(--bg-muted); }
.btn-danger { background: #EF4444; color: #fff; }
.btn-danger:hover { background: #DC2626; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 10px 24px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 12px; font-weight: 500; color: var(--dark); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--dark); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,176,240,0.15);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-input-sm { padding: 5px 8px; font-size: 12px; }

/* ── Toggles ─────────────────────────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: #D1D5DB; position: relative; transition: background 0.2s;
}
.toggle-track.active { background: var(--primary); }
.toggle-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px; transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.toggle-track.active .toggle-thumb { transform: translateX(16px); }
.toggle-label { font-size: 13px; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  color: var(--gray); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: all 0.2s;
}
.tab-btn:hover { color: var(--dark); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-btn svg { width: 16px; height: 16px; }

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}
.badge-primary { background: rgba(0,176,240,0.1); color: var(--primary); }
.badge-success { background: #DCFCE7; color: #16A34A; }
.badge-warning { background: #FEF3C7; color: #D97706; }
.badge-danger { background: #FEE2E2; color: #DC2626; }
.badge-gray { background: #F3F4F6; color: #6B7280; }

/* ── Designer Layout ─────────────────────────────────────────────────────── */
.designer-layout { display: flex; gap: 0; height: calc(100vh - 130px); }
.question-list-panel { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; }
.question-editor-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Drag-to-resize handle between the Questions list and the editor panel.
   Its own width IS the gap the two panels used to get from designer-layout's
   `gap: 20px` (now 0, since this element replaces that spacing). */
.panel-resizer { flex-shrink: 0; width: 20px; cursor: col-resize; position: relative; }
.panel-resizer::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 9px; width: 2px;
  background: var(--border); transition: background 0.15s;
}
.panel-resizer:hover::after, .panel-resizer.resizing::after { background: var(--primary); }
body.panel-resizing { cursor: col-resize; user-select: none; }
body.panel-resizing .question-editor-panel iframe { pointer-events: none; }

/* Small inline spinner — generic enough to reuse anywhere a brief
   background-save indicator is needed. */
.mini-spinner {
  display: inline-block; width: 11px; height: 11px; flex-shrink: 0;
  border: 2px solid rgba(0,176,240,0.25); border-top-color: var(--primary);
  border-radius: 50%; animation: mini-spin 0.7s linear infinite;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }

/* Full-list blocking overlay while a drag-reorder saves in the background
   (2026-09-23 follow-up, replaces the earlier small inline badge per
   zahmed's mockup — a full card over the list itself, not a footer note,
   so it's unmissable and blocks further drags until the save finishes). */
.panel-saving-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(255,255,255,0.82);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.mini-spinner-lg {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  border: 2.5px solid rgba(0,176,240,0.25); border-top-color: var(--primary);
  border-radius: 50%; animation: mini-spin 0.7s linear infinite;
}

/* Reusable "⋮" dropdown menu (2026-09-23) — consolidates a row's spread-out
   action icons into one menu, used for both question rows and the page
   break editor. Built by showDropdownMenu() in designer.html, appended to
   <body> and positioned with `position:fixed` off the trigger's own
   getBoundingClientRect(), so it's never clipped by a scrolling ancestor. */
.qmenu {
  position: fixed; z-index: 1000; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; min-width: 200px;
}
.qmenu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
  background: none; border: none; text-align: left; font-size: 12.5px; color: #111827;
  border-radius: 6px; cursor: pointer;
}
.qmenu-item:hover:not(:disabled) { background: var(--bg-muted); }
.qmenu-item:disabled { opacity: .35; cursor: not-allowed; }
.qmenu-item.qmenu-danger { color: #DC2626; }
.qmenu-item.qmenu-danger:hover:not(:disabled) { background: #FEF2F2; }
.qmenu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.q-more-btn { opacity: 0; transition: opacity 0.15s; }
.question-item:hover .q-more-btn, .pagebreak-row:hover .q-more-btn, .q-more-btn.menu-open { opacity: 1; }

.question-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.question-item:hover { background: var(--bg-muted); }
.question-item.active { background: rgba(0,176,240,0.04); border-left-color: var(--primary); }
.question-item .q-code { font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.question-item .q-text { font-size: 12px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.question-item .q-delete {
  opacity: 0; color: #D1D5DB; cursor: pointer; transition: all 0.15s; background: none; border: none;
}
.question-item:hover .q-delete { opacity: 1; }
.question-item .q-delete:hover { color: #EF4444; }
.question-item .q-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* .q-iconbtn's BASE look (gray dot, blue on hover) is unscoped — used both
   inside a row (question rows, the page-break divider) AND as a standalone
   header action (the page-break editor's old "⋮", the Open-End Options
   collapse chevron) that isn't inside either row type. Split from the
   HIDDEN-UNTIL-ROW-HOVER behavior below (2026-09-24 fix — that part was
   wrongly bundled into the scoped rule, so any .q-iconbtn outside a row,
   like the new collapse chevron, rendered as unstyled default-black text
   with no hover color at all, same class of bug the page-break "⋮" had
   before entry #5's fix). A standalone header button sets its own inline
   `opacity:1` to opt OUT of the hidden-until-hover behavior; it still gets
   this base look for free. */
.q-iconbtn {
  color: #D1D5DB; cursor: pointer; transition: all 0.15s;
  background: none; border: none; padding: 2px 4px; display: inline-flex; align-items: center;
}
.q-iconbtn:hover { color: var(--primary); }
.q-iconbtn:disabled { opacity: 0.25 !important; cursor: not-allowed; }
.q-iconbtn:disabled:hover { color: #D1D5DB; }

/* Hidden-until-row-hover — ONLY for a .q-iconbtn sitting inside a row
   (question rows, the page-break divider), not a standalone header button.
   Add any future row type to this same list rather than writing a parallel
   copy of the rule. */
.question-item .q-iconbtn, .pagebreak-row .q-iconbtn { opacity: 0; }
.question-item:hover .q-iconbtn, .pagebreak-row:hover .q-iconbtn { opacity: 1; }

/* Page-break divider row (2026-09-23) — same hover-highlight behavior as a
   question row, just without .question-item's other row-specific rules
   (border-left active-state, q-code/q-text sizing, etc.) that don't apply
   to a divider. */
.pagebreak-row { border-radius: 4px; transition: background 0.15s; }
.pagebreak-row:hover { background: var(--bg-muted); }

/* Drag handle for manual reordering (2026-09-23). Six-dot grip, visible on
   hover like the other row actions; grabbing cursor signals it's draggable
   even though the whole row is the drag source, not just this icon. */
.question-item .q-grip {
  opacity: 0; color: #D1D5DB; cursor: grab; flex-shrink: 0;
  display: inline-flex; align-items: center; transition: opacity 0.15s;
  margin-left: -2px;
}
.question-item:hover .q-grip { opacity: 1; }
.question-item .q-grip:active { cursor: grabbing; }
.question-item.dragging { opacity: 0.4; }
.question-item.drag-over-top    { box-shadow: inset 0 2px 0 0 var(--primary); }
.question-item.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--primary); }

/* Hidden questions: dimmed row + "(hidden)" suffix on the text. Still
   selectable so the user can re-show or edit them. */
.question-item.is-hidden { background: var(--bg-muted); }
.question-item.is-hidden .q-text,
.question-item.is-hidden .q-code { opacity: 0.5; }
.question-item.is-hidden .q-text::after {
  content: ' (hidden)';
  color: var(--gray); font-style: italic; font-size: 11px; opacity: 0.7;
}

/* ── Option row ──────────────────────────────────────────────────────────── */
.option-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px; background: var(--bg-muted); border-radius: 8px; margin-bottom: 8px;
}
.option-row .opt-code { font-size: 11px; font-family: monospace; color: var(--gray); padding-top: 10px; width: 24px; }
.option-row .opt-body { flex: 1; }
.option-row .opt-toggles { display: flex; gap: 12px; margin-top: 6px; }
.option-row .opt-delete {
  opacity: 0; color: #D1D5DB; cursor: pointer; background: none; border: none;
  padding-top: 8px; transition: all 0.15s;
}
.option-row:hover .opt-delete { opacity: 1; }
.option-row .opt-delete:hover { color: #EF4444; }

/* ── Question type selector ──────────────────────────────────────────────── */
.type-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.type-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 8px; border: 2px solid var(--border);
  cursor: pointer; transition: all 0.2s; background: #fff; text-align: center;
}
.type-card:hover { border-color: #D1D5DB; }
.type-card.active { border-color: var(--primary); background: rgba(0,176,240,0.04); color: var(--primary); }
.type-card svg { width: 18px; height: 18px; }
.type-card span { font-size: 9.5px; font-weight: 500; line-height: 1.2; }

/* ── Logic builder ───────────────────────────────────────────────────────── */
.logic-rule {
  padding: 16px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px;
}
.condition-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px; background: var(--bg-muted); border-radius: 6px; margin-bottom: 8px;
}
.condition-row .cond-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.join-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: rgba(0,176,240,0.1); color: var(--primary);
}

/* ── Interview UI ────────────────────────────────────────────────────────── */
.interview-card {
  max-width: 640px; margin: 0 auto;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-hover);
  padding: 32px;
}
.interview-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 8px; border: 2px solid var(--border);
  cursor: pointer; transition: all 0.2s; margin-bottom: 10px;
  line-height: 1.45;
}
.interview-option > span { padding: 2px 0; }
.grid-table th, .grid-table td { padding: 14px 12px !important; }
.interview-option:hover { border-color: #D1D5DB; }
.interview-option.selected { border-color: var(--primary); background: rgba(0,176,240,0.04); }
.interview-option.quota-full-option {
  cursor: not-allowed; opacity: 0.5; background: var(--bg-muted);
}
.interview-option.quota-full-option:hover { border-color: var(--border); }

.radio-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s;
}
.radio-dot .inner { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: none; }
.interview-option.selected .radio-dot { border-color: var(--primary); }
.interview-option.selected .radio-dot .inner { display: block; }

.check-box {
  width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.2s; font-size: 12px; color: #fff;
}
.interview-option.selected .check-box { border-color: var(--primary); background: var(--primary); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-bar { width: 100%; height: 6px; background: #E5E7EB; border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease-out; background: var(--primary); }

/* ── Grid/Matrix ─────────────────────────────────────────────────────────── */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td {
  padding: 10px; border: 1px solid var(--border); text-align: center; font-size: 13px;
}
.grid-table th { background: var(--bg-muted); font-weight: 600; font-size: 12px; }
.grid-table td:first-child, .grid-table th:first-child { text-align: left; min-width: 220px; }
.grid-radio, .grid-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s; background: #fff;
}
.grid-check { border-radius: 4px; }
.grid-radio.selected, .grid-check.selected { border-color: var(--primary); background: var(--primary); }

/* ── Ranking ─────────────────────────────────────────────────────────────── */
.rank-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 2px solid var(--border); border-radius: 8px; margin-bottom: 8px;
  background: #fff;
}
.rank-number {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,176,240,0.1); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.rank-arrows { display: flex; flex-direction: column; gap: 2px; }
.rank-arrows button {
  background: none; border: none; cursor: pointer; color: var(--gray); padding: 2px;
}
.rank-arrows button:hover { color: var(--primary); }
.rank-arrows button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Fieldwork ───────────────────────────────────────────────────────────── */
/* Five cards across, not three. It was fixed at 3 when there were exactly
   three; Total Pass and QC Rejected pushed it onto a second row, which read
   as two separate groups rather than one tracker (zahmed, 2026-10-19).
   auto-fit rather than repeat(5): on a narrow screen they wrap rather than
   squeezing the numbers into an unreadable column. Used only by Fieldwork. */
.stats-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat-card { text-align: center; padding: 16px; }
.stat-card .stat-number { font-size: 28px; font-weight: 700; color: var(--dark); }
.stat-card .stat-label { font-size: 12px; color: var(--gray); }

.quota-table { width: 100%; border-collapse: collapse; }
.quota-table th, .quota-table td { padding: 8px 16px; border-bottom: 1px solid #F3F4F6; font-size: 13px; }
.quota-table th { background: var(--bg-muted); font-weight: 600; font-size: 12px; text-align: left; }
.quota-progress { display: flex; align-items: center; gap: 8px; }
.quota-progress-bar { flex: 1; height: 6px; background: #E5E7EB; border-radius: 3px; overflow: hidden; }
.quota-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* ── Mode selector ───────────────────────────────────────────────────────── */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode-card {
  padding: 24px; border-radius: 12px; border: 2px solid var(--border);
  cursor: pointer; transition: all 0.2s; text-align: left;
}
.mode-card:hover { border-color: #D1D5DB; }
.mode-card.active { border-color: var(--primary); background: rgba(0,176,240,0.04); }
.mode-card h3 { font-weight: 600; margin-top: 8px; }
.mode-card p { font-size: 12px; color: var(--gray); margin-top: 4px; }
.mode-card svg { width: 32px; height: 32px; color: var(--gray); }
.mode-card.active svg { color: var(--primary); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--gray); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; color: #E5E7EB; }
.empty-state p { font-size: 13px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column;
}
/* `.modal-box` is the lighter modal used by export, fieldwork, quota and
   team — it had NO rule at all, so those dialogs rendered with no surface
   of their own and the page showed through behind the controls (zahmed,
   2026-10-19: "give background color to modal-box"). One definition here
   fixes every page that uses it. */
.modal-box {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--gray); padding: 4px; border-radius: 6px; }
.modal-close:hover { background: var(--bg-muted); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-4 { padding: 16px; }
.text-center { text-align: center; }

/* ── Mobile responsive (interviewer phones, 360–640px) ───────────────────── */
@media (max-width: 640px) {
  .content { padding: 12px; }

  /* CATI/CAWI question card — slimmer chrome so options aren't squeezed */
  .interview-card { padding: 16px; border-radius: 12px; }
  .card-padded { padding: 14px; }
  .card { border-radius: 10px; }

  /* Option rows: keep targets tappable but reclaim horizontal room */
  .interview-option {
    padding: 12px 14px;
    gap: 10px;
    margin-bottom: 8px;
  }

  /* Grid tables: shrink the row-label column so columns get real width.
     Wide grids already wrap in overflow-x:auto in interview.html, so
     horizontal scroll remains available when needed. */
  .grid-table th, .grid-table td {
    padding: 8px 6px !important;
    font-size: 11.5px;
  }
  .grid-table td:first-child, .grid-table th:first-child {
    min-width: 120px;
  }
  .grid-radio, .grid-check { width: 20px; height: 20px; }

  /* Navigation buttons: compact, still tappable */
  .btn { padding: 8px 12px; font-size: 12px; }
  .btn-lg { padding: 10px 16px; font-size: 14px; }
  .btn-sm { padding: 6px 10px; font-size: 11px; }

  /* CAWI standalone wrapper — less ambient padding on phones */
  .cawi-wrapper { padding: 12px; }
  .cawi-card { border-radius: 12px; }
  .cawi-nav { padding: 0 20px 20px; }

  /* Modal cards full-width on phone */
  .modal-content { max-width: 100%; max-height: 95vh; }
}
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--gray); }
.text-primary { color: var(--primary); }
.font-semibold { font-weight: 600; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F3F4F6; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ── CAWI-specific ───────────────────────────────────────────────────────── */
.cawi-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cawi-card { background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.1); width: 100%; max-width: 640px; }
.cawi-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 32px 24px; }
.cawi-back { background: none; border: none; color: var(--gray); cursor: pointer; font-size: 14px; }
.cawi-back:hover { color: var(--dark); }
.cawi-next {
  padding: 10px 28px; border: none; color: #fff; cursor: pointer;
  font-weight: 600; font-size: 14px; transition: opacity 0.2s;
}
.cawi-next:hover { opacity: 0.9; }

/* Validation errors */
.error-box { padding: 12px; background: #FEE2E2; border: 1px solid #FECACA; border-radius: 8px; margin-bottom: 16px; }
.error-box p { font-size: 13px; color: #DC2626; }

/* ── Tab Next Button ────────────────────────────────────────────────────── */
.tab-next-wrap { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Exclusive Options Section ──────────────────────────────────────────── */
.exclusive-section {
  padding: 16px; background: var(--bg-muted);
  border: 1px solid var(--border); border-radius: 8px;
}
.exclusive-options-list { display: flex; flex-direction: column; gap: 6px; }
.exclusive-option-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.exclusive-option-item:hover { background: rgba(0,176,240,0.04); }

/* ── Ranking unranked items ─────────────────────────────────────────────── */
.rank-unranked { opacity: 0.45; border-style: dashed; }