/* Exam eXecution Assessment Monitor — global styles */

html, body {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

/* Native dropdown popup items must be styled explicitly: Tailwind preflight
   makes options inherit the page's light text color while Chromium draws the
   popup with the system's white background — white-on-white = invisible menu. */
select option {
  background-color: #0f172a;
  color: #e2e8f0;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-image: radial-gradient(circle at 85% 0%, rgba(37, 99, 235, .10), transparent 30rem);
}

button, a, input, select, textarea { transition: all .18s ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .6; }
input:focus, select:focus, textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

body.no-select {
  cursor: default;
}

/* Proctor modal fade/scale */
#proctor-modal {
  transition: opacity 0.15s ease;
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }

/* Palette buttons */
.qnav { transition: background 0.15s ease, transform 0.1s ease; }
.qnav:active { transform: scale(0.92); }

/* Disable any native text selection inside options during exam */
#options * { -webkit-user-select: none; user-select: none; }

/* Collapsible per-question analytics */
details.perq > summary { list-style: none; }
details.perq > summary::-webkit-details-marker { display: none; }
details.perq > summary::marker { content: ''; }
details.perq > summary .chev { transition: transform .2s ease; }
details.perq[open] > summary .chev { transform: rotate(180deg); }
details.perq[open] > summary { border-color: rgba(129, 140, 248, .45); }

/* Application navigation */
.app-shell { min-height: 100vh; }

/* Professional icon set (icons.svg sprite) */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex-shrink: 0; }
.ic-xl { width: 4rem; height: 4rem; flex-shrink: 0; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 260px;
  background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
  border-right: 1px solid rgba(71, 85, 105, .55);
  box-shadow: 16px 0 40px rgba(2, 6, 23, .18);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1), padding .35s cubic-bezier(.4, 0, .2, 1);
}
/* Specificity beats Tailwind's mx-auto so the content always moves with the sidebar. */
.app-shell .app-main { margin-left: 260px; margin-right: 0; min-height: 100vh; transition: margin-left .35s cubic-bezier(.4, 0, .2, 1); }
.app-shell .app-main.sidebar-collapsed { margin-left: 76px; }
.app-sidebar.collapsed { width: 76px; padding-left: 10px; padding-right: 10px; }
.app-sidebar.collapsed .sidebar-brand-copy,
.app-sidebar.collapsed .app-nav-link span,
.app-sidebar.collapsed .app-sidebar-action span,
.app-sidebar.collapsed #admin-chip { display: none; }
.app-sidebar.collapsed .sidebar-profile span { display: none; }
.app-sidebar.collapsed .sidebar-profile { padding-left: 0; padding-right: 0; text-align: center; }
.app-sidebar.collapsed .app-nav-link,
.app-sidebar.collapsed .app-sidebar-action { justify-content: center; text-align: center; }
.app-sidebar.collapsed .sidebar-toggle { position: static; margin: 0 auto 24px; }

/* School seal pinned above the sidebar brand (shrinks when the bar collapses). */
.sidebar-school {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  border-radius: 9999px;
  border: 2px solid rgba(251, 191, 36, .5);
  box-shadow: 0 0 25px rgba(251, 191, 36, .3), 0 0 45px rgba(99, 102, 241, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sidebar-school:hover {
  transform: scale(1.08);
  box-shadow: 0 0 35px rgba(251, 191, 36, .45), 0 0 60px rgba(99, 102, 241, .5);
  cursor: pointer;
}
.app-sidebar.collapsed .sidebar-school { width: 52px; height: 52px; margin-bottom: 10px; }
.app-sidebar.collapsed .sidebar-brand { padding-left: 0; padding-right: 0; }

.sidebar-toggle {
  display: block;
  margin-left: auto;
  margin-bottom: 24px;
  border: 1px solid rgba(99, 102, 241, .35);
  border-radius: 10px;
  background: rgba(30, 41, 59, .8);
  color: #a5b4fc;
  padding: 8px 10px;
  line-height: 1;
}
.sidebar-toggle:hover { background: #3730a3; color: white; border-color: #818cf8; }
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 11px 12px;
  color: #94a3b8;
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.app-nav-link:hover { background: rgba(51, 65, 85, .5); color: #f8fafc; border-color: rgba(99, 102, 241, .18); transform: translateX(3px); }
.app-nav-link.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, .32), rgba(37, 99, 235, .10));
  color: #e0e7ff;
  border-color: rgba(129, 140, 248, .32);
  box-shadow: inset 3px 0 #818cf8, 0 8px 20px rgba(30, 64, 175, .12);
}
.app-sidebar-action {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 11px 12px;
  color: #94a3b8;
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.app-sidebar-action:hover { background: rgba(51, 65, 85, .5); color: white; border-color: rgba(99, 102, 241, .18); transform: translateX(3px); }
.app-main > .bg-slate-800,
.app-main #table-card,
.app-main > section {
  box-shadow: 0 18px 45px rgba(2, 6, 23, .16);
}
@media (max-width: 1100px) {
  .app-sidebar { width: 76px; padding-left: 10px; padding-right: 10px; box-shadow: 12px 0 30px rgba(0,0,0,.25); }
  .app-sidebar.open { width: 260px; padding-left: 16px; padding-right: 16px; }
  .app-sidebar:not(.open) .sidebar-brand-copy,
  .app-sidebar:not(.open) .app-nav-link span,
  .app-sidebar:not(.open) .app-sidebar-action span,
  .app-sidebar:not(.open) #admin-chip { display: none; }
  .app-sidebar:not(.open) .app-nav-link,
  .app-sidebar:not(.open) .app-sidebar-action { justify-content: center; text-align: center; }
  .app-sidebar:not(.open) .sidebar-school { width: 52px; height: 52px; margin-bottom: 10px; }
  .app-sidebar:not(.open) .sidebar-brand { padding-left: 0; padding-right: 0; }
  .app-shell .app-main { margin-left: 76px; }
  .app-shell .app-main.sidebar-expanded { margin-left: 260px; }
  .app-shell .app-main.sidebar-collapsed { margin-left: 76px; }
}

/* ---- Motion polish: gentle page entrances, hover glows, press feedback ---- */
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.app-main { animation: pageIn .4s cubic-bezier(.21, .9, .35, 1) both; }

@keyframes sealFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-seal { animation: sealFloat 5s ease-in-out infinite; }

button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .15s ease;
}
button:active { transform: scale(.97); }

.app-nav-link,
.app-sidebar-action {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}

/* ---- Imported Word math: stacked fractions & radicals (math-html.js) ---- */
.mfrac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.18em;
  line-height: 1.12;
  text-align: center;
}
.mfrac-n { padding: 0 0.25em 0.06em; border-bottom: 1px solid currentColor; }
.mfrac-d { padding: 0.06em 0.25em 0; }

.mrad { display: inline-flex; align-items: flex-start; line-height: 1.15; }
.mrad-i { font-size: 0.6em; margin-right: -0.16em; transform: translateY(0.25em); }
.mrad-b {
  border-top: 1px solid currentColor;
  padding: 0.04em 0.2em 0 0.08em;
  margin-left: 0.04em;
}