*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Shared loading + skeleton primitives ─────────────────────────── Use .app-loader for centered "we're fetching" placeholders that replace the bare "Loading..." text. Use .skel-line / .skel-block for inline skeleton placeholders shaped like the content that will replace them (pre-allocates height = no layout shift).

Loading…

*/ .app-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: #777; font-size: 0.85rem; } .app-loader-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.08); border-top-color: #bfe8fb; border-radius: 50%; animation: app-loader-spin 0.8s linear infinite; } @keyframes app-loader-spin { to { transform: rotate(360deg); } } .app-loader-text { color: #888; letter-spacing: 0.02em; } .skel-line, .skel-block { background: linear-gradient(90deg, #1a1a1a 0%, #232323 50%, #1a1a1a 100%); background-size: 200% 100%; border-radius: 6px; animation: skel-shimmer 1.4s ease-in-out infinite; } .skel-line { height: 14px; margin-bottom: 8px; } .skel-block { height: 80px; margin-bottom: 12px; } @keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .skel-line, .skel-block, .app-loader-spinner { animation: none; } } html { overflow-x: hidden; max-width: 100%; } body { background-color: #0d0d0d; color: #ffffff; font-family: Arial, sans-serif; min-height: 100vh; max-width: 100%; overflow-x: hidden; } /* ── Global form base styles ──────────────────────────────────────────── Make every bare ,

in the app default to
   the dark theme. Specific classes (.auth-input, .stat-input, etc.)
   continue to override these because class selectors win on specificity.
   Add new inputs without worrying about styling them — they inherit. */
input,
select,
textarea {
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #bfe8fb;
}

input::placeholder,
textarea::placeholder {
  color: #666;
}

textarea { resize: vertical; }

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Native chevron, hand-drawn so it matches the muted text palette. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Checkbox + radio: keep native shape, just paint them ICE Blue. */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: #bfe8fb;
  background: transparent;
  border: 0;
  padding: 0;
  width: auto;
  cursor: pointer;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #bfe8fb55;
  outline-offset: 2px;
}

/* File input — keep native (browser-styled), but tint the picker button
   so it doesn't break the dark theme. */
input[type="file"] {
  background: transparent;
  border: 0;
  padding: 0;
  color: #ccc;
}

/* Date / time pickers — invert the calendar icon on dark backgrounds. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
  cursor: pointer;
}

/* ── Global scrollbar (WebKit / Chromium / Edge / Safari) ───────────────
   Subtle dark track + slightly lighter thumb. Firefox uses
   scrollbar-color via the body rule above (Firefox-only property,
   ignored by other engines). */
* {
  scrollbar-color: #2a2a2a #0d0d0d;
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #0d0d0d;
}
*::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
}
*::-webkit-scrollbar-corner {
  background: #0d0d0d;
}

/* ── Sidebar Layout ─────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  background-color: #111;
  border-right: 1px solid #1e1e1e;
  display: flex;
  flex-direction: column;
  z-index: 200;
  padding: 28px 20px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
  flex-shrink: 0;
}

.sidebar-logo {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.sidebar-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}

.sidebar-title span {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: #555;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Allow the nav region to scroll when buttons overflow the drawer
     height (small phones, admin signed in with all sections expanded).
     min-height: 0 is required for a flex child to actually shrink
     below its content size — without it, overflow-y: auto is a no-op. */
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.sidebar-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.sidebar-btn:hover {
  background-color: #1a1a1a;
  color: #bfe8fb;
}

.sidebar-btn.active {
  background-color: #bfe8fb18;
  color: #bfe8fb;
  border: 1px solid #bfe8fb22;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid #1e1e1e;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-display {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 0 2px;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #bfe8fb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 0.65rem;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main content offset */
.page {
  margin-left: 220px;
  padding: 36px 32px;
}

/* Mobile top bar (hidden on desktop) */
.topbar {
  display: none;
}

/* Sidebar overlay (mobile dim) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 190;
}

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

.btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.btn:hover { opacity: 0.75; }

.btn-logout {
  background: none;
  border: 1px solid #333;
  border-radius: 6px;
  color: #888;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 10px;
}

.btn-logout:hover { color: #fff; border-color: #555; }

.btn-admin {
  background: none;
  border: 1px solid #bfe8fb44;
  border-radius: 6px;
  color: #bfe8fb;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 12px;
}

.btn-admin:hover { background-color: #bfe8fb18; }

/* Auth Overlay */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)), url('../assets/bg.webp') center/cover no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  /* Reserve room for iOS notch / status bar + home indicator so the
     auth card never slides under them (which makes the logo + title
     untappable on iPhones). */
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  z-index: 100;
}

.auth-overlay.hidden { display: none; }

