/* Cloudflare PS Bootcamp Screening Test - styles
 * Cloudflare-branded, mobile-friendly, vanilla CSS (no framework).
 */

:root {
  --cf-orange:       #F6821F;
  --cf-orange-ruby:  #FF6633;
  --cf-orange-dark:  #C46B19;
  --cf-orange-soft:  rgba(246, 130, 31, 0.10);
  --cf-orange-soft2: rgba(246, 130, 31, 0.18);
  --cf-ink:          #222222;
  --cf-gray-light:   #F2F2F2;
  --cf-gray-mid:     #C9C9C9;
  --cf-gray-dark:    #6B6B6B;
  --cf-success:      #2EB67D;
  --cf-error:        #E64646;
  --cf-error-soft:   rgba(230, 70, 70, 0.10);
  --cf-bg:           #FFFFFF;
  --cf-card-bg:      #FFFFFF;
  --cf-shadow:       0 2px 10px rgba(0, 0, 0, 0.06);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--cf-ink);
  background: #F6821F url('/static/bg-orange.svg') center center / cover no-repeat fixed;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--cf-orange); }
button { font: inherit; }
input { font: inherit; }

/* -----------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------*/

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  background: var(--cf-bg);
  border-bottom: 1px solid var(--cf-gray-mid);
}

.wordmark {
  display: flex;
  align-items: center;
}
.cf-logo {
  height: 28px;
  width: auto;
  display: block;
}
.eval-name {
  font-size: 16px;
  color: var(--cf-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------
 * Content shell
 * ---------------------------------------------------------------------*/

.content {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 16px;
}

.page {
  background: var(--cf-card-bg);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--cf-shadow);
}

/* -----------------------------------------------------------------------
 * Registration page
 * ---------------------------------------------------------------------*/

.eval-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--cf-ink);
  letter-spacing: -0.01em;
}

.eval-lede {
  margin: 0 0 24px 0;
  color: var(--cf-gray-dark);
  font-size: 15px;
}

.rules-box {
  background: var(--cf-gray-light);
  border-left: 4px solid var(--cf-orange);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px 0;
}
.rules-box h2 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cf-ink);
}
.rules-box ul { margin: 0; padding-left: 20px; }
.rules-box li { margin-bottom: 6px; font-size: 14px; }

/* Emphasized anti-cheat block on the landing screen */
.rules-anticheat {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fff4e0;
  border: 1px solid var(--cf-orange);
  border-radius: var(--radius-md);
}
.rules-anticheat h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: #8a4b0a;
}
.rules-anticheat p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--cf-ink);
}
.rules-anticheat ul { margin: 0; padding-left: 20px; }
.rules-anticheat li { margin-bottom: 8px; font-size: 14px; }

.register-form .field { margin-bottom: 16px; }
.register-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cf-gray-dark);
}
.register-form input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
  color: var(--cf-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.register-form input:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}

.staff-note {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--cf-orange-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--cf-ink);
}
.staff-note strong { color: var(--cf-orange-dark); }

/* -----------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------*/

.primary-btn {
  background: var(--cf-orange);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  min-width: 120px;
}
.primary-btn:hover:not(:disabled) { background: var(--cf-orange-dark); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.primary-btn:disabled {
  background: var(--cf-gray-mid);
  color: #fff;
  cursor: not-allowed;
}

.secondary-btn {
  background: transparent;
  color: var(--cf-ink);
  border: 1px solid var(--cf-gray-mid);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.secondary-btn:hover { background: var(--cf-gray-light); border-color: var(--cf-gray-dark); }

.danger-btn {
  background: transparent;
  color: var(--cf-error);
  border: 1px solid var(--cf-error);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.danger-btn:hover { background: var(--cf-error-soft); }

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* -----------------------------------------------------------------------
 * Banners
 * ---------------------------------------------------------------------*/

.error-banner {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--cf-error-soft);
  border: 1px solid var(--cf-error);
  border-radius: var(--radius-sm);
  color: var(--cf-error);
  font-size: 14px;
}

/* -----------------------------------------------------------------------
 * Eval (per-question) page
 * ---------------------------------------------------------------------*/

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Quiet numeric countdown: unobtrusive by default, gently emphasized in the
 * final 10 seconds instead of a constantly-animating progress bar. */
.timer-quiet {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}
.timer-quiet-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cf-gray-dark);
}
.timer-quiet-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--cf-ink);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}
/* Final 10 seconds: quiet color shift + a slow, subtle pulse (not frantic). */
.timer-quiet.timer-warn {
  background: var(--cf-error-soft);
}
.timer-quiet.timer-warn .timer-quiet-label,
.timer-quiet.timer-warn .timer-quiet-value {
  color: var(--cf-error);
}
.timer-quiet.timer-warn .timer-quiet-value {
  animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .timer-quiet.timer-warn .timer-quiet-value { animation: none; }
}

