/* ── Kinetic Industrial — Admin & Judge override layer ──
   Loaded AFTER admin.css and judge.css.
   Redefines the design tokens those stylesheets read from, so the entire
   organizer console + judge UI flips visual identity (Midnight Amber →
   Kinetic Industrial) without rewriting markup or class names.
   Also forces sharp 0px corners and the new font stack:
   Bebas Neue (display) · Titillium Web (body) · Saira (labels/buttons) · JetBrains Mono (code) */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Titillium+Web:wght@300;400;600;700&family=Saira:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens: Light (Kinetic primary) ── */
html[data-theme="light"] {
  --bg-base:         #f9f9fa;
  --bg-card:         #ffffff;
  --bg-card-alt:     #f3f3f4;
  --bg-inset:        #eeeeef;
  --bg-nav:          #1A1A1B;

  --border:          #E4E4E7;
  --border-dim:      #EEEEEF;
  --border-mid:      #d4d4d8;
  --border-strong:   #FD7524;

  --accent:          #FD7524;
  --accent-hover:    #C44E00;
  --accent-dim:      rgba(253,117,36,0.08);
  --accent-glow:     rgba(253,117,36,0.18);

  --text-primary:    #1a1c1d;
  --text-secondary:  #5f5e5f;
  --text-muted:      #8e8e93;

  --error:           #ba1a1a;
  --error-bg:        #ffdad6;
  --error-border:    rgba(186,26,26,0.35);

  --success:         #10B981;
  --success-dim:     rgba(16,185,129,0.10);
  --success-border:  rgba(16,185,129,0.28);

  --warning:         #FD7524;

  --shadow:          0 1px 0 rgba(0,0,0,0.06);
  --shadow-lg:       0 6px 0 rgba(0,0,0,0.07);

  --modal-bg:        #ffffff;
  --input-bg:        #ffffff;
  --ticker-bg:       #1A1A1B;
  --ticker-div:      #2a2a2c;
  --row-alt:         rgba(0,0,0,0.022);
  --row-hover:       rgba(253,117,36,0.06);
  --toggle-off:      #d4d4d8;
  --toggle-border:   #c4c4c8;
}

/* ── Tokens: Dark (Kinetic alt — industrial console) ── */
html[data-theme="dark"] {
  --bg-base:         #0e0e10;
  --bg-card:         #1A1A1B;
  --bg-card-alt:     #232326;
  --bg-inset:        rgba(255,255,255,0.04);
  --bg-nav:          #09090A;

  --border:          #2a2a2c;
  --border-dim:      #1f1f21;
  --border-mid:      #3a3a3c;
  --border-strong:   #FD7524;

  --accent:          #FD7524;
  --accent-hover:    #ff8530;
  --accent-dim:      rgba(253,117,36,0.10);
  --accent-glow:     rgba(253,117,36,0.22);

  --text-primary:    #f4f4f5;
  --text-secondary:  #a1a1aa;
  --text-muted:      #71717a;

  --error:           #ef4444;
  --error-bg:        rgba(239,68,68,0.10);
  --error-border:    rgba(239,68,68,0.32);

  --success:         #10B981;
  --success-dim:     rgba(16,185,129,0.12);
  --success-border:  rgba(16,185,129,0.30);

  --warning:         #FD7524;

  --shadow:          0 1px 0 rgba(0,0,0,0.6);
  --shadow-lg:       0 6px 0 rgba(0,0,0,0.55);

  --modal-bg:        #1A1A1B;
  --input-bg:        #0e0e10;
  --ticker-bg:       #09090A;
  --ticker-div:      #2a2a2c;
  --row-alt:         rgba(255,255,255,0.02);
  --row-hover:       rgba(253,117,36,0.08);
  --toggle-off:      #2a2a2c;
  --toggle-border:   #3a3a3c;
}