.auth-card {
  background-color: rgba(13, 13, 13, 0.88);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 36px;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(6px);
  /* Auto margins vertically center the card when the overlay has free space;
     when the form is taller than the viewport the overlay scrolls normally. */
  margin-top: auto;
  margin-bottom: auto;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

.auth-brand-logo {
  height: 64px;
  width: auto;
  margin-bottom: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-brand-logo:hover { opacity: 0.8; }

.auth-brand-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 6px;
  cursor: pointer;
  transition: color 0.15s;
}
.auth-brand-title:hover { color: #bfe8fb; }

.auth-brand-sub {
  font-size: 0.8rem;
  color: #888;
  letter-spacing: 0.01em;
}

.auth-divider {
  height: 1px;
  background-color: #2a2a2a;
  margin-bottom: 24px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #2a2a2a;
}

.auth-tab {
  background: none;
  border: none;
  color: #666;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-tab.active {
  color: #bfe8fb;
  border-bottom-color: #bfe8fb;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-field label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}

.auth-input {
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.auth-input:focus { border-color: #bfe8fb; }

.auth-select {
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
  appearance: none;
}

.auth-select:focus { border-color: #bfe8fb; }
.auth-select option { background-color: #1a1a1a; color: #fff; }

/* Player combobox (search-as-you-type select replacement) */
.player-combo {
  position: relative;
  width: 100%;
}
.player-combo-input { padding-right: 36px; }
.player-combo-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}
.player-combo-clear:hover { color: #fff; background-color: #1f1f1f; }
.player-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.player-combo-item {
  padding: 8px 12px;
  cursor: pointer;
  color: #ddd;
  font-size: 0.88rem;
  border-bottom: 1px solid #1a1a1a;
}
.player-combo-item:last-child { border-bottom: 0; }
.player-combo-item:hover,
.player-combo-item.active {
  background-color: #1c1c1c;
  color: #fff;
}
.player-combo-item-sub {
  font-size: 0.7rem;
  color: #666;
  margin-top: 2px;
}
.player-combo-empty {
  padding: 14px 12px;
  color: #666;
  font-size: 0.82rem;
  text-align: center;
}

.auth-error {
  font-size: 0.75rem;
  color: #f87171;
  min-height: 18px;
  margin-bottom: 10px;
}

.auth-submit {
  background-color: #bfe8fb;
  color: #0d0d0d;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.15s;
}

.auth-submit:hover { opacity: 0.85; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* Section divider inside the profile-setup modal — separates the
   player's own info from the parent-contact block so it doesn't read
   as one long form. */
.profile-section-divider {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-section-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #bfe8fb;
}
.profile-section-sub {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.45;
}

/* Read-only field in the Edit Profile modal (e.g. login email) — looks like
   an auth-input but visibly non-editable. */
.pe-readonly-field {
  background-color: #161616;
  border: 1px solid #242424;
  border-radius: 6px;
  color: #9a9a9a;
  font-size: 0.9rem;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  word-break: break-all;
}
.pe-readonly-note {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  color: #777;
  line-height: 1.4;
}

/* Player Profile Card */
.player-profile-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.player-profile-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(191,232,251,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.player-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
}

.player-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #bfe8fb44;
  background-color: #0d0d0d;
  object-fit: cover;
  display: block;
  padding: 6px;
}

.player-avatar.has-photo {
  padding: 0;
  border-color: #bfe8fb88;
}

.player-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.player-avatar-overlay span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
}

.player-avatar-wrap:hover .player-avatar-overlay {
  opacity: 1;
}

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

.player-profile-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.player-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #333;
  color: #888;
  white-space: nowrap;
}

.player-tag.highlight {
  border-color: #bfe8fb44;
  color: #bfe8fb;
  background-color: #bfe8fb0d;
}

/* ── Player Goal Card (My Game homepage, under profile) ─────────── */
.player-goal-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.player-goal-card:hover {
  border-color: #bfe8fb55;
}

.player-goal-card::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(191,232,251,0.05) 0%, transparent 70%);
  pointer-events: none;
}

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

.player-goal-card-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfe8fb;
}

.player-goal-edit-btn {
  background: none;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  color: #888;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.player-goal-edit-btn:hover {
  color: #bfe8fb;
  border-color: #bfe8fb44;
}

.player-goal-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.player-goal-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.player-goal-row-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  flex-shrink: 0;
  width: 90px;
}

.player-goal-row-value {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
}

.player-goal-row-value.level {
  color: #bfe8fb;
  letter-spacing: 0.02em;
}

.player-goal-row-value.empty {
  color: #555;
  font-weight: 500;
  font-style: italic;
}

.player-goal-empty-cta {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.5;
}

.player-goal-empty-cta strong { color: #bfe8fb; }

@media (max-width: 480px) {
  .player-goal-card { padding: 14px 16px; }
  .player-goal-row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .player-goal-row-label { width: auto; }
}

/* Level pick options in the goal edit modal */
.goal-level-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.goal-level-option {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  color: #888;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.goal-level-option:hover {
  border-color: #bfe8fb44;
  color: #fff;
}

.goal-level-option.selected {
  background: rgba(191,232,251,0.1);
  border-color: #bfe8fb;
  color: #bfe8fb;
}

/* Input Section */
.input-section {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.input-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.input-date {
  width: 160px;
  font-size: 0.8rem;
  padding: 5px 10px;
}

.input-section-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
  margin-bottom: 16px;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-field label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.tooltip-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #444;
  color: #666;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.tooltip-box {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 400;
  color: #ccc;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  z-index: 10;
  pointer-events: none;
}

.tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3a3a3a;
}

.tooltip-wrap:hover .tooltip-box { display: block; }

.stat-input {
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 6px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.stat-input:focus { border-color: #bfe8fb; }

.stat-select {
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 6px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
  appearance: none;
}

.stat-select:focus { border-color: #bfe8fb; }
.stat-select option { background-color: #1a1a1a; color: #fff; }

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(87%) sepia(20%) saturate(600%) hue-rotate(175deg) brightness(105%);
  cursor: pointer;
}

.submit-btn {
  background-color: #bfe8fb;
  color: #0d0d0d;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 24px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.submit-btn:hover { opacity: 0.85; }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Summary Cards */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.trend-arrow {
  font-size: 2rem;
  line-height: 1;
}

.trend-arrow.up { color: #4ade80; }
.trend-arrow.down { color: #f87171; }
.trend-arrow.neutral { color: #555; }

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

.stat-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.stats .stat-card:hover {
  border-color: rgba(191, 232, 251, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(191, 232, 251, 0.10);
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
}

.stat-row {
  display: flex;
  gap: 24px;
}

.stat-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 400;
  color: #ffffff;
}

.stat-sub {
  font-size: 0.65rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  background-color: #2a2a2a;
  margin: 0 4px;
}

.avg-val { color: #ffffff; }
.last-val { color: #bfe8fb; }

/* Summary card overrides — white tiles */
.summary-cards .stat-card {
  background-color: #bfe8fb;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.45), 0 0 8px rgba(255, 255, 255, 0.25);
}

.summary-cards .stat-label {
  color: #666;
}

.summary-cards .stat-value {
  color: #0d0d0d;
}

.summary-cards .stat-sub {
  color: #999;
}

.summary-cards .trend-arrow.up    { color: #16a34a; }
.summary-cards .trend-arrow.down  { color: #dc2626; }
.summary-cards .trend-arrow.neutral { color: #aaa; }

/* Section headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Empty state cards */
.empty-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.empty-icon svg {
  width: 36px;
  height: 36px;
  stroke: #555;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-text {
  font-size: 0.85rem;
  color: #666;
}

/* Game Log */
.game-log-row {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 110px repeat(9, 1fr) 90px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: border-color 140ms ease;
}
.game-log-row:hover {
  border-color: rgba(191, 232, 251, 0.28);
}

.game-log-stats-scroll {
  display: contents;
}

.game-log-index {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid #2a2a2a;
  padding-left: 12px;
}

.game-log-index-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #bfe8fb;
}

.game-log-index-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

.game-log-date {
  font-size: 0.75rem;
  color: #888;
}

.game-log-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-log-stat-val {
  font-size: 0.95rem;
  font-weight: 500;
}

.game-log-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

/* Mobile-only expand chevron — hidden by default on desktop. The
   @media (max-width: 768px) block shows it. UX_AUDIT_v3 #17. */
.game-log-expand { display: none; }

.game-log-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #444;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
}
.game-log-delete:hover { color: #ef4444; }

/* Leaderboard Modal */
.lb-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.lb-overlay.hidden { display: none; }

/* About Modal */
.about-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.about-overlay.hidden { display: none; }

.about-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}

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

.about-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
}

.about-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.about-close:hover { color: #fff; }

.about-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 24px;
}

.about-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #2a2a2a;
}

.about-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.about-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 0.8rem;
  text-align: center;
  padding: 16px;
}

.about-instructions h3 {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
  margin-bottom: 14px;
}

.about-instructions ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-instructions li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #ccc;
}

.about-instructions li strong {
  color: #fff;
}

.lb-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
}

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

.lb-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lb-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.lb-close:hover { color: #fff; }

.lb-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
}
.lb-section-icon {
  display: inline-flex;
  width: 18px; height: 18px;
}
.lb-section-icon svg { width: 100%; height: 100%; }
/* Per-section color so weekly + overall don't look like one big block. */
.lb-section-weekly  { color: #fbbf24; }
.lb-section-overall { color: #bfe8fb; }

/* Admin leaderboard table — fixed rank column so #1 / #2 / #3 / #4
   never misalign across rows. */
.lb-table-admin .lb-rank-col,
.lb-table-admin .lb-rank-cell {
  width: 56px;
  text-align: center;
  font-weight: 800;
}
.lb-table-admin .lb-num-muted   { color: #888; }
.lb-table-admin .lb-num-primary { color: #bfe8fb; font-weight: 700; }
.lb-table-admin tbody tr { transition: background-color 120ms ease; }
.lb-table-admin tbody tr:hover {
  background-color: rgba(191, 232, 251, 0.06);
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}

.lb-table th {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  text-align: left;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid #2a2a2a;
}

.lb-table th:last-child { text-align: right; padding-right: 0; }

/* Click-to-sort headers (Admin Player List). */
.lb-table th.apl-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 120ms ease;
}
.lb-table th.apl-sortable:hover { color: #999; }
.lb-table th.apl-sortable.apl-sorted { color: #bfe8fb; }
.lb-table th .apl-sort-ind {
  display: inline-block;
  font-size: 0.7em;
  margin-left: 1px;
  color: #bfe8fb;
}

.lb-table td {
  padding: 10px 12px 10px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid #1e1e1e;
}

.lb-table td:last-child { text-align: right; padding-right: 0; font-weight: 700; color: #bfe8fb; }

.lb-rank {
  font-size: 0.75rem;
  color: #555;
  width: 28px;
}

.lb-rank-gold   { color: #f59e0b; font-weight: 700; }
.lb-rank-silver { color: #9ca3af; font-weight: 700; }
.lb-rank-bronze { color: #b45309; font-weight: 700; }

.lb-player { color: #ddd; }
.lb-you { color: #bfe8fb; font-weight: 600; }

.lb-empty {
  font-size: 0.8rem;
  color: #555;
  text-align: center;
  padding: 24px 0;
}

.lb-divider {
  height: 1px;
  background-color: #2a2a2a;
  margin-bottom: 24px;
}

/* Admin Dashboard */
.admin-page { display: none; }

.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #2a2a2a;
}

.admin-tab {
  background: none;
  border: none;
  color: #666;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.admin-tab.active {
  color: #bfe8fb;
  border-bottom-color: #bfe8fb;
}

.admin-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfe8fb;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1e1e1e;
}

/* ── Admin Overview: multi-column block grid ───────────────────────
   Each .ov-block is one section (label + content). The grid auto-fits
   2 columns on standard desktop (>= 1100px) and 3 columns on very-wide
   screens (>= 1500px). .ov-block-full spans every column. Mobile
   collapses to 1 column.

Inside .ov-blocks-grid we also shrink the section-label top margin
   and let .ov-stack-2 / .ov-cats-3 modifiers reflow the inner card
   grids so 4-card and 9-card layouts compress sensibly. */
.ov-blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 22px;
  margin-bottom: 24px;
}
.ov-block { min-width: 0; }
.ov-block .admin-section-label { margin-top: 0; }
.ov-block .admin-overview-grid,
.ov-block .admin-cats-grid,
.ov-block .admin-lanes-grid {
  margin-bottom: 0;
}
/* Stack 4-card grids into a 2x2 inside half-width blocks so the values
   don't shrink. Applies only inside .ov-blocks-grid scope.
   The general selector (without .ov-stack-2) also catches grids that
   are injected by JS renderers (e.g. Cert Progress's 4-hero cards) —
   without this, their default 4-col layout demands ~600px min-content
   and forces the parent column to break to a new full-width row. */
.ov-blocks-grid .ov-block .admin-overview-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ov-blocks-grid .ov-block.ov-block-full .admin-overview-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ov-blocks-grid .ov-stack-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* Children of .ov-block need min-width:0 to participate in the parent
   grid's track shrinking — otherwise their min-content can grow the
   half-column past 50% and push the sibling block to the next row. */
.ov-blocks-grid .ov-block > * { min-width: 0; }
/* Compress the 9-card Avg-Stats row into 3x3 so it fits one column. */
.ov-blocks-grid .ov-cats-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ov-blocks-grid .admin-overview-card { padding: 14px 16px; }
.ov-blocks-grid .admin-overview-val  { font-size: 1.45rem; }
.ov-blocks-grid .admin-cat-card      { padding: 10px 6px; }
.ov-blocks-grid .admin-cat-val       { font-size: 1.05rem; }

@media (min-width: 1100px) {
  .ov-blocks-grid { grid-template-columns: repeat(2, 1fr); }
  .ov-block-full  { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  .ov-blocks-grid { grid-template-columns: repeat(3, 1fr); }
  .ov-block-full  { grid-column: 1 / -1; }
  /* At 3-col widths the 9-card grid has room to go back to 4-5 wide
     for a more compact glance. */
  .ov-blocks-grid .ov-cats-3 { grid-template-columns: repeat(3, 1fr); }
}

.admin-overview-sub {
  font-size: 0.65rem;
  color: #444;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.admin-overview-card {
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 18px 20px;
}

.admin-overview-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

.admin-overview-val {
  font-size: 1.75rem;
  font-weight: 400;
  color: #fff;
}

.admin-cats-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 10px;
}

.admin-cats-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.admin-cat-card {
  background-color: #141414;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
}

.admin-cat-val {
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
}

.admin-cat-name {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  margin-top: 4px;
}

/* Admin Players table — stronger hover signal, semantic class names
   for cell tinting (replaces inline styles), and a hide-cols pattern
   for narrow viewports so the table stops needing horizontal scroll. */
.admin-player-row { cursor: pointer; }
.admin-player-row td { transition: background-color 120ms ease; }
.admin-player-row:hover td {
  background-color: rgba(191, 232, 251, 0.06);
}
.admin-player-row:hover .apl-name { color: #bfe8fb; }
.apl-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  transition: color 120ms ease;
}
.apl-email {
  color: #666;
  font-size: 0.72rem;
  font-weight: 400;
  margin-top: 2px;
}
.apl-grade,
.apl-pos { color: #aaa; }
.apl-school,
.apl-club,
.apl-best { color: #888; }
.apl-cert { color: #ccc; font-weight: 600; }
.apl-games { color: #888; }
.apl-avg {
  color: #bfe8fb;
  font-weight: 800;
  font-size: 0.98rem;
}
.apl-best-cell { text-align: right; }

/* Pending row — TR roster player who hasn't signed up on the app yet.
   Greyed-out so admin can scan past them, but still in the list so
   nobody "disappears" between TR and the player app. No drill-down. */
.admin-player-row-pending td {
  opacity: 0.55;
  cursor: default;
}
.admin-player-row-pending:hover td {
  background-color: transparent;
}
.admin-player-row-pending .apl-name {
  color: #aaa;
  font-weight: 500;
}
.admin-player-row-pending:hover .apl-name { color: #aaa; }
.apl-pending-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Tablet and below: drop the lowest-priority columns so the remaining
   info (Name, Grade, Cert%, Games, Avg) fits without horizontal scroll. */
@media (max-width: 820px) {
  .lb-table th:nth-child(4),  /* School */
  .lb-table th:nth-child(5),  /* Club */
  .apl-school,
  .apl-club { display: none; }
}
@media (max-width: 560px) {
  .lb-table th:nth-child(3),  /* Pos */
  .lb-table th:nth-child(7),  /* Games */
  .lb-table th:nth-child(9),  /* Best */
  .apl-pos,
  .apl-games,
  .apl-best-cell { display: none; }
  .lb-table th, .lb-table td { padding: 10px 8px; }
}

/* ── Admin Overview: Action Lanes ──────────────────────────────────── */
.admin-lanes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.admin-lane {
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px 0 6px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.admin-lane-danger { border-top: 3px solid #f87171; }
.admin-lane-fire   { border-top: 3px solid #fbbf24; }
.admin-lane-queue  { border-top: 3px solid #bfe8fb; }

.admin-lane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  border-bottom: 1px solid #1e1e1e;
}
.admin-lane-icon { font-size: 0.95rem; }
.admin-lane-title {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfe8fb;
}
.admin-lane-count {
  background-color: #1f1f1f;
  border: 1px solid #2a2a2a;
  color: #ddd;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.admin-lane-body {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-lane-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.admin-lane-row:hover { background-color: #1c1c1c; }
.admin-lane-row-name {
  font-size: 0.85rem;
  color: #fff;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-lane-row-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-lane-row-primary {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.admin-lane-row-secondary {
  font-size: 0.62rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-lane-row.sev-danger .admin-lane-row-primary { color: #f87171; }
.admin-lane-row.sev-fire   .admin-lane-row-primary { color: #fbbf24; }
.admin-lane-row.sev-queue  .admin-lane-row-primary { color: #bfe8fb; }

.admin-lane-empty {
  color: #555;
  font-size: 0.78rem;
  padding: 22px 14px;
  text-align: center;
}
.admin-lane-more {
  color: #999;
  font-size: 0.78rem;
  text-align: center;
  padding: 8px 0 4px;
  letter-spacing: 0.04em;
}

/* Clickable "+ N more" / "Show less" button on Overview lanes
   (UX_AUDIT_v3 #20). Same look as the original static pill but
   responds to click and has a hover affordance. */
button.admin-lane-more-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed #2d5275;
  border-radius: 6px;
  color: #bfe8fb;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  min-height: 36px;
  padding: 6px 0;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
button.admin-lane-more-btn:hover {
  background: rgba(191, 232, 251, 0.06);
  border-color: #4a78a8;
}
button.admin-lane-more-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

/* Bulk "Message All" button in each lane header */
.admin-lane-bulk-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #bfe8fb;
  border-radius: 6px;
  padding: 5px 10px;
  min-height: 28px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-lane-bulk-btn:hover {
  background: rgba(191, 232, 251, 0.08);
  border-color: #4a78a8;
}
.admin-lane-bulk-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 1px;
}

/* ── Pulse tile delta + denominator ─────────────────────────────────── */
.pulse-denom {
  font-size: 1rem;
  color: #555;
  font-weight: 400;
  margin-left: 4px;
}

/* ── Index Distribution ─────────────────────────────────────────────── */
.admin-distribution-card {
  padding: 18px 20px;
  margin-bottom: 16px;
}
.admin-distribution {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  height: 160px;
  align-items: end;
}
.admin-dist-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 6px;
}
.admin-dist-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.admin-dist-count {
  font-size: 0.85rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-dist-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}
.admin-dist-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 0.04em;
}
.admin-dist-sub {
  font-size: 0.62rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-distribution-foot {
  margin-top: 18px;
  font-size: 0.7rem;
  color: #666;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ── Engagement Bands ───────────────────────────────────────────────── */
.admin-band-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-band-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.admin-band-stats {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.admin-band-num {
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}
.admin-band-pct {
  font-size: 0.78rem;
  color: #666;
  font-weight: 600;
}
.admin-band-bar {
  height: 5px;
  background-color: #1f1f1f;
  border-radius: 3px;
  overflow: hidden;
  margin-top: auto;
}
.admin-band-fill {
  height: 100%;
  background-color: #4ade80;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.admin-band-fill-warn { background-color: #f87171; }
.admin-band-card-warn .admin-band-num { color: #f87171; }

/* ══════════════ Overview: Tabs badge + Summary + Tasks ══════════════ */

/* Count badge on the Tasks tab button */
.ov-tab-badge {
  display: inline-block;
  min-width: 16px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #f87171;
  color: #0b0b0b;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: middle;
}
.ov-tab-badge:empty { display: none; }

/* KPI strip (Summary hero) */
.ov-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .ov-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Section head with a "view all" affordance */
.ov-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ov-block-head .admin-section-label { margin-bottom: 0; }
.ov-viewall-btn {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #bfe8fb;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ov-viewall-btn:hover { background: rgba(191,232,251,0.06); border-color: #4a78a8; }

/* Tasks toolbar */
.ov-tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 16px;
}
.ov-tasks-counts { color: #aaa; font-size: 0.85rem; }
.ov-tasks-counts strong { color: #fff; }
.ov-offline { color: #fbbf24; font-size: 0.78rem; }
.ov-addtask-btn {
  background: #bfe8fb;
  border: 1px solid #bfe8fb;
  color: #0b1d2a;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ov-addtask-btn:hover { background: #a9dcf3; }

/* Add-task inline form */
.ov-addtask-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.ov-addtask-form.hidden { display: none; }
.ov-addtask-actions { display: flex; gap: 8px; align-items: center; }
.ov-addtask-actions .auth-submit { width: auto; padding: 8px 18px; }

/* Task list + rows */
.ov-tasks-list, .ov-summary-tasks { display: flex; flex-direction: column; gap: 8px; }
.ov-task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #2a2a2a;
  border-radius: 8px;
  padding: 12px 14px;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.ov-task-row:hover { background: #1a1a1a; }
.ov-task-row.sev-danger { border-left-color: #f87171; }
.ov-task-row.sev-warn   { border-left-color: #fb923c; }
.ov-task-row.sev-queue  { border-left-color: #bfe8fb; }
.ov-task-row.sev-manual { border-left-color: #a78bfa; }
.ov-task-row.ov-task-removing { opacity: 0; transform: translateX(8px); }

.ov-task-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: #bfe8fb;
  cursor: pointer;
}
.ov-task-check:disabled { cursor: not-allowed; opacity: 0.4; }

.ov-task-main { flex: 1; min-width: 0; }
.ov-task-name { font-size: 0.95rem; font-weight: 700; color: #f4f4f4; margin-bottom: 4px; }
.ov-task-name-plain { color: #f4f4f4; }
.ov-task-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; }
.ov-task-meta { font-size: 0.76rem; color: #888; }

.ov-task-msg {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #bfe8fb;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ov-task-msg:hover { background: rgba(191,232,251,0.06); border-color: #4a78a8; }

/* Reason chips */
.ov-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: #242424;
  color: #bbb;
}
.ov-chip-primary { background: rgba(248,113,113,0.16); color: #fca5a5; }
.ov-chip-more    { background: #1f1f1f; color: #888; }
.ov-chip-manual  { background: rgba(167,139,250,0.16); color: #c4b5fd; }
.ov-chip-fire    { background: rgba(251,146,60,0.18); color: #fdba74; }

/* On Fire callout */
.ov-fire-callout { display: flex; flex-direction: column; gap: 6px; }
.ov-fire-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 14px;
}
.ov-fire-row .ov-task-name { margin-bottom: 0; }
.ov-fire-meta { display: flex; align-items: center; gap: 8px; }

/* Handled-this-week collapsible */
.ov-handled { margin-top: 20px; border-top: 1px solid #1f1f1f; padding-top: 14px; }
.ov-handled-summary {
  cursor: pointer;
  color: #aaa;
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.ov-handled-summary::-webkit-details-marker { display: none; }
.ov-handled-summary::before { content: '▸ '; color: #666; }
.ov-handled[open] .ov-handled-summary::before { content: '▾ '; }
.ov-handled-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ov-handled-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #999;
  padding: 6px 4px;
}
.ov-handled-name { color: #ddd; font-weight: 600; }
.ov-handled-what { color: #888; flex: 1; min-width: 0; }
.ov-handled-when { color: #666; font-size: 0.74rem; }
.ov-handled-undo {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #bfe8fb;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}
.ov-handled-undo:hover { border-color: #4a78a8; }

/* ── Collapsible admin section (Player Tab Visibility) ─────────────── */
.admin-collapse-toggle {
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  /* Inherit .admin-section-label sizing/spacing — applied via class. */
}
.admin-collapse-toggle:hover { color: #fff; }
.admin-collapse-chev {
  font-size: 0.85rem;
  color: #888;
  transition: transform 0.18s ease;
  margin-left: 8px;
}
.admin-collapse:not(.collapsed) .admin-collapse-chev { transform: rotate(90deg); }
.admin-collapse.collapsed .admin-collapse-body { display: none; }

/* ── Player Health Scores (Overview sub-tab) ───────────────────────── */
.hb-bucket {
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  margin-bottom: 18px;
  overflow: hidden;
}
.hb-bucket-head {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #1f1f1f;
}
.hb-bucket-stripe {
  width: 4px;
  background-color: var(--hb-color, #555);
  flex-shrink: 0;
}
.hb-bucket-title-wrap {
  flex: 1;
  padding: 14px 18px;
  min-width: 0;
}
.hb-bucket-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hb-color, #fff);
  letter-spacing: 0.02em;
}
.hb-bucket-desc {
  font-size: 0.72rem;
  color: #888;
  margin-top: 2px;
}
.hb-bucket-count {
  align-self: center;
  background-color: #1f1f1f;
  border: 1px solid #2a2a2a;
  color: #ddd;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-right: 16px;
  min-width: 28px;
  text-align: center;
}
.hb-bucket-body { padding: 4px 0; }
.hb-empty {
  color: #555;
  font-size: 0.78rem;
  text-align: center;
  padding: 20px 14px;
}

.hb-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) repeat(5, 1fr) 64px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid #1a1a1a;
  transition: background-color 0.12s;
}
.hb-row:last-child { border-bottom: 0; }
.hb-row:hover { background-color: #1a1a1a; }

.hb-row-id { min-width: 0; }
.hb-row-name {
  font-size: 0.88rem;
  color: #fff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-row-sub {
  font-size: 0.66rem;
  color: #666;
  letter-spacing: 0.04em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-row-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.hb-row-stat-val {
  font-size: 0.82rem;
  color: #ddd;
  font-weight: 500;
}
.hb-row-stat-lbl {
  font-size: 0.58rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hb-row-score, .hb-row-score-muted {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--hb-color, #fff);
  text-align: right;
}
.hb-row-score-muted { color: #555; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-lanes-grid { grid-template-columns: 1fr; }
  .admin-distribution { gap: 8px; height: 130px; }
  .admin-dist-label { font-size: 0.62rem; }

.hb-row {
    grid-template-columns: 1fr 56px;
    grid-template-areas:
      "id score"
      "stats stats";
    gap: 8px;
  }
  .hb-row-id { grid-area: id; }
  .hb-row-score, .hb-row-score-muted { grid-area: score; }
  .hb-row-stat { display: none; }
}

.admin-detail-back {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #bfe8fb;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}

.admin-detail-back:hover {
  background: rgba(191, 232, 251, 0.10);
  border-color: rgba(191, 232, 251, 0.40);
  color: #fff;
}
.admin-detail-back:active { transform: scale(0.97); }

.admin-detail-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.admin-detail-meta {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 24px;
}

/* ── Admin player drill-down: two-column layout ──────────────────────
   Left column = player & admin (linked accounts, status, quick actions,
   parent contact, goals). Right column = performance snapshot (Training
   Health + index score). The deeper category breakdown + full game log
   flow full-width below the band. Collapses to one column under 1000px. */
.admin-detail-header { margin-bottom: 12px; }
.admin-detail-header .admin-detail-meta { margin-bottom: 8px; }

.admin-detail-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 6px;
  align-items: start;
}
@media (min-width: 1000px) {
  .admin-detail-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.admin-detail-col { min-width: 0; display: flex; flex-direction: column; }
.admin-detail-col > * { min-width: 0; }
.admin-detail-col > *:first-child { margin-top: 0; }
/* Averages now lives at the bottom of the left column to soak up the
   dead space; give its label a tight top margin instead of 28px. */
.admin-detail-col-info .admin-section-label { margin-top: 14px; }
.admin-detail-col-info .admin-avg-grid { margin-bottom: 4px; }

/* Drop the Training Health section-label's default top margin so the
   right column's top edge aligns with the left column's. */
.admin-detail-col-perf .perf-section .admin-section-label { margin-top: 0; }
.admin-detail-col-perf .perf-section { margin-bottom: 12px; }

/* Training Health's 5-pillar grid is cramped at half-width with its
   default 4-col track — let it auto-fit instead. Same for the 3 index
   snapshot tiles directly underneath. */
.admin-detail-col-perf .admin-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}
.admin-detail-col-perf .summary-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.admin-detail-col-perf .summary-cards .stat-card { padding: 12px 14px; }
.admin-detail-col-perf .summary-cards .stat-value { font-size: 1.4rem; }
.admin-detail-col-perf .admin-overview-card { padding: 12px 14px; }
.admin-detail-col-perf .admin-overview-val { font-size: 1.35rem; }
/* Tighten the Training Health hero so the right column stays short. */
.admin-detail-col-perf .perf-health-hero { padding: 12px 16px; }
.admin-detail-col-perf .perf-health-hero-num { font-size: 2.2rem; }

/* Collapsed Parent Contact sits inline in the left column. */
.parent-collapse { margin-top: 8px; }
.parent-collapse .admin-parent-card { margin: 0; }
.parent-collapse[open] > .deep-collapse-summary { margin-bottom: 2px; }

/* Game Log "show older games" disclosure. */
.game-log-more { margin-top: 4px; }
.game-log-more-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.game-log-more-summary::-webkit-details-marker { display: none; }
.game-log-more-summary::before {
  content: '▾';
  font-size: 0.8rem;
  transition: transform 140ms ease;
}
.game-log-more[open] .game-log-more-summary::before { transform: rotate(180deg); }
.game-log-more-summary:hover {
  border-color: rgba(191, 232, 251, 0.4);
  background-color: #1a1a1a;
}
.game-log-more-body { margin-top: 10px; }

/* ── Admin drill-down: dense sections ────────────────────────────────
   Everything lives in two balanced, independently-flowing columns
   (see .admin-detail-cols). Heavy lists inside a section collapse
   behind a dropdown so the whole drill-down stays glanceable. */

/* Compact averages — 9 tiny "Last / Avg" cells. */
.avg-legend {
  font-weight: 600;
  color: #555;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 6px;
  font-size: 0.62rem;
}
.admin-avg-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .admin-avg-grid { grid-template-columns: repeat(3, 1fr); } }
.avg-cell {
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 8px;
  text-align: center;
}
.avg-cell-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avg-cell-nums { font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.avg-last { color: #bfe8fb; }
.avg-sep  { color: #444; margin: 0 3px; font-weight: 400; }
.avg-avg  { color: #fff; }

/* Sections stack inside each balanced column; space them evenly. The
   two columns flow independently (no full-width break), so a player
   missing optional content never leaves a mid-page gap. */
.admin-detail-col .deep-cell,
.admin-detail-col .game-log-block { margin-top: 14px; }
.deep-cell {
  min-width: 0;
  background-color: #121212;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 14px 16px;
}
.deep-cell.perf-section { margin-bottom: 0; }
.deep-cell .admin-section-label,
.deep-cell .section-title:first-child { margin-top: 0; }

/* Compact the cards / tables rendered inside deep cells. */
.deep-cell .admin-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
.deep-cell .admin-overview-card { padding: 10px 12px; }
.deep-cell .admin-overview-val  { font-size: 1.2rem; }
.deep-cell .admin-overview-label { margin-bottom: 4px; }
.deep-cell .lb-table { font-size: 0.72rem; }
.deep-cell .lb-table th, .deep-cell .lb-table td { padding: 6px 8px; }
.deep-cell .perf-radar-wrap { height: 220px; padding: 10px; margin-top: 0 !important; }
.deep-cell .admin-rec-measurements { gap: 8px; }

/* Game Log compaction inside the column. */
.game-log-block .game-log-row {
  padding: 8px 12px;
  margin-bottom: 6px;
}
.game-log-block .game-log-stat-val,
.game-log-block .game-log-index-val { font-size: 0.82rem; }
.game-log-block .game-log-date { font-size: 0.7rem; }

/* Cert mini progress bars (always-visible summary). */
.cert-mini-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  margin-bottom: 10px;
}
.cert-mini-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 3px;
}

/* Generic "show more" dropdown reused across deep cells. */
.deep-collapse { margin-top: 4px; }
.deep-collapse-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #bfe8fb;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 7px;
}
.deep-collapse-summary::-webkit-details-marker { display: none; }
.deep-collapse-summary::before {
  content: '▾';
  font-size: 0.75rem;
  transition: transform 140ms ease;
}
.deep-collapse[open] .deep-collapse-summary::before { transform: rotate(180deg); }
.deep-collapse-summary:hover { border-color: rgba(191, 232, 251, 0.4); }
.deep-collapse-body { margin-top: 10px; }

/* Admin landing */
.admin-landing {
  text-align: center;
  padding: 80px 0;
  color: #444;
  font-size: 0.9rem;
}

/* ── Calendar Page ───────────────────────────────────────────────────── */
.cal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cal-page-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cal-view-toggle {
  display: flex;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
}

.cal-view-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cal-view-btn.active {
  background-color: #bfe8fb18;
  color: #bfe8fb;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-nav-btn {
  background: none;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.cal-nav-btn:hover { color: #bfe8fb; border-color: #bfe8fb44; }

.cal-period-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ccc;
  min-width: 150px;
  text-align: center;
}

.cal-add-btn {
  background-color: #bfe8fb;
  color: #0d0d0d;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.cal-add-btn:hover { opacity: 0.85; }

/* Export bar */
.cal-export-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.cal-export-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #555;
}

.cal-export-btn {
  background: none;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #888;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.cal-export-btn:hover { color: #bfe8fb; border-color: #bfe8fb44; }

/* Weekly view */
.cal-weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  margin-bottom: 32px;
}

.cal-day-col {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 8px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.cal-day-col.today {
  border-color: #bfe8fb44;
  background-color: #bfe8fb08;
}

.cal-day-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cal-day-number {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.cal-day-col.today .cal-day-number {
  color: #bfe8fb;
  font-weight: 700;
}

.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Monthly view */
.cal-monthly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(120px, 1fr);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
}

.cal-month-dow-header {
  background-color: #141414;
  border-bottom: 1px solid #2a2a2a;
  padding: 8px 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #555;
  text-align: center;
}

.cal-month-cell {
  background-color: #1a1a1a;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  padding: 6px 8px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-month-cell:nth-child(7n) { border-right: none; }

.cal-month-cell.other-month { background-color: #141414; }

.cal-month-cell.today { background-color: #bfe8fb08; }

.cal-month-cell-number {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cal-month-cell.today .cal-month-cell-number {
  color: #bfe8fb;
  font-weight: 700;
}

.cal-month-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Event chips */
.cal-event-chip {
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
  border: none;
  text-align: left;
  width: 100%;
  display: block;
}

.cal-event-chip:hover { opacity: 0.8; }

.cal-event-chip.type-training {
  background-color: #1e3a4a;
  color: #7ec8e8;
}

.cal-event-chip.type-practice {
  background-color: #3a2e10;
  color: #f59e0b;
}

.cal-event-chip.type-game {
  background-color: #12301e;
  color: #4ade80;
}

/* ── Event Modal ──────────────────────────────────────────────────────── */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
}

.cal-modal-overlay.hidden { display: none; }

.cal-modal-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

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

.cal-modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
}

.cal-modal-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.cal-modal-close:hover { color: #fff; }

.cal-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cal-textarea {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  font-size: 0.9rem;
}

/* Toggle switch */
.cal-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.cal-toggle-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}

.cal-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.cal-toggle-switch input { opacity: 0; width: 0; height: 0; }

.cal-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #2a2a2a;
  border-radius: 20px;
  transition: background 0.2s;
}

.cal-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #666;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.cal-toggle-switch input:checked + .cal-toggle-slider {
  background-color: #bfe8fb22;
}

.cal-toggle-switch input:checked + .cal-toggle-slider::before {
  transform: translateX(16px);
  background-color: #bfe8fb;
}

/* Game CTA */
.cal-game-cta {
  background-color: #12301e;
  border: 1px solid #4ade8033;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cal-game-cta-link {
  color: #4ade80;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.78rem;
  white-space: nowrap;
}

.cal-game-cta-link:hover { text-decoration: underline; }

/* Modal actions */
.cal-modal-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.cal-modal-delete-btn {
  background: none;
  border: 1px solid #3a1a1a;
  border-radius: 6px;
  color: #f87171;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.cal-modal-delete-btn:hover { background-color: #2a1010; }

/* ── Admin: New Panel Styles ─────────────────────────────────────────── */

.admin-panel-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.admin-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-filter-btns {
  display: flex;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
}

.admin-filter-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 14px;
  min-height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.admin-filter-btn.active {
  background-color: #bfe8fb18;
  color: #bfe8fb;
}

/* Tasks tab — "what needs to be done" type filter. Individual wrapping
   chips with a count badge, unlike the joined grade segmented control. */
.ov-tasks-filter-bar {
  flex-wrap: wrap;
  gap: 6px;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin: 0 0 12px;
}
.ov-tasks-filter-bar .admin-filter-btn {
  border: 1px solid #2a2a2a;
  padding: 7px 12px;
  min-height: 32px;
}
.ov-filter-n {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ffffff14;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
}
.ov-tasks-filter-bar .admin-filter-btn.active .ov-filter-n {
  background: #bfe8fb2e;
}

/* Status segmented toggle (Current / All) — sits above the grade
   filter row on the Players list. Compact segmented control. */
.admin-status-toggle {
  display: inline-flex;
  gap: 2px;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 12px;
}
.admin-status-btn {
  background: transparent;
  border: 0;
  color: #aaa;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  min-height: 34px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.admin-status-btn:hover { color: #fff; }
.admin-status-btn.active {
  background: #bfe8fb;
  color: #0b1d2a;
}

.admin-filter-dropdowns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-filter-select {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #aaa;
  font-size: 0.82rem;
  padding: 8px 28px 8px 12px;
  min-height: 36px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.admin-filter-select:focus {
  outline: 0;
  border-color: #bfe8fb;
}

/* ── Shared modal-footer button pattern ─────────────────────────────
   Apply to any modal's footer row to get the canonical Cancel-on-left,
   Primary-on-right pattern. Buttons inside auto-size to 44px tap target
   and pick up the standard secondary/primary tint.

<div class="app-modal-footer">
     <button class="app-modal-btn">Cancel</button>
     <button class="app-modal-btn app-modal-btn-primary">Save</button>
   </div>

Use .app-modal-btn-danger for destructive actions (red). */
.app-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #2c333d;
  margin-top: auto;
}
.app-modal-footer-spaced { justify-content: space-between; }
.app-modal-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ccc;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 100ms ease;
}
.app-modal-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.app-modal-btn:active { transform: scale(0.97); }
.app-modal-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.app-modal-btn-primary {
  background: #bfe8fb;
  color: #0b1d2a;
  border-color: #bfe8fb;
  font-weight: 800;
}
.app-modal-btn-primary:hover {
  background: #d4f0fc;
  border-color: #d4f0fc;
  color: #0b1d2a;
}
.app-modal-btn-danger {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.50);
  color: #f87171;
}
.app-modal-btn-danger:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: #f87171;
  color: #fff;
}

/* Recruiting section in admin drill-down */
.admin-rec-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #2a2a2a;
}

/* Admin player drill-down: Parent contact card. Admin-editable
   inputs; auto-saves on blur. "Ready for SMS" pill flips from warn
   (yellow) to ok (green) once both first_name + phone are filled in. */
.admin-parent-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  margin-bottom: 4px;
  border-left: 3px solid #4ade80;
}
.admin-parent-card.admin-parent-card-warn {
  border-left-color: #fbbf24;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04), #1a1a1a 50%);
}
.admin-parent-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-parent-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bfe8fb;
}
.admin-parent-pill {
  display: inline-flex; align-items: center;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid;
}
.admin-parent-pill.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.40);
}
.admin-parent-pill.warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.40);
}
.admin-parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.admin-parent-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.admin-parent-field-wide { grid-column: 1 / -1; }
.admin-parent-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.admin-parent-opt { color: #555; font-weight: 600; }
.admin-parent-input {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #eee;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 9px 11px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms ease, background 120ms ease;
}
.admin-parent-input:focus {
  outline: 0;
  border-color: #bfe8fb;
}
.admin-parent-input.is-saved {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.10);
}
.admin-parent-input.is-error {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}
@media (max-width: 600px) {
  .admin-parent-grid { grid-template-columns: 1fr; }
}

/* Admin player drill-down: Goals card (compact, read-only) */
.admin-goal-card {
  background: linear-gradient(180deg, rgba(191, 232, 251, 0.04), #1a1a1a 50%);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  margin-bottom: 4px;
  border-left: 3px solid #bfe8fb;
}

.admin-goal-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bfe8fb;
  margin-bottom: 10px;
}

.admin-goal-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-goal-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-goal-row:first-child { border-top: 0; padding-top: 0; }

.admin-goal-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  flex-shrink: 0;
  width: 90px;
}

.admin-goal-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
  line-height: 1.4;
}

.admin-goal-value.level {
  color: #bfe8fb;
  font-weight: 700;
}

.admin-goal-value.empty {
  color: #555;
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 480px) {
  .admin-goal-row { flex-direction: column; gap: 1px; align-items: flex-start; }
  .admin-goal-label { width: auto; }
}

.admin-rec-measurements {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
}

.admin-rec-measurement {
  text-align: center;
  min-width: 60px;
}

.admin-rec-val {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.admin-rec-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #555;
}

.admin-rec-subsection-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 10px;
}

/* ── Recruiting Profile Page ─────────────────────────────────────────── */

.rec-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.rec-page-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

/* Hero card */
.rec-hero-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.rec-hero-avatar-wrap {
  flex-shrink: 0;
  position: relative;
  width: 90px;
  height: 90px;
}

.rec-hero-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a2a2a;
}

.rec-hero-avatar-initials {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #bfe8fb22;
  border: 2px solid #bfe8fb44;
  color: #bfe8fb;
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

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

.rec-hero-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.15;
  word-break: break-word;
}

.rec-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.rec-hero-bio {
  font-size: 0.85rem;
  color: #bbb;
  line-height: 1.5;
  word-break: break-word;
}

/* Mid row */
.rec-mid-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Generic rec card */
.rec-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.rec-card-stats {
  margin-bottom: 0;
}

.rec-card-title {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 16px;
}

.rec-empty-hint {
  font-size: 0.78rem;
  color: #444;
  font-style: italic;
}

/* Measurements */
.rec-measurements-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rec-measurement-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #222;
  padding-bottom: 10px;
}

.rec-measurement-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rec-measurement-val {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.rec-measurement-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #555;
}

/* Index row */
.rec-index-row {
  display: flex;
  gap: 0;
  margin-bottom: 4px;
}

.rec-index-block {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid #2a2a2a;
}

.rec-index-block:last-child { border-right: none; }

.rec-index-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #bfe8fb;
  line-height: 1;
  margin-bottom: 4px;
}

.rec-index-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

/* Stat averages */
.rec-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rec-stat-item {
  background-color: #141414;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}

.rec-stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.rec-stat-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.rec-stats-note {
  font-size: 0.72rem;
  color: #555;
  margin-top: 12px;
}

/* Achievements */
.rec-achievements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec-achievement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background-color: #141414;
  border: 1px solid #232323;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #ddd;
  transition: border-color 140ms ease, background 140ms ease;
}
.rec-achievement-item:hover {
  border-color: rgba(191, 232, 251, 0.22);
  background-color: #181818;
}
.rec-achievement-icon {
  width: 16px;
  height: 16px;
  color: #bfe8fb;
  flex-shrink: 0;
}
.rec-achievement-text { min-width: 0; }

/* Film links */
.rec-film-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rec-film-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #bfe8fb;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.rec-film-link::after {
  content: '→';
  font-size: 0.85rem;
}

.rec-film-link:hover {
  border-color: #bfe8fb44;
  background-color: #bfe8fb08;
}

/* Edit modal wider */
.rec-edit-card {
  max-width: 560px !important;
}

.rec-edit-section-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #555;
  margin: 20px 0 10px;
}

.rec-edit-measurements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 4px;
}

/* Achievements / film link input rows */
.rec-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rec-film-row {
  flex-wrap: wrap;
}

.rec-film-row .rec-row-input:first-child {
  flex: 1 1 160px;
}

.rec-film-row .rec-row-input:nth-child(2) {
  flex: 2 1 220px;
}

.rec-row-input {
  flex: 1;
  min-width: 0;
}

.rec-row-remove {
  background: none;
  border: 1px solid #3a1a1a;
  border-radius: 6px;
  color: #f87171;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}

.rec-row-remove:hover { background-color: #2a1010; }

.rec-add-row-btn {
  background: none;
  border: 1px dashed #2a2a2a;
  border-radius: 6px;
  color: #555;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 4px;
  transition: color 0.15s, border-color 0.15s;
}

.rec-add-row-btn:hover { color: #bfe8fb; border-color: #bfe8fb44; }

/* ── Print styles ────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .rec-actions-bar, #rec-edit-overlay { display: none !important; }
  .page { margin-left: 0 !important; }
  .page-inner { padding: 24px !important; }
  body { background: #fff !important; color: #000 !important; }
  .rec-hero-card, .rec-card { border: 1px solid #ccc !important; background: #fff !important; break-inside: avoid; }
  .rec-hero-name, .rec-card-title { color: #000 !important; }
  .rec-hero-bio, .rec-measurement-label, .rec-stat-label, .rec-index-label { color: #555 !important; }
  .rec-measurement-val, .rec-stat-val, .rec-index-val { color: #000 !important; }
  .rec-achievement-item {
    color: #000 !important;
    background: #fff !important;
    border-color: #ccc !important;
  }
  .rec-achievement-icon { color: #000 !important; }
  .rec-film-link { color: #000 !important; border-color: #ccc !important; background: #f5f5f5 !important; }
  .player-tag { background: #eee !important; color: #000 !important; }
  #player-content, #calendar-page, #admin-page, #admin-landing { display: none !important; }
  #recruiting-page { display: block !important; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Prevent iOS Safari from auto-zooming when a form control is focused.
     iOS zooms the page in whenever a tapped input/select/textarea has a
     font-size below 16px, and never zooms back out — leaving the user
     having to pinch-out to fit the layout. Force every form control to
     ≥16px on mobile (covers .auth-input, .stat-input, and every other
     class override, hence !important). */
  input, select, textarea { font-size: 16px !important; }

/* Sidebar: off-screen left on mobile, slides in when .open. Use the
     dynamic viewport unit (100dvh) so the drawer accounts for iOS
     Safari's collapsing URL bar — 100vh measures the larger "ideal"
     viewport and pushes the footer off-screen on small iPhones. */
  .sidebar {
    height: 100dvh;
    transform: translateX(-220px);
    transition: transform 0.25s ease;
    /* Clear the 56px topbar + its safe-area inset (notch) with a small
       12px gap so the first nav item doesn't kiss the bar. */
    padding-top: calc(68px + env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

.sidebar.open {
    transform: translateX(0);
  }

/* Topbar already shows the logo — hide the duplicate in the drawer */
  .sidebar-brand {
    display: none;
  }

.page {
    margin-left: 0;
    padding: 0;
    /* Match topbar height + iOS safe-area inset so content sits below
       the status bar / notch area. */
    padding-top: calc(56px + env(safe-area-inset-top));
  }

.page-inner {
    padding: 20px 16px;
  }

/* Mobile top bar — extends behind the iOS status bar; we pad the bar
     itself down by env(safe-area-inset-top) so the logo, title, and
     hamburger all sit below the notch instead of under it. */
  .topbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-top));
    background-color: #111;
    border-bottom: 1px solid #1e1e1e;
    align-items: center;
    padding: env(safe-area-inset-top) 16px 0;
    gap: 12px;
    z-index: 300;
  }

.topbar-logo {
    height: 32px;
    width: auto;
  }

.topbar-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex: 1;
  }

.topbar-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

.topbar-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #bfe8fb;
    border-radius: 2px;
  }

/* Auth card */
  .auth-card {
    padding: 24px 20px;
    border-radius: 10px;
  }

/* Summary cards: full width on mobile */
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }

/* Stat cards: 2 columns on mobile to halve the scroll. Tighten inside
     spacing so the Last/Avg pair still reads cleanly at half-width. */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stats .stat-card { padding: 12px 14px; }
  .stats .stat-label { margin-bottom: 8px; font-size: 0.65rem; }
  .stats .stat-row { gap: 8px; }
  .stats .stat-group { flex: 1; min-width: 0; }
  .stats .stat-value { font-size: 1.35rem; }
  .stats .stat-sub { font-size: 0.62rem; }
  /* Thicker, softer divider on mobile — vertical hairline can look
     awkward at narrow widths where Last/Avg values might wrap. */
  .stats .stat-divider {
    background: rgba(255, 255, 255, 0.06);
    margin: 0;
  }

/* Player profile card */
  .player-profile-card {
    padding: 16px;
    gap: 14px;
  }

.player-avatar-wrap,
  .player-avatar {
    width: 56px;
    height: 56px;
  }

.player-profile-name {
    font-size: 1.1rem;
  }

/* Input section header: stack on mobile */
  .input-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

.input-date {
    width: 100%;
  }

.input-section-title {
    margin-bottom: 0;
  }

/* Input grid: 2 columns on mobile */
  .input-grid {
    grid-template-columns: repeat(2, 1fr);
  }

/* Game log mobile: collapsed by default to date · Index · expand.
     Tap row to .expanded — stats wrap below as a 3-column grid so
     the Index is always visible without sideways scrolling
     (UX_AUDIT_v3 #17). */
  .game-log-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
  }

.game-log-date {
    width: auto;
    font-size: 0.75rem;
    color: #aaa;
  }

.game-log-stats-scroll {
    display: none;
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a2a2a;
  }
  .game-log-row.expanded .game-log-stats-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
  .game-log-row.expanded .game-log-expand {
    transform: rotate(180deg);
  }

.game-log-stat {
    flex-shrink: 0;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 6px 4px;
  }

.game-log-index {
    flex-shrink: 0;
    padding: 0 6px 0 10px;
    border-left: 1px solid #2a2a2a;
    text-align: center;
  }

.game-log-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #999;
    font-size: 1rem;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    transition: transform 150ms ease;
  }

/* Leaderboard modal */
  .lb-modal {
    padding: 20px 16px;
    border-radius: 10px;
    margin: 8px;
    width: calc(100% - 16px);
  }

/* Admin grids */
  .admin-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

.admin-cats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

.admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

/* Admin player table: allow horizontal scroll */
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

/* Page content: never exceed viewport */
  .page, .page-inner {
    max-width: 100vw;
    overflow-x: hidden;
  }

/* Admin filters */
  .admin-filter-bar { flex-direction: column; align-items: flex-start; }
  .admin-filter-btns { flex-wrap: wrap; }
  .admin-filter-dropdowns { width: 100%; }
  .admin-filter-select { flex: 1; }

/* Recruiting */
  .rec-mid-row { grid-template-columns: 1fr; }
  .rec-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .rec-hero-card { flex-direction: column; align-items: center; text-align: center; }
  .rec-hero-tags { justify-content: center; }
  .rec-edit-measurements-grid { grid-template-columns: 1fr 1fr; }

/* Calendar: weekly view scrolls horizontally */
  .cal-weekly-grid {
    grid-template-columns: repeat(7, 130px);
    grid-auto-rows: minmax(180px, auto);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

.cal-day-col {
    min-height: 180px;
  }

/* Calendar: monthly stays 7-col but smaller */
  .cal-monthly-grid {
    grid-auto-rows: minmax(82px, 1fr);
  }
  .cal-month-cell {
    min-height: 82px;
    padding: 4px;
  }

.cal-month-cell-number {
    font-size: 0.65rem;
  }

.cal-event-chip {
    font-size: 0.55rem;
    padding: 2px 4px;
  }

.cal-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

.cal-modal-card {
    padding: 20px 16px;
  }

.cal-modal-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CERTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────────────────── */
.certs-page-header {
  margin-bottom: 20px;
}

/* ── Hero Card ───────────────────────────────────────────────────────── */
.certs-hero-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 12px;
}

.certs-hero-left {
  flex-shrink: 0;
  text-align: center;
  min-width: 120px;
}

.certs-hero-pct {
  font-size: 3rem;
  font-weight: 900;
  color: #bfe8fb;
  line-height: 1;
}

.certs-hero-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  margin-top: 4px;
}

.certs-hero-count {
  font-size: 0.8rem;
  color: #666;
  margin-top: 6px;
}

.certs-hero-divider {
  width: 1px;
  height: 80px;
  background: #1e1e1e;
  flex-shrink: 0;
}

.certs-hero-right {
  flex: 1;
}

.certs-milestone-block {
  background: #161616;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 16px 20px;
}

.certs-milestone-block.certs-milestone--done {
  border-color: #bfe8fb44;
  background: #bfe8fb0a;
}

.certs-milestone-eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 4px;
}

.certs-milestone-icon {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #bfe8fb;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.certs-milestone-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.certs-milestone-sub {
  font-size: 0.78rem;
  color: #aaa;
}

.certs-milestone-hint {
  font-size: 0.7rem;
  color: #555;
  margin-top: 6px;
}

.certs-hero-bar-wrap {
  height: 4px;
  background: #1a1a1a;
  border-radius: 4px;
  margin-bottom: 28px;
  overflow: hidden;
}

.certs-hero-bar {
  height: 100%;
  background: linear-gradient(90deg, #bfe8fb, #7ec8f5);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── Cert Card Grid ──────────────────────────────────────────────────── */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ── Cert Card ───────────────────────────────────────────────────────── */
.cert-card {
  position: relative;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.cert-card:hover {
  border-color: #333;
}

.cert-card--complete {
  border-color: #bfe8fb44;
  background: linear-gradient(135deg, #111 60%, #bfe8fb0a);
}

.cert-card-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.8rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  max-width: 110%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-card-body {
  position: relative;
  padding: 18px 18px 16px;
}

.cert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cert-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}
.cert-card-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cert-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d0d0d;
  background: #bfe8fb;
  border-radius: 999px;
  padding: 3px 8px 3px 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(191, 232, 251, 0.18);
}
.cert-badge-check { width: 11px; height: 11px; }

.cert-card-toggle {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #888;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.2s ease;
}
.cert-card-toggle svg { width: 16px; height: 16px; }
.cert-card-toggle:hover {
  color: #bfe8fb;
  background: rgba(191, 232, 251, 0.10);
  border-color: rgba(191, 232, 251, 0.4);
}
.cert-card--open .cert-card-toggle {
  transform: rotate(180deg);
  color: #bfe8fb;
  border-color: rgba(191, 232, 251, 0.4);
}

.cert-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.cert-card-meta {
  font-size: 0.78rem;
  color: #888;
}
.cert-card-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: #bfe8fb;
  letter-spacing: 0.04em;
}

.cert-progress-bar-wrap {
  height: 3px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0;
}

.cert-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #bfe8fb, #7ec8f5);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.cert-card--complete .cert-progress-bar {
  background: #bfe8fb;
}

/* ── Cert Checklist ──────────────────────────────────────────────────── */
/* Smooth max-height + opacity expand. .open class toggled in JS. */
.cert-checklist {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid #1e1e1e;
  transition: max-height 0.28s ease, opacity 0.22s ease,
              margin-top 0.28s ease, padding-top 0.28s ease;
}
.cert-checklist.open {
  max-height: 1600px;
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top-width: 1px;
}

.cert-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.cert-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 8px 8px 6px;
  border-radius: 6px;
  min-height: 36px;
  transition: background 0.12s;
}
.cert-check-item:hover {
  background: rgba(191, 232, 251, 0.06);
}

.cert-check-item input[type="checkbox"] {
  accent-color: #bfe8fb;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.cert-check-label {
  font-size: 0.82rem;
  color: #aaa;
  line-height: 1.3;
  transition: color 0.15s;
}

.cert-check-item--done .cert-check-label {
  color: #bfe8fb;
  text-decoration: line-through;
  text-decoration-color: #bfe8fb55;
}

/* ── Community Leaderboard ───────────────────────────────────────────── */
.certs-community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 0;
  transition: color 0.15s, border-color 0.15s;
}

.certs-community-header:hover {
  color: #bfe8fb;
  border-color: #333;
}

#certs-community-body {
  background: #111;
  border: 1px solid #1e1e1e;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 0 0 8px;
  margin-bottom: 28px;
}

.certs-lb-me td {
  background: #bfe8fb0a;
  color: #bfe8fb;
}

.certs-lb-you {
  font-size: 0.65rem;
  color: #bfe8fb99;
  font-weight: 400;
}

/* ── Admin Cert Tabs ─────────────────────────────────────────────────── */
.admin-cert-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-cert-tab-btn {
  background: none;
  border: 1px solid #1e1e1e;
  color: #666;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-cert-tab-btn:hover {
  color: #bfe8fb;
  border-color: #333;
}

.admin-cert-tab-btn.active {
  background: #bfe8fb18;
  border-color: #bfe8fb44;
  color: #bfe8fb;
}

/* Per-cert sub-tabs */
.admin-cert-cert-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.admin-cert-cert-btn {
  background: none;
  border: 1px solid #1e1e1e;
  color: #666;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-cert-cert-btn:hover { color: #bfe8fb; border-color: #333; }
.admin-cert-cert-btn.active {
  background: #bfe8fb18;
  border-color: #bfe8fb44;
  color: #bfe8fb;
}

/* ── Cert % Badges (admin grid) ──────────────────────────────────────── */
.cert-pct-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}

.cert-pct-gold   { background: #bfe8fb22; color: #bfe8fb; }
.cert-pct-green  { background: #4ade8022; color: #4ade80; }
.cert-pct-yellow { background: #facc1522; color: #facc15; }
.cert-pct-red    { background: #f8717122; color: #f87171; }

/* ── Admin Grid Row ──────────────────────────────────────────────────── */
.admin-cert-row {
  cursor: pointer;
  transition: background 0.12s;
}

.admin-cert-row:hover td {
  background: #1a1a1a;
}

/* ── Admin Player Drill-Down ─────────────────────────────────────────── */
.admin-cert-drill-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #bfe8fb;
  margin-bottom: 20px;
  margin-top: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .certs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .certs-hero-card {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .certs-hero-divider { width: 80px; height: 1px; }
}

@media (max-width: 600px) {
  .certs-grid {
    grid-template-columns: 1fr;
  }
  .cert-checklist-grid {
    grid-template-columns: 1fr;
  }
  .admin-cert-tabs {
    flex-wrap: wrap;
  }
}

/* ── Cert 2025 Sticky Table ──────────────────────────────────────────── */
.ct25-table-wrap {
  max-height: calc(100vh - 380px);
  min-height: 200px;
  overflow-y: auto;
  overflow-x: auto;
}
.ct25-table-wrap thead th {
  position: sticky;
  top: 0;
  background: #111;
  z-index: 2;
  box-shadow: 0 1px 0 #222;
}

/* Scrollbar */
.ct25-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.ct25-table-wrap::-webkit-scrollbar-track { background: #111; }
.ct25-table-wrap::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
.ct25-table-wrap::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }
.ct25-table-wrap::-webkit-scrollbar-corner { background: #111; }

/* Fix last-column (Leadership) — override lb-table th/td:last-child */
.ct25-table-wrap .lb-table th:last-child {
  text-align: left;
  padding-right: 12px;
}
.ct25-table-wrap .lb-table td:last-child {
  text-align: left;
  font-weight: 400;
  color: inherit;
  padding-right: 12px;
}

/* ── Cert 2025 Filter Bar ────────────────────────────────────────────── */
.ct25-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.ct25-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct25-filter-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
}
.ct25-filter-btns { display: flex; gap: 4px; }
.ct25-filter-btn {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #555;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}
.ct25-filter-btn:hover { border-color: #3a3a3a; color: #888; }
.ct25-filter-btn.active { border-color: #bfe8fb; color: #bfe8fb; background: #bfe8fb12; }

.ct25-add-btn {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #bfe8fb;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.1s;
  white-space: nowrap;
}
.ct25-add-btn:hover { border-color: #bfe8fb; background: #bfe8fb0a; }

/* ── Cert 2025 Add Player Form ───────────────────────────────────────── */
.ct25-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.ct25-add-input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  padding: 6px 12px;
  width: 260px;
  outline: none;
}
.ct25-add-input:focus { border-color: #bfe8fb; }
.ct25-add-input::placeholder { color: #3a3a3a; }

.ct25-search-input {
  background: #bfe8fb;
  border: none;
  border-radius: 20px;
  color: #000;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  width: 200px;
  outline: none;
}
.ct25-search-input::placeholder { color: #4a7a8a; }
.ct25-add-confirm {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid #4ade80;
  background: #4ade8015;
  color: #4ade80;
  cursor: pointer;
  transition: all 0.1s;
}
.ct25-add-confirm:hover { background: #4ade8025; }
.ct25-add-cancel {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #555;
  cursor: pointer;
  transition: all 0.1s;
}
.ct25-add-cancel:hover { color: #888; border-color: #3a3a3a; }

/* ── Cert 2025 Status Badge ──────────────────────────────────────────── */
.ct25-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
  display: inline-block;
}
.ct25-status-current {
  color: #4ade80;
  border: 1px solid #4ade8040;
  background: #4ade8010;
}
.ct25-status-current:hover { border-color: #4ade80; }
.ct25-status-not_current {
  color: #555;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
}
.ct25-status-not_current:hover { border-color: #555; color: #888; }

/* ── Cert 2025 Workout Modal ─────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 28px 28px 24px;
  width: min(500px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-player {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 3px;
}

.modal-cert {
  font-size: 1.1rem;
  font-weight: 800;
  color: #bfe8fb;
}

.modal-sub {
  font-size: 0.75rem;
  color: #666;
  margin-top: 3px;
}

.modal-close {
  background: none;
  border: none;
  color: #555;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 12px;
  flex-shrink: 0;
}
.modal-close:hover { color: #ccc; }

.modal-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.modal-btn {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #666;
  cursor: pointer;
  transition: all 0.1s;
}
.modal-btn:hover { border-color: #444; color: #ccc; }

.workout-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-bottom: 18px;
}

.workout-box {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #252525;
  background: #1a1a1a;
  color: #444;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  user-select: none;
}
.workout-box:hover { border-color: #3a3a3a; color: #777; }
.workout-box.checked { background: #4ade8020; border-color: #4ade80; color: #4ade80; }
.workout-box.checked:hover { background: #4ade8030; }
.workout-box.drag-preview {
  background: #4ade8018;
  border-color: #4ade8088;
  color: #4ade8088;
}
.workout-grid.dragging {
  user-select: none;
  cursor: crosshair;
}

.modal-footer {
  text-align: center;
  font-size: 0.78rem;
  color: #555;
}
.modal-footer strong { color: #bfe8fb; font-size: 1rem; }

/* ── Multi-cert modal ── */
.ct25-modal-wide { max-width: 560px; }
.ct25-cert-section { margin-bottom: 24px; }
.ct25-cert-section:last-child { margin-bottom: 0; }
.ct25-cert-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ct25-cert-section-label { font-size: 0.85rem; font-weight: 800; color: #bfe8fb; flex: 1; }
.ct25-cert-section-sub { font-size: 0.72rem; color: #555; }
.modal-actions-inline { display: flex; gap: 6px; margin-left: auto; }

/* ── Player rename button ── */
.ct25-rename-btn {
  background: none;
  border: none;
  color: #444;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
  line-height: 1;
}
.ct25-rename-btn:hover { color: #bfe8fb; }

/* ══════════════════════════════════════════════════════
   Business KPIs Dashboard
   ══════════════════════════════════════════════════════ */

/* Toolbar */
.kpis-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.kpis-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpis-year-select,
.kpis-month-picker {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ccc;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.kpis-year-select:focus,
.kpis-month-picker:focus { outline: none; border-color: #444; }
.kpis-edit-btn {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}
.kpis-edit-btn:hover { border-color: #bfe8fb; color: #bfe8fb; }

/* Hero sub-text */
.kpis-sub {
  font-size: 0.68rem;
  color: #444;
  margin-top: 5px;
}

/* Value colors */
.kpis-pos { color: #4ade80; }
.kpis-neg { color: #f87171; }

/* Marketing hero — 3-column override */
.kpis-mkt-grid { grid-template-columns: repeat(3, 1fr) !important; }

/* Scrollable table wrapper */
.kpis-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}
.kpis-table-wrap::-webkit-scrollbar { height: 4px; }
.kpis-table-wrap::-webkit-scrollbar-track { background: #0a0a0a; }
.kpis-table-wrap::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

/* P&L / Marketing table */
.kpis-table {
  min-width: 860px;
  white-space: nowrap;
  font-size: 0.75rem;
}
.kpis-table thead th {
  font-size: 0.65rem;
  padding: 8px 10px;
  text-align: center;
}
.kpis-table td {
  text-align: center;
  padding: 7px 10px;
}
.kpis-label-col { text-align: left !important; min-width: 130px; }
.kpis-row-label {
  text-align: left !important;
  font-weight: 600;
  color: #aaa;
  position: sticky;
  left: 0;
  background: #0d0d0d;
  z-index: 1;
}
.kpis-total-col { font-weight: 700; color: #ccc; }
.kpis-na { color: #2a2a2a !important; }

/* P&L row types */
.kpis-row-subtotal td {
  border-top: 1px solid #222;
  font-weight: 700;
  background: #111;
}
.kpis-row-subtotal .kpis-row-label { background: #111; }
.kpis-row-net td {
  border-top: 2px solid #2a2a2a;
  font-weight: 800;
  font-size: 0.82rem;
  background: #111;
}
.kpis-row-net .kpis-row-label { background: #111; }
.kpis-row-expense td { color: #888; }
.kpis-row-exp-subtotal td {
  border-top: 1px solid #1e1e1e;
  font-weight: 700;
  color: #888;
  background: #0f0f0f;
}
.kpis-row-exp-subtotal .kpis-row-label { background: #0f0f0f; }

/* Expenses tab section headers */
.exp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #222;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfe8fb;
}
.exp-section-header:first-of-type { margin-top: 8px; }

/* Marketing tab */
.mkt-hero-grid { grid-template-columns: repeat(3, 1fr) !important; }
/* Lock both marketing tables to identical column widths */
.mkt-table { table-layout: fixed; }
.mkt-table .kpis-label-col { width: 175px; }
.mkt-computed-row td { color: #666; }
.mkt-computed-row .kpis-row-label { color: #555; font-style: italic; }
.mkt-computed { color: #666; font-style: italic; }
.mkt-avg-col { color: #555 !important; font-size: 0.78rem; }
@media (max-width: 700px) { .mkt-hero-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Edit modal note line */
.kpis-edit-note {
  font-size: 0.75rem;
  color: #555;
  margin: -4px 0 10px;
  line-height: 1.4;
}

/* Edit modal */
.kpis-edit-modal {
  max-width: 420px;
  width: min(420px, 94vw);
}
.kpis-edit-section {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfe8fb;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
}
.kpis-edit-section:first-child { margin-top: 0; }
.kpis-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.kpis-edit-label {
  font-size: 0.75rem;
  color: #888;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpis-edit-hint {
  font-size: 0.62rem;
  color: #444;
  font-style: italic;
}
.kpis-edit-input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #ccc;
  font-size: 0.8rem;
  padding: 6px 10px;
  width: 120px;
  text-align: right;
}
.kpis-edit-input:focus { outline: none; border-color: #bfe8fb; }
.kpis-edit-textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  text-align: left;
  box-sizing: border-box;
  font-family: inherit;
}
.kpis-edit-footer {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}
.kpis-save-btn {
  border-color: #bfe8fb40 !important;
  color: #bfe8fb !important;
}

/* ── Business KPIs Inner Tabs ──────────────────────────────────────── */
.kpis-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #222;
}
.kpis-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #888;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.kpis-tab:hover { color: #ccc; }
.kpis-tab.active { color: #fff; border-bottom-color: #bfe8fb; }

/* ── Training Revenue Table ────────────────────────────────────────── */
.tr-loc-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tr-loc-layton       { background: #0d2535; color: #bfe8fb; }
.tr-loc-taylorsville { background: #2a1a0a; color: #f8a84a; }

.tr-table th, .tr-table td { white-space: nowrap; }
.tr-table .tr-name-col { min-width: 140px; text-align: left; }
.tr-table .tr-edit-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
}
.tr-table .tr-edit-btn:hover { color: #bfe8fb; }
.tr-table .tr-footer-row td {
  font-weight: 600;
  border-top: 1px solid #222;
}
.tr-table .tr-avg-row td { color: #888; font-size: 0.78rem; }
.tr-table .tr-total-row td { color: #bfe8fb; }

/* wider inputs in TR modal */
.tr-wide-input { width: 200px !important; text-align: left !important; }

/* ── TR Modal — Segmented Buttons ──────────────────────────────────── */
.tr-seg-group { display: flex; gap: 4px; }
.tr-seg-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  color: #666;
  padding: 5px 14px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tr-seg-btn:hover { color: #ccc; border-color: #444; }
.tr-seg-btn.active { background: #0d2535; color: #bfe8fb; border-color: #bfe8fb50; }

/* Calculated read-only value display */
.tr-calc-display {
  display: inline-block;
  min-width: 120px;
  padding: 6px 10px;
  text-align: right;
  font-size: 0.8rem;
  color: #bfe8fb;
}

/* ── TR Table — Dual Sub-Column Months ──────────────────────────────── */
.tr-month-header {
  text-align: center;
  border-left: 1px solid #1e1e1e;
  padding-bottom: 2px;
}
.tr-sub-act {
  font-size: 0.62rem;
  color: #aaa;
  text-align: center;
  padding: 2px 6px 4px;
  border-left: 1px solid #1e1e1e;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.tr-sub-adj {
  font-size: 0.62rem;
  color: #555;
  text-align: center;
  padding: 2px 6px 4px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
/* Actual column gets a left border to visually separate month groups */
.tr-act-cell { border-left: 1px solid #1e1e1e; }
/* Stronger divider before the YTD total columns */
.tr-table .kpis-total-col:not(.tr-adj-cell) { border-left: 1px solid #333; }
.tr-adj-cell {
  color: #444 !important;
  font-size: 0.75rem;
}
.tr-adj-cell.kpis-pos { color: #2a6a3a !important; }
.tr-date-cell { font-size: 0.72rem; color: #666; text-align: center; }
.kpis-save-btn:hover { background: #bfe8fb10 !important; border-color: #bfe8fb !important; }

/* ── TR Pause feature ───────────────────────────────────────────────── */
.tr-paused-cell { color: #4a3a1a !important; font-size: 0.7rem; }
.tr-pause-badge { font-size: 0.65rem; color: #f8a84a; opacity: 0.8; margin-left: 3px; vertical-align: middle; }
.tr-pause-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.tr-pause-remove {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  opacity: 0.7;
}
.tr-pause-remove:hover { opacity: 1; }
.tr-add-pause-btn {
  font-size: 0.72rem;
  background: none;
  border: 1px solid #333;
  color: #888;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.tr-add-pause-btn:hover { color: #ccc; border-color: #555; }

/* ── Shot Tracker ─────────────────────────────────────────────────── */

.shot-page-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.shot-tracker-tabs {
  display: flex;
  gap: 8px;
}

.shot-tracker-tab {
  background: none;
  border: 1px solid #1e1e1e;
  color: #666;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.shot-tracker-tab:hover {
  color: #bfe8fb;
  border-color: #333;
}
.shot-tracker-tab.active {
  background: #bfe8fb18;
  border-color: #bfe8fb44;
  color: #bfe8fb;
}

.shot-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.shot-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.shot-add-goal-btn { padding: 8px 16px; font-size: 0.75rem; }

.shot-goal-row {
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.shot-goal-row.shot-goal-complete {
  background-color: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.35);
}
.shot-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.shot-goal-cat {
  font-weight: 700;
  color: #eee;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shot-goal-complete-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4ade80;
  background-color: rgba(74, 222, 128, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
}
.shot-goal-delete {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.shot-goal-delete:hover { color: #ef4444; }
.shot-goal-bar-wrap {
  height: 8px;
  background-color: #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.shot-goal-bar {
  height: 100%;
  background-color: #bfe8fb;
  border-radius: 4px;
  transition: width 0.3s;
}
.shot-goal-complete .shot-goal-bar { background-color: #4ade80; }
.shot-goal-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #888;
}
.shot-goal-meta strong { color: #eee; }
.shot-goal-overdue { color: #ef4444; font-weight: 600; }

.shot-log-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.shot-log-cat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.shot-makes-misses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shot-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.shot-range-toggle {
  display: flex;
  gap: 4px;
  background-color: #111;
  border: 1px solid #2a2a2a;
  padding: 4px;
  border-radius: 6px;
}
.shot-range-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.shot-range-btn:hover { color: #eee; }
.shot-range-btn.active {
  background-color: #bfe8fb18;
  color: #bfe8fb;
}

.shot-chart-wrap {
  height: 320px;
  position: relative;
}

.shot-log-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background-color: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  margin-bottom: 8px;
}
.shot-log-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.shot-log-date {
  font-weight: 700;
  color: #eee;
  font-size: 0.85rem;
}
.shot-log-stats {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
  color: #888;
  flex-wrap: wrap;
}
.shot-log-stats strong { color: #eee; }
.shot-log-delete {
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 6px;
}
.shot-log-delete:hover { color: #ef4444; }

.shot-empty {
  color: #666;
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .shot-summary-cards { grid-template-columns: repeat(2, 1fr); }
  .shot-log-form     { grid-template-columns: 1fr; }
  .shot-log-row      { grid-template-columns: 1fr auto; row-gap: 4px; }
  .shot-log-row .shot-log-stats { grid-column: 1 / 3; }
}

/* ── Admin Performance tab ───────────────────────────────────────── */
.perf-section {
  margin-bottom: 28px;
}
.perf-health-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 18px 22px;
}
.perf-health-hero-num {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}
.perf-health-hero-status {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.perf-health-hero-meta {
  color: #888;
  font-size: 0.85rem;
  line-height: 1.5;
  flex: 1;
}
.perf-band-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.perf-band {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.perf-band-count {
  font-size: 1.6rem;
  font-weight: 800;
  color: #f4f4f4;
}
.perf-band-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.perf-radar-wrap {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 16px;
  height: 320px;
}
@media (max-width: 700px) {
  .perf-band-row { grid-template-columns: repeat(2, 1fr); }
  .perf-health-hero { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   SCHEDULE / BOOKING
   ════════════════════════════════════════════════════════════════════ */

/* Training session chip on the merged calendar */
.cal-event-chip.type-session {
  background: rgba(191, 232, 251, 0.16);
  border: 1px solid #bfe8fb;
  color: #bfe8fb;
}
.cal-event-chip.type-session:hover {
  background: rgba(191, 232, 251, 0.28);
}
/* Swap target — session that was moved here from a different date. */
.cal-event-chip.type-session.swapped {
  background: rgba(250, 204, 21, 0.12);
  border-color: #facc15;
  color: #facc15;
}
.cal-event-chip.type-session.swapped:hover {
  background: rgba(250, 204, 21, 0.22);
}
/* Skipped — kept visible so the player can un-skip if plans change. */
.cal-event-chip.type-session.skipped {
  background: rgba(120, 120, 120, 0.10);
  border-color: #444;
  color: #888;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.cal-event-chip.type-session.skipped:hover {
  background: rgba(120, 120, 120, 0.20);
  color: #aaa;
}
/* Closed — admin-set blackout (holidays, breaks). Read-only chip. */
.cal-event-chip.type-closed {
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #f87171;
  font-style: italic;
  cursor: default;
}

/* Location color-coding for session chips. Layton stays ICE Blue (the
   existing default); Taylorsville gets a warm coral so the two gyms
   are scannable at a glance on the calendar. */
.cal-event-chip.type-session.loc-layton {
  background: rgba(191, 232, 251, 0.16);
  border-color: #bfe8fb;
  color: #bfe8fb;
}
.cal-event-chip.type-session.loc-layton:hover {
  background: rgba(191, 232, 251, 0.28);
}
.cal-event-chip.type-session.loc-taylorsville {
  background: rgba(251, 146, 60, 0.14);
  border-color: #fb923c;
  color: #fb923c;
}
.cal-event-chip.type-session.loc-taylorsville:hover {
  background: rgba(251, 146, 60, 0.26);
}

/* Two-column day cell — Layton on the left, Taylorsville on the right.
   Applied to .cal-month-cell-events when both locations have sessions
   that day. Single-location days keep the default 1-col flex stack so
   the chip text doesn't get truncated unnecessarily. */
.cal-month-cell-events.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
}
.cal-month-cell-events.two-col .cal-month-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;  /* lets chip text ellipsis instead of pushing the column wider */
}
.cal-month-cell-events.two-col .cal-month-col-full {
  grid-column: 1 / -1;  /* "other / no location" chips span both columns */
}

/* Full — slot at capacity. Dimmed + neutral so it visually recedes
   behind the bookable chips. Overrides location colors when present. */
.cal-event-chip.type-session.full,
.cal-event-chip.type-session.loc-layton.full,
.cal-event-chip.type-session.loc-taylorsville.full {
  background: rgba(120, 120, 120, 0.10);
  border-color: #3a3a3a;
  color: #6a6a6a;
}
.cal-event-chip.type-session.full:hover {
  background: rgba(120, 120, 120, 0.18);
  color: #888;
}

/* Filter bar for admin slots and swap picker */
.schedule-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Swap picker: month grid */
.swap-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.swap-month-nav-btn {
  background: transparent;
  border: 1px solid #2e2e2e;
  color: #ccc;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
}
.swap-month-nav-btn:hover { background: #1a1a1a; color: #fff; }
.swap-month-label {
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}
.swap-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}
.swap-dow-header {
  color: #555;
  font-size: 0.7em;
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.swap-day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #555;
  font-size: 0.9em;
  font-weight: 500;
  cursor: default;
  user-select: none;
}
.swap-day-cell.other-month {
  background: transparent;
  border-color: transparent;
  color: #2a2a2a;
}
.swap-day-cell.original {
  border-color: #444;
  color: #777;
  font-style: italic;
}
.swap-day-cell.has-availability {
  color: #fff;
  cursor: pointer;
  border-color: rgba(191, 232, 251, 0.4);
  background: rgba(191, 232, 251, 0.06);
}
.swap-day-cell.has-availability:hover {
  background: rgba(191, 232, 251, 0.18);
  border-color: #bfe8fb;
}
.swap-day-cell.selected {
  background: #bfe8fb;
  color: #0d0d0d;
  border-color: #bfe8fb;
  font-weight: 700;
}
.swap-day-label {
  color: #bfe8fb;
  font-weight: 600;
  font-size: 0.95em;
  margin-bottom: 10px;
  margin-top: 4px;
}
.schedule-filter-bar select {
  min-width: 160px;
}

/* Admin: trainer rows */
.admin-trainer-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  margin-bottom: 8px;
}
.admin-trainer-name { color: #fff; font-weight: 600; }
.admin-trainer-email { color: #888; font-size: 0.9em; }

/* Admin: slot cards grouped by day of week */
.schedule-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.schedule-day-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.schedule-day-header {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfe8fb;
  padding: 6px 4px 4px;
  border-bottom: 1px solid #2e2e2e;
  margin-bottom: 4px;
}
.schedule-slot-card {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 14px;
  transition: border-color 140ms ease;
}
.schedule-slot-card:hover { border-color: rgba(191, 232, 251, 0.25); }

/* Inline icons next to each slot meta line. Same set as the player
   schedule pills so the visual vocabulary stays consistent. */
.slot-icon {
  width: 12px; height: 12px;
  color: #777;
  flex-shrink: 0;
  vertical-align: -1px;
  margin-right: 6px;
}
.schedule-slot-meta {
  display: flex;
  align-items: center;
}
.schedule-slot-time .slot-icon { color: #bfe8fb; }
.schedule-slot-meta > span { min-width: 0; }

/* Active / Inactive pill — replaces opacity-as-status. The pill itself
   carries the signal, so admins don't have to infer state from how
   washed-out the card looks. */
.slot-pill-row {
  margin: 4px 0 8px;
}
.slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.slot-pill-icon { width: 8px; height: 8px; }
.slot-pill-active {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.40);
}
.slot-pill-inactive {
  color: #888;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
.schedule-slot-spots-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2e2e2e;
}

/* Open-spots badge variants (reuses base .spots-badge color) */
.spots-badge.spots-low {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
  border-color: #f8717155;
}
.spots-badge.spots-full {
  background: #2e2e2e;
  color: #888;
  border-color: #3a3a3a;
}

/* Slots view toggle (reuses existing .cal-view-toggle styling) */
.slots-view-toggle { margin-left: auto; }

/* Week-calendar grid for Session Slots */
.schedule-week-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  overflow: hidden;
}
.schedule-week-corner {
  background: #1a1a1a;
  border-bottom: 1px solid #2e2e2e;
}
.schedule-week-day-header {
  text-align: center;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
  padding: 10px 4px;
  border-bottom: 1px solid #2e2e2e;
  border-left: 1px solid #2e2e2e;
  background: #0f0f0f;
}
.schedule-week-axis {
  position: relative;
  background: #0d0d0d;
  border-right: 1px solid #2e2e2e;
}
.schedule-week-hour-label {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 0.7em;
  color: #555;
  padding: 2px 6px 0 6px;
  text-align: right;
  transform: translateY(-7px);
}
.schedule-week-day-col {
  position: relative;
  border-left: 1px solid #2e2e2e;
  background: #0d0d0d;
}
.schedule-week-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #1f1f1f;
  pointer-events: none;
}
.schedule-cal-block {
  position: absolute;
  left: 4px;
  right: 4px;
  background: rgba(191, 232, 251, 0.14);
  border: 1px solid #bfe8fb;
  color: #bfe8fb;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.schedule-cal-block:hover {
  background: rgba(191, 232, 251, 0.28);
}
.schedule-cal-block.inactive { opacity: 0.5; }

/* Location color-coding for the weekly slot picker. Layton stays the
   default ICE Blue; Taylorsville uses the same coral as the monthly
   sessions calendar so the two locations are scannable. `:not(.selected)`
   keeps the selected-state highlight intact regardless of location. */
.schedule-cal-block.loc-taylorsville:not(.selected) {
  background: rgba(251, 146, 60, 0.14);
  border-color: #fb923c;
  color: #fb923c;
}
.schedule-cal-block.loc-taylorsville:not(.selected):hover {
  background: rgba(251, 146, 60, 0.26);
}
.schedule-cal-block.loc-taylorsville:not(.selected) .cal-block-time { color: #fb923c; }
/* Default (open) spots pill takes the location color so the block reads
   as a unit. spots-low / spots-full keep their semantic colors. */
.schedule-cal-block.loc-taylorsville:not(.selected) .cal-block-spots:not(.spots-low):not(.spots-full) {
  background: rgba(251, 146, 60, 0.22);
  border-color: #fb923c55;
  color: #fb923c;
}
.cal-block-time {
  font-size: 0.7em;
  color: #bfe8fb;
  font-weight: 600;
}
.cal-block-name {
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-block-meta {
  font-size: 0.7em;
  color: #aaa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-block-spots {
  font-size: 0.7em;
  color: #bfe8fb;
  margin-top: auto;
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(191, 232, 251, 0.22);
  border: 1px solid #bfe8fb55;
}
.cal-block-spots.spots-low {
  background: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  border-color: #f8717155;
}
.cal-block-spots.spots-full {
  background: #2e2e2e;
  color: #888;
  border-color: #3a3a3a;
}

@media (max-width: 800px) {
  .schedule-week-grid { grid-template-columns: 48px repeat(7, 90px); overflow-x: auto; }
  .slots-view-toggle { margin-left: 0; width: 100%; }
}

/* Enroll modal: selected slot line + selected-block highlight */
.enroll-selected-line {
  padding: 10px 12px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  color: #888;
  font-size: 0.9em;
  margin-bottom: 10px;
}
.enroll-selected-line.selected {
  background: rgba(191, 232, 251, 0.12);
  border-color: #bfe8fb;
  color: #fff;
}
.schedule-cal-block.selected {
  background: #bfe8fb;
  border-color: #bfe8fb;
  color: #0d0d0d;
  box-shadow: 0 0 0 2px #bfe8fb55;
  z-index: 2;
}
.schedule-cal-block.selected .cal-block-time,
.schedule-cal-block.selected .cal-block-name,
.schedule-cal-block.selected .cal-block-meta { color: #0d0d0d; }
.schedule-cal-block.selected .cal-block-spots {
  background: rgba(13, 13, 13, 0.18);
  color: #0d0d0d;
  border-color: rgba(13, 13, 13, 0.3);
}
.schedule-cal-block.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.schedule-cal-block.disabled:hover {
  background: rgba(191, 232, 251, 0.14);
}

/* Enroll modal calendar wrapper — scrolls vertically if tall */
#enroll-slot-calendar {
  max-height: 420px;
  overflow-y: auto;
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   ENGAGEMENT: Up Next, Streak, Mindset cadence, Quick Actions
   ════════════════════════════════════════════════════════════════════ */

/* Quick action cards on My Game page (Log Game / Workout / Challenge) */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 24px;
}
.quick-action-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 16px 14px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.quick-action-card:hover {
  background: rgba(191, 232, 251, 0.08);
  border-color: rgba(191, 232, 251, 0.4);
}
.quick-action-card:active { transform: scale(0.98); }
.quick-action-icon { font-size: 1.6rem; line-height: 1; }
.quick-action-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #bfe8fb;
  letter-spacing: 0.02em;
}
.quick-action-sub {
  font-size: 0.72rem;
  color: #888;
}
@media (max-width: 480px) {
  .quick-actions { gap: 6px; }
  .quick-action-card { padding: 12px 8px; }
  .quick-action-icon { font-size: 1.3rem; }
  .quick-action-label { font-size: 0.78rem; }
  .quick-action-sub { font-size: 0.65rem; }
}

/* Up Next panel on My Game */
.up-next-panel { margin: 16px 0 24px; }
.up-next-heading {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.up-next-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.up-next-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
}
.up-next-icon {
  font-size: 1.6em;
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-next-icon svg {
  width: 26px;
  height: 26px;
}
.up-next-title {
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
}
.up-next-sub {
  color: #888;
  font-size: 0.88em;
}
.up-next-cta {
  background: #bfe8fb;
  color: #0d0d0d;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
}
.up-next-cta:hover { background: #d4f0fc; }

.up-next-card.danger {
  border-color: #dc262655;
  background: rgba(220, 38, 38, 0.10);
}
.up-next-card.danger .up-next-cta {
  background: #dc2626;
  color: #fff;
}
.up-next-card.danger .up-next-cta:hover { background: #ef4444; }

.up-next-card.warn {
  border-color: #facc1555;
  background: rgba(250, 204, 21, 0.08);
}
.up-next-card.warn .up-next-cta {
  background: #facc15;
  color: #0d0d0d;
}

.up-next-card.info {
  border-color: #bfe8fb44;
}

.up-next-card.positive {
  border-color: #16a34a55;
  background: rgba(22, 163, 74, 0.08);
}

/* Streak card (used on Training Health header + Shot Tracker) */
.streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
  transition: border-color 140ms ease, background 140ms ease;
}
.streak-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  flex-shrink: 0;
}
.streak-icon svg { width: 100%; height: 100%; }

/* Sibling helper for the renderHealthStreak flame which uses
   .streak-flame instead of .streak-icon. Size the SVG so it doesn't
   default to 150px and blow up the card. (UX_AUDIT_v2 #10.) */
.streak-flame {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fb923c;
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.streak-flame svg { width: 100%; height: 100%; }
.streak-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.streak-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #bfe8fb;
  line-height: 1;
  letter-spacing: -0.01em;
}
.streak-label {
  color: #888;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.streak-headline {
  color: #ddd;
  font-size: 0.95rem;
  font-weight: 700;
}
.streak-sub {
  color: #777;
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Hot streak (>= danger threshold). Flame turns orange. */
.streak-card.streak-hot .streak-icon { color: #fb923c; }

/* No-streak zero state. Dashed outline reads as "empty container". */
.streak-card.streak-zero {
  background: #0f0f0f;
  border-style: dashed;
}
.streak-card.streak-zero .streak-icon { color: #555; }

/* Danger state — yellow accent + warning badge with both color and icon
   (icon present so it works for colorblind users / poor contrast). */
.streak-card.streak-danger {
  border-color: #facc1588;
  background: rgba(250, 204, 21, 0.08);
}
.streak-card.streak-danger .streak-num { color: #facc15; }
.streak-card.streak-danger .streak-icon { color: #facc15; }
.streak-danger-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(250, 204, 21, 0.18);
  border: 1px solid #facc1577;
  color: #facc15;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.streak-danger-badge svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .streak-card { gap: 12px; padding: 12px 14px; }
  .streak-icon { width: 30px; height: 30px; }
  .streak-num { font-size: 1.5rem; }
  .streak-danger-badge {
    padding: 4px 8px;
    font-size: 0.68rem;
  }
  .streak-danger-badge span { display: none; }
}

/* Mindset cadence banner */
.mindset-cadence-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid #2e2e2e;
  background: #1a1a1a;
}
.cadence-text {
  color: #fff;
  font-size: 0.95em;
}
.cadence-cta {
  background: #bfe8fb;
  color: #0d0d0d;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
}
.cadence-cta:hover { background: #d4f0fc; }
.mindset-cadence-banner.cadence-ok { background: #0f0f0f; }
.mindset-cadence-banner.cadence-ok .cadence-text { color: #888; }
.mindset-cadence-banner.cadence-due {
  border-color: #facc1555;
  background: rgba(250, 204, 21, 0.08);
}
.mindset-cadence-banner.cadence-overdue {
  border-color: #dc262655;
  background: rgba(220, 38, 38, 0.10);
}
.mindset-cadence-banner.cadence-overdue .cadence-cta {
  background: #dc2626;
  color: #fff;
}
.mindset-cadence-banner.cadence-never {
  border-color: #bfe8fb55;
  background: rgba(191, 232, 251, 0.08);
}

@media (max-width: 600px) {
  .up-next-card { grid-template-columns: auto 1fr; }
  .up-next-card .up-next-cta { grid-column: 1 / -1; justify-self: stretch; }
  .mindset-cadence-banner { flex-direction: column; align-items: stretch; }
  .mindset-cadence-banner .cadence-cta { width: 100%; }
}
/* Inactive cards: slight desaturation only (pill carries the real
   "this is off" signal). 0.55 opacity made admins second-guess that
   they were viewing fresh data. */
.schedule-slot-card.inactive { opacity: 0.78; }
.schedule-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.schedule-slot-name { color: #fff; font-weight: 600; font-size: 1.05em; }
.schedule-slot-meta { color: #aaa; font-size: 0.92em; margin-top: 2px; }
.schedule-slot-meta.muted { color: #666; }
.muted { color: #666; font-weight: 400; }

/* Admin: roster sections */
.admin-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 8px;
}
.admin-subsection-title {
  color: #fff;
  font-weight: 600;
  font-size: 1.05em;
}
.admin-subscription-row,
.admin-booking-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  margin-bottom: 6px;
}
.admin-subscription-row.cancelled { opacity: 0.55; }
.admin-sub-title { color: #fff; font-weight: 600; }
.admin-sub-meta { color: #aaa; font-size: 0.9em; margin-top: 2px; }
.admin-booking-date { color: #fff; font-weight: 600; }
.admin-booking-meta { color: #aaa; font-size: 0.9em; margin-top: 2px; }
.admin-booking-actions,
.admin-sub-actions { display: flex; gap: 6px; }

/* Player: upcoming sessions list */
.upcoming-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upcoming-session-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "date content actions"
    "status status status";
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.upcoming-session-row:hover {
  border-color: rgba(191, 232, 251, 0.28);
}

/* Calendar-pill date block (left column). Three rows: month abbr,
   day number, weekday abbr. Today gets a brighter ICE-blue fill,
   tomorrow a soft outline — quick visual scan of "what's next". */
.us-date {
  grid-area: date;
  width: 58px;
  padding: 8px 0;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  text-align: center;
  align-self: center;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.us-date-month {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #bfe8fb;
}
.us-date-day {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 2px 0;
}
.us-date-weekday {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #888;
}
.us-date.today {
  background: linear-gradient(180deg, rgba(191, 232, 251, 0.18), rgba(191, 232, 251, 0.05));
  border-color: #bfe8fb;
}
.us-date.today .us-date-day { color: #bfe8fb; }
.us-date.tomorrow {
  border-color: rgba(191, 232, 251, 0.42);
}

/* Content (middle column) — session title + icon-led meta rows. */
.us-content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.us-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
}
.us-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aaa;
  font-size: 0.84rem;
  flex-wrap: wrap;
  min-width: 0;
}
.us-meta-time { color: #bfe8fb; }
.us-meta-time .us-icon { color: #bfe8fb; }
.us-meta-tags {
  color: #9aa3ad;
  gap: 4px;
}
.us-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.us-meta-divider {
  color: #444;
  margin: 0 6px;
}
.us-icon {
  width: 13px;
  height: 13px;
  color: #888;
  flex-shrink: 0;
}

/* Legacy text-row variants — admin's blackouts + placeholder-subscriptions
   lists still use this simpler layout (no calendar pill needed for a
   one-off date range entry). Kept for backward compat only; player
   schedule rows use the .us-* classes above. */
.upcoming-session-left { min-width: 0; }
.upcoming-session-date { color: #bfe8fb; font-weight: 600; }
.upcoming-session-meta { color: #fff; margin-top: 2px; font-size: 0.88rem; }
.upcoming-session-meta.muted { color: #888; font-size: 0.82rem; }

/* Coach-notes link inline in the upcoming-session row's left column.
   Renders only when notes exist; opens the session detail modal which
   already shows the full notes text. */
.upcoming-session-notes-link {
  margin-top: 6px;
  align-self: flex-start;
  background: rgba(191, 232, 251, 0.12);
  border: 1px solid #bfe8fb55;
  color: #bfe8fb;
  font-size: 0.78em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.upcoming-session-notes-link:hover {
  background: rgba(191, 232, 251, 0.22);
  border-color: #bfe8fb;
}
.upcoming-session-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-self: center;
  flex-shrink: 0;
}
.upcoming-action-btn {
  background: transparent;
  border: 1px solid #2e2e2e;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.15s, border-color 0.15s;
}
.upcoming-action-btn:hover {
  background: #bfe8fb18;
  border-color: #bfe8fb22;
}
.upcoming-action-btn.primary {
  background: #bfe8fb;
  border-color: #bfe8fb;
  color: #0d0d0d;
  font-weight: 600;
}
.upcoming-action-btn.primary:hover { background: #d4f0fc; }

/* Skipped + swapped variants on the upcoming sessions list */
.upcoming-session-row.skipped {
  background: #0f0f0f;
  border-style: dashed;
  opacity: 0.65;
}
.upcoming-session-row.skipped .us-title,
.upcoming-session-row.skipped .us-meta { color: #777; }
.upcoming-session-row.skipped .us-date-day {
  text-decoration: line-through;
  color: #777;
}
.upcoming-session-row.swapped {
  background: rgba(250, 204, 21, 0.06);
  border-color: #facc1555;
}
/* Closed (admin blackout) — read-only state, no Skip/Swap actions. */
.upcoming-session-row.closed {
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.4);
  opacity: 0.85;
}
.upcoming-session-row.closed .us-title,
.upcoming-session-row.closed .us-meta { color: #aaa; }
.upcoming-session-row.closed .upcoming-session-status {
  color: #f87171;
  background: rgba(248, 113, 113, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.upcoming-session-row.swapped .us-date-day {
  color: #facc15;
}
.upcoming-session-row.swapped .us-date {
  border-color: rgba(250, 204, 21, 0.45);
}
.upcoming-session-status {
  grid-area: status;
  display: block;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upcoming-session-notes-link { align-self: flex-start; margin-top: 2px; }

/* Narrow viewports: actions move into a third column on the right
   with the buttons stacked vertically — no dead row under content,
   card height = max(date pill, content stack). Trainer + location
   stack vertically with their icons. */
@media (max-width: 560px) {
  .upcoming-session-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "date content actions"
      "status status status";
    gap: 4px 10px;
    padding: 12px 14px;
  }
  .us-content { gap: 3px; }
  .us-meta { font-size: 0.8rem; }
  .us-meta-tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .us-meta-divider { display: none; }
  .upcoming-session-actions {
    flex-direction: column;
    align-self: center;
    gap: 6px;
  }
  .upcoming-action-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    min-width: 60px;
    text-align: center;
  }
  .us-date { width: 52px; padding: 6px 0; align-self: center; }
  .us-date-day { font-size: 1.35rem; }
}
.upcoming-session-row.skipped .upcoming-session-status {
  color: #888;
  background: #2e2e2e;
  border: 1px solid #3a3a3a;
}
.upcoming-session-row.swapped .upcoming-session-status {
  color: #facc15;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid #facc1555;
}

/* Player: session detail modal */
.session-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #2e2e2e;
}
.session-detail-row:last-child { border-bottom: none; }
.session-detail-label { color: #888; }

/* Swap picker */
.swap-candidate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
}
.swap-candidate-row:hover {
  background: #bfe8fb14;
  border-color: #bfe8fb44;
}
/* Full sessions stay visible but are greyed out and not bookable */
.swap-candidate-row-full {
  opacity: 0.5;
  cursor: not-allowed;
}
.swap-candidate-row-full:hover {
  background: #1a1a1a;
  border-color: #2e2e2e;
}
.swap-candidate-main { flex: 1; min-width: 0; }
.swap-candidate-date { color: #fff; font-weight: 600; }
.swap-candidate-meta { color: #888; font-size: 0.9em; margin-top: 2px; }
.spots-badge {
  background: #bfe8fb22;
  border: 1px solid #bfe8fb44;
  color: #bfe8fb;
  font-size: 0.8em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Enroll modal — readonly player line */
.schedule-readonly-line {
  padding: 10px 12px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  color: #aaa;
}
.schedule-hint {
  margin: 10px 0 0;
  color: #888;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Clickable player name → admin drill-down (app-wide, admin-only). Subtle
   underline affordance; inherits the surrounding text color so it blends
   into feed cards, leaderboard rows, message headers, etc. */
.player-link {
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(191, 232, 251, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.player-link:hover {
  color: #bfe8fb;
  text-decoration-color: #bfe8fb;
}
.player-link:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Player List: search input */
.admin-filter-search {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  min-width: 200px;
}
.admin-filter-search:focus {
  outline: none;
  border-color: #bfe8fb;
}
.admin-filter-search::placeholder { color: #666; }

/* Player drill-down: Schedule section */
.admin-detail-schedule-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-detail-subs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-detail-sub-row {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  padding: 10px 12px;
}
.admin-detail-sub-title { color: #fff; font-weight: 600; }
.admin-detail-sub-meta { color: #aaa; font-size: 0.9em; margin-top: 2px; }
.admin-detail-sub-meta.muted { color: #666; }
.admin-detail-subsection {
  color: #fff;
  font-weight: 600;
  margin: 16px 0 8px;
}
.admin-detail-bookings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-detail-booking-row {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  background: #0f0f0f;
  border-radius: 6px;
  font-size: 0.9em;
}
.admin-detail-booking-date { color: #bfe8fb; font-weight: 600; min-width: 90px; }
.admin-detail-booking-meta { color: #aaa; }

/* Admin: feature flags / tab visibility */
.admin-section-sub {
  color: #888;
  font-size: 0.85em;
  margin: -4px 0 12px;
}
.ff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
}
.ff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
}
.ff-label { color: #fff; }

/* Sidebar section labels (grouped player/admin nav) */
.sidebar-section-label {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  padding: 14px 14px 6px;
  margin-top: 4px;
}
.sidebar-section-label:first-child { margin-top: 0; padding-top: 6px; }

/* ════════════════════════════════════════════════════════════════════
   ADMIN SCHEDULE TABS + ATTENDANCE
   ════════════════════════════════════════════════════════════════════ */

.schedule-admin-tabs {
  display: flex;
  gap: 6px;
}
.schedule-admin-tab {
  background: transparent;
  border: 1px solid #2e2e2e;
  color: #aaa;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
}
.schedule-admin-tab:hover {
  background: #bfe8fb14;
  border-color: #bfe8fb44;
  color: #fff;
}
.schedule-admin-tab.active {
  background: #bfe8fb;
  border-color: #bfe8fb;
  color: #0d0d0d;
}

/* Wider modal for the attendance roster */
.cal-modal-card-wide { max-width: 720px; }

.admin-sd-meta-row {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2e2e2e;
}
.admin-sd-meta-line { color: #fff; font-size: 0.95em; }
.admin-sd-meta-line.muted { color: #888; font-size: 0.88em; margin-top: 2px; }

/* Roster tiles in two columns on desktop so all members fit on screen
   without scrolling. Each tile keeps its own internal grid so the notes
   textarea still spans the tile's full width. Loading / empty states
   span both columns. Mobile collapses back to one column. */
#admin-sd-roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
#admin-sd-roster > :not(.attendance-row) { grid-column: 1 / -1; }
@media (max-width: 700px) {
  #admin-sd-roster { grid-template-columns: 1fr; }
}

.attendance-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  min-width: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 140ms ease, box-shadow 140ms ease,
              border-color 140ms ease, background 140ms ease;
}
.attendance-row::before {
  /* Status edge — colored stripe on the left. Neutral gray for unmarked,
     ICE-green for Present, soft red for Absent. Single strongest scan
     signal in the modal. */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: #2e2e2e;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: background 140ms ease;
}
.attendance-row:hover {
  transform: translateY(-1px);
  border-color: rgba(191, 232, 251, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(191, 232, 251, 0.10);
}
.attendance-row.status-present {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0.04) 60%, #1a1a1a);
  border-color: rgba(22, 163, 74, 0.40);
}
.attendance-row.status-present::before { background: #16a34a; }
.attendance-row.status-absent {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.04) 60%, #1a1a1a);
  border-color: rgba(220, 38, 38, 0.38);
}
.attendance-row.status-absent::before { background: #dc2626; }

/* Name + avatar block (left side of the tile). */
.attendance-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  align-self: center;
}
.attendance-avatar {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.attendance-name {
  color: #bfe8fb;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  min-width: 0;
  word-break: break-word;
}
.attendance-status {
  display: flex;
  gap: 6px;
  align-self: center;
  justify-content: flex-end;
}
/* Second action row (Edit / Delete) — stacks under the attendance buttons
   in the right-hand column. Name spans both rows so it stays centered. */
.attendance-name-wrap { grid-row: 1 / 3; }
.attendance-actions {
  grid-column: 2;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-self: center;
}
.attend-action-btn {
  background: transparent;
  border: 1px solid #2e2e2e;
  color: #aaa;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.attend-action-edit:hover {
  background: #bfe8fb14;
  border-color: #bfe8fb66;
  color: #fff;
}
.attend-action-delete:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.55);
  color: #fca5a5;
}
.attendance-notes {
  grid-column: 1 / -1;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
  min-height: 50px;
}
.attendance-notes:focus {
  outline: none;
  border-color: #bfe8fb;
}
.attend-btn {
  background: transparent;
  border: 1px solid #2e2e2e;
  color: #aaa;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease,
              color 120ms ease, transform 100ms ease;
}
/* Icon button variant (✓ / ✕) — square, larger glyph, more clickable. */
.attend-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attend-btn-icon:active { transform: scale(0.94); }
.attend-btn:hover {
  background: #bfe8fb14;
  border-color: #bfe8fb44;
  color: #fff;
}
.attend-btn.active.present {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.attend-btn.active.absent {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* Book Session — book an existing player from inside the session-day modal */
.admin-sd-book-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #2e2e2e;
}
.admin-sd-book-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  margin-top: 4px;
}
.admin-sd-book-panel.hidden { display: none; }
.admin-sd-book-players { display: flex; flex-direction: column; gap: 6px; }
.admin-sd-book-players-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85em;
  color: #aaa;
}
.admin-sd-book-players-head input {
  flex: 0 1 220px;
  padding: 6px 8px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9em;
}
.admin-sd-book-players-head input:focus { outline: none; border-color: #bfe8fb; }
.admin-sd-book-player-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  background: #0f0f0f;
}
.admin-sd-book-player-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.9em;
  border-bottom: 1px solid #1e1e1e;
  cursor: pointer;
}
.admin-sd-book-player-row:last-child { border-bottom: none; }
.admin-sd-book-player-row:hover { background: #181818; }
.admin-sd-book-player-row input[type="checkbox"] { margin: 0; accent-color: #bfe8fb; }
.admin-sd-book-player-name { color: #fff; }
.admin-sd-book-player-email { font-size: 0.85em; }
.admin-sd-book-empty { padding: 12px; color: #888; font-size: 0.9em; text-align: center; }
.admin-sd-book-type-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
  color: #aaa;
  max-width: 280px;
}
.admin-sd-book-type-wrap select {
  padding: 6px 8px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9em;
}
.admin-sd-book-type-wrap select:focus { outline: none; border-color: #bfe8fb; }
.admin-sd-book-custom-wrap input {
  padding: 6px 8px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9em;
  width: 120px;
}
.admin-sd-book-custom-wrap input:focus { outline: none; border-color: #bfe8fb; }
.admin-sd-book-custom-wrap.hidden { display: none; }
.admin-sd-book-roster-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: rgba(248, 168, 74, 0.18);
  color: #f8a84a;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-sd-book-actions { display: flex; gap: 6px; }

/* Placeholder rows surfaced in the session-day modal — dimmer than
   real attendee rows so the eye scans past them when checking attendance. */
.attendance-row.attendance-row-placeholder {
  background: #161616;
  border-style: dashed;
  opacity: 0.85;
}
.attendance-row.attendance-row-placeholder .attendance-name { color: #aaa; }
.attendance-row.attendance-row-placeholder::before { background: #555; }

/* Trash button — neutral by default, red on hover. */
.attend-btn-remove { color: #888; }
.attend-btn-remove:hover {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.55);
  color: #f87171;
}

/* Placeholder spots ("ghost" seats: Trial / Holding / New Player) */
.admin-sd-placeholder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #2e2e2e;
  font-size: 0.85em;
}
.admin-sd-qty-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #aaa;
  font-size: 0.85em;
}
.admin-sd-qty-label input {
  width: 56px;
  padding: 4px 6px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.9em;
}
.admin-sd-qty-label input:focus {
  outline: none;
  border-color: #bfe8fb;
}
.placeholder-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  background: #161616;
  border: 1px dashed #3a3a3a;
  border-radius: 8px;
  margin-bottom: 8px;
}
.placeholder-name {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
}
.placeholder-actions { align-self: center; }
.placeholder-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid;
}
.placeholder-badge.placeholder-trial {
  background: rgba(191, 232, 251, 0.14);
  color: #bfe8fb;
  border-color: #bfe8fb55;
}
.placeholder-badge.placeholder-holding {
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
  border-color: #facc1555;
}
.placeholder-badge.placeholder-new_player {
  background: rgba(74, 222, 128, 0.14);
  color: #86efac;
  border-color: #16a34a55;
}

/* Player session detail: coach notes block + attendance pill */
.session-detail-notes {
  padding: 12px 0 4px;
  border-top: 1px solid #2e2e2e;
  margin-top: 6px;
}
.session-detail-notes .session-detail-label {
  display: block;
  margin-bottom: 6px;
}
.session-detail-notes-body {
  color: #fff;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-size: 0.95em;
  line-height: 1.4;
}
.attendance-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
}
.attendance-pill.present {
  background: rgba(22, 163, 74, 0.18);
  color: #4ade80;
  border: 1px solid #16a34a55;
}
.attendance-pill.absent {
  background: rgba(220, 38, 38, 0.18);
  color: #f87171;
  border: 1px solid #dc262655;
}
.attendance-pill.skipped {
  background: rgba(120, 120, 120, 0.14);
  color: #aaa;
  border: 1px solid #3a3a3a;
}
/* "Not marked" — neutral muted pill so the row reads as informational
   without implying attendance was absent. */
.attendance-pill:not(.present):not(.absent):not(.skipped) {
  background: rgba(120, 120, 120, 0.08);
  color: #888;
  border: 1px solid #2a2a2a;
}

@media (max-width: 600px) {
  .schedule-admin-tabs { width: 100%; margin-left: 0; }
  .attendance-row { grid-template-columns: 1fr; }
  .attendance-status { justify-self: start; }
}

/* Per-player attendance table on Stats tab */
.stats-player-row {
  display: grid;
  grid-template-columns: 1fr 110px 110px 80px;
  gap: 10px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  margin-bottom: 4px;
  align-items: center;
  color: #fff;
}
.stats-player-row.stats-player-head {
  background: transparent;
  border: none;
  color: #888;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
}
.stats-player-name { font-weight: 600; }
.stats-player-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #aaa;
}
.stats-player-row .stats-player-num:last-child {
  color: #bfe8fb;
  font-weight: 600;
}

/* Player drill-down attendance line */
.admin-detail-attendance {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: #0f0f0f;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
}
.admin-detail-attendance .attendance-pill { font-size: 0.95em; padding: 4px 12px; }
.admin-detail-attendance .attendance-pill:not(.present):not(.absent) {
  background: rgba(191, 232, 251, 0.16);
  color: #bfe8fb;
  border: 1px solid #bfe8fb44;
}

@media (max-width: 600px) {
  .stats-player-row { grid-template-columns: 1fr 70px 80px 60px; gap: 6px; padding: 8px; }
}

/* ── Universal focus-visible rings (a11y / keyboard nav) ─────────────
   Native <button> and any element with role="button" gets a visible
   ring on keyboard focus. Specific card-as-button classes are listed
   too so divs that haven't been migrated to semantic <button> still
   get a ring once they receive role="button" or tabindex="0". */
button:focus-visible,
[role="button"]:focus-visible,
.sidebar-btn:focus-visible,
.quick-action-card:focus-visible,
.up-next-card:focus-visible,
.cert-card:focus-visible,
.cert-card-toggle:focus-visible,
.rec-card:focus-visible,
.lb-card:focus-visible,
.stat-card:focus-visible,
.admin-overview-card:focus-visible,
.schedule-slot-card:focus-visible,
.cal-modal-close:focus-visible,
.mt-modal-close:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Auth/profile modal close button (top-right ×) */
.auth-card { position: relative; }
.auth-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #666;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.auth-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.auth-modal-close:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

/* ── Toasts + confirm modal (replaces native alert/confirm) ─────────── */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}

.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 400px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #f3f4f6;
  border-left: 4px solid #888;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  word-wrap: break-word;
}
.toast.toast-show { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: #34d399; }
.toast-error   { border-left-color: #f87171; }
.toast-warning { border-left-color: #fbbf24; }
.toast-info    { border-left-color: #bfe8fb; }

/* Actionable toast (skip-undo, etc.) — message + inline button */
.toast.toast-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
}
.toast.toast-action .toast-body { flex: 1; min-width: 0; cursor: pointer; }
.toast-action-btn {
  background: #bfe8fb;
  color: #0b1d2a;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  min-height: 36px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.toast-action-btn:hover  { background: #d9f0fa; }
.toast-action-btn:active { background: #a8d6e9; }
.toast-action-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

/* ── 44px tap-target sweep (UX_AUDIT_v2 #7) ─────────────────────────
   New surfaces injected their own button/input styles with paddings
   below the 44×44 WCAG 2.5.5 standard. Rather than editing every
   inline <style> block, lift each class to the canonical minimum
   here. Padding-based and width-based sizing both end up at ≥44 via
   min-height (buttons) and min-width (square buttons). */
.feed-reaction-btn,
.feed-comment-post-btn,
.feed-announcement-post-btn,
.q-card-action,
.q-form-input,
.q-form-textarea,
.q-rating-btn,
.msg-rail-search,
.msg-compose-input,
.av-form input:not([type="checkbox"]),
.av-form select,
.av-form textarea,
.aq-form input:not([type="checkbox"]),
.aq-form select,
.aq-form textarea,
.vid-cat-pill,
.av-cat-pill,
.aq-tab-pill {
  min-height: 44px !important;
}
/* Quarterly drill rating buttons are circular — bump width too. */
.q-rating-btn {
  min-width: 44px !important;
}
/* Reaction pills get a touch more breathing room. */
.feed-reaction-btn {
  padding: 8px 14px !important;
}

/* ── Narrow-phone breakpoints (UX_AUDIT_v2 #13) ─────────────────────
   Feed top10 rows, quarterly drill score inputs, recruiting hero,
   and health up-next cards need to degrade gracefully at 380px and
   below. Each was built desktop-first. */
@media (max-width: 380px) {
  /* Feed weekly_top10: stack rank/name on top of value. */
  .feed-top10-row {
    grid-template-columns: 1fr auto !important;
    gap: 4px 8px !important;
  }
  .feed-top10-rank { grid-row: 1; }
  .feed-top10-name { grid-row: 1; }
  .feed-top10-val  { grid-row: 1 / span 2; }

/* Quarterly composite drill inputs (feet/inches, min/sec). */
  .q-drill-score-parts input { width: 56px !important; }
  .q-drill-score-parts { gap: 6px !important; }

/* Recruiting hero — stack avatar above name on smallest phones. */
  .rec-hero-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

/* Health Up Next cards — full width single column. */
  .up-next-cards {
    grid-template-columns: 1fr !important;
  }
}

/* First-run welcome card on Health page (UX_AUDIT_v3 #6) */
.welcome-card {
  position: relative;
  background: linear-gradient(135deg, #102234 0%, #0b1d2a 100%);
  border: 1px solid #1f3a52;
  border-left: 4px solid #bfe8fb;
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin-bottom: 16px;
}
.welcome-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.welcome-dismiss:hover { color: #fff; background: rgba(255,255,255,0.05); }
.welcome-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bfe8fb;
  font-weight: 700;
  margin-bottom: 4px;
}
.welcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.welcome-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.welcome-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  min-height: 44px;
  background: rgba(191, 232, 251, 0.04);
  border: 1px solid #1f3a52;
  border-radius: 8px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.welcome-step:hover {
  background: rgba(191, 232, 251, 0.08);
  border-color: #2d5275;
}
.welcome-step:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}
.welcome-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #bfe8fb;
  color: #0b1d2a;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}
.welcome-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.welcome-step-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.welcome-step-sub {
  font-size: 0.85rem;
  color: #aaa;
}
.welcome-step-chev {
  color: #777;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.welcome-step.done {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.45);
}
.welcome-step.done:hover {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.6);
}
.welcome-step.done .welcome-step-num {
  background: #4ade80;
  color: #0b1d2a;
}
.welcome-step.done .welcome-step-title {
  color: #d6f5e0;
}
.welcome-step.done .welcome-step-sub {
  color: #8fd3a3;
}
.welcome-step.done .welcome-step-chev {
  color: #4ade80;
}

/* Player profile-card "Notifications" button */
.player-profile-prefs-btn {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #bfe8fb;
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.player-profile-prefs-btn:hover {
  background: rgba(191, 232, 251, 0.06);
  border-color: #4a78a8;
}
.player-profile-prefs-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

/* Stacked action buttons (Edit Profile / Notifications) on the profile card. */
.player-profile-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-profile-actions .player-profile-prefs-btn {
  margin-left: 0;
  width: 100%;
}

/* Push preferences modal rows */
.push-pref-intro {
  color: #aaa;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-bottom: 1px solid #1f1f1f;
  margin-bottom: 4px;
}
.push-pref-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
}
.push-pref-row:last-child { border-bottom: none; }
.push-pref-row:hover { background: rgba(255, 255, 255, 0.02); }
.push-pref-text { flex: 1; min-width: 0; }
.push-pref-label {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}
.push-pref-desc {
  color: #999;
  font-size: 0.82rem;
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Shake animation for failed optimistic actions ──────────────────
   Add the .ice-shake class to an element for ~400ms to signal that an
   optimistic update has rolled back (e.g., skip-undo failed, message
   send failed). Pair with a toast for the verbal explanation. */
@keyframes ice-shake-kf {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.ice-shake {
  animation: ice-shake-kf 380ms ease-in-out;
}

/* ── Skeleton loaders ───────────────────────────────────────────────
   Replace the standard "Loading…" text with shape-of-content
   placeholders. Perceived speed improvement at the same actual speed.
   Use .skel-row for a list item, .skel-card for a card. */
@keyframes ice-skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skel,
.skel-line,
.skel-circle,
.skel-card {
  background: linear-gradient(90deg, #181818 0%, #232323 50%, #181818 100%);
  background-size: 400px 100%;
  animation: ice-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skel-line { height: 12px; margin-bottom: 8px; }
.skel-line.w-30 { width: 30%; }
.skel-line.w-50 { width: 50%; }
.skel-line.w-70 { width: 70%; }
.skel-line.w-90 { width: 90%; }
.skel-circle { border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; }
.skel-card {
  height: 96px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.skel-list {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #141414;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  margin-bottom: 8px;
}
.skel-row-body {
  flex: 1;
  min-width: 0;
}

/* Swap picker — empty 14-day window state (UX_AUDIT_v3 #5) */
.swap-empty-overall {
  padding: 32px 20px;
  text-align: center;
}
.swap-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.swap-empty-body {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.swap-message-coach-btn {
  background: #bfe8fb;
  color: #0b1d2a;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}
.swap-message-coach-btn:hover  { background: #d9f0fa; }
.swap-message-coach-btn:active { background: #a8d6e9; }
.swap-message-coach-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.confirm-overlay.is-open { opacity: 1; }

.confirm-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  max-width: min(440px, calc(100vw - 32px));
  width: 100%;
  color: #f3f4f6;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(16px);
  transition: transform 0.2s ease;
}
.confirm-overlay.is-open .confirm-card { transform: translateY(0); }

.confirm-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
}
.confirm-title:empty { display: none; }

.confirm-message {
  margin: 0 0 20px;
  color: #d1d5db;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
/* Stacked layout for 3-button confirms (e.g. remove just this date vs.
   all future bookings) — buttons read top-to-bottom in increasing
   blast radius, with Cancel last. */
.confirm-actions.confirm-actions-stacked {
  flex-direction: column-reverse;
  align-items: stretch;
}
.confirm-actions.confirm-actions-stacked .confirm-btn { width: 100%; }
.confirm-btn.confirm-single {
  background: #1f3a52;
  border-color: #1f3a52;
  color: #bfe8fb;
}
.confirm-btn.confirm-single:hover { background: #2d5275; }

.confirm-btn {
  padding: 10px 20px;
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #f3f4f6;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.confirm-btn:hover { background: #2a2a2a; }

.confirm-btn.confirm-ok {
  background: #bfe8fb;
  border-color: #bfe8fb;
  color: #0a0a0a;
}
.confirm-btn.confirm-ok:hover { background: #a5d8f0; }

.confirm-btn.confirm-danger {
  background: #f87171;
  border-color: #f87171;
  color: #0a0a0a;
}
.confirm-btn.confirm-danger:hover { background: #ef4444; }

.confirm-btn:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  .toast {
    max-width: 100%;
    min-width: 0;
  }
  .confirm-actions {
    flex-direction: column-reverse;
  }
  .confirm-btn {
    width: 100%;
  }
}

/* ── UX Pass 2: visual polish (audit findings #6, #7, #11, #16, #17) ── */

/* #16 — Contrast fixes for secondary text (WCAG AA, was #444 / #666) */
.user-email          { color: #aaa; }
.empty-text          { color: #aaa; }
.admin-overview-sub  { color: #aaa; }

/* #11 — Error banner (replaces plain-red-text .auth-error). Hidden when empty
   so forms don't show a floating colored box before an error fires. */
.auth-error {
  font-size: 0.85rem;
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border-left: 3px solid #f87171;
  padding: 10px 14px 10px 38px;
  border-radius: 4px;
  margin-bottom: 12px;
  min-height: 0;
  position: relative;
  line-height: 1.4;
}
.auth-error::before {
  content: '⚠';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #f87171;
  font-size: 1rem;
  line-height: 1;
}
.auth-error:empty { display: none; }

/* #7 — Input sizing: 44px min tap target, 16px font (prevents iOS zoom) */
.auth-input,
.auth-select,
.stat-input,
.stat-select {
  font-size: 16px;
  padding: 12px;
  min-height: 44px;
}

/* #6 — Primary button spacing: consistent padding + 44px min tap target */
.auth-submit,
.submit-btn {
  padding: 12px 24px;
  min-height: 44px;
}
.sidebar-btn {
  padding: 12px 14px;
  min-height: 44px;
}

/* #17 — Hover state standardization: filled buttons shift background to a
   darker ice-blue (no opacity). Disabled state uses explicit colors, not
   opacity, so it doesn't read as "loading." */
.auth-submit,
.submit-btn {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.auth-submit:hover,
.submit-btn:hover {
  background-color: #a5d8f0;
  opacity: 1;
}
.auth-submit:disabled,
.submit-btn:disabled {
  background-color: #2a2a2a;
  color: #666;
  opacity: 1;
  cursor: not-allowed;
}

/* ── UX Pass 3: pattern rebuilds (audit findings #4, #5, #9, #10, #12) ── */

/* #9 — Universal modal-overlay scrim + blur. Auth overlay already has it;
   cal and mt overlays now match. */
.cal-modal-overlay,
.mt-modal-overlay {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Pre-existing bug discovered in audit: .mt-modal-overlay had zero CSS.
   Mirror the .cal-modal-* pattern so the mindset assessment modal renders. */
.mt-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
}
.mt-modal-overlay.hidden { display: none; }
.mt-modal {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 32px;
  max-width: min(540px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  color: #fff;
}
.mt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mt-modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe8fb;
}
.mt-modal-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.mt-modal-close:hover { color: #fff; }
.mt-modal-note {
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(191, 232, 251, 0.06);
  border-left: 3px solid #bfe8fb;
  border-radius: 4px;
}
.mt-modal-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-quiz-error {
  color: #f87171;
  font-size: 0.85rem;
  min-height: 0;
}
.mt-cta-btn {
  background: #bfe8fb;
  color: #0d0d0d;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 24px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.mt-cta-btn:hover { background-color: #a5d8f0; }
.mt-cta-btn:disabled {
  background-color: #2a2a2a;
  color: #666;
  cursor: not-allowed;
}

/* #12 (option b) — Native select restyle. Custom chevron, dark-theme bg,
   visible border. Native option list still opens in browser-default styling. */
.auth-select,
.stat-select {
  background-color: #0d0d0d;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfe8fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
.auth-select:hover,
.stat-select:hover { border-color: #444; }

/* #5 — Button loading state. Add .btn-loading on async submits: disables,
   hides label, shows inline spinner. Width is preserved by keeping the
   label color: transparent rather than replacing the text. */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: not-allowed;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(13, 13, 13, 0.3);
  border-top-color: #0d0d0d;
  border-radius: 50%;
  animation: btn-loading-spin 0.6s linear infinite;
}
/* When the button has a dark/transparent background, use the brand color
   for the spinner instead so it stays visible. */
.cal-modal-close.btn-loading::after,
.mt-modal-close.btn-loading::after {
  border-color: rgba(191, 232, 251, 0.3);
  border-top-color: #bfe8fb;
}
@keyframes btn-loading-spin {
  to { transform: rotate(360deg); }
}

/* #4 — Inline field validation. Add .field-invalid on a bad input/select,
   and a sibling .field-error-msg div for the message. Both hidden when
   empty / not invalid. */
.field-invalid,
.auth-input.field-invalid,
.auth-select.field-invalid,
.stat-input.field-invalid,
.stat-select.field-invalid,
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: #f87171;
}
.field-error-msg {
  color: #fca5a5;
  font-size: 0.78rem;
  margin-top: 4px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
}
.field-error-msg::before {
  content: '⚠';
  color: #f87171;
  font-size: 0.85rem;
  line-height: 1;
}
.field-error-msg:empty { display: none; }

/* #10 — Empty state card refinements: ensure CTA button is visually
   centered and tappable below the body text. */
.empty-card-cta {
  background: #bfe8fb;
  color: #0d0d0d;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 20px;
  min-height: 40px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.15s ease;
}
.empty-card-cta:hover { background-color: #a5d8f0; }

/* ── UX Pass 4: responsive + cleanup (audit findings #13, #14, #15) ── */

/* #13 — Quick action cards: add intermediate tablet breakpoint so 480–768px
   viewports don't squish three cards together. (Existing @media max-width
   480px override drops to single column.) */
@media (max-width: 768px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* #14 — Modal cards: cap to viewport with 32px gutter so they never overflow
   on small phones. Each card keeps its own preferred max-width. */
.auth-card           { max-width: min(420px, calc(100vw - 32px)); }
.cal-modal-card      { max-width: min(480px, calc(100vw - 32px)); }
.cal-modal-card-wide { max-width: min(720px, calc(100vw - 32px)); }
.lb-card             { max-width: min(700px, calc(100vw - 32px)); }

/* #15 — Time / datetime-local picker indicators: brighten to match the
   date-input rule (currently the early-CSS opacity(0.6) makes them
   nearly invisible on dark backgrounds). */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(87%) sepia(20%) saturate(600%) hue-rotate(175deg) brightness(105%);
  cursor: pointer;
}

/* Pass 3 follow-up: lift contrast on the inline text-only empty-state
   classes (shot-empty / ch-log-empty / cert-modal-empty / av-empty /
   msg-thread-empty). They were #666 — failed WCAG contrast and felt
   like the page had broken. Bumping to #aaa; layout untouched to avoid
   regressions in the many places these appear inside admin tables. */
.shot-empty,
.av-empty {
  color: #aaa;
}
/* .ch-log-empty / .cert-modal-empty / .msg-thread-empty are now rendered
   inside .empty-card wrappers (icon + body) in their render functions,
   so the color-only override above no longer applies to them. */

/* ── UX follow-ups: custom dropdown component (audit finding #12) ──── */

.custom-select-wrap {
  position: relative;
  width: 100%;
}

/* Native select stays in the DOM for form-value reads + onchange wiring,
   but visually removed via the standard "visually hidden" pattern. */
.custom-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Trigger button — inherits .auth-select / .stat-select sizing so it
   looks identical to the styled native select. Override the
   button-default center alignment. */
.custom-select-trigger {
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.custom-select-trigger.custom-select-placeholder { color: #888; }
.custom-select-trigger:focus-visible {
  outline: 2px solid #bfe8fb;
  outline-offset: 2px;
}
.custom-select-trigger[aria-expanded="true"] {
  border-color: #bfe8fb;
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.custom-select-option {
  padding: 10px 14px;
  font-size: 0.95rem;
  color: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 40px;
  transition: background-color 0.12s ease;
}
.custom-select-option.active,
.custom-select-option:hover:not(.disabled) {
  background-color: rgba(191, 232, 251, 0.12);
  color: #fff;
}
.custom-select-option[aria-selected="true"] {
  color: #bfe8fb;
  font-weight: 600;
}
.custom-select-option[aria-selected="true"]::after {
  content: '✓';
  margin-left: auto;
  color: #bfe8fb;
}
.custom-select-option.disabled {
  color: #555;
  cursor: not-allowed;
}

/* ── UX v2 Pass 2: design-system reconnection (#2, #3, #4, #6) ─────── */

/* #3 — Scrim + backdrop blur on the modal overlays whose styles are
   injected via JS at runtime (.q-modal and .vid-modal). Uses
   !important because the JS-injected rules load later in cascade
   order. Matches the auth/cal/mt overlays from v1 Pass 3. */
.q-modal,
.vid-modal {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* #4 — PWA push banner. Replaces inline-styled markup with a proper
   class-based component. Lives bottom-anchored on player-app pages. */
.push-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1200;
  background: #0d0d0d;
  border: 1px solid #bfe8fb;
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-width: min(420px, calc(100vw - 24px));
  margin: 0 auto;
}
.push-banner-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.push-banner-text { flex: 1; }
.push-banner-title { font-weight: 700; margin-bottom: 4px; }
.push-banner-sub {
  font-size: 0.82rem;
  color: #bbb;
  line-height: 1.4;
}
.push-banner-dismiss {
  background: transparent;
  border: 0;
  color: #888;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.push-banner-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.push-banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.push-banner-yes {
  flex: 1;
  background: #bfe8fb;
  color: #0d0d0d;
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.push-banner-yes:hover { background-color: #a5d8f0; }
.push-banner-later {
  background: transparent;
  color: #bfe8fb;
  border: 1px solid #bfe8fb;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}
.push-banner-later:hover { background: rgba(191, 232, 251, 0.08); }

/* #4 — iOS install modal. Same migration: inline styles -> class. */
.ios-install-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ios-install-card {
  position: relative;
  max-width: min(380px, calc(100vw - 32px));
  width: 100%;
  background: #0d0d0d;
  border: 1px solid #bfe8fb;
  border-radius: 14px;
  padding: 24px 20px 20px;
  color: #fff;
}
.ios-install-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #888;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.ios-install-x:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.ios-install-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  padding-right: 32px;
}
.ios-install-body {
  color: #bbb;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.ios-install-body ol {
  padding-left: 20px;
  margin: 10px 0 0 0;
}
.ios-install-body li { margin-bottom: 4px; }
.ios-install-cta {
  width: 100%;
  background: #bfe8fb;
  color: #0d0d0d;
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ios-install-cta:hover { background-color: #a5d8f0; }

/* ── ICE Yeti mascot (Duolingo-style) ──────────────────────────────────
   Yeti illustrations for empty states, celebrations, splash, and welcome
   moments. Per-pose images live in assets/yeti/yeti-{key}.png. See
   assets/yeti/README.md for the canonical pose list and naming.

Gracefully hides if a yeti PNG is missing — use onerror="this.remove()"
   on the <img> tag so the rest of the surface renders fine before assets
   are added. */

.mascot {
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.mascot-sm { width: 64px;  height: 64px; }
.mascot-md { width: 120px; height: 120px; }
.mascot-lg { width: 200px; height: 200px; }
.mascot-xl { width: 280px; height: 280px; }

/* Idle float — splash + welcome */
.mascot-float { animation: mascot-float 3.6s ease-in-out infinite; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Pop-in on celebration moments (toasts, record cards) */
.mascot-pop { animation: mascot-pop 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) both; }
@keyframes mascot-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

#app-splash .mascot { margin-bottom: 16px; }
.empty-card .mascot { margin-bottom: 4px; }
/* When a yeti is present in an empty-card, hide the SVG icon fallback.
   If onerror removes the yeti (missing asset), :has stops matching and
   the SVG shows automatically. Modern browsers (Chrome 105+, Safari
   15.4+, Firefox 121+). Older browsers show both, harmlessly. */
.empty-card:has(.mascot) .empty-icon { display: none; }
.auth-card .mascot  { margin: 0 auto 12px; }

/* Toast variant — small inline mascot to the left of toast body */
.toast.toast-with-mascot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
}
.toast.toast-with-mascot .mascot { margin: 0; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .mascot-float,
  .mascot-pop { animation: none; }
}

/* ── Yeti cameos: sidebar peek, screen runner, cert-day pop ──────── */

/* No need to add position:relative to .sidebar — its existing
   position:fixed already provides a positioning context for absolute
   descendants like the cameo. (Earlier version of this file overrode
   the fixed sidebar; that broke the page layout globally.) */

/* Sidebar mini-yeti — slides up into the bottom-left of the sidebar */
.mascot-sidebar-cameo {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  z-index: 200;
  transition: bottom 0.6s cubic-bezier(0.22, 1.4, 0.36, 1),
              opacity 0.3s ease;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.mascot-sidebar-cameo.visible {
  bottom: 8px;
  opacity: 1;
}
.mascot-sidebar-cameo.leaving {
  bottom: -120px;
  opacity: 0;
}

/* Logo tap easter egg — yeti dribbles across the bottom of the screen
   with a subtle vertical bounce. Pure CSS animation. */
.mascot-runner {
  position: fixed;
  bottom: 24px;
  left: -120px;
  width: 100px;
  height: auto;
  pointer-events: none;
  z-index: 9998;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.mascot-runner.running {
  animation: mascot-run 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes mascot-run {
  0%   { left: -120px;            transform: translateY(0)    rotate(0deg); }
  10%  { left: 5%;                transform: translateY(-6px) rotate(-3deg); }
  20%  { transform: translateY(0)    rotate(2deg); }
  30%  { transform: translateY(-6px) rotate(-3deg); }
  40%  { transform: translateY(0)    rotate(2deg); }
  50%  { left: 50%;               transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
  60%  { transform: translateX(-50%) translateY(0)    rotate(2deg); }
  70%  { transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
  85%  { left: 85%;               transform: translateY(0)    rotate(2deg); }
  100% { left: calc(100% + 120px); transform: translateY(0)    rotate(0deg); }
}

/* Cert-day check pop — big celebratory yeti centered on the viewport
   with a "Nice Work!" caption. Pops in with a spring, holds, fades. */
.mascot-cert-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 1500;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -40%) scale(0.3);
}
.mascot-cert-pop.popping {
  animation: mascot-cert-pop 1.8s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}
.mascot-cert-pop-img {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}
.mascot-cert-pop-text {
  margin-top: 14px;
  font-size: 1.8rem;
  font-weight: 800;
  color: #bfe8fb;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.04em;
}
@keyframes mascot-cert-pop {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.3); }
  25%  { opacity: 1; transform: translate(-50%, -52%) scale(1.1); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); }
}
@media (max-width: 480px) {
  .mascot-cert-pop-img  { width: 150px; }
  .mascot-cert-pop-text { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-sidebar-cameo,
  .mascot-runner,
  .mascot-cert-pop { transition: none; animation: none; opacity: 1; }
  .mascot-runner   { left: auto; right: 24px; }
}

/* ── Live game tally: +/- steppers, live index chip, resume bar ──────────
   Real-time stat tallying during a game (live-tracker.js). Steppers wrap
   the existing #input-<cat> fields; the input stays the source of truth. */

.stepper-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Big tap targets for courtside one-handed use. */
.stepper-btn {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #bfe8fb;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.stepper-btn:hover { background-color: #2a3848; border-color: #4b5563; }
.stepper-btn:active { background-color: #111827; }

/* The number sits between the buttons — large + centered so the tally is
   readable from a glance during the game. Width auto-fills the row. */
.stat-input.stepper-input {
  flex: 1 1 auto;
  width: auto;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 6px 4px;
  -moz-appearance: textfield;
}
.stat-input.stepper-input::-webkit-outer-spin-button,
.stat-input.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Live ICE Index chip — sits just above the Submit button. */
.live-index-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
}
.live-index-chip .live-index-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.live-index-chip #live-index-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #bfe8fb;
  line-height: 1;
}

/* Resume bar — shown at the top of the input section when a saved draft
   is auto-restored. Non-blocking; offers "Start fresh". */
.draft-resume-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(191, 232, 251, 0.08);
  border: 1px solid rgba(191, 232, 251, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.draft-resume-bar[hidden] { display: none; }
#draft-resume-text {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: #bfe8fb;
}
.draft-resume-discard {
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(191, 232, 251, 0.5);
  border-radius: 6px;
  color: #bfe8fb;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}
.draft-resume-discard:hover { background-color: rgba(191, 232, 251, 0.15); }

@media (max-width: 480px) {
  /* One stat per row on phones — full-width tap rows for courtside use
     (overrides the 2-col .input-grid mobile rule above). */
  .input-grid { grid-template-columns: 1fr; }
  /* Full-width stepper rows; bigger numerals for thumb tapping. */
  .stepper-btn { flex-basis: 52px; min-width: 52px; min-height: 48px; font-size: 1.5rem; }
  .stat-input.stepper-input { font-size: 1.4rem; }
  .draft-resume-bar { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   Gym Reservations — player tabs, guided picker, calendar chip, admin
   ══════════════════════════════════════════════════════════════════════ */

/* Reservation chip on the calendar (violet, distinct from blue sessions) */
.cal-event-chip.type-reservation {
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid #a78bfa;
  color: #c4b5fd;
  cursor: default;
}

/* Sessions | Reservations tab toggle on the player schedule page */
.sch-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.sch-tab {
  flex: 1; background: transparent; border: 1px solid #2e2e2e; color: #aaa;
  padding: 9px 14px; border-radius: 8px; cursor: pointer;
  font-size: 0.9rem; font-weight: 700; font-family: inherit;
}
.sch-tab:hover { background: #bfe8fb14; border-color: #bfe8fb44; color: #fff; }
.sch-tab.active { background: #bfe8fb; border-color: #bfe8fb; color: #0d0d0d; }

/* Guided picker */
.res-picker { display: flex; flex-direction: column; gap: 22px; }
.res-step { display: flex; flex-direction: column; gap: 10px; }
.res-step-label {
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.res-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: #bfe8fb; color: #0b1d2a;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0;
}
.res-hours-note { color: #888; font-weight: 600; letter-spacing: 0; text-transform: none; }
.res-empty { color: #888; font-size: 0.85rem; padding: 14px 4px; }

.res-loc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.res-loc-chip {
  background: #141414; border: 1px solid #2a2a2a; color: #ccc;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; font-family: inherit;
}
.res-loc-chip:hover { border-color: #bfe8fb55; color: #fff; }
.res-loc-chip.active { background: #bfe8fb; border-color: #bfe8fb; color: #0b1d2a; }

.res-day-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.res-day {
  flex: 0 0 auto; min-width: 52px; background: #141414; border: 1px solid #2a2a2a;
  color: #ddd; border-radius: 10px; padding: 8px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit;
}
.res-day:hover { border-color: #bfe8fb55; }
.res-day.selected { background: #bfe8fb; border-color: #bfe8fb; color: #0b1d2a; }
.res-day.closed { opacity: 0.4; cursor: not-allowed; }
.res-day-dow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.res-day-num { font-size: 1.05rem; font-weight: 800; }

.res-time-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px;
}
.res-block {
  background: #141414; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 8px 6px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.res-block-time { font-size: 0.78rem; font-weight: 700; color: #eee; }
.res-block-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; }
.res-block.is-open { border-color: #34d39955; }
.res-block.is-open:hover { border-color: #34d399; background: #34d39912; }
.res-block.is-open .res-block-tag { color: #34d399; }
.res-block.is-full, .res-block.is-session, .res-block.is-unavail, .res-block.is-reserved { opacity: 0.5; cursor: not-allowed; }
.res-block.is-full .res-block-time,
.res-block.is-session .res-block-time,
.res-block.is-reserved .res-block-time,
.res-block.is-unavail .res-block-time { color: #888; }
.res-block.is-full .res-block-tag { color: #f87171; }
.res-block.is-session .res-block-tag { color: #f59e0b; }
.res-block.is-reserved .res-block-tag { color: #c4b5fd; }
.res-block.in-range {
  background: #bfe8fb; border-color: #bfe8fb;
}
.res-block.in-range .res-block-time, .res-block.in-range .res-block-tag { color: #0b1d2a; }

.res-dur-row { display: flex; gap: 8px; flex-wrap: wrap; }
.res-dur {
  background: #141414; border: 1px solid #2a2a2a; color: #ccc;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; font-family: inherit;
}
.res-dur:hover { border-color: #bfe8fb55; color: #fff; }
.res-dur.active { background: #bfe8fb; border-color: #bfe8fb; color: #0b1d2a; }

.res-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; background: #141414; border: 1px solid #2a2a2a;
  border-radius: 10px; padding: 12px 14px; margin-top: 4px;
}
.res-summary { color: #fff; font-weight: 700; font-size: 0.9rem; }
.res-confirm-btn {
  background: #bfe8fb; color: #0b1d2a; border: none; border-radius: 8px;
  padding: 11px 20px; min-height: 44px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.res-confirm-btn:hover { background: #a6dcf5; }

/* My Reservations list */
.res-my-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #ffffff12;
}
.res-my-row:last-child { border-bottom: none; }
.res-my-when { color: #fff; font-weight: 700; font-size: 0.9rem; }
.res-my-loc { color: #c4b5fd; font-size: 0.78rem; margin-top: 2px; }
.res-my-cancel {
  background: #141414; border: 1px solid #2a2a2a; color: #888;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit;
}
.res-my-cancel:hover { border-color: #f8717155; color: #f87171; }

/* Admin Reservations tab */
.adm-res-day { margin-bottom: 18px; }
.adm-res-day-label {
  color: #fff; font-size: 0.95rem; font-weight: 800; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid #2a2a2a;
}
.adm-res-loc { margin: 0 0 10px; }
.adm-res-loc-name {
  color: #c4b5fd; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 6px 0 4px;
}
.adm-res-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid #ffffff0d;
}
.adm-res-time { color: #eee; font-weight: 700; font-size: 0.85rem; min-width: 120px; }
.adm-res-player { color: #bbb; font-size: 0.85rem; flex: 1; }
.adm-res-cancel {
  background: #141414; border: 1px solid #2a2a2a; color: #888;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; font-family: inherit;
}
.adm-res-cancel:hover { border-color: #f8717155; color: #f87171; }

/* Admin per-location reservation settings */
.adm-resset-row {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.adm-resset-name { color: #fff; font-weight: 800; font-size: 0.9rem; min-width: 110px; align-self: center; }
.adm-resset-field { display: flex; flex-direction: column; gap: 4px; }
.adm-resset-field > span { color: #999; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; }
.adm-resset-field input[type="number"], .adm-resset-field input[type="time"] {
  background: #0d0d0d; border: 1px solid #2a2a2a; color: #fff;
  border-radius: 6px; padding: 6px 8px; font-family: inherit; font-size: 0.85rem;
}
.adm-resset-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: #bfe8fb; }

/* Card wrapping a location's settings row + its blocked times */
.adm-resset-card {
  background: #141414; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.adm-resset-card .adm-resset-row {
  background: none; border: 0; padding: 0; margin: 0;
}

/* Blocked times sub-panel */
.adm-block-wrap {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #242424;
}
.adm-block-head {
  color: #bfe8fb; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px;
}
.adm-block-sub { color: #666; font-weight: 600; text-transform: none; letter-spacing: 0; }
.adm-block-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.adm-block-empty { color: #666; font-size: 0.8rem; padding: 2px 0; }
.adm-block-row {
  display: flex; align-items: center; gap: 10px;
  background: #0d0d0d; border: 1px solid #242424; border-radius: 7px; padding: 7px 10px;
}
.adm-block-when  { color: #fff; font-weight: 700; font-size: 0.82rem; min-width: 92px; }
.adm-block-time  { color: #bbb; font-size: 0.82rem; }
.adm-block-label { color: #c4b5fd; font-size: 0.82rem; flex: 1; min-width: 0; }
.adm-block-del {
  background: none; border: 0; color: #777; font-size: 1.1rem; line-height: 1;
  cursor: pointer; padding: 0 4px; flex-shrink: 0;
}
.adm-block-del:hover { color: #f87171; }

.adm-block-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-block-input {
  background: #0d0d0d; border: 1px solid #2a2a2a; color: #fff;
  border-radius: 6px; padding: 6px 8px; font-family: inherit; font-size: 0.82rem;
}
.adm-block-lbl { flex: 1; min-width: 140px; }
.adm-block-dash { color: #777; font-size: 0.8rem; }
.adm-block-add {
  background: #bfe8fb; border: 1px solid #bfe8fb; color: #0b1d2a;
  border-radius: 6px; padding: 6px 14px; font-weight: 700; font-size: 0.82rem;
  font-family: inherit; cursor: pointer;
}
.adm-block-add:hover { background: #a9dcf3; }