/* YFS Client Portal — YFS brand, light theme.
 *
 * Values come from the brand book (Branding/YFS.pdf), which is authoritative:
 *   ink navy #050A24 · YFS blue #1173F2 · YFS cyan #25CFFF · red #EA384C
 *   Poppins — Bold headings, Regular body.
 * See .impeccable.md for the direction these serve.
 *
 * WHY THE NAMES DID NOT CHANGE: ~1,245 var() references across this file depend
 * on them. Remapping values rebrands every surface at once without touching a
 * usage site, which is the only way to do this safely in a stylesheet with no
 * build step and no visual tests. Migrating the ~949 remaining hardcoded hexes
 * is the follow-up pass, client-facing sections first.
 *
 * Colors are OKLCH so tonal steps look evenly spaced and neutrals can be tinted
 * toward the brand hue (258) — a chroma of 0.004–0.012 is barely nameable but
 * makes the greys feel like they belong to the blue.
 */

:root {
  /* Poppins is the brand face. The fallback stack matters: Google Fonts can be
     blocked, slow, or unavailable offline, and 'sans-serif' alone drops the page
     onto whatever the OS calls sans (Times-adjacent on some Androids). */
  --font-brand: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Surfaces. Card stays pure white per the brand book; the page behind it is
     a hair of blue rather than a neutral grey. */
  --bg: oklch(0.978 0.004 258);
  --card: #ffffff;
  --card-border: oklch(0.918 0.008 258);
  --border: oklch(0.918 0.008 258);

  /* Text. Stepped down from the brand ink so body copy is not aggressively
     black, while headings can still reach for --color-text-darkest. */
  --text: oklch(0.255 0.036 266);
  /* The three text tiers were 0.255 / 0.515 / 0.552 — a 0.26 step then a 0.037
     one, so supporting text and quiet meta text were indistinguishable. --muted
     cannot go lighter than 0.552 without failing AA, so the middle tier moves
     instead: 0.255 / 0.44 / 0.552 gives steps of 0.185 and 0.112. */
  --text-secondary: oklch(0.44 0.024 262);
  /* Quiet body text. Was 0.648, which is 3.26:1 on a card and 3.06:1 on the page
     background — below AA for normal text, and this token carries most of the
     subtitles, captions and meta lines a parent reads. 0.552 clears 4.5 on both. */
  --muted: oklch(0.552 0.018 260);

  /* Brand. Blue is the signal — primary action, active state, live status —
     and is deliberately the only saturated color in most views.
     CONTRAST: the brand blue #1173F2 is oklch(0.580 …) and gives white text
     4.41:1 — just under WCAG AA. Lightness is nudged to 0.575 (~#0F71F0), which
     reaches 4.51:1. That is a 0.5% lightness change, imperceptible side by side,
     and it makes every white-on-blue surface in the portal compliant instead of
     almost-compliant. For brand-blue TEXT on a light background use
     --primary-dark (6.5:1) or --color-text-info (7.0:1) — this token is for
     fills, borders, and focus states. */
  --primary: oklch(0.575 0.208 258.3);       /* brand #1173F2, AA-adjusted */
  --primary-dark: oklch(0.487 0.183 258.3);
  --brand-cyan: oklch(0.795 0.143 223.5);    /* #25CFFF — accents and fills.
                                                Fails AA as text on white. */
  --brand-gradient: linear-gradient(135deg, oklch(0.795 0.143 223.5), oklch(0.58 0.208 258.3));

  /* Status. Muted and tinted toward the base so they read as information
     rather than decoration. Red is reserved for destructive and error only. */
  --accent: oklch(0.63 0.145 152);
  --success: oklch(0.63 0.145 152);
  --warning: oklch(0.72 0.15 75);
  --info: oklch(0.58 0.208 258.3);
  /* Brand book ink. The sidebar is the largest block of colour in the app. */
  --ink: #050A24;
  --error: oklch(0.619 0.212 20.4);          /* #EA384C */
  /* --error is tuned to read as error TEXT on a light surface. Behind white
     text it only reaches 4.06:1, which fails AA. Use this instead whenever the
     error colour is the background and the text on it is white. */
  --error-strong: oklch(0.5 0.2 20.4);

  /* --success and --warning are sized for fills, dots and chart series, where
     3:1 is the correct bar. As TEXT on a light surface they are 3.29:1 and
     2.53:1, which fails AA. Use these wherever the colour is the text, or is a
     solid background carrying white text. Do not darken the base tokens —
     that would muddy the charts. */
  --success-text: oklch(0.536 0.145 152);
  --warning-text: oklch(0.558 0.15 75);

  /* Stat cards.
     Previously four unrelated hues (sky / green / purple / yellow), which is
     the single most "generic dashboard" thing in the portal and gave equal
     visual weight to a vanity metric and the one that pays. Now: sent, opens,
     and clicks step through tinted neutrals, and REPLIES — the metric a parent
     actually cares about — is the one that gets the brand blue. */
  --sent-bg: oklch(0.965 0.006 258);
  --sent-text: oklch(0.44 0.03 262);
  --opens-bg: oklch(0.955 0.012 240);
  --opens-text: oklch(0.44 0.05 250);
  --clicks-bg: oklch(0.945 0.022 232);
  --clicks-text: oklch(0.45 0.09 250);
  --replies-bg: oklch(0.94 0.045 250);
  --replies-text: oklch(0.47 0.17 258.3);

  /* Elevation. Surfaces settle rather than float: these are near-hairline and
     tinted toward the brand hue instead of neutral grey drop shadows. */
  --shadow-sm: 0 1px 2px oklch(0.58 0.208 258.3 / 0.06);
  --shadow-md: 0 2px 8px oklch(0.58 0.208 258.3 / 0.08);
  --shadow-lg: 0 8px 24px oklch(0.58 0.208 258.3 / 0.10);

  /* Semantic color tokens — pair "bg / text / border" by intent so dark-mode
     work later only needs to remap these, not every hex code in the file. */
  --color-bg-subtle: oklch(0.982 0.003 258);   /* lightest neutral surface */
  --color-bg-muted: oklch(0.962 0.006 258);    /* slightly darker neutral surface */
  --color-bg-info: oklch(0.93 0.045 250);      /* info / informational background */
  --color-bg-info-soft: oklch(0.968 0.018 250);/* lightest info background */
  --color-bg-success: oklch(0.945 0.05 152);   /* success background */
  --color-bg-warning: oklch(0.955 0.05 85);    /* warning background */
  --color-bg-error: oklch(0.96 0.02 20.4);     /* error background */
  --color-text-dark: oklch(0.375 0.03 264);    /* high-contrast text on light surfaces */
  --color-text-darkest: oklch(0.185 0.045 268);/* highest-contrast — near brand ink */
  --color-text-success: oklch(0.47 0.13 152);  /* success text on light bg */
  --color-text-warning: oklch(0.46 0.11 70);   /* warning text on light bg */
  --color-text-info: oklch(0.47 0.17 258.3);   /* info text on light bg */
  --color-border-subtle: oklch(0.955 0.005 258); /* low-contrast divider */
  --color-border-light: oklch(0.905 0.009 258);  /* light card / row border */

  /* 4pt spacing scale, semantic rather than pixel-named. */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* Demo workspace ---------------------------------------------------------
 * The demo is deliberately obvious and read-only. Its data provider never
 * reaches production APIs; these styles make that boundary visible too. */
.login-demo-btn {
  width: 100%;
  margin-top: 10px;
  border-color: color-mix(in oklch, var(--primary) 42%, var(--card-border));
  color: var(--primary);
}

.login-demo-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.demo-workspace-banner {
  display: none;
}

body.is-demo .demo-workspace-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 11px 14px;
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--card-border));
  border-radius: 14px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.demo-workspace-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.demo-workspace-copy {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  column-gap: 8px;
}

body.is-demo .demo-workspace-banner strong {
  color: var(--text);
}

.demo-workspace-badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 32%, var(--card-border));
  background: color-mix(in oklch, var(--primary) 8%, white);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.demo-only { display: none; }
body.is-demo .demo-only { display: block; }
body.is-demo .demo-hidden { display: none !important; }
body.is-demo .xaudit-connection,
body.is-demo .xaudit-actions { display: none !important; }

.demo-interaction-note {
  max-width: 62ch;
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}


/* ==========================================
   UI Polish & QA Pass — Mar 2026
   ========================================== */

:root {
  --btn-regular-y: 8px;
  --btn-regular-x: 16px;
  --btn-cta-y: 10px;
  --btn-cta-x: 20px;

  /* Z-index scale — replace ad-hoc values across the app */
  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-modal-stacked: 1100;
  --z-toast: 10000;

  /* Focus ring — used by :focus-visible across interactive elements. Carries
     the brand blue, since an active/focused state is exactly what the accent
     is reserved for. */
  --focus-ring: 0 0 0 2px oklch(0.58 0.208 258.3 / 0.5);
  --focus-ring-offset: 2px;
}

/* Accessibility primitives ─────────────────────── */
.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;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-size: 14px;
  line-height: 1.45;
}

.page-header h1,
.login-card h2 {
  font-family: var(--font-brand);
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.school-modal-info h2,
.coach-modal-info h2 {
  font-family: var(--font-brand);
  font-size: 20px !important;
  letter-spacing: -0.02em;
}

.modal-header h3,
.profile-card h3,
.chart-title,
.school-card-name,
.coach-card h3 {
  font-family: var(--font-brand);
  font-size: 16px !important;
  letter-spacing: -0.02em;
}

.form-group label,
.modal-field-label,
.profile-field label {
  font-size: 13px !important;
}

small,
.school-card-stat,
.school-card-subtitle,
.section-count,
.thread-email,
.reply-label,
.coach-list-contact-status,
.coach-list-contact-empty,
.coach-list-quality-empty,
.profile-muted,
.profile-inline-hint,
.user-email,
.forgot-link {
  font-size: 12px;
}

.main-content {
  padding: 20px 24px;
}

.page-header {
  margin-bottom: 18px;
}

.chart-card,
.stat-card,
.info-banner,
.campaign-filter,
.tasks-widget,
.kanban-column,
.login-card,
.school-card,
.profile-card {
  border-radius: 14px;
}

.chart-card,
.info-banner,
.tasks-widget {
  padding: 16px 18px;
}

.stat-card {
  padding: 18px;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  width: auto;
  min-height: 36px;
  padding: var(--btn-regular-y) var(--btn-regular-x);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.btn-primary {
  background: var(--primary);
  /* Was inherited, which rendered dark navy body text on the blue fill at
     roughly 2.5:1 — the primary action was the least readable control on the
     page. White on --primary is 4.51:1 (WCAG AA). */
  color: #fff;
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-primary:not(:disabled):hover:not(:focus-visible) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: color-mix(in oklch, var(--primary) 35%, white);
  border-color: transparent;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary.btn-cta,
#resetBtn,
#lookupEmailBtn,
#saveProfileBtn,
#loginForm .btn-primary {
  padding: var(--btn-cta-y) var(--btn-cta-x);
  min-height: 40px;
}

#loginForm .btn-primary,
#resetBtn,
#lookupEmailBtn {
  width: 100%;
}

.btn-secondary {
  background: #fff;
  border-color: #dbe4f0;
}

.btn-secondary:hover {
  background: var(--color-bg-info-soft);
  border-color: #bfdbfe;
  color: var(--primary);
}

.btn-primary.is-loading {
  opacity: 0.9;
}

.modal-header {
  padding: 18px 20px;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  gap: 8px;
  padding: 14px 20px;
}

.modal-footer .btn-primary,
.modal-footer .btn-secondary {
  min-width: 104px;
  padding: var(--btn-regular-y) var(--btn-regular-x);
}

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

.search-input,
.filter-select {
  height: 38px;
  font-size: 14px;
}

.search-input,
.filter-select,
.modal-field-input,
.modal-field-select,
.modal-field-textarea {
  border-radius: 10px;
}

.search-input,
.filter-select {
  padding: 8px 12px !important;
}

#schoolsSection .search-filters,
#coachesSection .search-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

#schoolsSection .search-filters {
  grid-template-columns: 1fr auto;
}

#coachesSection .search-filters {
  grid-template-columns: 1fr minmax(140px, auto) auto;
}

#schoolsSection .search-filters .search-input,
#coachesSection .search-filters .search-input,
#schoolsSection .search-filters .filter-select,
#coachesSection .search-filters .filter-select {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.schools-grid {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

/* Classroom: course grid, lesson view, and progress tracking. */
.classroom-grid {
  display: grid;
  /* min(100%, 260px) keeps a single card from ever exceeding the viewport
     width, so the grid never forces horizontal scroll on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.classroom-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

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

.classroom-card-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--border);
}

.classroom-card-cover-placeholder {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.classroom-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.classroom-card-title {
  margin: 0;
  font-size: 16px;
}

.classroom-card-description {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.classroom-card .progress-bar-container {
  max-width: none;
}

.classroom-detail-header {
  align-items: flex-end;
  flex-wrap: wrap;
}

.classroom-detail-header h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.classroom-course-progress {
  display: flex;
  width: min(100%, 320px);
  margin-left: auto;
  flex-direction: column;
  gap: var(--space-xs);
}

.classroom-course-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: 12px;
}

.classroom-course-progress-copy strong {
  color: var(--text);
  font-size: 14px;
}

.classroom-course-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.classroom-course-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.3s ease;
}

.classroom-detail-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.classroom-back-btn {
  margin-bottom: 12px;
}

.classroom-sidebar {
  min-width: 0;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.classroom-sidebar .empty-state {
  padding: var(--space-lg) var(--space-md);
}

.classroom-module-title {
  padding: 12px 16px;
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  background: var(--color-bg-subtle);
}

.classroom-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border-subtle);
}

.classroom-lesson:last-child {
  border-bottom: none;
}

.classroom-lesson.active,
.classroom-lesson:hover {
  background: var(--color-bg-info-soft);
}

.classroom-lesson.active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.classroom-lesson-check {
  flex: 0 0 16px;
  color: var(--success-text);
  font-weight: 700;
  text-align: center;
}

.classroom-lesson-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.classroom-lesson-completed .classroom-lesson-title {
  color: var(--text-secondary);
}

.classroom-lesson-completed.active .classroom-lesson-title {
  color: var(--text);
}

.classroom-module-empty {
  padding: var(--space-sm) var(--space-md);
  color: var(--muted);
  font-size: 12px;
}

.classroom-lesson-content {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: var(--space-lg);
  min-height: 200px;
  overflow-wrap: anywhere;
}

.classroom-lesson-article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-lg);
}

.classroom-lesson-article > h2 {
  margin: 0;
  color: var(--color-text-darkest);
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.classroom-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink);
}

.classroom-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.classroom-video-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--error) 30%, var(--border));
  border-radius: 10px;
  background: var(--color-bg-error);
  color: var(--text-secondary);
}

.classroom-video-error strong {
  color: var(--error);
}

.classroom-lesson-body {
  max-width: 72ch;
  color: var(--text);
  line-height: 1.7;
}

.classroom-lesson-body > :first-child {
  margin-top: 0;
}

.classroom-lesson-body > :last-child {
  margin-bottom: 0;
}

.classroom-lesson-body h2,
.classroom-lesson-body h3 {
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--color-text-darkest);
  line-height: 1.35;
}

.classroom-lesson-body p,
.classroom-lesson-body ul,
.classroom-lesson-body ol,
.classroom-lesson-body blockquote {
  margin: 0 0 var(--space-md);
}

.classroom-lesson-body ul,
.classroom-lesson-body ol {
  padding-left: var(--space-lg);
}

.classroom-lesson-body blockquote {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-left: 3px solid var(--primary);
  color: var(--text-secondary);
}

.classroom-lesson-body a {
  color: var(--primary-dark);
  overflow-wrap: anywhere;
}

.classroom-resources {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.classroom-resources h3 {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-darkest);
  font-size: 16px;
}

.classroom-lesson-resource-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.classroom-lesson-resource-list > li {
  min-width: 0;
}

.classroom-resource-item {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  color: var(--text);
  text-decoration: none;
}

a.classroom-resource-item:hover {
  border-color: var(--primary);
  background: var(--color-bg-info-soft);
}

.classroom-resource-item.is-unavailable {
  grid-template-columns: auto minmax(0, 1fr);
}

.classroom-resource-kind {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 999px;
  background: var(--color-bg-info);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 700;
}

.classroom-resource-label {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.classroom-resource-arrow {
  color: var(--primary-dark);
  font-size: 16px;
}

.classroom-resource-unavailable {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 12px;
}

.classroom-resource-overflow {
  margin-top: var(--space-sm);
}

.classroom-resource-overflow summary {
  width: fit-content;
  color: var(--primary-dark);
  cursor: pointer;
  font-weight: 600;
}

.classroom-resource-overflow[open] summary {
  margin-bottom: var(--space-xs);
}

.classroom-lesson-empty.empty-state {
  padding: var(--space-xl) var(--space-md);
}

.classroom-lesson-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.classroom-complete-button.is-complete:disabled {
  border-color: color-mix(in oklch, var(--success-text) 30%, var(--border));
  background: var(--color-bg-success);
  box-shadow: none;
  color: var(--color-text-success);
  cursor: default;
}

.classroom-progress-status {
  min-width: 0;
  color: var(--color-text-success);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.classroom-progress-status.is-error {
  color: var(--error);
}

@media (max-width: 768px) {
  .classroom-course-progress {
    width: 100%;
    margin-left: 0;
  }

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

  .classroom-sidebar {
    max-height: 52vh;
  }

  .classroom-lesson-content {
    padding: var(--space-md);
  }

  .classroom-complete-button {
    width: 100%;
    min-height: 44px;
  }

  .classroom-progress-status {
    width: 100%;
  }
}

/* School list row styles */
.school-list-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(180px, 1.2fr);
  gap: 16px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 54px;
}

.school-list-row:last-child {
  border-bottom: none;
}

.school-list-row:nth-child(even) {
  background: #fbfdff;
}

.school-list-row:hover {
  background: var(--color-bg-info-soft);
}

.school-list-row:nth-child(even):hover {
  background: #e8f0fe;
}

.school-list-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.school-list-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.school-list-logo-fallback {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f0f4ff;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.school-list-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-list-conference {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-list-mid {
  display: flex;
  align-items: center;
  gap: 8px;
}

.school-list-state {
  font-size: 13px;
  color: #64748b;
}

.school-list-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  font-size: 13px;
  color: #64748b;
  min-width: 0;
}

.school-list-right a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}

.school-list-right a:hover {
  text-decoration: underline;
}

.school-list-cost {
  font-size: 12px;
  color: var(--color-text-dark);
  font-weight: 500;
}

.school-card-division,
.coach-list-division .division-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.coaches-grid {
  display: block;
  padding-right: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.coach-list-header,
.coach-list-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.8fr) minmax(180px, 1.4fr) minmax(96px, 0.7fr) minmax(200px, 1.5fr);
  gap: 16px;
  align-items: center;
}

.coach-list-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-list-row {
  padding: 8px 16px;
  border-bottom: 1px solid #edf2f7;
  min-height: 58px;
}

.coach-list-row:nth-of-type(even) {
  background: #fbfdff;
}

.coach-list-row:hover {
  background: var(--color-bg-info-soft);
}

.coach-list-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.coach-list-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.coach-list-name,
.coach-list-title,
.coach-list-school,
.coach-list-contact {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-list-name {
  font-size: 14px;
  min-width: 0;
}

.coach-list-title,
.coach-list-contact {
  font-size: 13px;
  color: #64748b;
}

.coach-list-school {
  font-size: 13px;
}

.coach-list-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coach-list-contact a {
  color: var(--primary);
  text-decoration: none;
}

.coach-list-contact a:hover {
  text-decoration: underline;
}

.coach-list-division,
.coach-list-quality {
  display: flex;
  align-items: center;
}

.coach-list-division-empty,
.coach-list-contact-empty,
.coach-list-quality-empty {
  color: #94a3b8;
}

.quality-badge {
  justify-content: center;
}

.loading-more {
  padding: 12px 16px;
  color: #64748b;
  background: #fff;
}

.sidebar {
  background: linear-gradient(180deg, #0f172a 0%, var(--color-text-darkest) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-header {
  padding: 18px 18px 0;
  margin-bottom: 18px;
}

.sidebar-nav {
  padding: 0 14px;
}

.nav-item {
  color: rgba(226, 232, 240, 0.76);
  padding: 10px 14px;
  border-radius: 10px;
}

.nav-item:hover {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--color-bg-info-soft);
}

.nav-item.active {
  background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
  color: var(--color-bg-info-soft) !important;
  border-left: none;
  padding-left: 14px;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

.sidebar.collapsed .nav-item {
  width: 44px;
  height: 44px;
  margin: 4px auto;
  padding: 0;
  justify-content: center;
}

.sidebar-user {
  margin: auto 16px 16px;
  padding: 12px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar.collapsed .sidebar-user {
  width: 44px;
  margin: auto auto 12px;
  padding: 6px;
}

.logout-btn {
  border-radius: 10px;
}

.fab-icon {
  font-size: 16px;
}

.fab-text {
  font-size: inherit;
}

.login-container {
  padding: 24px;
  background:
    radial-gradient(circle at top, color-mix(in oklch, var(--primary) 8%, transparent), transparent 38%),
    linear-gradient(180deg, var(--color-bg-info-soft) 0%, #f8fafc 40%, var(--color-bg-muted) 100%);
}

.login-card {
  max-width: 420px;
  padding: 28px;
  border: 1px solid #dbe3ee;
}

.login-card .subtitle {
  font-size: 14px;
  margin-bottom: 24px;
}

.login-password-row {
  gap: 12px;
  align-items: center;
}

.login-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.forgot-link {
  color: #64748b;
}

.forgot-link:hover {
  color: var(--primary);
}

#loginError {
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--error);
  background: var(--color-bg-error);
  border: 1px solid color-mix(in oklch, var(--error) 18%, transparent);
  border-radius: 10px;
  text-align: left;
}

.preview-auth-bypass-btn {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

.preview-auth-bypass-note {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

#schoolBrowserModal .modal-content {
  width: min(600px, calc(100vw - 24px));
}

#schoolBrowserModal input,
#schoolBrowserModal select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

@media (max-width: 1180px) {
  #coachesSection .search-filters {
    grid-template-columns: 1fr auto auto;
  }
}

@media (max-width: 640px) {
  #coachesSection .search-filters,
  #schoolsSection .search-filters {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   GAME PLAN — embedded finalized Hub share view
   ========================================================================== */

.gameplan-page-header {
  align-items: flex-start;
}

.gameplan-page-header > div,
.gameplan-content {
  min-width: 0;
}

.gameplan-eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gameplan-page-header p {
  max-width: 64ch;
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.gameplan-state {
  display: flex;
  min-height: 480px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card);
  text-align: center;
}

.gameplan-state-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 14px;
  background: var(--color-bg-info);
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
}

.gameplan-state-icon svg {
  width: 26px;
  height: 26px;
}

.gameplan-state h2 {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-darkest);
  font-family: var(--font-brand);
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gameplan-state p {
  max-width: 56ch;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.gameplan-state .btn-secondary {
  margin-top: var(--space-md);
}

.gameplan-state.is-error {
  border-color: color-mix(in oklch, var(--error) 25%, var(--card-border));
  background: var(--color-bg-error);
}

.gameplan-state.is-error .gameplan-state-icon {
  background: var(--card);
  color: var(--error-strong);
}

.gameplan-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 3px solid var(--color-bg-info);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

.gameplan-frame-shell {
  position: relative;
  height: max(600px, calc(100dvh - 156px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.gameplan-reader-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--card) 92%, var(--primary) 8%);
}

.gameplan-reader-intro {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.gameplan-reader-intro strong {
  color: var(--color-text-darkest);
  font-size: 13px;
  line-height: 1.35;
}

.gameplan-reader-intro span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.gameplan-reader-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gameplan-reader-actions .btn-primary,
.gameplan-reader-actions .btn-secondary {
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}

.gameplan-frame {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--card);
}

.gameplan-frame:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: none;
}

.gameplan-frame-loading {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--card);
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 640px) {
  .gameplan-page-header {
    margin-bottom: var(--space-md);
  }

  .gameplan-state {
    min-height: 420px;
    padding: var(--space-lg);
  }

  .gameplan-state h2 {
    font-size: 18px;
  }

  .gameplan-frame-shell {
    height: max(560px, calc(100dvh - 132px));
    border-radius: 10px;
  }

  .gameplan-reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .gameplan-reader-actions {
    width: 100%;
  }

  .gameplan-reader-actions .btn-primary,
  .gameplan-reader-actions .btn-secondary {
    flex: 1 1 120px;
    justify-content: center;
  }
}
/* Passwordless login sits beside the existing password path without changing it. */
.login-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  color: var(--muted);
  font-size: 12px;
}

.login-auth-divider::before,
.login-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

#loginForm .login-magic-link-btn {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  white-space: normal;
  text-align: center;
}

.login-magic-status {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--color-bg-subtle);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.login-magic-status.is-success {
  color: var(--color-text-success);
  background: var(--color-bg-success);
  border-color: color-mix(in oklch, var(--success-text) 30%, transparent);
}

.login-magic-status.is-error {
  color: var(--error-strong);
  background: var(--color-bg-error);
  border-color: color-mix(in oklch, var(--error) 30%, transparent);
}

/* My Schools — client-owned target-school management (YFS-2304) */
body.is-admin .client-schools-only {
  display: none !important;
}