/* ── Sharp 0px corners (Kinetic shape language) ──
   admin.css and judge.css have hundreds of border-radius declarations.
   Force them all flat in admin/judge scope. The .full-radius class
   (avatars etc.) keeps its circle. */
[data-theme] body,
[data-theme] body *:not(.preserve-radius):not(.avatar):not(.spinner):not(.dot):not(.qr-spinner):not(.heatmap-dot):not(.heatmap-dot-inner):not(.heatmap-dot-legend) {
  border-radius: 0 !important;
}
/* Avatars: still circular per design spec */
[data-theme] .avatar,
[data-theme] .avatar-circle,
[data-theme] [class*="avatar"] {
  border-radius: 9999px !important;
}

/* ── Typography refresh ──
   Replace Bebas Neue + Titillium Web + Saira + JetBrains Mono with
   Space Grotesk + Inter. Mono stays for code/IDs (use system mono). */
[data-theme] body,
[data-theme] input,
[data-theme] textarea,
[data-theme] select {
  font-family: 'Titillium Web', system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Loosen the table body / cell text — kinetic.css's heavier defaults
   were running letters together at small sizes. */
[data-theme] table td,
[data-theme] .modal-body,
[data-theme] .modal-form,
[data-theme] p,
[data-theme] li,
[data-theme] span:not([class*="-label"]):not([class*="-title"]):not([class*="-eyebrow"]):not(.accent) {
  font-weight: 400 !important;
  letter-spacing: 0.015em;
}
[data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] h4,
[data-theme] .stat-value,
[data-theme] .login-title,
[data-theme] .nav-show-name,
[data-theme] .modal-title,
[data-theme] .section-title,
[data-theme] [class*="-title"] {
  font-family: 'Saira', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
}
[data-theme] .stat-label,
[data-theme] .label,
[data-theme] [class*="-label"]:not([class*="-labels"]):not(label) {
  font-family: 'Saira', system-ui, sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
[data-theme] code, [data-theme] pre,
[data-theme] .mono, [data-theme] [class*="-mono"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}

/* ── Selection ── */
[data-theme] ::selection { background: var(--accent); color: #fff; }

/* ── Buttons: Saira, uppercase, wide-tracked ── */
[data-theme] .btn,
[data-theme] button,
[data-theme] [class*="-btn"]:not(input) {
  font-family: 'Saira', system-ui, sans-serif !important;
  letter-spacing: 0.08em !important;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Top app bar: keep dark in both themes (Kinetic spec calls for
       a consistent industrial dark nav even in light mode) ── */
[data-theme] .nav, [data-theme] .top-nav, [data-theme] .admin-nav,
[data-theme] .ticker {
  border-radius: 0 !important;
}

/* ── Awards-grid tile overrides ──
   judge.css hardcodes teal/navy values on .judge-card* (the cyber theme
   from the original driven_to_duty fork) instead of reading CSS vars,
   so admin-kinetic.css's token overrides can't reach them. Force the
   tiles into Kinetic Industrial colors here. */
[data-theme] .judge-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  padding: 0 !important;
  cursor: default !important;
}
[data-theme="dark"] .judge-card {
  background: var(--bg-card) !important;
}
[data-theme] .judge-card-label {
  font-family: 'Saira', system-ui, sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--accent) !important;
  padding: 0.85rem 1rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: uppercase !important;
}
[data-theme] .judge-card-body {
  padding: 1rem !important;
  color: var(--text-primary) !important;
}
[data-theme] .judge-empty {
  color: var(--text-muted) !important;
  font-style: italic !important;
  margin: 0 !important;
}
/* Heatmap card border/background — judge.css hardcodes #00c8b4 */
[data-theme] .heatmap-map-wrap {
  border: 1px solid var(--accent) !important;
  background: var(--bg-card) !important;
}

/* Mapbox zoom + / − controls — recolor the embedded SVG icons to the
   accent orange so they match the rest of the map's button styling.
   Filter recipe converts the Mapbox-default near-black icons to
   #FD7524 accent orange. */
[data-theme] .heatmap-map-wrap .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: brightness(0) saturate(100%) invert(58%) sepia(74%) saturate(2348%)
          hue-rotate(348deg) brightness(102%) contrast(98%) !important;
}
[data-theme] .heatmap-map-wrap .mapboxgl-ctrl-group {
  background: rgba(13,13,18,0.88) !important;
  border: 1px solid rgba(253,117,36,0.35) !important;
  box-shadow: none !important;
}
[data-theme] .heatmap-map-wrap .mapboxgl-ctrl-group button {
  background: transparent !important;
}
[data-theme] .heatmap-map-wrap .mapboxgl-ctrl-group button:hover {
  background: rgba(253,117,36,0.15) !important;
}
[data-theme] .heatmap-map-wrap .mapboxgl-ctrl-group button + button {
  border-top: 1px solid rgba(253,117,36,0.25) !important;
}
/* Heatmap dot — soft glowing orange CIRCLE that flashes on its own
   in addition to the outward pulse rings. Bigger so it reads clearly. */
[data-theme] .heatmap-dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
}
[data-theme] .heatmap-dot-inner {
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(253,117,36,1) 0%,
    rgba(253,117,36,0.7) 50%,
    rgba(253,117,36,0.0) 100%) !important;
  border: none !important;
  box-shadow:
    0 0 6px rgba(253,117,36,0.9),
    0 0 16px rgba(253,117,36,0.55) !important;
  animation: heatmap-flash 1.4s ease-in-out infinite !important;
}
[data-theme] .heatmap-dot::before,
[data-theme] .heatmap-dot::after {
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(253,117,36,0.55) 0%,
    rgba(253,117,36,0.0) 70%) !important;
  border: none !important;
}
@keyframes heatmap-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
[data-theme] .heatmap-dot { white-space: pre-line; }