.staff-badge {
  padding: 5px 12px;
  background: var(--cf-orange);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.question-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.question-prompt {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 14px 0;
  color: var(--cf-ink);
}
.select-hint {
  font-size: 14px;
  color: var(--cf-gray-dark);
  margin-bottom: 16px;
  font-style: italic;
}

.answer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cf-bg);
  border: 2px solid var(--cf-gray-mid);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
  user-select: none;
}
.option-card:hover:not(.option-card-locked) { border-color: var(--cf-orange); }
.option-card.option-card-checked {
  border-color: var(--cf-orange);
  background: var(--cf-orange-soft);
}
.option-card.option-card-locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.option-card input {
  margin: 4px 0 0 0;
  flex-shrink: 0;
  accent-color: var(--cf-orange);
  cursor: inherit;
}
.option-letter {
  font-weight: 700;
  color: var(--cf-orange);
  flex-shrink: 0;
  min-width: 18px;
}
.option-text {
  font-size: 15px;
  line-height: 1.4;
  flex: 1;
  color: var(--cf-ink);
}

/* -----------------------------------------------------------------------
 * Finish page
 * ---------------------------------------------------------------------*/

.finish-card {
  text-align: center;
  padding: 24px 0;
}
.finish-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.finish-score {
  font-size: 72px;
  font-weight: 700;
  color: var(--cf-orange);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.finish-score-of {
  font-size: 32px;
  color: var(--cf-gray-dark);
  font-weight: 500;
  margin-left: 4px;
}
.finish-message {
  margin-top: 24px;
  font-size: 15px;
  color: var(--cf-ink);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Generic error state */
.error-card {
  background: var(--cf-error-soft);
  padding: 24px;
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--cf-error);
  border: 1px solid var(--cf-error);
}

/* -----------------------------------------------------------------------
 * Mobile breakpoints
 * ---------------------------------------------------------------------*/

@media (max-width: 600px) {
  .site-header {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .content { margin: 16px auto; }
  .page { padding: 20px; }
  .eval-title { font-size: 22px; }
  .question-prompt { font-size: 18px; }
  .progress-row { flex-direction: column; align-items: stretch; }
  .finish-score { font-size: 56px; }
  .finish-score-of { font-size: 24px; }
}

/* =======================================================================
 * Admin pages
 * =====================================================================*/

.page-admin .content,
.admin-shell {
  max-width: 1320px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.admin-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cf-ink);
}
.admin-page-title {
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cf-ink);
  margin: 8px 0 24px;
}
.admin-user {
  font-size: 13px;
  color: var(--cf-gray-dark);
}
.admin-user strong {
  color: var(--cf-ink);
  font-weight: 600;
}
.admin-back {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--cf-gray-dark);
}
.admin-back:hover { color: var(--cf-orange); }

/* The admin topbar renders directly on the orange page background, so its
 * text needs to be white for legible contrast (gray-on-orange is too faint). */
.page-admin .admin-back {
  color: #ffffff;
}
.page-admin .admin-back:hover {
  color: #ffffff;
  text-decoration: underline;
}
.page-admin .admin-user {
  color: rgba(255, 255, 255, 0.92);
}
.page-admin .admin-user strong {
  color: #ffffff;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-topbar-right .secondary-btn { text-decoration: none; }

.field-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cf-gray-dark);
  font-size: 12px;
}
.question-add-form input[type="file"] {
  width: 100%;
  padding: 8px;
  font-size: 13px;
  border: 1px dashed var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
}
.ai-gen-form input[type="file"],
.ai-gen-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
  font-family: inherit;
}
.ai-gen-form input[type="file"] { border-style: dashed; }
.ai-gen-form textarea:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}

