/* ═══════════════════════════════════════════════════════════════════
   Aspirants Admin — Mobile-First Responsive Design
   Chorcha-Inspired Theme · Compact Typography
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────── */
:root {
  --primary: #00034A;
  --primary-light: #1a1d6a;
  --bg: #F5F3F8;
  --surface: #FFFFFF;
  --secondary: #E866FF;
  --teal: #188699;
  --gold: #FFB747;
  --success: #017A47;
  --error: #ED1C24;
  --warning: #FFA726;
  --text: #1a1a2e;
  --text-sec: #6b7280;
  --text-dim: #9ca3af;
  --border: #e2e4e9;
  --border-light: #eff0f3;
  --hover: #f0edf5;
  --topbar-h: 44px;
  --sidebar-w: 210px;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --ease: .15s ease;
}

/* ─── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
  height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:12px; line-height:1.45; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--teal); text-decoration:none; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }

/* ═══ AUTH OVERLAY ════════════════════════════════════════════════ */
.auth-overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),#1a1d6a);
  padding:16px;
}
.auth-card {
  background:var(--surface); border-radius:12px; padding:32px 24px;
  width:100%; max-width:340px; box-shadow:var(--shadow-md); text-align:center;
}
.auth-logo { font-size:22px; font-weight:800; color:var(--primary); letter-spacing:2px; }
.auth-subtitle { color:var(--text-sec); margin:2px 0 24px; font-size:12px; }
.auth-email { color:var(--text-sec); margin-bottom:12px; font-size:11px; }
.auth-error { color:var(--error); margin-top:12px; font-size:11px; min-height:16px; }

/* ═══ APP SHELL ══════════════════════════════════════════════════ */
.app-shell { display:flex; flex-direction:column; height:100vh; }

/* ═══ TOP BAR ════════════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--topbar-h); background:var(--primary); color:#fff;
  display:flex; align-items:center; padding:0 12px; gap:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.topbar-brand {
  font-size:12px; font-weight:700; letter-spacing:1.5px; color:#fff;
  flex:1;
}
.topbar-signout { color:rgba(255,255,255,.7); font-size:10px; }
.topbar-signout:hover { color:#fff; }

/* Hamburger */
.topbar-toggle {
  background:none; border:none; cursor:pointer; padding:4px; display:flex;
  flex-direction:column; gap:3px; width:28px;
}
.topbar-toggle span {
  display:block; height:2px; background:#fff; border-radius:1px;
  transition:var(--ease);
}
.topbar-toggle.open span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.topbar-toggle.open span:nth-child(2) { opacity:0; }
.topbar-toggle.open span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

