/* ═══════════════════════════════════════════════════════════
   EntryLane Admin — option7 design system
   Fonts: Bebas Neue · Titillium Web · Saira · JetBrains Mono
   Themes: dark (default) / light — toggled via html[data-theme]
═══════════════════════════════════════════════════════════ */

/* ── THEME TOKENS ── */
html[data-theme="dark"] {
  --bg-base:         #0D0D12;
  --bg-card:         #13131A;
  --bg-card-alt:     #1A1A24;
  --bg-inset:        rgba(255,255,255,0.03);
  --bg-nav:          #09090E;
  --border:          rgba(251,146,60,0.14);
  --border-dim:      rgba(255,255,255,0.05);
  --border-mid:      rgba(251,146,60,0.28);
  --border-strong:   rgba(251,146,60,0.55);
  --accent:          #FB923C;
  --accent-hover:    #F97316;
  --accent-dim:      rgba(251,146,60,0.09);
  --accent-glow:     rgba(251,146,60,0.22);
  --text-primary:    #F0F0F7;
  --text-secondary:  #8080A0;
  --text-muted:      #505065;
  --error:           #FF4D6D;
  --error-bg:        rgba(255,77,109,0.1);
  --error-border:    rgba(255,77,109,0.3);
  --success:         #22C55E;
  --success-dim:     rgba(34,197,94,0.1);
  --success-border:  rgba(34,197,94,0.22);
  --warning:         #F59E0B;
  --shadow:          0 2px 12px rgba(0,0,0,0.5);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.6);
  --modal-bg:        #0E0E1A;
  --input-bg:        rgba(0,0,0,0.4);
  --ticker-bg:       #09090E;
  --ticker-div:      rgba(251,146,60,0.1);
  --row-alt:         rgba(251,146,60,0.025);
  --row-hover:       rgba(251,146,60,0.04);
  --toggle-off:      rgba(255,255,255,0.08);
  --toggle-border:   rgba(251,146,60,0.2);
}

html[data-theme="light"] {
  --bg-base:         #EDEDF2;
  --bg-card:         #FAFAFA;
  --bg-card-alt:     #F2F2F7;
  --bg-inset:        rgba(0,0,0,0.025);
  --bg-nav:          #0D1117;
  --border:          #DDDDE8;
  --border-dim:      #EEEEF4;
  --border-mid:      #C8C8D8;
  --border-strong:   rgba(249,115,22,0.55);
  --accent:          #F97316;
  --accent-hover:    #EA6C0E;
  --accent-dim:      rgba(249,115,22,0.07);
  --accent-glow:     rgba(249,115,22,0.18);
  --text-primary:    #0F0F1A;
  --text-secondary:  #60607A;
  --text-muted:      #9090A8;
  --error:           #DC2626;
  --error-bg:        rgba(220,38,38,0.08);
  --error-border:    rgba(220,38,38,0.3);
  --success:         #16A34A;
  --success-dim:     rgba(22,163,74,0.08);
  --success-border:  rgba(22,163,74,0.22);
  --warning:         #D97706;
  --shadow:          0 1px 4px rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.04);
  --shadow-lg:       0 4px 24px rgba(0,0,0,0.12);
  --modal-bg:        #FFFFFF;
  --input-bg:        #FFFFFF;
  --ticker-bg:       #FAFAFA;
  --ticker-div:      #DDDDE8;
  --row-alt:         rgba(0,0,0,0.018);
  --row-hover:       rgba(249,115,22,0.04);
  --toggle-off:      #DDDDE8;
  --toggle-border:   #C8C8D8;
}

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

body {
  font-family: 'Titillium Web', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
  /* Flex column lets the footer hug the bottom of the viewport even
     when the dashboard content is shorter than the screen — kills the
     white gap that used to show below the footer on sparse pages. */
  display: flex;
  flex-direction: column;
}
body > .kfooter { margin-top: auto; }

.hidden { display: none !important; }

/* Wordmark logo (ENTRY + LANE spans) keeps Bebas Neue — the rest of
   the app uses readable sans (Saira) for legibility. */
.kw-entry, .kw-lane { font-family: 'Bebas Neue', 'Saira', sans-serif; }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(251,146,60,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,146,60,0.025) 1px, transparent 1px),
    var(--bg-base);
  background-size: 48px 48px, 48px 48px, auto;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--accent);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
}

.login-header { text-align: center; margin-bottom: 2rem; }

.login-title {
  font-family: 'Saira', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  line-height: 1;
}