/* AI question generation */
.ai-gen-row { display: flex; gap: 12px; align-items: flex-start; }
.ai-gen-form select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
}
.ai-gen-form select:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.ai-gen-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.ai-status-info { background: var(--cf-orange-soft); color: var(--cf-orange-dark); }
.ai-status-ok { background: rgba(46, 182, 125, 0.12); color: #167a4f; }
.ai-status-err { background: var(--cf-error-soft); color: var(--cf-error); }
.ai-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}
.ai-results-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cf-gray-dark);
}
.ai-draft {
  border: 1px dashed var(--cf-orange);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--cf-orange-soft);
}
.ai-draft textarea, .ai-draft input[type="text"], .ai-draft input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
}
.ai-draft .field { margin-bottom: 12px; }
.ai-draft .field-narrow { max-width: 220px; }
.ai-results-bar-btns { display: flex; align-items: center; gap: 8px; }

/* Draft footer holds Add + Discard side by side */
.ai-draft .form-footer { display: flex; gap: 10px; align-items: center; }

/* AI-check row (avoid-duplicates toggle) */
.ai-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.ai-check input { width: auto; }

/* Answer-length balance warning on a draft */
.length-warning {
  display: block;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #fff4e0;
  border: 1px solid var(--cf-orange);
  color: #8a4b0a;
  font-size: 13px;
  font-weight: 500;
}
.ai-draft.draft-imbalanced {
  border-color: var(--cf-error);
  background: rgba(230, 70, 70, 0.06);
}

/* Inline flash shown next to the question list (avoids scroll jump on delete) */
.qm-inline-flash {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  background: #eafaf2;
  color: #0f5c3a;
  border: 1px solid rgba(46, 182, 125, 0.55);
}
.qm-inline-flash.qm-inline-err {
  background: #fdecec;
  color: #b32020;
  border-color: var(--cf-error);
}

/* Bulk-delete toolbar in the "All questions" header */
.qm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.qm-bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cf-gray-dark);
  cursor: pointer;
}
.qm-select-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.qm-select { width: 16px; height: 16px; cursor: pointer; }

/* Question management */
.question-add-form .field { margin-bottom: 16px; }
.question-add-form .field-narrow { max-width: 220px; }
.question-add-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cf-gray-dark);
}
.question-add-form input[type="text"],
.question-add-form input[type="number"],
.question-add-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
}
.question-add-form input:focus,
.question-add-form textarea:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.answer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.answer-letter {
  font-weight: 700;
  color: var(--cf-orange);
  min-width: 18px;
}
.answer-row input[type="text"] { flex: 1; }
.answer-correct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500 !important;
  white-space: nowrap;
  margin: 0 !important;
}
.answer-correct input { accent-color: var(--cf-orange); }

.qm-card {
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.qm-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.qm-id { font-weight: 700; color: var(--cf-gray-dark); font-size: 12px; }
.qm-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qm-time { margin-left: auto; font-size: 12px; color: var(--cf-gray-dark); }
.qm-actions { display: inline-flex; gap: 6px; align-items: center; }
.qm-actions .secondary-btn { text-decoration: none; padding: 4px 10px; font-size: 12px; }
.qm-actions .danger-btn { padding: 4px 10px; font-size: 12px; }
.qm-prompt { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.qm-options { display: flex; flex-direction: column; gap: 4px; }
.qm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--cf-bg);
  border: 1px solid var(--cf-gray-light);
}
.qm-option.qm-correct {
  background: rgba(46, 182, 125, 0.08);
  border-color: rgba(46, 182, 125, 0.5);
  font-weight: 600;
}
.qm-option-text { flex: 1; }

/* Aggregate cards */
.aggregate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.agg-card {
  background: var(--cf-card-bg);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--cf-shadow);
}
.agg-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.agg-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--cf-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.agg-of {
  font-size: 14px;
  color: var(--cf-gray-dark);
  font-weight: 500;
}
.agg-sub {
  font-size: 12px;
  color: var(--cf-gray-dark);
  margin-top: 4px;
}

