/* === Team Portal — Warm Tech Theme === */
/* Style-only migration: no logic, no structure changes */

/* === Accessibility === */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.15s ease;
}
.skip-to-content:focus {
  top: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Modal scroll lock (applied to body when modal is open) */
body.modal-open {
  overflow: hidden;
}

/* === Color Palette (Warm Tech — uses design-tokens.css variables) === */
:root {
  /* Legacy aliases → new tokens (for any JS that reads these).
     NEVER alias a token to itself (--x: var(--x)) — that is a CSS custom-
     property CYCLE which makes the token guaranteed-invalid (empty) and
     silently kills every var(--x) on the page. Four such self-references
     (--text-muted/--accent/--accent-hover/--border) sat here since the
     token migration and nuked those tokens; removed in v9.98.1 — the
     real values come from design-tokens.css. */
  --bg-page: var(--bg);
  --bg-card: var(--surface);
  --bg-header: var(--navy);
  --bg-input: var(--surface);
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --accent-light: var(--accent-dim);
  --border-light: var(--surface-2);
  --highlight-green: var(--teal);
  --highlight-green-bg: var(--teal-dim);
  --highlight-orange: var(--gold);
  --highlight-orange-bg: var(--gold-dim);
  --highlight-red: var(--rose);
  --highlight-red-bg: var(--rose-dim);
  --highlight-blue: var(--blue);
  --highlight-blue-bg: var(--blue-dim);
  --table-header: var(--navy);
  --shadow: rgba(50, 35, 15, 0.04);
  --shadow-hover: rgba(50, 35, 15, 0.08);
}

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

body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* v12.65 (Larry, mobile #2): nothing may make the WHOLE page scroll sideways
   (the "page exceeds the screen, I must zoom out" symptom). A wide table or
   calendar now gets clipped at the page edge instead — wide widgets keep their
   OWN inner overflow-x:auto, so they still scroll within their box. `clip`
   (not `hidden`) is used so it doesn't break the sticky header. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* === Header (Topbar) === */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  background: var(--navy);
  color: #fff;
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Topbar brand with dot */
.topbar-brand {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-glow);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-user {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  margin-right: 4px;
}

.topbar-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-main);
}

.topbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.topbar-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  color: #fff;
}

.badge-newhire { background: var(--teal); }
.badge-agent { background: var(--accent); }
.badge-admin { background: var(--rose); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-main);
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.admin-mode .btn-header {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* === Header User Info === */
.header-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-user-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 400;
  margin-right: 4px;
}

/* === Language Switcher === */
.lang-switcher a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-left: 0.8rem;
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.lang-switcher a.active,
.lang-switcher a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* === Main === */
/* width:100% matters: body is a flex column (sticky footer) and main's
   horizontal auto margins cancel flex stretch, collapsing main to
   fit-content — the page visibly changed width when the CP0/CP1 panels
   swapped content (same trap as the v10.3.1 login-card squeeze). */
main { width: 100%; max-width: var(--container-max); margin: 32px auto; padding: 0 32px; }

/* When viewport is between mobile and wider-than-content, add right padding
   so fixed FABs (right: 28px, width: 72px) don't overlap the main content */
@media (min-width: 820px) and (max-width: 1440px) {
  body.logged-in:has(.events-fab, .ai-notes-fab) main { padding-right: 120px; }
}

section { margin-bottom: 28px; }

h2 {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 { margin-bottom: 0; }

/* === Stats Bar === */
.stats-bar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px;
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* 2x2 stats grid — used inside the overview row */
.stats-bar.stats-2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;  /* equal-height rows so cards stretch */
  gap: 12px;
  margin-bottom: 0;
  height: 100%;         /* fill the overview-grid cell */
}
.stats-bar.stats-2x2 .stat-card {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stats-bar.stats-2x2 .stat-value {
  font-size: 26px;
}

/* Overview row: 2x2 stats (left) + attention panel (right) */
.dashboard-overview {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1fr;
  grid-auto-rows: 1fr;   /* force equal row height */
  gap: 16px;
  margin-bottom: 28px;
  align-items: stretch;
}
/* Both children stretch to fill the row */
.dashboard-overview > * {
  align-self: stretch;
  height: 100%;
  min-height: 100%;
}
@media (max-width: 820px) {
  .dashboard-overview {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .dashboard-overview > * {
    height: auto;
    min-height: 0;
  }
}

/* === Section 5: Stat Cards === */
.stat-card {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(50, 35, 15, 0.06), 0 12px 40px rgba(50, 35, 15, 0.04);
}

.stat-card.accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Stat highlight (teal left border) */
.stat-highlight {
  border-left: 3px solid var(--teal);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 4px;
}

.stat-card.accent .stat-value {
  color: #fff;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

.stat-card.accent .stat-label {
  color: rgba(255, 255, 255, 0.8);
}

.stat-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  font-weight: 400;
}

/* Stat card glow orb */
.stat-card .glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(50px);
  top: -60px;
  right: -40px;
  opacity: 0.4;
  pointer-events: none;
}

/* === Filter Bar === */
.filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Section 8: Input fields */
.filter-input {
  flex: 1;
  padding: 12px 18px;
  border: 1px solid rgba(100, 75, 40, 0.14);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  background: #ffffff;
  color: var(--text);
  transition: border-color 0.2s;
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 121, 58, 0.1);
}

.filter-select {
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  min-height: 1.2em;
}

/* === Cards === */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-base);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 0.5rem; }

.card p {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}

/* Status badges */
.status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--teal-dim);
  color: var(--teal);
}

.status.locked { background: var(--surface-2); color: var(--text-muted); }
.status.good { background: var(--teal-dim); color: var(--teal); }
.status.partial { background: var(--gold-dim); color: var(--gold); }

/* Per-candidate status shown on cards */
.candidate-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 0.4rem;
}

.status-completed { background: var(--teal-dim); color: var(--teal); }
.status-in-progress { background: var(--blue-dim); color: var(--blue); }
.status-locked { background: var(--surface-2); color: var(--text-muted); }
.status-not-started { background: var(--gold-dim); color: var(--gold); }

/* === Tables (shared) === */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th, td {
  padding: 12px 18px;
  text-align: left;
}

thead { background: var(--navy); color: #fff; }
thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
thead th:first-child { border-radius: 10px 0 0 0; }
thead th:last-child { border-radius: 0 10px 0 0; }

tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover td { background: var(--surface-2); }
td {
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

tfoot { background: var(--surface-2); font-weight: bold; }

.center { text-align: center; }

/* === Roster Table === */
.roster-row {
  cursor: pointer;
  transition: background 0.2s;
}

.roster-row:hover { background: var(--accent-dim) !important; }

.roster-row.active {
  background: var(--accent-dim) !important;
  font-weight: 600;
}

/* Checkpoint progress dots */
.dots-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.dot.completed { background: var(--teal); }
.dot.in-progress { background: var(--blue); }
.dot.locked { background: var(--surface-3); }
.dot.not-started { background: var(--gold); }

/* Score highlight colors */
.score-high { color: var(--teal); font-weight: 700; }
.score-mid { color: var(--gold); font-weight: 600; }
.score-low { color: var(--rose); }
.score-na { color: var(--text-muted); }

/* Score values use mono font */
.score-high, .score-mid, .score-low {
  font-family: var(--font-mono);
}

/* === C-Score Detail === */
.detail-label {
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-dim);
}

#detail-name {
  color: var(--text);
  font-weight: 700;
}

/* === Admin-only elements (hidden by default) === */
.admin-only { display: none; }
.actions-cell { display: none; }
.actions-header { display: none; }

.admin-mode .admin-only { display: flex; gap: 0.5rem; }
.admin-mode .actions-cell { display: table-cell; text-align: center; }
.admin-mode .actions-header { display: table-cell; }

/* === Buttons === */
/* Sections 8-11: Buttons */

/* a11y: neutral base for <button> elements that replaced clickable divs
   (candidate rows, calendar cells, monitor alerts, journey dots, …).
   Declared BEFORE the widget classes so their own rules win per-property;
   this only strips the UA button chrome they never expected. */
.btn-unstyled {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-user-select: text; /* buttons default to none — keep names/emails copyable */
  user-select: text;
  /* sizing/display intentionally NOT set — the widget's own class decides */
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 3px 12px rgba(212, 121, 58, 0.2);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* Teal variant of the primary button — same size, different accent */
.btn-primary.btn-teal {
  background: var(--teal-deep);
  box-shadow: 0 3px 12px rgba(52, 97, 94, 0.2);
}
.btn-primary.btn-teal:hover {
  background: #2a5350;
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-dim);
  border: 1px solid rgba(100, 75, 40, 0.08);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--surface-2);
  border-color: rgba(100, 75, 40, 0.14);
}

.btn-danger {
  background: var(--rose);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover { background: #c43c3c; }

.btn-icon {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: all 0.2s;
  color: var(--text-dim);
}

.btn-icon:hover { background: var(--accent-dim); color: var(--accent); }

.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}

.btn-close:hover { color: var(--text); }

/* === Modal === */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* v12.13: softer, slightly warm scrim (was flat 50% black) so the modal's
     symmetric shadow halo reads as float instead of a hard pasted-on edge. */
  background: rgba(22, 16, 10, 0.44);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  /* v12.61: horizontal breathing room on phones + a little less top gap. */
  padding: 4vh 12px;
  box-sizing: border-box;
  overflow-y: auto;
}

.modal-overlay.open {
  display: flex;
}

/* In-page Dialog (replaces native confirm/alert) */
.dialog-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.dialog-overlay.open { display: flex; }
.dialog-box {
  background: var(--surface, #fff);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.18s ease-out;
}
.dialog-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.dialog-msg {
  font-size: 14px;
  color: var(--text-dim, #6b6963);
  line-height: 1.5;
  margin-bottom: 18px;
  white-space: pre-wrap;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.dialog-actions .btn-secondary,
.dialog-actions .btn-primary,
.dialog-actions .btn-danger {
  min-width: 88px;
  padding: 8px 16px;
  font-size: 13px;
}

.modal {
  background: #ffffff;
  border-radius: 14px;
  width: 90%;
  max-width: 520px;
  box-shadow: var(--shadow-modal);
  animation: fadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* v12.61 (Larry, mobile): the MODAL scrolls internally (was overlay-only,
     which stranded the top ✕ after scrolling a tall form on a phone). The
     sticky header below keeps ✕ reachable at all times. dvh tracks mobile
     browser chrome; vh is the fallback for older engines. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Header stays pinned so the ✕ close never scrolls out of reach. */
.modal > .modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* v12.13: recruiters/SMDs edit their downline through the SAME "編輯候選人"
   (#admin-modal) form as admin, opened in scoped mode. These rows are the
   admin-only machinery — password reset, exam dates/scores/checkpoints
   (incl. the reward-driving examPassedDate), notes, promote, delete — hidden
   when the form is scoped. Everyday fields (name/email/join/upline/state/
   agent-id) stay. */
#admin-form.rc-scoped #row-c-password,
#admin-form.rc-scoped #modal-approvals,
#admin-form.rc-scoped #btn-modal-archive,
#admin-form.rc-scoped #btn-modal-restore,
#admin-form.rc-scoped #admin-advanced,
#admin-form.rc-scoped #notes-section,
#admin-form.rc-scoped #btn-promote-agent,
#admin-form.rc-scoped #btn-delete {
  display: none !important;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* === Form === */

.form-section {
  margin-bottom: 1.5rem;
}

.form-section h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.form-row {
  margin-bottom: 0.75rem;
}

.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

/* v12.36: textarea joined the base rule — it was the missing selector behind
   every "glued to the edge" text box (announce message, archive note...):
   unstyled textareas fell back to the browser default size + the * reset's
   padding:0. Component-specific rules later in the file still win. */
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(100, 75, 40, 0.14);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-main);
  background: #ffffff;
  color: var(--text);
  transition: border-color 0.2s;
}
.form-row textarea { resize: vertical; }

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 121, 58, 0.1);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}

/* v12.27b: subtle helper text under a form field (e.g. convert-modal exam-state
   confirm nudge). Non-alarming — it's guidance, not an error. */
.field-hint {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* === Candidate Selector === */
.selector-section { text-align: center; }

.selector-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-md);
  max-width: 420px;
  margin: 2rem auto;
}

.selector-card h2 {
  color: var(--text);
  margin-bottom: 1.2rem;
  font-size: 18px;
  font-weight: 700;
}

.selector-dropdown {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-main);
  transition: border-color 0.2s;
}

.selector-dropdown:focus {
  outline: none;
  border-color: var(--accent);
}

/* === Login Form === */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-form .form-row label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
  text-align: left;
}

.login-form .form-row input {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  transition: border-color 0.2s;
}

.login-form .form-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Password field with show/hide eye toggle */
.pw-field {
  position: relative;
}
.form-row .pw-field input {
  padding-right: 44px;
}
.pw-reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.pw-reveal:hover,
.pw-reveal:focus-visible,
.pw-reveal[aria-pressed="true"] {
  opacity: 1;
}

.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  margin-top: 0.5rem;
}

.login-error {
  color: var(--rose);
  font-size: 13px;
  min-height: 1.2em;
  text-align: center;
}

/* === Dashboard Hidden State === */
.dashboard-hidden { display: none; }

/* === Dashboard Welcome === */
.dash-welcome {
  margin-bottom: 28px;
}

.dash-welcome h1 {
  font-size: 28px;
  font-weight: 300;
  color: var(--text-dim);
  margin: 0;
}

.dash-welcome h1 strong {
  font-weight: 700;
  color: var(--text);
}

/* v12.27: exam-state reminder pill under the welcome line. Deliberately a
   NEUTRAL surface pill, not teal/green — those read as "completed" in this
   token system, and an exam state is a fact, not an achievement. */
.exam-state-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
}
.exam-state-chip[hidden] { display: none; }
.exam-state-chip .chip-label {
  color: var(--text-muted);
  font-weight: 500;
}
.exam-state-chip .chip-value {
  color: var(--text);
  font-weight: 700;
}

/* === Section 4: Checkpoint Progress Bar === */
.checkpoint-wrapper {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 20px 24px; /* v11.7: two dots don't need 28/32 of air */
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  margin-bottom: 24px;
}