/* Tile link blocks (Hardship + People's Choice tiles surface a public URL
   for the organizer to share with registrants/attendees). */
[data-theme] .tile-link-block {
  border: 1px solid var(--border) !important;
  background: var(--bg-card-alt) !important;
  padding: 0.6rem 0.75rem !important;
  margin-bottom: 0.7rem !important;
}
[data-theme] .tile-link-blurb {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.35 !important;
}
[data-theme] .tile-link {
  display: inline-block !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  word-break: break-all !important;
}
[data-theme] .tile-link:hover { text-decoration: underline !important; }

/* ── Delete buttons: black background, orange text. Override the default
   red error-color treatment in admin.css so destructive actions read as
   intentional accent rather than alarming. */
[data-theme] .btn-delete {
  background: #1a1a1b !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
[data-theme] .btn-delete:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Class-row Delete now uses the .btn-delete-row outline style so no
   per-row override is needed — the standard red text + red-tinted
   border come from public/css/admin.css. */
/* Manage Users row Delete button matches Edit / Reset PW — same orange
   fill, dark text — so the trio reads as one consistent action group. */
[data-theme] .user-row .user-delete {
  background: var(--accent) !important;
  color: #0D0D12 !important;
  border: 1px solid var(--accent) !important;
}
[data-theme] .user-row .user-delete:hover {
  background: var(--accent-hover, var(--accent)) !important;
  color: #0D0D12 !important;
}

/* ── Manage Users row: stable trailing-actions column so the buttons
   line up regardless of whether "default pw" / "Never" / a date is shown.
   The mustChange flag is moved into a fixed-width slot. The name column
   uses minmax(0, 1fr) so a long surname can wrap inside its cell instead
   of pushing the role badge into a collision. */
[data-theme] .user-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto auto !important;
  align-items: center !important;
  column-gap: 0.6rem !important;
}
/* Admin badge + last-login + must-change flag hug the action buttons
   instead of sitting in fixed-width gutters. Lets the name column take
   most of the row and keeps the meta + buttons compact on the right. */