/* Admin blocks */
.admin-block {
  background: var(--cf-card-bg);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--cf-shadow);
  margin-bottom: 24px;
}
.admin-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-block-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--cf-ink);
}
.students-count {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--cf-gray-dark);
}
.students-count strong {
  color: var(--cf-ink);
  font-weight: 700;
}
.students-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px 0;
  font-size: 14px;
}
.students-shown-count { color: var(--cf-gray-dark); font-size: 13px; }
.admin-help {
  font-size: 13px;
  color: var(--cf-gray-dark);
  margin: 0 0 14px 0;
  line-height: 1.5;
}
.admin-help code {
  background: var(--cf-gray-light);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Filters */
.admin-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-filters input[type="search"] {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  min-width: 240px;
}
.admin-filters input[type="search"]:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cf-ink);
}
.checkbox-inline input[type="checkbox"] {
  accent-color: var(--cf-orange);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--cf-gray-mid);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--cf-card-bg);
}
.admin-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--cf-gray-light);
  border-bottom: 1px solid var(--cf-gray-mid);
  font-weight: 600;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.admin-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cf-gray-light);
  vertical-align: top;
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table tbody tr:hover {
  background: var(--cf-gray-light);
}
.cell-date, .cell-dur, .cell-score, .cell-pct, .cell-used {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cell-email {
  font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  color: var(--cf-gray-dark);
}
.cell-action {
  text-align: right;
  white-space: nowrap;
}
.link-detail {
  text-decoration: none;
  font-weight: 500;
  color: var(--cf-orange);
}
.link-detail:hover {
  text-decoration: underline;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cf-gray-light);
  color: var(--cf-gray-dark);
}
.badge-staff {
  background: var(--cf-orange);
  color: #fff;
}
.badge-warn {
  background: rgba(230, 70, 70, 0.12);
  color: var(--cf-error);
}
.badge-info {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.badge-good {
  background: rgba(46, 182, 125, 0.15);
  color: #167a4f;
}
.badge-bad {
  background: rgba(230, 70, 70, 0.15);
  color: var(--cf-error);
}
.badge-muted {
  background: var(--cf-gray-light);
  color: var(--cf-gray-dark);
}

/* Admission decision block */
.decision-block .decision-current { font-size: 14px; margin-bottom: 12px; }
.decision-current-badge { font-size: 12px; }
.decision-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--cf-gray-light);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.decision-meta { font-size: 12px; color: var(--cf-gray-dark); }
.decision-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.decision-btn { min-width: auto; }
.decision-recommended {
  box-shadow: 0 0 0 3px var(--cf-orange-soft2);
  outline: 2px solid var(--cf-orange);
}

/* Flash banner (post-redirect-get) */
.flash-banner {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}
.flash-banner.flash-ok {
  background: #eafaf2;
  color: #0f5c3a;
  border: 1px solid rgba(46, 182, 125, 0.55);
}
.flash-banner.flash-err {
  background: #fdecec;
  color: #b32020;
  border: 1px solid var(--cf-error);
}

/* Invite + action buttons share a cell */
.cell-action .invite-btn {
  text-decoration: none;
  margin-right: 6px;
  display: inline-block;
}

/* Bulk-invite toolbar above the access-list table */
.invite-bulk-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.invite-bulk-result {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.note-bulk-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.note-bulk-bar input {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 420px;
  box-sizing: border-box;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--cf-ink);
}
.note-bulk-bar input:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 2px rgba(246, 130, 31, 0.2);
}

/* Row-select column in the access-list table */
.cell-select {
  width: 28px;
  text-align: center;
}
.cell-select input {
  accent-color: var(--cf-orange);
  cursor: pointer;
}

/* Per-test approval column in the unified student table */
.cell-track {
  text-align: center;
  white-space: nowrap;
}
.track-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.track-cell input {
  accent-color: var(--cf-orange);
  cursor: pointer;
}
.track-invited {
  font-size: 11px;
  font-weight: 600;
  color: #167a4f;
  background: rgba(46, 182, 125, 0.12);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Test column in attempts / retry-grant tables */
.cell-test {
  white-space: nowrap;
  color: var(--cf-gray-dark);
}

/* Empty state */
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--cf-gray-dark);
  background: var(--cf-gray-light);
  border-radius: var(--radius-md);
  font-size: 14px;
}