.checkpoint-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.checkpoint-header-bar h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.checkpoint-progress-text {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* === Two-Column Layout (reference design) === */
.two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}

.content-col {}

/* Section 19: Section titles */
.section-title {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === Sidebar Cards === */
.sidebar-col {
  position: sticky;
  top: 74px;
  align-self: start;
}

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  text-align: center;
  transition: all var(--duration-base);
}

.sidebar-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-label-upper {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* === Quick Jump Nav (sidebar) === */
.quick-nav {
  padding: 18px 20px;
}

.quick-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.quick-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}

.quick-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.quick-nav-item.active-nav {
  background: rgba(212, 121, 58, 0.1);
  color: var(--accent);
  font-weight: 600;
}

.quick-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.quick-nav-dot.dot-done { background: var(--teal); }
.quick-nav-dot.dot-current { background: var(--accent); box-shadow: 0 0 6px rgba(212, 121, 58, 0.3); }
.quick-nav-dot.dot-locked { background: var(--surface-3); }
.quick-nav-dot.dot-pending { background: var(--blue); }

/* Section 15: Progress sidebar values */
.sidebar-stat-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
}

.sidebar-progress-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}

.sidebar-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #3bc4b4);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-stat-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
  font-weight: 400;
}

/* Section 16: Exam Reward Card */
.sidebar-reward-card {
  background: linear-gradient(135deg, rgba(196, 154, 60, 0.1), rgba(196, 154, 60, 0.18));
  border: 1px solid rgba(196, 154, 60, 0.2);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-reward-icon {
  font-size: 28px;
}

.sidebar-reward-title {
  font-size: 15px;
  font-weight: 700;
  color: #8b6914;
}

.sidebar-reward-detail {
  font-size: 13px;
  color: #a07d30;
  font-weight: 400;
}

/* Reward state variants */
.sidebar-reward-card.countdown-active {
  background: var(--blue-dim);
  border-color: rgba(74, 144, 217, 0.2);
}
.sidebar-reward-card.countdown-active .sidebar-reward-icon { color: var(--blue); }
.sidebar-reward-card.countdown-active .sidebar-reward-title { color: var(--blue); }

.sidebar-reward-card.countdown-urgent {
  background: var(--gold-dim);
  border-color: rgba(196, 154, 60, 0.2);
}
.sidebar-reward-card.countdown-urgent .sidebar-reward-icon { color: var(--gold); }
.sidebar-reward-card.countdown-urgent .sidebar-reward-title { color: var(--gold); }

.sidebar-reward-card.countdown-reward {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold-strong));
}

.sidebar-reward-card.countdown-done {
  background: var(--teal-dim);
  border-color: rgba(42, 157, 143, 0.2);
}
.sidebar-reward-card.countdown-done .sidebar-reward-icon { color: var(--teal); }
.sidebar-reward-card.countdown-done .sidebar-reward-title { color: var(--teal); }

.sidebar-reward-card.countdown-expired {
  background: var(--surface-2);
  border-color: var(--border);
}
.sidebar-reward-card.countdown-expired .sidebar-reward-icon { color: var(--text-muted); }
.sidebar-reward-card.countdown-expired .sidebar-reward-title { color: var(--text-muted); }

/* === Section 17: Events FAB === */
/* ═══ Floating Action Buttons (AI Notes + Events) — middle-right stack ═══ */
/* FABs are for logged-in users only — the login gate shows none */
body:not(.logged-in) .events-fab,
body:not(.logged-in) .ai-notes-fab {
  display: none;
}

.events-fab,
.ai-notes-fab {
  position: fixed;
  right: 28px;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-main);
  transition: transform 0.25s, box-shadow 0.25s;
  z-index: 50;
  padding: 0;
}

.events-fab {
  top: calc(50% + 28px);      /* middle-right, below center */
  background: var(--navy);
  box-shadow: 0 6px 24px rgba(44, 62, 80, 0.32);
}
.events-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(44, 62, 80, 0.42);
}

.ai-notes-fab {
  top: calc(50% - 100px);     /* middle-right, above center — ~56px gap from events */
  bottom: auto;               /* override previous bottom positioning */
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.38), 0 2px 10px rgba(168, 85, 247, 0.28);
}
.ai-notes-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(99, 102, 241, 0.48), 0 4px 14px rgba(168, 85, 247, 0.38);
}

/* Both buttons use the same icon + label sizing — visual parity */
.events-fab .fab-icon,
.ai-notes-fab .fab-icon {
  font-size: 24px;
  line-height: 1;
}
.events-fab .fab-label,
.ai-notes-fab .fab-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.92);
}

/* Guest-locked FABs — shown to guests but gated. A small lock badge signals
   the feature is candidate-only; clicking opens an explainer dialog. */
.fab-guest-locked { opacity: 0.85; }
.fab-guest-locked::after {
  content: "🔒";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  pointer-events: none;  /* don't intercept the FAB click */
}

/* (Old dash-blocks removed — replaced by checkpoint-wrapper + two-col + sidebar) */

/* === Progress Bar === */
.progress-bar {
  width: 100%;
  height: 20px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  border-radius: var(--radius-sm);
  transition: width 0.6s var(--ease-out);
  min-width: 0;
}

/* === Journey Section === */
.journey-section { margin-bottom: 28px; }

/* Checkpoint track — horizontal with connecting lines */
.journey-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
  padding: 8px 0;
}

/* Paired checkpoint "+" connector */
.journey-pair-connector {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  flex-shrink: 0;
}

/* Section 4.6: Connecting lines between nodes */
.journey-arrow {
  flex: 0 1 40px;
  height: 3px;
  background: var(--surface-3);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  min-width: 20px;
}

/* Completed line segments */
.journey-completed + .journey-arrow {
  background: var(--teal);
}

/* Active/partial line */
.journey-arrow:has(+ .journey-in-progress),
.journey-arrow:has(+ .journey-pending-approval) {
  background: linear-gradient(90deg, var(--teal), var(--surface-3));
}

/* Checkpoint node */
.journey-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-base);
  min-width: 80px;
  flex: 1;
  border: none;
  background: none;
  position: relative;
  z-index: 2;
}

.journey-dot:hover .journey-dot-icon {
  transform: scale(1.12);
}

.journey-dot.journey-active .journey-dot-icon {
  outline: 3px solid var(--accent-glow);
  outline-offset: 3px;
}

/* Section 4.4: Checkpoint node icons — 44x44 ROUNDED SQUARES */
.journey-dot-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s;
  cursor: pointer;
}

/* COMPLETED nodes */
.journey-completed .journey-dot-icon {
  background: var(--teal);
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(42, 157, 143, 0.25);
}

/* CURRENT / IN PROGRESS node */
.journey-in-progress .journey-dot-icon {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 3px 16px rgba(212, 121, 58, 0.2);
  animation: pulse-node 2s ease-in-out infinite;
}

/* NOT STARTED nodes */
.journey-not-started .journey-dot-icon {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 2px dashed rgba(100, 75, 40, 0.14);
}

/* LOCKED / FUTURE nodes */
.journey-locked .journey-dot-icon {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 2px dashed rgba(100, 75, 40, 0.14);
}

/* PENDING APPROVAL */
.journey-pending-approval .journey-dot-icon {
  background: rgba(74, 144, 217, 0.1);
  color: var(--blue);
  border: 2px solid var(--blue);
  animation: pulse-small 1.5s infinite;
}

/* Node tooltip on hover */
.journey-dot::before {
  content: attr(data-cp);
  position: absolute;
  bottom: calc(100% + 8px);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.25s;
  pointer-events: none;
  z-index: 10;
}

.journey-dot:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* Section 4.5: Checkpoint labels */
.journey-dot-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  line-height: 1.2;
}

.journey-dot-status {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.journey-completed .journey-dot-status { color: var(--teal); }
.journey-in-progress .journey-dot-status { color: var(--accent); }
.journey-pending-approval .journey-dot-status { color: var(--blue); }

/* === Section 14: Content Cards / Journey Panels === */
.journey-panels { margin-top: 0; }

.journey-panel {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  transition: all 0.35s;
}

.journey-panel:hover {
  box-shadow: 0 4px 20px rgba(50, 35, 15, 0.06), 0 12px 40px rgba(50, 35, 15, 0.04);
}

/* Highlighted state when jumped to */
.journey-panel.highlighted {
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 3px var(--accent-dim), var(--shadow-md);
  animation: highlightPop 0.4s ease;
}

.journey-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
  border-left: 4px solid transparent;
}

.journey-panel-header:hover { background: var(--surface-2); }

.journey-panel-header.journey-completed {
  border-left-color: var(--teal);
}

.journey-panel-header.journey-in-progress {
  border-left-color: var(--accent);
}

.journey-panel-header.journey-not-started {
  border-left-color: var(--gold);
}

.journey-panel-header.journey-locked {
  border-left-color: var(--surface-3);
}

.journey-panel-header.journey-pending-approval {
  border-left-color: var(--blue);
}

.journey-panel-title {
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.journey-panel-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Chevron indicator */
.journey-panel-status::after {
  content: "▸";
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.35s;
  display: inline-block;
}

.journey-panel-open .journey-panel-status::after {
  transform: rotate(90deg);
}

/* Status color on panel header text */
.journey-panel-header.journey-completed .journey-panel-status { color: var(--teal); }
.journey-panel-header.journey-in-progress .journey-panel-status { color: var(--accent); }
.journey-panel-header.journey-pending-approval .journey-panel-status { color: var(--blue); }

.journey-panel-body {
  display: none;
  padding: 0 24px 22px;
  border-top: 1px solid rgba(100, 75, 40, 0.08);
}

.journey-panel-open .journey-panel-body {
  display: block;
  animation: fadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journey-panel-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin: 16px 0;
  font-weight: 300;
  line-height: 1.6;
}

.journey-panel-body h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 8px;
}

.cp-guest-cta {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.journey-locked-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 16px;
  font-size: 14px;
  font-style: italic;
}

.journey-coming-soon {
  text-align: center;
  color: var(--text-muted);
  padding: 16px;
  font-size: 14px;
}

/* Checkpoint Submission Forms */
.cp-submission-form {
  margin-top: 1rem;
  padding: 18px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.cp-submission-form label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}

.cp-submission-form input,
.cp-submission-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  background: var(--surface);
  color: var(--text);
  margin-bottom: 12px;
}

.cp-submission-form textarea {
  min-height: 80px;
  resize: vertical;
}

.cp-submission-form .btn-submit-cp {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 3px 12px var(--accent-glow);
}

.cp-submission-form .btn-submit-cp:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.cp-ready-btn {
  display: block;
  margin: 1.2rem auto;
  padding: 12px 28px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 3px 12px rgba(42, 157, 143, 0.25);
}

.cp-ready-btn:hover {
  background: #238b7e;
  transform: translateY(-1px);
}

.cp-pending-msg {
  text-align: center;
  padding: 14px 20px;
  background: var(--blue-dim);
  border: 1px solid rgba(74, 144, 217, 0.2);
  border-radius: var(--radius-sm);
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  margin-top: 1rem;
}

.cp-rejected-msg {
  padding: 14px 20px;
  background: var(--rose-dim);
  border: 1px solid rgba(217, 79, 79, 0.15);
  border-radius: var(--radius-sm);
  color: var(--rose);
  font-size: 13px;
  font-weight: 500;
  margin-top: 1rem;
}

.cp-rejected-msg .rejection-reason {
  margin-top: 0.5rem;
  font-style: italic;
}

/* Section 18: Success banners */
.cp-completed-msg {
  text-align: left;
  padding: 14px 20px;
  background: rgba(76, 175, 106, 0.1);
  border: 1px solid rgba(76, 175, 106, 0.15);
  border-radius: 10px;
  color: #2d7a42;
  font-size: 13px;
  font-weight: 500;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Agent Action Sections (Case & Recruiting) === */
.agent-action-section {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.agent-action-section h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* === Knowledge Bank (Agent Mode) === */
.knowledge-bank {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.knowledge-bank h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.library-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.library-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-main);
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.2s;
  margin-bottom: -2px;
}
.library-tab:hover {
  color: var(--text);
}
.library-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.library-tab-icon { font-size: 1.1rem; }
.library-tab-label { font-size: 12px; }

.library-content {
  min-height: 200px;
}
.library-cat-desc {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-weight: 300;
}
.library-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 1.2rem 0 0.6rem;
}
.library-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2rem 0;
}

/* === Trial Access === */
.trial-divider {
  text-align: center;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 12px;
  position: relative;
}
.trial-divider::before, .trial-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.trial-divider::before { left: 0; }
.trial-divider::after { right: 0; }
.trial-btn {
  width: 100%;
  padding: 10px;
  font-size: 13px;
}
.trial-banner {
  background: var(--blue-dim);
  border: 1px solid rgba(74, 144, 217, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 0.8rem;
  text-align: center;
  font-size: 13px;
  color: var(--blue);
}
.trial-banner p { margin: 0 0 0.5rem; }
.trial-banner button { margin-top: 0.3rem; }

/* === Level Badges === */
.level-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.level-new_hire { background: var(--surface-2); color: var(--text-dim); }
.level-training_associate { background: var(--surface-2); color: var(--text-dim); }
.level-associate { background: var(--blue-dim); color: var(--blue); }
.level-senior_associate { background: var(--teal-dim); color: var(--teal); }
.level-marketing_director { background: var(--gold-dim); color: var(--gold); }
.level-senior_marketing_director { background: #fdf0e6; color: #c0570a; }
.level-junior { background: var(--blue-dim); color: var(--blue); }
.level-middle { background: var(--teal-dim); color: var(--teal); }
.level-senior { background: var(--gold-dim); color: var(--gold); }

/* === Mode Switcher (Training ↔ Sales) === */
.mode-switcher {
  display: flex;
  gap: 0;
  margin-top: 1rem;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.mode-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mode-btn:hover {
  color: var(--text-main);
  background: var(--surface-1);
}
.mode-btn.mode-active {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.mode-icon {
  font-size: 16px;
}

/* === Level Tools Grid === */
.level-tools-section {
  margin: 1.5rem auto;
  max-width: 900px;
  padding: 0 1rem;
}
.level-tools-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
.level-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Section 13: Tool cards */
.level-tool-card {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  transition: all 0.3s;
}
.level-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(50, 35, 15, 0.06), 0 12px 40px rgba(50, 35, 15, 0.04);
}
.level-tool-icon { font-size: 2rem; margin-bottom: 12px; }
.level-tool-name { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 12px; }
.level-tool-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 300; }

/* === Document Library === */
.docs-section { margin-top: 2rem; }
.docs-list table { width: 100%; font-size: 13px; }
.docs-list a { color: var(--accent); text-decoration: none; font-weight: 500; }
.docs-list a:hover { text-decoration: underline; }

/* === Inline Forms === */
.inline-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.inline-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.inline-form-grid .form-row label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  display: block;
  margin-bottom: 4px;
}
.inline-form-grid .form-row input,
.inline-form-grid .form-row select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  background: var(--surface);
  color: var(--text);
}
.inline-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* === Agent Tools === */
.agent-tools-section {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.agent-tools-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.agent-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tool-card-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.tool-panel-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 8px;
  box-shadow: var(--shadow-sm);
}