.page-header-subtitle,
.schools-browse-header p,
.my-schools-panel-header p {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.my-schools-panel {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.my-schools-panel-header,
.schools-browse-header,
.my-schools-tools,
.my-school-card-header,
.my-school-rank-actions,
.my-school-notes-actions {
  display: flex;
  align-items: center;
}

.my-schools-panel-header,
.schools-browse-header {
  justify-content: space-between;
  gap: var(--space-md);
}

.my-schools-panel-header h2,
.schools-browse-header h2 {
  margin: 0;
  color: var(--color-text-darkest);
  font-family: var(--font-brand);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.my-schools-summary,
.my-schools-visible-count {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.my-schools-tools {
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.my-schools-tools .search-input {
  max-width: 420px;
}

.my-schools-large-list-notice {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-info);
  background: var(--color-bg-info-soft);
  border: 1px solid var(--color-bg-info);
  border-radius: 8px;
  font-size: 13px;
}

.my-schools-list {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.my-schools-loading-card {
  min-height: 164px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-muted) 50%, var(--color-bg-subtle) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.my-school-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.my-school-card:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.my-school-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.my-school-rank-number,
.crm-target-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-info);
  background: var(--color-bg-info-soft);
  border: 1px solid var(--color-bg-info);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.my-school-rank-number {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.crm-target-rank {
  padding: 2px 7px;
  font-size: 11px;
}

.my-school-rank-actions {
  gap: var(--space-2xs);
}

.my-school-rank-button {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}

.my-school-rank-button:hover:not(:disabled) {
  color: var(--primary-dark);
  border-color: var(--primary);
}

.my-school-rank-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.my-school-card-body,
.my-school-title-wrap {
  min-width: 0;
}

.my-school-card-header {
  align-items: flex-start;
  gap: var(--space-sm);
}

.my-school-logo {
  flex: 0 0 42px;
}

.my-school-logo .school-card-logo,
.my-school-logo .school-card-logo-fallback {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  font-size: 13px;
}

.my-school-title-wrap {
  flex: 1;
}

.my-school-title-wrap h3 {
  margin: 0;
  color: var(--color-text-darkest);
  font-family: var(--font-brand);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.my-school-meta {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.my-school-remove-button {
  flex-shrink: 0;
  padding: 6px 10px;
  color: var(--error);
  background: var(--color-bg-error);
  border: 1px solid var(--color-bg-error);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.my-school-remove-button:hover {
  border-color: var(--error);
}

.my-school-editor {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
}

.my-school-field {
  min-width: 0;
}

.my-school-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.my-school-status,
.my-school-notes {
  box-sizing: border-box;
  width: 100%;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.my-school-status {
  min-height: 42px;
  padding: 9px 12px;
}

.my-school-notes {
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
}

.my-school-status:focus,
.my-school-notes:focus {
  border-color: var(--primary);
  outline: none;
}

.my-school-notes-actions {
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.my-school-save-status {
  flex: 1;
  min-height: 18px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.my-school-save-status.error {
  color: var(--error);
}

.my-school-save-status.success {
  color: var(--color-text-success);
}

.my-schools-empty,
.my-schools-error,
.my-schools-no-results {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.my-schools-empty h3,
.my-schools-error h3,
.my-schools-no-results h3 {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-darkest);
  font-family: var(--font-brand);
  font-size: 16px;
}

.my-schools-empty p,
.my-schools-error p,
.my-schools-no-results p {
  max-width: 560px;
  margin: 0 auto var(--space-md);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.schools-browse-header {
  margin-bottom: var(--space-md);
}

@media (max-width: 720px) {
  .schools-section-header,
  .my-schools-panel-header,
  .schools-browse-header {
    align-items: stretch;
    flex-direction: column;
  }

  #mySchoolsAddButton,
  .my-schools-tools .search-input {
    width: 100%;
    max-width: none;
  }

  .my-schools-panel {
    padding: var(--space-md);
  }

  .my-school-card {
    grid-template-columns: 1fr;
  }

  .my-school-rank {
    flex-direction: row;
    justify-content: flex-start;
  }

  .my-school-editor {
    grid-template-columns: 1fr;
  }

  .my-school-card-header {
    flex-wrap: wrap;
  }

  .my-school-remove-button {
    margin-left: 54px;
  }
}

/* ==========================================
   COACH REPLY INBOX
   ========================================== */

.inbox-page-header {
  align-items: flex-end;
}

.inbox-page-header > div {
  min-width: 0;
}

.inbox-page-header p {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.inbox-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  height: calc(100vh - 128px);
  height: min(760px, calc(100dvh - 128px));
  min-height: 520px;
  max-height: 760px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.inbox-list-pane,
.inbox-reading-pane {
  min-width: 0;
  min-height: 0;
}

.inbox-list-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--card);
}

.inbox-pane-header,
.inbox-reading-header {
  flex: 0 0 auto;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.inbox-pane-header h2,
.inbox-reading-header h2 {
  margin: 0;
  color: var(--color-text-darkest);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inbox-pane-header p,
.inbox-reading-header p {
  margin: var(--space-2xs) 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.inbox-conversation-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.inbox-conversation {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  min-width: 0;
  padding: var(--space-md);
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.inbox-conversation:hover {
  background: var(--color-bg-subtle);
}

.inbox-conversation.is-unread {
  border-left-color: var(--primary);
  background: var(--color-bg-info-soft);
}

.inbox-conversation.is-selected {
  background: var(--color-bg-info);
}

.inbox-conversation-topline,
.inbox-conversation-bottomline,
.inbox-conversation-name-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.inbox-conversation-topline {
  justify-content: space-between;
  gap: var(--space-xs);
}

.inbox-conversation-name-wrap {
  gap: 6px;
  flex: 1;
}

.inbox-conversation-name {
  min-width: 0;
  color: var(--color-text-darkest);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inbox-conversation.is-unread .inbox-conversation-name {
  font-weight: 700;
}

.inbox-unread-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
}

.inbox-conversation-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.inbox-conversation-email {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inbox-conversation-bottomline {
  align-items: flex-end;
  gap: var(--space-xs);
}

.inbox-conversation-snippet {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inbox-unread-label {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inbox-reading-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.inbox-reading-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 72px;
  box-sizing: border-box;
}

.inbox-reading-heading {
  min-width: 0;
}

.inbox-back-button {
  display: none;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--color-text-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.inbox-back-button:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.inbox-back-button svg {
  width: 16px;
  height: 16px;
}

.inbox-thread-messages {
  min-width: 0;
  min-height: 0;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg);
  overscroll-behavior: contain;
}

.inbox-reply-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--card);
}

.inbox-reply-actions.hidden { display: none; }

.inbox-email-message {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.inbox-email-inbound {
  border-left-color: var(--success);
}

.inbox-email-outbound {
  border-left-color: var(--primary);
}

.inbox-email-message-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--card);
}

.inbox-email-outbound .inbox-email-message-header {
  background: var(--color-bg-info-soft);
}

.inbox-email-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-success);
  color: var(--color-text-success);
  font-size: 14px;
  font-weight: 700;
}

.inbox-email-outbound .inbox-email-avatar {
  background: var(--color-bg-info);
  color: var(--color-text-info);
}

.inbox-email-header-content,
.inbox-email-sender {
  min-width: 0;
}

.inbox-email-sender-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}

.inbox-email-sender {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2xs);
  overflow-wrap: anywhere;
}

.inbox-email-person-name {
  color: var(--color-text-darkest);
  font-size: 14px;
  font-weight: 600;
}

.inbox-email-address {
  color: var(--text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.inbox-email-direction {
  flex: 0 0 auto;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 999px;
  background: var(--color-bg-success);
  color: var(--color-text-success);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inbox-email-outbound .inbox-email-direction {
  background: var(--color-bg-info);
  color: var(--color-text-info);
}

.inbox-email-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.inbox-email-fields > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-xs);
}

.inbox-email-fields dt {
  color: var(--muted);
  font-weight: 500;
}

.inbox-email-fields dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.inbox-email-fields .inbox-email-person-name {
  color: var(--color-text-dark);
  font-size: inherit;
  font-weight: 500;
}

.inbox-email-fields .inbox-email-address {
  margin-left: var(--space-2xs);
  font-size: inherit;
}

.inbox-email-message-content {
  min-width: 0;
  padding: var(--space-md);
  background: var(--card);
}

.inbox-email-body {
  min-width: 0;
  overflow-x: auto;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

.inbox-email-body:empty {
  display: none;
}

.inbox-email-body > :first-child,
.inbox-email-quoted-content > :first-child {
  margin-top: 0;
}

.inbox-email-body > :last-child,
.inbox-email-quoted-content > :last-child {
  margin-bottom: 0;
}

.inbox-email-body img,
.inbox-email-body table,
.inbox-email-quoted-content img,
.inbox-email-quoted-content table {
  max-width: 100%;
}

.inbox-email-body img,
.inbox-email-quoted-content img {
  height: auto;
}

.inbox-email-body pre,
.inbox-email-quoted-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

.inbox-email-quoted {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.inbox-email-quoted summary {
  width: fit-content;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.inbox-email-quoted summary:hover {
  text-decoration: underline;
}

.inbox-email-quoted-content {
  min-width: 0;
  margin-top: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  overflow-wrap: anywhere;
}

.inbox-email-quoted-content blockquote {
  margin: var(--space-xs) 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border-light);
}

.inbox-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  box-sizing: border-box;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-secondary);
  text-align: center;
}

.inbox-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-xs);
  border-radius: 10px;
  background: var(--color-bg-info);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inbox-state h3 {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-darkest);
  font-size: 16px;
  font-weight: 600;
}

.inbox-state p {
  max-width: 330px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.inbox-state .btn-secondary {
  margin-top: var(--space-md);
}

.inbox-reading-state {
  flex: 1;
}

@media (max-width: 600px) {
  .inbox-page-header {
    margin-bottom: var(--space-md);
  }

  .inbox-page-header p {
    font-size: 13px;
  }

  .inbox-shell {
    display: block;
    height: calc(100vh - 144px);
    height: calc(100dvh - 144px);
    min-height: 480px;
    max-height: none;
  }

  .inbox-list-pane,
  .inbox-reading-pane {
    height: 100%;
    border-right: 0;
  }

  .inbox-reading-pane {
    display: none;
  }

  #inboxSection.inbox-conversation-open .inbox-list-pane {
    display: none;
  }

  #inboxSection.inbox-conversation-open .inbox-reading-pane {
    display: flex;
  }

  .inbox-back-button {
    display: inline-flex;
  }

  .inbox-pane-header,
  .inbox-reading-header,
  .inbox-thread-messages {
    padding: var(--space-md);
  }

  .inbox-thread-messages {
    gap: var(--space-sm);
  }

  .inbox-reply-actions {
    padding: var(--space-sm) var(--space-md);
  }

  .inbox-reply-actions .btn-primary,
  .inbox-reply-actions .btn-secondary {
    flex: 1;
    justify-content: center;
  }

  .inbox-email-message-header,
  .inbox-email-message-content {
    padding: var(--space-sm);
  }

  .inbox-email-sender-line {
    flex-direction: column;
  }

  .inbox-email-fields > div {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .inbox-conversation {
    padding: var(--space-md) var(--space-sm);
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  #schoolsSection .search-filters,
  #coachesSection .search-filters {
    grid-template-columns: 1fr;
  }

  .schools-grid {
    border: none;
    background: transparent;
  }

  .coaches-grid {
    border: none;
    background: transparent;
  }

  .coach-list-header {
    display: none;
  }

  .coach-list-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
  }

  .coach-list-row:nth-of-type(even) {
    background: #fff;
  }

  .coach-list-name-cell {
    grid-column: 1 / -1;
  }

  .coach-list-title,
  .coach-list-school,
  .coach-list-division,
  .coach-list-contact,
  .coach-list-quality {
    white-space: normal;
  }

  .coach-list-title::before,
  .coach-list-school::before,
  .coach-list-division::before,
  .coach-list-contact::before,
  .coach-list-quality::before {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .coach-list-title::before { content: "Title"; }
  .coach-list-school::before { content: "School"; }
  .coach-list-division::before { content: "Division"; }
  .coach-list-contact::before { content: "Contact"; }
  .coach-list-quality::before { content: "Quality"; }

  .school-card {
    min-height: 0;
  }

  .login-card {
    padding: 24px 20px;
  }

  .login-password-row {
    flex-wrap: wrap;
  }

  .login-links {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .modal {
    padding: 12px;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    margin: 0;
    border-radius: 14px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .modal-body {
    max-height: calc(100vh - 150px);
  }

  .crm-log-activity-fab {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 8px 10px;
    box-shadow: 0 8px 16px color-mix(in oklch, var(--primary) 22%, transparent);
  }

  .profile-textareas {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 375px) {
  .main-content {
    padding: 14px;
  }

  .modal {
    padding: 8px;
  }

  .modal-content {
    max-height: calc(100vh - 16px);
  }

  .crm-log-activity-fab {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .school-card,
  .coach-list-row,
  .profile-card {
    border-radius: 12px;
  }
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Layout */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: var(--ink);
  color: white;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}

.sidebar.collapsed {
  width: 72px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 20px 20px 0 20px;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.sidebar-toggle {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.2);
  color: white;
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.sidebar.collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-toggle {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}

.sidebar-logo {
  display: flex;
  width: 132px;
  height: 62px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.sidebar-logo .logo-img {
  width: 132px;
  max-width: none;
  height: auto;
}

.sidebar.collapsed .sidebar-logo {
  display: flex;
  width: 32px;
  height: 66px;
}

.sidebar.collapsed .logo-img {
  width: 142px;
  max-width: none;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,0.1);
  color: white;
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s, width 0.2s;
}

.sidebar.collapsed .nav-label {
  /* visually hidden, not display:none — keeps the destination name in the
     accessibility tree for screen readers when the rail is icon-only
     (reviewer fix-forward: Codex P2, YFS-1661) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebar.collapsed .sidebar-nav {
  padding-inline: 14px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0;
  position: relative;
  border-radius: 10px;
  margin: 4px auto;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
}

.sidebar.collapsed .nav-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  margin: 0;
  line-height: 16px;
  text-align: center;
}

.sidebar.collapsed .nav-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text-dark);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  z-index: var(--z-modal-stacked);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* Admin-only items - hidden by default, shown via JS for admins */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--color-bg-warning);
  border-bottom: 1px solid var(--warning);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-badge {
  background: var(--warning);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.admin-client-picker {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.admin-client-picker input {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  font-size: 13px;
}

.admin-client-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: var(--z-dropdown);
  margin-top: 4px;
}

.admin-client-item {
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-bg-muted);
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}

.admin-client-item:hover,
.admin-client-item.is-active {
  background: var(--color-bg-subtle);
}

.admin-client-item .client-email {
  font-size: 11px;
  color: var(--text-secondary);
}

.admin-viewing-label {
  font-size: 13px;
  color: #92400e;
  font-weight: 500;
}

.admin-only {
  display: none;
}

/* Intended for nav items and inline admin controls, which are flex rows. It
 * also matches .content-section.admin-only, though, which turned entire admin
 * sections into flex ROWS — the questionnaire header, step bar, stats and table
 * were laid out side by side, which is why the stats grid collapsed to its
 * 150px minimum and the cards stretched to 552px tall. The override below puts
 * admin sections back to normal block stacking. */
body.is-admin .admin-only {
  display: flex;
}

/* A content section is a page, not a row of controls. :not(.hidden) is required
   — without it this would out-specify .content-section.hidden and every admin
   section would render at once. */
body.is-admin .content-section.admin-only:not(.hidden) {
  display: block;
}

body.is-demo .admin-only.demo-visible {
  display: flex;
}

body.is-demo .content-section.admin-only.demo-visible:not(.hidden) {
  display: block;
}

/* Questionnaire review is an operator queue: compact enough to scan, but each
   outcome stays readable and actionable on a phone. */
.questionnaire-review-header {
  align-items: flex-start;
}

.questionnaire-review-header p {
  max-width: 65ch;
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
}

.questionnaire-review-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-block: 1px solid var(--border);
}

.questionnaire-review-filters label,
.questionnaire-review-skip label {
  display: grid;
  gap: var(--space-2xs);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.questionnaire-review-filters input,
.questionnaire-review-filters select,
.questionnaire-review-skip input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}

.questionnaire-review-filters input:focus-visible,
.questionnaire-review-filters select:focus-visible,
.questionnaire-review-skip input:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--primary) 20%, transparent);
  outline-offset: 1px;
  border-color: var(--primary);
}

.questionnaire-review-status {
  min-height: 20px;
  margin: var(--space-sm) 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.questionnaire-review-list {
  border-top: 1px solid var(--border);
}

.questionnaire-review-item {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.questionnaire-review-item[aria-busy="true"] {
  opacity: 0.72;
}

.questionnaire-review-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}

.questionnaire-review-client {
  color: var(--color-text-info);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.questionnaire-review-item h2 {
  margin: var(--space-2xs) 0;
  color: var(--color-text-darkest);
  font-size: 20px;
  line-height: 1.25;
}

.questionnaire-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  color: var(--text-secondary);
  font-size: 13px;
}

.questionnaire-review-assignee {
  color: var(--color-text-info);
  font-weight: 600;
}

.questionnaire-review-assignee.is-unassigned,
.questionnaire-review-no-link {
  color: var(--color-text-warning);
}

.questionnaire-review-open {
  flex: 0 0 auto;
  text-decoration: none;
}

.questionnaire-review-reasons {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in oklch, var(--warning) 38%, var(--border));
  border-radius: 10px;
  background: var(--color-bg-warning);
  color: var(--color-text-warning);
}

.questionnaire-review-reasons ul {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: 20px;
}

.questionnaire-review-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
}

.questionnaire-review-details details {
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-bg-subtle);
}

.questionnaire-review-details summary {
  cursor: pointer;
  color: var(--color-text-dark);
  font-weight: 600;
}

.questionnaire-review-details img {
  display: block;
  width: 100%;
  max-height: 520px;
  margin-top: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: contain;
  background: var(--card);
}

.questionnaire-review-details dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
}

.questionnaire-review-details dt {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.questionnaire-review-details dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 13px;
}

.questionnaire-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-xs);
}

.questionnaire-review-skip {
  display: flex;
  flex: 1 1 360px;
  align-items: end;
  gap: var(--space-xs);
}

.questionnaire-review-skip label {
  flex: 1;
}

.questionnaire-review-item-status {
  min-height: 18px;
  color: var(--error);
  font-size: 13px;
}

.questionnaire-review-message {
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
  padding: var(--space-xl) 0;
  color: var(--text-secondary);
}

.questionnaire-review-message strong {
  color: var(--color-text-darkest);
  font-size: 18px;
}

.questionnaire-review-message.is-error strong {
  color: var(--error);
}

@media (max-width: 760px) {
  .questionnaire-review-filters {
    grid-template-columns: 1fr 1fr;
  }

  .questionnaire-review-item-head,
  .questionnaire-review-skip {
    align-items: stretch;
    flex-direction: column;
  }

  .questionnaire-review-open,
  .questionnaire-review-actions > button,
  .questionnaire-review-skip button {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }

  .questionnaire-review-reasons {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .questionnaire-review-filters {
    grid-template-columns: 1fr;
  }

  .questionnaire-review-filters input,
  .questionnaire-review-filters select,
  .questionnaire-review-skip input {
    min-height: 44px;
    font-size: 16px;
  }
}

/* YFS-1580: hook for hiding surfaces from DFY exposure clients. Every currently
   client-visible nav/section is already within the DFY-allowed set, so nothing
   carries `.dfy-hidden` today; tag any future standard-client-only surface with
   it and DFY clients won't see it (showSection also blocks reaching it). */
body.is-dfy .dfy-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .admin-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-client-picker {
    max-width: none;
  }
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

.sidebar-user {
  flex-shrink: 0;
  margin: 0 20px 20px 20px;
  padding: 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  font-size: 15px;
  color: white;
  line-height: 1.3;
  /* Allow wrapping for longer names */
  word-wrap: break-word;
}

.user-email {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Main content */
.main-content {
  flex: 1;
  margin-left: 240px;
  padding: 24px 32px;
  overflow-y: auto;
  transition: margin-left 0.2s ease;
}

/* Header */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

/* Campaign filter */
.campaign-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.filter-dropdown {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  cursor: pointer;
}

.campaign-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--color-bg-muted);
  border-radius: 20px;
  font-size: 13px;
}

.campaign-tag .remove {
  cursor: pointer;
  color: var(--muted);
}

.active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-bg-muted);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.active-badge .count {
  color: var(--text);
}

/* Info banner */
.info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}

.info-text {
  color: var(--text-secondary);
  font-size: 14px;
}

.info-text a {
  color: var(--primary);
  font-weight: 500;
}

.dashboard-tab-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.tab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-toggle::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out;
}

.tab-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}

.tab-btn.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Dashboard date-range popover */
.date-picker-wrap {
  position: relative;
}

.date-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.date-picker:hover {
  background: var(--color-bg-subtle);
  border-color: #cbd5e1;
}

.date-picker[aria-expanded="true"] {
  background: var(--color-bg-muted);
  border-color: var(--primary);
}

.date-picker svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.date-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-picker-menu.hidden {
  display: none;
}

.date-picker-menu button {
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms ease-out;
}

.date-picker-menu button:hover {
  background: var(--color-bg-muted);
}

.date-picker-menu button[aria-current="true"] {
  background: color-mix(in oklch, var(--primary) 8%, transparent);
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .tab-toggle {
    width: 100%;
    justify-content: stretch;
  }
  .tab-btn {
    flex: 1;
    justify-content: center;
    padding: 9px 8px;
    min-height: 40px;
    font-size: 12px;
  }
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.stat-card.sent { background: var(--sent-bg); }
.stat-card.opens { background: var(--opens-bg); }
.stat-card.clicks { background: var(--clicks-bg); }
.stat-card.replies { background: var(--replies-bg); }

.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.stat-icon {
  width: 24px;
  height: 24px;
}

.stat-label {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat-card.sent .stat-label { color: var(--sent-text); }
.stat-card.opens .stat-label { color: var(--opens-text); }
.stat-card.clicks .stat-label { color: var(--clicks-text); }
.stat-card.replies .stat-label { color: var(--replies-text); }

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.stat-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.stat-percent {
  font-weight: 600;
}

.stat-card.opens .stat-percent { color: var(--opens-text); }
.stat-card.clicks .stat-percent { color: var(--clicks-text); }
.stat-card.replies .stat-percent { color: var(--replies-text); }

.stat-unique {
  color: var(--muted);
}

.progress-bar {
  height: 4px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 2px;
}

.stat-card.opens .progress-fill { background: var(--opens-text); }
.stat-card.clicks .progress-fill { background: var(--clicks-text); }
.stat-card.replies .progress-fill { background: var(--replies-text); }

/* Chart card */
.chart-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.chart-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.sent { background: var(--primary); }
.legend-dot.opened { background: var(--success); }
.legend-dot.clicked { background: #a855f7; }
.legend-dot.replied { background: var(--warning); }
.legend-dot.bounced { background: var(--error); }

/* Unread-reply count in the sidebar nav. Styling used to live in six inline
   declarations on the element itself; JS still owns `display`. */
.nav-badge {
  background: var(--error-strong);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

.chart-placeholder {
  height: 200px;
  background: linear-gradient(to bottom, var(--color-bg-subtle), var(--color-bg-muted));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}

/* Campaign table */
.campaign-table {
  width: 100%;
  border-collapse: collapse;
}

.campaign-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.campaign-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.campaign-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.campaign-indicator {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--success);
}

.campaign-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.campaign-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.campaign-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.campaign-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.progress-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-bar-container {
  width: 100%;
  max-width: 120px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: 500;
}

.progress-detail {
  font-size: 12px;
  color: var(--muted);
}

.table-progress-bar {
  width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.table-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}

.opens-cell, .replies-cell {
  text-align: center;
}

.cell-value {
  font-size: 16px;
  font-weight: 600;
}

.cell-percent {
  font-size: 12px;
}

.opens-cell .cell-percent { color: var(--success); }
.replies-cell .cell-percent { color: var(--warning); }

.date-cell {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Login page */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: white;
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 14px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-logo-img {
  max-width: 280px;
  height: auto;
}

.login-card h2 {
  text-align: center;
  margin: 0 0 8px;
  font-size: 24px;
}

.login-card .subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 32px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.forgot-link:hover {
  color: var(--primary);
}

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.2s;
}

input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Password show/hide toggle (YFS-1402) */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  /* !important: same-specificity .form-group input[type="text"] (later in
     this file) otherwise wins and drops this padding when the login field
     is revealed, letting text render under the toggle button. */
  padding-right: 44px !important;
}
.password-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary, var(--text-secondary));
  display: flex;
  align-items: center;
  border-radius: 4px;
  line-height: 1;
}
.password-toggle:hover {
  color: var(--text, var(--text));
}
.password-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.error-message {
  color: var(--error);
  font-size: 13px;
  margin-top: 12px;
  padding: 10px;
  background: var(--color-bg-error);
  border-radius: 6px;
}

.demo-hint {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
  padding: 12px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
}

.hidden { display: none !important; }

/* Responsive */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    padding: 16px;
  }
  
  .main-content {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .campaign-table {
    font-size: 13px;
  }
  
  .campaign-table th, .campaign-table td {
    padding: 12px 8px;
  }
}

/* ==========================================
   Activity Feed Styles (v5.0)
   ========================================== */

/* Activity Summary */
.activity-summary {
  display: flex;
  gap: 24px;
  padding: 20px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-width: 100px;
}

.summary-stat.highlight {
  background: linear-gradient(135deg, var(--color-bg-warning), #fde68a);
  border-color: #fcd34d;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.summary-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Filter Buttons */
.filter-buttons {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Activity Search */
.activity-search {
  margin-bottom: 16px;
}

.activity-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.activity-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

.search-results-count {
  padding: 8px 12px;
  background: var(--color-bg-muted);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;
}

.activity-feed::-webkit-scrollbar {
  width: 6px;
}

.activity-feed::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 3px;
}

.activity-feed::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

/* Activity Item */
.activity-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.activity-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  background: #fbfdff;
}

.activity-item:active {
  transform: scale(0.998);
}

@media (max-width: 768px) {
  .activity-item {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 10px;
  }

  .activity-item .activity-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
  }
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

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

.activity-type-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.activity-details {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.activity-email,
.activity-school {
  font-size: 13px;
  color: var(--text-secondary);
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.activity-subject {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.activity-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}

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

.reply-btn {
  padding: 6px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.reply-btn:hover {
  background: var(--primary-dark);
}

.activity-message {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  border-left: 3px solid var(--warning);
  line-height: 1.5;
  max-height: none;
  overflow: visible;
  cursor: pointer;
  position: relative;
  transition: max-height 0.3s ease;
}

.activity-message.expanded {
  max-height: none;
}

.activity-message .expand-hint {
  color: var(--primary);
  font-weight: 500;
  font-size: 12px;
}

.activity-message.expanded .expand-hint {
  display: none;
}

.activity-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Loading & Empty States */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 14px;
}

.no-data,
.error-message {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 14px;
}

.error-message {
  color: var(--error);
}

/* ==========================================
   Reply Modal Styles
   ========================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

/* This submission form can grow after up to six media previews are added. */
#highlightSubmitModal .modal-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

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

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 140px); /* Account for header + footer */
}

/* Better date picker styling */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0.5);
}

input[type="date"]:hover {
  border-color: var(--primary);
}

input[type="date"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.reply-to-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
}

.reply-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.reply-name {
  font-weight: 600;
  color: var(--text);
}

.reply-email {
  color: var(--text-secondary);
  font-size: 13px;
}

.reply-textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.reply-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Simple reply modal — mobile ergonomics */
@media (max-width: 768px) {
  #replyModal .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  #replyModal .modal-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  #replyModal .modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
  }

  #replyModal .reply-to-info {
    padding: 8px 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  #replyModal .reply-textarea {
    font-size: 16px;        /* prevents iOS zoom on focus */
    min-height: 0;
    flex: 1;
    padding: 12px;
  }

  #replyModal .modal-footer {
    padding: 10px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    border-top: 1px solid var(--border);
    background: white;
    flex-shrink: 0;
  }

  #replyModal .modal-footer .btn-primary,
  #replyModal .modal-footer .btn-secondary {
    min-height: 44px;
    flex: 1;
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.btn-secondary {
  padding: 10px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out;
}

.btn-secondary:hover {
  background: var(--bg);
}

.modal-footer .btn-primary {
  padding: 10px 20px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.modal-footer .btn-primary:hover {
  background: var(--primary-dark);
}

.modal-footer .btn-primary:disabled {
  background: var(--muted);
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .activity-summary {
    gap: 12px;
  }
  
  .summary-stat {
    flex: 1;
    min-width: 80px;
    padding: 10px 16px;
  }
  
  .filter-buttons {
    flex-wrap: wrap;
  }
  
  .activity-item {
    flex-direction: column;
    gap: 12px;
  }
  
  .activity-icon {
    align-self: flex-start;
  }
  
  .activity-time {
    align-self: flex-start;
  }
}

/* Internal-only navigation items */
.nav-item.internal-only {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  opacity: 0.8;
}

.nav-item.internal-only::before {
  content: '🔒';
  margin-right: 4px;
  font-size: 10px;
}

/* Search Container */
.search-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.search-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--foreground);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

.search-input::placeholder {
  color: var(--muted-foreground);
}

.search-results-count {
  font-size: 13px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Copy Button */
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
}

.copy-btn:hover {
  opacity: 1;
  background: var(--muted);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: var(--z-toast);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Search highlight */
.activity-item.search-highlight {
  background: color-mix(in oklch, var(--primary) 5%, transparent);
  border-left: 3px solid var(--primary);
}

/* ==========================================
   Enhanced Mobile Styles (v2.0)
   ========================================== */

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: var(--z-modal-stacked);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: var(--z-modal);
    transition: left 0.3s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  
  .sidebar-backdrop.open {
    display: block;
  }
  
  .main-content {
    padding: 70px 12px 24px 12px;
    width: 100%;
  }
  
  .page-header h1 {
    font-size: 20px;
  }
  
  /* Campaign Filter Mobile */
  .campaign-filter {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  
  .filter-dropdown {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* Prevent iOS zoom */
  }
  
  .filter-label {
    width: 100%;
  }
  
  /* Stats Grid Mobile */
  .stats-grid {
    gap: 12px;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 28px;
  }
  
  /* Tab Toggle Mobile */
  .tab-toggle {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-toggle::-webkit-scrollbar { display: none; }
  
  .tab-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  
  /* Activity Summary Mobile */
  .activity-summary {
    gap: 8px;
    padding: 12px;
  }
  
  .summary-stat {
    flex: 1 1 45%;
    min-width: 0;
    padding: 12px 8px;
  }
  
  .summary-value {
    font-size: 20px;
  }
  
  .summary-label {
    font-size: 11px;
  }
  
  /* Filter Buttons Mobile */
  .filter-buttons {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 6px;
  }
  
  .filter-btn {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Search Mobile */
  .search-container {
    flex-direction: column;
    gap: 8px;
  }
  
  .search-input {
    font-size: 16px; /* Prevent iOS zoom */
    padding: 12px 16px;
  }
  
  /* Activity Feed Mobile */
  .activity-feed {
    gap: 12px;
  }
  
  .activity-item {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
  }
  
  .activity-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    align-self: flex-start;
  }
  
  .activity-content {
    width: 100%;
  }
  
  .activity-name {
    font-size: 15px;
  }
  
  .activity-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .activity-email, .activity-school {
    font-size: 12px;
  }
  
  .activity-time {
    align-self: flex-end;
    margin-top: -24px;
    font-size: 11px;
  }
  
  .activity-message {
    font-size: 13px;
    padding: 10px;
  }
  
  /* Reply Button Mobile */
  .reply-btn {
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
    margin-top: 8px;
  }
  
  /* Campaign Table Mobile */
  .campaign-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .campaign-table th,
  .campaign-table td {
    min-width: 80px;
    padding: 10px 6px;
    font-size: 12px;
  }
  
  /* Modal Mobile */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .reply-textarea {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 120px;
  }
  
  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }
  
  .modal-footer:not(.thread-footer) button {
    width: 100%;
    padding: 14px;
  }
  
  /* Info Banner Mobile */
  .info-banner {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .info-text {
    font-size: 13px;
  }
  
  /* Chart Card Mobile */
  .chart-card {
    padding: 16px;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .chart-title {
    font-size: 16px;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .summary-stat {
    flex: 1 1 100%;
  }
  
  .tab-btn {
    padding: 8px 8px;
    font-size: 12px;
  }
  
  .stat-value {
    font-size: 24px;
  }
}

/* Search Results Dropdown */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--z-modal);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-results.hidden {
  display: none;
}

.search-result-item {
  padding: 12px 14px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--color-bg-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: white;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.search-result-item:hover,
.search-result-item:focus {
  background: #f0f9ff;
  outline: none;
}

.search-result-item:active {
  background: #e0f2fe;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.search-result-empty a {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .search-result-item {
    padding: 14px 16px;
    min-height: 56px;
  }
  
  .search-results {
    max-height: 50vh;
  }
}

.search-result-name {
  font-weight: 500;
  color: var(--color-text-darkest);
}

.search-result-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Form group positioning for search */
.form-group {
  position: relative;
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Submit Interest Button */
.submit-interest-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 40%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: var(--z-dropdown);
}

.submit-interest-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--primary) 50%, transparent);
}

@media (max-width: 768px) {
  .submit-interest-btn {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* Interests Summary Section */
.interests-summary {
  margin: 20px 0;
}

.interests-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.interests-summary-card h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.interests-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.interest-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}

.interest-stat.committed {
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

.interest-stat .stat-icon {
  font-size: 20px;
}

.interest-stat .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.interest-stat .stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* Interest List Items */
.interest-item {
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.interest-item.scholarship {
  background: var(--color-bg-warning);
}

.interest-item.committed {
  background: var(--color-bg-success);
  background: #f0fdf4;
}

.interest-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.school-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-darkest);
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.badge.committed {
  background: var(--color-bg-success);
  color: #166534;
}

.badge.scholarship {
  background: var(--color-bg-warning);
  color: #92400e;
}

.interest-details {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.interest-details .detail {
  display: flex;
  align-items: center;
  gap: 4px;
}

.interest-notes {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

@media (max-width: 768px) {
  .interests-stats {
    justify-content: center;
  }
  
  .interest-stat {
    flex: 1 1 40%;
    text-align: center;
  }
}

/* Logout Button */
.logout-btn {
  width: 100%;
  padding: 12px;
  background: color-mix(in oklch, var(--error) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--error) 30%, transparent);
  border-radius: 8px;
  color: var(--error);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  min-height: 44px; /* Better touch target */
}

.logout-btn:hover {
  background: color-mix(in oklch, var(--error) 25%, transparent);
  border-color: color-mix(in oklch, var(--error) 50%, transparent);
}

.logout-btn:active {
  transform: scale(0.98);
}

/* Sidebar collapsed state for user section */
.sidebar.collapsed .sidebar-user {
  padding: 5px;
  align-items: center;
  gap: 8px;
}

.sidebar.collapsed .sidebar-user-header {
  width: 100%;
  justify-content: center;
}

.sidebar.collapsed .user-info {
  display: none;
}

.sidebar.collapsed .user-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.sidebar.collapsed .logout-btn {
  padding: 6px;
  font-size: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .logout-btn::before {
  content: '→';
  font-size: 14px;
}

/* Thread Modal */
.thread-modal {
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.thread-header-info {
  flex: 1;
}

.thread-header-info h3 {
  margin: 0;
  font-size: 18px;
}

.thread-email {
  font-size: 13px;
  color: var(--text-secondary);
}

.thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
}

.thread-message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.thread-message.outbound {
  align-self: flex-end;
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.thread-message.outbound.recruit-reply {
  background: #10b981;
}

.thread-message.inbound {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.thread-message-header {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.thread-message-content {
  white-space: pre-wrap;
}

.thread-message-time {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 6px;
  text-align: right;
}

.thread-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.thread-reply-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thread-reply-box textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  resize: none;
  font-family: inherit;
}

.thread-reply-box textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.thread-reply-box .btn-primary {
  align-self: flex-end;
}

/* CRM view settings ─── compact control within the toolbar */
.crm-view-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  max-width: 100%;
  padding: 0 8px 0 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.crm-view-control:hover {
  color: var(--text);
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.crm-view-control:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.crm-view-control svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.crm-view-select {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.crm-view-select:focus {
  border-color: transparent;
  box-shadow: none;
}

/* CRM toolbar ─── search + level filter + sort + clear */
.crm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
}

.crm-toolbar-inputs {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) minmax(160px, 220px) auto;
  gap: 10px;
  align-items: center;
}

.crm-toolbar-search {
  position: relative;
  min-width: 0;
}

.crm-toolbar-search .search-input {
  width: 100%;
  margin: 0;
}

.crm-toolbar-inputs .filter-select {
  width: 100%;
  margin: 0;
}

.crm-toolbar-inputs .filter-clear-btn {
  white-space: nowrap;
}

.crm-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  padding: 0 2px;
}

.crm-results-pill,
.browser-overview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}

.crm-toolbar-copy {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  min-width: 0;
}

/* CRM empty banner — guidance when no schools added yet */
.crm-empty-banner {
  padding: 14px 18px;
  background: var(--color-bg-info-soft);
  border: 1px solid var(--color-bg-info);
  border-radius: 12px;
  color: #1e40af;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 14px;
}

.crm-empty-banner.hidden {
  display: none;
}

@media (max-width: 768px) {
  .crm-toolbar-inputs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .crm-toolbar-inputs .filter-clear-btn {
    width: 100%;
  }

  .crm-toolbar-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .crm-toolbar-copy {
    font-size: 12px;
  }

  .crm-view-control {
    min-height: 44px;
  }
}

/* Required-field signaling — pairs with label text " *" or .req-star markup */
.req-star {
  color: var(--error);
  margin-left: 2px;
  font-weight: 600;
  font-size: 0.95em;
}

/* Auto-mark labels of required form-group children — works alongside existing manual " *" copy */
.form-group:has(input[required], select[required], textarea[required]) > label:not(:has(.req-star))::after {
  content: " *";
  color: var(--error);
  font-weight: 600;
  margin-left: 2px;
}

/* Show invalid required fields in red only AFTER the user has interacted.
 *
 * These used `:invalid:not(:placeholder-shown)`, where the placeholder check was
 * standing in for "has the user touched this". That guard silently does nothing
 * on an input with no placeholder attribute — which is why the login password
 * field rendered with a red error border before anyone had typed a character,
 * on the very first screen a client sees.
 *
 * `:user-invalid` is the real version of that intent: it only matches after the
 * user has edited the field. Where it is unsupported nothing highlights, which
 * is the right way to fail. */
.form-group input[required]:user-invalid:not(:focus),
.form-group select[required]:user-invalid:not(:focus),
.form-group textarea[required]:user-invalid:not(:focus),
.tasks-widget-input[required]:user-invalid:not(:focus) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--error) 12%, transparent);
}

/* Modal context strip ─── breadcrumb-style header inserted below .modal-header */
.modal-context-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  line-height: 1.4;
}

.modal-context-strip.hidden {
  display: none;
}

.modal-context-strip .breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 200ms ease-out;
}

.modal-context-strip .breadcrumb-link:hover {
  background: color-mix(in oklch, var(--primary) 8%, transparent);
  text-decoration: underline;
}

.modal-context-strip .breadcrumb-current {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  color: var(--text);
  font-weight: 600;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-context-strip .breadcrumb-sep {
  color: var(--muted);
  font-size: 11px;
  user-select: none;
  margin: 0 2px;
}

.thread-reply-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-bg-error);
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

.thread-reply-error.hidden {
  display: none;
}

.thread-reply-error .thread-reply-error-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
}

.thread-reply-error .thread-reply-error-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thread-reply-error .thread-reply-error-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thread-reply-error .thread-reply-error-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #ffffff;
  color: #991b1b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.thread-reply-error .thread-reply-error-btn:hover {
  background: var(--color-bg-error);
  border-color: #fca5a5;
}

.thread-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

.thread-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* Content Sections */
.content-section.hidden {
  display: none;
}

/* Search & Filters */
.search-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 250px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-select {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: white;
  min-width: 150px;
}

/* CRM Tabs */
.crm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.crm-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.crm-tab:hover {
  background: var(--bg);
  color: var(--text);
}

.crm-tab.active {
  background: var(--primary);
  color: white;
}

.crm-content {
  min-height: 300px;
}

/* Schools Grid */
.schools-grid {
  display: flex;
  flex-direction: column;
}

.coaches-grid {
  display: flex;
  flex-direction: column;
}

.school-card, .coach-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.school-card:hover, .coach-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.school-card h3, .coach-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}

.school-card .school-meta, .coach-card .coach-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.school-card .school-stats, .coach-card .coach-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-badge {
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  grid-column: 1 / -1;
}

/* CRM Interest Cards */
.crm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.crm-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.crm-card.scholarship {
  background: var(--color-bg-success);
}

.crm-card.committed {
  background: var(--color-bg-info);
  background: linear-gradient(135deg, color-mix(in oklch, var(--primary) 5%, transparent) 0%, transparent 100%);
}

.crm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.crm-card-header h4 {
  margin: 0;
  font-size: 15px;
}