[data-theme] .user-row .user-row-role,
[data-theme] .user-row .user-row-last-login,
[data-theme] .user-row .user-row-flag {
  white-space: nowrap !important;
  margin: 0 !important;
}
[data-theme] .user-row-flag {
  justify-self: start !important;
  white-space: nowrap !important;
}
[data-theme] .user-row .btn-save--sm,
[data-theme] .user-row .btn-delete {
  white-space: nowrap !important;
}

/* Tablet: drop the secondary metadata columns (last-login, must-change
   flag) so the action buttons stay on the same row as the name. */
@media (max-width: 960px) {
  [data-theme] .user-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto !important;
  }
  [data-theme] .user-row .user-row-last-login,
  [data-theme] .user-row .user-row-flag { display: none !important; }
}

/* Phone: stack the name + role on the first row, then a second row of
   evenly-sized action buttons. */
@media (max-width: 640px) {
  [data-theme] .user-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-areas:
      "name name role"
      "edit reset delete" !important;
    row-gap: 0.5rem !important;
  }
  [data-theme] .user-row .user-row-name   { grid-area: name !important; }
  [data-theme] .user-row .user-row-role   { grid-area: role !important; justify-self: end !important; }
  [data-theme] .user-row .user-edit       { grid-area: edit !important; }
  [data-theme] .user-row .user-reset      { grid-area: reset !important; }
  [data-theme] .user-row .user-delete     { grid-area: delete !important; }
  [data-theme] .user-row .user-edit,
  [data-theme] .user-row .user-reset,
  [data-theme] .user-row .user-delete {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* Manage Users row action buttons — match the class-row pattern (Edit /
   Reset PW / Delete all 110px wide, same padding, Delete gets the
   black-bg/orange-border treatment via the global .btn-delete override). */
[data-theme] .user-row .user-edit,
[data-theme] .user-row .user-reset,
[data-theme] .user-row .user-delete {
  flex: 0 0 110px !important;
  width: 110px !important;
  min-width: 110px !important;
  padding: 0.6rem 0.5rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ── Settings → Dashboard Tiles: 2-up landscape grid instead of a
   vertical stack. Fits more rows on-screen and matches the "control panel"
   aesthetic. */
[data-theme] .tile-visibility-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem 1rem !important;
}
[data-theme] .tile-visibility-grid .settings-row {
  border-top: none !important;
  padding: 0.5rem 0.6rem !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card-alt) !important;
  margin: 0 !important;
}

/* ── Stats ticker (light, borderless, centered to the page width) ──
   Originally rendered as a dark bar bleeding to the edges; the new
   product look reads as a clean row of stats sitting on the page
   surface, so we drop the dark background, the inter-card dividers,
   and use black text. On landscape phones the row stays a single line
   and scrolls horizontally instead of squashing onto two rows. */
[data-theme] .stats-row {
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 1.5rem !important;
  justify-content: center !important;
}
[data-theme] .stat-card {
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
[data-theme] .stats-row .stat-num {
  color: #0d0d12 !important;
}
[data-theme] .stats-row .stat-label {
  color: rgba(13,13,18,0.7) !important;
}
[data-theme] .stats-row .stat-num.accent {
  color: var(--accent) !important;
}
/* Landscape phones (and any time the row is wider than the viewport):
   keep the 5 cards on a single line and let the user swipe horizontally
   instead of breaking the row into wrapped rows. */
@media (max-width: 960px) and (orientation: landscape),
       (max-width: 720px) {
  [data-theme] .stats-row {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding-bottom: 0.4rem !important;
  }
  [data-theme] .stats-row .stat-card {
    flex: 0 0 auto !important;
    min-width: 9.5rem !important;
    scroll-snap-align: start !important;
  }
}

/* Landscape phones: switch the tile grid into a horizontal swipe-rail
   so all the cards (Distance, Club Participation, Club Quality, Top 3
   Classes, Specialty, Hardship, etc.) stay full-height and the user
   pans left/right between them instead of squashing them into two
   shrunken columns. */
@media (max-width: 960px) and (orientation: landscape),
       (max-width: 720px) {
  [data-theme] .judge-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    gap: 0.85rem !important;
    padding-bottom: 0.5rem !important;
  }
  [data-theme] .judge-grid .judge-card {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start !important;
  }
}