/* Allow-list paste form */
.allow-list-add {
  margin-bottom: 18px;
}
.allow-list-add label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.allow-list-add textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 100px;
}
.allow-list-add textarea:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.allow-add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.allow-add-row input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
}
.allow-add-row input[type="text"]:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.allow-add-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.allow-add-result-ok {
  background: rgba(46, 182, 125, 0.12);
  color: #167a4f;
}
.allow-add-result-err {
  background: var(--cf-error-soft);
  color: var(--cf-error);
}

/* Attempt detail */
.attempt-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.attempt-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meta-value {
  font-size: 14px;
  color: var(--cf-ink);
  font-weight: 500;
}
.meta-score {
  font-size: 20px;
  font-weight: 700;
  color: var(--cf-orange);
  font-variant-numeric: tabular-nums;
}
.meta-warn {
  color: var(--cf-error);
  font-weight: 700;
}
.timing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.timing-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Grant retry */
.grant-retry-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.grant-retry-form input[type="text"] {
  flex: 1;
  min-width: 240px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
}
.grant-retry-form input[type="text"]:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-soft);
}
.grants-history {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--cf-gray-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.grants-history-label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cf-gray-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.grants-history ul {
  margin: 0;
  padding-left: 20px;
}

/* Replay cards */
.replay-card {
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.replay-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.replay-position {
  font-weight: 700;
  color: var(--cf-orange);
  font-size: 13px;
}
.replay-category {
  font-size: 11px;
  font-weight: 600;
  color: var(--cf-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.replay-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--cf-gray-dark);
  font-variant-numeric: tabular-nums;
}
.time-ok { color: var(--cf-gray-dark); }
.time-bad { color: var(--cf-error); font-weight: 600; }
.replay-prompt {
  margin: 4px 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cf-ink);
  line-height: 1.4;
}
.replay-sub {
  font-size: 12px;
  color: var(--cf-gray-dark);
  margin-bottom: 8px;
  font-style: italic;
}
.replay-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.replay-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--cf-bg);
  border: 1px solid var(--cf-gray-light);
  font-size: 13px;
}
.replay-option.replay-correct {
  border-color: rgba(46, 182, 125, 0.5);
  background: rgba(46, 182, 125, 0.06);
}
.replay-option.replay-selected {
  font-weight: 600;
}
.replay-option.replay-wrong-pick {
  background: rgba(230, 70, 70, 0.08);
  border-color: rgba(230, 70, 70, 0.5);
}
.replay-option.replay-missed-correct {
  border-style: dashed;
}
.truth-mark {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--cf-success);
  font-weight: 700;
}
.truth-mark-empty {
  color: transparent;
}
.replay-letter {
  font-weight: 700;
  color: var(--cf-orange);
  flex-shrink: 0;
  min-width: 16px;
}
.replay-text {
  flex: 1;
  line-height: 1.4;
}
.pick-mark {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cf-orange);
  background: var(--cf-orange-soft);
  padding: 2px 8px;
  border-radius: 8px;
}

/* Admin mobile */
@media (max-width: 800px) {
  .admin-topbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .admin-block { padding: 16px; }
  .admin-table { font-size: 12px; }
  .admin-table thead th, .admin-table tbody td { padding: 8px 8px; }
  .grant-retry-form input[type="text"] { min-width: 100%; }
}

/* -----------------------------------------------------------------------
   Multi-track: switcher tabs, candidate picker, access-list track checks
   ----------------------------------------------------------------------- */

/* Admin track switcher / question-manager tabs */
.track-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 2px solid var(--cf-gray-mid);
}
.track-tab {
  display: inline-block;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--cf-gray-dark);
  font-weight: 600;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: -2px;
}
.track-tab:hover { color: var(--cf-orange-dark); background: var(--cf-orange-soft); }
.track-tab-active {
  color: var(--cf-ink);
  background: var(--cf-card-bg);
  border-color: var(--cf-gray-mid);
  border-bottom: 2px solid var(--cf-card-bg);
}