/* === Schedule Timeline === */
.schedule-section { margin-bottom: 28px; }

.schedule-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.schedule-week {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--navy);
  transition: all var(--duration-base);
}

.schedule-week:hover {
  box-shadow: var(--shadow-md);
}

.schedule-week-title {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  font-size: 14px;
}

.schedule-tasks {
  list-style: none;
  padding: 0;
}

.schedule-task {
  font-size: 13px;
  color: var(--text-dim);
  padding: 0.3rem 0;
  padding-left: 1.2rem;
  position: relative;
}

.schedule-task::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.task-study::before { background: var(--blue); }
.task-quiz::before { background: var(--gold); }
.task-action::before { background: var(--teal); }

/* === Knowledge Bank === */
.kb-section { margin-bottom: 28px; }

.kb-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.kb-group {
  margin-bottom: 1.5rem;
}

/* KB Accordion — File List Style (matches reference) */
.kb-accordion {
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* CP0 phase-grouped accordions — colored left edge for quick visual scanning */
.kb-accordion-phase0 { border-left: 3px solid var(--navy); }
.kb-accordion-phase1 { border-left: 3px solid var(--teal); }
.kb-accordion-phase2 { border-left: 3px solid var(--blue); }
.kb-accordion-phase3 { border-left: 3px solid var(--accent); }

/* CP1 day-grouped accordions — gradient from teal (study days) to accent (exam days) */
.kb-accordion-day0,
.kb-accordion-day1,
.kb-accordion-day2,
.kb-accordion-day3,
.kb-accordion-day4,
.kb-accordion-day5,
.kb-accordion-day6,
.kb-accordion-day7 { border-left: 3px solid var(--teal); }

.kb-accordion-day8,
.kb-accordion-day9 { border-left: 3px solid var(--gold); }

.kb-accordion-day10 { border-left: 3px solid var(--accent); }

.kb-acc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.kb-acc-header:hover {
  background: var(--surface-2);
}

.kb-acc-arrow {
  font-size: 14px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
  transition: transform var(--duration-base);
  display: inline-block;
}

.kb-acc-open .kb-acc-arrow {
  transform: rotate(90deg);
}

.kb-acc-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  flex: 1;
}

.kb-acc-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.kb-acc-body {
  display: none;
  padding: 0 16px 12px;
  background: var(--surface);
}

.kb-acc-open .kb-acc-body {
  display: block;
  animation: fadeIn 0.2s var(--ease-out);
}

/* File list items */
.kb-acc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  cursor: pointer;
  border-bottom: none;
}

.kb-acc-item:hover {
  background: var(--surface-2);
}

.kb-acc-item:last-child {
  border-bottom: none;
}

.kb-acc-item-title {
  font-size: 15px;
  color: var(--text);
  flex: 1;
  margin-right: 0.5rem;
  font-weight: 600;
}

.kb-cp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--navy);
}

.kb-week-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 1rem 0 0.4rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--blue);
}

.kb-group h3 {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.kb-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.kb-item:hover {
  box-shadow: var(--shadow-md);
}

.kb-item-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.kb-item-desc {
  font-size: 13px;
  color: var(--text-dim);
  flex: 2;
  font-weight: 300;
}

/* Small action buttons — teal "View", orange "Start" */
.btn-sm {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-main);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm.btn-primary {
  background: var(--teal-dim);
  color: var(--teal);
  border: none;
  box-shadow: none;
  padding: 5px 14px;
}

.btn-sm.btn-primary:hover {
  background: var(--teal);
  color: #fff;
  transform: none;
}

.btn-sm.btn-secondary {
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  padding: 5px 14px;
}

.btn-sm.btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}

.kb-btn-group {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* === Content Viewer Modal — Large & Readable === */
.viewer-modal {
  max-width: 1100px;
  width: 96%;
  /* v12.63 (Larry, mobile #5): dvh tracks the phone's real viewport (vh
     included the hidden address-bar height, pushing the doc past the screen
     so the close ✕ scrolled away). overflow:hidden keeps the OUTER box fixed
     (header + the internal .viewer-content scroll do the work) so ✕ stays. */
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.viewer-modal .modal-header {
  flex-shrink: 0;
}

.viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-content {
  padding: 32px 48px;
  overflow-y: auto;
  /* v12.65 (Larry #4): the doc could be swiped left/right into blank space —
     a wide markdown table / long code line pushed the content box wider than
     the viewer. Clip horizontally; wide children get their OWN scroll below. */
  overflow-x: hidden;
  overflow-wrap: anywhere;
  flex: 1;
  line-height: 2;
  font-size: 17px;
  color: var(--text);
  background: #ffffff;
}

.viewer-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--navy);
}

.viewer-content h2 {
  font-size: 23px;
  font-weight: 700;
  color: var(--text);
  margin: 1.8rem 0 0.8rem;
}

.viewer-content h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 1.5rem 0 0.6rem;
}

.viewer-content h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 1.2rem 0 0.5rem;
}

.viewer-content p { margin: 0.7rem 0; }

.viewer-content ul, .viewer-content ol { margin: 0.7rem 0 0.7rem 1.8rem; }
.viewer-content li { margin: 0.4rem 0; font-size: 17px; }

.viewer-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: 13px;
}

.viewer-content th, .viewer-content td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
}

.viewer-content th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.viewer-content tr:nth-child(even) { background: var(--surface-2); }
.viewer-content tr:hover td { background: var(--surface-2); }