/* Tile bodies — same font, dark text, no italics on counts. */
[data-theme] .judge-card-body,
[data-theme] .judge-card-body * {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
}
[data-theme] .judge-empty {
  color: var(--text-secondary) !important;
}
/* Top-N class numbers — judge.css uses --primary which still resolves to
   the cyber teal in some places. Force the kinetic accent. */
[data-theme] .top-class-list li,
[data-theme] .top-class-list .top-class-rank,
[data-theme] [class*="top-class"] [class*="rank"],
[data-theme] [id="classes-body"] *[style*="color"] {
  color: var(--accent) !important;
}

/* ── Top-bar buttons (Settings / Logout / Tier badge) ──
   Brand-coherent: orange fill, white text, no border. The previous
   ghost-with-thin-border look read as "secondary" against the orange
   ULTIMATE chip; matching them up makes the tier signal stronger. */
[data-theme] .btn-settings,
[data-theme] .btn-logout {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent) !important;
  font-family: 'Saira', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.1rem !important;
}
[data-theme] .btn-settings:hover,
[data-theme] .btn-logout:hover {
  filter: brightness(1.08);
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* ── Judge page: replace all hardcoded #00c8b4 teal with kinetic orange ──
   judge.css uses hardcoded hex throughout instead of CSS vars, so token
   overrides above don't reach it. Force every teal occurrence here. */

/* Hide vehicle photo column — judges don't need to see car photos */
[data-theme] .col-photo,
[data-theme] th.col-photo,
[data-theme] td.col-photo { display: none !important; }

/* Stats row */
[data-theme] .stat-card--btn:hover { border-color: var(--accent) !important; }
[data-theme] .stat-card--btn:focus { outline-color: var(--accent-glow) !important; }
[data-theme] .top-class-rank { color: var(--accent) !important; }

/* Judge card labels */
[data-theme] .judge-card-label { color: var(--accent) !important; }
[data-theme] .judge-card.dragging { border-color: var(--accent) !important; }

/* Roster section */
[data-theme] .roster-section-label { color: var(--accent) !important; }
[data-theme] .roster-table .col-num { color: var(--accent) !important; }
[data-theme] .roster-table .col-class-text { color: var(--accent) !important; }
[data-theme] .roster-row:focus { outline-color: var(--accent-glow) !important; }

/* Class selector */
[data-theme] .class-select:hover { border-color: var(--accent) !important; }
[data-theme] .class-select:focus { border-color: var(--accent) !important; }
[data-theme] .class-save-status.saved { color: var(--accent) !important; }
[data-theme] .class-save-status.saving { color: var(--warning) !important; }

/* Roster thumb */
[data-theme] .roster-thumb:hover,
[data-theme] .roster-thumb:focus { border-color: var(--accent) !important; }

/* Judge modal */
[data-theme] .judge-modal-class { color: var(--accent) !important; }
[data-theme] .judge-modal-open-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Manual lookup */
[data-theme] .manual-lookup-label { color: var(--accent) !important; }
[data-theme] .manual-lookup-row input:focus { border-color: var(--accent) !important; }
[data-theme] .manual-lookup-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Farthest distance badge */
[data-theme] .farthest-distance {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Club list */
[data-theme] .club-rank { color: var(--accent) !important; }
[data-theme] .club-count { background: var(--accent-dim) !important; }
[data-theme] .club-item--clickable:hover { background: var(--accent-dim) !important; }

/* Heatmap legend dot */
[data-theme] .heatmap-dot-legend { background: var(--accent) !important; }

/* Timeline SVG — can't use CSS vars in SVG attrs, but color/fill work via CSS */
[data-theme] .timeline-line { stroke: var(--accent) !important; }
[data-theme] .timeline-dot { fill: var(--accent) !important; }
[data-theme] .timeline-stat-num { color: var(--accent) !important; }

/* People's choice */
[data-theme] .pc-row-item--leader .pc-row-name { color: var(--accent) !important; }
[data-theme] .pc-row-votes { color: var(--accent) !important; }

/* Specialty awards */
[data-theme] .sa-btn:hover { background: var(--accent-dim) !important; }
[data-theme] .sa-name { color: var(--accent) !important; }

/* Award tile lists — every dashboard tile shares the same internal
   height (Club Participation's). Anything past three rows scrolls
   inside, so all the cards in the row stay visually aligned no matter
   how many entries each contains. judge.css ships a hardcoded teal
   scrollbar for .specialty-awards-body — overridden here too. */
[data-theme] .judge-card .club-list,
[data-theme] .judge-card .hardship-list,
[data-theme] .judge-card .distance-list,
[data-theme] .judge-card .specialty-awards-body {
  max-height: 9.5rem !important;
  overflow-y: auto !important;
  padding-right: 0.4rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(253,117,36,0.55) rgba(0,0,0,0.06) !important;
}
/* Hardship + Specialty tile bodies — judge.css gives each its own
   max-height, creating a second scroll surface in addition to the
   inner .hardship-list / .club-list. Kill those so only the inner
   list scrolls and pinned content (e.g. the survey link) stays put. */
[data-theme] .judge-card .hardship-list-body,
[data-theme] .judge-card .specialty-awards-body {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
[data-theme] .judge-card .club-list::-webkit-scrollbar,
[data-theme] .judge-card .hardship-list::-webkit-scrollbar,
[data-theme] .judge-card .distance-list::-webkit-scrollbar,
[data-theme] .judge-card .specialty-awards-body::-webkit-scrollbar {
  width: 8px !important;
}
[data-theme] .judge-card .club-list::-webkit-scrollbar-track,
[data-theme] .judge-card .hardship-list::-webkit-scrollbar-track,
[data-theme] .judge-card .distance-list::-webkit-scrollbar-track,
[data-theme] .judge-card .specialty-awards-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06) !important;
  border-radius: 0 !important;
}
[data-theme] .judge-card .club-list::-webkit-scrollbar-thumb,
[data-theme] .judge-card .hardship-list::-webkit-scrollbar-thumb,
[data-theme] .judge-card .distance-list::-webkit-scrollbar-thumb,
[data-theme] .judge-card .specialty-awards-body::-webkit-scrollbar-thumb {
  background: rgba(253,117,36,0.55) !important;
  border-radius: 0 !important;
}
[data-theme] .judge-card .club-list::-webkit-scrollbar-thumb:hover,
[data-theme] .judge-card .hardship-list::-webkit-scrollbar-thumb:hover,
[data-theme] .judge-card .distance-list::-webkit-scrollbar-thumb:hover,
[data-theme] .judge-card .specialty-awards-body::-webkit-scrollbar-thumb:hover {
  background: rgba(253,117,36,0.85) !important;
}
[data-theme] .judge-card .club-list .club-item {
  padding: 0.55rem 0.6rem !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme] .judge-card .club-list .club-item:last-child {
  border-bottom: none !important;
}

/* Club modal members — judge.css ships white-on-dark Orbitron text;
   override for the kinetic light theme so names are actually legible
   and use the same typeface as the rest of the admin. */
[data-theme] .club-member-row {
  border-bottom: 1px solid var(--border) !important;
  padding: 0.6rem 0.25rem !important;
}
[data-theme] .club-member-name {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
[data-theme] .club-member-car {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  color: var(--text-secondary) !important;
}
[data-theme] .club-member-empty {
  color: var(--text-muted) !important;
}

/* Distance Traveled + Top Models — make the entire .judge-card-body
   the scroll surface so the box is a fixed-height square that scrolls
   when there's more content than fits, and stays the same height as
   the heatmap tile next to it on Top Picks. The inner list rule above
   already had max-height; promoting the cap to the body kills the
   "empty space below short list" look. */
[data-theme] .judge-card[data-card-id="distance"] .judge-card-body,
[data-theme] .judge-card[data-card-id="top-models"] .judge-card-body {
  max-height: 13rem !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(253,117,36,0.55) rgba(0,0,0,0.06) !important;
}
[data-theme] .judge-card[data-card-id="distance"] .judge-card-body::-webkit-scrollbar,
[data-theme] .judge-card[data-card-id="top-models"] .judge-card-body::-webkit-scrollbar {
  width: 8px !important;
}
[data-theme] .judge-card[data-card-id="distance"] .judge-card-body::-webkit-scrollbar-track,
[data-theme] .judge-card[data-card-id="top-models"] .judge-card-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06) !important;
  border-radius: 0 !important;
}
[data-theme] .judge-card[data-card-id="distance"] .judge-card-body::-webkit-scrollbar-thumb,
[data-theme] .judge-card[data-card-id="top-models"] .judge-card-body::-webkit-scrollbar-thumb {
  background: rgba(253,117,36,0.55) !important;
  border-radius: 0 !important;
}
[data-theme] .judge-card[data-card-id="distance"] .judge-card-body::-webkit-scrollbar-thumb:hover,
[data-theme] .judge-card[data-card-id="top-models"] .judge-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(253,117,36,0.85) !important;
}
/* Inner list inside those tiles no longer needs its own cap — the body
   handles scroll. Reset their max-height so they don't double-clip. */