/* ═══ NAV / SIDEBAR ══════════════════════════════════════════════ */
/* Mobile: full-screen drawer */
.nav-backdrop {
  position:fixed; inset:0; z-index:290; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.nav-backdrop.open { opacity:1; pointer-events:auto; }

.sidebar {
  position:fixed; top:var(--topbar-h); left:0; bottom:0;
  width:220px; background:var(--primary); z-index:300;
  transform:translateX(-100%); transition:transform .2s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sidebar.open { transform:translateX(0); }

.sidebar-nav { padding:6px 0; }
.nav-group-label {
  padding:10px 14px 3px; font-size:9px; font-weight:700;
  letter-spacing:1px; color:rgba(255,255,255,.35); text-transform:uppercase;
}
.nav-item {
  display:block; padding:7px 14px; color:rgba(255,255,255,.7);
  font-size:11px; transition:var(--ease); border-left:2px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active {
  background:rgba(255,255,255,.1); color:#fff;
  border-left-color:var(--secondary);
}

/* ═══ CONTENT ════════════════════════════════════════════════════ */
.content {
  flex:1; margin-top:var(--topbar-h); padding:12px;
  overflow-y:auto; min-height:0;
}
.content-loading { text-align:center; padding:48px 16px; color:var(--text-sec); font-size:11px; }

/* ═══ BUTTONS ════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:var(--radius-sm); font-size:11px;
  font-weight:500; cursor:pointer; border:1px solid transparent;
  transition:var(--ease); gap:4px; white-space:nowrap; line-height:1.3;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-light); }
.btn-secondary { background:var(--secondary); color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--error); color:#fff; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover { background:var(--hover); }
.btn-ghost { background:transparent; color:var(--text-sec); }
.btn-ghost:hover { background:var(--hover); color:var(--text); }
.btn-block { width:100%; }
.btn-sm { padding:4px 8px; font-size:10px; }
.btn-xs { padding:2px 6px; font-size:10px; }

/* ═══ INPUTS ═════════════════════════════════════════════════════ */
.input,.select,textarea.input {
  width:100%; padding:6px 10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:11px; color:var(--text);
  background:var(--surface); transition:var(--ease); font-family:inherit;
  line-height:1.4;
}
.input:focus,.select:focus,textarea.input:focus {
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 2px rgba(24,134,153,.12);
}
.input:read-only { background:#f9fafb; color:var(--text-sec); }
textarea.input { resize:vertical; min-height:60px; }
.select { appearance:auto; }
.input-sm { padding:4px 8px; font-size:10px; }

/* ═══ FORM LAYOUT ════════════════════════════════════════════════ */
.form-group { margin-bottom:12px; }
.form-label { display:block; margin-bottom:3px; font-size:10px; font-weight:600; color:var(--text-sec); text-transform:uppercase; letter-spacing:.3px; }
.form-label .required { color:var(--error); margin-left:1px; }
.form-hint { font-size:10px; color:var(--text-dim); margin-top:2px; }
.form-row { display:grid; grid-template-columns:1fr; gap:12px; }
.form-row-3 { display:grid; grid-template-columns:1fr; gap:12px; }
.form-actions { display:flex; gap:6px; margin-top:16px; padding-top:12px; border-top:1px solid var(--border); flex-wrap:wrap; }

/* ═══ CARDS ══════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-header {
  padding:10px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap;
}
.card-header h2,.card-header h3 { font-size:12px; font-weight:600; }
.card-body { padding:12px; }
.card-footer { padding:8px 12px; border-top:1px solid var(--border); background:#fafafa; }

/* ═══ DATA TABLE ═════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; min-width:480px; }
.data-table th {
  padding:7px 10px; text-align:left; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec);
  background:#fafafa; border-bottom:1px solid var(--border); white-space:nowrap;
  position:sticky; top:0;
}
.data-table td {
  padding:6px 10px; border-bottom:1px solid var(--border-light);
  font-size:11px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.data-table tr { cursor:pointer; transition:var(--ease); }
.data-table tbody tr:hover { background:var(--hover); }
.data-table tbody tr:active { background:#e8e5ee; }
.data-table .col-actions { width:48px; text-align:right; }
.data-table .cell-id { font-family:'SF Mono',Consolas,monospace; font-size:10px; color:var(--text-sec); }
.data-table .cell-bool { font-weight:600; font-size:10px; }
.cell-true { color:var(--success); }
.cell-false { color:var(--error); }

/* ═══ PAGINATION ═════════════════════════════════════════════════ */
.pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; gap:8px; flex-wrap:wrap;
}
.pagination-info { font-size:10px; color:var(--text-sec); }
.pagination-btns { display:flex; gap:4px; align-items:center; }

/* ═══ TOOLBAR ════════════════════════════════════════════════════ */
.toolbar {
  display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap;
}
.toolbar h2 { font-size:13px; font-weight:600; margin-right:8px; }
.toolbar .search-box { flex:1; min-width:140px; max-width:300px; }
.toolbar-right { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }

/* ═══ BADGES ═════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; padding:1px 6px; border-radius:10px;
  font-size:9px; font-weight:600; white-space:nowrap; letter-spacing:.2px;
}
.badge-primary { background:rgba(0,3,74,.08); color:var(--primary); }
.badge-success { background:rgba(1,122,71,.08); color:var(--success); }
.badge-warning { background:rgba(255,167,38,.12); color:#b47100; }
.badge-error { background:rgba(237,28,36,.08); color:var(--error); }
.badge-info { background:rgba(24,134,153,.08); color:var(--teal); }
.badge-purple { background:rgba(232,102,255,.08); color:#a033b3; }

/* ═══ TABS ═══════════════════════════════════════════════════════ */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:12px; overflow-x:auto; }
.tab {
  padding:8px 14px; font-size:11px; font-weight:500; color:var(--text-sec);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:var(--ease); white-space:nowrap; flex-shrink:0;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--teal); border-bottom-color:var(--teal); }

/* ═══ MODAL ══════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.5); display:flex; align-items:flex-end;
  justify-content:center; padding:0;
}
.modal {
  background:var(--surface); border-radius:var(--radius) var(--radius) 0 0;
  width:100%; max-width:100%; max-height:90vh;
  box-shadow:var(--shadow-md); display:flex; flex-direction:column;
}
.modal-header {
  padding:12px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.modal-title { font-size:13px; font-weight:600; }
.modal-close {
  background:none; border:none; font-size:20px; cursor:pointer;
  color:var(--text-sec); line-height:1; padding:2px;
}
.modal-close:hover { color:var(--text); }
.modal-body { padding:14px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.modal-footer {
  padding:10px 14px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:6px; flex-shrink:0;
}

/* ═══ TOAST ══════════════════════════════════════════════════════ */
.toast-container {
  position:fixed; bottom:12px; left:12px; right:12px; z-index:3000;
  display:flex; flex-direction:column; gap:6px; pointer-events:none;
}
.toast {
  padding:8px 12px; border-radius:var(--radius-sm); font-size:11px;
  box-shadow:var(--shadow-md); animation:toast-in .2s ease; color:#fff;
  pointer-events:auto;
}
.toast-success { background:var(--success); }
.toast-error { background:var(--error); }
.toast-warning { background:var(--warning); }
.toast-info { background:var(--teal); }
@keyframes toast-in { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ═══ DASHBOARD ══════════════════════════════════════════════════ */
.dashboard-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.stat-card {
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  padding:12px; box-shadow:var(--shadow); transition:var(--ease); cursor:pointer;
}
.stat-card:active { transform:scale(.98); }
.stat-card .stat-label { font-size:9px; color:var(--text-sec); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.stat-card .stat-value { font-size:20px; font-weight:700; color:var(--primary); margin-top:2px; }
.stat-card .stat-table { font-size:9px; color:var(--teal); margin-top:1px; font-family:'SF Mono',Consolas,monospace; }

/* ═══ OPTIONS EDITOR ═════════════════════════════════════════════ */
.options-editor { display:flex; flex-direction:column; gap:6px; }
.option-row {
  display:flex; align-items:center; gap:6px; padding:6px 8px;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:#fafafa;
}
.option-row.correct { border-color:var(--success); background:rgba(1,122,71,.03); }
.option-label {
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:10px; flex-shrink:0;
  background:var(--primary); color:#fff;
}
.option-row.correct .option-label { background:var(--success); }
.option-inputs { flex:1; display:flex; flex-direction:column; gap:3px; }
.option-correct-btn {
  padding:3px 6px; border-radius:var(--radius-sm); font-size:9px;
  cursor:pointer; border:1px solid var(--border); background:#fff; flex-shrink:0;
}
.option-correct-btn.selected { background:var(--success); color:#fff; border-color:var(--success); }

/* ═══ IMAGES EDITOR ══════════════════════════════════════════════ */
.images-editor { display:flex; flex-direction:column; gap:6px; }
.image-row { display:flex; gap:6px; align-items:center; }
.image-row .input { flex:1; }

/* ═══ RUBRIC EDITOR ══════════════════════════════════════════════ */
.rubric-editor { display:flex; flex-direction:column; gap:6px; }
.rubric-row { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; }

/* ═══ STUDIO ═════════════════════════════════════════════════════ */
.studio-header {
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  padding:10px 12px; margin-bottom:10px; box-shadow:var(--shadow);
}
.studio-header-title {
  display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;
}
.studio-header-title h2 { font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-stats { display:flex; gap:10px; flex-wrap:wrap; }
.studio-stat {
  display:flex; align-items:center; gap:3px; font-size:10px; color:var(--text-sec);
}
.studio-stat strong { color:var(--text); }

.question-list { display:flex; flex-direction:column; gap:2px; }
.question-item {
  display:flex; align-items:center; gap:6px; padding:7px 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:var(--ease);
}
.question-item:hover { background:var(--hover); }
.question-item:active { background:#e8e5ee; }
.question-item.expanded { border-color:var(--teal); }
.question-item .q-num { font-weight:700; font-size:10px; color:var(--text-sec); width:22px; text-align:center; flex-shrink:0; }
.question-item .q-body { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; min-width:0; }
.question-item .q-meta { display:flex; gap:4px; align-items:center; flex-shrink:0; }

.question-editor {
  padding:12px; border:1px solid var(--teal); border-top:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm); background:#f9fbfc;
  margin-top:-2px;
}

.group-header {
  padding:7px 10px; background:rgba(24,134,153,.05);
  border:1px solid rgba(24,134,153,.15); border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap;
}
.group-header .group-title { flex:1; font-weight:600; font-size:11px; color:var(--teal); min-width:0; }
.group-footer {
  height:3px; background:rgba(24,134,153,.12); border-radius:0 0 3px 3px; margin-bottom:6px;
}

/* ═══ DETAIL PAGE ════════════════════════════════════════════════ */
.detail-header {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.detail-header h1 { font-size:14px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.back-btn { font-size:16px; padding:2px 6px; }

/* ═══ SOLUTIONS PANEL ════════════════════════════════════════════ */
.solutions-panel {
  margin-top:16px; border-top:1px solid var(--border); padding-top:12px;
}
.solutions-panel h3 { font-size:12px; margin-bottom:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.solution-card {
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; margin-bottom:6px;
  background:#fafafa;
}
.solution-card.featured { border-left:3px solid var(--gold); }
.solution-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:4px; flex-wrap:wrap; }
.solution-card-body { font-size:11px; line-height:1.5; }

/* ═══ IMPORT AREA ════════════════════════════════════════════════ */
.import-area textarea {
  width:100%; min-height:200px; font-family:'SF Mono','Fira Code',Consolas,monospace;
  font-size:10px; line-height:1.45; padding:10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); resize:vertical;
}
.import-preview {
  margin-top:10px; padding:10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fafafa; font-size:11px;
}

/* ═══ UTILITY ════════════════════════════════════════════════════ */
.text-muted { color:var(--text-sec); }
.text-sm { font-size:10px; }
.text-xs { font-size:9px; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-success { color:var(--success); }
.text-error { color:var(--error); }
.text-teal { color:var(--teal); }
.mt-4 { margin-top:4px; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.gap-8 { gap:8px; }
.flex { display:flex; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mono { font-family:'SF Mono','Fira Code',Consolas,monospace; }

/* ═══ SPINNER ════════════════════════════════════════════════════ */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--teal); border-radius:50%; animation:spin .6s linear infinite; }
.spinner-lg { width:24px; height:24px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ EMPTY STATE ════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:40px 16px; color:var(--text-sec); }
.empty-state h3 { font-size:13px; margin-bottom:4px; color:var(--text); }
.empty-state p { font-size:11px; }

/* ═══ JSON VIEWER ════════════════════════════════════════════════ */
.json-viewer {
  background:#1e1e2e; color:#cdd6f4; padding:10px; border-radius:var(--radius-sm);
  font-family:'SF Mono','Fira Code',Consolas,monospace; font-size:10px;
  max-height:300px; overflow:auto; white-space:pre-wrap; word-break:break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET — 600px+
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .form-row { grid-template-columns:1fr 1fr; }
  .form-row-3 { grid-template-columns:1fr 1fr 1fr; }
  .dashboard-grid { grid-template-columns:repeat(3,1fr); }
  .rubric-row { grid-template-columns:2fr 1fr auto; }

  .modal-overlay { align-items:flex-start; padding:32px 16px; }
  .modal { border-radius:var(--radius); max-width:560px; max-height:calc(100vh - 64px); }
  .modal-lg { max-width:800px; }

  .toast-container { left:auto; right:16px; bottom:auto; top:52px; max-width:320px; }

  .data-table td { max-width:280px; }

  .import-area textarea { min-height:280px; }

  .question-item .q-meta { gap:6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — 960px+
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:960px) {
  /* Sidebar always visible */
  .sidebar {
    transform:translateX(0); width:var(--sidebar-w);
    top:var(--topbar-h);
  }
  .nav-backdrop { display:none; }
  .topbar-toggle { display:none; }

  .content { margin-left:var(--sidebar-w); padding:16px 20px; }

  .dashboard-grid { grid-template-columns:repeat(4,1fr); gap:12px; }

  .modal-overlay { padding:48px 24px; }
  .modal { max-width:600px; }
  .modal-lg { max-width:860px; }

  .toolbar .search-box { max-width:360px; }
}

/* ═══════════════════════════════════════════════════════════════════
   WIDE DESKTOP — 1200px+
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1200px) {
  .content { padding:20px 28px; }
  .dashboard-grid { grid-template-columns:repeat(5,1fr); }
  .data-table td { max-width:320px; }
}