.crm-card-status {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.crm-card-status.interest {
  background: var(--color-bg-warning);
  color: #92400e;
}

.crm-card-status.offer {
  background: #d1fae5;
  color: #065f46;
}

.crm-card-status.committed {
  background: var(--color-bg-info);
  color: #1e40af;
}

.crm-card-details {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Results count badge */
.results-count {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* ==========================================
   KANBAN BOARD STYLES
   ========================================== */

.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 20px;
  min-height: 500px;
  background: var(--bg);
}

.kanban-column {
  flex: 0 0 280px;
  background: var(--color-bg-muted);
  border-radius: 12px;
  padding: 12px;
  min-height: 400px;
}

.kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.kanban-header-label {
  flex: 1;
  text-align: left;
}

.kanban-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kanban-header.cold {
  background: var(--color-bg-info);
  color: #1e40af;
  border-bottom: 3px solid var(--primary);
}

.kanban-header.warm {
  background: var(--color-bg-warning);
  color: #92400e;
  border-bottom: 3px solid var(--warning);
}

.kanban-header.hot {
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 3px solid var(--error);
}

.kanban-header.offered {
  background: #e0e7ff;
  color: #3730a3;
  border-bottom: 3px solid #6366f1;
}

.kanban-header.committed {
  background: var(--color-bg-success);
  color: #166534;
  border-bottom: 3px solid var(--success);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.kanban-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  border: 1px solid var(--border);
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: var(--primary);
}

.kanban-card h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.kanban-card .card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kanban-card .division,
.kanban-card .state {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--color-bg-muted);
  padding: 2px 8px;
  border-radius: 4px;
}

.kanban-card .scholarship-badge {
  margin-top: 8px;
  font-size: 11px;
  color: #166534;
  background: var(--color-bg-success);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.empty-column {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 20px;
  font-style: italic;
}

/* Drag and Drop Styles */
.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  border-color: var(--primary);
}

/* When ANY card is being dragged, dim non-target columns to highlight where drops are valid */
.kanban-board.is-dragging .kanban-column:not(.drag-target) {
  opacity: 0.55;
  transition: opacity 200ms ease-out;
}

/* Highlight the active drop column at the column level — visible without hovering directly over the inner cards container */
.kanban-column.drag-target {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: color-mix(in oklch, var(--primary) 4%, transparent);
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}

.kanban-column.drag-target .kanban-column-header {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
}

.kanban-cards.drag-over {
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  border: 2px dashed var(--primary);
  border-radius: 8px;
  animation: drag-over-pulse 1.1s ease-in-out infinite;
}

@keyframes drag-over-pulse {
  0%, 100% { background: color-mix(in oklch, var(--primary) 10%, transparent); }
  50% { background: color-mix(in oklch, var(--primary) 18%, transparent); }
}

.kanban-card[draggable="true"] {
  cursor: grab;
}

.kanban-card[draggable="true"]:active {
  cursor: grabbing;
}

.crm-status-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.crm-status-select.status-cold { border-color: #94a3b8; }
.crm-status-select.status-warm { border-color: var(--warning); }
.crm-status-select.status-hot { border-color: var(--error); }
.crm-status-select.status-offered { border-color: #10b981; }
.crm-status-select.status-committed { border-color: #6366f1; }

.admin-accounts-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-accounts-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.admin-accounts-toolbar .search-input {
  flex: 1;
  min-width: 220px;
}

.admin-accounts-note {
  color: var(--text-secondary);
  font-size: 13px;
}

.admin-accounts-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.admin-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.admin-account-row:last-child {
  border-bottom: 0;
}

.admin-account-name {
  font-weight: 800;
  color: var(--text-primary);
}

.admin-account-email,
.admin-account-meta {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

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

.admin-campaign-sync-status {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.admin-sync-campaign {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.admin-sync-campaign + .admin-sync-campaign {
  margin-top: 8px;
}

.admin-sync-title,
.admin-sync-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.admin-sync-title span,
.admin-sync-meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-account-status {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
  background: #f1f5f9;
  color: #475569;
}

.admin-account-status.is-active {
  background: var(--color-bg-success);
  color: #166534;
}

.admin-account-status.is-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.return-admin-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.return-admin-banner button {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--primary);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 768px) {
  .admin-accounts-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-accounts-toolbar .search-input {
    min-width: 0;
  }

  .admin-account-row {
    grid-template-columns: 1fr;
  }

  .admin-account-actions {
    justify-content: space-between;
  }

  .crm-list-row,
  .crm-table-row {
    cursor: pointer;
  }

  .crm-status-select {
    min-height: 40px;
    font-size: 14px;
  }

  .kanban-card .crm-status-select {
    margin-top: 10px;
  }

  .return-admin-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: space-between;
  }
}

/* Notes Modal Styles */
.notes-school-info {
  background: var(--color-bg-subtle);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.notes-school-info .info-row {
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.notes-school-info .info-row:last-child {
  margin-bottom: 0;
}

/* ==========================================
   SCHOOL & COACH CARD CLICKABLE STYLES
   ========================================== */

.school-card.clickable,
.coach-card.clickable {
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.school-card.clickable:hover,
.coach-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* Coach Card - Name Prominent */
.coach-card .coach-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text);
}

.coach-card .coach-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.coach-card .coach-school {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

/* Coaches Table View */
.coaches-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.coaches-table thead {
  background: var(--color-bg-subtle);
}

.coaches-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.coaches-table td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-bg-muted);
}

.coach-row {
  transition: background 0.15s;
}

.coach-row:hover {
  background: var(--color-bg-subtle);
}

.coach-row.clickable {
  cursor: pointer;
}

.coach-name-cell {
  color: var(--text);
}

.coaches-table a {
  color: var(--primary);
  text-decoration: none;
}

.coaches-table a:hover {
  text-decoration: underline;
}

/* Modal Detail Grid */
.school-detail-grid,
.coach-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  font-size: 14px;
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-bg-muted);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row a {
  color: var(--primary);
  text-decoration: none;
}

.detail-row a:hover {
  text-decoration: underline;
}

.coach-name-large {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

/* ==========================================
   SIMPLIFIED CAMPAIGN FILTER
   ========================================== */

.campaign-filter.simplified {
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
}

.campaign-search-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.campaign-search-input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  font-size: 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text);
  transition: border-color 0.2s;
}

.campaign-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

.campaign-search-input::placeholder {
  color: var(--muted);
}

.campaign-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}

.campaign-search-clear:hover {
  color: var(--text);
  background: var(--color-bg-muted);
}

.campaign-select {
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  font-size: 15px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.campaign-select:hover {
  border-color: var(--primary);
}

.campaign-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Mobile responsive for Kanban */
@media (max-width: 768px) {
  .kanban-board {
    padding: 12px;
  }
  
  .kanban-column {
    flex: 0 0 260px;
  }
}

/* Schools Sent To Section - Added Feb 18, 2026 */
.schools-sent-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.schools-sent-filters .search-input {
  flex: 1;
  min-width: 200px;
}

.schools-sent-filters .filter-select {
  min-width: 160px;
}

.schools-sent-summary {
  display: flex;
  gap: 12px;
}

.summary-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.summary-badge.total {
  background: #e0f2fe;
  color: #0369a1;
}

.summary-badge.replied {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.schools-sent-table-container {
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
}

.schools-sent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.schools-sent-table thead {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.schools-sent-table th {
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

/* Desktop density. This must stay ABOVE the mobile card block below: media
   queries add no specificity, so a later unscoped rule silently beats them —
   which is exactly how the card layout got overridden. */
.schools-sent-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.schools-sent-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.schools-sent-table tbody tr.schools-sent-row {
  cursor: pointer;
}

.schools-sent-table tbody tr.schools-sent-row:hover .school-name {
  color: var(--primary);
}

.schools-sent-more-row td {
  padding: 16px 12px;
  text-align: center;
}

.schools-sent-more-count {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  /* Schools Sent: collapse table to per-row stacked card layout on mobile */
  .schools-sent-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .schools-sent-filters .search-input,
  .schools-sent-filters .filter-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .schools-sent-summary {
    flex-wrap: wrap;
  }

  .schools-sent-table-container {
    overflow-x: hidden;
    max-height: none;
    border: none;
  }

  .schools-sent-table {
    display: block;
  }

  .schools-sent-table thead {
    display: none; /* labels appear inline via data-label below */
  }

  .schools-sent-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .schools-sent-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
  }

  .schools-sent-table tbody tr.schools-sent-row {
    transition: background 200ms ease-out, border-color 200ms ease-out;
  }

  .schools-sent-table tbody tr.schools-sent-row:active {
    background: var(--color-bg-subtle);
    border-color: #cbd5e1;
  }

  .schools-sent-table td {
    border: none;
    padding: 0;
    vertical-align: top;
    font-size: 13px;
  }

  /* School column gets prominent treatment in the top-left of the card */
  .schools-sent-table td:nth-child(1) {
    grid-column: 1 / 2;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
  }

  /* Status badge top-right */
  .schools-sent-table td:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 1;
    text-align: right;
  }

  /* Coach + Division + Sent Date all flow as secondary metadata */
  .schools-sent-table td:nth-child(2),
  .schools-sent-table td:nth-child(3),
  .schools-sent-table td:nth-child(4) {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 12px;
  }

  /* Reply preview spans full width with a soft top divider */
  .schools-sent-table td:nth-child(6) {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
  }

  /* A lone em-dash placeholder is a table convention; inside a card it reads as
     a stray artifact. Drop the cell instead. */
  .schools-sent-table td:nth-child(6):empty,
  .schools-sent-table td.cell-placeholder {
    display: none;
  }

  /* The paging control is a row, but mobile turns rows into bordered cards.
     Strip the card treatment so it reads as a control, not another school. */
  .schools-sent-table tbody tr.schools-sent-more-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 4px 0 8px;
  }

  .schools-sent-table tbody tr.schools-sent-more-row td {
    padding: 0;
    text-align: center;
  }

  .schools-sent-more-count {
    margin-left: 0;
  }
}

.schools-sent-table .school-name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.schools-sent-table .coach-name {
  color: var(--text);
  overflow-wrap: anywhere;
}

.schools-sent-table .coach-email {
  font-size: 12px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.schools-sent-table .division-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}


.schools-sent-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.schools-sent-table .status-badge.replied {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.schools-sent-table .status-badge.pending,
.schools-sent-table .status-badge.sent {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.schools-sent-table .reply-preview {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.schools-sent-table .reply-preview:hover {
  white-space: normal;
  overflow: visible;
}

.schools-sent-table .no-reply {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}

.loading-cell {
  text-align: center;
  padding: 40px !important;
  color: var(--text-secondary);
}

.empty-cell {
  text-align: center;
  padding: 60px !important;
  color: var(--text-secondary);
}

.empty-cell .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-cell .btn-secondary {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .schools-sent-summary {
    flex-wrap: wrap;
  }
  
  .schools-sent-filters {
    flex-direction: column;
  }
  
  .schools-sent-filters .filter-select {
    width: 100%;
  }
  
  .schools-sent-table {
    font-size: 13px;
  }
  
  .schools-sent-table .reply-preview {
    max-width: 150px;
  }
}

/* ==========================================
   DESIGN OVERHAUL v6.0 — Feb 2026
   Thread UI, Dashboard Polish, Premium Look
   ========================================== */

/* ── THREAD MODAL HEADER ─────────────────── */
.thread-modal-header {
  background: linear-gradient(135deg, var(--text) 0%, var(--color-text-darkest) 100%);
  color: white;
  padding: 20px 24px;
}

.thread-header-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.thread-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--success) 40%, transparent);
}

.thread-header-text h3 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  color: white;
}

.thread-email {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.thread-modal-header .modal-close {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

.thread-modal-header .modal-close:hover {
  background: rgba(255,255,255,0.2);
  color: white;
}

/* ── THREAD STATUS BAR ───────────────────── */
.thread-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.thread-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.thread-status-pill.inactive {
  background: var(--color-bg-muted);
  color: var(--muted);
  opacity: 0.6;
}

.thread-status-pill.sent.active   { background: #e0f2fe; color: #0369a1; }
.thread-status-pill.opened.active { background: var(--color-bg-info); color: var(--primary-dark); }
.thread-status-pill.clicked.active{ background: var(--color-bg-warning); color: #a16207; }
.thread-status-pill.replied.active{ background: var(--color-bg-success); color: var(--color-text-success); }

.thread-status-sep {
  color: var(--color-border-light);
  font-size: 14px;
  font-weight: 400;
}

/* ── THREAD BODY ─────────────────────────── */
.thread-body {
  background: #f8fafc;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

/* ── OUTBOUND BUBBLE (Sent to Coach) ─────── */
.thread-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.outbound-wrap {
  align-self: flex-end;
  align-items: flex-end;
}

.inbound-wrap {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 92%;
  width: 100%;
}

.thread-bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}

.outbound-meta {
  justify-content: flex-end;
}

.thread-sender-label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Status pills on individual messages */
.msg-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.msg-status.sent    { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.msg-status.opened  { background: var(--color-bg-info-soft); color: var(--primary-dark); border: 1px solid #bfdbfe; }
.msg-status.clicked { background: #fffbeb; color: #a16207; border: 1px solid #fde68a; }
.msg-status.replied { background: #f0fdf4; color: var(--color-text-success); border: 1px solid #bbf7d0; }

/* Outbound bubble */
.thread-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.thread-bubble.outbound {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-bottom-right-radius: 6px;
}

.thread-bubble.outbound.recruit-reply {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.thread-bubble.outbound .thread-bubble-content {
  color: white;
}

.thread-bubble.outbound .thread-bubble-content * {
  color: rgba(255,255,255,0.9);
}

.thread-bubble.outbound .thread-bubble-content a {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

.thread-bubble-content {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.thread-bubble-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.outbound-time {
  text-align: right;
}

.thread-attachments {
  margin: var(--space-xs) 0 0;
  padding: 0;
  max-width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.thread-attachment-item {
  min-width: 0;
  max-width: 100%;
}

.thread-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-muted);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-dark);
  text-decoration: none;
  border: 1px solid var(--border);
}

.thread-attachment-file:hover,
.thread-attachment-img:hover {
  background: var(--border);
}

.thread-attachment-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.thread-attachment-img {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 100%;
  padding: var(--space-2xs);
  background: var(--color-bg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--color-text-dark);
  font-size: 12px;
  text-decoration: none;
}

.thread-attachment-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
  max-height: 200px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.thread-attachment-img .thread-attachment-name {
  padding: 0 var(--space-2xs) var(--space-2xs);
}

.thread-bubble.outbound .thread-attachment-file,
.thread-bubble.outbound .thread-attachment-img {
  /* Darkened (not lightened) overlay: white-on-white-tinted-blue measured
     ~3.6:1 (default) / below 4.5:1 (hover) against the outbound gradient —
     fails AA. A black overlay keeps the same "translucent chip" look while
     giving --card (white) text/icon >=4.5:1 against BOTH gradient ends,
     default and hover. See .impeccable.md AA requirement. */
  background: color-mix(in oklch, black 32%, transparent);
  border-color: color-mix(in oklch, var(--card) 35%, transparent);
  color: var(--card);
}

.thread-bubble.outbound .thread-attachment-file:hover,
.thread-bubble.outbound .thread-attachment-img:hover {
  background: color-mix(in oklch, black 40%, transparent);
}

/* Reviewer fix-forward (Codex P2, verified): `.thread-bubble.outbound
   .thread-bubble-content *` above sets rgba(255,255,255,0.9) on every
   descendant, including this span, which wins over the chip's own
   `color: var(--card)` (that rule targets the <a>, not this <span>, so it
   never reaches it via inheritance). 90%-opacity white measured only
   4.44:1 on the recruit-reply chip's default state (green gradient
   #10b981/#059669), just under the 4.5:1 AA floor — force fully opaque
   white here so both the blue and green outbound variants clear AA. */
.thread-bubble.outbound .thread-attachment-name,
.thread-bubble.outbound .thread-attachment-icon {
  color: var(--card);
}

.thread-bubble.outbound .thread-attachment-file:focus-visible,
.thread-bubble.outbound .thread-attachment-img:focus-visible {
  outline: 2px solid var(--card);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}

/* ── COACH REPLY CARD (Inbound) ──────────── */
.thread-coach-reply-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--color-bg-success);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
}

.coach-reply-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px;
  background: linear-gradient(135deg, #f0fdf4 0%, var(--color-bg-success) 100%);
  border-bottom: 1px solid #bbf7d0;
}

.coach-reply-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.coach-reply-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.coach-reply-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-darkest);
}

.coach-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--success);
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coach-reply-badge::before {
  content: '★';
  font-size: 9px;
}

.coach-reply-time {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: auto;
}

.coach-reply-body {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.coach-reply-body * {
  max-width: 100%;
}

/* ── THREAD EMPTY STATE ───────────────────── */
.thread-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.thread-empty-icon {
  font-size: 52px;
  margin-bottom: 4px;
  animation: gentle-bounce 2s ease-in-out infinite;
}

@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.thread-empty-state h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.thread-empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 280px;
}

.thread-empty-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 20px;
  background: var(--color-bg-subtle);
  border-radius: 12px;
  border: 1px dashed var(--color-border-light);
}

.thread-empty-status .thread-status-pill {
  font-size: 12px;
}

.thread-status-arrow {
  color: var(--color-border-light);
  font-size: 16px;
}

/* ── THREAD REPLY BOX ────────────────────── */
.thread-reply-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thread-reply-box textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: white;
}

.thread-reply-box textarea:focus {
  outline: none;
  border-color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 12%, transparent);
}

.thread-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.thread-reply-hint {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

.btn-send-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--success) 35%, transparent);
  white-space: nowrap;
}

.btn-send-reply:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in oklch, var(--success) 45%, transparent);
}

.btn-send-reply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── FILE ATTACHMENT UI ─────────────────────── */
.thread-reply-input-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.thread-reply-input-row textarea {
  flex: 1;
}

.btn-attach {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  margin-top: 2px;
}

.btn-attach:hover {
  border-color: var(--success);
  color: var(--success);
  background: color-mix(in oklch, var(--success) 6%, transparent);
}

/* Inline attach button (below textarea) */
.btn-attach-inline {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  position: relative;
}

.btn-attach-inline:hover {
  border-color: var(--success);
  color: var(--success);
}

/* Attach options popup menu */
.attach-options-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: var(--z-dropdown);
  min-width: 140px;
}

.attach-options-menu.hidden {
  display: none;
}

.attach-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.attach-option:hover {
  background: var(--bg);
}

.attach-option + .attach-option {
  border-top: 1px solid var(--border);
}

/* Thread reply buttons (attach + send inline) */
.thread-reply-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Thread reply actions row */
.thread-reply-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Mobile: make textarea full width, no side buttons */
@media (max-width: 600px) {
  .thread-reply-input-row {
    flex-direction: column;
  }
  .thread-reply-input-row textarea {
    width: 100% !important;
    min-height: 80px;
  }
  .thread-reply-hint {
    display: none;
  }
  .thread-reply-actions {
    gap: 8px;
  }
  .attach-options-menu {
    bottom: calc(100% + 4px);
  }
}

.attach-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-bg-muted);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-dark);
}

.attach-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.attach-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-item-size {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

.attach-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.attach-item-remove:hover {
  color: var(--error);
}

/* ── DASHBOARD STAT CARDS ─────────────────── */
.stats-grid {
  gap: 20px;
  margin-bottom: 28px;
}

.stat-card {
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  border: 1px solid transparent;
}

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

.stat-card.sent   { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border-color: #bae6fd; }
.stat-card.opens  { background: linear-gradient(135deg, var(--color-bg-success) 0%, #bbf7d0 100%); border-color: #bbf7d0; }
.stat-card.clicks { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border-color: #e9d5ff; }
.stat-card.replies{ background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); border-color: #fde68a; }

.stat-icon {
  font-size: 22px;
  width: auto;
  height: auto;
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* ── INFO BANNER / TAB TOGGLE ─────────────── */
.info-banner {
  border-radius: 14px;
  background: white;
  border: 1px solid var(--border);
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tab-toggle {
  border-radius: 10px;
  background: var(--color-bg-muted);
  border: none;
  padding: 4px;
  gap: 2px;
}

.tab-btn {
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  border: none;
  background: transparent;
}

.tab-btn.active {
  background: white;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── CHART / DETAIL CARDS ─────────────────── */
.chart-card {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

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

/* ── SCHOOLS SENT TO TABLE ────────────────── */
.schools-sent-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.schools-sent-table tbody tr:nth-child(even):hover {
  background: var(--color-bg-muted);
}

.schools-sent-table th {
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.schools-sent-table .school-name {
  font-weight: 600;
  font-size: 14px;
}

/* View Thread button in table */
.view-thread-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #f0fdf4;
  color: var(--color-text-success);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.view-thread-btn:hover {
  background: var(--color-bg-success);
  border-color: #86efac;
  transform: translateY(-1px);
}

/* ── CAMPAIGN TABLE ───────────────────────── */
.campaign-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.campaign-table tbody tr:hover {
  background: #f0f9ff;
}

/* ── MOBILE THREAD IMPROVEMENTS ──────────── */
@media (max-width: 768px) {
  .thread-bubble-wrap {
    max-width: 95%;
  }

  .inbound-wrap {
    max-width: 100%;
  }

  .coach-reply-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .coach-reply-time {
    margin-left: 0;
    width: 100%;
  }

  .coach-reply-body {
    padding: 10px 12px;
    font-size: 14px;
  }

  .thread-reply-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-send-reply {
    justify-content: center;
    padding: 12px;
  }

  .thread-reply-hint {
    text-align: center;
    font-size: 11px;
  }

  .thread-status-bar {
    gap: 4px;
    padding: 10px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .thread-status-pill {
    font-size: 11px;
    padding: 4px 9px;
    white-space: nowrap;
  }

  .thread-bubble {
    font-size: 14px;
    padding: 12px 14px;
  }

  .modal-content.thread-modal {
    height: 95vh;
    display: flex;
    flex-direction: column;
  }

  .thread-body {
    flex: 1;
    overflow-y: auto;
  }
}

/* ── ACTIVITY ITEM COACH REPLY HIGHLIGHT ──── */
.activity-item[data-type="reply"] {
  border-left: 3px solid var(--success);
  background: linear-gradient(90deg, #f0fdf4 0%, white 100%);
}

.activity-item[data-type="reply"] .activity-icon {
  background: var(--color-bg-success) !important;
  color: var(--color-text-success) !important;
}

/* ── GENERAL POLISH ───────────────────────── */
/* Premium login card */
.login-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(229, 231, 235, 0.5);
}

/* Smooth focus states everywhere */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent);
}

/* Better empty state base */
.empty-state {
  background: white;
  border-radius: 16px;
  border: 2px dashed var(--border);
  padding: 60px 20px;
}

/* Scrollbar styling for thread */
.thread-body::-webkit-scrollbar {
  width: 5px;
}
.thread-body::-webkit-scrollbar-track {
  background: transparent;
}
.thread-body::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 3px;
}
.thread-body::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Page header improvement */
.page-header h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* Sidebar nav active state */
.nav-item.active {
  background: color-mix(in oklch, var(--primary) 15%, transparent) !important;
  color: #93c5fd !important;
  border-left: 3px solid var(--primary);
  padding-left: 13px;
}

/* ==========================================
   PHASE 2: UI POLISH — Feb 2026
   School Logos, Division Badges, Email Verification,
   Quality Scores, Twitter Links, Skeleton Loading,
   Better Typography, Mobile Responsive
   ========================================== */

/* ── YFS BRAND COLORS ────────────────────── */
:root {
  --yfs-navy: #050a24;
  --yfs-blue: #0082f3;
  --yfs-red: #ea384c;
  /* Division colours — ONE ordered ramp, one source of truth.
   *
   * There were three different mappings for the same six values: FBS was red
   * in the --div tokens, blue in .schools-sent-table, and blue-with-a-teal-FCS
   * in the filter pills. The same division changed colour depending on which
   * screen you were on, which is worse than having no colour at all.
   *
   * Divisions are ORDERED by level (FBS > FCS > D2 > D3 > NAIA > JUCO), so
   * this is a sequential ramp through the brand hue family rather than a
   * categorical rainbow — blue at the top stepping toward cyan, with JUCO
   * dropping to neutral. Every text/tint pair clears WCAG AA (6.6:1 or better).
   */
  --div-fbs:  oklch(0.42 0.16 258);
  --div-fcs:  oklch(0.42 0.16 249);
  --div-d2:   oklch(0.42 0.15 240);
  --div-d3:   oklch(0.42 0.14 232);
  --div-naia: oklch(0.42 0.12 224);
  --div-jc:   oklch(0.42 0.012 258);

  --div-fbs-bg:  oklch(0.945 0.05 258);
  --div-fcs-bg:  oklch(0.945 0.05 249);
  --div-d2-bg:   oklch(0.945 0.045 240);
  --div-d3-bg:   oklch(0.945 0.04 232);
  --div-naia-bg: oklch(0.945 0.038 224);
  --div-jc-bg:   oklch(0.945 0.006 258);
}

/* ── DIVISION BADGES ─────────────────────── */
.division-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.division-badge.fbs,
.division-badge.ncaa-fbs { background: var(--div-fbs-bg); color: var(--div-fbs); }
.division-badge.fcs,
.division-badge.ncaa-fcs { background: var(--div-fcs-bg); color: var(--div-fcs); }
.division-badge.d2,
.division-badge.ncaa-d2,
.division-badge.ncaadii,
.division-badge.dii { background: var(--div-d2-bg); color: var(--div-d2); }
.division-badge.d3,
.division-badge.ncaa-d3,
.division-badge.ncaadiii,
.division-badge.diii { background: var(--div-d3-bg); color: var(--div-d3); }
.division-badge.naia { background: var(--div-naia-bg); color: var(--div-naia); }
.division-badge.jc,
.division-badge.juco,
.division-badge.njcaa { background: var(--div-jc-bg); color: var(--div-jc); }

/* ── EMAIL VERIFICATION BADGES ───────────── */
.email-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.email-badge.valid {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.email-badge.unknown {
  background: var(--color-bg-warning);
  color: #92400e;
}

.email-badge.invalid {
  background: #fee2e2;
  color: #991b1b;
}

/* ── QUALITY SCORE BADGES ────────────────── */
.quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.quality-badge.q-100 {
  background: linear-gradient(135deg, var(--color-bg-warning), #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
}

.quality-badge.q-75 {
  background: var(--color-bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--color-border-light);
}

.quality-badge.q-50 {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.quality-badge.q-25 {
  background: var(--color-bg-error);
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ── SCHOOL CARD REDESIGN ────────────────── */
.school-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.school-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--yfs-blue);
}

.school-card-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.school-card-logo-fallback {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--yfs-navy), #1a2040);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.school-card-content {
  flex: 1;
  min-width: 0;
}

.school-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}

.school-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.school-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.school-card-stat {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── COACH LIST REDESIGN ─────────────────── */
.coaches-grid {
  display: flex;
  flex-direction: column;
}

.coach-list-row {
  cursor: pointer;
  transition: background 0.15s;
}

.coach-list-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-dark);
  flex-shrink: 0;
}

.coach-list-name {
  font-weight: 600;
  font-size: 14px;
  min-width: 150px;
}

.coach-list-title {
  color: var(--text-secondary);
  font-size: 13px;
  min-width: 120px;
  flex: 1;
}

.coach-list-school {
  font-size: 13px;
  min-width: 150px;
}

.coach-list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── SKELETON LOADING ────────────────────── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.skeleton-avatar {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.skeleton-avatar.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-30 { width: 30%; }
.skeleton-line.h-10 { height: 10px; }
.skeleton-line.h-20 { height: 20px; }

/* Skeleton pulse for stat card values */
.stat-value-skeleton {
  display: inline-block;
  width: 60px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton table rows */
.skeleton-table-row td {
  padding: 16px 12px !important;
}

.skeleton-table-cell {
  display: inline-block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-table-cell.w-full { width: 100%; }
.skeleton-table-cell.w-70 { width: 70%; }
.skeleton-table-cell.w-50 { width: 50%; }
.skeleton-table-cell.w-40 { width: 40%; }

/* Thread loading skeleton */
.thread-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.thread-skeleton-bubble {
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-muted);
}

.thread-skeleton-bubble .skeleton-line {
  margin-bottom: 8px;
}
.thread-skeleton-bubble .skeleton-line:last-child {
  margin-bottom: 0;
}

.thread-skeleton-bubble.right {
  margin-left: auto;
  max-width: 75%;
}

.thread-skeleton-bubble.left {
  margin-right: auto;
  max-width: 75%;
}

.loading-count {
  text-align: center;
  padding: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* Activity feed skeleton */
.skeleton-activity-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.skeleton-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.skeleton-activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Kanban skeleton card */
.skeleton-kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Error state with retry */
.error-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
}

.error-state .error-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.error-state .error-message-text {
  font-size: 14px;
  margin-bottom: 16px;
  color: var(--color-text-dark);
}

.error-state .retry-btn {
  background: var(--success-text);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.error-state .retry-btn:hover {
  opacity: 0.85;
}

/* ── BETTER EMPTY STATES ─────────────────── */
.empty-state-v2 {
  text-align: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
  background: white;
  border-radius: 16px;
  border: 2px dashed var(--border);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ── SCHOOL MODAL REDESIGN ───────────────── */
.school-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.school-modal-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: contain;
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
}

.school-modal-logo-fallback {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--yfs-navy), #1a2040);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: white;
}

.school-modal-info {
  flex: 1;
}

.school-modal-info h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.school-modal-info .subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── COACH MODAL REDESIGN ────────────────── */
.coach-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.coach-modal-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coach-modal-logo .school-card-logo,
.coach-modal-logo .school-card-logo-fallback {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  font-size: 16px;
}

.coach-modal-info {
  flex: 1;
}

.coach-modal-info h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.coach-modal-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.coach-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.coach-modal-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out;
}

.coach-modal-action:hover {
  background: var(--color-bg-subtle);
  border-color: #cbd5e1;
}

.coach-modal-action--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.coach-modal-action--primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

.coach-modal-action svg {
  flex-shrink: 0;
}

/* ── SEARCH FILTERS IMPROVEMENTS ─────────── */
.search-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.search-filters .search-input {
  flex: 1;
  min-width: 200px;
}

.search-filters .filter-select {
  min-width: 140px;
}

/* ── TABLET RESPONSIVE ──────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .school-list-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
}

/* ── MOBILE RESPONSIVE PHASE 2 ──────────── */
@media (max-width: 640px) {
  .school-list-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }

  .school-list-right {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .coaches-grid {
    gap: 0;
  }

  .school-card {
    padding: 16px;
    gap: 12px;
  }

  .school-card-logo,
  .school-card-logo-fallback {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
  }

  .school-card-name {
    font-size: 15px;
  }

  .coach-list-row {
    flex-wrap: wrap;
  }

  .coach-list-name,
  .coach-list-title,
  .coach-list-school {
    min-width: 120px;
  }

  .search-filters {
    flex-direction: column;
  }

  .search-filters .search-input,
  .search-filters .filter-select {
    width: 100%;
    min-width: unset;
  }

  .school-modal-header {
    flex-direction: column;
    text-align: center;
  }

  .coach-modal-header {
    flex-direction: column;
    text-align: center;
  }

  .skeleton-card {
    padding: 16px;
    gap: 12px;
  }

  .skeleton-avatar {
    width: 48px;
    height: 48px;
  }
}


/* ── INFINITE SCROLL & PAGINATION ─────────── */
.loading-more {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 14px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.section-count {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  margin-left: auto;
}

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

/* Grids use window scroll for infinite loading */

.loading-count,
.loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.loading-count::before,
.loading-text::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--primary) 22%, transparent);
  border-top-color: var(--primary);
  animation: loading-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* Keyboard-focus elevation for clickable cards — pairs with :focus-visible token */
.kanban-card:focus-visible,
.school-card:focus-visible,
.coach-card:focus-visible,
.activity-item:focus-visible,
.crm-list-row:focus-visible,
.schools-sent-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* ── MOBILE OPTIMIZATION PHASE 3 ──────────── */
@media (max-width: 768px) {
  /* Campaign selector full-width on mobile */
  .campaign-select {
    max-width: 100%;
    font-size: 16px; /* Prevent iOS zoom */
  }

  .campaign-search-wrapper {
    max-width: 100%;
  }

  .campaign-search-input {
    font-size: 16px; /* Prevent iOS zoom */
  }

  /* Schools-sent table smooth horizontal scroll */
  .schools-sent-table-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* The rival mobile treatment for this table — scroll it sideways — used to
     live here and partially won over the card layout above. A six-column table
     on a 390px screen is not something a parent should have to scroll. */

  /* Thread modal truly full-screen on mobile */
  .modal-content.thread-modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  /* Touch targets minimum 44px */
  .btn-primary,
  .btn-secondary,
  /* The rule further down already gives every button min-height: 44px. It sets
     no min-width, so icon-only buttons stayed narrow — the CRM "add task" button
     was 28px wide. */
  .tab-btn,
  .filter-btn,
  .nav-item,
  .logout-btn,
  .reply-btn,
  .view-thread-btn,
  .btn-send-reply,
  .btn-attach-inline,
  .pos-chip,
  .tasks-widget-add-btn,
  .modal-close,
  .mobile-nav-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-item {
    padding: 12px 16px;
  }

  /* All inputs 16px+ to prevent iOS zoom */
  input, select, textarea {
    font-size: 16px;
  }

  .filter-select {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ==========================================
   MOBILE REPLY FIX - Mar 4, 2026
   Ensure send button is always visible on iOS
   ========================================== */

@media (max-width: 768px) {
  /* Thread modal: use dvh for iOS Safari, anchor reply box to viewport bottom */
  .modal-content.thread-modal {
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Compact header — reclaim ~30px of vertical space on small screens */
  .thread-modal-header {
    padding: 10px 14px;
  }

  .thread-header-avatar {
    width: 36px;
    height: 36px;
    font-size: 15px;
    box-shadow: 0 1px 4px color-mix(in oklch, var(--success) 30%, transparent);
  }

  .thread-header-text h3 {
    font-size: 15px;
    line-height: 1.25;
  }

  .thread-email {
    font-size: 12px;
  }

  .thread-modal-header .modal-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
  }

  /* Compact context strip on mobile */
  .modal-context-strip {
    padding: 6px 14px;
    font-size: 11px;
  }

  /* Compact status bar */
  .thread-status-bar {
    padding: 8px 14px;
    gap: 4px;
  }

  /* Thread body takes remaining space */
  .thread-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Reply footer: anchored to bottom, respects safe-area only (no extra 60px waste) */
  .thread-footer {
    padding: 8px 12px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    border-top: 1px solid var(--border);
    background: white;
    flex-shrink: 0;
    /* Position transform-anchored so visualViewport JS can shift it above the keyboard */
    transition: transform 200ms ease-out;
  }

  /* Textarea: 16px font prevents iOS auto-zoom; min height ergonomic for thumb typing */
  .thread-reply-box textarea {
    max-height: 96px !important;
    min-height: 44px;
    font-size: 16px;
    resize: none;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* Compact reply box spacing */
  .thread-reply-box {
    gap: 6px;
  }

  .thread-reply-input-row {
    margin-bottom: 0;
  }

  /* Reply actions: hint left, buttons right */
  .thread-reply-actions {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .thread-reply-left {
    flex: 1;
    min-width: 0;
  }

  /* Drop the "Sent on your behalf" hint on mobile — already obvious from context */
  .thread-reply-hint {
    display: none;
  }

  /* Attach + Send inline on right side */
  .thread-reply-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
  }

  /* Send button: 44px tap target per a11y guidelines */
  .btn-send-reply {
    min-height: 44px;
    min-width: 88px;
    padding: 10px 18px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 1px 3px color-mix(in oklch, var(--success) 30%, transparent);
  }

  .btn-send-reply:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--success) 40%, transparent);
  }

  .btn-attach-inline {
    min-height: 44px;
    min-width: 44px;
  }

  /* Attach option menu items deserve real tap targets too */
  .attach-options-menu .attach-option {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Inline error banner — tighter on small screens */
  .thread-reply-error {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ==========================================
   Email Detail Modal (Opens & Clicks)
   ========================================== */

.email-detail-modal {
  max-width: 600px;
  width: 94%;
}

.activity-item-clickable {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.activity-item-clickable:hover {
  background: rgba(0, 130, 243, 0.04);
  transform: translateX(2px);
}

.activity-item-clickable:active {
  transform: scale(0.99);
}

.email-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.email-detail-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.email-detail-subject {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  line-height: 1.5;
}

.email-detail-link-clicked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-bg-warning);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}

.email-detail-link-clicked a {
  color: #d97706;
  word-break: break-all;
  text-decoration: underline;
}

.email-detail-content {
  margin-bottom: 16px;
}

.email-detail-text {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
}

.email-detail-iframe {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}

.email-detail-timestamp {
  font-size: 13px;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .email-detail-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    position: fixed;
    bottom: 0;
    margin: 0;
  }
  
  .email-detail-text {
    max-height: 300px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .email-detail-modal .modal-body {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* CRM Modal - Clean Field Styles */
.modal-field-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  display: block;
}

.modal-field-input {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-darkest);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.modal-field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

.custom-select-wrapper {
  position: relative;
}

.modal-field-select {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  padding-right: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-darkest);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.modal-field-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Global Select Styling - Override ALL selects in the portal */
select,
.campaign-select,
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 14px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-darkest);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  width: 100%;
}

select:focus,
.campaign-select:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* ==========================================
   CRM FEATURES - Tasks, Visits, Comms, Coaches
   ========================================== */

/* --- Tasks Widget (compact collapsible) --- */
.tasks-widget {
  background: var(--card, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.tasks-widget:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tasks-widget-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.tasks-widget-bar:hover {
  background: var(--color-bg-subtle);
}

.tasks-widget-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tasks-widget-icon {
  color: var(--text-secondary, var(--text-secondary));
  flex-shrink: 0;
}

.tasks-widget-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, var(--text));
}

.tasks-widget-count {
  background: var(--bg, var(--color-bg-muted));
  color: var(--text-secondary, var(--text-secondary));
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
}

.tasks-widget-overdue {
  background: var(--color-bg-error);
  color: var(--error);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
}

.tasks-widget-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tasks-widget-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border, var(--border));
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--text-secondary, var(--text-secondary));
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

.tasks-widget-add-btn:hover {
  background: var(--primary, var(--primary));
  border-color: var(--primary, var(--primary));
  color: #fff;
}

.tasks-widget-chevron {
  color: var(--muted, var(--muted));
  transition: transform 0.2s;
  flex-shrink: 0;
}

.tasks-widget.expanded .tasks-widget-chevron {
  transform: rotate(180deg);
}

/* Widget body (expanded) */
.tasks-widget-body {
  border-top: 1px solid var(--border, var(--border));
  padding: 12px 16px;
}

/* Inline add row */
.tasks-widget-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border, var(--border));
}

.tasks-widget-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border, var(--border));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #fff);
  outline: none;
  transition: border-color 0.15s;
}

.tasks-widget-input:focus {
  border-color: var(--primary, var(--primary));
}

.tasks-widget-date {
  flex: 0 0 130px;
  width: 130px;
}

.tasks-widget-select {
  flex: 0 0 140px;
  width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--border, var(--border));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #fff);
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}

.tasks-widget-select:focus {
  border-color: var(--primary, var(--primary));
}

.tasks-widget-priority-select {
  flex: 0 0 90px;
  width: 90px;
}

.tasks-widget-submit {
  padding: 7px 16px;
  background: var(--primary, var(--primary));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.tasks-widget-submit:hover {
  background: var(--primary-dark, var(--primary-dark));
}

.tasks-widget-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, var(--muted));
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.tasks-widget-cancel:hover {
  background: var(--color-bg-error);
  color: var(--error);
}

/* Task chips list */
.tasks-widget-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-group {
  margin-bottom: 8px;
}

.task-group:last-child {
  margin-bottom: 0;
}

.task-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 0 4px;
}