/* Access-list: choose which test(s) to invite emails to */
.track-check-group {
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}
.track-check-group legend { font-weight: 600; padding: 0 6px; color: var(--cf-gray-dark); }
.track-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.track-check input { accent-color: var(--cf-orange); }

/* Candidate landing: pick which test they're taking */
.track-choice { display: flex; flex-direction: column; gap: 10px; }
.track-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--cf-gray-mid);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.track-card:hover { border-color: var(--cf-orange); background: var(--cf-orange-soft); }
.track-card input { accent-color: var(--cf-orange); width: 18px; height: 18px; }
.track-card-name { font-weight: 600; font-size: 1.05em; }
.track-single {
  font-weight: 600;
  padding: 8px 0;
}

/* Candidate "not approved" notice */
.notice-box {
  background: var(--cf-orange-soft);
  border: 1px solid var(--cf-orange);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-top: 16px;
}
.notice-box h2 { margin-top: 0; }

/* -----------------------------------------------------------------------
   Students & test access table: fixed layout so it always fits the width
   (no horizontal scrolling). Long values wrap instead of overflowing.
   ----------------------------------------------------------------------- */
.students-table { table-layout: fixed; width: 100%; }

.students-table col.col-select  { width: 28px; }
.students-table col.col-name      { width: 11%; }
.students-table col.col-company   { width: 11%; }
.students-table col.col-email     { width: 14%; }
.students-table col.col-submitter { width: 8%; }
.students-table col.col-added     { width: 9%; }
.students-table col.col-note      { width: 10%; }
.students-table col.col-track     { width: 9%; }
.students-table col.col-action    { width: 11%; }
.students-table .cell-submitter { color: var(--cf-ink); }

/* Compact, tight header text so track names like "Application Security"
   wrap at the space rather than mid-word. */
.students-table thead th {
  font-size: 10px;
  letter-spacing: 0.02em;
  padding-left: 6px;
  padding-right: 6px;
}

/* Sortable column headers (Name, Company, Email): the whole header is a
   button that toggles ascending/descending, with a caret showing state.
   A thin right-edge handle (.col-resizer) drag-resizes the column. */
.students-table th.col-sortable { padding: 0; position: relative; }
.students-table .col-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7px;
  z-index: 2;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.students-table .col-resizer:hover,
.students-table .col-resizer.resizing {
  background: var(--cf-orange);
  opacity: 0.6;
}
.students-table .col-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 6px;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.students-table .col-sort:hover { color: var(--cf-orange); }
.students-table .col-sort:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: -2px; }
.students-table .sort-caret { font-size: 9px; line-height: 1; opacity: 0.4; }
.students-table .sort-caret::before { content: "\2195"; }
.students-table .col-sort.sort-asc .sort-caret,
.students-table .col-sort.sort-desc .sort-caret { opacity: 1; color: var(--cf-orange); }
.students-table .col-sort.sort-asc .sort-caret::before { content: "\2191"; }
.students-table .col-sort.sort-desc .sort-caret::before { content: "\2193"; }

/* Data cells wrap aggressively so no single token (e.g. a long email) can
   force the table wider than its container. */
.students-table td { overflow-wrap: anywhere; word-break: break-word; }
/* Headers wrap at spaces and only break a word if it truly cannot fit. */
.students-table th { overflow-wrap: break-word; word-break: normal; white-space: normal; }

.students-table .cell-name    { font-weight: 600; }
.students-table .cell-company { color: var(--cf-ink); }
.students-table .cell-added   { color: var(--cf-gray-dark); font-size: 11px; white-space: normal; }
.students-table .cell-note    { color: var(--cf-gray-dark); }
.students-table .note-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--cf-ink);
}
.students-table .note-input::placeholder { color: var(--cf-gray-mid); }
.students-table .note-input:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 2px rgba(246, 130, 31, 0.2);
}
.students-table .note-input.note-saved {
  border-color: #57cf7d;
  box-shadow: 0 0 0 2px rgba(87, 207, 125, 0.35);
}
.cell-muted { color: var(--cf-gray-mid); }