[data-theme] .judge-card[data-card-id="distance"] .distance-list,
[data-theme] .judge-card[data-card-id="top-models"] .club-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Cars To Judge roster table — judge.css ships Orbitron + dark-theme
   colors (legacy Driven-to-Duty look). Repaint each column in the
   kinetic typeface so the page reads like the rest of the admin:
   class number orange, name orange (Saira 700), car body black
   (Titillium), class chip black on the soft accent fill. */
[data-theme] .roster-table .col-num {
  font-family: 'Saira', sans-serif !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
}
[data-theme] .roster-table .col-name {
  font-family: 'Saira', sans-serif !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: 0 !important;
}
[data-theme] .roster-table .col-car {
  font-family: 'Titillium Web', sans-serif !important;
  color: var(--text-primary) !important;
}
[data-theme] .roster-table .col-class-text {
  font-family: 'Saira', sans-serif !important;
  color: var(--text-primary) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
}

/* Hardship — judge.css ships Orbitron (Driven-to-Duty cyber font) on
   .hardship-list-name and .hardship-list-snippet. Override with the
   kinetic typeface stack so names match the rest of the admin. */
[data-theme] .hardship-list-btn:hover { background: var(--accent-dim) !important; }
[data-theme] .hardship-list-item--winner .hardship-list-name { color: var(--accent) !important; }
[data-theme] .hardship-list-name {
  font-family: 'Saira', 'Titillium Web', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-primary) !important;
}
[data-theme] .hardship-list-snippet {
  font-family: 'Titillium Web', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-secondary) !important;
}
/* judge.css ships an opinionated dark/teal box for .hardship-modal-text
   (the legacy Driven-to-Duty palette). Override with kinetic tokens so
   the admin's hardship modal reads on the light theme. */
[data-theme] .hardship-modal-text {
  color: var(--text-primary) !important;
  background: var(--bg-card-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.9rem !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  margin: 0 0 0.75rem !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* Admin nav links */
[data-theme] .admin-nav-link:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}