.viewer-content blockquote {
  border-left: 4px solid var(--accent);
  margin: 0.8rem 0;
  padding: 12px 18px;
  background: var(--accent-dim);
  color: var(--text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.viewer-content code {
  background: var(--surface-2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: var(--font-mono);
}

.viewer-content pre {
  background: var(--surface-2);
  padding: 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0.8rem 0;
}

.viewer-content pre code { background: none; padding: 0; }

.viewer-content strong { color: var(--accent); }

.viewer-content hr {
  border: none;
  border-top: 1px solid rgba(100, 75, 40, 0.08);
  margin: 2rem 0;
}

/* Images in viewer — large, centered, with breathing room */
.viewer-content img {
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 2rem auto;
  border-radius: 12px;
  border: 1px solid rgba(100, 75, 40, 0.06);
}

/* Tables in viewer — larger text */
.viewer-content table {
  font-size: 15px;
}

.viewer-content th {
  font-size: 13px;
  padding: 12px 16px;
}

.viewer-content td {
  padding: 10px 16px;
  font-size: 15px;
}

/* Code blocks — larger */
.viewer-content code {
  font-size: 15px;
}

/* === Section 6: Attention Needed / Monitor === */
.monitor-section { margin-bottom: 28px; }
.monitor-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: #d94f4f;
}

/* Compact monitor panel (lives inside .dashboard-overview) */
.monitor-compact {
  background: #fff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.monitor-compact .monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.monitor-compact .monitor-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #d94f4f;
  margin: 0;
}
.monitor-compact .monitor-header .inline-badge {
  background: #d94f4f;
  color: #fff;
  margin-left: 0;
}
.monitor-compact .monitor-header .inline-badge[data-count="0"] {
  background: var(--teal);
  display: inline-block; /* override hide rule for count=0 on this element */
}
.btn-link {
  background: none;
  border: none;
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.btn-link:hover { background: rgba(52, 97, 94, 0.08); }

/* Compact list variant — smaller rows */
.monitor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.monitor-list-compact {
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.monitor-list-compact .monitor-alert {
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
}
.monitor-list-compact .monitor-alert:hover { transform: none; }
.monitor-list-compact .monitor-name { font-size: 13px; }
.monitor-list-compact .monitor-detail { font-size: 11px; }
.monitor-list-compact .monitor-badge { font-size: 10px; padding: 2px 7px; }

.monitor-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-left: 4px solid #d94f4f;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  transition: all 0.25s;
}

.monitor-alert:hover { transform: translateX(4px); }

.monitor-stalled { border-left-color: #d94f4f; }
.monitor-low_score { border-left-color: var(--gold); }
.monitor-inactive { border-left-color: var(--text-muted); }

.monitor-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.monitor-stalled .monitor-badge { background: rgba(217, 79, 79, 0.08); color: #d94f4f; }
.monitor-low_score .monitor-badge { background: var(--gold-dim); color: var(--gold); }
.monitor-inactive .monitor-badge { background: var(--surface-2); color: var(--text-dim); }

.monitor-name { font-weight: 600; font-size: 14px; color: var(--text); }
.monitor-detail { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: auto; }

.monitor-ok {
  text-align: center;
  color: #2d7a42;
  font-weight: 600;
  padding: 14px 20px;
  background: var(--green-dim);
  border: 1px solid var(--green-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Fix admin-only monitor section display */
.admin-mode .monitor-section { display: block; }

/* === Admin Candidate Selector === */
.admin-selector-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* Section 7: Candidate Roster dropdown */
.admin-candidate-select {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(100, 75, 40, 0.14);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a6b5a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.admin-candidate-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 121, 58, 0.1);
}

/* === Candidate Detail Card === */
.candidate-detail-section { margin-bottom: 28px; }

.detail-card {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.detail-header h3 {
  font-size: 22px;
  color: var(--text);
  font-weight: 700;
}

/* 3 Big Stat Cards */
.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.detail-stat-card {
  text-align: center;
  padding: 18px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.detail-stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.3;
}

.detail-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Track status card colors */
.track-bg-on_track { background: var(--teal-dim); border-color: var(--teal-strong); }
.track-bg-on_track .detail-stat-value { color: var(--teal); }
.track-bg-behind { background: var(--gold-dim); border-color: var(--gold-strong); }
.track-bg-behind .detail-stat-value { color: var(--gold); }
.track-bg-at_risk { background: var(--rose-dim); border-color: rgba(217, 79, 79, 0.15); }
.track-bg-at_risk .detail-stat-value { color: var(--rose); }
.track-bg-unknown { background: var(--surface-2); border-color: var(--border); }

/* Progress Checkpoints */
.detail-progress-section { margin-bottom: 20px; }

.detail-progress-section h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.detail-checkpoints {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cp-item { display: flex; align-items: center; gap: 6px; }
.dot-lg { width: 18px; height: 18px; }

.cp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.cp-status-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-track-info {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* C-Score + PIN Row */
.detail-score-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.detail-score-main { display: flex; align-items: baseline; gap: 8px; }

.detail-score-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.detail-score-value {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 800;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.detail-pin { display: flex; align-items: baseline; gap: 8px; }

.detail-pin-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.detail-pin-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Score Breakdown */
.detail-scores { padding-top: 14px; }

.detail-scores h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

/* ═══ Roster: split layout (left list / right detail) — fixed height ═══ */
.roster-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  grid-template-rows: 520px;   /* fixed row height — never grows with content */
  gap: 18px;
  margin-top: 12px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .roster-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
}

.roster-left {
  background: #fff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 0;  /* allow flex children to shrink inside grid */
}
.roster-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.candidate-search {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid rgba(100, 75, 40, 0.12);
  border-radius: 8px;
  font-size: 13px;
  background: #faf8f4;
}
.candidate-search:focus {
  outline: 2px solid var(--teal-deep);
  outline-offset: -2px;
  background: #fff;
}
.roster-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  padding: 3px 9px;
  background: var(--surface-2);
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}

.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Cap at ~10 rows (row ≈ 38px + 4px gap). Anything beyond scrolls. */
  max-height: 420px;
  min-height: 200px;
  overflow-y: auto;
  padding-right: 2px;
}
.candidate-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.candidate-list-row:hover {
  background: #faf5ee;
}
.candidate-list-row.active {
  background: #e8ecec;
  border-color: rgba(52, 97, 94, 0.2);
}
.candidate-list-row .cl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.candidate-list-row .cl-meta {
  font-size: 11px;
  color: #9e9a92;
  font-family: var(--font-mono);
  font-weight: 500;
  flex-shrink: 0;
}
.candidate-list-row .cl-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-deep);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}
.candidate-list-row .cl-score.score-low { color: var(--gold); }
.candidate-list-row .cl-score.score-bad { color: #d94f4f; }
.candidate-list-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 24px 12px;
}

.roster-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;       /* clip anything that tries to push beyond fixed row */
}
.roster-right > .candidate-detail-section,
.roster-right > .detail-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  margin: 0;              /* override .candidate-detail-section's default margin-bottom */
}
.roster-right > .candidate-detail-section .detail-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;       /* if content is taller than the fixed row, scroll inside the card */
}
.roster-left {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Compact candidate detail card (when in split layout) */
.candidate-detail-compact .detail-card {
  padding: 20px 22px;
}
.candidate-detail-compact .detail-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.candidate-detail-compact .detail-header h3 {
  font-size: 18px;
}

/* Inline chips replacing the 3 big stat cards */
.detail-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .detail-chips { grid-template-columns: repeat(2, 1fr); }
}
.detail-chip {
  background: #faf5ee;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.detail-chip .chip-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.detail-chip .chip-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
}
.detail-chip-score .chip-value { color: var(--teal-deep); }
.detail-chip.track-bg-on_track   { background: #e8f1ee; }
.detail-chip.track-bg-behind     { background: #fef3df; }
.detail-chip.track-bg-at_risk    { background: #fde8e8; }

/* Compact score breakdown — single-row layout, no thead */
.detail-scores-compact { padding-top: 10px; }
.detail-scores-compact h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.detail-scores-compact table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.detail-scores-compact td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(100, 75, 40, 0.06);
}
.detail-scores-compact .score-weight {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  width: 50px;
  text-align: right;
}
.detail-scores-compact td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  width: 60px;
}
.detail-scores-compact .score-total td {
  border-bottom: none;
  padding-top: 10px;
  font-size: 14px;
}

/* Empty state when no candidate is selected */
.detail-empty {
  background: #fff;
  border: 1px dashed rgba(100, 75, 40, 0.15);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.detail-empty-icon {
  font-size: 36px;
  margin: 0 0 8px;
  opacity: 0.5;
}
.detail-empty p { margin: 0; }

/* === Director Mode — hide edit controls === */
.director-mode .admin-edit-only { display: none !important; }

/* === Role Badges === */
.header-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.role-admin { background: var(--rose); color: #fff; }
.role-smd, .role-director { background: var(--blue); color: #fff; }

/* === Manage Accounts Modal === */
.accounts-modal-body {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
}

.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1.2rem;
}

/* ── Accounts table layout ────────────────────────────────────── */

.accounts-search-wrap { margin-bottom: 12px; }
.accounts-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
  box-sizing: border-box;
}

.accounts-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.accounts-table-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 1fr;
  gap: 12px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}
.accounts-table-header .col-actions { text-align: right; }

.account-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
.account-row:hover { background: var(--surface-3); }

.account-row .col-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-row .col-agent {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-row .col-role { display: flex; align-items: center; }
.account-row .col-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.account-empty, .accounts-empty, .accounts-loading {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.account-edit-btn {
  color: var(--teal-deep);
  background: transparent;
  border: 1px solid #d8d3ca;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.account-edit-btn:hover { background: rgba(52, 97, 94, 0.08); border-color: var(--teal-deep); }

/* Invisible spacer that matches the X button's footprint, used in rows
   that hide the delete button so the Edit button stays column-aligned
   with rows that show the X. */
.account-remove-placeholder {
  display: inline-block;
  width: 28px; /* approx. width of the X button */
}

.locked-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.locked-field input,
.locked-field select {
  flex: 1;
}
.btn-unlock {
  flex-shrink: 0;
  width: 42px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 1px solid var(--border-strong);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-unlock:hover { background: rgba(212, 121, 58, 0.08); border-color: var(--accent); }
.btn-unlock.unlocked { background: rgba(212, 121, 58, 0.12); border-color: var(--accent); }

/* ── Password flow modals ──────────────────────────────── */

.login-extra-link {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
}
.login-extra-link a {
  color: var(--text-muted);
  text-decoration: underline;
}
.login-extra-link a:hover { color: var(--teal-deep); }

/* Request to Join (0513 #3) */
.join-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}
.join-check input { width: auto; margin: 0; }
.join-success {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--teal-dim, #e6f2f0);
  color: var(--teal, #2a6b63);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.form-error {
  padding: 8px 12px;
  background: rgba(185, 74, 72, 0.08);
  border: 1px solid rgba(185, 74, 72, 0.3);
  border-radius: 6px;
  color: #b94a48;
  font-size: 13px;
  margin: 8px 0;
}
.form-success {
  padding: 10px 14px;
  background: rgba(52, 97, 94, 0.08);
  border: 1px solid rgba(52, 97, 94, 0.3);
  border-radius: 6px;
  color: var(--teal-deep);
  font-size: 13px;
  margin: 8px 0;
}

.edit-user-pw-box {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.edit-user-pw-box code {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  user-select: all;
  font-size: 13px;
}
.edit-user-pw-status {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Legacy classes kept for any remaining callers (e.g. older cached JS). */
.account-name { font-weight: 600; font-size: 14px; flex-shrink: 0; }
.account-email {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-role {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.accounts-add {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.accounts-add h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.accounts-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.accounts-form input,
.accounts-form select {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
}

.accounts-form input { flex: 1; min-width: 120px; }
.accounts-form select { min-width: 100px; }

.account-company-id {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-muted, #6b6963);
  background: var(--surface-soft, rgba(0,0,0,0.04));
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.accounts-form-hint {
  font-size: 12px;
  color: var(--text-muted, #6b6963);
  margin: 8px 0 0;
  flex-basis: 100%;
}

.accounts-invite-result {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(52, 97, 94, 0.08);
  border: 1px solid rgba(52, 97, 94, 0.25);
  border-radius: 6px;
}
.accounts-invite-result p { margin: 4px 0; font-size: 13px; }
.accounts-invite-tip { color: var(--text-muted, #6b6963); }
.accounts-invite-result code {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border-strong, #cfcac1);
  border-radius: 4px;
  user-select: all;
}
.accounts-invite-status { font-size: 12px; color: var(--text-muted, #6b6963); }

/* User role badge — distinguish from SMD/Admin */
.role-user {
  background: rgba(125, 63, 20, 0.15);
  color: #7d3f14;
}

.account-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}
.account-row-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.account-reset {
  color: var(--teal-deep);
  background: transparent;
  border: 1px solid #d8d3ca;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.account-reset:hover:not(:disabled) {
  background: rgba(52, 97, 94, 0.08);
  border-color: var(--teal-deep);
}
.account-reset:disabled { opacity: 0.5; cursor: not-allowed; }
.account-remove {
  color: #b94a48;
  background: transparent;
  border: 1px solid #d8d3ca;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
}
.account-remove:hover {
  background: rgba(185, 74, 72, 0.08);
  border-color: #b94a48;
}
.account-row-pw {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(52, 97, 94, 0.06);
  border-left: 3px solid var(--teal-deep);
  border-radius: 4px;
  font-size: 12px;
  flex-wrap: wrap;
}
.account-pw-label { color: var(--text-muted, #6b6963); font-size: 11px; }
.account-pw-value {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--border-strong, #cfcac1);
  border-radius: 4px;
  user-select: all;
  font-size: 12.5px;
}
.account-pw-status { color: var(--text-muted, #6b6963); font-style: italic; font-size: 11px; }

/* (Old events-float-btn removed — replaced by events-fab) */

/* === Events Slide Panel === */
.events-slide-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: var(--surface);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: right 0.3s var(--ease-out);
}

.events-slide-open { right: 0; }

.events-slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.events-slide-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.events-slide-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.events-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.events-overlay-open { display: block; }

/* === Calendar View === */
/* Section 10: Calendar */
.calendar-container {
  background: #ffffff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Shared header for multi-month views (centered title flanked by nav arrows) */
.cal-header-multi {
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.cal-header-multi .cal-title {
  min-width: 240px;
  text-align: center;
  font-size: 17px;
}

/* Per-month header inside a multi-month layout: title only, no nav */
.cal-header-title-only {
  justify-content: center;
  margin-bottom: 8px;
}
.cal-header-title-only .cal-title {
  font-size: 14px;
  color: var(--text-dim);
}

/* Two (or more) month cells side-by-side */
.cal-months-row {
  display: grid;
  grid-template-columns: repeat(var(--cal-month-count, 2), 1fr);
  gap: 40px;
  position: relative;
}
@media (max-width: 720px) {
  .cal-months-row {
    grid-template-columns: 1fr; /* stack on small screens */
    gap: 16px;
  }
}
.cal-month-cell {
  min-width: 0; /* allow shrinking inside grid */
}
/* Vertical divider line between adjacent months */
.cal-month-cell + .cal-month-cell {
  border-left: 1px solid rgba(100, 75, 40, 0.15);
  padding-left: 20px;
  margin-left: -20px;
}
@media (max-width: 720px) {
  .cal-month-cell + .cal-month-cell {
    border-left: none;
    border-top: 1px solid rgba(100, 75, 40, 0.15);
    padding-left: 0;
    padding-top: 16px;
    margin-left: 0;
  }
}

/* Compact variant — used in admin where we show 2 months side-by-side */
.calendar-dual {
  padding: 18px 20px;
}
/* Fixed row heights so every week row matches across months regardless of events */
.calendar-dual .cal-grid {
  grid-template-rows: repeat(6, 72px);
  grid-auto-rows: 72px;
}
.calendar-dual .cal-cell {
  min-height: 72px;
  height: 72px;
  max-height: 72px;
  padding: 3px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendar-dual .cal-cell .cal-day-num {
  flex: 0 0 auto;
}
.calendar-dual .cal-cell .cal-dots {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.calendar-dual .cal-day-num {
  font-size: 12px;
}
.calendar-dual .cal-day-label {
  font-size: 10px;
  padding: 3px 0;
}

/* Meeting Room indicator dot (on the header button) */
.meeting-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.meeting-indicator-set { background: var(--teal); }
.meeting-indicator-unset { background: var(--gold); }

/* Events header actions bar (aligns meeting-room button + add-event button) */
.events-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cal-title {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.cal-nav {
  background: none;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 14px;
  font-family: var(--font-main);
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.2s;
}

.cal-nav:hover {
  color: var(--accent);
}

.cal-day-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.cal-day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-cell {
  min-height: 60px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.cal-cell:hover { background: var(--surface-2); }
.cal-empty { cursor: default; }
.cal-empty:hover { background: transparent; }

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.cal-today { background: var(--accent-dim); }
.cal-today .cal-day-num { color: var(--accent); font-weight: 800; }

.cal-has-events .cal-day-num { color: var(--text); }

.cal-dots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-pill {
  background: rgba(212, 121, 58, 0.15);
  color: #7d3f14;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(212, 121, 58, 0.25);
}

.cal-pill:hover {
  background: rgba(212, 121, 58, 0.28);
  color: #5e2f0d;
}

/* Dark mode pill — keep contrast readable on dark backgrounds */

.cal-more {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 700;
  padding: 0 4px;
}

/* Calendar Day Popup */
.cal-popup {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.cal-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.cal-popup-date {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.cal-popup-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 8px;
  font-size: 13px;
}

.cal-popup-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-popup-event {
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: all 0.2s;
}

.cal-popup-event:hover {
  background: var(--accent-dim);
  transform: translateX(4px);
}

.cal-popup-ev-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.cal-popup-ev-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.cal-popup-ev-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 300;
}

.cal-join {
  margin-top: 6px;
  display: inline-block;
  text-decoration: none;
}

/* === Meeting Room === */
.meeting-room-section { margin-bottom: 28px; }

.meeting-room-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.meeting-room-bar .filter-input { flex: 1; }

.meeting-room-current {
  font-size: 13px;
  color: var(--text-muted);
  word-break: break-all;
}

/* === Events === */
.events-section { margin-bottom: 28px; }

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.events-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.event-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--navy);
  transition: all 0.25s;
}

.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.event-past {
  opacity: 0.5;
  border-left-color: var(--surface-3);
}

.event-date-col { min-width: 130px; }

.event-date-big {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.event-time {
  font-size: 13px;
  color: var(--text-muted);
}

.event-countdown {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  margin-top: 2px;
}

.event-info-col { flex: 1; }

.event-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.event-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 300;
}

.event-join {
  white-space: nowrap;
  padding: 8px 18px;
  font-size: 13px;
  text-decoration: none;
}

.btn-event-edit {
  font-size: 1rem;
  color: var(--text-muted);
}

/* Event form textarea */

#event-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}

/* Schedule Rows (recurring events) */
.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.schedule-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.schedule-row select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
  background: var(--surface);
}

.schedule-row input[type="time"] {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
  background: var(--surface);
}

.sched-remove {
  font-size: 1.2rem;
  color: var(--rose);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}

.sched-remove:hover { color: var(--text); }

/* Reminder Config */
.reminder-checks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.reminder-checks label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}

.reminder-checks input[type="checkbox"] {
  accent-color: var(--accent);
}

#reminder-config textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
  resize: vertical;
  background: var(--surface);
}

.group-members-preview {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#event-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* === Admin Gate === */
.admin-gate {
  display: flex;
  flex-direction: column;
  /* Fill the space above the footer INSIDE the body's 100vh flex column
     (not a fixed 100vh of its own) so the footer — with the language
     pills — is visible on the first screen without scrolling. */
  flex: 1 0 auto;
}

.admin-gate .selector-card {
  margin: auto;
  width: 100%;
  max-width: 420px;
}

/* The two login cards must not change size or position when flipping the
   👥/🎓 switch tabs: shared min-height (taller card ≈552px zh-TW), and the
   learner gate centres in the space above the footer exactly like
   .admin-gate does. */
.login-card { min-height: 536px; }

/* Standalone entrances (stop-1 review): no switch tabs — title + audience
   line identify the surface. Both centred for cross-page consistency. */
.login-card h2 { text-align: center; }
.login-audience {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: -6px 0 18px;
}

body:not(.logged-in) main.training-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  /* main's base margin:auto (horizontal) cancels flex cross-axis stretch,
     collapsing it to fit-content — force full width back */
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
body:not(.logged-in) main.training-main #candidate-login {
  flex: 1;
  display: flex;
  margin: 0;
}
body:not(.logged-in) main.training-main .login-card {
  /* margin:auto (not align-items:center) so a viewport shorter than the
     card degrades to top-aligned + scrollable instead of clipping the top */
  margin: auto;
  width: 100%;
  max-width: 420px;
}

/* Mini header inside the gate (mirrors the main topbar) */
.gate-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  background: var(--navy);
  color: #fff;
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* === Login Card Variants (Training vs Management) === */
/* Both share the same width/padding — only the accent stripe + eyebrow color change */
.login-card {
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.login-card-training::before  { background: var(--accent); }
.login-card-management::before { background: var(--navy); }

.admin-setup-text {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 1rem;
  text-align: center;
}

/* === Footer Block === */
footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-block {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 16px 20px 8px;
  /* NO margin-top here — it would outrank `body > footer { margin-top:auto }`
     (class beats element+child) and break the push-to-bottom on short pages
     (the cockpit view had the footer floating mid-screen). */
}

.footer-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  max-width: var(--container-max);
  margin: 0 auto 8px;
  text-align: center;
}

.footer-col h4 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.footer-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.footer-link {
  display: block;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.footer-link:hover { text-decoration: underline; }

.footer-bottom {
  padding-top: 4px;
  text-align: center;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 11px;
  opacity: 0.6;
}

.footer-lang { margin-bottom: 8px; }

.footer-lang a {
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
}

.footer-lang a.active,
.footer-lang a:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* === Feedback Form === */

.feedback-form .form-row { margin-bottom: 0.75rem; }

.feedback-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  resize: vertical;
  transition: border-color 0.2s;
  background: var(--surface);
  color: var(--text);
}

.feedback-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.feedback-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-main);
  background: var(--surface);
}

.feedback-form .btn-primary {
  width: 100%;
  padding: 12px;
}

/* === PWA / Mobile === */
html {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

body.standalone {
  overscroll-behavior-y: contain;
}

/* Bigger touch targets on mobile */
@media (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-header {
    min-height: 44px;
    min-width: 44px;
  }

  .journey-dot {
    min-width: 56px;
    padding: 0.5rem;
  }

  .kb-acc-header {
    min-height: 48px;
  }

  .cal-cell {
    min-height: 48px;
  }

  .login-form input, .login-form button {
    min-height: 48px;
    font-size: 16px;
  }

  select, input[type="text"], input[type="email"], input[type="password"],
  input[type="date"], input[type="time"], input[type="number"], textarea {
    font-size: 16px;
  }
}

/* === Responsive === */
@media (max-width: 900px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .detail-stats { grid-template-columns: repeat(2, 1fr); }
  .schedule-timeline { grid-template-columns: repeat(2, 1fr); }
  .journey-flow { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .journey-arrow { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .sidebar-col { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; order: -1; }
}

@media (max-width: 600px) {
  /* v12.63 (#13): the topbar packed brand + name + role badge + My-Recruits +
     Log Out into a no-wrap space-between row, so on a phone Log Out slid off
     the right edge (unreachable). Compact + truncate the non-essential bits so
     the action buttons always fit and stay tappable. */
  header { padding: 0 12px; gap: 8px; }
  header h1, .topbar-brand { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
  .header-actions, .header-user, .topbar-right { min-width: 0; gap: 6px; }
  .header-user-name, .topbar-user { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-role-badge { display: none; }
  .btn-header, .topbar-btn { flex-shrink: 0; padding: 7px 9px; font-size: 10px; letter-spacing: 0.4px; }
  main { padding: 0 12px; margin: 16px auto; }
  /* v12.63 (#5): the doc viewer needs real breathing room on a phone — the
     desktop 32px/48px padding left almost no reading width at 375px. */
  .viewer-content { padding: 18px 16px; font-size: 16px; line-height: 1.75; }
  /* v12.65 (#2): modals use the full width minus the overlay's 12px side gap
     (was 90%, which combined oddly with the padded overlay on small phones). */
  .modal { width: 100%; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cards { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .schedule-timeline { grid-template-columns: 1fr; }
  .kb-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .monitor-alert { flex-wrap: wrap; }

  .dash-welcome h1 { font-size: 20px; }
  .checkpoint-wrapper { padding: 16px; }
  .sidebar-stat-value { font-size: 24px; }
  .sidebar-col { grid-template-columns: 1fr; }

  .journey-dot { min-width: 56px; }
  .journey-dot-icon { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
  .journey-dot-label { font-size: 10px; }
  .journey-dot-status { display: none; }
  .journey-arrow { display: none; }

  /* Mobile: shrink FABs, keep middle-right stack, hide labels */
  .events-fab,
  .ai-notes-fab {
    width: 54px;
    height: 54px;
    right: 14px;
    border-radius: 14px;
  }
  .events-fab { top: calc(50% + 20px); }
  .ai-notes-fab { top: calc(50% - 74px); }
  .events-fab .fab-icon,
  .ai-notes-fab .fab-icon { font-size: 20px; }
  .events-fab .fab-label,
  .ai-notes-fab .fab-label { display: none; }

  .events-slide-panel { width: 100%; max-width: 100vw; right: -100%; }
  /* v12.63 (#2): the mobile off-screen rule above (single class, later in the
     source) was overriding the desktop .events-slide-open{right:0}, so the
     panel never slid in on phones. A compound selector (0,2,0) wins order-
     independently. */
  .events-slide-panel.events-slide-open { right: 0; }

  .viewer-modal { max-width: 100%; width: 100%; margin: 0; border-radius: 0; max-height: 100vh; }

  .cal-cell { min-height: 44px; padding: 2px; }
  .cal-day-num { font-size: 11px; }
  .cal-pill { font-size: 10px; }
  .footer-grid { flex-direction: column; gap: 12px; text-align: center; }
  .event-card { flex-direction: column; align-items: flex-start; }
  .event-date-col { min-width: auto; }
  .meeting-room-bar { flex-direction: column; }

  .detail-stats { grid-template-columns: 1fr; }
}

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-node {
  0%, 100% { box-shadow: 0 3px 16px var(--accent-glow); }
  50% { box-shadow: 0 3px 24px var(--accent-glow), 0 0 40px rgba(212, 121, 58, 0.1); }
}

@keyframes pulse-small {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.1); }
}

@keyframes highlightPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Focus States
   ══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES — Hardcoded Color Fixes
   ══════════════════════════════════════════════════════════════ */

/* Header */

/* Stat cards */

/* Buttons */

/* Inputs and selects */

/* Modal */

/* Tables */

/* Cards and surfaces */


/* Journey panel header hover */

/* Journey dot labels */

/* Journey node icon overrides */

/* Journey connecting lines */

/* Quick nav */

/* Sidebar */

/* h2 headings */

/* Section titles */

/* Checkpoint header bar */

/* Knowledge bank accordion */

/* Viewer content */

/* Calendar */

/* Monitor */

/* Events fab */

/* Events slide panel */

/* Footer lang */

/* Reward card text */

/* Submission box in approve page */

/* Journey panel body */

/* Level tool card text */

/* ══════════════════════════════════════════════════════════════
   DARK MODE — NEW COMPONENTS (roster split, monitor compact,
   guest management, calendar dual, detail chips, meeting room)
   ══════════════════════════════════════════════════════════════ */

/* Monitor compact panel — was hardcoded white */

/* Roster split — left panel, search, and list */

/* Detail chips replacing big stat cards */

/* Compact score breakdown table in dark mode */

/* Empty state card */

/* Guest invite / manage modals (most inherit from .modal dark, but custom bits) */

/* Guests management modal rows */

/* Inline badges (Manage Guests count etc.) */

/* Button link (View All in monitor header) */

/* Meeting Room button — teal variant stays consistent */

/* Meeting room indicator dot */

/* Calendar dual — multi-month layout */

/* Event pill — keep warm tone, readable in dark */

/* Convert guest modal readonly email field */

/* Monitor badges — raise contrast on dark cards */

/* Generic section headers / titles */

/* Level badge in detail header (dark) */

/* Edit Candidate button — teal outline look in dark */

/* ══════════════════════════════════════════════════════════════
   TOAST / NOTIFICATION COMPONENT
   ══════════════════════════════════════════════════════════════ */
/* v9.24: centered toast notifications. User feedback (2026-05-13) — corner
   toasts were too easy to miss. Now horizontally centered, slightly below
   the topbar, so success / warning messages land in the user's natural
   reading focus. Mobile breakpoint at the bottom of this file overrides
   the max-width. */
.toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  width: calc(100% - 32px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  color: var(--text);
  pointer-events: auto;
  animation: toastIn 0.3s var(--ease-out);
  transition: all 0.3s var(--ease-out);
}

.toast.toast-exit {
  /* v9.24: fade up + out instead of slide-right (centered toasts shouldn't
     slide sideways — looks weird). */
  opacity: 0;
  transform: translateY(-12px);
}

.toast-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  min-height: 36px;
  min-width: 36px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.toast-close:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Toast variants */
.toast-error {
  border-left: 4px solid var(--rose);
}
.toast-error .toast-icon { color: var(--rose); }

.toast-success {
  border-left: 4px solid var(--teal);
}
.toast-success .toast-icon { color: var(--teal); }

.toast-warning {
  border-left: 4px solid var(--gold);
}
.toast-warning .toast-icon { color: var(--gold); }

.toast-info {
  border-left: 4px solid var(--blue);
}
.toast-info .toast-icon { color: var(--blue); }

@keyframes toastIn {
  /* v9.24: fade down from top (centered toast). Was translateX(80px) for
     the old corner position. */
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE DESIGNS
   ══════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.empty-state-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 480px Breakpoint (Small Phones)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  header {
    padding: 0 12px;
    gap: 6px;
  }

  header h1,
  .topbar-brand {
    font-size: 14px;
    gap: 6px;
  }

  .topbar-right,
  .header-actions {
    gap: 4px;
  }

  .topbar-btn,
  .btn-header {
    font-size: 10px;
    padding: 5px 8px;
    min-height: 36px;
    min-width: 36px;
  }

  .topbar-user,
  .header-user-name {
    font-size: 11px;
  }

  main {
    padding: 0 8px;
    margin: 12px auto;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .stat-card {
    padding: 14px 12px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .selector-card {
    padding: 1.5rem 1rem;
    margin: 1rem auto;
  }

  .modal {
    width: 96%;
    max-width: none;
    margin: 0.5rem;
    border-radius: var(--radius-sm);
  }

  .modal-overlay {
    padding-top: 2vh;
    align-items: center;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .detail-score-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .detail-score-value {
    font-size: 32px;
  }

  .checkpoint-wrapper {
    padding: 12px;
  }

  .journey-dot {
    min-width: 48px;
  }

  .journey-dot-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 8px;
  }

  .journey-dot-label {
    font-size: 10px;
  }

  .dash-welcome h1 {
    font-size: 18px;
  }

  .calendar-container {
    padding: 12px;
  }

  .cal-cell {
    min-height: 44px;
    padding: 1px;
  }

  .cal-day-num {
    font-size: 10px;
  }

  .cal-pill {
    font-size: 10px;
    padding: 1px 3px;
  }

  .events-fab {
    width: 44px;
    height: 44px;
    bottom: 12px;
    right: 12px;
  }

  .footer-grid {
    gap: 8px;
  }

  .inline-form-grid {
    grid-template-columns: 1fr;
  }

  .toast-container {
    /* v9.24: stay centered on mobile, just narrower margins. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: none;
    width: calc(100% - 16px);
  }

  /* Ensure tables scroll horizontally */
  .detail-scores,
  .docs-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .detail-scores table,
  .docs-list table {
    min-width: 400px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 375px Breakpoint (Very Small Phones)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  header {
    padding: 0 8px;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-height);
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 4px;
  }

  header h1,
  .topbar-brand {
    font-size: 13px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .topbar-right,
  .header-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  .topbar-user,
  .header-user-name {
    display: none;
  }

  main {
    padding: 0 6px;
    margin: 8px auto;
  }

  .stats-bar {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .stat-card {
    padding: 12px 10px;
  }

  .stat-value {
    font-size: 22px;
  }

  .detail-stats {
    grid-template-columns: 1fr;
  }

  .journey-dot {
    min-width: 40px;
    gap: 4px;
  }

  .journey-dot-icon {
    width: 28px;
    height: 28px;
    font-size: 11px;
    border-radius: 6px;
  }

  .journey-dot-label {
    font-size: 10px;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-stat-value {
    font-size: 20px;
  }

  .selector-card {
    padding: 1rem 0.75rem;
  }
}

/* === Daily Check-In & Study Plan === */
.checkin-plan-selector {
  margin-bottom: 20px;
}

.checkin-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkin-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkin-plan-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
}

.checkin-plan-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.checkin-plan-card.plan-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(212, 121, 58, 0.12);
}

.plan-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.plan-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.plan-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 8px;
}

.plan-card-duration {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Plan info header (replaces plan selector) */
.checkin-plan-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--accent-dim);
  border: 1px solid rgba(212, 121, 58, 0.15);
  border-radius: var(--radius);
}

.plan-info-icon {
  font-size: 1.8rem;
}

.plan-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-info-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.plan-info-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* Deadline reminder banners */
.checkin-reminder {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  animation: fadeIn 0.3s var(--ease-out);
}

.checkin-reminder .reminder-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.checkin-reminder .reminder-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.checkin-reminder .reminder-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* Warning — past 2 weeks */
.reminder-warning {
  background: var(--gold-dim);
  border: 1px solid rgba(196, 154, 60, 0.2);
}
.reminder-warning .reminder-icon {
  background: rgba(196, 154, 60, 0.2);
  color: var(--gold);
}
.reminder-warning .reminder-title { color: var(--gold); }
.reminder-warning .reminder-text { color: #8b6914; }

/* Urgent — last week */
.reminder-urgent {
  background: rgba(212, 121, 58, 0.1);
  border: 1px solid rgba(212, 121, 58, 0.2);
}
.reminder-urgent .reminder-icon {
  background: rgba(212, 121, 58, 0.2);
  color: var(--accent);
}
.reminder-urgent .reminder-title { color: var(--accent); }
.reminder-urgent .reminder-text { color: #a0612a; }

/* Critical — past 4 weeks */
.reminder-critical {
  background: var(--rose-dim);
  border: 1px solid rgba(217, 79, 79, 0.2);
}
.reminder-critical .reminder-icon {
  background: rgba(217, 79, 79, 0.2);
  color: var(--rose);
}
.reminder-critical .reminder-title { color: var(--rose); }
.reminder-critical .reminder-text { color: #a03030; }

/* Daily check-in card */
.checkin-daily-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.checkin-daily-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

/* Week calendar row */
.checkin-calendar {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.checkin-cal-day {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.checkin-cal-day .cal-day-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.checkin-cal-day.cal-done {
  background: var(--teal-dim);
  color: var(--teal);
}

.checkin-cal-day.cal-today {
  border: 2px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.checkin-cal-day.cal-done.cal-today {
  border-color: var(--teal);
  background: var(--teal-dim);
  color: var(--teal);
}

/* Stats row */
.checkin-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.checkin-stat {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkin-stat-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.checkin-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Done message */
.checkin-done-msg {
  text-align: center;
  padding: 12px 16px;
  background: var(--teal-dim);
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-radius: var(--radius-sm);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}

/* Start check-in button */
.checkin-start-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
}

/* === Check-In Quiz === */
.checkin-quiz-area {
  animation: fadeIn 0.3s var(--ease-out);
}

.checkin-quiz-progress {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.checkin-quiz-question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--text);
}

.checkin-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkin-quiz-option {
  text-align: left;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s;
  width: 100%;
}

.checkin-quiz-option:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.checkin-quiz-option:disabled {
  cursor: default;
  opacity: 0.85;
}

.checkin-quiz-option.option-correct {
  border-color: var(--teal);
  background: var(--teal-dim);
  font-weight: 600;
  color: var(--teal);
}

.checkin-quiz-option.option-wrong {
  border-color: var(--rose);
  background: var(--rose-dim);
  color: var(--rose);
}

.checkin-quiz-explain {
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--blue-dim);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--blue);
  line-height: 1.6;
  font-weight: 500;
}

.checkin-quiz-next {
  margin-top: 16px;
  width: 100%;
}

/* Quiz result */
.checkin-quiz-result {
  text-align: center;
  padding: 2rem 1rem;
  animation: fadeIn 0.4s var(--ease-out);
}

.checkin-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal-dim);
  color: var(--teal);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.checkin-result-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.checkin-result-score {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.checkin-result-msg {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Prevent Horizontal Scroll
   NOTE: overflow-x:hidden on <html> breaks position:sticky everywhere.
   Use overflow-x:clip instead — it clips without creating a scroll container.
   ══════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Ensure all images and media respect container width */
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ═══ Guest Management (Modals + Shared Pieces) ═══ */

/* Wider variant for modals with more content */
.modal.modal-wide {
  max-width: 640px;
}

/* Subtitle chip in modal header */
.modal-subtitle {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--teal-dim, #d5e7e5);
  color: var(--teal);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* Leading paragraph inside a modal */
.modal-intro {
  padding: 16px 24px 0;
  margin: 0 0 16px;
  color: var(--fg-muted, #6b6963);
  font-size: 13px;
  line-height: 1.55;
}

/* Guest Invite form — larger padding than default form */
.modal > .guest-form {
  padding: 0 24px 20px; /* header already spaces the top */
}
.guest-form .form-row {
  margin-bottom: 14px;
}
.guest-form .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fg, #2c3e50);
}
.guest-form .form-row input,
.guest-form .form-row select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
  font-family: inherit;
}
.guest-form .form-row input[readonly] {
  background: var(--bg, #faf8f4);
  color: var(--fg-muted, #6b6963);
  cursor: not-allowed;
}
.guest-form .form-row .readonly-tag {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-muted, #9e9a92);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.guest-form .form-row input:focus {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.guest-form .form-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e0dcd4);
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}
.guest-form .form-actions .btn-primary,
.guest-form .form-actions .btn-secondary {
  padding: 10px 24px;
  font-size: 14px;
}

/* Invite result panel */
.invite-result {
  background: #f4f1eb;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border, #e0dcd4);
  margin-top: 16px;
}
.invite-result h4 {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 15px;
}
.invite-result p {
  font-size: 13px;
  margin: 0 0 12px;
  color: var(--fg, #2c3e50);
}
.invite-result-password {
  background: #fff;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--border, #e0dcd4);
}
.invite-result-label {
  font-size: 12px;
  color: var(--fg-muted, #9e9a92);
  margin: 0 0 4px !important;
}
.invite-result-password code {
  font-size: 15px;
  color: var(--teal);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* Guests list (used inside the Manage Guests modal) */
.guests-modal-body {
  padding: 0 24px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.guests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guests-list .guests-empty {
  color: var(--fg-muted, #9e9a92);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
  margin: 0;
}
.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg, #faf8f4);
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
}
.guest-row-info {
  flex: 1;
  min-width: 0;
}
.guest-row-name {
  font-weight: 600;
  color: var(--fg, #2c3e50);
  margin: 0 0 2px;
  font-size: 14px;
}
.guest-row-meta {
  font-size: 12px;
  color: var(--fg-muted, #6b6963);
  margin: 0;
}
.guest-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.guest-badge {
  display: inline-block;
  padding: 1px 8px;
  background: #fff4e0;
  color: #b07d2a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inline count badge for toolbar buttons (e.g. "Manage Guests (2)") */
.inline-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  margin-left: 6px;
  background: var(--teal);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.inline-badge:empty,
.inline-badge[data-count="0"] { display: none; }

/* Hide sections tagged for candidate-only when guest is logged in */
body.role-guest [data-guest-hide] { display: none !important; }

/* ═══ AI Notes Organizer ═══ */

/* AI Notes FAB shape/color is defined in the unified floating-action-buttons block above */

/* Wider modal for the AI UI */
.modal.ai-notes-modal {
  max-width: 780px;
}

.ai-notes-body {
  padding: 0 24px 20px;
  max-height: 75vh;
  overflow-y: auto;
}

.ai-input-section {
  margin-bottom: 16px;
}

.ai-mode-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--fg, #2c3e50);
}

.ai-mode-desc {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--fg-muted, #6b6963);
  font-style: italic;
}

#ai-input-text {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.5;
  resize: vertical;
  min-height: 180px;
  box-sizing: border-box;
}
#ai-input-text:focus {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}

.ai-char-counter {
  text-align: right;
  font-size: 11px;
  color: var(--fg-muted, #9e9a92);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.ai-char-counter .ai-char-warning {
  color: #d94f4f;
  font-weight: 700;
}

/* Loading state */
.ai-loading {
  text-align: center;
  padding: 32px;
  color: var(--fg-muted, #6b6963);
}
.ai-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border, #e0dcd4);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ai-spin 0.7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* Result section */
.ai-result-section {
  border-top: 1px solid var(--border, #e0dcd4);
  margin-top: 16px;
  padding-top: 16px;
}
.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ai-result-header h4 {
  margin: 0;
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
}
.ai-result-actions {
  display: flex;
  gap: 6px;
}
.ai-result-content {
  background: #faf5ee;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
}
.ai-result-content h1 { font-size: 18px; margin: 12px 0 8px; }
.ai-result-content h2 { font-size: 15px; margin: 12px 0 6px; color: var(--fg, #2c3e50); }
.ai-result-content h3 { font-size: 14px; margin: 10px 0 5px; }
.ai-result-content ul, .ai-result-content ol { padding-left: 22px; margin: 8px 0; }
.ai-result-content li { margin: 4px 0; }
.ai-result-content table {
  border-collapse: collapse;
  margin: 8px 0;
  width: 100%;
  font-size: 13px;
}
.ai-result-content th, .ai-result-content td {
  padding: 8px 10px;
  border: 1px solid var(--border, #e0dcd4);
  text-align: left;
}
.ai-result-content th {
  background: var(--bg, #f5efe7);
  font-weight: 700;
}

.ai-usage-info {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--fg-muted, #9e9a92);
  font-family: var(--font-mono);
  text-align: right;
}

/* Error banner */
.ai-error {
  background: #fde8e8;
  border: 1px solid #d94f4f;
  border-radius: 8px;
  padding: 12px 16px;
  color: #d94f4f;
  font-size: 13px;
  margin: 16px 0;
}

/* ───── Dark mode overrides ───── */

/* ═══════════════════════════════════════════════════════════════════
   Checkpoint Refactor + Talent Score (v4)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Expected Exam Date block (CP1 panel) ── */
.exam-date-block {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2, #f9f6f1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.exam-date-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 0 0 8px; }
.exam-date-row { display: flex; gap: 8px; align-items: center; }
.exam-date-row input[type=date] {
  flex: 1; max-width: 200px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; background: var(--surface);
}
.exam-reward-info { margin-top: 10px; }
.reward-hint { font-size: 13px; margin: 4px 0; padding: 8px 10px; border-radius: 6px; font-weight: 600; }
.reward-gold { background: #fef3c7; color: #b45309; border-left: 3px solid #d4773a; }
.reward-silver { background: #e0f2f1; color: #065f5b; border-left: 3px solid var(--teal); }
.reward-none { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }
.reward-ext { background: #ede9fe; color: #5b21b6; border-left: 3px solid #8b5cf6; font-size: 12px; }

/* ── Attention Needed popup modal ── */
.attention-modal-content { max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; }
.attention-modal-body { padding: 8px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.attention-modal-body .monitor-alert { padding: 10px 14px; border-radius: 8px; }
.attention-modal-body .monitor-alert:hover { background: var(--surface-2, #f9f6f1); }

/* ── Login stats pills (admin candidate detail) ── */
.detail-login-stats { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.login-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface-2, #f9f6f1);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
}
.login-stat-pill strong { color: var(--text-main); font-family: var(--font-mono); font-weight: 700; }

/* ── Day checkbox in accordion header (CP1 10-Day plan) ── */
.kb-acc-day-check {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
  accent-color: var(--teal);
  flex-shrink: 0;
}
.kb-acc-day-check:checked ~ .kb-acc-title {
  text-decoration: line-through;
  color: var(--text-dim);
  opacity: 0.7;
}

/* ── CP1 Chapter Checklist (now unused, kept for backwards compat) ── */
.chapter-checklist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chapter-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chapter-check-row:hover { background: var(--surface-2, #f9f6f1); }
.chapter-check-row input[type=checkbox] {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);
}
.chapter-check-row .chapter-title { flex: 1; font-size: 14px; color: var(--text-main); }
.chapter-check-row .chapter-date { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.chapter-check-row input:checked ~ .chapter-title { color: var(--text-dim); text-decoration: line-through; }

/* ── CP3 Scenario Blocks ── */
.scenario-block {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.scenario-block h5 { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 10px; }
.scenario-block textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, #f9f6f1);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.scenario-block textarea.scenario-graded { background: rgba(42, 157, 143, 0.06); border-color: rgba(42, 157, 143, 0.3); }
.scenario-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.scenario-grade {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  padding: 6px 10px;
  background: rgba(42, 157, 143, 0.12);
  border-radius: 6px;
}

/* ── Attendance list ── */
.attendance-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.attendance-heading { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 4px; }
.attendance-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.attendance-list { display: flex; flex-direction: column; gap: 6px; }
.attendance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.attendance-row:hover { background: var(--surface-2, #f9f6f1); }
.attendance-row.attended { background: rgba(42, 157, 143, 0.08); border-color: rgba(42, 157, 143, 0.3); }
.attendance-row input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent);
}
.attendance-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.attendance-date { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.attendance-title { font-size: 13px; color: var(--text-main); font-weight: 500; }
.attendance-empty { font-size: 13px; color: var(--text-dim); text-align: center; padding: 20px; font-style: italic; }

/* Attendance rate stat card (top of the list) */
.attendance-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.attendance-stat-label { font-weight: 600; color: var(--text-main); }
.attendance-stat-value { font-weight: 700; font-family: var(--font-mono); }
.attendance-stat.rate-good   { background: rgba(42,157,143,.10); border-color: rgba(42,157,143,.32); }
.attendance-stat.rate-good   .attendance-stat-value { color: var(--teal); }
.attendance-stat.rate-warn   { background: rgba(196,154,60,.10); border-color: rgba(196,154,60,.32); }
.attendance-stat.rate-warn   .attendance-stat-value { color: var(--gold); }
.attendance-stat.rate-poor   { background: rgba(220,80,60,.10); border-color: rgba(220,80,60,.32); }
.attendance-stat.rate-poor   .attendance-stat-value { color: #c0392b; }
.attendance-stat.rate-pending .attendance-stat-value { color: var(--text-dim); font-style: italic; }

/* Reward state: awaiting admin to set examPrepStartDate */
.sidebar-reward-card.countdown-pending {
  background: var(--surface-2, #f9f6f1);
  border-color: var(--border);
  border-style: dashed;
}
.sidebar-reward-card.countdown-pending .sidebar-reward-icon { color: var(--text-dim); font-size: 24px; }
.sidebar-reward-card.countdown-pending .sidebar-reward-title { color: var(--text-dim); }

/* Reward hint variants — pending start */
.reward-hint.reward-pending {
  background: rgba(196,154,60,.10);
  border-left: 3px solid var(--gold);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-main);
  border-radius: 4px;
  margin-bottom: 8px;
}

/* === Admin: inline Approve button on candidate panel (Reject removed in v8) === */
.cp-item .btn-cp-approve {
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  background: var(--teal, #2a9d8f);
  color: white;
  border: 1px solid var(--teal, #2a9d8f);
}
.cp-item .btn-cp-approve:hover:not([disabled]) { background: #228172; }

/* === Admin: Archive / Restore on candidate detail header (v8) === */
.archived-badge {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(176, 162, 146, 0.15);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-left: 6px;
}
#btn-detail-archive {
  margin-left: 8px;
  background: var(--surface-2, #f9f6f1);
  color: var(--text-main);
  border: 1px solid var(--border);
}
#btn-detail-archive:hover:not([disabled]) { background: #efe9df; }
#btn-detail-restore {
  margin-left: 8px;
  background: var(--teal, #2a9d8f);
  color: white;
  border: 1px solid var(--teal, #2a9d8f);
}

/* Archived candidate row in left rail — dim it */
.candidate-list-row.archived {
  opacity: 0.55;
  background: var(--surface-2, #f9f6f1);
}
.candidate-list-row.archived .cl-name { font-style: italic; }

/* Show/Hide archived toggle */
.candidate-list-archived-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--border);
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
}
.candidate-list-archived-toggle:hover { color: var(--text-main); background: var(--surface-2, #f9f6f1); }

/* Candidate-side: paused banner shown when archivedAt set */
.candidate-archived-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(176, 162, 146, 0.12);
  border-bottom: 1px solid rgba(176, 162, 146, 0.4);
  color: var(--text-main);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.candidate-archived-banner .archived-banner-icon { margin-right: 6px; }

/* === Admin: pending_approval monitor alert (orange-amber) === */
.monitor-pending_approval { border-left-color: #d99a3c !important; }

/* === Admin: temp password copy button === */
.temp-pw-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.temp-pw-row code {
  flex: 1;
  font-size: 14px;
  padding: 6px 10px;
  background: var(--surface-2, #f9f6f1);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* === Admin: convert modal upline display (read-only) === */
.convert-upline-display {
  padding: 8px 10px;
  background: var(--surface-2, #f9f6f1);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-main);
}

/* === Admin: disabled checkpoint dropdowns in Edit modal === */
#admin-form select[disabled] {
  background: var(--surface-2, #f9f6f1);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.85;
}

/* === Admin: exam-prep-start row + locked state === */
.prep-start-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.prep-start-row input[type=date] { flex: 1; }
.prep-start-row input[type=date][readonly] {
  background: var(--surface-2, #f9f6f1);
  color: var(--text-dim);
  cursor: not-allowed;
}
#prep-start-hint.prep-start-locked {
  color: var(--teal);
  font-weight: 600;
}

/* === Admin: Notes panel === */
.notes-add-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) auto;
  gap: 8px;
  margin: 12px 0 8px;
  align-items: center;
}
.notes-add-row .note-custom-input { grid-column: 1 / 3; }
.note-type-select, .note-text-input, .note-custom-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-main);
}
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
.note-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
}
.note-row.note-positive { border-left: 3px solid var(--teal); }
.note-row.note-negative { border-left: 3px solid #c0392b; }
.note-row.note-neutral  { border-left: 3px solid var(--text-dim); }
.note-row .note-meta {
  flex-shrink: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  width: 90px;
}
.note-row .note-body { flex: 1; }
.note-row .note-label { font-weight: 600; color: var(--text-main); }
.note-row .note-text  { color: var(--text-dim); margin-top: 2px; }
.note-row .note-delete {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
  padding: 0 4px;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.note-row .note-delete:hover { opacity: 1; color: #c0392b; }
.notes-empty {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px;
  text-align: center;
}

/* ── Rules modal ── */
.rules-modal-content { max-width: 720px; max-height: 85vh; display: flex; flex-direction: column; }
.rules-modal-body { padding: 0 24px 24px; overflow-y: auto; }
.rules-doc h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rules-doc h4:first-child { margin-top: 8px; }
.rules-doc ul { margin: 0 0 12px 20px; padding: 0; font-size: 13px; line-height: 1.7; color: var(--text-main); }
.rules-doc li { margin-bottom: 4px; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 12px; }
.rules-table th, .rules-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
.rules-table th { background: var(--surface-2, #f9f6f1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: var(--text-dim); }
.rules-formula {
  padding: 12px;
  background: var(--surface-2, #f9f6f1);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  margin: 8px 0 16px;
}

/* ── Admin auto-scores display + Product Training grading ── */
.auto-scores-display .form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.auto-score-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  min-width: 48px;
  text-align: right;
}
.form-note { font-size: 11px; color: var(--text-dim); margin: 8px 0 0; font-style: italic; }

.pt-scenarios { display: flex; flex-direction: column; gap: 12px; }
.pt-scenario-row {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pt-scenario-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.pt-submission {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
  padding: 8px;
  background: var(--surface-2, #f9f6f1);
  border-radius: 6px;
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 8px;
  white-space: pre-wrap;
}
.pt-grade {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  cursor: pointer;
}

/* ── Event form attendance checkbox ── */
.form-row-checkbox { margin-top: 4px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Dark mode overrides for new elements ── */

/* ── First-run empty state (admin roster) ── */
.roster-empty-state {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
}
.roster-empty-state .empty-state-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.roster-empty-state h3 {
  margin: 0 0 8px;
}
.roster-empty-state p {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 460px;
  margin: 0 auto 20px;
}
.roster-empty-state .empty-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Advanced <details> in the Edit-Candidate modal ── */
.form-advanced {
  margin: 16px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  background: var(--surface);
}
.form-advanced > summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
  list-style-position: inside;
}
.form-advanced > summary:hover {
  color: var(--text);
}
.form-advanced[open] > summary {
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   RECRUITER COCKPIT (role=user + smd) — v9.86, SMD added v9.93
   Dead-simple recruiter view. body.recruiter-mode (set by app.js) hides the
   admin/SMD dashboard and reveals #recruiter-cockpit (rendered by recruiter.js).
   ════════════════════════════════════════════════════════════════════════════ */

/* Visibility toggle */
.recruiter-only { display: none; }
body.recruiter-mode .recruiter-only { display: block; }

/* Hide all admin/SMD dashboard machinery for recruiters.
   v12.3: .events-section is NO LONGER hidden — recruiters run their own
   team meetings (Event.ownerId model). The meeting-room button stays
   admin-only (tenant-level setting), as does recipient-group management. */
body.recruiter-mode .stats-bar-title,
body.recruiter-mode .dashboard-overview,
body.recruiter-mode #roster,
/* v12.39: meeting-room button now VISIBLE for recruiters — they edit their
   OWN default room (server routes role=user writes to User.meetingRoomUrl,
   never the tenant default). Groups/accounts stay admin-only. */
body.recruiter-mode #btn-open-groups,
body.recruiter-mode #btn-open-accounts { display: none !important; }

/* Convert modal: recruiters don't manage groups/upline — hide those rows */
body.recruiter-mode #convert-group-row,
body.recruiter-mode #convert-upline-row { display: none; }

/* v12.33: `margin: 0 auto` was wiping the global `section { margin-bottom:
   28px }` rhythm, so in cockpit mode the Events header sat glued to the
   roster table card (Larry's report). Keep the centering, restore the gap. */
.recruiter-cockpit { max-width: var(--container-max); margin: 0 auto 28px; }

/* Header: title + invite button */
.rc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.rc-header h2 { margin: 0 0 0.25rem; }
.rc-subtitle { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.rc-greeting-name { font-weight: 600; color: var(--text); }
#rc-invite-btn { white-space: nowrap; }

/* KPI tiles (clickable filters) */
.rc-tiles {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem; margin-bottom: 1.25rem;
}
.rc-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 0.9rem 1rem; border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.rc-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rc-tile-active { box-shadow: var(--shadow-md); }
.rc-tile-value { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text); font-family: var(--font-mono); }
.rc-tile-label { font-size: 0.8rem; color: var(--text-muted); }
.rc-tile-prospects  { border-left-color: var(--blue); }
.rc-tile-candidates { border-left-color: var(--teal); }
.rc-tile-followup   { border-left-color: var(--gold-strong); }
.rc-tile-examready  { border-left-color: var(--accent); }
.rc-tile-licensed   { border-left-color: var(--green); }
.rc-tile-active.rc-tile-prospects  { border-color: var(--blue); }
.rc-tile-active.rc-tile-candidates { border-color: var(--teal); }
.rc-tile-active.rc-tile-followup   { border-color: var(--gold-strong); }
.rc-tile-active.rc-tile-examready  { border-color: var(--accent); }
.rc-tile-active.rc-tile-licensed   { border-color: var(--green); }

/* Filter bar */
.rc-filter-bar {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem;
  font-size: 0.9rem; color: var(--text-muted);
}

/* Roster table */
.rc-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rc-table { width: 100%; border-collapse: collapse; }
.rc-table thead th {
  text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600; padding: 0.6rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.rc-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rc-table tbody tr:last-child td { border-bottom: none; }
.rc-row:hover { background: var(--surface-2); }
.rc-row-followup { background: var(--gold-dim); }
.rc-row-followup:hover { background: var(--gold-dim); }
/* v12.15 (M6): archived members shown via the "Show N archived" toggle. */
.rc-row-archived { opacity: 0.55; }
.rc-row-archived .rc-name { font-style: italic; }
.rc-archived-toggle {
  display: block; width: 100%;
  padding: 10px 16px;
  border: none; border-top: 1px solid var(--border);
  background: transparent; color: var(--text-dim);
  font-size: 13px; text-align: center; cursor: pointer;
}
.rc-archived-toggle:hover { color: var(--text); background: var(--gold-dim); }

.rc-cell-name { min-width: 180px; }
.rc-name { font-weight: 600; color: var(--text); }
.rc-email { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Stage pills */
.rc-stage { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.rc-stage-prospect  { background: var(--blue-dim);  color: var(--blue); }
.rc-stage-studying  { background: var(--surface-3); color: var(--text-dim); }
/* v12.54 (Larry): *-strong tokens are 15-18% ALPHA TINTS (border use only).
   They were misused here as text/badge colors → near-invisible pills.
   Text on a tinted pill must always be a SOLID dark tone. */
.rc-stage-examready { background: var(--teal-dim);  color: var(--teal-deep); }
.rc-stage-passed    { background: var(--gold-dim);  color: #8a6420; }
.rc-stage-licensed  { background: var(--green-dim); color: #2e7d46; }

/* Follow-up badge — an alert flag, so it gets a SOLID amber pill */
.rc-badge-followup {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; background: #b07d2a; color: #fff; vertical-align: middle;
}

.rc-cell-active { color: var(--text-dim); font-size: 0.88rem; white-space: nowrap; }

/* CP1 progress bar */
.rc-cell-cp1 { white-space: nowrap; }
.rc-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: var(--surface-3); vertical-align: middle; overflow: hidden; }
.rc-bar-fill { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.rc-bar-pct { display: inline-block; margin-left: 0.5rem; font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); vertical-align: middle; }
.rc-cp1-na { color: var(--text-muted); }

.rc-cell-action { text-align: right; white-space: nowrap; }
.rc-action-none { color: var(--text-muted); }

.rc-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.95rem; }

@media (max-width: 720px) {
  .rc-tiles { grid-template-columns: repeat(2, 1fr); }
  /* v12.63 (#11): a 5-col roster on a 375px phone was crushing columns so
     zh-TW cells wrapped one character per line (the "vertical" look). The
     wrapper already wanted horizontal scroll, but .rc-table{width:100%} had no
     min-width, so it shrank to fit and never overflowed. Pin a min-width so the
     scroll engages, and stop name/header cells from wrapping. */
  .rc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rc-table { min-width: 560px; }
  .rc-table thead th,
  .rc-cell-name { white-space: nowrap; }
}

/* ── Keyboard focus indicator (a11y) ─────────────────────────────────────────
   A handful of input:focus rules scattered above set outline:none and rely on
   a subtle border-color change, which beats the *:focus-visible rule on
   specificity. This override guarantees keyboard users always get a visible
   ring without affecting mouse focus. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px;
}

/* ── div→button conversion sizing (a11y v9.96) ───────────────────────────────
   Buttons shrink-to-fit even at display:flex; these force the former div
   geometry. button.X (0,1,1) outranks .X (0,1,0) so position is irrelevant. */
button.candidate-list-row { width: 100%; }
button.monitor-alert { width: 100%; }
button.exam-card { display: block; width: 100%; }
button.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* ── v9.97/v9.98: unified login switch tab + static footer language row ────── */

/* Team | Learner switch tabs on both login cards */
/* Sticky footer: the footer sits at the very BOTTOM of the page (static, in
   normal flow — most-websites pattern), pushed to the viewport bottom when
   the page is short. NOT floating, does not follow scroll. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > footer { margin-top: auto; }

/* Footer language row — dark-text pills on the light footer strip.
   `footer .lang-switcher a` (0,2,2) outranks the legacy white-text
   `.lang-switcher a` topbar styling (0,1,1) in every state. */
/* One horizontal footer line, 3 anchored zones: © (left) · language pills
   (center) · links+feedback (right). Grid zones so switching language only
   grows/shrinks the middle — © and the right group stay put instead of the
   whole row reflowing with the text width. */
.footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.footer-row .footer-copy { justify-self: start; }
.footer-row .lang-switcher { justify-self: center; }
.footer-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (max-width: 640px) {
  .footer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
}
.footer-copy {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-mini-link {
  color: var(--text-dim);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.footer-mini-link:hover {
  color: var(--text);
  text-decoration: underline;
}

footer .lang-switcher {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
footer .lang-switcher a {
  color: var(--text-dim);
  margin-left: 0;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
}
footer .lang-switcher a:hover {
  color: var(--text);
  background: var(--surface);
}
footer .lang-switcher a.active {
  background: var(--accent);
  color: #ffffff;
}

.footer-block {
  padding: 12px 20px;
}

/* v10.0: cockpit header action pair + instant language-pill state change */
.rc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* v12.65 (Larry #5): the cockpit action buttons (My profile / Follow-up /
     Email report / Invite) hug the RIGHT edge — left-aligned looked off, and
     when they wrap to their own row they stay right-aligned. */
  justify-content: flex-end;
  margin-left: auto;
}
footer .lang-switcher a { transition: none; }

/* v11.0: roster recruiter filter */
.roster-upline-filter {
  width: 100%;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* v11.6: retention label badge on accounts rows (visible labels get maintained) */
.retention-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg);
}
.retention-badge.retention-active { color: var(--teal); border-color: var(--teal); }
.retention-badge.retention-inactive { color: var(--accent); border-color: var(--accent); }
.retention-badge.retention-left { color: var(--text-muted); text-decoration: line-through; }

/* v10.7: recruiter member card — read-only snapshot + name/notes editing */
/* v12.13c: the member card built its own body container and never got the
   1.5rem inset every other modal form has (#admin-form et al.), so every label
   and note sat glued to the frame — Larry's "字全部黏在邊框上" flag. Match the
   shared form padding so the content breathes. */
.rc-member-body { display: flex; flex-direction: column; gap: 14px; padding: 1.5rem; }
.rc-member-name-edit { display: flex; gap: 8px; }
.rc-member-name-edit input { flex: 1; }
.rc-member-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rc-fact { display: flex; flex-direction: column; gap: 2px; }
.rc-fact-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; }
.rc-fact-value { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-member-notes h4 { margin: 0 0 8px; }
.rc-notes-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.rc-note-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.rc-note-label { font-weight: 600; font-size: 13px; }
.rc-note-text { font-size: 13px; color: var(--text-dim); white-space: pre-wrap; }
.rc-note-meta { font-size: 11px; color: var(--text-muted); }
.rc-note-empty { color: var(--text-dim); font-size: 13px; font-style: italic; }
.rc-note-form { display: flex; flex-direction: column; gap: 8px; }
.rc-name-btn { cursor: pointer; }
.rc-name-btn:hover, .rc-name-btn:focus-visible { color: var(--accent); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   v12.25 — Input unification (owner request): every data-entry
   field gets the LOGIN-page look — same corner roundness
   (var(--radius-sm)) + inner padding (12px 18px) so placeholder/
   example text is inset the same way. COLORS ARE UNCHANGED: only
   padding + border-radius are set here, never border/background/
   text color. Global box-sizing:border-box (top of file) keeps
   width:100% fields from overflowing with the added padding.
   Appended last so it overrides the divergent per-component rules
   on equal-specificity ties without touching any exempt control
   (checkboxes, compact toolbar search/filter, dense note grid,
   schedule day/time pickers). ════════════════════════════════ */

/* Full login look (roundness + inner padding) on real data-entry fields.
   The first four were genuinely unstyled (the universal * reset forced
   padding:0 + square UA corners → placeholder glued to the edge). */
.cp1-license-input,
#archive-reason-note,
.rc-note-form textarea,
.rc-note-form select,
.guest-form .form-row input,
.guest-form .form-row select,
.accounts-form input,
.accounts-form select,
.cp-submission-form input,
.cp-submission-form textarea,
#event-form textarea,
#reminder-config textarea,
.feedback-form textarea {
  padding: 12px 18px;
  border-radius: var(--radius-sm);
}

/* Roundness parity only — keep the functional/compact padding of
   toolbar search, filter selects, the AI paste box and the dense
   note-composer, but align their corner radius to the login look. */
#ai-input-text,
.candidate-search,
.accounts-search,
.roster-upline-filter,
.note-type-select,
.note-text-input,
.note-custom-input {
  border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════
   v12.31 — Zoom-style event modal. Appended last so the pill
   rules override the legacy .reminder-checks block on source
   order. Tokens only, no new colors. ═══════════════════════ */

/* 1. Reminder toggles as horizontal pills. Root cause of the vertical CJK
   wrap: labels were shrinkable flex items and CJK min-content = one glyph.
   inline-flex + nowrap + no shrink kills it for every locale. */
.reminder-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reminder-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
/* checked state = accent pill (cosmetic; browsers without :has() keep the
   native accent-colored checkbox) */
.reminder-checks label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}

/* 2. The recurring builder reads as a revealed sub-panel behind the
   "Repeats weekly" checkbox (Zoom's recurrence drawer). */
#recurring-section {
  margin: 0.25rem 0 0.75rem;
  padding: 0.5rem 0 0.25rem 0.9rem;
  border-left: 2px solid var(--border-strong);
}

/* 3. Optional-field marker on Meeting Link / Description labels. */
.optional-tag {
  font-weight: 400;
  color: var(--text-muted);
}

/* 4. Options as a quiet panel so Topic/When read first. NOT a real
   <details> collapse — #ev-audience-hint must stay visible for the
   recruiter selftest specs. */
#ev-options-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem 0.6rem;
}
#ev-options-section h4 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.6rem;
}
#ev-options-section #reminder-config h4 {
  margin-top: 0.9rem; /* sub-head: "Email Reminders" inside the panel */
}

/* ════════════════════════════════════════════════════════════
   v12.32 — add-to-calendar actions (day popup + attendance rows)
   Buttons themselves reuse .btn-sm.btn-secondary. ═══════════ */
.cal-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.att-cal-btns {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  align-items: center;
}
.att-cal-btns .btn-sm { padding: 3px 8px; }

/* v12.32 — attendance check-in window states */
.att-window-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.att-history-label {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.attendance-row.att-locked {
  opacity: 0.75;
  cursor: default;
}
.att-state {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-weight: 700;
}
.att-state-yes { color: var(--teal); }
.att-state-no  { color: var(--rose); }

/* ════════════════════════════════════════════════════════════
   v12.36 — announce-modal inset + events-header button parity
   ═══════════════════════════════════════════════════════════ */

/* The announce form was missing the standard 1.5rem modal inset every other
   modal form has (#event-form, .feedback-form, #admin-form...) — fields sat
   glued to the dialog frame (same class of bug as the v12.13c member card). */

/* Focus parity for the newly base-styled textareas. */
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* 會議室 / 公告 / 新增活動 sit in one row and must read as one control
   group: equalize padding + font; give the borderless primaries a
   transparent border so all three land on the same box height. */
.events-header-actions .btn-primary,
.events-header-actions .btn-secondary {
  padding: 10px 18px;
  font-size: 13px;
  border-width: 1px;
  border-style: solid;
}
.events-header-actions .btn-primary { border-color: transparent; }

/* ════════════════════════════════════════════════════════════
   v12.44 — stats bar: ONE full-width row of 8 tiles (Larry: the
   monitor's old right-hand grid cell left dead space). The
   .dashboard-overview class STAYS on the section — the
   recruiter-mode hide rule keys off it — but its two-column
   grid is neutralized here (appended last, wins on order).
   ═══════════════════════════════════════════════════════════ */
.dashboard-overview {
  display: block;
  grid-template-columns: none;
}
.dashboard-overview .stats-bar {
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-bottom: 0;
}
.dashboard-overview .stat-card { padding: 16px 12px; }
.dashboard-overview .stat-value { font-size: 24px; }
@media (max-width: 1100px) {
  .dashboard-overview .stats-bar { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .dashboard-overview .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* v12.45 — two-column account console (learners | recruiting team) */
.acct-col-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-dim);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.roster-right-staff { min-width: 0; }
.roster-right-staff .accounts-add { margin-top: 16px; }
#modal-approvals .cp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

/* ════════════════════════════════════════════════════════════
   v12.46 — balanced account console (Larry: learners and the
   recruiting team are EQUALLY important → 50/50 columns) with
   compact staff rows sorted by direct headcount. ════════════ */
.roster-split { grid-template-columns: 1fr 1fr; }

.accounts-table-header,
.account-row {
  grid-template-columns: 1.4fr 0.9fr 0.9fr auto;
  gap: 10px;
}
.account-row { padding: 8px 12px; }
.acct-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.acct-downline {
  display: inline-block;
  background: var(--teal-dim);
  color: var(--teal-deep);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .roster-split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

/* ════════════════════════════════════════════════════════════
   v12.47 — account console refinement (Larry):
   invite form on top + scrollable staff list, staff rows read
   like learner rows, learner rows show identity + exam state +
   Edit inline, deletion moved into the edit modal's danger zone
   with a downline-destination step. ═════════════════════════ */

/* Invite form sits ABOVE the list now */
.roster-right-staff .accounts-add { margin-top: 0; margin-bottom: 12px; }
.roster-right-staff .accounts-table { margin-bottom: 0; }

/* Staff list scrolls like the learner list (same cap) */
.accounts-list {
  max-height: 420px;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
  gap: 4px;
  margin-bottom: 0;
}

/* Staff rows: same slim look as .candidate-list-row */
.account-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* temp-password strip wraps to its own line */
  gap: 10px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}
.account-row .account-row-pw { flex-basis: 100%; }
.account-row:hover { background: #faf5ee; }
.account-row .col-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.account-row .col-downline,
.account-row .col-role { flex-shrink: 0; }
.account-row .col-actions { flex-shrink: 0; }

/* Learner rows: static info rows (no click-to-open) */
.candidate-list-row.cl-static { cursor: default; }
.cl-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.cl-badge-candidate { background: var(--teal-dim); color: var(--teal-deep); }
.cl-badge-guest { background: var(--gold-dim); color: #8a6420; }
.cl-state {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 22px;
  text-align: center;
}
.cl-state-none { color: var(--text-muted); font-weight: 400; }

/* Danger zone in the edit-user modal */
.edit-user-danger {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-strong);
}
.btn-danger-outline {
  background: transparent;
  color: #c43c3c;
  border: 1px solid rgba(196, 60, 60, 0.45);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger-outline:hover { background: rgba(196, 60, 60, 0.08); border-color: #c43c3c; }
.edit-user-delete-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(196, 60, 60, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(196, 60, 60, 0.04);
}
.edit-user-delete-where {
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--text);
}
.edit-user-delete-dest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.delete-dest-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.delete-dest-opt input[type="radio"] { margin: 0; }
.delete-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* v12.47.2 (Larry): the recruiting-team column gets the SAME white card
   as the learner column — two matching boxes side by side. */
.roster-right-staff {
  background: #fff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03);
}
/* Inside the fixed 520px grid row, both lists flex-fill their card and
   scroll at the card edge (a fixed max-height would clip under the
   parent's overflow:hidden instead of scrolling). */
.roster-left .candidate-list { flex: 1; min-height: 0; max-height: none; }
.roster-right-staff .accounts-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.roster-right-staff .accounts-list { flex: 1; min-height: 0; max-height: none; }

/* v12.48 — Add Account moved to a button + modal (inline form cramped
   its placeholders). Column head = title + button on one row. */
.acct-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.acct-col-head .acct-col-title { margin: 0; }

/* v12.49 — guests merged into the learner column (Manage-Guests modal
   retired; convert lives in the edit modal) + type-to-search recruiter
   filter combobox. */
.filter-combo { position: relative; }
.filter-combo .roster-upline-filter { width: 100%; box-sizing: border-box; padding-right: 30px; }
.filter-combo-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
}
.filter-combo-clear:hover { background: var(--surface-2); color: var(--text); }
.filter-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(50, 35, 15, 0.12);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-combo-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-main);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.filter-combo-item:hover { background: #faf5ee; }
.filter-combo-item.active { background: var(--teal-dim); color: var(--teal); font-weight: 600; }
/* Recruiters convert from their cockpit member card — hide the modal
   convert button in scoped mode (parity with other admin-only actions). */
#admin-form.rc-scoped #btn-modal-convert { display: none !important; }

/* v12.50 (Larry) — upline is admin-only: recruiters never see the row */
#admin-form.rc-scoped #row-c-upline { display: none !important; }

/* v12.50 — 團隊表現: per-recruiter KPI board on upline cockpits */
.rc-view-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.rc-view-tab {
  border: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.rc-view-tab.active {
  background: #fff;
  color: var(--teal-deep);
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.08);
}
.rc-team-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.rc-team-card {
  background: #fff;
  border: 1px solid rgba(100, 75, 40, 0.08);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(50, 35, 15, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rc-team-card-self { border-color: rgba(52, 97, 94, 0.35); }
.rc-team-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-team-card-name { font-weight: 700; font-size: 14px; color: var(--text); }
.rc-team-card-title { font-size: 11px; color: var(--text-muted); }
.rc-team-card-count { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.rc-team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.rc-team-stat {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rc-team-stat-value { font-size: 17px; font-weight: 700; color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.rc-team-stat-warn .rc-team-stat-value { color: #c47b3c; }
.rc-team-stat-label { font-size: 10px; color: var(--text-muted); line-height: 1.2; }
.rc-team-view-btn { align-self: flex-start; }

/* v12.51 (Larry) — the two column cards mirror each other:
   add-candidate/invite-guest live in the learner card head, and both
   search inputs share ONE look + matching rule (name/email/AgentID). */
.acct-col-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.accounts-search {
  padding: 9px 12px;
  border: 1px solid rgba(100, 75, 40, 0.12);
  border-radius: 8px;
  background: #faf8f4;
}
.accounts-search:focus {
  outline: 2px solid var(--teal-deep);
  outline-offset: -2px;
  background: #fff;
}
.accounts-search-wrap { margin-bottom: 10px; }

/* ════════════════════════════════════════════════════════════
   v12.55 (Larry) — modal inset is a BASE rule now. The glued-to-edge
   bug kept recurring because each modal's form needed its own padding
   class and new modals kept forgetting it (announce v12.36, then
   fu-rules/profile/archive). Direct children of .modal get the standard
   inset by DEFAULT; a modal may override (see .modal > .guest-form) but
   can never be flush by omission again. ═════════════════════ */
.modal > form { padding: 1.5rem; }
.modal > .form-row { margin-left: 24px; margin-right: 24px; }
.modal > .form-actions { margin: 0 24px 20px; }

/* v12.57 — friendly inline empty state for the learner column (the full-page
   empty state was retired so it can't hide the recruiting-team column). */
.candidate-list-empty-first {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-dim);
}
.candidate-list-empty-first .empty-state-icon {
  font-size: 34px;
  margin-bottom: 8px;
}
.candidate-list-empty-first p {
  font-size: 13px;
  line-height: 1.55;
  max-width: 260px;
  margin: 0 auto;
}

/* v12.58 — the onboarding nudge moved onto the recruiter cockpit's empty
   state (admin keeps a neutral one-liner). Space the 🌱 + copy. */
.rc-empty .empty-state-icon { font-size: 34px; margin-bottom: 8px; }
.rc-empty p { margin: 0 auto; max-width: 320px; line-height: 1.55; }

/* v12.60 — staff archive/restore + 3-option reassign picker */
.danger-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dest-specific-select {
  margin-top: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-main);
  box-sizing: border-box;
}
.account-row-archived { opacity: 0.62; }
.acct-archived-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-dim);
  vertical-align: middle;
}

/* v12.64 — team-performance redesign: Me + All-team fixed cards, person
   picker, generation-depth selector. */
.rc-team-fixed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.rc-team-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 14px;
  max-width: 420px;
}
.rc-team-picker label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.rc-team-person-panel {
  border-top: 1px solid var(--border-strong);
  padding-top: 14px;
}
.rc-team-person-panel .rc-team-card { max-width: 360px; }
.rc-team-depth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.rc-team-depth-label { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.rc-depth-btn {
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-main);
  cursor: pointer;
}
.rc-depth-btn.active { background: var(--teal-dim); color: var(--teal-deep); border-color: var(--teal-deep); font-weight: 600; }

/* v12.65 (#4): keep wide markdown children inside the viewer — tables scroll
   in their own box, code wraps, images fit. Prevents the whole doc from
   becoming horizontally scrollable with dead space. */
.viewer-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.viewer-content pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.viewer-content img, .viewer-content video { max-width: 100%; height: auto; }
.viewer-content code { overflow-wrap: anywhere; }

/* v12.66 (#6) — prev/next chapter nav + CP1 day-end banner at the end of a doc */
.viewer-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.viewer-nav .viewer-nav-prev { margin-right: auto; }
.viewer-nav .viewer-nav-next { margin-left: auto; }
.viewer-nav button:disabled { opacity: 0.4; cursor: default; }
.viewer-dayend {
  margin-top: 28px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--teal-dim);
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}