.task-group-label.overdue { color: var(--error); }
.task-group-label.due-today { color: var(--warning); }
.task-group-label.upcoming { color: var(--primary, var(--primary)); }
.task-group-label.completed-label { color: var(--muted, var(--muted)); }

.task-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
  transition: background 0.15s;
  position: relative;
}

.task-chip:hover {
  background: var(--color-bg-muted);
}

.task-chip.task-completed .task-chip-checkbox,
.task-chip.task-completed .task-chip-content {
  opacity: 0.5;
}

.task-chip.task-completed .task-chip-title {
  text-decoration: line-through;
}

.task-chip-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, var(--primary));
  flex-shrink: 0;
}

.task-chip-content {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-chip-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-chip-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.task-chip-school {
  font-size: 11px;
  color: var(--text-secondary, var(--text-secondary));
  background: var(--bg, var(--color-bg-muted));
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.task-chip-due {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  background: #f0f9ff;
  color: #0369a1;
}

.task-chip-due.overdue {
  background: var(--color-bg-error);
  color: var(--error);
}

.task-chip-due.due-today {
  background: #fffbeb;
  color: #d97706;
}

.task-chip-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.task-chip-priority.priority-high {
  background: var(--color-bg-error);
  color: var(--error);
}

.task-chip-priority.priority-medium {
  background: var(--color-bg-warning);
  color: var(--color-text-warning);
}

.task-chip-priority.priority-low {
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}

.task-chip-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.task-chip:hover .task-chip-actions,
.task-chip:focus-within .task-chip-actions {
  opacity: 1;
}

.task-chip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted, var(--muted));
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

.task-chip-btn:hover {
  background: var(--color-bg-error);
  color: var(--error);
}

.task-chip-btn.edit-btn:hover {
  background: #f0f9ff;
  color: var(--primary);
}

/* Task inline edit */
.task-edit-form {
  width: 100%;
}

.task-edit-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

.task-edit-inline input,
.task-edit-inline select {
  padding: 5px 8px;
  border: 1px solid var(--border, var(--border));
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}

.task-edit-inline input:focus,
.task-edit-inline select:focus {
  border-color: var(--primary, var(--primary));
}

.task-edit-inline input[type="text"] {
  flex: 1;
  min-width: 0;
}

.task-edit-inline input[type="date"] {
  width: 120px;
}

.task-edit-inline select {
  width: 80px;
}

.task-edit-inline .edit-save-btn {
  padding: 4px 10px;
  background: var(--primary, var(--primary));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.task-edit-inline .edit-cancel-btn {
  padding: 4px 10px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Task items (used in school detail modal) */
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-bg-subtle);
  transition: background 0.15s;
}

.task-item:hover { background: var(--color-bg-muted); }
.task-item.task-completed { opacity: 0.5; }
.task-item.task-completed .task-title { text-decoration: line-through; }

.task-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, var(--primary));
  flex-shrink: 0;
}

.task-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.task-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Responsive: tasks widget */
@media (max-width: 768px) {
  .tasks-widget-add-row {
    flex-wrap: wrap;
  }
  .tasks-widget-input {
    flex: 1 1 100%;
  }
  .tasks-widget-select {
    flex: 1 1 calc(50% - 4px);
  }
  .tasks-widget-date {
    flex: 1 1 calc(50% - 4px);
  }
  .task-chip-meta {
    display: none;
  }
}

.empty-state-mini {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.loading-text {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
}

/* --- CRM Modal Tabs --- */
.crm-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Right-edge fade hint when content overflows — visible on touch devices */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.crm-modal-tabs::-webkit-scrollbar {
  display: none;
}

.crm-modal-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.crm-modal-tab:hover {
  color: var(--text);
}

.crm-modal-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, transparent);
}

.crm-modal-tab-content {
  display: none;
}

.crm-modal-tab-content.active {
  display: block;
}

/* --- CRM Lists (Visits, Comms, Coaches) --- */
.crm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.crm-list-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.crm-list-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.crm-list-date {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.crm-list-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Visit type badges */
.visit-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #e0f2fe;
  color: #0369a1;
}

/* Outcome badges */
.outcome-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.outcome-positive { background: var(--color-bg-success); color: var(--color-text-success); }
.outcome-neutral { background: var(--color-bg-muted); color: var(--text-secondary); }
.outcome-negative { background: #fee2e2; color: #dc2626; }
.outcome-pending { background: #fef9c3; color: #a16207; }

/* Direction badges */
.direction-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.direction-inbound { background: var(--color-bg-success); color: var(--color-text-success); }
.direction-outbound { background: #e0f2fe; color: #0369a1; }

/* Comm icon */
.comm-icon {
  font-size: 16px;
}

.comm-type {
  font-size: 13px;
  font-weight: 500;
}

/* Coach contact styles */
.coach-contact-item .crm-list-item-header {
  display: flex;
  align-items: center;
}

.coach-contact-item .crm-list-item-header strong {
  font-size: 14px;
}

.primary-star {
  font-size: 14px;
}

.coach-title {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.coach-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.coach-contact-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
}

.coach-contact-link:hover {
  text-decoration: underline;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
  margin-left: auto;
}

.btn-icon:hover {
  opacity: 1;
}

/* CRM Add Section */
.crm-add-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
}

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

/* CRM Inline Form */
.crm-inline-form {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-inline-form .form-group {
  margin-bottom: 0;
}

/* Modal field textarea */
.modal-field-textarea {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-darkest);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-field-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Mobile responsive for CRM features */
@media (max-width: 768px) {
  .crm-form-row {
    grid-template-columns: 1fr;
  }

  .crm-modal-tabs {
    padding: 0 12px;
    /* Slightly heavier fade on mobile to make scroll affordance obvious */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }

  .crm-modal-tab {
    padding: 12px 14px;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .crm-modal-tab.active {
    background: color-mix(in oklch, var(--primary) 8%, transparent);
  }

  .task-chip {
    padding: 5px 8px;
  }

  .coach-contact-links {
    flex-direction: column;
    gap: 4px;
  }
}

/* Activity Feed Styling */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 4px;
}

.activity-day {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.activity-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-bg-muted);
}

.activity-day-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-darkest);
}

.activity-day-stats {
  display: flex;
  gap: 8px;
}

.stat-badge {
  padding: 4px 10px;
  background: var(--color-bg-muted);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-pill {
  padding: 6px 12px;
  background: var(--color-bg-muted);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-pill strong {
  color: var(--color-text-darkest);
}

.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background 0.15s;
}

.activity-item:hover {
  background: var(--color-bg-subtle);
}

.activity-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-bg-muted);
}

.activity-open .activity-icon {
  background: var(--color-bg-info);
}

.activity-click .activity-icon {
  background: var(--color-bg-warning);
}

.activity-reply .activity-icon {
  background: #d1fae5;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.activity-header strong {
  font-weight: 600;
  color: var(--color-text-darkest);
}

.activity-school {
  font-size: 13px;
  color: var(--text-secondary);
}

.activity-time {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.activity-details {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 4px;
}

.activity-message {
  margin-top: 8px;
  padding: 10px;
  background: var(--color-bg-subtle);
  border-left: 3px solid #d1fae5;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .activity-day {
    padding: 16px;
  }
  
  .activity-day-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .activity-time {
    margin-left: 0;
  }
}

/* Mobile-friendly tab labels */
.tab-label-mobile {
  display: none;
}

@media (max-width: 768px) {
  .tab-label-full {
    display: none;
  }
  
  .tab-label-mobile {
    display: inline;
    font-size: 18px;
  }
  
  .tab-btn {
    padding: 10px 14px !important;
    min-width: 48px;
  }
  
  .tab-toggle {
    justify-content: space-around;
    gap: 4px;
  }
}

/* Adjust main content when sidebar is collapsed */
body.sidebar-collapsed .main-content {
  margin-left: 72px;
}

/* ================================================
/* ================================================
   SIMPLE MOBILE SIDEBAR - March 13, 2026
   Slide-in sidebar (no collapse, no bottom nav)
   ================================================ */

@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .app-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Mobile nav toggle button */
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--z-modal-stacked);
    background: var(--primary);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  /* The toggle sits at --z-modal-stacked (1100), above --z-modal (1000), so it
     rendered on top of any open dialog — a nav button floating over a modal,
     and tapping it opened the sidebar behind the dialog. It has to stay above
     the sidebar itself (same z as modals) to remain tappable as the ✕, so the
     fix is to take it out of the picture while a dialog is open. */
  body:has(.modal:not(.hidden)) .mobile-nav-toggle {
    display: none !important;
  }

  /* Without this the page scrolls under a naked floating button and content
     collides with it — headings were rendering half-hidden behind the toggle.
     An opaque strip gives it something to sit on. */
  .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: var(--bg);
    z-index: calc(var(--z-modal-stacked) - 1);
    pointer-events: none;
  }

  body:has(.modal:not(.hidden)) .app-container::before {
    display: none;
  }
  
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  
  .sidebar-backdrop.open {
    display: block;
  }
  
  /* Sidebar slides in from left */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    height: 100vh !important;
    width: 260px !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    max-height: 100vh !important;
    overflow: hidden !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
  
  .sidebar.open {
    left: 0 !important;
  }
  
  /* Restore normal sidebar layout on mobile */
  .sidebar-header {
    display: flex !important;
    padding: 20px 20px 0 20px !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide the collapse toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }
  
  .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 20px !important;
  }
  
  .nav-item {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }
  
  .nav-item svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .nav-label {
    font-size: 14px !important;
  }
  
  .sidebar-user {
    display: flex !important;
    flex-shrink: 0 !important;
    margin: 0 20px 20px 20px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .sidebar-user-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .user-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
  
  .user-name {
    font-size: 14px !important;
  }
  
  .user-email {
    font-size: 12px !important;
  }
  
  .logout-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  
  /* Main content */
  .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 70px 12px 24px 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Prevent input zoom on iOS */
  input, select, textarea, button {
    font-size: 16px !important;
  }
  
  /* Make sure all containers respect viewport width */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* ==========================================
   CRM REDESIGN - SCOUT-STYLE
   ========================================== */

/* --- Stats Bar --- */
.crm-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.crm-stat-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.crm-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.crm-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text, var(--color-text-darkest));
  line-height: 1.2;
}

.crm-stat-label {
  font-size: 13px;
  color: var(--text-secondary, var(--text-secondary));
  margin-top: 4px;
  font-weight: 500;
}

/* --- Enhanced Kanban --- */
.kanban-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}

.kanban-column {
  flex: 0 0 280px;
  background: #f8f9fb;
  border-radius: 14px;
  padding: 12px;
  min-height: 400px;
  border: 1px solid var(--border);
}

.kanban-header {
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 3px solid transparent;
  border-bottom: none;
}

.kanban-header.cold {
  background: #fffbeb;
  color: #b45309;
  border-top-color: var(--warning);
  border-bottom: none;
}

.kanban-header.warm {
  background: #f0fdf4;
  color: var(--color-text-success);
  border-top-color: var(--success);
  border-bottom: none;
}

.kanban-header.hot {
  background: var(--color-bg-info-soft);
  color: var(--primary-dark);
  border-top-color: var(--primary);
  border-bottom: none;
}

.kanban-header.offered {
  background: #eef2ff;
  color: #4338ca;
  border-top-color: #6366f1;
  border-bottom: none;
}

.kanban-header.committed {
  background: #faf5ff;
  color: #7e22ce;
  border-top-color: #a855f7;
  border-bottom: none;
}

/* Enhanced Kanban Card */
.kanban-card {
  background: white;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  border: 1px solid var(--border);
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  border-color: var(--primary, var(--primary));
}

.kc-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.kc-school-logo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.kc-school-logo .school-card-logo,
.kc-school-logo .school-card-logo-fallback {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 9px;
}

.kc-school {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, var(--color-text-darkest));
  line-height: 1.3;
}

.kc-division {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-bg-info-soft);
  color: var(--primary-dark);
  white-space: nowrap;
}

.kc-coach {
  font-size: 12px;
  color: var(--text-secondary, var(--text-secondary));
  margin-bottom: 4px;
}

.kc-coach::before {
  content: "Coach: ";
  font-weight: 500;
}

.kc-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.kc-state {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--color-bg-muted);
  padding: 1px 6px;
  border-radius: 4px;
}

.kc-scholarship {
  font-size: 11px;
  font-weight: 600;
  color: #166534;
  background: var(--color-bg-success);
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
}

.kc-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-bg-muted);
}

.kc-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  background: white;
  color: var(--text-secondary, var(--text-secondary));
}

.kc-btn:hover {
  background: var(--color-bg-subtle);
}

.kc-btn-activity {
  color: var(--primary);
  border-color: #bfdbfe;
}

.kc-btn-activity:hover {
  background: var(--color-bg-info-soft);
}

.kc-btn-details {
  color: var(--text-secondary);
}

.kc-btn-details:hover {
  background: var(--color-bg-muted);
}

/* Empty column placeholder */
.empty-column {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 16px;
  font-style: normal;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.5);
}

/* --- List View --- */
.crm-list-view {
  background: var(--card, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 14px;
  overflow: hidden;
}

.crm-list-table {
  width: 100%;
}

.crm-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 0.8fr;
  gap: 12px;
  padding: 12px 20px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--border, var(--border));
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.crm-lh-cell {
  cursor: pointer;
  user-select: none;
}

.crm-lh-cell:hover {
  color: var(--text, var(--color-text-darkest));
}

.crm-list-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 0.8fr;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-bg-muted);
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}

.crm-list-row:hover {
  background: var(--color-bg-subtle);
}

.crm-list-row:last-child {
  border-bottom: none;
}

.crm-lr-school strong {
  display: block;
  font-size: 14px;
  color: var(--text, var(--color-text-darkest));
}

.crm-lr-state {
  font-size: 12px;
  color: var(--text-secondary, var(--text-secondary));
}

.crm-lr-coach {
  font-size: 13px;
  color: var(--text-secondary, var(--text-secondary));
}

.crm-lr-actions .kc-btn {
  padding: 4px 10px;
}

/* Status pills */
.crm-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.crm-status-pill.status-cold {
  background: var(--color-bg-warning);
  color: #b45309;
}

.crm-status-pill.status-warm {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.crm-status-pill.status-hot {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.crm-status-pill.status-offered {
  background: #e0e7ff;
  color: #4338ca;
}

.crm-status-pill.status-committed {
  background: #f3e8ff;
  color: #7e22ce;
}

/* --- CRM Table View --- */
.crm-table-view {
  padding: 0;
}

.crm-table-wrapper {
  background: var(--card, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
}

.crm-table-th {
  padding: 12px 16px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--border, var(--border));
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.crm-table-th:hover {
  color: var(--text, var(--color-text-darkest));
}

.crm-table-th-actions {
  text-align: right;
  cursor: default;
}

.crm-table-row {
  transition: background 0.15s;
  cursor: pointer;
}

.crm-table-row:hover {
  background: var(--color-bg-subtle);
}

.crm-table-row-alt {
  background: #fafbfc;
}

.crm-table-row-alt:hover {
  background: var(--color-bg-muted);
}

.crm-table-td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-bg-muted);
  font-size: 13px;
  color: var(--text, var(--color-text-darkest));
  vertical-align: middle;
}

.crm-table-row:last-child .crm-table-td {
  border-bottom: none;
}

.crm-table-school {
  font-weight: 600;
  margin-bottom: 2px;
}

.crm-table-state {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--color-bg-muted);
  padding: 1px 6px;
  border-radius: 3px;
}

.crm-table-td-actions {
  text-align: right;
  white-space: nowrap;
}

.crm-table-td-actions .kc-btn {
  padding: 4px 10px;
  font-size: 11px;
  margin-left: 6px;
}

.kc-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

.kc-btn-outline {
  background: transparent;
  border: 1px solid var(--border, var(--border));
  color: var(--text-secondary, var(--text-secondary));
}

.kc-btn-outline:hover {
  background: var(--color-bg-subtle);
  color: var(--text, var(--color-text-darkest));
}

/* --- School Timeline (per-school modal tab) --- */
.school-timeline {
  position: relative;
  padding: 8px 0;
}

.school-timeline::before {
  content: '';
  position: absolute;
  left: 104px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border, var(--border));
  border-radius: 1px;
}

.school-timeline-entry {
  display: grid;
  grid-template-columns: 84px 28px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 10px 0;
  position: relative;
}

.school-timeline-date {
  width: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-secondary));
  padding-top: 6px;
  text-align: right;
  letter-spacing: 0.02em;
}

.school-timeline-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card, #fff);
  border: 2px solid var(--border, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.school-timeline-interest .school-timeline-dot { border-color: var(--warning); }
.school-timeline-task .school-timeline-dot { border-color: var(--success); }
.school-timeline-comm .school-timeline-dot { border-color: var(--primary); }
.school-timeline-visit .school-timeline-dot { border-color: var(--warning); }
.school-timeline-status .school-timeline-dot { border-color: #a855f7; }

.school-timeline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.school-timeline-icon svg {
  width: 14px;
  height: 14px;
}

.school-timeline-content {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 12px;
  transition: box-shadow 0.15s;
}

.school-timeline-content:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.school-timeline-desc {
  font-size: 14px;
  color: var(--text, var(--color-text-darkest));
  line-height: 1.45;
}

@media (max-width: 720px) {
  .school-timeline::before {
    left: 12px;
    top: 18px;
    bottom: 18px;
  }

  .school-timeline-entry {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 8px;
    column-gap: 12px;
    padding: 12px 0;
  }

  .school-timeline-date {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
    font-size: 12px;
  }

  .school-timeline-dot {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .school-timeline-content {
    grid-column: 2;
    padding: 12px 14px;
  }
}

/* --- Log Activity FAB ---
   Appended to <body> once and never removed, so it used to float over every
   section — dashboard, schools, coaches, profile, support. It logs a coach
   interaction, which only means anything in CRM. Shown there and nowhere else. */
.crm-log-activity-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-dropdown);
}

body:not(:has(#crmSection.section-active)) .crm-log-activity-fab {
  display: none;
}

.fab-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Hide old submit-interest FAB when new one is present */
.crm-log-activity-fab ~ .submit-interest-btn,
body:has(.crm-log-activity-fab) .submit-interest-btn {
  display: none !important;
}

/* --- CRM Mobile Responsive --- */
@media (max-width: 768px) {
  .crm-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .crm-stat-card {
    padding: 14px;
    border-radius: 10px;
  }

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

  .crm-stat-label {
    font-size: 11px;
  }

  .kanban-board {
    padding: 12px;
  }

  .kanban-column {
    flex: 0 0 260px;
  }

  /* List view - stack on mobile */
  .crm-list-header {
    display: none;
  }

  .crm-list-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
  }

  .crm-lr-actions {
    align-self: flex-start;
  }

  .crm-table-wrapper {
    overflow-x: auto;
  }

  .crm-table {
    min-width: 700px;
  }

  .crm-log-activity-fab {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 14px;
  }

  .crm-log-activity-fab .fab-text {
    display: none;
  }

  .crm-log-activity-fab .fab-icon {
    font-size: 22px;
  }
}

/* ==========================================
   UI QA OVERRIDES - Mobile + Desktop
   ========================================== */

:root {
  --qa-card-radius: 8px;
  --qa-input-radius: 6px;
  --qa-modal-radius: 12px;
}

html,
body,
.app-container,
.main-content {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

.chart-card,
.stat-card,
.info-banner,
.campaign-filter,
.tasks-widget,
.kanban-column,
.login-card,
.school-card,
.profile-card,
.activity-item,
.summary-stat,
.coaches-grid,
.crm-table-wrapper,
.schools-sent-table-container,
.crm-stat-card,
.school-timeline-content {
  border-radius: var(--qa-card-radius) !important;
}

.kanban-card,
.crm-list-row,
.crm-list-item,
.tasks-widget-bar,
.tasks-widget-body {
  border-radius: var(--qa-card-radius);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select,
.search-input,
.filter-select,
.campaign-search-input,
.campaign-select,
.modal-field-input,
.modal-field-select,
.modal-field-textarea,
.reply-textarea,
.tasks-widget-input,
.tasks-widget-select,
#resetEmail,
#lookupName,
#newPasswordText,
#foundEmailText,
#schoolBrowserModal input,
#schoolBrowserModal select {
  border-radius: var(--qa-input-radius) !important;
}

.modal-content,
#forgotPasswordModal .modal-content,
#forgotEmailModal .modal-content,
#schoolBrowserModal .modal-content {
  border-radius: var(--qa-modal-radius) !important;
}

.login-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(100%, 400px);
  max-width: 400px !important;
}

#loginForm {
  width: 100%;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.forgot-link {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  color: var(--text-secondary) !important;
}

button,
a,
.nav-item,
.kc-btn,
.crm-modal-tab,
.tab-btn,
.filter-btn,
.view-thread-btn,
.school-card.clickable,
.coach-list-row,
.campaign-search-clear,
.campaign-select,
.search-input,
.filter-select,
.modal-close {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.school-card.clickable:hover,
.coach-list-row:hover,
.view-thread-btn:hover,
.campaign-search-clear:hover,
.modal-close:hover,
.crm-modal-tab:hover,
.tab-btn:hover,
.kc-btn:hover,
.search-input:hover,
.filter-select:hover,
.campaign-select:hover,
.campaign-search-input:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.campaign-filter.simplified,
.info-banner,
.tab-toggle,
.school-card-content,
.school-card-badges,
.kc-header,
.kc-meta,
.kc-actions,
.kc-school,
.kc-coach,
.kc-scholarship,
.coach-list-row > div,
.profile-grid,
.profile-textareas {
  min-width: 0;
}

/* Profile section ─── foundational layout for cards / grid / fields */
.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.profile-textareas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profile-field-full {
  grid-column: 1 / -1;
}

.profile-field label {
  font-weight: 500;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent);
}

.profile-field input:disabled {
  background: var(--color-bg-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.profile-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-card h3 {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-card .profile-section-lead {
  margin: -8px 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Profile completion card — progress bar treatment */
.profile-completion-card {
  background: linear-gradient(135deg, var(--color-bg-info-soft) 0%, #ffffff 100%);
  border: 1px solid #bfdbfe;
}

.profile-completion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.profile-completion-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-completion-percent {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.profile-progress-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-info);
  overflow: hidden;
  margin-bottom: 8px;
}

.profile-progress-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: 999px;
  transition: width 400ms ease-out;
  width: 0;
}

.profile-completion-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.profile-summary-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-summary-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-summary-name {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.profile-summary-note {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.profile-actions-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.profile-reel-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.profile-reel-list a {
  color: var(--primary);
  text-decoration: none;
}

.profile-reel-list a:hover {
  text-decoration: underline;
}

/* Mobile sticky save bar — keeps Save Changes within thumb reach on long forms */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-completion-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .profile-summary-card {
    flex-direction: column;
    align-items: stretch;
  }

  #profileSection .page-header .profile-save-btn {
    display: none; /* anchored Save replaces it on mobile */
  }

  #profileSection {
    padding-bottom: calc(env(safe-area-inset-bottom) + 84px); /* room for sticky bar */
  }

  .profile-mobile-save-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -16px -16px;
    padding: 10px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--border);
    z-index: var(--z-sticky);
  }

  .profile-mobile-save-bar .btn-primary {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }
}

.crm-modal-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.crm-modal-tabs::-webkit-scrollbar {
  display: none;
}

.crm-modal-tab {
  flex-shrink: 0;
}

.kc-header {
  flex-wrap: wrap;
}

.kc-meta,
.kc-actions,
.school-card-badges {
  flex-wrap: wrap;
}

.kc-school,
.kc-coach,
.kc-state,
.kc-scholarship,
.kc-division,
.school-card-name,
.school-card-subtitle,
.school-card-stat,
.school-card-division {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.school-card-badges {
  align-items: flex-start;
}

.kc-btn {
  flex: 0 0 auto !important;
  width: auto;
  max-width: 100%;
}

.kc-scholarship {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .main-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + 104px);
  }

  .content-section,
  .kanban-board,
  .crm-list-view,
  .crm-table-view {
    padding-bottom: 8px;
    scroll-padding-bottom: calc(env(safe-area-inset-bottom) + 104px);
  }

  .campaign-filter.simplified {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0;
  }

  .campaign-search-wrapper,
  .campaign-search-input,
  .campaign-select {
    width: 100%;
    max-width: none;
  }

  .info-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tab-toggle {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  .tab-toggle::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: auto;
  }

  .tab-label-mobile {
    font-size: 12px !important;
  }

  .crm-modal-tabs {
    padding: 0 12px;
  }

  .crm-modal-tab {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .modal {
    padding: 12px;
  }

  .modal-content:not(.thread-modal) {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px) !important;
    max-height: 90vh !important;
    margin: 0 auto;
    border-radius: var(--qa-modal-radius) !important;
  }

  .modal-body {
    max-height: calc(90vh - 144px);
  }

  #notesModal .modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 95vh !important;
    margin: 8px !important;
    border-radius: 12px !important;
  }

  input,
  select,
  textarea,
  .search-input,
  .filter-select,
  .campaign-search-input,
  .campaign-select,
  .modal-field-input,
  .modal-field-select,
  .modal-field-textarea {
    font-size: 16px !important;
  }

  button,
  .btn-primary,
  .btn-secondary,
  .tab-btn,
  .filter-btn,
  .kc-btn,
  .crm-modal-tab,
  .reply-btn,
  .view-thread-btn,
  .campaign-search-clear,
  .nav-item,
  .logout-btn,
  .forgot-link,
  .mobile-nav-toggle,
  .modal-close,
  .tasks-widget-submit,
  .tasks-widget-cancel {
    min-height: 44px;
  }

  .crm-log-activity-fab {
    right: 16px !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  }

  .kanban-column {
    flex: 0 0 min(280px, calc(100vw - 32px));
  }

  .kanban-card {
    overflow: visible;
  }

  .school-card,
  .school-card-content {
    overflow: visible;
  }

  #profileSection .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #saveProfileBtn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .school-list-row {
    grid-template-columns: 1fr;
  }

  .coach-list-header {
    display: none !important;
  }

  .coach-list-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name title"
      "school school"
      "division contact";
    gap: 8px 12px;
    align-items: start;
    padding: 14px;
  }

  .coach-list-name-cell {
    grid-area: name;
    align-items: flex-start;
  }

  .coach-list-title {
    grid-area: title;
    align-self: center;
    justify-self: end;
    text-align: right;
  }

  .coach-list-school {
    grid-area: school;
  }

  .coach-list-division {
    grid-area: division;
    align-items: flex-start;
  }

  .coach-list-contact {
    grid-area: contact;
    align-items: flex-end;
    text-align: right;
  }

  .coach-list-quality {
    display: none;
  }

  .coach-list-title::before,
  .coach-list-school::before,
  .coach-list-division::before,
  .coach-list-contact::before,
  .coach-list-quality::before {
    content: none !important;
    display: none !important;
  }

  .coach-list-name,
  .coach-list-title,
  .coach-list-school,
  .coach-list-contact {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .coach-list-division .division-badge {
    max-width: 100%;
    white-space: normal;
  }
}

/* ===== UX PASS: button sizing + mobile polish ===== */
:root {
  --ux-card-padding-desktop: 20px;
  --ux-card-padding-mobile: 16px;
  --ux-btn-radius: 10px;
  --ux-input-radius: 6px;
  --ux-modal-radius: 12px;
}

body {
  font-size: 14px;
}

label,
.modal-field-label,
.form-group label {
  font-size: 13px;
}

small,
.text-small,
.helper-text {
  font-size: 12px;
}

h1 { font-size: clamp(20px, 2.4vw, 24px); }
h2 { font-size: clamp(18px, 2vw, 20px); }
h3 { font-size: clamp(16px, 1.6vw, 18px); }

.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--ux-btn-radius);
  width: auto;
  /* min-height deliberately omitted. This block sits AFTER the mobile
     touch-target rules, and media queries add no specificity, so redeclaring
     36px here silently defeated them — which is why the mobile 44px rule for
     these classes never took effect. The desktop default lives with the base
     button rule instead. */
  white-space: nowrap;
  cursor: pointer;
}

.btn-cta {
  padding: 10px 24px;
  font-size: 14px;
}

.btn-compact,
.btn-sm,
.btn-refresh-thread,
.btn-link-inline {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.log-activity-btn,
.fab,
#logActivityFab {
  padding: 10px 16px;
  font-size: 13px;
}

button[style*="width: 100%"]:not(#loginForm button):not(#recoverPasswordForm button):not(#lookupEmailForm button) {
  width: auto !important;
}

.modal-footer {
  gap: 8px;
}

.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger {
  width: auto;
}

.modal-footer-split {
  justify-content: space-between;
}

.modal-footer-actions {
  display: flex;
  gap: 8px;
}

#profileSection .page-header {
  align-items: center;
}

#profileSection #saveProfileBtn,
.profile-save-btn {
  margin-left: auto;
  width: auto;
}

#profileSection .profile-card,
.card,
.chart-card,
.metric-card,
.dashboard-card {
  border-radius: 8px;
  padding: var(--ux-card-padding-desktop);
}

.modal-content {
  border-radius: var(--ux-modal-radius);
}

input,
select,
textarea,
.modal-field-input,
.modal-field-select {
  border-radius: var(--ux-input-radius);
}

input:focus,
select:focus,
textarea:focus,
.modal-field-input:focus,
.modal-field-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
}

a:hover,
button:hover,
[role="button"]:hover,
.clickable:hover,
.nav-item:hover,
.sidebar-nav button:hover {
  filter: brightness(0.98);
}

.campaign-tabs,
.campaign-selector,
.tab-buttons {
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.admin-bar,
.schools-sent-filters,
.coaches-filters,
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kanban-board {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn-primary,
  .modal-footer .btn-secondary,
  .modal-footer .btn-danger {
    width: 100%;
    min-height: 44px;
  }

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

  .page-header .btn-primary {
    width: 100%;
    min-height: 44px;
  }

  .admin-bar,
  .schools-sent-filters,
  .coaches-filters,
  .filter-row,
  .school-browser-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-bar input,
  .admin-bar select,
  .admin-bar button,
  .school-browser-search,
  .school-browser-select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }

  .stats-grid,
  .profile-grid,
  .profile-stack {
    grid-template-columns: 1fr !important;
  }

  #profileSection .profile-card,
  .card,
  .chart-card,
  .metric-card,
  .dashboard-card {
    padding: var(--ux-card-padding-mobile);
  }

  .modal-content {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin: 8px;
    max-height: calc(100vh - 16px);
  }
}