/* Per-track cell: checkbox on its own line, chips wrapping beneath it. */
.students-table .cell-track { text-align: center; white-space: normal; }
.students-table .track-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 4px;
}
.track-status-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.track-status-chip.status-done {
  color: #167a4f;
  background: rgba(87, 207, 125, 0.18); /* Success Green #57CF7D */
}
.track-status-chip.status-progress {
  color: #8a5300;
  background: rgba(251, 173, 65, 0.20); /* Mango #FBAD41 */
}

/* Action column: stack the buttons so they fit a narrow column. */
.students-table .cell-action { text-align: left; white-space: normal; }
.students-table .cell-action .secondary-btn,
.students-table .cell-action .danger-btn {
  display: block;
  width: 100%;
  margin: 0 0 4px 0;
  padding: 5px 8px;
  font-size: 11px;
  text-align: center;
}
.students-table .cell-action .danger-btn { margin-bottom: 0; }

/* ==========================================================================
 * Partner submissions review (/admin/submissions) + pending banner
 * ========================================================================== */

/* Small pill used next to section/page titles to show a count. */
.count-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cf-gray-light);
  color: var(--cf-gray-dark);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* Dashboard banner linking to pending partner submissions. Lemon on the orange
 * page background for a high-contrast highlight; dark ink text on Lemon. */
.submissions-banner {
  display: block;
  margin: 0 0 20px 0;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #FFD43C; /* Lemon */
  border: 1px solid var(--cf-orange-dark);
  color: var(--cf-ink);
  font-weight: 700;
  text-decoration: none;
}
.submissions-banner:hover { background: #F5C400; }

.submissions-actions { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.submissions-table th, .submissions-table td { vertical-align: top; }

/* ==========================================================================
 * Partner invite portal (invite.cloudflareacademy.com)
 * ========================================================================== */

/* The portal needs room for the roster table; widen its centered column. */
.page-invite .content { max-width: 1400px; }

.invite-login-form { max-width: 460px; margin-top: 20px; }
.invite-login-form .field { margin-bottom: 16px; }

.invite-portal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.invite-who { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cf-gray-dark); }

/* Max class size notice: brand Lemon highlight. */
.invite-classsize {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #FFD43C;
  color: var(--cf-ink);
  font-size: 15px;
}

/* Upload drop zone. */
.invite-drop {
  margin: 16px 0;
  padding: 28px 20px;
  border: 2px dashed var(--cf-gray-mid);
  border-radius: var(--radius-md);
  background: var(--cf-gray-light);
  text-align: center;
  cursor: pointer;
  color: var(--cf-gray-dark);
}
.invite-drop:hover, .invite-drop.drop-zone-over {
  border-color: var(--cf-orange);
  background: var(--cf-orange-soft);
  color: var(--cf-ink);
}
.invite-drop p { margin: 0; }

.invite-roster-tools { margin: 12px 0; }

/* Roster table: fixed layout + wrapping so the page never scrolls sideways. */
.invite-roster-wrap { width: 100%; }
.roster-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.roster-table th, .roster-table td {
  border: 1px solid var(--cf-gray-light);
  padding: 6px;
  text-align: left;
  vertical-align: middle;
}
.roster-table thead th {
  background: var(--cf-gray-light);
  font-size: 12px;
  color: var(--cf-gray-dark);
  white-space: normal; /* let long class names wrap instead of clipping */
}
.roster-table input[type="text"],
.roster-table input[type="email"],
.roster-table select {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--cf-gray-mid);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
/* Track + status + remove columns stay narrow; the text columns take the rest. */
.roster-table .r-track { width: auto; }
.roster-table td.col-track, .roster-table th.col-track { text-align: center; width: 7%; }
.roster-table td.col-status, .roster-table th.col-status { width: 11%; }
.roster-table td.col-del, .roster-table th.col-del { width: 10%; text-align: center; }
.roster-table .r-del {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid var(--cf-error);
  color: var(--cf-error);
  background: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.roster-table .r-del:hover { background: var(--cf-error-soft); }

.invite-submit-bar { margin: 20px 0; }
.invite-submit-bar .allow-add-result { margin-top: 10px; }

/* Prominent, centered orange highlight while Cloudflare AI reads the sheet. */
.invite-loading {
  display: block;
  margin: 20px auto;
  padding: 16px 22px;
  max-width: 560px;
  text-align: center;
  background: var(--cf-orange);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--cf-shadow);
  animation: invite-pulse 1.2s ease-in-out infinite;
}
@keyframes invite-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Portal tabs: Build a roster / View all submissions. */
.invite-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--cf-gray-light);
  margin: 16px 0 20px;
  flex-wrap: wrap;
}
.invite-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--cf-gray-dark);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.invite-tab:hover { color: var(--cf-ink); }
.invite-tab.is-active {
  color: var(--cf-orange);
  border-bottom-color: var(--cf-orange);
}

