/* ============================================================================
   NAMMA EXAM — INSTITUTE MODULE — SHARED DESIGN SYSTEM
   Same brand family as the main site (navy/gold, Roboto Slab + Inter,
   Noto Kannada) so certificates and student-facing screens stay co-branded.
   The institute head's own dashboard adds one accent (teal) and a
   "credential card" treatment for access codes — a small signature to mark
   it as the professional/B2B surface, not the student consumer site.
   ============================================================================ */

:root {
  /* Core brand (matches nammaexam.in) */
  --navy: #0d2b4e;
  --navy-2: #14396b;
  --gold: #c9942c;
  --gold-light: #e8b954;
  --paper: #f6f3ec;
  --ink: #1b1f2a;
  --ink-soft: #565f6e;
  --green: #1f7a4d;
  --red: #a33b3b;
  --line: #dcd6c8;
  --line-2: #e2dccf;

  /* Institute-portal-only accent */
  --teal: #1c4b4b;
  --teal-light: #2f6d6a;
  --teal-wash: #eaf2f1;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(13, 43, 78, 0.08);
  --shadow-lift: 0 8px 28px rgba(13, 43, 78, 0.14);

  --font-display: 'Roboto Slab', serif;
  --font-body: 'Inter', sans-serif;
  --font-kn: 'Noto Sans Kannada', 'Noto Serif Kannada', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, .display { font-family: var(--font-display); color: var(--navy); }
:lang(kn), [data-lang="kn"] body, .kn-text { font-family: var(--font-kn); }

a { color: var(--navy-2); }
img { max-width: 100%; display: block; }

/* Focus visibility — required, not optional */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.container-wide { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------------- */
/* Top bar — shared across every page, with the one-click language toggle */
/* ---------------------------------------------------------------------- */
.topbar {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: #fff;
}
.topbar .brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--gold);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  flex-shrink: 0;
}
.topbar .inst-tag {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.12);
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lang-switch {
  display: inline-flex;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px;
  position: relative;
}
.lang-switch button {
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.lang-switch button.active {
  background: var(--gold);
  color: var(--navy);
}

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--gold-light); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-light); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--navy); }
.btn-danger { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }

/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; }
input[type="text"], input[type="tel"], input[type="password"], input[type="email"], select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus { border-color: var(--navy-2); }

/* ---------------------------------------------------------------------- */
/* Cards */
/* ---------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-teal { border-top: 4px solid var(--teal); }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.badge-pending { background: #fdf2e0; color: #8a5a12; }
.badge-active { background: #e5f3ea; color: var(--green); }
.badge-rejected, .badge-deactivated { background: #fbe9e9; color: var(--red); }

/* ---------------------------------------------------------------------- */
/* Credential card — the institute portal's signature element.
   Access codes are shown like an issued pass, not plain text in a table. */
/* ---------------------------------------------------------------------- */
.credential {
  position: relative;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow: hidden;
}
.credential::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 68px;
  border-left: 2px dashed rgba(255,255,255,0.25);
}
.credential::after {
  content: "";
  position: absolute;
  left: 68px; top: 50%;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.credential .cred-icon {
  position: absolute; left: 0; top: 0; bottom: 0; width: 68px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.credential .cred-body { margin-left: 82px; }
.credential .cred-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.75; font-weight: 700;
}
.credential .cred-code {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 2px 0 4px;
  word-break: break-all;
}
.credential .cred-meta { font-size: 0.78rem; opacity: 0.85; }

/* ---------------------------------------------------------------------- */
/* Utility */
/* ---------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--ink-soft); font-size: 0.88rem; }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.tabs { display: flex; border-bottom: 2px solid var(--line); margin-bottom: 20px; }
.tabs button {
  flex: 1; background: none; border: none; padding: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tabs button.active { color: var(--navy); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* Sub-nav — the Student / Institute switcher.
   Deliberately NOT another pill on the navy bar (that was reading as
   "all blue, no contrast"). It's its own light strip under the navy bar,
   so it visually separates from the brand bar and reads clearly. */
/* ---------------------------------------------------------------------- */
.subnav {
  background: #fff;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  justify-content: center;
  gap: 4px;
}
.subnav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.subnav a:hover { color: var(--navy); }
.subnav a.current {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
.subnav a .tab-icon { font-size: 1rem; }

/* ---------------------------------------------------------------------- */
/* Question image */
/* ---------------------------------------------------------------------- */
.q-image {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 4px 0 16px;
}

/* ---------------------------------------------------------------------- */
/* Guidance / countdown screen (shown before an exam starts) */
/* ---------------------------------------------------------------------- */
.guidance-wrap { max-width: 560px; margin: 0 auto; padding: 28px 16px 40px; }
.collab-banner {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  color: #fff; border-radius: var(--radius); padding: 16px 18px; text-align: center; margin-bottom: 20px;
}
.collab-banner .names { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.collab-banner .sub { font-size: 0.78rem; opacity: 0.85; margin-top: 2px; }
.guidance-list { list-style: none; padding: 0; margin: 0; }
.guidance-list li {
  display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem; line-height: 1.5;
}
.guidance-list li:last-child { border-bottom: none; }
.guidance-list .gicon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
.guidance-warn {
  background: #fdf2e0; border: 1px solid #e8c98a; border-radius: var(--radius-sm);
  padding: 14px; font-size: 0.86rem; color: #6b4a0f; margin-top: 18px;
}
.guidance-warn b { display: block; margin-bottom: 4px; }
.countdown-box {
  text-align: center; margin-top: 26px; padding: 22px; background: #fff;
  border: 1.5px solid var(--line-2); border-radius: var(--radius);
}
.countdown-num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: var(--navy);
  line-height: 1;
}
.countdown-lbl { font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; }
.countdown-status { font-size: 0.78rem; color: var(--teal); margin-top: 10px; min-height: 1em; }

/* ---------------------------------------------------------------------- */
/* Tab-switch warning popup — urgent, center-screen, must be acknowledged */
/* ---------------------------------------------------------------------- */
.warn-popup-bg {
  position: fixed; inset: 0; background: rgba(163,59,59,0.35);
  display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px;
}
.warn-popup-bg.show { display: flex; }
.warn-popup {
  background: #fff; border-top: 6px solid var(--red); border-radius: var(--radius);
  padding: 22px; max-width: 340px; width: 100%; text-align: center;
}
.warn-popup .wnum { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--red); }
.warn-popup p { font-size: 0.9rem; color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 0.88rem; box-shadow: var(--shadow-lift); z-index: 999;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-dark { border-color: rgba(13,43,78,0.2); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--ink-soft);
}
.empty-state .glyph { font-size: 2rem; margin-bottom: 8px; }

@media (min-width: 640px) {
  .row-sm-between { display: flex; justify-content: space-between; align-items: center; }
}