/* Activity feed pagination */
.activity-pagination-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.activity-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.activity-load-more-btn {
  border: 1px solid var(--color-border-light);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.activity-load-more-btn:hover {
  background: var(--color-bg-muted);
}

/* UX polish */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: min(100%, 460px);
}
.tab-btn.active {
  box-shadow: inset 0 -2px 0 #0082f3;
  font-weight: 700;
}
.crm-column .kanban-card,
.kanban-card {
  touch-action: manipulation;
}

/* ══════════════════════════════════════════════
   DIVISION PILL FILTERS (SCOUT-style)
   ══════════════════════════════════════════════ */

.division-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.division-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  border: 2px solid;
  background: #fff;
  text-transform: uppercase;
}

.division-pill .pill-check {
  display: none;
  font-size: 12px;
  font-weight: 700;
}

.division-pill.active .pill-check {
  display: inline;
}

/* Division filter pills are TOGGLES. The meaningful state is selected vs not
 * selected — not which division — so they no longer carry six different hues.
 * Neutral at rest, brand blue when active, which is what the accent is for. */
.division-pill {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--card);
}

.division-pill:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.division-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.division-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ── ADVANCED FILTERS EXPANDABLE ──────────── */
.advanced-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  margin-bottom: 8px;
}

.advanced-filters-toggle:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-light);
  color: var(--color-text-dark);
}

.advanced-filters-toggle .toggle-chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.3s ease;
}

.advanced-filters {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.advanced-filters.expanded {
  max-height: 200px;
}

.advanced-filters-inner {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

#schoolsAdvancedFilters .advanced-filters-inner {
  grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
}

#coachesAdvancedFilters .advanced-filters-inner {
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
}

@media (max-width: 640px) {
  .advanced-filters-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ── COACH LIST POLISH ────────────────────── */
.coach-list-name {
  font-weight: 700;
}

.coach-list-title-text {
  font-size: 12px;
  color: #64748b;
  font-weight: 400;
}

/* ── CLEAR FILTERS BUTTON ─────────────────── */
.filter-clear-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

.filter-clear-btn:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-dark);
  border-color: var(--color-border-light);
}

/* ── IMPROVED SCHOOL CARDS ─────────────────── */
.school-card {
  position: relative;
  overflow: hidden;
  min-height: 160px;
}

.school-card-conference {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.school-card-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg-muted);
}

.school-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}

.school-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s, opacity 0.25s;
  pointer-events: none;
}

.school-card-hover-overlay span {
  background: var(--yfs-blue, #0082f3);
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transform: translateY(8px);
  transition: transform 0.25s;
}

.school-card:hover .school-card-hover-overlay {
  background: rgba(255,255,255,0.75);
  opacity: 1;
}

.school-card:hover .school-card-hover-overlay span {
  transform: translateY(0);
}

/* ── IMPROVED COACH LIST ROWS ──────────────── */
.coach-list-row:nth-child(even) {
  background: #fafbfc;
}

.coach-list-row:nth-child(even):hover {
  background: var(--color-bg-muted);
}

.coach-email-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

.coach-email-button .copy-icon {
  opacity: 0.4;
  flex-shrink: 0;
}

.coach-email-button:hover .copy-icon {
  opacity: 0.8;
}

.coach-email-button:hover {
  background: #f0f7ff;
  border-color: #93c5fd;
  color: var(--primary-dark);
}

.coach-email-button.prominent {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-bg-info-soft);
  border-color: #bfdbfe;
  color: var(--primary-dark);
}

.coach-email-button.prominent:hover {
  background: var(--color-bg-info);
}

.email-status-icon {
  font-size: 11px;
  font-weight: 700;
}

.email-status-icon.verified {
  color: var(--success-text);
}

.email-status-icon.unverified {
  color: var(--muted);
}

.coach-list-contact-status {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}

.coach-list-contact-status.verified {
  color: #16a34a;
}

@media (max-width: 640px) {
  .division-pills {
    gap: 6px;
  }

  .division-pill {
    padding: 5px 10px;
    font-size: 12px;
  }

  .filter-clear-btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}

/* Sticky filter bar when scrolling */
#schoolsSection .division-pills,
#coachesSection .division-pills {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg, #fff);
  padding-top: 8px;
  padding-bottom: 8px;
}

#schoolsSection .search-filters,
#coachesSection .search-filters {
  position: sticky;
  top: 52px;
  z-index: 19;
  background: var(--bg, #fff);
  padding-bottom: 12px;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 24px;
  /* Icon-only floating control, so it needs the full 44px target in both
     directions. The generic mobile button rule sets min-height only, which left
     this one 40px wide. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary, var(--primary-dark));
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--primary-dark);
}

/* Questionnaire link in school list */
.school-list-questionnaire-link {
  color: var(--accent, var(--primary-dark));
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.school-list-questionnaire-link:hover {
  text-decoration: underline;
}

/* ==========================================
   HIGHLIGHTS SECTION STYLES
   ========================================== */

/* Upload Dropzone */
.upload-dropzone {
  width: 100%;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 5%, transparent);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone-icon {
  font-size: 36px;
}

.dropzone-text {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.dropzone-hint {
  font-size: 12px;
  color: var(--muted);
}

.file-preview {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-preview > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.file-preview-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.file-preview-size {
  font-size: 12px;
  color: var(--muted);
}

.file-preview-remove {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  font-size: 18px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
}

#highlightSubmitBtn {
  min-height: 44px;
}

/* Highlight video source */
.highlight-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  margin: 0 0 var(--space-md);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--ux-input-radius);
  background: var(--bg);
}

.highlight-type-option {
  min-width: 0;
  cursor: pointer;
}

.highlight-type-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: calc(var(--ux-input-radius) - 2px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.highlight-type-option:hover span {
  color: var(--text);
}

.highlight-type-option input:checked + span {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.highlight-type-option input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

/* Highlights List */
.highlights-list {
  display: grid;
  gap: var(--space-md);
}

.highlight-card {
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.highlight-card:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--card-border));
  box-shadow: var(--shadow-sm);
}

.highlight-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.highlight-card-main { min-width: 0; }

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

.highlight-card-date {
  font-size: 12px;
  color: var(--muted);
}

.highlight-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.highlight-card-meta span + span::before {
  margin-right: 14px;
  color: var(--border);
  content: '•';
}

.highlight-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.highlight-status-badge.pending {
  background: var(--color-bg-warning);
  color: #92400e;
}

.highlight-status-badge.in_review {
  background: var(--color-bg-info);
  color: #1e40af;
}

.highlight-status-badge.completed {
  background: var(--color-bg-success);
  color: #166534;
}

.highlight-card-notes {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.highlight-card-feedback {
  display: grid;
  gap: 5px;
  margin-top: var(--space-md);
  padding: 14px 16px;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: var(--color-bg-info-soft);
}

.highlight-card-feedback > span {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.highlight-card-feedback p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.highlight-card-caption {
  background: color-mix(in oklch, var(--primary) 8%, transparent);
  border-left: 3px solid var(--primary);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}

.highlight-card-caption-label {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.highlight-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.highlight-card-actions .btn-secondary {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
}

@media (max-width: 560px) {
  .highlight-card-header { align-items: flex-start; }
  .highlight-card-meta { display: grid; gap: 3px; }
  .highlight-card-meta span + span::before { display: none; }
  .highlight-card-actions .btn-secondary { flex: 1; justify-content: center; }
}

/* ==========================================
   X POSTS CALENDAR STYLES (REDESIGNED)
   ========================================== */

/* Page Header - matches Dashboard layout */
#xpostsSection {
  flex-direction: column;
}
#xpostsSection:not(.hidden) {
  display: flex;
}

.xpost-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.xpost-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.xpost-header-left h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.xpost-header-left h1::before {
  display: none;
}

.xpost-admin-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--color-bg-warning) 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 8px 16px;
}

.xpost-viewing-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.xpost-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
}

/* How-it-works guidance (YFS-100) */
.xpost-howto {
  position: relative;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-bg-info-soft, #f5f8ff);
}
.xpost-howto.hidden { display: none; }
.xpost-howto h3 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.xpost-howto-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}
.xpost-howto-close:hover { color: var(--text); }
.xpost-howto-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
}
.xpost-howto-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.xpost-howto-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.xpost-howto-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.xpost-howto-card ul { margin: 0; padding-left: 16px; display: grid; gap: 5px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.xpost-howto-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 7px;
  margin-right: 4px;
  font-size: 10px;
  font-weight: 700;
}
.xpost-howto-pill.ready_now { background: var(--color-bg-success); color: #166534; }
.xpost-howto-pill.needs_media { background: #ffedd5; color: #9a3412; }
.xpost-howto-pill.needs_confirmation { background: var(--color-bg-info); color: var(--primary-dark); }

.xaudit-category-meaning {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.xpost-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.xpost-tab:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--primary) 5%, transparent);
}

.xpost-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.xpost-tab-panel.hidden {
  display: none;
}

/* My Profile tabs (YFS-3172). Same nav as the X workspace, but phone-first: they scroll
   sideways instead of wrapping, so the completion meter stays above the fold at 375px. */
#profileSection .profile-tabs {
  gap: 4px;
  margin: 0 0 16px;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#profileSection .profile-tabs::-webkit-scrollbar { display: none; }
#profileSection .profile-tabs .xpost-tab { flex: 0 0 auto; min-height: 44px; }
/* Profile load failures render here, above the tab panels, so they are visible on
   whichever tab the recruit actually opened. */
.profile-load-alert { margin: 0 0 16px; }
.profile-load-alert[hidden] { display: none; }
.profile-tab-panel.hidden { display: none; }

.xpost-muted-state {
  border: 1px dashed var(--border);
  background: #f8fafc;
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 14px;
  font-size: 13px;
}

.xpost-muted-state.error {
  border-color: #fecaca;
  background: var(--color-bg-error);
  color: #991b1b;
}

.xplans-overview,
.xaudit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.xplans-overview h2,
.xaudit-toolbar h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.xplans-subtitle {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: 13px;
}

.xplans-actions,
.xcontent-studio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xaudit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xplans-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.xplan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.xplan-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}

.xplan-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.xplan-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xplan-empty-state {
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #ffffff;
  padding: 32px 24px;
  color: var(--text-secondary);
  text-align: center;
}

.xplan-empty-state p {
  margin: 0;
  max-width: 48ch;
  font-size: .9375rem;
  line-height: 1.6;
}

.xplan-empty-state > p:first-child {
  color: var(--text);
}

.xplan-empty-alt {
  font-size: .8125rem;
}

.xplan-empty-alt .x-text-button {
  display: inline;
  min-height: 0;
  padding: 0;
  font-size: inherit;
}

.xplan-current-card {
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 18px;
}

.xplan-current-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.xplan-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xplan-current-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.xplan-current-head p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.xplan-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.xplan-stat-row > div {
  display: grid;
  gap: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px;
}

.xplan-stat-row strong {
  color: var(--text);
  font-size: 19px;
}

.xplan-stat-row span {
  color: var(--text-secondary);
  font-size: 11px;
}

.xplan-history {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
}

.xplan-history summary {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.xplan-history-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.xplan-execution-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #0f172a;
  padding: 18px;
  color: #ffffff;
}

.xplan-execution-summary > div:first-child > span {
  display: block;
  margin-bottom: 5px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xplan-execution-summary h3 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
}

.xplan-execution-summary p {
  max-width: 580px;
  margin: 6px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.xplan-execution-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
  min-width: 360px;
}

.xplan-execution-counts > div {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  padding: 9px;
  text-align: center;
}

.xplan-execution-counts strong {
  color: #ffffff;
  font-size: 18px;
}

.xplan-execution-counts span {
  color: #cbd5e1;
  font-size: 10px;
}

.xplan-view-filters {
  margin: 14px 0;
}

/* These are direct children of the legacy auto-fit results grid. They form one
 * vertical execution calendar, so each section must span the grid instead of
 * becoming a separate side-by-side column. */
.xplan-execution-summary,
.xplan-view-filters,
.xplan-timeline {
  grid-column: 1 / -1;
  min-width: 0;
}

.xplan-timeline,
.xplan-day-list {
  display: grid;
  gap: 12px;
}

.xplan-week {
  display: grid;
  gap: 10px;
}

.xplan-week + .xplan-week {
  margin-top: 10px;
}

.xplan-week-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 2px;
}

.xplan-week-heading > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.xplan-week-heading span {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.xplan-week-heading small,
.xplan-week-heading strong {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.xplan-day-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe7f1;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.xplan-day-card.is-today {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.xplan-day-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 16px;
}

.xplan-day-rail span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xplan-day-rail strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.xplan-day-rail small {
  color: var(--text-secondary);
  font-size: 11px;
}

.xplan-day-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.xplan-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xplan-day-head h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.xplan-day-category {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: capitalize;
}

.xplan-copy-block {
  position: relative;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px 112px 12px 13px;
}

.xplan-copy-block > span,
.xplan-prep-grid span,
.xplan-fallback span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xplan-copy-block > div {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xplan-reply-block {
  border-style: dashed;
  background: #fffdf7;
}

.xplan-copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 9px;
  color: #334155;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.xplan-copy-button:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
}

.xplan-prep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.xplan-prep-grid > div {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 12px;
}

.xplan-prep-grid p,
.xplan-fallback p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.xplan-fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  padding: 11px 12px;
}

.xplan-day-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xplan-saved-note {
  color: var(--text-secondary);
  font-size: 11px;
}

@media (max-width: 800px) {
  .xplan-current-head,
  .xplan-execution-summary,
  .xplan-week-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .xplan-stat-row,
  .xplan-execution-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  .xplan-day-card {
    grid-template-columns: 1fr;
  }

  .xplan-day-rail {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 13px;
  }

  .xplan-prep-grid {
    grid-template-columns: 1fr;
  }

  .xplan-copy-block {
    padding: 46px 12px 12px;
  }

  .xplan-copy-button {
    left: 10px;
    right: auto;
  }
}

.xaudit-body {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.xaudit-overview-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.75fr) repeat(3, minmax(220px, 1fr));
  gap: 10px;
}

.xaudit-overall-card,
.xaudit-focus-card,
.xaudit-mini-bio-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.xaudit-overall-card {
  background: #0f172a;
  color: #ffffff;
}

.xaudit-overall-card span,
.xaudit-focus-card span,
.xaudit-mini-bio-card span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.xaudit-overall-card span,
.xaudit-overall-card p {
  color: #cbd5e1;
}

.xaudit-overall-card strong {
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
}

.xaudit-overall-card small {
  font-size: 14px;
  color: #cbd5e1;
}

.xaudit-focus-card strong,
.xaudit-mini-bio-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.xaudit-overall-card p,
.xaudit-focus-card p,
.xaudit-mini-bio-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xaudit-mini-missing {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.35;
}