/* Status board table: fixed layout + wrapping so the page never scrolls sideways. */
.board-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}
.board-tools .students-count { margin: 0; }
.board-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.board-table th, .board-table td {
  border: 1px solid var(--cf-gray-light);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.board-table thead th {
  background: var(--cf-gray-light);
  font-size: 12px;
  color: var(--cf-gray-dark);
  white-space: normal;
  position: relative;
}
.board-table th.b-sortable { cursor: pointer; user-select: none; padding-right: 16px; }
.board-table th.b-sortable:hover { color: var(--cf-ink); }
.board-table th.sorted-asc::after { content: '\25B2'; position: absolute; right: 5px; font-size: 9px; }
.board-table th.sorted-desc::after { content: '\25BC'; position: absolute; right: 5px; font-size: 9px; }
.board-table td.b-email { font-size: 12px; color: var(--cf-gray-dark); }
.board-empty { color: var(--cf-gray-dark); font-style: italic; margin: 12px 0; }

/* Prominent destructive-action callout above the board (brand Mango caution). */
.board-callout {
  margin: 4px 0 16px;
  padding: 14px 18px;
  border: 1px solid #FBAD41;
  border-left: 6px solid #FBAD41;
  border-radius: var(--radius-md);
  background: rgba(251, 173, 65, 0.12);
}
.board-callout-title {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: #8a5a08;
  margin-bottom: 4px;
}
.board-callout p { margin: 0; font-size: 14px; color: var(--cf-ink); }

/* Per-class Remove / Confirm / Cancel buttons in the board's Actions column. */
.board-table th.b-actions-col, .board-table td.b-actions-col { text-align: left; }
.b-action-line { gap: 6px; flex-wrap: wrap; }
.b-remove, .b-remove-confirm, .b-remove-cancel {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--cf-gray-mid);
  background: #fff;
  color: var(--cf-ink);
}
.b-remove { border-color: var(--cf-error); color: var(--cf-error); }
.b-remove:hover { background: var(--cf-error-soft); }
.b-remove-confirm { border-color: var(--cf-error); background: var(--cf-error); color: #fff; }
.b-remove-confirm:hover { background: #cc3838; }
.b-remove-cancel:hover { background: var(--cf-gray-light); }

/* Status / invite / eval badges (brand-mapped colors). */
.b-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.b-approved { background: rgba(46, 182, 125, 0.16); color: #1c7a52; }   /* Success Green */
.b-pending  { background: rgba(251, 173, 65, 0.20); color: #8a5a08; }   /* Mango #FBAD41 */
.b-rejected { background: rgba(206, 47, 85, 0.14); color: #960C3E; }    /* Raspberry / Cherry */
.b-sent     { background: rgba(46, 182, 125, 0.16); color: #1c7a52; }
.b-confirmed { background: rgba(46, 182, 125, 0.16); color: #1c7a52; } /* Success Green */
.b-tentative { background: rgba(251, 173, 65, 0.22); color: #8a5a08; } /* Mango #FBAD41 */
.b-muted    { color: var(--cf-gray-dark); }
.b-score    { font-weight: 700; color: var(--cf-ink); }

/* One student per row; classes stacked and aligned across Class/Status/Invite/Eval. */
.board-table .b-line {
  min-height: 22px;
  display: flex;
  align-items: center;
}
.board-table .b-line + .b-line {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--cf-gray-light);
}