.login-sub {
  font-family: 'Saira', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.login-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  padding: 0.7rem 0.9rem;
  color: var(--error);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.login-field { margin-bottom: 1rem; }

.login-field label {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.login-field input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.15s;
}

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

.login-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.btn-login {
  flex: 1 1 60%;
  font-family: 'Saira', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #0D0D12;
  border: none;
  padding: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-login:hover { background: var(--accent-hover); }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-login-secondary {
  flex: 1 1 40%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Saira', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-mid);
  padding: 0.9rem 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.btn-login-secondary:hover { border-color: var(--accent); background: var(--accent-dim); }

@media (max-width: 420px) {
  .login-actions { flex-direction: column-reverse; }
  .btn-login, .btn-login-secondary { flex: 1 1 auto; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
.admin-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  border-bottom: 1px solid rgba(251,146,60,0.18);
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Wordmark sizing locked to the marketing hero-bar (1.75rem, drops to
   1.5rem on narrow viewports) so ENTRYLANE renders at the same size on
   every page across the app. */
.admin-nav-title {
  font-family: 'Saira', sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
}
@media (max-width: 480px) {
  .admin-nav-title { font-size: 1.5rem; }
}
.admin-nav-title em { color: var(--accent); font-style: normal; }

.admin-nav-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Switch Show — admin-only quick-jump dropdown. Anchored to its
   trigger button via .switch-show-wrap (position: relative). Each
   menu item is a full-width anchor that links to the destination
   show's admin via the platform_token SSO query param. */
.switch-show-wrap { position: relative; display: inline-block; }
.switch-show-wrap .reports-menu { right: 0; left: auto; min-width: 240px; }
.switch-show-item {
  display: block;
  padding: 0.55rem 0.85rem;
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'Saira', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.switch-show-item:last-child { border-bottom: 0; }
.switch-show-item:hover { background: var(--accent-dim); color: var(--accent); }
.switch-show-date { color: var(--text-muted); font-size: 0.7rem; }

/* Global footer (admin / public registration / judge UI). Thin row
   with brand on the left and Contact / Terms / Privacy on the right.
   Matches the kinetic design system rather than the marketing site's
   richer kfooter — that one's tied to the marketing layout. */
/* Shared kinetic-style footer used across admin, judge, participant
   registration, and admin-login. Hardcoded values (not tokens) so the
   footer renders identically across every CSS context. */
.kfooter {
  background: #15151a;
  color: #fff;
  padding: 1.6rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 768px) {
  .kfooter { flex-direction: row; justify-content: space-between; align-items: center; }
}
.kfooter-logo {
  font-family: 'Saira', sans-serif; font-weight: 400;
  font-size: 1.4rem; letter-spacing: 0.04em;
  color: #fff; text-transform: uppercase;
}
.kfooter-logo .kw-entry { color: #fff; }
.kfooter-logo .kw-lane  { color: #FD7524; margin-left: 0.05em; }
.kfooter-tagline {
  font-family: 'Saira', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin: 0.4rem 0 0;
  text-transform: uppercase;
}
.kfooter a { color: rgba(255,255,255,0.85); text-decoration: none; }
.kfooter a:hover { color: #FD7524; }
.kfooter-nav {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
}
.kfooter-nav a {
  font-family: 'Saira', sans-serif; font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-nav-user {
  font-family: 'Saira', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* Theme toggle */
.btn-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-theme:hover { background: rgba(255,255,255,0.11); color: rgba(255,255,255,0.85); }

.btn-logout, .btn-settings {
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-logout:hover { color: var(--error); border-color: rgba(255,77,109,0.4); }
.btn-settings:hover { color: var(--accent); border-color: rgba(251,146,60,0.4); }
.btn-theme-toggle {
  font-family: 'Saira', sans-serif;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
  padding: 0.38rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.btn-theme-toggle:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════════════ */
.admin-main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* ═══════════════════════════════════════════════════════════
   STATS — ticker bar style
═══════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--ticker-bg);
  border-bottom: 1px solid var(--border);
  margin: 0 -1.5rem 2rem;
}

@media (max-width: 960px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .stats-row { grid-template-columns: 1fr; } }

.stat-card {
  padding: 1.1rem 1.5rem;
  border-right: 1px solid var(--ticker-div);
  transition: background 0.2s;
}
.stat-card:last-child { border-right: none; }

.stat-label {
  font-family: 'Saira', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.stat-num {
  font-family: 'Saira', sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.stat-num.accent { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   AWARDS GRID (judge cards)
═══════════════════════════════════════════════════════════ */
.judge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1100px) { .judge-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px)  { .judge-grid { grid-template-columns: 1fr; } }

.judge-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}

.heatmap-map-wrap {
  width: 100%;
  height: 320px;
  border: 1px solid var(--accent);
  background: var(--bg-card);
}
.heatmap-card {
  grid-column: span 2;
}
@media (max-width: 1100px) {
  .heatmap-card { grid-column: span 1; }
}

.judge-card-label {
  font-family: 'Saira', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.judge-card-body {
  padding: 1rem;
  max-height: 280px;
  overflow-y: auto;
}

.judge-empty {
  color: var(--text-muted);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  font-style: italic;
  padding: 1rem 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  overflow: visible;
}

.search-input {
  flex: 1 1 280px;
  max-width: 360px;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  padding: 0.6rem 1rem;
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.15s;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-input::placeholder { color: var(--text-muted); }

.btn-add {
  font-family: 'Saira', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #0D0D12;
  border: none;
  padding: 0.62rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  text-align: center;
}
.btn-add:hover { background: var(--accent-hover); }
/* Toolbar — search input + every button share an exact 40px height.
   Buttons sized to content (with a small min) so they don't spill over
   onto a second row when the toolbar grows; search is fixed-narrower
   so it stops dominating the rhythm. */
.toolbar {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
}
.toolbar > .search-input,
.toolbar > .btn-add,
.toolbar > .reports-btn-wrap > .btn-add,
.toolbar > .post-show-wrap > .btn-add {
  height: 40px;
  line-height: 40px;
  padding: 0 0.85rem;
  font-size: 0.68rem;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Post Show wrapper inherits the toolbar rhythm too — without this
   the wrapper div sat as inline-block at its content's natural size,
   so the button inside skipped the height of its siblings.  */
.toolbar > .post-show-wrap {
  display: inline-flex;
  align-items: stretch;
}
.toolbar > .search-input {
  flex: 0 0 220px;
  max-width: 220px;
  padding: 0 0.85rem;
  text-align: left;
  justify-content: flex-start;
}
/* Push the action buttons to the far right on PC; the auto-margin on the
   first button steals all the free space, so search stays anchored left
   and the buttons cluster against the right edge. Wraps naturally on
   narrow viewports thanks to flex-wrap on .toolbar. */
.toolbar > .search-input + .btn-add { margin-left: auto; }
.toolbar > .reports-btn-wrap { margin-left: 0; }
@media (max-width: 720px) {
  .toolbar > .search-input { flex: 1 1 100%; max-width: 100%; }
}

/* DISTANCE TRAVELED — scrollable top-10 list (matches Club Participation
   layout). Long city/state names truncate with ellipsis. */
.distance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}
.distance-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.distance-item:last-child { border-bottom: none; }
.distance-rank {
  font-family: 'Saira', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  min-width: 1.6rem;
}
.distance-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.distance-name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.distance-vehicle,
.distance-origin {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.distance-miles {
  font-family: 'Saira', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--success);
  background: var(--success-bg, rgba(34,197,94,0.12));
  border: 1px solid var(--success);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

/* Judged column — judge attribution in black, duration on next line. */
.col-judged .judged-meta {
  margin-top: 0.35rem;
  line-height: 1.25;
}
.col-judged .judged-meta-name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.col-judged .judged-meta-time {
  font-family: 'Saira', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}
.col-judged .judged-meta--penalty {
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--error);
  margin-top: 0.15rem;
}

.btn-stickers {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-mid);
}
.btn-stickers:hover { background: var(--accent-dim); border-color: var(--accent); }

/* Inline class-picker dropdown inside the registrations table.
   Use the same flat / appearance:none look as the modal selects so
   the grey native control doesn't look out of place. */
.class-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  padding: 0.35rem 1.6rem 0.35rem 0.6rem;
  width: 100%;
  max-width: 180px;
  cursor: pointer;
  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 0.55rem center;
  transition: border-color 0.15s;
}
.class-select:focus { outline: none; border-color: var(--accent); }
.class-select:disabled { opacity: 0.6; cursor: wait; }
/* Static class label in the registrations table — replaces the inline
   select. Plain typography, same column width, edited via the row's
   Edit button → registration modal. */
.col-class .class-static {
  display: inline-block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  /* Stable min-height so the page doesn't collapse upward as the user
     types in the search box and the filtered row count shrinks. */
  min-height: 60vh;
}

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

thead { background: var(--bg-inset); }

th {
  padding: 0.65rem 0.75rem;
  text-align: left;
  font-family: 'Saira', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid var(--border-mid);
}

th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--text-primary); }
th.sort-asc::after  { content: ' ↑'; }
th.sort-desc::after { content: ' ↓'; }

td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-dim);
  vertical-align: top;
  text-align: left;
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.83rem;
}

tr:last-child td { border-bottom: none; }
tr:nth-child(even) { background: var(--row-alt); }
tr:hover { background: var(--row-hover); }

.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-paid    { background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border); }
.badge-pending { background: rgba(245,158,11,0.1); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); }
.badge-failed  { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
.badge-judged     { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-mid); }
/* Non-Judged participant (opted out at registration) — yellow so it
   reads as "intentional state" rather than "missing action." */
.badge-nonjudged  { background: rgba(245,158,11,0.12); color: var(--warning); border: 1px solid rgba(245,158,11,0.35); }
/* Eligible-but-not-yet-judged — red so a single glance over the table
   surfaces who still needs to be scored / who still owes votes. */
.badge-no         { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }

/* Hide the Class column on Top Picks. The <th> uses data-tier-not, but
   the <td> is rendered after applyTierGate() runs, so we use the
   body-level tier attribute (set by applyTierGate at boot) to gate
   them via CSS instead of re-running the JS engine after every render. */
body[data-tier="top-picks"] th[data-sort="judging_class"],
body[data-tier="top-picks"] td.col-class { display: none !important; }

/* Hide the vehicle-type field in Add Registration when "Best of Show
   Only" is on — there's only one winner across all entries, so the
   admin doesn't need to mark each car as Car/Truck/Bike. The select
   stays in the DOM (still serializes 'car' as the default) so existing
   row data isn't disturbed. */
body[data-bos-only="true"] #modal-reg-vehicle-type,
body[data-bos-only="true"] #modal-reg-vehicle-type ~ label,
body[data-bos-only="true"] .mfield:has(#modal-reg-vehicle-type) { display: none !important; }

/* Disabled best-of-show per-type toggles read as half-transparent so
   admins know they can't be flipped while Best of Show Only is on. */
.results-toggle.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.col-regnum {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-size: 0.78rem;
  width: 3rem;
}

.name-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.name-link:hover { text-decoration: underline; }

.action-btns { display: flex; gap: 0.4rem; }
.btn-edit, .btn-delete-row {
  font-family: 'Saira', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: opacity 0.15s, background 0.15s;
}
.btn-edit { color: var(--accent); border-color: var(--border-mid); }
.btn-edit:hover { background: var(--accent-dim); border-color: var(--accent); }
.btn-delete-row { color: var(--error); border-color: var(--error-border); }
.btn-delete-row:hover { background: var(--error-bg); }

.judge-meta { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.7rem; }
.judge-meta strong { color: var(--accent); }

/* Vehicle photo popup */
.vehicle-cell.has-photo { cursor: zoom-in; }
.photo-indicator { font-size: 0.85em; margin-left: 0.2rem; opacity: 0.6; }

.vehicle-photo-popup {
  position: fixed;
  z-index: 9000;
  padding: 5px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transition: opacity 0.12s;
}
.vehicle-photo-popup.hidden { opacity: 0; }
.vehicle-photo-popup:not(.hidden) { opacity: 1; }
.vehicle-photo-popup img { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,12,0.82);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--modal-bg);
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--accent);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  z-index: 1;
  box-shadow: var(--shadow-lg);
}

.modal-card--sm       { max-width: 420px; }
.modal-card--wide     { max-width: 780px; }
.modal-card--qr       { max-width: 440px; text-align: center; }
.modal-card--settings { max-width: min(880px, 92vw); max-height: 88vh; padding: 1.75rem 1.75rem 2rem; }

/* Awards PDF preview — wide, tall card with a Print/Download action row
   in the header and a borderless full-bleed iframe below it. The iframe
   itself holds the same /api/admin/awards*.pdf the download endpoint
   serves, so Print prints byte-for-byte the same artifact. */
.modal-card--awards   {
  max-width: min(1080px, 96vw);
  max-height: 94vh;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-card--awards .modal-header {
  flex: 0 0 auto;
  margin-bottom: 1rem;
  gap: 0.6rem;
}
.awards-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.awards-preview-actions .btn-save,
.awards-preview-actions .btn-cancel {
  font-size: 0.7rem;
  padding: 0.45rem 0.9rem;
}
.awards-preview-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.awards-preview-body {
  flex: 1 1 auto;
  min-height: 50vh;
  background: var(--surface-low, #f7f7f9);
  border: 1px solid var(--border-mid);
  overflow-y: auto;
  padding: 1rem 1rem 1.5rem;
}
.awards-preview-state {
  font-family: 'Saira', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--text-muted, #6b6b78);
  padding: 1.5rem 0.5rem;
  text-align: center;
}
.awards-preview-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}
/* Head block — show name (large centered), date, "Presented by …", tier tag. */
.awards-preview-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--accent, #FD7524);
}
.awards-preview-head-title {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--text-primary, #0d0d12);
}
.awards-preview-head-sub {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted, #6b6b78);
}
.awards-preview-head-meta {
  font-family: 'Saira', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #FD7524);
  margin-top: 0.4rem;
}
.awards-preview-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.awards-preview-section-head {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #FD7524);
  text-align: center;
  padding: 0.2rem 0 0.5rem;
}
/* Best of Show card — orange outline, soft tint to draw the eye. */
.awards-bos-card {
  background: rgba(253, 117, 36, 0.07);
  border: 1.5px solid var(--accent, #FD7524);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.awards-bos-label {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #FD7524);
}
.awards-bos-name {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary, #0d0d12);
}
.awards-bos-sub {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted, #6b6b78);
}
/* Top-N + class-podium row — single line, table-like. Place | #Num | Name | Vehicle. */
.awards-toplist {
  background: #ffffff;
  border: 1px solid var(--border-mid);
}
.awards-toplist-row {
  display: grid;
  grid-template-columns: 3rem 3rem 1fr 1.4fr;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid #eeeef2;
}
.awards-toplist-row:first-child { border-top: 0; }
.awards-toplist-rank {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #FD7524);
}
.awards-toplist-num {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary, #0d0d12);
}
.awards-toplist-name {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary, #0d0d12);
}
.awards-toplist-vehicle {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted, #6b6b78);
}
/* Class-winners card (Ultimate + Voting) — class header + rows. */
.awards-class-card {
  background: #ffffff;
  border: 1px solid var(--border-mid);
}
.awards-class-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-mid);
  flex-wrap: wrap;
}
.awards-class-name {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary, #0d0d12);
}
.awards-class-sponsor {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted, #6b6b78);
}
.awards-preview-empty {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted, #6b6b78);
  padding: 0.6rem 0.2rem;
  text-align: center;
}
.awards-preview-empty--soft {
  font-style: italic;
  background: #ffffff;
  border: 1px dashed var(--border-mid);
  padding: 0.9rem;
}
#awards-preview-print-frame {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 540px) {
  .modal-card--awards { padding: 1rem 0.85rem 1.2rem; }
  .awards-preview-body { padding: 0.75rem 0.5rem 1rem; }
  .awards-preview-head-title { font-size: 1.35rem; }
  .awards-preview-section-head { font-size: 0.9rem; letter-spacing: 0.14em; }
  .awards-toplist-row {
    grid-template-columns: 2.4rem 2.6rem 1fr;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
  }
  .awards-toplist-vehicle {
    grid-column: 2 / -1;
    font-size: 0.78rem;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-family: 'Saira', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--text-primary); }

.modal-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  padding: 0.7rem 0.9rem;
  color: var(--error);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.modal-notice {
  background: var(--accent-dim);
  border: 1px solid var(--border-mid);
  color: var(--accent);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin: 0.75rem 0;
}

.modal-section-label {
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 1.35rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.mfield { display: flex; flex-direction: column; gap: 0.3rem; }
.mfield--full { grid-column: 1 / -1; }

.mfield label, .optional {
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mfield input, .mfield select {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.875rem;
  width: 100%;
  min-height: 2.6rem;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.mfield select {
  padding-right: 2rem;
  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 0.75rem center;
}
.mfield input:focus, .mfield select:focus { outline: none; border-color: var(--accent); }
.mfield select option { background: var(--modal-bg); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 2rem;
}

/* Shared action buttons */
.btn-cancel {
  font-family: 'Saira', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-mid);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-cancel:hover { background: var(--accent-dim); border-color: var(--accent); }

.modal-photo-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.modal-photo-preview {
  position: relative;
  display: inline-block;
}
.modal-photo-preview img {
  display: block;
  max-width: 96px;
  max-height: 96px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  object-fit: cover;
}
.modal-photo-remove {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.btn-save {
  font-family: 'Saira', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #0D0D12;
  border: none;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save:hover { background: var(--accent-hover); }
.btn-save:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-save--sm { padding: 0.32rem 0.75rem; font-size: 0.72rem; }

.btn-delete {
  font-family: 'Saira', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--error);
  color: #fff;
  border: none;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-delete:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════
   MODAL TABS
═══════════════════════════════════════════════════════════ */
.modal-tabs {
  display: flex;
  gap: 0;
  margin: 0.25rem 0 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: 'Saira', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover { color: var(--text-primary); }
.modal-tab--active { color: var(--accent); border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   SETTINGS MODAL
═══════════════════════════════════════════════════════════ */
.settings-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 3rem; align-items: start; }
.settings-col { min-width: 0; }

/* Phone landscape (~max 900px) keeps the two-column layout but trims
   the column gap so things don't feel cramped against the modal edge.
   Phone portrait collapses to a single column. */
@media (max-width: 900px) {
  .settings-body { gap: 0.5rem 2rem; }
}
@media (max-width: 700px) {
  .modal-card--settings { max-width: calc(100vw - 1.25rem); max-height: 92vh; padding: 1.5rem 1.25rem 1.75rem; }
  .settings-body { grid-template-columns: 1fr; gap: 0; }
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.settings-row:first-of-type { border-top: none; margin-top: 0.25rem; }
.settings-row--stacked { flex-direction: column; align-items: stretch; gap: 0.45rem; }
.settings-row-main { flex: 1 1 auto; min-width: 0; }

.settings-row-title {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.settings-row-sub {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.45;
}
/* Inline "Opens" / "Closes" caption above each datetime input inside a
   stacked settings row. Inputs sit full-width below, matching the
   "Judging closes at" pattern. */
.settings-window-sublabel {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.65rem;
  margin-bottom: 0.25rem;
}

.settings-section-head {
  display: block;
  margin: 1.25rem 0 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
/* On top-picks the right column hides Voting Close + People's Choice
   + Hardship windows, leaving Best of Show as the first visible
   block. Strip its top border/padding so it sits flush like the
   left column's first row. */
body[data-tier="top-picks"] .settings-col > div[data-tier-not="voting"] > .settings-section-head {
  border-top: none;
  margin-top: 0 !important;
  padding-top: 0;
}
.settings-section-title {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.settings-section-sub {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  line-height: 1.45;
}

.settings-text-input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.45rem 0.65rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.82rem;
  width: 100%;
  transition: border-color 0.15s;
}
.settings-text-input:focus { outline: none; border-color: var(--accent); }
.settings-text-input--num { width: 6rem; }
/* Datetime-local pickers are noticeably more compact than text fields —
   constrain so the date+time + calendar icon fits without empty space. */
.settings-text-input[type="datetime-local"] {
  width: auto;
  max-width: 14rem;
}
.settings-text-input.saved { border-color: var(--success); }

/* Results / judging toggles */
.results-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.results-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.results-toggle-label {
  font-family: 'Saira', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--accent);
}
.results-toggle-track {
  position: relative;
  display: inline-block;
  width: 30px; height: 17px;
  background: var(--toggle-off);
  border: 1px solid var(--toggle-border);
  transition: background 0.15s;
}
.results-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  background: var(--text-muted);
  transition: transform 0.15s, background 0.15s;
}
.results-toggle input:checked + .results-toggle-track { background: var(--accent-dim); border-color: var(--accent); }
.results-toggle input:checked + .results-toggle-track .results-toggle-thumb { transform: translateX(13px); background: var(--accent); }
.results-toggle-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  min-width: 1.5rem;
  text-transform: uppercase;
}

/* Custom select */
.custom-select { position: relative; display: inline-block; }
.custom-select-trigger {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-mid);
  padding: 0.45rem 0.85rem;
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 110px;
  transition: background 0.15s, border-color 0.15s;
}
.custom-select-trigger:hover { background: var(--accent-dim); border-color: var(--accent); }
.custom-select-chev { font-size: 0.55rem; opacity: 0.8; }
.custom-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--modal-bg);
  border: 1px solid var(--border-mid);
  padding: 0.3rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: var(--shadow-lg);
}
.custom-select-menu.hidden { display: none; }
.custom-select-option {
  background: transparent;
  border: none;
  text-align: left;
  color: var(--accent);
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.custom-select-option:hover     { background: var(--accent-dim); }
.custom-select-option.is-active { background: var(--accent); color: #0D0D12; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   REPORTS MENU
═══════════════════════════════════════════════════════════ */
.reports-btn-wrap { position: relative; display: inline-block; overflow: visible; margin-left: auto; }
.reports-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: var(--modal-bg);
  border: 1px solid var(--border-mid);
  padding: 0.3rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: var(--shadow-lg);
}
.reports-menu.hidden { display: none; }
.reports-menu button {
  background: transparent;
  border: none;
  text-align: left;
  color: var(--accent);
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.reports-menu button:hover { background: var(--accent-dim); }

/* Post Show toolbar dropdown wrapper — same structure as Reports. */
.post-show-wrap { position: relative; display: inline-block; overflow: visible; }
.post-show-wrap .reports-menu { right: 0; left: auto; }

/* Modal subtabs (used inside Post Show > Metrics tab) */
.modal-subtabs {
  display: flex;
  gap: 1.4rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 0.9rem;
  padding: 0;
}
.modal-subtab {
  background: none; border: 0;
  padding: 0.5rem 0;
  font-family: 'Saira', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.modal-subtab:hover { color: var(--text-primary); }
.modal-subtab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.modal-subtab-panel { padding-top: 0.4rem; }

/* Scrollable post-show modal panels (Metrics + Survey Responses).
   The window itself is sized appropriately; contents that exceed the
   viewport scroll inside the panel rather than growing the modal. */
.ps-scroll {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════
   CLASSES / SPECIALTY
═══════════════════════════════════════════════════════════ */
.classes-section { margin-top: 1.25rem; }
.classes-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.classes-section-head h3 {
  font-family: 'Saira', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.classes-section-sub { color: var(--text-muted); font-size: 0.7rem; margin-left: 0.4rem; }

.classes-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* No max-height + overflow:auto here — that clipped the inline vehicle-type
     dropdown when it opened downward. The modal scrolls as a whole instead.
     Extra bottom padding gives the inline Car/Truck/Bike dropdown room to
     render its menu without bumping against the modal's bottom edge — the
     "Bike" option was getting clipped on a fresh new-row form. */
  padding: 0.2rem 0.2rem 8rem 0;
}

.class-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0.6rem 0.75rem;
}
.class-row > .class-name { flex: 0 1 200px; min-width: 160px; max-width: 200px; }

/* View vs edit sub-trees inside a class row. View mode is the default
   and shows the static name + vehicle-type label + Edit/Delete. Edit
   mode (revealed when the row carries .is-editing) shows the input,
   the Car/Truck/Bike dropdown, and Save/Cancel. Both sub-trees inherit
   the row's flex layout so the items still flow horizontally. */
.class-row .class-row-view,
.class-row .class-row-edit {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.class-row .class-row-view.hidden,
.class-row .class-row-edit.hidden { display: none; }
/* Static labels mimic the input/dropdown look without being editable. */
.class-row .class-name-static {
  flex: 0 1 200px;
  min-width: 160px;
  max-width: 200px;
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.class-row .class-vt-static {
  flex: 0 0 auto;
  font-family: 'Saira', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.45rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
/* Class-row action buttons reuse the registrations-table .btn-edit /
   .btn-delete-row outline style — small, text-sized, transparent
   background, colored border and text. The first action button in the
   cluster pushes the whole group to the right edge. */
.class-row .class-edit-btn,
.class-row .class-row-edit .class-save {
  margin-left: auto;
}
/* Cancel sits next to Save in edit mode and inherits .btn-edit's
   orange-text/grey-border outline. The class-specific override below
   keeps it neutral so it doesn't read as a primary action. */
.class-row .class-cancel {
  color: var(--text-secondary);
  border-color: var(--border-mid);
}
.class-row .class-cancel:hover {
  background: var(--bg-inset);
  border-color: var(--border-mid);
}
.class-row .class-save,
.class-row .class-delete,
.class-row .class-winner,
.class-row--new .class-add-btn,
.class-row--new .class-cancel-btn {
  flex: 0 0 110px;
  width: 110px;
  min-width: 110px;
  padding: 0.6rem 0.5rem;
  text-align: center;
}
.class-row .class-save { margin-left: auto; }
.class-row--rubric .class-name-static {
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  flex: 1 1 200px;
}
.class-row--rubric .rubric-cat-count {
  font-family: 'Saira', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.class-row--rubric .rubric-toggle { margin-left: auto; min-width: 90px; }
/* Class-row Delete uses an inverted-accent treatment: black canvas with
   orange text. Visually distinct from the orange Save button next to it
   without screaming red. !important beats admin-kinetic's global
   .btn-delete override. */
.class-row .class-delete {
  background: #15151a !important;
  color: var(--accent) !important;
  border: 1px solid #15151a !important;
  min-width: 110px;
  font-family: 'Saira', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.class-row .class-delete:hover {
  background: #000 !important;
  color: var(--accent) !important;
  filter: none;
  opacity: 1 !important;
}
/* The new-row form (no #N badge yet) collapses the leading column. */
.class-row--new { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
/* Cancel in the new-row form mirrors the Edit/Delete/Save buttons in
   the existing rows — same fixed width and height so the action column
   reads as one rhythm down the modal. */
.class-row--new .class-cancel-btn {
  flex: 0 0 110px;
  width: 110px;
  min-width: 110px;
  height: 38px;
  padding: 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: auto; /* pin Cancel to the right edge */
}
/* Cancel keeps the neutral grey-on-white treatment so it doesn't
   accidentally read as the primary commit action — Enter on the input
   commits the new class. */
.class-row--new .class-cancel-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.class-row--new .class-cancel-btn:hover {
  background: var(--bg-inset);
  color: var(--text-primary);
  opacity: 1;
}
/* Dropdown (Car / Truck / Bike) matches the white text-input look — the
   trigger picks up the same white background, mid-grey border, and
   consistent height as .class-name. */
/* Vehicle-type dropdown is narrow — it only ever holds Car / Truck /
   Bike, so it doesn't need to be the same width as the class-name
   input. Sized so the row's Save + Delete buttons fit on the same
   visual line without wrapping. */
.class-row--new .class-vehicle-type,
.class-row .class-vehicle-type {
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
}
.class-row--new .class-vehicle-type .custom-select-trigger,
.class-row .class-vehicle-type .custom-select-trigger {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-mid) !important;
  padding: 0.55rem 0.7rem !important;
  font-size: 1rem !important;
  font-family: 'Titillium Web', sans-serif !important;
  height: auto !important;
}

.class-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.25rem 0.55rem;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Saira', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.class-row input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.55rem 0.7rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
  min-width: 0;
}
.class-row .class-name { font-size: 1rem; }
.class-row .class-row-status,
.class-row .class-truck,
.class-row .class-vehicle-type .custom-select-trigger {
  font-size: 0.85rem;
}
.class-row input:focus { outline: none; border-color: var(--accent); }

.class-truck {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.class-truck input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.class-truck--placeholder { width: 0; }
.class-vehicle-type { min-width: 100px; }
.class-vehicle-type .custom-select-trigger { width: 100%; padding: 0.38rem 0.6rem; }
.class-winner-line {
  flex-basis: 100%;
  width: 100%;
  grid-column: 1 / -1;
  padding-top: 0.3rem;
  font-family: 'Saira', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.class-row-status { font-family: 'Saira', sans-serif; font-size: 0.65rem; letter-spacing: 0.04em; min-width: 3.5rem; text-align: right; }
.class-row-status.saving { color: var(--warning); }
.class-row-status.saved  { color: var(--success); }
.class-row-status.error  { color: var(--error); }

@media (max-width: 640px) {
  .class-row > .class-name { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════
   QR MODAL
═══════════════════════════════════════════════════════════ */
.qr-subtitle {
  font-family: 'Saira', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: -0.5rem 0 1.25rem;
}
/* Metrics view "Print" button row — keeps the Judging/Show subtab strip
   on the left and the Print action right-aligned. */
.metrics-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.metrics-tab-row .modal-subtabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.metrics-print-btn { flex: 0 0 auto; }

/* Print stylesheet — toggled on by body.is-printing for the duration
   of window.print(). Hides everything except the visible metrics
   sub-panel (Judging or Show, whichever is active). */
@media print {
  body.is-printing > *:not(#post-show-modal) { display: none !important; }
  body.is-printing #post-show-modal {
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    display: block !important;
  }
  body.is-printing #post-show-modal .modal-backdrop { display: none !important; }
  body.is-printing #post-show-modal .modal-card {
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.is-printing #post-show-modal .modal-close,
  body.is-printing #post-show-modal .metrics-tab-row,
  body.is-printing #post-show-modal .modal-subtabs,
  body.is-printing #post-show-modal .metrics-print-btn { display: none !important; }
  body.is-printing #post-show-modal .modal-tab-panel.hidden { display: none !important; }
  body.is-printing #post-show-modal .modal-subtab-panel.hidden { display: none !important; }
  body.is-printing #post-show-modal .modal-subtab-panel:not(.hidden) { display: block !important; }
  /* Force readable contrast on paper. */
  body.is-printing #post-show-modal,
  body.is-printing #post-show-modal * {
    color: #000 !important;
    background: #fff !important;
    border-color: #ccc !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  /* Bars + accents — keep the structure but render in grayscale. */
  body.is-printing #post-show-modal .metrics-dist-bar,
  body.is-printing #post-show-modal .metrics-dist-bar--mid,
  body.is-printing #post-show-modal .metrics-dist-bar--far,
  body.is-printing #post-show-modal .metrics-dist-bar--class {
    background: #444 !important;
  }
  body.is-printing #post-show-modal h1,
  body.is-printing #post-show-modal h2,
  body.is-printing #post-show-modal h3 { page-break-after: avoid; }
  body.is-printing #post-show-modal .metrics-section-head { page-break-after: avoid; }
  /* Drop any height-capped scroll containers so all rows print. */
  body.is-printing #post-show-modal .ps-scroll,
  body.is-printing #post-show-modal .metrics-class-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
}

.qr-nonjudged-banner {
  font-family: 'Saira', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(253, 117, 36, 0.10);
  border: 1px solid rgba(253, 117, 36, 0.35);
  border-left-width: 4px;
  padding: 0.65rem 0.9rem;
  margin: 0 0 1rem;
  text-align: center;
}
.qr-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 1rem;
  margin: 0 auto 1rem;
  max-width: 300px;
}
.qr-container canvas { display: block; max-width: 100%; height: auto; }
.qr-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-muted);
  word-break: break-all;
  padding: 0.45rem 0.7rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.qr-contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.qr-contact.hidden { display: none; }
.qr-contact-row { display: grid; grid-template-columns: 60px 1fr; gap: 0.5rem; align-items: baseline; }
.qr-contact-label {
  font-family: 'Saira', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.qr-contact-value { color: var(--text-primary); font-family: 'Titillium Web', sans-serif; font-size: 0.82rem; word-break: break-word; }

.qr-judging {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--accent-dim);
  border: 1px solid var(--border-mid);
}
.qr-judging-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.qr-judging-label {
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.qr-judging-row { display: flex; justify-content: space-between; align-items: baseline; }
.qr-judging-key { font-family: 'Saira', sans-serif; font-size: 0.72rem; color: var(--text-muted); }
.qr-judging-score { font-family: 'Saira', sans-serif; font-size: 1.8rem; color: var(--accent); letter-spacing: 0.05em; }
.qr-judging-meta { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.72rem; }

/* ═══════════════════════════════════════════════════════════
   WINNER + CLUB + HARDSHIP MODALS
═══════════════════════════════════════════════════════════ */
.winner-sponsor { color: var(--text-muted); font-style: italic; margin: 0 0 0.5rem; font-size: 0.85rem; }
.winner-sponsor.hidden { display: none; }
.winner-current { font-family: 'Saira', sans-serif; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--accent); margin: 0 0 1rem; }
.winner-field { margin-bottom: 0.75rem; }
.winner-field label {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.winner-field input[type="text"] {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.5rem 0.65rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
}
.winner-field input[type="text"]:focus { outline: none; border-color: var(--accent); }

.club-modal-meta { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 1rem; }
.club-member-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.club-member-list li { font-family: 'Titillium Web', sans-serif; font-size: 0.85rem; color: var(--text-primary); padding: 0.4rem 0; border-bottom: 1px solid var(--border); }

.hardship-modal-vehicle { font-family: 'Saira', sans-serif; font-size: 0.78rem; color: var(--accent); margin: 0 0 0.5rem; }
.hardship-modal-text { font-family: 'Titillium Web', sans-serif; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.75rem; }
.hardship-modal-meta { font-size: 0.75rem; color: var(--text-muted); }

/* Hardship Picker — list of submissions surfaced from the dashboard
   tile header (// HARDSHIP AWARDS). Each row is a card with name,
   vehicle, text, and a Set-as-Winner button. */
.judge-card-label--btn {
  background: none;
  border: 0;
  padding: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: block;
}
.judge-card-label--btn:hover { color: var(--accent); }

.hardship-picker-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.hardship-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.hardship-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name actions"
    "vehicle actions"
    "text text";
  gap: 0.25rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}
.hardship-picker-row--winner {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.hardship-picker-name    { grid-area: name; font-family: 'Saira', sans-serif; font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.hardship-picker-vehicle { grid-area: vehicle; font-size: 0.78rem; color: var(--accent); letter-spacing: 0.04em; }
.hardship-picker-text    { grid-area: text; color: var(--text-primary); font-size: 0.9rem; line-height: 1.5; padding-top: 0.4rem; white-space: pre-wrap; }
.hardship-picker-actions { grid-area: actions; align-self: center; }

/* ═══════════════════════════════════════════════════════════
   ADDRESS / AUTOCOMPLETE
═══════════════════════════════════════════════════════════ */
.address-wrap { position: relative; }
.address-suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 3px;
  background: var(--modal-bg);
  border: 1px solid var(--border-mid);
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
  box-shadow: var(--shadow-lg);
}
.address-suggestions.hidden { display: none; }
.suggestion-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text-primary);
  font-family: 'Titillium Web', sans-serif;
  cursor: pointer;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--accent-dim); outline: none; }
.suggestion-primary { display: block; font-size: 0.85rem; }
.suggestion-secondary { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ═══════════════════════════════════════════════════════════
   MANAGE USERS
═══════════════════════════════════════════════════════════ */
.add-user-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  align-items: center;
}
.add-user-form button[type="submit"] { grid-column: span 2; }
.add-user-form .custom-select { width: 100%; }
.add-user-form input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
}
.add-user-form input:focus { outline: none; border-color: var(--accent); }

.users-hint { font-family: 'Titillium Web', sans-serif; color: var(--text-muted); font-size: 0.78rem; margin-top: 0.5rem; }
.users-hint code { background: var(--bg-inset); padding: 0.05rem 0.35rem; color: var(--accent); font-size: 0.8rem; border: 1px solid var(--border); }

.user-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
}
.user-row-name { font-family: 'Saira', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); min-width: 0; }
.user-name-display { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.25; min-width: 0; }
.user-name-full { white-space: normal; word-break: break-word; }
.user-row-handle { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.7rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.02em; margin: 0; }
.user-row-last-login { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.user-row-role {
  font-family: 'Saira', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
}
.user-row-role--admin { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-mid); }
.user-row-role--judge { background: rgba(245,158,11,0.1); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); }
.user-row-flag { font-size: 0.65rem; color: var(--text-muted); font-style: italic; }

.user-name-edit-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.user-name-edit-form input {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.3rem 0.5rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.8rem;
  width: 90px;
}
.user-name-edit-form input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 640px) {
  .add-user-form { grid-template-columns: 1fr; }
  .add-user-form button[type="submit"], .add-user-form .custom-select { grid-column: 1; }
  .user-row { grid-template-columns: 1fr 1fr; }
  .user-row-name { grid-column: span 2; }
  .user-row-role { justify-self: start; }
  .user-row-last-login { justify-self: end; grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════════════
   SESSIONS
═══════════════════════════════════════════════════════════ */
.session-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-dim);
}
.session-row--current { background: var(--accent-dim); border-left: 2px solid var(--accent); }
.session-row-main { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.session-username { font-family: 'Saira', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.session-badge {
  font-family: 'Saira', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--border-mid);
  padding: 0.1rem 0.35rem;
}
.session-device { color: var(--text-secondary); font-family: 'Titillium Web', sans-serif; font-size: 0.8rem; }
.session-ip { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.session-row-meta { grid-column: 1; display: flex; gap: 1rem; font-size: 0.7rem; color: var(--text-muted); flex-wrap: wrap; font-family: 'Titillium Web', sans-serif; }
.session-revoke { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* ═══════════════════════════════════════════════════════════
   METRICS MODAL
═══════════════════════════════════════════════════════════ */
.metrics-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.metrics-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-mid);
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.metrics-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-dim); color: var(--text-primary); font-family: 'Titillium Web', sans-serif; }
.metrics-empty { color: var(--text-muted); font-style: italic; padding: 1.5rem 0.75rem; text-align: center; font-family: 'Titillium Web', sans-serif; }
.metrics-judge-row { cursor: pointer; }
.metrics-judge-row:hover td { background: var(--row-hover); }
.metrics-judge-name { font-weight: 600; }
.metrics-expand-icon { color: var(--accent); font-size: 0.7rem; margin-left: 0.3rem; display: inline-block; transition: transform 0.15s; }
.metrics-breakdown-row td { background: var(--bg-inset); }
.metrics-breakdown-cell { padding: 0.5rem 0.75rem 0.75rem 1.5rem !important; }
.metrics-cls-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.metrics-cls-chip { background: var(--accent-dim); border: 1px solid var(--border-mid); padding: 0.2rem 0.5rem; font-family: 'Saira', sans-serif; font-size: 0.65rem; font-weight: 600; color: var(--accent); }
.metrics-show-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
@media (max-width: 540px) { .metrics-show-grid { grid-template-columns: repeat(2,1fr); } }
.metrics-stat-card { background: var(--bg-inset); border: 1px solid var(--border); padding: 0.9rem 1rem; text-align: center; }
.metrics-stat-card--accent { border-color: var(--accent); }
.metrics-stat-num { font-family: 'Saira', sans-serif; font-size: 2rem; color: var(--accent); line-height: 1; letter-spacing: 0.04em; }
.metrics-stat-label { font-family: 'Saira', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.3rem; }
.metrics-section-head { font-family: 'Saira', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 1.1rem 0 0.5rem; }
.metrics-highlight-row { display: flex; align-items: baseline; gap: 0.75rem; background: var(--accent-dim); border: 1px solid var(--border-mid); padding: 0.5rem 0.85rem; }
.metrics-highlight-name { font-family: 'Titillium Web', sans-serif; font-weight: 600; color: var(--text-primary); }
.metrics-highlight-count { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.metrics-dist-bars { display: flex; flex-direction: column; gap: 0.5rem; }
/* Class breakdown lists (Biggest / Smallest): show ~5 rows then scroll. Each
   row is ~1.6rem incl. gap, so cap at 5 * 1.6rem ≈ 8rem of body. */
.metrics-class-scroll {
  max-height: 11rem;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.metrics-dist-row { display: flex; align-items: center; gap: 0.6rem; }
.metrics-dist-label { min-width: 140px; font-family: 'Titillium Web', sans-serif; font-size: 0.78rem; color: var(--text-secondary); }
.metrics-dist-bar-wrap { flex: 1; background: var(--bg-inset); border: 1px solid var(--border); height: 8px; overflow: hidden; }
.metrics-dist-bar { height: 100%; background: var(--accent); min-width: 2px; }
.metrics-dist-bar--mid { background: #60A5FA; }
.metrics-dist-bar--far { background: #C084FC; }
.metrics-dist-count { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-primary); min-width: 2.5rem; text-align: right; }
.metrics-class-pct { color: var(--text-muted); font-size: 0.7rem; }
.metrics-dist-label--class { min-width: 160px; }
.metrics-dist-bar--class { background: var(--accent); opacity: 0.7; }
.metrics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.25rem; }
@media (max-width: 480px) { .metrics-two-col { grid-template-columns: 1fr; } }
.metrics-mini-list { display: flex; flex-direction: column; gap: 0.3rem; }
.metrics-state-row { display: flex; justify-content: space-between; font-family: 'Titillium Web', sans-serif; font-size: 0.8rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border-dim); color: var(--text-primary); }
.metrics-state-row span:last-child { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   AWARD EMAILS
═══════════════════════════════════════════════════════════ */
.award-results-list { display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; }
.award-class-block { margin-bottom: 1.25rem; }
.award-class-head {
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.4rem 0.75rem;
  background: var(--accent-dim);
  border: 1px solid var(--border-mid);
  margin-bottom: 0;
}
.award-winner-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-dim);
  border-top: none;
  background: var(--bg-inset);
}
.award-winner-row--specialty { border: 1px solid var(--border-dim); margin-bottom: 0.5rem; }
.sa-winner--empty { color: var(--text-muted) !important; background: transparent !important; border: none !important; font-style: italic; }
.award-place-icon { font-size: 1.3rem; flex-shrink: 0; width: 1.6rem; text-align: center; }
.award-winner-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.award-winner-name { font-family: 'Titillium Web', sans-serif; font-weight: 700; color: var(--text-primary); font-size: 0.9rem; }
.award-winner-vehicle { color: var(--text-muted); font-family: 'Titillium Web', sans-serif; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.award-winner-place { color: var(--accent); font-family: 'Saira', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; }
.award-winner-score { font-family: 'Saira', sans-serif; font-size: 1.3rem; color: var(--text-muted); min-width: 2.5rem; text-align: right; flex-shrink: 0; letter-spacing: 0.04em; }
.award-send-btn { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   REAUTH + POST SHOW
═══════════════════════════════════════════════════════════ */
.reauth-hint { color: var(--text-secondary); font-family: 'Titillium Web', sans-serif; font-size: 0.88rem; margin: 0 0 1rem; }
.reauth-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.6rem 0.8rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.reauth-input:focus { outline: none; border-color: var(--accent); }
.reauth-error { color: var(--error); font-family: 'Titillium Web', sans-serif; font-size: 0.82rem; margin: 0.25rem 0 0.75rem; }

/* ═══════════════════════════════════════════════════════════
   BLAST EMAIL
═══════════════════════════════════════════════════════════ */
.blast-meta { font-family: 'Titillium Web', sans-serif; font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.25rem; }
.blast-field { margin-bottom: 1rem; }
.blast-label {
  display: block;
  font-family: 'Saira', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.blast-hint { font-family: 'Titillium Web', sans-serif; text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 400; }
.blast-hint code { background: var(--accent-dim); color: var(--accent); padding: 0.05rem 0.3rem; border: 1px solid var(--border-mid); font-size: 0.78rem; }
.blast-input, .blast-textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.55rem 0.7rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.9rem;
}
.blast-textarea { resize: vertical; min-height: 180px; }
.blast-input:focus, .blast-textarea:focus { outline: none; border-color: var(--accent); }
.blast-status { font-family: 'Titillium Web', sans-serif; font-size: 0.85rem; color: var(--success); margin: 0.5rem 0 0; }
.blast-status--error { color: var(--error); }

/* ═══════════════════════════════════════════════════════════
   SURVEY
═══════════════════════════════════════════════════════════ */
.survey-url-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-mid);
  padding: 0.6rem 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.survey-url-label { font-family: 'Saira', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.survey-url-code { flex: 1; color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; word-break: break-all; min-width: 0; }
.survey-q-list { margin-bottom: 0.75rem; }
.survey-q-row {
  display: grid;
  grid-template-columns: 1fr 130px auto auto auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-dim);
}
.survey-q-row:last-child { border-bottom: none; }
.survey-q-label-input, .survey-q-type {
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  padding: 0.4rem 0.55rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.85rem;
}
.survey-q-label-input:focus, .survey-q-type:focus { outline: none; border-color: var(--accent); }
.survey-q-add-row { margin-bottom: 1rem; }
.survey-responses-layout { display: grid; grid-template-columns: 1fr 210px; gap: 1.25rem; align-items: start; }
@media (max-width: 600px) { .survey-responses-layout { grid-template-columns: 1fr; } }
.survey-averages-panel { position: sticky; top: 0; background: var(--accent-dim); border: 1px solid var(--border-mid); padding: 1rem; }
.survey-avg-title { font-family: 'Saira', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.85rem; }
.survey-avg-item { margin-bottom: 1rem; }
.survey-avg-item:last-child { margin-bottom: 0; }
.survey-avg-label { font-family: 'Titillium Web', sans-serif; font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; margin: 0 0 0.2rem; }
.survey-avg-value { font-family: 'Saira', sans-serif; font-size: 1.8rem; color: var(--text-primary); margin: 0; letter-spacing: 0.04em; }
.survey-avg-sub { font-family: 'Titillium Web', sans-serif; font-size: 0.65rem; color: var(--text-muted); display: block; margin-top: 0.1rem; }
.survey-resp-row { border: 1px solid var(--border); padding: 0.75rem 1rem; margin-bottom: 0.6rem; }
.survey-resp-who { font-family: 'Saira', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--accent); margin: 0 0 0.35rem; letter-spacing: 0.04em; }
.survey-resp-vehicle { font-family: 'Titillium Web', sans-serif; font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.survey-resp-answers { list-style: none; padding: 0; margin: 0; }
.survey-resp-answers li { font-family: 'Titillium Web', sans-serif; font-size: 0.82rem; color: var(--text-secondary); padding: 0.2rem 0; border-bottom: 1px solid var(--border-dim); }
.survey-resp-answers li:last-child { border-bottom: none; }
.survey-resp-answers li strong { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════
   RUBRIC EDITOR
═══════════════════════════════════════════════════════════ */
.class-rubric-panel { background: var(--bg-inset); border: 1px solid var(--border); border-top: none; margin-bottom: 0.5rem; }
.rubric-editor { padding: 1rem 1.25rem 1.25rem; }
.rubric-editor-hint { font-family: 'Saira', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem; }
.rubric-cat-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.rubric-cat-row { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-inset); border: 1px solid var(--border); padding: 0.3rem 0.5rem; }
.rubric-cat-handle { color: var(--text-muted); cursor: grab; font-size: 0.9rem; }
.rubric-cat-label { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: 'Titillium Web', sans-serif; font-size: 0.85rem; padding: 0.2rem 0.25rem; outline: none; }
.rubric-cat-label:focus { color: var(--accent); }
.rubric-editor-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.rubric-status { font-family: 'Saira', sans-serif; font-size: 0.65rem; margin-top: 0.5rem; display: block; }
.rubric-status.saved  { color: var(--success); }
.rubric-status.saving { color: var(--text-muted); }
.rubric-status.error  { color: var(--error); }

/* ═══════════════════════════════════════════════════════════
   SPECIALTY / HARDSHIP / PEOPLES CHOICE (judge.css overrides)
═══════════════════════════════════════════════════════════ */
#awards-grid .club-name {
  font-family: 'Saira', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Post-show button accent */
.btn-post-show {
  background: var(--accent-dim);
  border: 1px solid var(--border-mid);
  color: var(--accent);
}
.btn-post-show:hover { background: var(--accent); color: #0D0D12; }

.btn-test-payment {
  background: rgba(251, 191, 36, 0.12);
  border: 1px dashed rgba(251, 191, 36, 0.5);
  color: #fbbf24;
}
.btn-test-payment:hover { background: rgba(251, 191, 36, 0.25); border-color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-grid { grid-template-columns: 1fr; }
  .mfield--full { grid-column: 1; }
  .admin-main { padding: 0 1rem 2rem; }
  .stats-row { margin: 0 -1rem 1.75rem; }
}