.xaudit-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.xaudit-metric {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.xaudit-metric span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.xaudit-metric strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.xaudit-metric small,
.xaudit-voice,
.xaudit-unavailable {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xaudit-voice,
.xaudit-unavailable {
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.xaudit-unavailable {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.xaudit-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.xaudit-score-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.xaudit-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.xaudit-score-head strong {
  color: var(--text);
  font-size: 13px;
}

.xaudit-score-head span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.xaudit-score-value {
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}

.xaudit-score-value span {
  color: var(--text-secondary);
  font-size: 12px;
  margin-left: 2px;
}

.xaudit-score-track {
  height: 7px;
  background: var(--color-border-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  width: 100%;
  min-width: 0;
}

.xaudit-score-track div {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

.xaudit-score-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.xaudit-section-block {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.xaudit-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.xaudit-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.xaudit-section-head span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.xaudit-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.xaudit-category-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.xaudit-category-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.xaudit-category-top > div {
  min-width: 0;
}

.xaudit-category-top strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 4px;
}

.xaudit-category-top span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.xaudit-category-score {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.xaudit-category-score small {
  color: var(--text-secondary);
  font-size: 11px;
}

.xaudit-category-reason,
.xaudit-signal-group,
.xaudit-missing-group {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.xaudit-category-reason label,
.xaudit-signal-group label,
.xaudit-missing-group label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.xaudit-category-reason p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xaudit-signal-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.xaudit-chip {
  display: inline-block;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xaudit-chip.muted {
  border-color: var(--color-border-light);
  background: #f8fafc;
  color: var(--text-secondary);
}

.xaudit-missing-group ul {
  margin: 0;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.xaudit-missing-group li + li {
  margin-top: 4px;
}

.xaudit-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.xaudit-next-card {
  border: 1px solid var(--border);
  background: var(--color-bg-subtle);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.xaudit-next-card.high {
  border-left-color: #dc2626;
}

.xaudit-next-card.medium {
  border-left-color: var(--warning);
}

.xaudit-next-card.low {
  border-left-color: var(--success);
}

.xaudit-next-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.xaudit-next-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.xaudit-next-head span {
  flex: 0 0 auto;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  color: var(--text-secondary);
  background: #f8fafc;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* Brief readiness chip colors + hint (YFS-98) */
.xaudit-next-head .xaudit-readiness.ready_now { background: var(--color-bg-success, var(--color-bg-success)); color: #166534; border-color: transparent; }
.xaudit-next-head .xaudit-readiness.needs_media { background: #ffedd5; color: #9a3412; border-color: transparent; }
.xaudit-next-head .xaudit-readiness.needs_confirmation { background: var(--color-bg-info, var(--color-bg-info)); color: var(--primary-dark); border-color: transparent; }
.xaudit-next-readiness-hint { font-size: 12px; color: var(--text-secondary); margin: -2px 0 0; }

/* Overall score plain-language band */
.xaudit-score-band {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: var(--text-secondary);
}
.xaudit-score-band.strong { background: var(--color-bg-success); color: #166534; }
.xaudit-score-band.solid { background: var(--color-bg-info); color: var(--primary-dark); }
.xaudit-score-band.needs-work { background: #ffedd5; color: #9a3412; }
.xaudit-score-band.early { background: #fee2e2; color: #991b1b; }

/* Reversible dismissed briefs */
.xaudit-dismissed-block { margin-top: 6px; }
.xaudit-dismissed-toggle {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.xaudit-dismissed-toggle:hover { color: var(--yfs-blue, var(--primary-dark)); border-color: var(--yfs-blue, var(--primary-dark)); }
.xaudit-dismissed-list { display: grid; gap: 8px; margin-top: 10px; }
.xaudit-dismissed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.xaudit-dismissed-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.xaudit-dismissed-meta strong { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xaudit-dismissed-meta span { font-size: 11px; color: var(--text-secondary); }

.xaudit-next-card p,
.xaudit-next-missing,
.xaudit-brief-prompt {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xaudit-brief-prompt {
  border-top: 1px solid #eef2f7;
  padding-top: 8px;
}

.xaudit-caption-seed {
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xaudit-caption-seed label {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.xaudit-next-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xaudit-next-meta span {
  color: var(--text-secondary);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.xaudit-next-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 2px;
}

.xaudit-next-actions .btn-primary,
.xaudit-next-actions .btn-secondary {
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
  justify-content: center;
}

.xaudit-performance-list {
  display: grid;
  gap: 8px;
}

.xaudit-performance-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.xaudit-performance-row strong {
  color: var(--text);
  font-size: 12px;
}

.xaudit-performance-row p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xaudit-performance-metrics {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.xaudit-performance-metrics small {
  color: #94a3b8;
}

.xaudit-recs {
  display: grid;
  gap: 8px;
}

.xaudit-recs h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.xaudit-rec {
  border: 1px solid var(--border);
  background: var(--color-bg-subtle);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.xaudit-rec.high {
  border-left-color: #dc2626;
}

.xaudit-rec.medium {
  border-left-color: var(--warning);
}

.xaudit-rec strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 4px;
}

.xaudit-rec p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xoauth-events-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  margin-top: 14px;
}

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

.xoauth-events-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.xoauth-events-header p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.xoauth-events-list {
  display: grid;
  gap: 8px;
}

.xoauth-event-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.xoauth-event-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.xoauth-event-main strong {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.xoauth-event-main p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.xoauth-event-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--color-border-light);
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.xoauth-event-pill.success {
  background: var(--color-bg-success);
  color: #166534;
}

#postingDraftLimit.danger { color: #EA384C; font-weight: 600; }
.posting-option-quality { margin: 4px 0 0; font-size: 0.85em; opacity: 0.8; }

.xoauth-event-pill.danger {
  background: #fee2e2;
  color: #991b1b;
}

.xoauth-event-pill.info {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.xoauth-event-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* Month Navigation - centered */
.xpost-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.xpost-month-label {
  font-size: 20px;
  font-weight: 600;
  min-width: 180px;
  text-align: center;
  color: var(--text);
}

.xpost-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.xpost-nav-btn:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 5%, transparent);
}

/* Calendar Container */
.xpost-calendar {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.xpost-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.xpost-day-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 12px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.xpost-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Calendar Day Cells */
.xpost-day-cell {
  min-height: 110px;
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  position: relative;
}

.xpost-day-cell:nth-child(7n) {
  border-right: none;
}

.xpost-day-cell:hover {
  background: color-mix(in oklch, var(--primary) 4%, transparent);
}

.xpost-day-cell.other-month {
  background: var(--bg);
  opacity: 0.5;
}

.xpost-day-cell.other-month:hover {
  opacity: 0.7;
}

.xpost-day-cell.today {
  background: color-mix(in oklch, var(--primary) 10%, transparent);
}

.xpost-day-cell.past {
  background: var(--bg);
}

.xpost-day-number {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Today used to be marked with a 3px left stripe. Calendars mark today by
   ringing the date itself, which reads immediately and does not look like the
   accent stripe removed everywhere else. */
.xpost-day-cell.today .xpost-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.xpost-day-cell.other-month .xpost-day-number {
  color: var(--muted);
}

/* Post Pills */
.xpost-posts-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xpost-post-pill {
  font-size: 12px;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  overflow: hidden;
}

.xpost-pill-status {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
  opacity: 0.95;
}

.xpost-pill-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xpost-post-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Status-distinct treatments (independent of the category color). */
.xpost-post-pill.status-draft { opacity: 0.92; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.xpost-post-pill.status-scheduled { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.xpost-post-pill.status-publishing { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); animation: xpostPulse 1.4s ease-in-out infinite; }
.xpost-post-pill.is-auto { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3px var(--primary-dark); }
.xpost-post-pill.status-failed { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3px #991b1b; }
@keyframes xpostPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Calendar toolbar: status filter + legend (YFS-92) */
.xpost-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.xpost-filter-group {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.xpost-filter-btn {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.xpost-filter-btn:hover { color: var(--text); }
.xpost-filter-btn.active { background: var(--card); color: var(--yfs-blue, var(--primary-dark)); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.xpost-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.xpost-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.xpost-legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--text-secondary);
}
.xpost-legend-dot.status-scheduled { background: var(--primary); }
.xpost-legend-dot.status-posted { background: #166534; }
.xpost-legend-dot.status-failed { background: #991b1b; }
.xpost-legend-dot.is-auto { background: var(--primary-dark); }

.xpost-calendar-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

/* Unscheduled drafts tray */
.xpost-drafts-tray {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg);
}
.xpost-drafts-tray.hidden { display: none; }
.xpost-drafts-tray-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.xpost-drafts-tray-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.xpost-drafts-tray-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.xpost-drafts-tray-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}

/* Day cell: a bit taller on wide viewports so pills can show two lines */
@media (min-width: 1180px) {
  .xpost-day-cell {
    min-height: 130px;
  }
}

/* Mobile: tighten day cells and switch overflowing pills to colored dots so
   the calendar stays scannable at 390px without horizontal scroll */
@media (max-width: 600px) {
  .xpost-day-cell {
    min-height: 64px;
    padding: 4px;
  }
  .xpost-day-num {
    font-size: 12px;
  }
  .xpost-post-pill {
    font-size: 10px;
    padding: 2px 6px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  /* If a day has more than one post, hide pill text and leave the colored dot */
  .xpost-day-cell .xpost-post-pill + .xpost-post-pill {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    margin-top: 2px;
    overflow: hidden;
    color: transparent;
    text-indent: -9999px;
  }
}

/* Category Colors */
.xpost-post-pill.commitment { background: var(--success); }
.xpost-post-pill.camp_showcase { background: #0369a1; }
.xpost-post-pill.visit_recap { background: var(--primary); }
.xpost-post-pill.training { background: var(--warning); }
.xpost-post-pill.nutrition { background: #16a34a; }
.xpost-post-pill.recovery { background: #0f766e; }
.xpost-post-pill.coach_shoutout { background: #8b5cf6; }
.xpost-post-pill.recruitment_update { background: var(--error); }
.xpost-post-pill.offer_announcement { background: #10b981; }
.xpost-post-pill.game_day { background: #f97316; }
.xpost-post-pill.game_recap { background: #ea580c; }
.xpost-post-pill.film_highlight { background: #0ea5e9; }
.xpost-post-pill.recruiting_journey { background: #dc2626; }
.xpost-post-pill.academics { background: var(--primary-dark); }
.xpost-post-pill.measurables { background: #0891b2; }
.xpost-post-pill.character { background: #7c3aed; }
.xpost-post-pill.community_service { background: var(--color-text-success); }
.xpost-post-pill.football_iq { background: #334155; }
.xpost-post-pill.motivational { background: #06b6d4; }
.xpost-post-pill.custom { background: var(--text-secondary); }
.xpost-post-pill.status-posted { background: #166534; }
.xpost-post-pill.status-failed { background: #991b1b; }

/* More posts indicator */
.xpost-more-indicator {
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 4px;
  background: var(--bg);
  border-radius: 3px;
  text-align: center;
}

/* Legacy calendar classes - keep for backwards compat */
.calendar-day-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 4px;
}

.calendar-day {
  min-height: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.calendar-day:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 3%, transparent);
}

.calendar-day.other-month {
  opacity: 0.4;
}

.calendar-day.today {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 8%, transparent);
}

.calendar-day-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.calendar-day.today .calendar-day-number {
  color: var(--primary);
}

.calendar-post-item {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.calendar-post-item.commitment { background: var(--success); }
.calendar-post-item.camp_showcase { background: #0369a1; }
.calendar-post-item.visit_recap { background: var(--primary); }
.calendar-post-item.training { background: var(--warning); }
.calendar-post-item.nutrition { background: #16a34a; }
.calendar-post-item.recovery { background: #0f766e; }
.calendar-post-item.coach_shoutout { background: #8b5cf6; }
.calendar-post-item.recruitment_update { background: var(--error); }
.calendar-post-item.offer_announcement { background: #10b981; }
.calendar-post-item.game_day { background: #f97316; }
.calendar-post-item.game_recap { background: #ea580c; }
.calendar-post-item.film_highlight { background: #0ea5e9; }
.calendar-post-item.recruiting_journey { background: #dc2626; }
.calendar-post-item.motivational { background: #06b6d4; }
.calendar-post-item.academics { background: var(--primary-dark); }
.calendar-post-item.measurables { background: #0891b2; }
.calendar-post-item.character { background: #7c3aed; }
.calendar-post-item.community_service { background: var(--color-text-success); }
.calendar-post-item.football_iq { background: #334155; }
.calendar-post-item.custom { background: var(--text-secondary); }

.calendar-post-item:hover {
  opacity: 0.85;
}

/* Template Panel Tabs */
.template-tabs {
  gap: 0;
}

.template-tab {
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.template-tab:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--primary) 5%, transparent);
}

.template-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Template Cards */
.template-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.template-card:hover {
  border-color: var(--primary);
}

.template-card-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 12px;
}

.template-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-card-stats {
  font-size: 11px;
  color: var(--muted);
}

.template-card-stats span {
  margin-right: 12px;
}

.template-use-btn {
  padding: 6px 14px;
  font-size: 12px;
}

/* X Post Preview */
/* Live X post preview (YFS-94) */
.xpost-preview {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.xpost-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.xpost-preview-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #0f172a;
}
.xpost-preview-identity { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.xpost-preview-name { font-weight: 700; font-size: 14px; color: var(--text); }
.xpost-preview-handle { font-size: 13px; color: var(--text-secondary); }
.xpost-preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 15px;
  color: var(--text);
}
.xpost-preview-text.is-placeholder { color: var(--text-secondary); font-style: italic; }
.xpost-preview-link { color: #1d9bf0; }
.xpost-preview-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
}
.xpost-preview-media:empty { display: none; }
.xpost-preview-media.count-1 { grid-template-columns: 1fr; }
.xpost-preview-media-item {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: var(--bg);
}
.xpost-preview-link-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.xpost-preview-link-hint.hidden { display: none; }

/* Media attachment list with thumbnails */
.xpost-media-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.xpost-media-item + .xpost-media-item { margin-top: 6px; }
.xpost-media-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
}
.xpost-media-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.xpost-media-meta strong { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpost-media-meta span { font-size: 11px; color: var(--text-secondary); }
.xpost-media-remove {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.xpost-media-remove:hover { color: #b42318; border-color: #b42318; }

#xpostEditorModal {
  padding: 16px;
}

#xpostEditorModal .modal-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px !important;
  max-height: min(92vh, 920px);
  max-height: min(92dvh, 920px);
}

#xpostEditorModal .modal-body {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

#xpostEditorModal .modal-header {
  align-items: flex-start;
}

.xpost-editor-heading {
  min-width: 0;
}

.xpost-editor-context {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.xpost-editor-context.hidden {
  display: none;
}

.xpost-stats-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: var(--color-bg-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.xpost-stats-source.hidden { display: none; }
.xpost-stats-source.is-error { color: var(--error-strong); }
.xpost-stats-source-label {
  color: var(--color-text-darkest);
  font-weight: 700;
}
.xpost-stats-source-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.xpost-stats-source a {
  color: var(--primary-dark);
  font-weight: 650;
  text-underline-offset: 2px;
}
.xpost-stats-source a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.xpost-editor-save-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.xpost-editor-save-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #94a3b8;
}

.xpost-editor-save-state.is-dirty { color: #9a3412; }
.xpost-editor-save-state.is-dirty::before { background: #f97316; }
.xpost-editor-save-state.is-saving { color: #1d4ed8; }
.xpost-editor-save-state.is-saving::before {
  background: #3b82f6;
  animation: xpost-save-pulse 900ms ease-in-out infinite alternate;
}
.xpost-editor-save-state.is-saved { color: #166534; }
.xpost-editor-save-state.is-saved::before { background: #22c55e; }
.xpost-editor-save-state.is-error { color: #b42318; }
.xpost-editor-save-state.is-error::before { background: #ef4444; }

@keyframes xpost-save-pulse {
  from { opacity: 0.35; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.1); }
}

.xpost-media-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.xpost-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-dark);
  font-size: 13px;
  font-weight: 500;
}

.xpost-media-picker {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 13px;
  border: 1px dashed #b8c6d9;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.xpost-media-picker:hover,
.xpost-media-picker:focus-within {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.xpost-media-picker-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: #e0ecff;
  color: var(--primary);
  font-size: 22px;
  line-height: 1;
}

.xpost-media-picker > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xpost-media-picker strong {
  color: var(--text);
  font-size: 13px;
}

.xpost-media-picker small {
  color: var(--text-secondary);
  font-size: 11px;
}

.xpost-editor-footer {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.xpost-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.xpost-editor-utilities,
.xpost-editor-commit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xpost-editor-commit-actions {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.xpost-editor-footer .xpost-action-btn,
.xpost-editor-footer .xpost-footer-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

.xpost-editor-footer .xpost-save-draft-btn {
  min-width: 128px;
}

.xpost-editor-footer .btn-icon {
  flex: 0 0 auto;
}

/* Char Counter — circular progress ring + numeric */
.xpost-char-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease-out;
}

.xpost-char-text {
  letter-spacing: 0.01em;
}

.xpost-char-ring {
  flex-shrink: 0;
  transform: rotate(-90deg); /* start ring at 12 o'clock */
}

.xpost-char-ring-track {
  stroke: rgba(148, 163, 184, 0.25);
}

.xpost-char-ring-progress {
  stroke: var(--primary);
  stroke-dasharray: 56.55;        /* 2 * PI * 9, default fallback */
  stroke-dashoffset: 56.55;
  transition: stroke-dashoffset 200ms ease-out, stroke 200ms ease-out;
}

.xpost-char-counter.caution {
  color: var(--text-secondary);
}
.xpost-char-counter.caution .xpost-char-ring-progress {
  stroke: var(--warning);
}

.xpost-char-counter.warning {
  color: var(--warning);
}
.xpost-char-counter.warning .xpost-char-ring-progress {
  stroke: var(--warning);
}
.xpost-char-counter.warning .xpost-char-ring {
  width: 26px;
  height: 26px; /* subtle bump as the user nears the limit */
}

.xpost-char-counter.danger {
  color: var(--error);
  font-weight: 700;
}
.xpost-char-counter.danger .xpost-char-ring-progress {
  stroke: var(--error);
}
.xpost-char-counter.danger .xpost-char-ring {
  width: 26px;
  height: 26px;
  animation: xpost-char-shake 0.4s ease-out;
}

@keyframes xpost-char-shake {
  0%, 100% { transform: rotate(-90deg) translateX(0); }
  25% { transform: rotate(-90deg) translateX(2px); }
  75% { transform: rotate(-90deg) translateX(-2px); }
}

.xpost-connection-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}

.xpost-connection-status.connected {
  background: var(--color-bg-success);
  color: #166534;
  border-color: #bbf7d0;
}

.xpost-connection-status.disconnected {
  background: #f8fafc;
  color: #64748b;
}

.xcontent-studio {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.xcontent-studio.hidden {
  display: none;
}

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

.xcontent-studio-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.xcontent-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.xcontent-builder {
  display: grid;
  gap: 12px;
}

.xcontent-section {
  min-width: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

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

.xcontent-section-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

.xcontent-refresh-btn {
  padding: 7px 11px;
  font-size: 12px;
}

.xcontent-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.xcontent-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.xcontent-field span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.xcontent-field input,
.xcontent-field select,
.xcontent-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  padding: 9px 11px;
  min-height: 40px;
}

.xcontent-field textarea {
  resize: vertical;
  min-height: 78px;
}

.xcontent-field-wide {
  grid-column: span 2;
}

.xcontent-field-full {
  grid-column: 1 / -1;
}

.xcontent-plan-fields {
  align-items: start;
}

/* YFS-2532: tag handles */
.xcontent-tag-handles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
}
.xcontent-tag-handles-empty {
  color: var(--text-secondary);
  font-size: 12px;
}
.xcontent-tag-handle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-muted, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px 2px 6px;
  font-size: 12px;
}
.xcontent-tag-handle-kind {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.xcontent-tag-handle-label {
  color: var(--text-secondary);
}
.xcontent-tag-handle-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 0 0 2px;
  font-size: 14px;
  line-height: 1;
}
.xcontent-tag-handle-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.xcontent-tag-handle-add input[type="text"] {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}
.xcontent-tag-handle-add select {
  max-width: 110px;
}
/* End tag handles */

.xcontent-profile-details {
  padding: 0;
  overflow: hidden;
}

/* Voice profile editor (YFS-99) */
.xcontent-voice-grid { padding: 0 12px 4px; }
.xcontent-voice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 12px 14px;
}
.xvoice-profile-status { font-size: 12px; color: var(--text-secondary); margin-right: auto; }

.xcontent-profile-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.xcontent-profile-details summary::-webkit-details-marker {
  display: none;
}

.xcontent-profile-details summary::after {
  content: "+";
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
}

.xcontent-profile-details[open] summary {
  border-bottom: 1px solid var(--color-border-light);
}

.xcontent-profile-details[open] summary::after {
  content: "-";
}

.xcontent-profile-details summary small {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.xcontent-profile-grid {
  padding: 12px;
}

.xcontent-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.xcontent-results.hidden {
  display: none;
}

.xcontent-summary,
.xcontent-loading,
.xcontent-empty,
.xcontent-error,
.xcontent-loading-state,
.xcontent-results > .error-state {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: 13px;
}

.xcontent-loading-state {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.xcontent-loading-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.xcontent-loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  animation: xcontent-spin 0.8s linear infinite;
}

@keyframes xcontent-spin {
  to { transform: rotate(360deg); }
}

.xcontent-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.xcontent-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: #ffffff;
}

.xcontent-error {
  color: var(--error);
}

.xcontent-warning {
  grid-column: 1 / -1;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  padding: 10px 12px;
}

.xcontent-preflight {
  grid-column: 1 / -1;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

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

.xcontent-preflight-header strong {
  color: var(--text);
  font-size: 14px;
}

.xcontent-preflight-header span,
.xcontent-muted {
  color: var(--text-secondary);
  font-size: 12px;
}

.xcontent-preflight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.xcontent-preflight-block {
  min-width: 0;
}

.xcontent-preflight-block h4 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.xcontent-preflight-block ul,
.xcontent-missing-list,
.xcontent-source-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.xcontent-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xcontent-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #edf7f0;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
}

.xcontent-opportunity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.xcontent-opportunity strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 2px;
}

.xcontent-opportunity p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.xcontent-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.xcontent-result-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.xcontent-result-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 8px;
}

.xcontent-result-section-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.xcontent-result-section-header p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.xcontent-result-section-header > span {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 800;
}

.xcontent-week-group {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.xcontent-week-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.xcontent-week-num {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.xcontent-week-num .xcontent-week-of {
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
}

.xcontent-week-range {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.xcontent-week-count {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--color-bg-muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.xcontent-week-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

@media (max-width: 600px) {
  .xcontent-week-header {
    padding: 4px 4px 8px;
    gap: 8px;
  }
  .xcontent-week-num { font-size: 14px; }
  .xcontent-week-range { font-size: 11px; flex-basis: 100%; order: 3; }
  .xcontent-week-count { order: 2; }
}

/* Rewrite diff view — staged before/after with Accept/Discard */
.xcontent-card-diff {
  background: #fffbeb;
  border-color: #fde68a;
}

.xcontent-diff-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--warning);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.xcontent-diff-pane {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #ffffff;
}

.xcontent-diff-pane-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.xcontent-diff-original .xcontent-diff-pane-text {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(156, 163, 175, 0.5);
  font-size: 13px;
  line-height: 1.45;
}

.xcontent-diff-proposed {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 4%, transparent);
}

.xcontent-diff-proposed .xcontent-diff-pane-label {
  color: var(--primary);
}

.xcontent-diff-proposed .xcontent-diff-pane-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.xcontent-card.ready_now {
  border-color: #bbf7d0;
  background: #f8fffb;
}

.xcontent-card.needs_media {
  border-color: #fed7aa;
  background: #fffaf4;
}

.xcontent-card.needs_confirmation {
  border-color: #bfdbfe;
  background: #f7fbff;
}

.xcontent-card-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.xcontent-card-header strong {
  font-size: 13px;
  color: var(--text);
}

.xcontent-week-label {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.xcontent-card-badges > span {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--color-border-light);
  border-radius: 999px;
  padding: 3px 7px;
}

.xcontent-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.xcontent-card-header .xcontent-readiness,
.xcontent-readiness {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
}

.xcontent-readiness.ready_now {
  background: var(--color-bg-success);
  color: #166534;
}

.xcontent-readiness.needs_media {
  background: #ffedd5;
  color: #9a3412;
}

.xcontent-readiness.needs_confirmation {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

/* Readiness "what unblocks it" hint + plan helpers (YFS-96) */
.xcontent-readiness-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 2px 0 6px;
}
.xcontent-section-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.xcontent-plan-summary {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.xpost-readiness-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.xpost-readiness-note.hidden { display: none; }
.xpost-readiness-hint { font-size: 12px; color: var(--text-secondary); }

.xcontent-card-content,
.xcontent-card-idea {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.xcontent-quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
}

.xcontent-quality strong {
  font-size: 11px;
}

.xcontent-quality.strong {
  background: var(--color-bg-success);
  color: #166534;
}

.xcontent-quality.good {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.xcontent-quality.review {
  background: #ffedd5;
  color: #9a3412;
}

.xcontent-quality.work {
  background: #fee2e2;
  color: #991b1b;
}

.xcontent-quality-issues {
  color: #9a3412;
  font-size: 12px;
  line-height: 1.35;
  margin: -2px 0 8px;
}

.xcontent-card-meta,
.xcontent-rationale {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}

.xcontent-action-item {
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 8px;
  margin-bottom: 8px;
}

.xcontent-source-list {
  color: #475569;
}

.xcontent-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .xcontent-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .xcontent-studio {
    padding: 12px;
  }

  .xcontent-field-grid {
    grid-template-columns: 1fr;
  }

  .xcontent-field-wide {
    grid-column: 1;
  }

  .xcontent-field-full {
    grid-column: 1;
  }

  .xcontent-actions {
    justify-content: stretch;
  }

  .xcontent-actions .btn-primary {
    width: 100%;
  }
}

.xpost-media-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.xpost-media-empty {
  color: var(--text-secondary);
  font-size: 12px;
}

.xpost-media-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}

.xpost-media-item strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.xpost-media-item span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.xpost-media-item button {
  border: 0;
  background: transparent;
  color: var(--error);
  cursor: pointer;
  font-size: 12px;
}

.xpost-approval-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.xpost-publish-status {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
}

.xpost-publish-status.hidden {
  display: none;
}

.xpost-status-note {
  display: inline-block;
  margin-left: 8px;
  color: #166534;
  font-size: 12px;
}

.xpost-error-text {
  color: var(--error);
  margin-top: 4px;
}

/* Mobile Responsive - X Posts Calendar */
@media (max-width: 1024px) {
  .xpost-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .xpost-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  
  .xpost-admin-inline {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .xaudit-overview-grid,
  .xaudit-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .xpost-stats-source {
    grid-template-columns: 1fr;
  }

  .xpost-editor-footer {
    grid-template-columns: 1fr;
  }

  .xpost-editor-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .xpost-editor-utilities,
  .xpost-editor-commit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .xpost-editor-commit-actions {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .xpost-editor-footer .xpost-action-btn,
  .xpost-editor-footer .xpost-footer-cancel,
  .xpost-editor-footer .xpost-save-draft-btn {
    width: 100%;
    min-width: 0;
  }

  .xpost-editor-footer .xpost-footer-cancel {
    order: 2;
  }

  .xpost-day-cell {
    min-height: 80px;
    padding: 6px;
  }
  
  .xpost-day-number {
    font-size: 11px;
  }
  
  .xpost-post-pill {
    font-size: 9px;
    padding: 3px 5px;
  }
  
  .xpost-more-indicator {
    font-size: 9px;
  }
  
  .xpost-month-label {
    font-size: 16px;
    min-width: 140px;
  }
  
  .calendar-day {
    min-height: 70px;
    padding: 4px;
  }
  
  .calendar-day-number {
    font-size: 11px;
  }
  
  .calendar-post-item {
    font-size: 9px;
    padding: 2px 4px;
  }
  
  .highlight-type-toggle {
    flex-direction: column;
  }

  .xoauth-events-header,
  .xoauth-event-row,
  .xaudit-section-head,
  .xaudit-performance-row {
    flex-direction: column;
    align-items: stretch;
  }

  .xoauth-event-meta,
  .xaudit-performance-metrics {
    align-items: flex-start;
    text-align: left;
    white-space: normal;
  }

  .xaudit-overview-grid {
    grid-template-columns: 1fr;
  }

  .xaudit-next-grid {
    grid-template-columns: 1fr;
  }

  .xaudit-next-actions {
    grid-template-columns: 1fr;
  }

  .xaudit-next-actions .btn-primary {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .xpost-editor-utilities,
  .xpost-editor-commit-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xpost-day-cell {
    min-height: 60px;
    padding: 4px;
  }
  
  .xpost-post-pill {
    font-size: 8px;
    padding: 2px 4px;
  }
  
  .xpost-day-label {
    font-size: 10px;
    padding: 8px 4px;
  }
  
}

/* ==========================================
   QUESTIONNAIRES SECTION
   ========================================== */

/* Page Header Actions */
.page-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Stats Bar */
/* Eleven fixed columns on one row forced every card to roughly 100px, which
   wrapped "Ready to send" onto three lines, made every card as tall as the
   worst label, and overflowed the container horizontally. auto-fit wraps
   instead of overflowing and lets the cards find a readable width. */
.questionnaire-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.q-stat-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  /* Left-aligned and tighter: centred text in a narrow card wraps badly and
     reads as eleven identical tiles rather than a scannable row of counts. */
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.q-stat-card .q-stat-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Status colour is carried by a dot beside the label, NOT a left border stripe.
   `border-left: Npx solid <colour>` on cards is banned in .impeccable.md — it is
   the single most recognisable AI-dashboard tell, and there were eleven of them
   stacked in one row here. */
.q-stat-card .q-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
}

.q-stat-card .q-stat-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--q-dot, var(--muted));
  flex-shrink: 0;
}

.q-stat-card.ready { --q-dot: var(--success); }

.q-stat-card.captcha { --q-dot: var(--warning); }

.q-stat-card.requires-account { --q-dot: oklch(0.55 0.19 5); }

.q-stat-card.processing { --q-dot: var(--info); }

.q-stat-card.queued { --q-dot: var(--warning); }

.q-stat-card.pending { --q-dot: var(--info); }

.q-stat-card.needs-review { --q-dot: var(--warning); }

.q-stat-card.completed { --q-dot: var(--success); }

.q-stat-card.failed { --q-dot: var(--error); }

.q-stat-card.dry-run { --q-dot: oklch(0.55 0.15 285); }

.q-stat-card.disabled { --q-dot: var(--muted); }

.q-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}

.q-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Filter Bar */
.questionnaire-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.questionnaire-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.questionnaire-filters .filter-group.search {
  flex: 1;
  min-width: 200px;
}

.questionnaire-filters label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.questionnaire-filters select,
.questionnaire-filters input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

.questionnaire-filters select:focus,
.questionnaire-filters input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
}

/* Tab Toggle */
.questionnaire-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  width: fit-content;
}

.q-tab-btn {
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

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

.q-tab-btn.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.q-tab-content.hidden {
  display: none;
}

/* Table Styles */
.questionnaire-table-container {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  /* `overflow: hidden` clipped a 7-column table instead of letting it scroll,
     so on a narrow window the Actions column was simply unreachable and the
     section pushed the page sideways. Scroll inside the container instead. */
  overflow-x: auto;
  overflow-y: hidden;
}

.q-show-more-row td {
  text-align: center;
  padding: var(--space-md);
  background: var(--color-bg-subtle);
}

.q-show-more-count {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.questionnaire-table {
  width: 100%;
  border-collapse: collapse;
}

.questionnaire-table th {
  background: var(--bg);
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.questionnaire-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
}

.questionnaire-table tbody tr:last-child td {
  border-bottom: none;
}

.questionnaire-table tbody tr:hover {
  background: var(--bg);
}

.q-checkbox-col {
  width: 48px;
  text-align: center;
}

.questionnaire-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* Status Badges */
.q-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.q-status.ready {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.q-status.captcha {
  background: var(--color-bg-warning);
  color: #b45309;
}

.q-status.pending {
  background: #e0f2fe;
  color: #0369a1;
}

.q-status.queued {
  background: var(--color-bg-warning);
  color: #b45309;
}

.q-status.in_progress,
.q-status.in-progress {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.q-status.needs-review {
  background: #fef3c7;
  color: #92400e;
}

.q-status.completed,
.q-status.submitted,
.q-status.success {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.q-status.failed,
.q-status.error {
  background: var(--color-bg-error);
  color: #b91c1c;
}

.q-status.dry_run,
.q-status.dry-run {
  background: #e0e7ff;
  color: #4338ca;
}

.q-status.disabled {
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}

.q-status.requires-account {
  background: #fce7f3;
  color: #be185d;
}

.q-status.no-form {
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}

/* Platform Badge */
.q-platform {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-bg-muted);
  color: var(--color-text-dark);
}

.q-platform.jumpforward {
  background: var(--color-bg-info);
  color: #1e40af;
}

.q-platform.sidearm {
  background: #fce7f3;
  color: #9d174d;
}

.q-platform.arms {
  background: #d1fae5;
  color: #065f46;
}

.q-platform.fieldlevel {
  background: var(--color-bg-warning);
  color: #92400e;
}

.q-platform.frontrush {
  background: #ede9fe;
  color: #5b21b6;
}

/* Action Buttons */
.q-actions {
  display: flex;
  gap: 8px;
}

.q-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.q-btn-preview {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.q-btn-preview:hover {
  background: var(--card);
  border-color: var(--primary);
  color: var(--primary);
}

.q-btn-link {
  background: transparent;
  color: var(--primary);
  text-decoration: none;
}

.q-btn-link:hover {
  text-decoration: underline;
}

/* Loading Row */
.loading-row {
  text-align: center;
  padding: 40px !important;
  color: var(--text-secondary);
}

/* Empty State */
.submission-history .empty-state {
  text-align: center;
  padding: 60px 20px;
}

.submission-history .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.submission-history h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text);
}

.submission-history p {
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
}

/* History List */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
}

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

.history-item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.history-item-time {
  font-size: 13px;
  color: var(--text-secondary);
}

.history-item-schools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-school-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 20px;
  font-size: 13px;
}

.history-school-badge.success {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-school-badge.completed {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-school-badge.ready {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-school-badge.pending {
  background: var(--color-bg-warning);
  color: #b45309;
}

.history-school-badge.queued {
  background: var(--color-bg-warning);
  color: #b45309;
}

.history-school-badge.in_progress,
.history-school-badge.in-progress {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.history-school-badge.captcha {
  background: var(--color-bg-warning);
  color: var(--color-text-warning);
}

.history-school-badge.failed,
.history-school-badge.error {
  background: #fee2e2;
  color: #b91c1c;
}

.history-school-badge.disabled,
.history-school-badge.no-form,
.history-school-badge.unavailable,
.history-school-badge.unsupported,
.history-school-badge.requires-account {
  background: var(--color-bg-muted);
  color: var(--color-text-dark);
}

.history-school-badge.submitted {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-school-badge.dry_run,
.history-school-badge.dry-run {
  background: #e0e7ff;
  color: #4338ca;
}

.history-school-badge.needs-review {
  background: #fef3c7;
  color: #92400e;
}

.history-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
}

.history-status-badge.queued {
  background: var(--color-bg-warning);
  color: #b45309;
}

.history-status-badge.pending {
  background: #e0f2fe;
  color: #0369a1;
}

.history-status-badge.ready {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-status-badge.captcha {
  background: var(--color-bg-warning);
  color: var(--color-text-warning);
}

.history-status-badge.disabled,
.history-status-badge.no-form,
.history-status-badge.unavailable,
.history-status-badge.unsupported,
.history-status-badge.requires-account {
  background: var(--color-bg-muted);
  color: var(--color-text-dark);
}

.history-status-badge.in_progress,
.history-status-badge.in-progress {
  background: var(--color-bg-info);
  color: var(--primary-dark);
}

.history-status-badge.completed {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-status-badge.submitted,
.history-status-badge.success {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.history-status-badge.needs-review {
  background: #fef3c7;
  color: #92400e;
}

.history-status-badge.failed {
  background: #fee2e2;
  color: #b91c1c;
}

.history-status-badge.dry_run,
.history-status-badge.dry-run {
  background: #e0e7ff;
  color: #4338ca;
}

.history-progress {
  position: relative;
  height: 24px;
  background: var(--bg);
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
}

.history-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: 12px;
  transition: width 0.5s ease;
}

.history-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  z-index: 1;
}

.history-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.history-review-notes {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fefce8;
  color: #854d0e;
  font-size: 13px;
  line-height: 1.4;
}

.stat-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.stat-badge.total {
  background: var(--bg);
  color: var(--text-secondary);
}

.stat-badge.success {
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.stat-badge.failed {
  background: #fee2e2;
  color: #b91c1c;
}

.stat-badge.pending {
  background: #fef3c7;
  color: #92400e;
}

.history-job-id {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: monospace;
}

/* Preview Modal */
.q-preview-modal {
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow: auto;
}

/* Submission Preview Modal */
.q-submit-preview-modal {
  width: 90%;
  max-width: 750px;
  max-height: 85vh;
  overflow: auto;
}

.q-preview-section {
  margin-bottom: 20px;
}

.q-preview-section h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.q-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.q-preview-field {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.q-preview-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.q-preview-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}

.q-preview-value-multiline {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
}

.q-preview-value.q-preview-missing {
  color: #b45309;
  font-style: italic;
  font-size: 13px;
}

.q-preview-warning {
  background: var(--color-bg-warning);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.4;
}

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

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

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

.modal-body {
  padding: 24px;
}

/* Field Preview */
.field-preview-section {
  margin-bottom: 24px;
}

.field-preview-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.field-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
}

.field-name {
  font-size: 14px;
  color: var(--text);
}

.field-type {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--card);
  padding: 4px 8px;
  border-radius: 4px;
}

.field-required {
  color: var(--error);
  font-weight: 600;
  margin-left: 4px;
}

/* Modal Base */
.modal.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .questionnaire-stats {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  .questionnaire-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .q-stat-card {
    padding: 16px;
  }

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

  .questionnaire-filters {
    flex-direction: column;
  }

  .questionnaire-filters .filter-group {
    min-width: 100%;
  }

  .page-header-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .page-header-actions button {
    width: 100%;
  }

  .questionnaire-table-container {
    overflow-x: auto;
  }

  .questionnaire-table {
    min-width: 800px;
  }
}


/* ========================================
   AI DRAFT SUGGESTIONS (Admin Only)
   ======================================== */

/* Draft Reply Button */
.btn-draft-reply {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  border-radius: 8px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.btn-draft-reply:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1e40af 100%);
  border-color: color-mix(in oklch, var(--primary) 50%, transparent);
  color: #fff;
  transform: translateY(-1px);
}

.btn-draft-reply:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.btn-draft-reply.hidden {
  display: none;
}

.coach-assist-header-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Draft Modal Content */
.draft-modal-content {
  background: #ffffff;
  border: 1px solid var(--color-border-light);
  color: var(--color-text-darkest);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.coach-assistant-modal {
  width: min(820px, calc(100vw - 32px));
  max-width: 820px;
  overflow: hidden;
}

.coach-assistant-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  color: var(--color-text-darkest);
}

.coach-assistant-header h3 {
  color: var(--color-text-darkest) !important;
  font-size: 18px !important;
  letter-spacing: 0;
}

.coach-assistant-header svg {
  color: var(--primary-dark);
}

.coach-assistant-header .modal-close {
  color: var(--text-secondary);
  background: transparent;
}

.coach-assistant-header .modal-close:hover {
  color: var(--color-text-darkest);
  background: var(--color-bg-muted);
}

.draft-modal-content .modal-body {
  max-height: 68vh;
  overflow-y: auto;
  background: #f8fafc;
}

.coach-assistant-footer {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: #ffffff;
}

.coach-assistant-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.coach-assistant-context,
.coach-assistant-thread-source,
.coach-assistant-result {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.coach-assistant-context {
  padding: 14px 16px;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
  background: var(--color-bg-info-soft);
  border-color: #bfdbfe;
}

.coach-assistant-context strong {
  display: block;
  color: var(--color-text-darkest);
  font-size: 15px;
  margin-bottom: 4px;
}

.coach-assistant-thread-source {
  padding: 12px 14px;
  max-height: 150px;
  overflow: auto;
}

.coach-assistant-thread-source p,
.coach-assistant-result p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

.coach-assistant-textarea {
  min-height: 130px;
  resize: vertical;
  color: var(--color-text-darkest);
  background: #ffffff;
  border-color: #cbd5e1;
  font-size: 15px;
  line-height: 1.55;
}

.coach-assistant-textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

.coach-assistant-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #475569;
  font-size: 13px;
}

.coach-assistant-image-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.coach-assistant-image-preview.hidden {
  display: none;
}

.coach-assistant-image-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0f172a;
  font-size: 12px;
}

.coach-assistant-image-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-assistant-image-chip button {
  border: 0;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

.coach-assistant-result-label {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-assistant-result {
  padding: 16px;
  background: #ffffff;
}

.coach-assistant-result.hidden {
  display: none;
}

.coach-assistant-result-block {
  margin-bottom: 12px;
}

.coach-assistant-result-block:last-child {
  margin-bottom: 0;
}

.coach-assistant-response-text {
  margin-top: 6px;
  color: var(--color-text-darkest);
  font-size: 15px;
  line-height: 1.65;
  white-space: normal;
}

.coach-assistant-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.coach-assistant-inline-loading {
  padding: 24px 12px;
}

.coach-assistant-modal .draft-loading {
  color: #475569;
}

.coach-assistant-modal .draft-loading p {
  color: #475569;
}

@media (max-width: 640px) {
  .coach-assist-header-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .coach-assistant-result-grid {
    grid-template-columns: 1fr;
  }

  .coach-assistant-footer {
    justify-content: stretch;
  }

  .coach-assistant-footer button {
    flex: 1 1 140px;
  }
}

/* Loading State */
.draft-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #94a3b8;
}

.draft-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in oklch, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: draft-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes draft-spin {
  to { transform: rotate(360deg); }
}

/* Draft Cards */
.draft-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.draft-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.draft-card:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
  background: color-mix(in oklch, var(--primary) 5%, transparent);
}

.draft-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.draft-tone-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.draft-tone-badge.professional {
  background: color-mix(in oklch, var(--primary) 15%, transparent);
  color: #60a5fa;
}

.draft-tone-badge.enthusiastic {
  background: color-mix(in oklch, var(--success) 15%, transparent);
  color: #4ade80;
}

.draft-tone-badge.brief {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.draft-card-text {
  color: var(--color-border-light);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.btn-use-draft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--primary);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

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

.btn-use-draft:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

/* Footer Buttons */
.btn-draft-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  color: var(--color-text-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.btn-draft-action:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--color-text-darkest);
}

.btn-draft-action:disabled {
  background: var(--color-bg-muted);
  border-color: var(--border);
  color: var(--muted);
  opacity: 1;
  cursor: not-allowed;
}

.coach-assistant-footer #generateCoachResponseBtn {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

.coach-assistant-footer #generateCoachResponseBtn:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

.coach-assistant-footer #generateCoachResponseBtn:disabled {
  background: var(--border);
  border-color: var(--border);
  color: var(--muted);
}

.btn-draft-cancel {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.btn-draft-cancel:hover {
  background: #f1f5f9;
  color: var(--color-text-darkest);
}

/* Error State */
.draft-error {
  text-align: center;
  padding: 30px 20px;
  color: #f87171;
}

.draft-error-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.draft-error p {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
}

/* Highlights section responsive */
@media (max-width: 768px) {
  #highlightsSection > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

.upload-dropzone:hover {
  border-color: var(--accent, var(--primary)) !important;
  background: color-mix(in oklch, var(--primary) 4%, transparent) !important;
}

/* ── UI POLISH: FADE-IN ANIMATION ─────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-card,
.school-card,
.coach-card,
.chart-card,
.campaign-filter,
.tasks-widget {
  animation: fadeInUp 400ms ease-out forwards;
}

.stat-card:nth-child(1), .school-card:nth-child(1), .coach-card:nth-child(1), .chart-card:nth-child(1), .campaign-filter:nth-child(1), .tasks-widget:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2), .school-card:nth-child(2), .coach-card:nth-child(2), .chart-card:nth-child(2), .campaign-filter:nth-child(2), .tasks-widget:nth-child(2) { animation-delay: 80ms; }
.stat-card:nth-child(3), .school-card:nth-child(3), .coach-card:nth-child(3), .chart-card:nth-child(3), .campaign-filter:nth-child(3), .tasks-widget:nth-child(3) { animation-delay: 160ms; }
.stat-card:nth-child(4), .school-card:nth-child(4), .coach-card:nth-child(4), .chart-card:nth-child(4), .campaign-filter:nth-child(4), .tasks-widget:nth-child(4) { animation-delay: 240ms; }
.stat-card:nth-child(5), .school-card:nth-child(5), .coach-card:nth-child(5), .chart-card:nth-child(5), .campaign-filter:nth-child(5), .tasks-widget:nth-child(5) { animation-delay: 320ms; }
.stat-card:nth-child(6), .school-card:nth-child(6), .coach-card:nth-child(6), .chart-card:nth-child(6), .campaign-filter:nth-child(6), .tasks-widget:nth-child(6) { animation-delay: 400ms; }

/* ── HEADING TYPOGRAPHY: Poppins ────── */
/* The brand book specifies Poppins Bold for headings. Poppins is geometric and
   runs wider than the grotesk this replaced, so tracking is eased from -0.02em
   to keep the round bowls from colliding at display sizes. */
h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* ============================================================================
   DASHBOARD POLISH — April 2026
   Single source of truth for dashboard surface styling. Lives at file end so
   it wins the cascade over earlier scattered stat-card / chart-card rules
   without needing !important tricks (except where an upstream !important
   forces our hand).
   ============================================================================ */

/* --- Dashboard section header (Campaign Performance) ------------------------ */
.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 4px 0 16px;
}

.dash-section-title {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 2px;
}

.dash-section-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

.dash-last-updated {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- Info banner ------------------------------------------------------------ */
.info-banner {
  padding: 14px 18px;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}

.info-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* --- Tab toggle (pill group) ------------------------------------------------ */
.tab-toggle {
  display: inline-flex;
  background: #eef1f5;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  overflow: visible;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

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

.tab-btn.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--error-strong);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

/* --- Stats grid ------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* --- Stat card (white + colored icon chip + colored metric) ----------------- */
.stat-card,
.stat-card.sent,
.stat-card.opens,
.stat-card.clicks,
.stat-card.replies {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px !important;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: #d4d4d8;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 32px;
  background: #f1f5f9;
  color: var(--text);
}

.stat-card.sent    .stat-icon { background: var(--sent-bg);    color: var(--sent-text); }
.stat-card.opens   .stat-icon { background: var(--opens-bg);   color: var(--opens-text); }
.stat-card.clicks  .stat-icon { background: var(--clicks-bg);  color: var(--clicks-text); }
.stat-card.replies .stat-icon { background: var(--replies-bg); color: var(--replies-text); }

.stat-card .stat-label,
.stat-card.sent .stat-label,
.stat-card.opens .stat-label,
.stat-card.clicks .stat-label,
.stat-card.replies .stat-label {
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.stat-value {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.stat-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: auto;
}

.stat-percent {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-card.sent    .stat-percent { color: var(--sent-text); }
.stat-card.opens   .stat-percent { color: var(--opens-text); }
.stat-card.clicks  .stat-percent { color: var(--clicks-text); }
.stat-card.replies .stat-percent { color: var(--replies-text); }

.stat-unique {
  color: var(--muted);
  font-weight: 500;
}

.progress-bar {
  height: 4px;
  background: #eef1f5;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 400ms cubic-bezier(.2, .8, .2, 1);
}

.stat-card.sent    .progress-fill { background: var(--sent-text); }
.stat-card.opens   .progress-fill { background: var(--opens-text); }
.stat-card.clicks  .progress-fill { background: var(--clicks-text); }
.stat-card.replies .progress-fill { background: var(--replies-text); }

/* --- Chart card ------------------------------------------------------------- */
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px !important;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.chart-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.chart-title {
  font-family: var(--font-brand);
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 2px;
}

.chart-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.date-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.date-picker:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--text);
}

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.chart-placeholder {
  min-height: 220px;
  border: 1px dashed var(--color-border-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  background: #fafbfc;
}

/* --- Empty state ------------------------------------------------------------ */
.dash-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: 6px;
}

.dash-empty-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 4px;
}

.dash-empty-state h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.dash-empty-state p {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 460px;
  margin: 0 0 16px;
  line-height: 1.5;
}

.dash-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Mobile refinements ----------------------------------------------------- */
@media (max-width: 640px) {
  .info-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tab-toggle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex;
  }

  .tab-toggle::-webkit-scrollbar { display: none; }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-placeholder { min-height: 180px; }

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

/* ============================================================================
   TOAST — error correlation ID pill + copy button
   Additive styling for showToast(..., { correlationId }). Error toasts now
   include a short machine-readable ID the user can copy / screenshot for
   support. Base .toast dark background is defined earlier (line ~2317).
   ============================================================================ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 768px) {
  .toast-stack {
    bottom: 16px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .toast-stack .toast {
    width: 100%;
    max-width: 100%;
  }
}

.toast-stack .toast {
  position: static;
  transform: translateY(20px);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
}

.toast-stack .toast.show {
  transform: translateY(0);
}

.toast.toast-error {
  background: var(--color-text-darkest);
  border: 1px solid var(--color-text-dark);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.toast.toast-success {
  background: #065f46;
}

.toast-message {
  line-height: 1.4;
}

.toast-err-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: var(--border);
  white-space: nowrap;
  user-select: all;
}

.toast-copy,
.toast-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.toast-copy:hover,
.toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 520px) {
  .toast-stack .toast {
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
  }
  .toast-err-id { font-size: 10px; }
}

/* ============================================================================
   ADMIN — Portal Errors view
   Reuses dashboard tokens (.stat-card, .chart-card) from the polish block so
   the errors view feels native to the dashboard surface.
   ============================================================================ */
.errors-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 16px;
}

.errors-input,
.errors-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-size: 13px;
  color: var(--text);
  min-height: 36px;
}

.errors-input { flex: 1 1 240px; max-width: 320px; }
.errors-select { flex: 0 0 auto; width: auto; }

.errors-input:focus,
.errors-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
}

.errors-table-card {
  padding: 16px 0;
}

.errors-table-card .chart-header {
  padding: 0 20px;
}

.errors-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.errors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.errors-table thead th {
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.errors-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: var(--text);
}

.errors-table tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}

.errors-table tbody tr:hover {
  background: #f8fafc;
}

.errors-table .err-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.errors-table .err-msg {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.errors-table .err-endpoint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.errors-table .err-corr code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  color: var(--text);
}

.errors-empty {
  text-align: center;
  padding: 48px 20px !important;
  color: var(--muted);
  font-size: 14px;
}

.errors-show-more-row td {
  padding: 16px 12px !important;
  text-align: center;
  background: var(--color-bg-subtle);
}

.errors-show-more-count {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.err-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: var(--text);
  white-space: nowrap;
}

.err-pill-api_error            { background: var(--color-bg-error); color: #b91c1c; }
.err-pill-network_error        { background: #fef9c3; color: #a16207; }
.err-pill-js_error             { background: #fce7f3; color: #9d174d; }
.err-pill-promise_rejection    { background: #ede9fe; color: #5b21b6; }
.err-pill-reply_send_exception { background: #ffedd5; color: #9a3412; }
.err-pill-reply_html_build_failed { background: #ffedd5; color: #9a3412; }
.err-pill-transcript_upload    { background: var(--color-bg-info); color: #1e40af; }
.err-pill-login_failed         { background: var(--color-bg-error); color: #b91c1c; }
.err-pill-login_error          { background: var(--color-bg-error); color: #b91c1c; }

/* Detail drawer */
.err-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast) + 50);
  display: flex;
  justify-content: flex-end;
}

.err-drawer.hidden {
  display: none;
}

.err-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.err-drawer-panel {
  position: relative;
  width: min(640px, 100vw);
  height: 100%;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  animation: errDrawerSlide 220ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes errDrawerSlide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

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

.err-drawer-header h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.err-drawer-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.err-drawer-close:hover {
  background: #f1f5f9;
  color: var(--text);
}

.err-drawer-body {
  flex: 1;
  margin: 0;
  padding: 16px 20px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
}

@media (max-width: 640px) {
  .errors-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .errors-input,
  .errors-select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    max-width: none;
  }

  .errors-table .err-msg { max-width: 220px; }

  .err-drawer-panel { width: 100vw; }
}

/* CRM search input icon sizing fix */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-input-icon svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}
.search-input-with-icon {
  padding-left: 34px !important;
}

/* ==========================================
   Performance optimizations
   ========================================== */

/* content-visibility: auto skips rendering off-screen items entirely until they
   scroll near the viewport. Major win for long lists (kanban, activity feed,
   schools/coaches lists). contain-intrinsic-size reserves space so scrollbars
   stay accurate before items render. */
.kanban-card,
.activity-item,
.coach-list-row,
.school-list-row,
.schools-sent-row,
.crm-list-row,
.crm-table-row,
.xcontent-card,
.skeleton-activity-item,
.skeleton-kanban-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* Kanban cards are smaller — reserve less */
.kanban-card,
.skeleton-kanban-card {
  contain-intrinsic-size: auto 90px;
}

/* Modal content can defer rendering until visible — modal stack manager
   toggles .hidden on/off, so the contain hint helps when modals carry lots
   of nested children (notesModal with 6 tabs, threadModal with email thread). */
.modal-content {
  contain: layout style;
}

/* Sidebar — the nav is layout-isolated from the rest of the page */
.sidebar,
.toast-stack,
#crmSection .kanban-board {
  contain: layout;
}

/* Hint browsers that elements with frequent transform animations should be
   promoted to their own compositor layer. Used sparingly — only on elements
   whose transform actively animates (drag, modal entry, ring spinner). */
.kanban-card.dragging,
.modal:not(.hidden) .modal-content,
.xpost-char-ring-progress,
.xcontent-loading-spinner,
.loading-count::before,
.loading-text::before {
  will-change: transform;
}

/* Skeleton shimmer animation keeps the GPU layer when shimmering — without
   this, every shimmer cycle creates+destroys the layer */
.skeleton,
.skeleton-card,
.skeleton-line,
.skeleton-avatar,
.skeleton-table-cell,
.skeleton-activity-icon {
  will-change: background-position;
}

/* ── Client Checklist (YFS-88): data-dense daily/weekly/monthly + metrics ── */
.checklist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.checklist-client { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checklist-client-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.checklist-client-name { font-size: 18px; font-weight: 700; color: var(--text); }
.checklist-period-note { font-size: 12px; color: var(--text-secondary); }
.checklist-period { display: flex; flex-direction: column; gap: 4px; }
.checklist-period-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.checklist-period input[type="date"] {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--card);
  color: var(--text);
}

.checklist-progress { margin-bottom: 18px; }
.checklist-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-subtle, #eef1f5);
  overflow: hidden;
}
.checklist-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--yfs-blue, var(--primary-dark));
  transition: width 200ms ease;
}
.checklist-progress-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.checklist-progress-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  min-width: 96px;
}
.checklist-progress-stat strong { font-size: 18px; font-weight: 700; color: var(--text); }
.checklist-progress-stat span { font-size: 11px; color: var(--text-secondary); }

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

.checklist-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 14px 16px;
}
.checklist-panel--metrics { background: var(--color-bg-subtle, #fafbfc); }
.checklist-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.checklist-panel-head h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text); }
.checklist-panel-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.checklist-list { display: grid; gap: 8px; }

.checklist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  transition: border-color 150ms ease, background 150ms ease;
}
.checklist-row.is-complete { border-color: var(--yfs-blue, var(--primary-dark)); background: var(--color-bg-info-soft, #f5f8ff); }
.checklist-row.is-complete label { color: var(--text-secondary); text-decoration: line-through; }

.checklist-row.metric-row { grid-template-columns: minmax(0, 1fr) 84px; }
.checklist-row.metric-row.is-auto { border-color: var(--yfs-blue, var(--primary-dark)); }

.checklist-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.checklist-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* The label is a flex container whose text used to be an anonymous item, and an
   anonymous item will not shrink below its min-content width. So a long label
   overflowed the grid cell and shoved the Auto badge on top of the number
   input — 21px over on "Questionnaires Filled Out", 35px on
   "Calls/Visits/Conversations". Giving the text a real element lets it shrink
   and wrap instead. */
.checklist-row label > .metric-label-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "Auto" hint on metrics derived from the portal's published data (YFS-89). */
.metric-auto-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yfs-blue, var(--primary-dark));
  background: var(--color-bg-info-soft, #eef3ff);
  border: 1px solid var(--yfs-blue, var(--primary-dark));
  border-radius: 999px;
  padding: 1px 6px;
}

.checklist-row input[type="number"] {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--text);
}

.activity-admin-item {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr) minmax(160px, .8fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.activity-admin-item strong {
  display: block;
  color: var(--color-text-darkest);
}

.activity-admin-item span,
.activity-admin-item small {
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .activity-admin-item {
    grid-template-columns: 1fr;
  }
}

/* ===== Questionnaire family flow (pick -> review -> done) ===== */
.q-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.q-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-secondary, #f4f5f7);
  color: var(--text-secondary, #667);
  font-size: 14px;
  font-weight: 500;
}
.q-step + .q-step::before {
  content: '';
}
.q-step .q-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border-color, #d8dbe0);
  color: var(--text-secondary, #667);
  font-size: 12px;
  font-weight: 700;
}
.q-step.active {
  background: var(--primary-soft, #e8f0fe);
  color: var(--primary, #1a73e8);
}
.q-step.active .q-step-num {
  background: var(--primary, #1a73e8);
  color: #fff;
}
.q-step.complete .q-step-num {
  background: var(--success, #1e8e3e);
  color: #fff;
}

.q-done-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0 0 16px;
  border: 1px solid var(--success, #1e8e3e);
  border-radius: 10px;
  background: var(--success-soft, #e6f4ea);
}
.q-done-banner .q-done-icon { font-size: 28px; }
.q-done-banner p { margin: 4px 0 0; color: var(--text-secondary, #667); }
.q-done-banner > div { flex: 1; }

.q-unsubmittable-separator td {
  padding: 14px 16px;
  background: var(--bg-secondary, #f4f5f7);
  color: var(--text-secondary, #667);
  font-size: 13px;
  border-top: 2px solid var(--border-color, #d8dbe0);
}
.q-row-unsubmittable td {
  opacity: 0.62;
}
.q-row-unsubmittable .q-btn-link { pointer-events: auto; }

.q-staff-filters summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, #667);
  padding: 6px 0;
}
.q-staff-filters[open] summary { margin-bottom: 6px; }

.q-preview-chosen-schools .q-preview-school-list {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  max-height: 180px;
  overflow-y: auto;
}
.q-preview-chosen-schools .q-preview-school-list li {
  margin: 2px 0;
}
.q-preview-school-meta {
  color: var(--text-secondary, #667);
  font-size: 12px;
  margin-left: 6px;
}

/* ===== Questionnaire Profile intake wizard ===== */
.iw-intro {
  color: var(--text-secondary, #667);
  margin: 0 0 16px;
  max-width: 640px;
}
.iw-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.iw-progress-track {
  flex: 1;
  max-width: 420px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-secondary, #f4f5f7);
  overflow: hidden;
}
.iw-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary, #1a73e8);
  transition: width 0.25s ease;
}
.iw-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #667);
  white-space: nowrap;
}
.iw-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.iw-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #d8dbe0);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #667);
  font-size: 13px;
  cursor: pointer;
}
.iw-step .iw-step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-color, #d8dbe0);
}
.iw-step.partial .iw-step-dot { background: var(--warning, #f9ab00); }
.iw-step.done .iw-step-dot { background: var(--success, #1e8e3e); }
.iw-step.active {
  border-color: var(--primary, #1a73e8);
  color: var(--primary, #1a73e8);
  font-weight: 600;
}
.iw-card { padding: 20px; }
.iw-card-title { margin: 0 0 14px; }
.iw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 18px;
}
.iw-field-wide { grid-column: 1 / -1; }
.iw-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--error, #d93025);
  background: rgba(217, 48, 37, 0.07);
  color: var(--error, #d93025);
  font-size: 13px;
}
.iw-error.hidden { display: none; }
.iw-field-error {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--error, #d93025);
}
.iw-field-error.hidden { display: none; }
.iw-required-mark { color: var(--error, #d93025); }
.iw-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.iw-mobile-bar { display: none; }

@media (max-width: 640px) {
  #intakeWizardSection .iw-grid { grid-template-columns: 1fr; }
  #intakeWizardSection .iw-field input,
  #intakeWizardSection .iw-field textarea { font-size: 16px; }
  #intakeWizardSection .iw-actions { display: none; }
  .iw-mobile-bar {
    display: flex;
    gap: 12px;
    position: sticky;
    bottom: 0;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-color, #d8dbe0);
  }
  .iw-mobile-bar .btn-primary { flex: 1; }
}

/* ===== Intake field recommendations (include / your call / skip) ===== */
.iw-hint-slot { margin-top: 6px; }
.iw-hint {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 7px;
}
.iw-hint-include {
  background: var(--success-soft, #e6f4ea);
  color: var(--success, #1e8e3e);
}
.iw-hint-neutral {
  background: var(--bg-secondary, #f4f5f7);
  color: var(--text-secondary, #667);
}
.iw-hint-skip {
  background: rgba(249, 171, 0, 0.12);
  color: #8a6400;
}
.iw-omit-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary, #667);
  cursor: pointer;
}
.iw-omit-toggle input { width: auto; margin: 0; }

/* ===== History receipt links ===== */
.history-receipt-link {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
  opacity: 0.85;
}
.history-receipt-link:hover { opacity: 1; }

/* ===== Questionnaire readiness ===== */
.q-readiness-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #d8dbe0);
  background: var(--bg-secondary, #f4f5f7);
  font-size: 14px;
}
.q-readiness-summary .q-readiness-unknown-note {
  color: var(--text-secondary, #667);
  font-size: 12.5px;
}
.q-readiness-fix-btn { margin-left: auto; }
.q-readiness-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: none;
}
.q-readiness-badge.ready { background: var(--success-soft, #e6f4ea); color: var(--success, #1e8e3e); }
.q-readiness-badge.missing { background: rgba(249, 171, 0, 0.15); color: #8a6400; cursor: pointer; }
.q-readiness-badge.manual { background: rgba(66, 133, 244, 0.12); color: #1a56c4; }
.q-readiness-badge.unknown { background: var(--bg-secondary, #f4f5f7); color: var(--text-secondary, #667); }

/* ===== Questionnaire tab + history: mobile polish (YFS-15) ===== */

/* Sticky mobile action bar (mirrors header actions); hidden on desktop. */
.q-mobile-action-bar { display: none; }

@media (max-width: 640px) {
  /* --- General guards: nothing overflows the viewport --- */
  #questionnairesSection { max-width: 100%; overflow-x: hidden; }
  #questionnairesSection .page-header { flex-wrap: wrap; gap: 10px; }
  /* Actions live in the sticky bar on mobile; hide the header duplicates. */
  #questionnairesSection .page-header .page-header-actions { display: none; }

  .q-mobile-action-bar {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-color, #d8dbe0);
  }
  .q-mobile-action-bar .btn-primary { flex: 1.4; min-height: 44px; }
  .q-mobile-action-bar .btn-secondary { flex: 1; min-height: 44px; }

  /* --- Steps + stats + readiness summary wrap cleanly --- */
  #questionnairesSection .q-steps { flex-wrap: wrap; gap: 6px; }
  #questionnairesSection .q-step { padding: 6px 10px; font-size: 12.5px; }
  #questionnairesSection .questionnaire-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #questionnairesSection .q-stat-card { padding: 8px 6px; min-width: 0; }
  #questionnairesSection .q-stat-label { font-size: 10.5px; }
  .q-readiness-summary { font-size: 13px; }
  .q-readiness-summary .q-readiness-fix-btn { margin-left: 0; width: 100%; min-height: 44px; }

  /* --- Filters: full-width stacked controls, 16px inputs (no iOS zoom) --- */
  #questionnairesSection .questionnaire-filters { flex-direction: column; gap: 10px; }
  #questionnairesSection .filter-group { width: 100%; min-width: 0; }
  #questionnairesSection .filter-group select,
  #questionnairesSection .filter-group input {
    width: 100%;
    font-size: 16px;
    min-height: 44px;
  }

  /* --- Tabs: comfortable tap targets --- */
  #questionnairesSection .q-tab-btn { min-height: 44px; flex: 1; }
  #questionnairesSection .questionnaire-tabs { display: flex; }

  /* --- School list: table rows become tappable cards --- */
  #questionnairesSection .questionnaire-table-container { overflow-x: visible; }
  #questionnairesSection .questionnaire-table { display: block; width: 100%; }
  #questionnairesSection .questionnaire-table thead { display: none; }
  #questionnairesSection .questionnaire-table tbody { display: block; }
  #questionnairesSection .questionnaire-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-color, #d8dbe0);
  }
  #questionnairesSection .questionnaire-table td {
    display: block;
    border: none;
    padding: 0;
    min-width: 0;
  }
  /* Row 1: checkbox + school name + actions */
  #questionnairesSection .questionnaire-table td.q-checkbox-col { order: 0; }
  #questionnairesSection .questionnaire-table td.q-checkbox-col input {
    width: 22px;
    height: 22px;
    margin: 11px; /* 22 + 2*11 = 44px touch target */
  }
  #questionnairesSection .questionnaire-table td:nth-child(2) {
    order: 1;
    flex: 1;
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  #questionnairesSection .questionnaire-table td.q-actions {
    order: 2;
    display: flex;
    gap: 6px;
  }
  #questionnairesSection .q-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
  }
  /* Row 2: status + readiness badges; conference as quiet context */
  #questionnairesSection .questionnaire-table td:nth-child(5) {
    order: 3;
    width: 100%;
    padding-left: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
  }
  #questionnairesSection .questionnaire-table td:nth-child(4) {
    order: 4;
    padding-left: 44px;
    font-size: 12px;
    color: var(--text-secondary, #667);
  }
  /* Division + question-count are filter fodder, not row-reading material. */
  #questionnairesSection .questionnaire-table td:nth-child(3),
  #questionnairesSection .questionnaire-table td:nth-child(6) { display: none; }
  /* Full-width informational rows (loading / empty / unsubmittable divider) */
  #questionnairesSection .questionnaire-table td[colspan] {
    display: block;
    width: 100%;
    padding: 12px 8px;
  }
  /* Leave room above the sticky bar so the last row stays tappable. */
  #qSchoolsTab { padding-bottom: 8px; }

  /* --- Review + field-preview modals fit the viewport --- */
  #qSubmitPreviewModal .modal-content,
  #qPreviewModal .modal-content {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  #qSubmitPreviewModal .modal-body,
  #qPreviewModal .modal-body {
    overflow-y: auto;
    flex: 1;
  }
  #qSubmitPreviewModal .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #fff);
    flex-wrap: wrap;
  }
  #qSubmitPreviewModal .modal-footer .btn-primary {
    flex: 1;
    min-height: 44px;
  }
  #qSubmitPreviewModal .modal-footer .btn-secondary { min-height: 44px; }
  .q-preview-grid { grid-template-columns: 1fr; }

  /* --- Done banner stacks --- */
  .q-done-banner { flex-direction: column; align-items: flex-start; }
  .q-done-banner .btn-secondary { width: 100%; min-height: 44px; }

  /* --- History: card-like entries, everything wraps --- */
  #qHistoryTab .history-item { padding: 12px; }
  #qHistoryTab .history-item-header { flex-wrap: wrap; gap: 4px; }
  #qHistoryTab .history-item-time { font-size: 12px; }
  #qHistoryTab .history-stats { flex-wrap: wrap; gap: 4px; }
  #qHistoryTab .history-item-schools { display: flex; flex-wrap: wrap; gap: 6px; }
  #qHistoryTab .history-school-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #qHistoryTab .history-receipt-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 6px;
  }
  #qHistoryTab .history-job-id { font-size: 11px; overflow-wrap: anywhere; }
}

/* ===== YFS-15 review fixes ===== */
@media (max-width: 640px) {
  /* The legacy 768px rule forces .questionnaire-table { min-width: 800px },
     which made the card layout compute at 800px and scroll sideways. Kill
     it, and make the container's overflow fully visible (an overflow-x
     alone gets coerced to auto when overflow-y is hidden). */
  #questionnairesSection .questionnaire-table { min-width: 0; }
  #questionnairesSection .questionnaire-table-container { overflow: visible; }

  /* The sticky action bar belongs to the Schools pane only — hide it when
     that pane is hidden (History tab active). */
  #qSchoolsTab.hidden ~ .q-mobile-action-bar { display: none; }
}

/* Coaches → "at a specific school" scope control + chip (YFS-82) */
.coach-school-filter { position: relative; }
.coach-school-filter-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, var(--border));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.coach-school-filter-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, var(--color-bg-muted));
}
.coach-school-filter-option:last-child { border-bottom: none; }
.coach-school-filter-option:hover { background: var(--bg-secondary, var(--color-bg-subtle)); }
.coach-school-filter-option-name { font-weight: 500; font-size: 13px; }
.coach-school-filter-option-meta { font-size: 12px; color: var(--text-secondary, var(--text-secondary)); }
.coach-school-filter-empty { padding: 12px; text-align: center; color: var(--text-secondary, var(--text-secondary)); font-size: 13px; }

.coach-school-chip-wrap { margin: 8px 0 4px; }
.coach-school-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(66, 133, 244, 0.12);
  color: #1a56c4;
  font-size: 13px;
}
.coach-school-chip-clear {
  border: none;
  background: rgba(26, 86, 196, 0.15);
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coach-school-chip-clear:hover { background: rgba(26, 86, 196, 0.3); }

/* ── Schools section: data-dense card + inline coaches (YFS-83) ───────── */
.schools-grid .school-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
}
.school-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.schools-grid .school-card-logo,
.schools-grid .school-card-logo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 15px;
}
.school-card-headline {
  flex: 1;
  min-width: 0;
}
.schools-grid .school-card-name {
  font-size: 15px;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schools-grid .school-card-subtitle {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-card-meta-sep { color: var(--text-secondary); opacity: 0.5; }
.school-card-head .school-card-division { flex-shrink: 0; align-self: flex-start; }

.school-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.school-card-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.school-card-stat-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--color-bg-subtle, #f4f5f7);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.school-card-stat-pill.link { color: var(--yfs-blue); text-decoration: none; }
.school-card-stat-pill.link:hover { text-decoration: underline; }

.school-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.school-expand-toggle:hover { color: var(--yfs-blue); border-color: var(--yfs-blue); }
.school-expand-chevron { transition: transform 180ms ease; font-size: 10px; }
.school-card.expanded .school-expand-chevron { transform: rotate(180deg); }

.school-inline-coaches { margin-top: 2px; }
.school-inline-coaches.hidden { display: none; }

/* Coach list inside a school context (inline panel AND the school modal) */
.school-coaches-list { display: flex; flex-direction: column; gap: 8px; }
.school-coach-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--color-bg-subtle, #fafafa);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.school-coach-card:hover { border-color: var(--yfs-blue); background: var(--card); }
.school-coach-main { min-width: 0; flex: 1; }
.school-coach-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.school-coach-name-row strong { font-size: 13px; font-weight: 600; color: var(--text); }
.school-coach-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.school-coach-title { font-size: 12px; color: var(--text-secondary); margin: 2px 0 6px; }
.school-coach-contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.school-coach-social { font-size: 12px; color: var(--yfs-blue); text-decoration: none; }
.school-coach-social:hover { text-decoration: underline; }
.school-coach-open { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.school-coaches-empty {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.school-coaches-empty.error { color: #b42318; border-color: rgba(180, 35, 24, 0.3); }

/* YFS-84 — coach ⇄ school tie-together cross-links */
/* Coach row: school cell is a button that opens the exact school (by id). */
.coach-list-school-link {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px dotted transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.coach-list-school-link:hover {
  color: var(--yfs-blue);
  border-bottom-color: var(--yfs-blue);
}
.coach-list-school-empty { color: #94a3b8; }

/* School modal coaches heading: jump to the filtered Coaches section. */
.school-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.school-coaches-viewall {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.school-coaches-viewall:hover { color: var(--yfs-blue); border-color: var(--yfs-blue); }

/* ── Coaches section: data-dense card (YFS-84) ──────────────────────────
   Mirrors the Schools redesign (.school-card): avatar block · headline
   (name + title) · footer stat strip. Reuses .school-card-stat-pill. */
.coaches-grid .coach-card-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.coaches-grid .coach-card-item + .coach-card-item { margin-top: 8px; }
.coaches-grid .coach-card-item:hover {
  border-color: var(--yfs-blue);
  background: var(--color-bg-info-soft, #f5f8ff);
}

.coach-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.coach-card-item .coach-card-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-bg-info, #e8f0fe);
  color: var(--primary-dark);
}
.coach-card-headline { flex: 1; min-width: 0; }
.coach-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.coach-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-card-name-row .quality-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 6px;
}
.coach-card-title {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-card-head .division-badge { flex-shrink: 0; align-self: flex-start; }

.coach-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.coach-card-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.coach-card-stat-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--color-bg-subtle, #f4f5f7);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-card-stat-pill.muted { opacity: 0.7; }
button.coach-card-stat-pill { border: 0; cursor: pointer; font-family: inherit; }
.coach-card-stat-pill.link { color: var(--yfs-blue); text-decoration: none; }
.coach-card-stat-pill.link:hover { background: var(--color-bg-info, #e8f0fe); }
.coach-card-contact { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---- Support ------------------------------------------------------------ */
/* Deliberately thin: this reuses .card and .form-group, so the brand retheme
   picks it up for free rather than needing its own pass. */

/* `.card` in this stylesheet only sets radius and padding — it carries no
   surface — so the panel is declared here rather than inherited. */
.support-card {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}

#supportSection .page-header {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  #supportSection:not(.hidden) {
    min-height: calc(100vh - var(--space-2xl));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.support-intro {
  margin: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 60ch;
}

.support-char-count {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.support-char-count.is-near-limit {
  color: var(--warning);
}

.support-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.support-status {
  font-size: 14px;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .support-card {
    padding: 16px;
  }

  /* Full-width tap target on a phone — this is the button that matters here. */
  .support-actions .btn-primary {
    width: 100%;
  }
}

/* ---- Onboarding timeline ------------------------------------------------ */
/* Shown on the dashboard until a client has campaigns. Reuses .dash-empty-state
   so the brand retheme picks it up with everything else. */

.onboarding-state {
  text-align: left;
  max-width: 560px;
}

.onboarding-lede {
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.onboarding-timeline {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onboarding-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}

/* Connector between markers. Drawn on all but the last step so the list reads
   as one sequence rather than four unrelated rows. */
.onboarding-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 32px;
  bottom: -4px;
  width: 2px;
  background: var(--border);
}

.onboarding-step-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  flex-shrink: 0;
}

.onboarding-step.is-done .onboarding-step-marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.onboarding-step.is-active .onboarding-step-marker {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.onboarding-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.onboarding-step-title {
  font-weight: 600;
  color: var(--text);
}

.onboarding-step.is-waiting .onboarding-step-title {
  color: var(--text-secondary);
  font-weight: 500;
}

.onboarding-step-detail {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .onboarding-state {
    padding: 20px 16px;
  }

  .onboarding-actions .btn-primary,
  #onboardingActions .btn-primary {
    width: 100%;
  }
}

/* ---- Campaign results panel --------------------------------------------- */
/* Replaces four identical stat cards. The parent's question is "is this
   working?", and replies are the answer — so replies lead at display size and
   everything else is supporting detail. Sizes are fluid so the headline number
   stays large on a phone without overflowing. */

.results-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.result-lead {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  /* Centred rather than top-aligned: the lead stretches to match the height of
     the supporting column, and pinning content to the top pooled all the slack
     into one dead gap above the progress bar. */
  justify-content: center;
  gap: var(--space-2xs);
  min-width: 0;
}

.result-lead-value {
  margin: 0;
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.result-lead-label {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.result-lead-context {
  margin: var(--space-2xs) 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* margin-top:auto pushes the track to the bottom of the flex column. Do NOT add
   padding here — .progress-bar is a 4px overflow:hidden track, so padding
   collapses the fill's content box to zero and the bar renders empty. */
.result-lead-bar {
  margin-top: var(--space-md);
}

/* The reply rate sits top-right as a quiet corroborating figure — present for
   anyone who wants it, never competing with the count. */
.result-lead-rate {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.result-support {
  margin: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  min-width: 0;
}

.result-support-item {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--space-sm);
  min-width: 0;
}

.result-support-item dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.result-support-item dd {
  margin: 0;
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.result-support-meta {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.result-support-item .progress-bar {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
}

/* Phone: stack, and let the headline number keep its scale — it is the whole
   point of the panel and must not shrink to fit a grid. */
@media (max-width: 820px) {
  .results-panel {
    grid-template-columns: 1fr;
  }

  .result-support {
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Stacked and narrow, the value reads better under its label than beside it. */
  .result-support-item {
    grid-template-columns: 1fr;
    padding: var(--space-sm) var(--space-md);
  }

  .result-support-item dd {
    grid-row: auto;
    grid-column: 1;
    font-size: 26px;
  }
}

@media (max-width: 520px) {
  .result-lead {
    padding: var(--space-md);
  }

  .result-lead-rate {
    top: var(--space-md);
    right: var(--space-md);
  }

  .result-support {
    grid-template-columns: 1fr;
  }
}

/* ---- CRM funnel ---------------------------------------------------------- */
/* Replaces four identical stat cards. Schools tracked -> warm -> offers ->
   committed is one progression, so it reads as one strip with chevrons between
   stages rather than four unrelated tiles. Offers and Committed carry the
   emphasis because they are the milestones; the first two are context. */

.crm-funnel {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.crm-funnel-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Chevron between stages, drawn on the gap so it never shifts the columns. */
.crm-funnel-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--space-md) / -2);
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--border);
  border-right: 2px solid var(--border);
  transform: translate(50%, -50%) rotate(45deg);
}

.crm-funnel-value {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.crm-funnel-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Offers is the milestone the whole board is working toward. */
.crm-funnel-stage.is-milestone .crm-funnel-value {
  color: var(--primary-dark);
}

/* Committed is the win. */
.crm-funnel-stage.is-won .crm-funnel-value {
  color: var(--color-text-success);
}

@media (max-width: 720px) {
  .crm-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
    padding: var(--space-md);
  }

  /* Chevrons only make sense along a row; on a 2x2 they would point at nothing. */
  .crm-funnel-stage::after {
    display: none;
  }
}

/* ---- Toasts & admin bar -------------------------------------------------- */

/* Bottom-centre put every toast directly over the primary action — on the
   dashboard it covered the one button the empty state exists to offer. Move to
   the bottom-right on desktop, out of the content column, and keep the
   full-width bottom sheet on phones where there is no room to dodge. */
@media (min-width: 769px) {
  .toast-stack {
    left: auto;
    right: var(--space-lg);
    bottom: var(--space-lg);
    transform: none;
    align-items: flex-end;
    max-width: min(420px, calc(100vw - 48px));
  }
}

.toast {
  /* Was near-black with a heavy shadow, which read as a system crash rather
     than a message from us. */
  background: var(--color-text-darkest);
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.45;
  padding: var(--space-sm) var(--space-md);
}

/* Error keeps the same surface but earns a red edge, so severity is legible
   without a second colour scheme. */
.toast.toast-error {
  border-color: color-mix(in oklch, var(--error) 55%, transparent);
}

/* ---- Admin bar ----------------------------------------------------------- */
/* Staff chrome sitting on top of the client's page. It was a full-width amber
   slab that pulled more attention than the client's own data. Now it reads as
   a quiet utility strip: neutral surface, the amber reduced to the badge. */

.admin-bar {
  background: var(--color-bg-subtle);
  border: 1px solid var(--border);
  border-bottom-color: var(--border);
  border-radius: 10px;
  padding: var(--space-xs) var(--space-sm);
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-lg);
}

.admin-badge {
  background: transparent;
  color: var(--color-text-warning);
  border: 1px solid color-mix(in oklch, var(--warning) 45%, transparent);
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: 0.08em;
}

.admin-viewing-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* The client picker is the only thing here anyone interacts with, so it is the
   only thing that gets a real input surface. */
.admin-bar .admin-client-picker input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  padding: 6px 10px;
}

/* ---- Coach row ----------------------------------------------------------- */
/* The coach database is something you scan and search. The previous card ran
   ~195px with real data, so a full desktop screen held six rows. This is the
   same information in two lines. */

.coach-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  margin-bottom: var(--space-xs);
  cursor: pointer;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}

.coach-row:hover {
  border-color: var(--primary);
  background: var(--color-bg-info-soft);
}

.coach-row-logo {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coach-row-logo .school-card-logo,
.coach-row-logo .school-card-logo-fallback {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 10px;
}

.coach-row-body { min-width: 0; }

.coach-row-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.coach-row-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.coach-row-school {
  font-size: 13px;
  color: var(--color-text-info);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.coach-row-school:hover { text-decoration: underline; }
.coach-row-school.muted { color: var(--muted); cursor: default; }

/* Everything secondary on one truncating line — a coach with a long title and
   conference must not push the row to three lines. */
.coach-row-meta {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.coach-row-side {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Reachability is the whole question this list answers, so it stops being grey
   text at the far edge and becomes a legible state. */
.coach-row-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  min-width: 84px;
  justify-content: flex-end;
}

.coach-row-contact .coach-list-contact-empty {
  color: var(--muted);
}

.coach-row-contact .coach-list-contact-status {
  color: var(--text-secondary);
  font-weight: 600;
}

.coach-row-contact .coach-list-contact-status.verified {
  color: var(--color-text-success);
}

@media (max-width: 720px) {
  .coach-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs) var(--space-sm);
  }

  /* Division + contact drop under the name rather than squeezing the row. */
  .coach-row-side {
    grid-column: 2;
    justify-content: flex-start;
  }

  .coach-row-contact { min-width: 0; justify-content: flex-start; }
}

/* ---- School row ---------------------------------------------------------- */
/* .school-card carries `min-height: 160px` from the earlier card design, which
   pinned every row to 160px even though the compact content measures 42px.
   Overriding it here is the whole reason the row shrinks. */
.schools-grid .school-card.school-row {
  min-height: 0;
  /* Breathing room: at --space-sm the two lines sat right on the border and the
     rows read as a wall. This is still ~4x denser than the 160px card. */
  padding: var(--space-md) var(--space-lg);
}

/* The card lift also has to go: on a dense list it makes rows jump under the
   cursor as you scan down them. */
.schools-grid .school-card.school-row:hover,
.coach-row:hover {
  transform: none;
  box-shadow: none;
}

/* Same treatment as .coach-row: the card ran ~250px against real data, so four
   schools filled a desktop screen out of 923. Keeps .school-card alongside so
   the count selector and the inline-coaches expander keep working. */

.school-row {
  margin-bottom: var(--space-xs);
  border-radius: 10px;
}

/* Line two needs air under the name, not to be jammed against it. */
.school-row .school-row-meta { margin-top: 3px; }
.coach-row .coach-row-meta { margin-top: 3px; }

.school-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.school-row-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.school-row-logo .school-card-logo,
.school-row-logo .school-card-logo-fallback {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 12px;
}

.school-row-body { min-width: 0; }

.school-row-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.school-row-line .school-card-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coach count is why a client opens a school, so it sits with the name rather
   than in a pill strip below the fold of the row. */
.school-row-coaches {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-info);
  white-space: nowrap;
  flex-shrink: 0;
}

.school-row-meta {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.school-row-side {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.school-row .school-expand-toggle {
  font-size: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .school-row-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .school-row-side {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* ---- Coach modal detail grid --------------------------------------------- */
/* Was a stack of "Label: value" rows where the school rendered as a grey boxy
   button that read as a broken input. Now a definition list: quiet uppercase
   label, value as content, school as a plain link. */

.coach-detail-grid {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: 0;
}

.coach-detail-grid .detail-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.coach-detail-grid .detail-row:last-child { border-bottom: 0; }

.coach-detail-grid dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.coach-detail-grid dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}

/* The school is a link, not a button. It was rendering with a default button
   chrome — grey fill, hard border — which looked like an unstyled input. */
.coach-detail-grid .coach-school-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-text-info);
  cursor: pointer;
  text-align: left;
}

.coach-detail-grid .coach-school-link:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .coach-detail-grid .detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Modal footers were removed from the school and coach dialogs (the header X is
   the close affordance). Anything still using one keeps its spacing. */
.modal-content > .modal-body:last-child { padding-bottom: var(--space-lg); }

/* ---- Database filter bar + rows on small screens ------------------------- */
/* At 390px the filter bar was still resolving to a multi-column grid, which
   squeezed the search input to 26px — an empty square you cannot type in — and
   pushed "More Filters" off the right edge. Several earlier media queries try
   to set a single column; something later in the cascade was winning. Rather
   than add another rule that might also lose, this stacks every child
   explicitly and is placed at the end of the file so it is last. */
@media (max-width: 720px) {
  #schoolsSection .search-filters,
  #coachesSection .search-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  #schoolsSection .search-filters > *,
  #coachesSection .search-filters > * {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* The search field is the primary control here and must never collapse. */
  #schoolsSection .search-filters .search-input,
  #coachesSection .search-filters .search-input {
    width: 100%;
    min-width: 0;
  }

  /* Coach rows: the contact block (email button + verified state) ran off the
     right edge because it kept a fixed minimum while the row narrowed. Let it
     wrap under the name and truncate rather than overflow. */
  .coach-row-side {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  .coach-row-contact {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .coach-row-contact .coach-email-button,
  .coach-row-contact a,
  .coach-row-contact button {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---- Profile cards ------------------------------------------------------- */
/* Every profile card carried a 3px coloured left stripe — the pattern
   .impeccable.md bans outright, and the one this audit has now removed twice
   elsewhere. It was invisible to the audit because Profile only renders with a
   real recruit record, and the harness had none, so the section was empty every
   time it was checked. Placed at the end of the file to beat whatever sets it. */
#profileSection .profile-card,
#profileSection .profile-completion-card,
#profileSection .profile-summary-card {
  border-left: 1px solid var(--card-border);
}

/* The school modal's questionnaire CTA had no rule of its own, so it sat flush
   against the school header — the button's bottom edge and the logo's top edge
   were literally the same pixel, at both 390px and 1440px. */
.school-modal-cta {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Mobile overrides — must stay LAST
   ==========================================================================
   Media queries add no specificity, so a mobile declaration only wins if no
   unscoped rule for the same selector appears later in the file. Several
   blocks above are dead for exactly that reason; `UI_AUDIT_CASCADE=1 node
   scripts/ui-audit.mjs` lists them. Restore them here rather than in place, and
   keep this block at the end of the file.

   Only declarations whose effect was confirmed by measuring the rendered page
   are restored — the checker reports some that are overridden by a more
   specific selector anyway and so change nothing. */
@media (max-width: 768px) {
  /* 24px of padding each side costs 48px of a 390px screen. The mobile value
     was written and never applied. */
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Was resolving to 40px on all four sides on a phone. */
  .login-card {
    padding: 24px 20px;
  }

  /* The school row's meta line truncates to a single line, which is right for
     the conference/state text but swallowed the Questionnaire link whole: it
     rendered 109px past the row's right edge and was clipped by overflow:hidden
     in every row, so on a phone the link could not be seen or tapped at all.
     Truncate only the text and give the link its own line. */
  .school-row-meta {
    white-space: normal;
  }

  .school-row-meta-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .school-row-meta-sep {
    display: none;
  }

  .school-row-meta-link {
    display: inline-block;
    margin-top: 2px;
  }

  /* .search-input is deliberately NOT restored here. Adding the rule changed
     nothing measurable — the element still computes 8px 12px — and shipping a
     declaration that does not take effect is the exact problem this block
     exists to fix. It needs its own look. */
}


/* CRM / school-search logos */
.crm-school-logo-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.crm-school-logo-wrap .school-card-logo,
.crm-school-logo-wrap .school-card-logo-fallback {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 10px;
}

.crm-lr-school-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.crm-lr-school-info {
  min-width: 0;
}

.crm-table-school-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.crm-table-school-info {
  min-width: 0;
}

.search-result-item.search-result-item-logo {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.search-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-result-logo-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.search-result-logo-wrap .school-card-logo,
.search-result-logo-wrap .school-card-logo-fallback {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

/* Classroom authoring (YFS-1686) */
#classroomAdminSection,
.classroom-admin-workspace,
.classroom-admin-course-form,
.classroom-admin-content-card {
  min-width: 0;
}

.classroom-admin-page-note {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.classroom-admin-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg);
}

.classroom-admin-course-panel {
  position: sticky;
  top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: calc(100vh - var(--space-2xl));
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.classroom-admin-course-panel .search-input {
  width: 100%;
  min-width: 0;
}

.classroom-admin-list-status {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 12px;
}

.classroom-admin-course-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.classroom-admin-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--card);
  transition: border-color 160ms ease-out, background 160ms ease-out;
}

.classroom-admin-course-row:hover,
.classroom-admin-course-row.is-active {
  border-color: var(--primary);
  background: var(--color-bg-info-soft);
}

.classroom-admin-course-select {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.classroom-admin-course-select strong,
.classroom-admin-lesson-edit span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.classroom-admin-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.classroom-admin-status-pill.is-published {
  border-color: color-mix(in oklch, var(--success-text) 30%, transparent);
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.classroom-admin-status-pill.is-draft {
  background: var(--color-bg-muted);
  color: var(--text-secondary);
}

.classroom-admin-order-actions,
.classroom-admin-module-actions,
.classroom-resource-actions,
.classroom-admin-course-actions,
.classroom-lesson-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.classroom-admin-order-actions {
  flex-direction: column;
  padding-right: var(--space-xs);
  gap: var(--space-2xs);
}

.classroom-admin-order-actions button,
.classroom-admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 7px;
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
}

.classroom-admin-order-actions button:hover:not(:disabled),
.classroom-admin-icon-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.classroom-admin-order-actions button:disabled,
.classroom-admin-icon-btn:disabled,
.classroom-admin-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.classroom-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--text-secondary);
  font-size: 12px;
}

.classroom-admin-pagination > div {
  display: flex;
  gap: var(--space-2xs);
}

.classroom-admin-pagination .btn-secondary {
  min-height: 32px;
  padding: var(--space-2xs) var(--space-xs);
  font-size: 12px;
}

.classroom-admin-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.classroom-admin-course-form,
.classroom-admin-content-card,
.classroom-admin-welcome {
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.classroom-admin-welcome {
  text-align: center;
  padding-block: var(--space-2xl);
}

.classroom-admin-welcome h2,
.classroom-admin-welcome p,
.classroom-admin-card-header h2,
.classroom-admin-subheader h2,
.classroom-admin-subheader h4 {
  margin: 0;
}

.classroom-admin-welcome p,
.classroom-admin-subheader p {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
}

.classroom-admin-card-header,
.classroom-admin-subheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.classroom-admin-card-header > div,
.classroom-admin-subheader > div {
  min-width: 0;
}

.classroom-admin-card-header h2,
.classroom-admin-subheader h2 {
  overflow-wrap: anywhere;
}

.classroom-admin-eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.classroom-admin-form-grid,
.classroom-resource-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-md);
}

.classroom-admin-field-wide {
  grid-column: 1 / -1;
}

.classroom-admin-field-hint {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.classroom-admin-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  cursor: pointer;
}

.classroom-admin-check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.classroom-admin-check-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.classroom-admin-check-row small {
  color: var(--text-secondary);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.classroom-admin-course-actions {
  justify-content: flex-end;
  margin-top: var(--space-lg);
}

.classroom-admin-course-actions .btn-danger {
  margin-right: auto;
}

.classroom-admin-cover-control {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.classroom-admin-cover-control > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.classroom-admin-cover-control label {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
}

.classroom-admin-cover-control input[type="file"] {
  min-width: 0;
  max-width: 100%;
}

.classroom-admin-cover-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 1px dashed var(--color-border-light);
  border-radius: 10px;
  background: var(--color-bg-muted);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.classroom-admin-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classroom-admin-module-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.classroom-admin-module-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-bg-subtle);
}

.classroom-admin-module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.classroom-admin-module-header .form-group {
  margin: 0;
}

.classroom-admin-module-actions {
  justify-content: flex-end;
}

.classroom-admin-module-actions .btn-secondary,
.classroom-admin-module-actions .btn-danger,
.classroom-resource-actions .btn-secondary,
.classroom-resource-actions .btn-danger {
  min-height: 32px;
  padding: var(--space-2xs) var(--space-xs);
  font-size: 12px;
}

.classroom-admin-lesson-list {
  display: flex;
  flex-direction: column;
}

.classroom-admin-lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--card);
}

.classroom-admin-lesson-row .classroom-admin-order-actions {
  flex-direction: row;
  padding: 0;
}

.classroom-admin-lesson-edit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2xs) 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.classroom-admin-lesson-edit:hover span {
  color: var(--primary-dark);
}

.classroom-admin-lesson-edit small {
  color: var(--text-secondary);
}

.classroom-admin-add-lesson {
  margin: var(--space-sm) var(--space-md);
}

.classroom-admin-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.classroom-admin-add-row .form-group {
  margin: 0;
}

.classroom-admin-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px dashed var(--color-border-light);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.classroom-admin-state strong {
  color: var(--text);
}

.classroom-admin-state.is-error,
.classroom-admin-status.is-error {
  border-color: color-mix(in oklch, var(--error) 30%, transparent);
  background: var(--color-bg-error);
  color: var(--error-strong);
}

.classroom-admin-status {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.classroom-admin-status.is-success {
  border-color: color-mix(in oklch, var(--success-text) 30%, transparent);
  background: var(--color-bg-success);
  color: var(--color-text-success);
}

.classroom-admin-inline-empty,
.classroom-admin-limit-note {
  padding: var(--space-md);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.classroom-admin-limit-note {
  margin-bottom: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--warning-text) 30%, transparent);
  border-radius: 10px;
  background: var(--color-bg-warning);
  color: var(--color-text-warning);
}

.classroom-lesson-editor-modal {
  width: min(900px, calc(100vw - var(--space-lg)));
  max-width: 900px;
  max-height: calc(100vh - var(--space-lg));
}

.classroom-lesson-editor-modal .modal-body {
  overflow-y: auto;
}

.classroom-rich-text-group {
  margin-top: var(--space-lg);
}

.classroom-rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--color-bg-muted);
}

.classroom-rich-text-toolbar button,
.classroom-rich-text-toolbar select {
  min-height: 34px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border-light);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
}

.classroom-rich-text-editor {
  min-height: 180px;
  max-height: 420px;
  padding: var(--space-md);
  overflow: auto;
  border: 1px solid var(--color-border-light);
  border-radius: 0 0 10px 10px;
  background: var(--card);
  color: var(--text);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.classroom-rich-text-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
  outline: 0;
}

.classroom-rich-text-editor:empty::before {
  color: var(--muted);
  content: attr(data-placeholder);
  pointer-events: none;
}

.classroom-rich-text-editor a {
  color: var(--primary-dark);
}

.classroom-resource-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.classroom-resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.classroom-resource-row,
.classroom-resource-create {
  padding: var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--color-bg-subtle);
}

.classroom-resource-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(160px, 0.8fr) minmax(220px, 1.5fr) auto;
  align-items: end;
  gap: var(--space-sm);
}

.classroom-resource-row .classroom-admin-field-wide {
  grid-column: auto;
}

.classroom-resource-row .form-group,
.classroom-resource-create .form-group {
  min-width: 0;
  margin-bottom: 0;
}

.classroom-resource-create {
  margin-top: var(--space-md);
}

.classroom-resource-create > .btn-secondary {
  margin-top: var(--space-sm);
}

.classroom-resource-upload {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.classroom-resource-upload .form-group {
  flex: 1;
}

.classroom-lesson-editor-footer {
  justify-content: space-between;
}

@media (max-width: 980px) {
  .classroom-admin-layout {
    grid-template-columns: 1fr;
  }

  .classroom-admin-course-panel {
    position: static;
    max-height: none;
  }

  .classroom-admin-course-list {
    max-height: 360px;
  }

  .classroom-resource-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-resource-row .classroom-admin-field-wide,
  .classroom-resource-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #classroomAdminSection .page-header,
  .classroom-admin-card-header,
  .classroom-admin-subheader {
    align-items: stretch;
    flex-direction: column;
  }

  #classroomAdminSection .page-header-actions,
  #classroomAdminSection .page-header-actions .btn-primary {
    width: 100%;
  }

  .classroom-admin-form-grid,
  .classroom-resource-fields,
  .classroom-admin-cover-control,
  .classroom-admin-module-header,
  .classroom-admin-add-row,
  .classroom-resource-row {
    grid-template-columns: 1fr;
  }

  .classroom-admin-module-actions,
  .classroom-resource-actions {
    justify-content: flex-start;
  }

  .classroom-admin-field-wide,
  .classroom-resource-row .classroom-admin-field-wide,
  .classroom-resource-actions {
    grid-column: auto;
  }

  .classroom-admin-lesson-row {
    align-items: start;
  }

  .classroom-admin-pagination,
  .classroom-resource-upload,
  .classroom-lesson-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .classroom-admin-pagination > div,
  .classroom-admin-pagination .btn-secondary,
  .classroom-resource-upload .btn-secondary,
  .classroom-lesson-editor-actions,
  .classroom-lesson-editor-actions .btn-primary,
  .classroom-lesson-editor-actions .btn-secondary,
  .classroom-lesson-editor-footer > .btn-danger {
    width: 100%;
  }
}

/* ── X WORKSPACE ─────────────────────────────────────────────────────────────
   The recruit's writing desk. Brand book rules: Poppins, ink navy for weight,
   YFS blue as the ONE signal colour (primary action, active state), cyan used
   exactly once as an accent. Phone is the real surface, so nothing here relies
   on hover and nothing wraps onto a second row of chrome. */
#xpostsSection {
  max-width: 1440px;
  margin-inline: auto;
  font-family: var(--font-brand);
  /* One 5-step scale at a true 1.25 ratio, fixed rem because this is product UI,
     not a marketing page. Every size in this workspace is one of these five —
     the old block had six sizes 1.08x apart, which is why nothing led the eye. */
  --x-meta: 0.75rem;        /* 12px — pills, metrics, helper lines */
  --x-body: 0.9375rem;      /* 15px — everything you read */
  --x-lead: 1.171875rem;    /* 18.75px — the draft you are writing */
  --x-pane: 1.4648rem;      /* 23.4px — pane titles, step numerals */
  --x-page: 1.831rem;       /* 29.3px — the page title */
  --x-rule: 1px solid var(--border);
  --x-surface: color-mix(in oklch, var(--ink) 3%, var(--card));
  --x-edge: color-mix(in oklch, var(--ink) 14%, var(--card));
}
#xStaffWorkspace:not(.hidden) { display: block !important; }
#xWorkspaceNav:not(.hidden) { display: flex !important; }

/* One heading, one line. The viewing label is a chip on that line rather than a
   third row of header, and the voice link has moved down to the panel it belongs
   to — the header used to say the same thing four ways. */
.x-workspace-heading { display: block; margin: 0 0 24px; }
.x-workspace-heading h1 { margin: 0; font-size: var(--x-page); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.x-workspace-sub { margin: 10px 0 0; max-width: 64ch; font-size: var(--x-body); line-height: 1.6; color: var(--text-secondary); }
#xpostsSection #xpostViewingLabel { margin: 0 0 0 8px; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklch, var(--primary) 9%, var(--card)); color: var(--primary-dark); font-size: var(--x-meta); font-weight: 600; white-space: nowrap; }
body.is-admin #xpostsSection #xpostViewingLabel,
body.is-demo #xpostsSection #xpostViewingLabel { display: inline-flex; align-items: center; }

#xpostsSection .x-text-button { border: 0; background: transparent; color: var(--primary-dark); padding: 8px 0; min-height: 44px; font: inherit; font-size: var(--x-body); font-weight: 600; cursor: pointer; text-align: left; }
#xpostsSection .x-text-button:hover { text-decoration: underline; }
#xpostsSection button:focus-visible, #xpostsSection summary:focus-visible, #xpostsSection a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* Tabs scroll sideways; they never wrap. At 375 "Account overview" used to drop
   onto a second line on its own, which read as a broken layout. */
#xpostsSection .xpost-tabs { gap: 2px; padding: 0; margin: 0 0 16px; background: transparent; border: 0; border-bottom: var(--x-rule); border-radius: 0; display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#xpostsSection .xpost-tabs::-webkit-scrollbar { display: none; }
#xpostsSection .xpost-tab { flex: 0 0 auto; min-height: 48px; padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--x-body); font-weight: 500; white-space: nowrap; box-shadow: none; }
#xpostsSection .xpost-tab:first-child { padding-left: 0; }
#xpostsSection .xpost-tab:hover { color: var(--ink); background: transparent; }
#xpostsSection .xpost-tab.active { border-bottom-color: var(--primary); color: var(--primary-dark); font-weight: 600; box-shadow: none; }

/* One link to the voice settings, in one place: introducing the panel that is
   built from that voice. It used to appear twice on the same screen. */
.x-workspace-voice { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.x-workspace-voice.hidden { display: none; }

/* No display property here: the UA [hidden] rule has to keep winning for connected recruits. */
.posting-connect-banner { margin: 0 0 24px; padding: 2px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }

/* "What works for you" — proof, not a chart tile. Flat: one panel, a ruled list
   inside it, no cards within cards. */
.posting-top-posts { margin: 0 0 32px; padding: 18px 20px; border: var(--x-rule); border-radius: 12px; background: var(--card); }
.posting-top-posts > summary { display: flex; align-items: center; gap: 10px; font-size: var(--x-body); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; padding: 4px 0; }
.posting-top-posts > summary::-webkit-details-marker { display: none; }
/* The single use of the brand cyan in this workspace: it marks the proof. */
.posting-top-posts > summary::before { content: ''; flex: 0 0 auto; width: 22px; height: 3px; border-radius: 2px; background: var(--brand-cyan); }
.posting-top-posts > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: translateY(-2px) rotate(45deg); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.posting-top-posts:not([open]) > summary::after { transform: translateX(-2px) rotate(-45deg); }
.posting-top-posts-pattern { margin: 12px 0 0; padding: 0 0 14px; font-size: var(--x-body); line-height: 1.65; color: var(--text); max-width: 62ch; }
.posting-top-post { display: grid; gap: 6px; margin: 0; padding: 14px 0; border: 0; border-top: var(--x-rule); border-radius: 0; }
.posting-top-post-text { margin: 0; font-size: var(--x-body); line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.posting-top-post-metrics { margin: 0; font-size: var(--x-meta); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.posting-top-posts-foot { margin: 0; padding-top: 14px; border-top: var(--x-rule); font-size: var(--x-meta); line-height: 1.7; color: var(--text-secondary); }
.posting-top-posts-foot .x-text-button { font-size: var(--x-meta); min-height: 0; padding: 0; white-space: nowrap; }
.posting-top-posts .posting-empty { margin: 12px 0 0; }

/* Two panes, unequal on purpose: 01 sets up the post, 02 is where the recruit
   decides, so 02 is wider, carries the surface and owns the blue button. */
.posting-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: start; }
.posting-step { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: var(--x-meta); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.posting-step-index { font-size: var(--x-pane); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.posting-layout h2 { margin: 0 0 10px; font-size: var(--x-pane); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.posting-description { margin: 0 0 20px; max-width: 58ch; font-size: var(--x-body); line-height: 1.65; color: var(--text-secondary); }
.posting-layout .profile-field { margin: 0 0 18px; }
.posting-layout textarea { display: block; width: 100%; resize: vertical; min-height: 132px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; font-size: var(--x-body); line-height: 1.65; color: var(--text); }
.posting-layout textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.posting-layout textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.posting-layout select { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: var(--x-body); color: var(--text); }
.posting-timing-field { max-width: 340px; }
.posting-timing-field label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: var(--x-meta); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.posting-timing-field label span { font-weight: 400; letter-spacing: normal; text-transform: none; }
.posting-layout .profile-inline-hint, .posting-action-help, #postingDraftStatus, #postingGenerateStatus { margin: 8px 0 16px; font-size: var(--x-meta); line-height: 1.7; color: var(--text-secondary); }
.posting-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.posting-actions button { min-height: 46px; font-family: inherit; font-size: var(--x-body); }
/* .btn-primary sets display: inline-flex later in this file, which outranks the UA rule for
   [hidden] — without this the Schedule button stays on screen for a recruit with no X. */
.posting-actions button[hidden] { display: none; }
/* One filled button per pane — and only ONE of the two is brand blue. Pane 01's
   generate is a step on the way, so it carries ink; the blue is spent on the
   pane-02 conversion, which is the only thing here that reaches X. */
.posting-brief .posting-actions .btn-primary { background: var(--ink); border-color: var(--ink); }
.posting-brief .posting-actions .btn-primary:not(:disabled):hover:not(:focus-visible) { background: color-mix(in oklch, var(--ink) 82%, var(--primary)); border-color: color-mix(in oklch, var(--ink) 82%, var(--primary)); }
.posting-brief .posting-actions .btn-primary:disabled { background: color-mix(in oklch, var(--ink) 40%, white); border-color: transparent; }

.posting-editor { padding: 24px; border: 1px solid var(--x-edge); border-radius: 14px; background: var(--card); }
.posting-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.posting-editor-heading .x-text-button { flex: 0 0 auto; }
/* The draft is the largest body text in the workspace, because writing it is
   the whole job. */
.posting-editor #posting-draft { min-height: 172px; background: var(--x-surface); font-size: var(--x-lead); line-height: 1.55; }
#postingDraftLimit { font-variant-numeric: tabular-nums; }
.posting-media-needed { margin: -4px 0 16px; padding: 12px 14px; border: var(--x-rule); border-radius: 10px; background: color-mix(in oklch, var(--primary) 7%, var(--card)); font-size: var(--x-meta); line-height: 1.6; }
.posting-media-needed[hidden] { display: none; }
.posting-media-needed a { color: var(--primary-dark); font-weight: 600; }
.posting-film { min-width: 0; margin: 0; padding: 18px 0; border: 0; border-top: var(--x-rule); border-bottom: var(--x-rule); }
.posting-film legend { padding: 0; font-size: var(--x-body); font-weight: 700; color: var(--ink); }
.posting-film > p { margin: 4px 0 12px; font-size: var(--x-meta); line-height: 1.6; color: var(--text-secondary); }
.posting-film-options { display: grid; gap: 8px; max-height: 256px; overflow-y: auto; overscroll-behavior: contain; }
.posting-film-option { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--x-surface); cursor: pointer; }
.posting-film-option:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 7%, var(--card)); }
.posting-film-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.posting-film-option:has(input:disabled) { cursor: default; opacity: .72; }
.posting-film-option input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--primary); }
.posting-film-option span { min-width: 0; }
.posting-film-option strong, .posting-film-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posting-film-option strong { font-size: var(--x-meta); color: var(--text); }
.posting-film-option small { margin-top: 3px; color: var(--text-secondary); font-size: var(--x-meta); }
.posting-film-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; color: var(--text-secondary); font-size: var(--x-meta); line-height: 1.5; }
.posting-film-foot .x-text-button, .posting-film-empty .x-text-button { min-height: 40px; padding: 4px 0; flex: 0 0 auto; }
.posting-film-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 9px; background: var(--x-surface); }
.posting-film-empty p { margin: 0; max-width: 48ch; color: var(--text-secondary); font-size: var(--x-meta); line-height: 1.65; }
.posting-voice-choice { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; font-size: var(--x-body); line-height: 1.55; cursor: pointer; }
.posting-voice-choice input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary); }
.posting-voice-choice small { display: block; margin-top: 4px; font-size: var(--x-meta); color: var(--text-secondary); }
.posting-option { padding: 18px 0; border-top: var(--x-rule); }
.posting-option strong { font-size: var(--x-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.posting-option-caption { margin: 10px 0; font-size: var(--x-body); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.posting-option-quality { margin: 0 0 10px; font-size: var(--x-meta); color: var(--text-secondary); }
.posting-option-details { margin-bottom: 12px; font-size: var(--x-meta); line-height: 1.7; color: var(--text-secondary); }
.posting-option-details summary { padding: 8px 0; cursor: pointer; }

/* Connecting X is one calm line, not an alert. */
#posting-connect-x { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 14px 0 0; padding: 12px 14px; border: var(--x-rule); border-radius: 10px; background: var(--x-surface); font-size: var(--x-meta); color: var(--text-secondary); }
#posting-connect-x[hidden] { display: none; }
#posting-connect-x .x-text-button { min-height: 40px; padding: 4px 0; }

/* Saved drafts: one line per draft at every width. The pill sits inline with the
   text and the action is an icon button with a real name, so a phone row is a
   row and not three stacked lines with a blue "Delete" under each. */
#postingDraftList { margin-top: 24px; padding-top: 20px; border-top: var(--x-rule); }
#postingDraftList h3 { margin: 0 0 6px; font-size: var(--x-meta); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.posting-empty { font-size: var(--x-body); line-height: 1.65; color: var(--text-secondary); }
.posting-saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-bottom: var(--x-rule); }
.posting-saved-row:last-child { border-bottom: 0; }
.posting-saved-draft { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 48px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--x-body); line-height: 1.5; text-align: left; cursor: pointer; }
.posting-saved-draft:hover .posting-draft-text { color: var(--primary-dark); }
.posting-draft-text { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.posting-draft-pill { flex: 0 0 auto; margin: 0; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-secondary); font-size: var(--x-meta); font-weight: 600; white-space: nowrap; }
.posting-draft-pill[data-status="scheduled"] { background: color-mix(in oklch, var(--primary) 10%, var(--card)); border-color: color-mix(in oklch, var(--primary) 28%, var(--card)); color: var(--primary-dark); }
.posting-draft-pill[data-status="publishing"] { background: color-mix(in oklch, var(--primary) 16%, var(--card)); border-color: color-mix(in oklch, var(--primary) 34%, var(--card)); color: var(--primary-dark); }
.posting-draft-pill[data-status="posted"] { background: color-mix(in oklch, var(--color-text-success) 10%, var(--card)); border-color: color-mix(in oklch, var(--color-text-success) 28%, var(--card)); color: var(--color-text-success); }
.posting-draft-pill[data-status="failed"] { background: color-mix(in oklch, var(--error) 8%, var(--card)); border-color: color-mix(in oklch, var(--error) 30%, var(--card)); color: var(--error-strong); }
.posting-draft-media { flex: 0 0 auto; color: var(--primary-dark); font-size: var(--x-meta); font-weight: 600; }
.posting-saved-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.posting-row-action { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.posting-row-action svg { width: 18px; height: 18px; }
.posting-row-action:hover { background: color-mix(in oklch, var(--ink) 6%, var(--card)); color: var(--ink); }
.posting-draft-delete:hover { background: color-mix(in oklch, var(--error) 9%, var(--card)); color: var(--error-strong); }
@media (prefers-reduced-motion: reduce) {
  .posting-top-posts > summary::after { transition: none; }
}
#xpostsSection .xpost-page-header { padding: 0 0 16px; margin: 0; border: 0; background: transparent; }
#xpostsSection .xpost-header-left { flex-direction: column; align-items: flex-start; gap: 2px; }
#xpostPageTitle { font-size: 1.5rem; margin: 0; letter-spacing: -.025em; }
#xpostsSection #xpostViewingLabel { margin-top: 12px; font-size: .8125rem; color: var(--text-secondary); }
#xpostsSection .xpost-connection-status { font-size: .75rem; padding: 4px 8px; border-radius: 4px; }
.x-calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 8px 0 20px; }
#xpostsSection .xpost-month-nav { justify-content: flex-start; gap: 8px; margin: 0; }
#xpostsSection .xpost-month-label { font-size: 1.125rem; min-width: 0; padding: 0 8px; }
#xpostsSection .xpost-nav-btn { width: 40px; height: 44px; }
.x-calendar-view { display: flex; border: 1px solid var(--border); border-radius: 6px; padding: 3px; gap: 4px; }
.x-calendar-view button { font: inherit; font-size: .8125rem; min-height: 36px; padding: 6px 16px; color: var(--text-secondary); border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.x-calendar-view button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px #050a2414; }
#xpostsSection .xpost-filter-group { border: 0; border-radius: 0; padding: 0; background: transparent; gap: 8px; flex-wrap: wrap; }
#xpostsSection .xpost-filter-btn { border-radius: 6px; font-size: .8125rem; min-height: 40px; padding: 8px 14px; }
#xpostsSection .xpost-filter-btn.active { color: var(--primary-dark); background: color-mix(in oklch, var(--primary) 9%, var(--card)); box-shadow: none; }
#xpostsSection .xpost-calendar-status { font-size: .8125rem; margin: 4px 0 20px; line-height: 1.6; }
#xpostsSection .xpost-day-cell { cursor: default; min-width: 0; min-height: 126px; padding: 6px; background: var(--card); }
#xpostsSection .xpost-day-cell.other-month { background: var(--bg); opacity: 1; }
#xpostsSection .xpost-day-number { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; padding: 4px 6px; margin: 0 0 6px; border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: .8125rem; color: var(--text-secondary); cursor: pointer; }
#xpostsSection .today .xpost-day-number { background: var(--primary); color: white; font-weight: 600; }
.x-day-add { opacity: 0; }
.xpost-day-number:hover .x-day-add, .xpost-day-number:focus-visible .x-day-add { opacity: 1; }
#xpostsSection .xpost-post-pill { width: 100%; height: auto; min-height: 44px; padding: 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; text-indent: 0; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; box-shadow: none; opacity: 1; animation: none; transform: none; font: inherit; font-size: .75rem; line-height: 1.5; }
#xpostsSection .xpost-post-pill:hover { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 4%, var(--card)); }
#xpostsSection .xpost-pill-status { font-size: .625rem; font-weight: 600; color: var(--text-secondary); opacity: 1; }
#xpostsSection .status-scheduled .xpost-pill-status { color: var(--primary-dark); }
#xpostsSection .status-posted .xpost-pill-status { color: #166534; }
#xpostsSection .status-failed .xpost-pill-status { color: #991b1b; }
#xpostsSection .xpost-pill-text { text-indent: 0; overflow-wrap: anywhere; }
.x-calendar-more summary { font-size: .6875rem; color: var(--primary-dark); padding: 8px 2px; cursor: pointer; }
.x-calendar-more .xpost-post-pill { margin-bottom: 4px !important; }
#xpostsSection .xpost-drafts-tray { border: 1px solid var(--border); background: transparent; padding: 16px; border-radius: 8px; margin: 0 0 24px; }
#xpostsSection .xpost-drafts-tray-title { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.x-agenda-day { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--border); padding: 20px 0; }
.x-agenda-day h3 { font-size: .875rem; margin: 8px 0; }
.x-agenda-day > div { display: grid; gap: 8px; }
#xpostsSection .x-agenda-day .xpost-post-pill { padding: 16px; font-size: .875rem; }
#xpostsSection .x-agenda-day .xpost-pill-text { display: block; }
.x-calendar-empty { padding: 40px 24px; text-align: center; border: 1px solid var(--border); border-radius: 8px; font-size: .9375rem; background: var(--card); }
.x-calendar-empty p { max-width: 42ch; margin: 8px auto 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.7; }
@media (max-width: 1100px) {
  .posting-layout { gap: 28px; }
  .posting-editor { padding: 20px; }
  .posting-actions { gap: 8px; }
}
@media (max-width: 900px) {
  .posting-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* The type scale does not shrink — this is product UI on the surface it was
     designed for, and a parent reading at arm's length needs the size. */
  .x-workspace-heading { margin-bottom: 20px; }
  .posting-top-posts { padding: 16px; }
  .x-workspace-voice { justify-content: flex-start; }
  #xpostsSection .xpost-tabs { margin-bottom: 12px; }
  .posting-layout { gap: 32px; }
  .posting-editor { padding: 20px 16px; }
  .posting-film-foot { align-items: flex-start; flex-direction: column; gap: 4px; }
  .posting-actions > .btn-primary, .posting-actions > .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .x-calendar-heading { flex-wrap: wrap; gap: 12px; }
  #xpostsSection .xpost-month-label { font-size: .9375rem; padding: 0; }
  #xpostsSection .xpost-month-nav { gap: 4px; }
  #xpostsSection .xpost-month-nav .btn-secondary { padding: 8px 10px; }
  #xpostsSection .xpost-header-left { align-items: flex-start; }
  #xpostsSection .xpost-calendar { overflow-x: auto; }
  #xpostsSection .xpost-calendar-header, #xpostsSection .xpost-calendar-grid { min-width: 720px; }
  .x-agenda-day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
}
@media (max-width: 700px) {
}

/* ==========================================
   YFS-3178 — one primary action per staff tab header.
   The shared band carries the title, the connection status and a help link
   and no buttons at all; each tab owns its own actions.
   ========================================== */
.xpost-header-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#xpostsSection .xpost-help-link { padding: 6px 0; font-size: .8125rem; font-weight: 500; color: var(--primary-dark); }
#xpostsSection .xpost-help-link:hover { text-decoration: underline; }

/* Content plans: Create a plan (primary) · Import Game Plan (secondary) · overflow. */
#xpostsSection .xplans-overview { margin-bottom: 16px; }
#xpostsSection .xplans-actions .btn-primary,
#xpostsSection .xplans-actions .btn-secondary { min-height: 44px; white-space: nowrap; }

/* The two refresh actions live behind one "more" menu, each with a plain
   explanation — the labels alone were not a distinction anyone could make. */
.x-overflow { position: relative; }
.x-overflow > summary { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-secondary); font-size: 1rem; line-height: 1; cursor: pointer; list-style: none; }
.x-overflow > summary::-webkit-details-marker { display: none; }
.x-overflow > summary:hover, .x-overflow[open] > summary { color: var(--text); border-color: var(--primary); }
.x-overflow-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(21rem, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 12px 28px #050a2418; text-align: left; }
.x-overflow-item { display: block; width: 100%; min-height: 40px; padding: 8px 10px 2px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.x-overflow-item:hover { text-decoration: underline; }
.x-overflow-hint { margin: 0 0 6px; padding: 0 10px 8px; color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.x-overflow-hint:last-child { margin-bottom: 0; padding-bottom: 2px; }

/* Calendar owns New Post; Account overview owns the X connection. */
.x-calendar-new { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; font-size: .875rem; white-space: nowrap; }
.x-calendar-new svg { flex-shrink: 0; }
.xaudit-connection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.xaudit-connection p { margin: 0; max-width: 52ch; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.xaudit-connection .btn-secondary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; font-size: .875rem; white-space: nowrap; }
.xaudit-connection svg { flex-shrink: 0; }

@media (max-width: 700px) {
  /* Phone: the header stacks, but its action row stays on ONE line. */
  #xpostsSection .xplans-overview { flex-direction: column; align-items: stretch; gap: 12px; }
  #xpostsSection .xplans-actions { flex-wrap: nowrap; }
  #xpostsSection .xplans-actions .btn-primary,
  #xpostsSection .xplans-actions .btn-secondary { flex: 0 1 auto; min-width: 0; padding: 10px 12px; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; }
  .x-calendar-new { flex: 1 1 100%; justify-content: center; }
  /* Account overview: same stack, so the title is not squeezed by its buttons. */
  #xpostsSection .xaudit-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  #xpostsSection .xaudit-actions .btn-primary,
  #xpostsSection .xaudit-actions .btn-secondary { flex: 1 1 auto; min-height: 44px; }
  .xaudit-connection .btn-secondary { flex: 1 1 100%; justify-content: center; }
}

/* Help is a reading surface: one quiet column, native expandable topics. */
.help-content { max-width: 72ch; }
.help-intro { margin: 0 0 var(--space-lg); color: var(--text-secondary); }
.help-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.help-search label { grid-column: 1 / -1; font-weight: 600; }
.help-search input { min-width: 0; width: 100%; font: inherit; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.help-results { color: var(--muted); margin: var(--space-md) 0; font-size: .875rem; }
.help-topic { border-top: 1px solid var(--border); padding: var(--space-sm) 0 var(--space-md); }
.help-topic summary { cursor: pointer; font-size: 1rem; font-weight: 600; padding: var(--space-sm) 0; }
.help-topic ol, .login-help ol { padding-left: var(--space-lg); line-height: 1.7; }
.help-topic li + li, .login-help li + li { margin-top: var(--space-sm); }
.help-topic a, .help-contact a, .login-help a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.help-topic a, .help-contact a { display: inline-block; padding: var(--space-sm) 0; min-height: 44px; }
.help-contact { border-top: 1px solid var(--border); margin-top: var(--space-lg); padding-top: var(--space-md); }
.help-contact p { margin-bottom: 0; }
.help-empty { padding: var(--space-lg) 0; }
.help-empty h2 { font-size: 1.25rem; }
.help-topic[hidden], .help-empty[hidden] { display: none; }
.login-help { text-align: left; margin-top: var(--space-lg); font-size: .875rem; line-height: 1.7; }
.login-help summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; padding: var(--space-sm) 0; }
.help-search :focus-visible, .help-topic :focus-visible, .help-contact a:focus-visible, .login-help :focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 4px; }
@media (max-width: 480px) {
  .help-search { grid-template-columns: minmax(0, 1fr); }
  .help-search button { justify-self: start; }
}