/* =========================================
   DISPLAY TRANSITION ANIMATIONS - Enhanced push-down effect
   ========================================= */

/* Display container and transition styles */
.display-container {
  position: relative;
  /* Roomier so the primary "current read" panel feels prominent on
     small/medium screens — the bottom of the card sat right against the
     history panel before, making both feel cramped. */
  min-height: 520px;
  overflow: hidden; /* Hide elements sliding in from above */
}

.primary-display {
  position: relative;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Keep existing display styles */
}

.previous-results {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none; /* Don't interfere with main display */
}

.previous-display {
  position: absolute;
  width: 100%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  margin: 20px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-origin: top center;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.85; /* Less transparent - more visible during transition */
}

/* Push-down animation - old element slides down and fades */
.previous-display.push-out {
  transform: translateY(150px) scale(0.92);
  opacity: 0;
  filter: blur(2px);
}

/* New element slides down from above */
.primary-display.slide-in-from-top {
  transform: translateY(-100vh); /* Start above viewport */
  opacity: 0;
}

.primary-display.slide-in-active {
  transform: translateY(0); /* Move to normal position */
  opacity: 1;
}

/* Enhanced new card read animation - more prominent */
.primary-display.new-card-highlight {
  animation: newCardEnter 1s ease-out;
}

@keyframes newCardEnter {
  0% {
    transform: translateY(-100vh) scale(0.95);
    opacity: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  60% {
    transform: translateY(0) scale(1.01);
    opacity: 1;
    box-shadow: 0 12px 48px rgba(76, 175, 80, 0.4);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
}

/* Enhanced card number animation with slide effect */
.card-number.new-card-pulse {
  animation: cardNumberSlideHighlight 1s ease-out;
}

@keyframes cardNumberSlideHighlight {
  0% {
    transform: translateY(-20px) scale(0.9);
    color: var(--text-primary);
    text-shadow: none;
    opacity: 0;
  }
  40% {
    transform: translateY(0) scale(1.05);
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    color: var(--text-primary);
    text-shadow: none;
    opacity: 1;
  }
}

/* Data flash animation for smooth content updates */
.primary-display.data-update {
  animation: contentUpdateFlash 0.8s ease-out;
}

@keyframes contentUpdateFlash {
  0% {
    background: var(--bg-secondary);
  }
  30% {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f7fa 100%);
  }
  100% {
    background: var(--bg-secondary);
  }
}

/* Dimmed but still readable appearance for previous results */
.previous-display .card-number,
.previous-display .time-display,
.previous-display .codes-display {
  opacity: 0.75; /* More readable than before */
  filter: grayscale(30%);
}

.previous-display .runner-name {
  opacity: 0.7;
  filter: grayscale(25%);
}

/* Registration mode flash - quick yellow highlight */
.primary-display.registration-flash {
  animation: registrationModeFlash 0.6s ease-out;
}

@keyframes registrationModeFlash {
  0% {
    background: var(--bg-secondary);
    transform: scale(1);
  }
  40% {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    transform: scale(1.01);
  }
  100% {
    background: var(--bg-secondary);
    transform: scale(1);
  }
}

/* =========================================
   SHARED STYLES - Common across both pages
   ========================================= */

/* CSS Variables - Enhanced for outdoor visibility */
:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --bg-secondary: #f5f5f5;
  --accent-blue: #0055aa;
  --accent-green: #005500;
  --accent-red: #bb0000;
  --accent-orange: #ff5500;
  --accent-purple: #8b4789;
  --border-color: #333333;
  --shadow: rgba(0,0,0,0.3);
}

/* Admin specific variables */
:root {
  --text-primary-admin: #333333;
  --bg-secondary-admin: #f8f9fa;
  --accent-blue-admin: #4a90e2;
  --accent-green-admin: #5cb85c;
  --accent-red-admin: #d9534f;
  --accent-orange-admin: #f0ad4e;
  --border-color-admin: #dee2e6;
  --shadow-admin: rgba(0,0,0,0.1);
}

/* Base styles */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}

/* Admin body overrides */
.admin-page {
  font-weight: 500;
  color: var(--text-primary-admin);
}

/* Common button styles */
.btn {
  padding: 10px 20px;
  font-size: 1.0rem;
  font-weight: 500;
  border: 1px solid;
  border-radius: 6px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.btn-primary {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.btn-success {
  background: var(--accent-green);
  color: white;
  border-color: var(--accent-green);
}

.btn-danger {
  background: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
}

.btn-warning {
  background: var(--accent-orange);
  color: white;
  border-color: var(--accent-orange);
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border-color: #6c757d;
}

.btn-secondary:hover {
  background: #5a6268;
  border-color: #545b62;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--shadow);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Notification system removed - using visual card animations instead */

/* =========================================
   INDEX.HTML SPECIFIC STYLES - Timing Display
   ========================================= */

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* Bigger gap between the primary "current read" card and the history
     panel: the current read is what the operator and the runner care
     about; the history is supporting context. */
  gap: 48px;
}

/* Course List Sidebar - toned down for secondary information */
.course-list-sidebar {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid #999999;
  z-index: 10;
  opacity: 0.92;
}

/* Status info at top of sidebar */
.sidebar-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #dee2e6;
  gap: 8px;
  flex-wrap: wrap;
}

.course-list-header {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333333;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #dee2e6;
}

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

.course-list-item {
  background: white;
  padding: 12px 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

.course-list-name {
  font-size: 1.05rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.course-list-controls {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

/* Points grid for points races - compact two-column layout */
.points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.points-grid-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.points-control-code {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.95rem;
  color: #333;
}

.points-control-points {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0066cc;
}

/* Quiz questions list for quiz races - compact layout */
.quiz-questions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-question-item {
  background: white;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.quiz-question-desc {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.3;
}

.quiz-question-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.quiz-code-chip {
  background: #e3f2fd;
  color: #0066cc;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #90caf9;
}

/* Points breakdown for main display - compact version */
.points-breakdown-compact {
  text-align: center;
}

.points-breakdown-header {
  font-size: 1.4rem;
  color: #000;
  margin-bottom: 12px;
  line-height: 1.5;
  font-family: 'Courier New', monospace;
  font-weight: 700;
}

.points-breakdown-total {
  font-size: 2.5rem;
  color: #0066cc;
  font-weight: 700;
  margin-top: 8px;
}

.main-section {
  width: 100%;
}

.history-section {
  width: 100%;
  max-height: 300px;
}

/* Mobile layout - hide course sidebar and recent results on smaller screens */
@media (max-width: 768px) {
  .container {
    padding: 10px;
    gap: 15px;
  }

  .course-list-sidebar {
    display: none !important; /* Hide on tablets and phones */
  }

  .recent-results-section {
    display: none !important; /* Hide on tablets and phones */
  }

  /* Single column for points grid on mobile */
  .points-grid {
    grid-template-columns: 1fr;
  }
}

.display {
  background: #ffffff;
  border-radius: 12px;
  border: 4px solid #000000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  /* More breathing room inside the card itself so the result reads
     calmly, even when no time is filled in yet ("Venter på brikke…"). */
  padding: 40px 32px 50px;
  text-align: center;
  margin-bottom: 25px;
}

.card-number {
  font-size: 1.8rem; /* Reduced from larger size */
  color: var(--accent-blue);
  margin-bottom: 8px;
  font-weight: bold;
}

.runner-name {
  font-size: 3.5rem; /* Larger since it's now the primary identifier */
  margin-bottom: 15px;
  font-weight: bold;
  color: var(--text-primary);
  min-height: 70px;
}

/* Course name - prominent display on results (main display only) */
.primary-display #course-name,
.previous-display #course-name {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  border: 3px solid currentColor;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-display {
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--accent-green);
  margin-bottom: 15px;
  font-family: 'Courier New', monospace;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.codes-display {
  font-size: 1.8rem;
  color: #000000;
  margin-bottom: 15px;
  font-weight: 600;
  min-height: 40px;
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #333333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.points-display {
  font-size: 2.2rem;
  color: var(--accent-blue);
  font-weight: bold;
  margin-bottom: 10px;
}

.status-bar {
  display: none; /* Hidden - moved to sidebar */
}

.race-info {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-active { background: var(--accent-green); }
.status-inactive { background: var(--border-color); }

.admin-link {
  background: #6c757d;
  color: white;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.2s;
  white-space: nowrap;
}

.admin-link:hover {
  background: #5a6268;
}

/* Enhanced history section - high contrast design */
.history-panel {
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.history-header {
  background: #343a40;
  color: white;
  padding: 12px 15px;
  border-radius: 5px 5px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border-bottom: 3px solid #000000;
}

.history-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

.history-entry {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 12px;
  transition: none;
}

.history-entry:hover {
  background: #f8f9fa;
}

/* Compact two-row history entry — brikke + runner + time + timestamp on
   the first row, posts on the second. Used by the default ("training")
   render path; replaces the old five-line stacked layout. */
.history-entry-tight {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 8px 12px;
}
.history-entry-tight:hover { background: #f8f9fa; }

.history-row-1 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.history-tight-card {
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 500;
}
.history-tight-runner {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  min-width: 0;
}
.history-tight-time {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-green);
}
.history-tight-timestamp {
  color: #9ca3af;
  font-size: 0.82rem;
  white-space: nowrap;
}
.history-row-2 {
  margin-top: 2px;
  font-size: 0.9rem;
  color: #6c757d;
  word-break: break-all;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.history-tight-points {
  color: var(--accent-blue);
  font-weight: 700;
}

.history-entry-compact {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 10px 12px;
  transition: none;
}

.history-entry-compact:hover {
  background: #f8f9fa;
}

.history-main-line {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.history-time-compact {
  font-family: 'Courier New', monospace;
  color: var(--accent-green);
  font-weight: 700;
}

.history-points-compact {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 1.1rem;
}

.history-time-secondary {
  font-family: 'Courier New', monospace;
  color: #6c757d;
  font-weight: 500;
  font-size: 0.95rem;
}

.history-codes-line {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 4px;
  font-weight: 500;
}

.history-timestamp-small {
  font-size: 0.8rem;
  color: #999;
  font-weight: normal;
}

.history-time {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  margin-bottom: 6px;
}

.history-card {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 4px;
}

.history-runner {
  font-size: 1.0rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.history-codes {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 4px;
}

.history-quiz-summary {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

.history-quiz-score {
  font-size: 1.0rem;
  font-weight: 700;
  color: #4a90e2;
  margin-bottom: 4px;
}

.history-quiz-breakdown {
  font-size: 0.9rem;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.history-quiz-compact {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-align: center;
}

.history-points {
  font-size: 1.0rem;
  color: var(--accent-green);
  font-weight: 600;
}

.history-timestamp {
  font-size: 0.8rem;
  color: #999;
  margin-top: 6px;
}

/* Course badge small - for history and recent results */
.course-badge-small {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Recent results section - fixed to right side, toned down for secondary information */
.recent-results-section {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 320px;
  max-height: calc(100vh - 40px);
  z-index: 10;
  opacity: 0.92;
}

.recent-results-panel {
  background: #f8f9fa;
  border: 1px solid #999999;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  height: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
}

.recent-results-header {
  background: #6c757d;
  color: white;
  padding: 12px 15px;
  border-radius: 7px 7px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #999999;
}

.recent-results-content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.recent-result-item {
  background: white;
  border: 1px solid #cccccc;
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 8px 10px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.recent-result-item:hover {
  background: #f8f9fa;
  transform: translateX(-2px);
}

/* Push-down animation for newly added results */
.recent-result-item.recent-result-new {
  animation: pushDown 0.6s ease-out;
}

@keyframes pushDown {
  0% {
    transform: translateY(-100%) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(0) scale(1.02);
    opacity: 1;
    background: #fff9e6;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    background: white;
  }
}

.recent-result-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
  line-height: 1.3;
}

.recent-result-info {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.recent-time {
  font-family: 'Courier New', monospace;
  color: #006600;
  font-weight: 700;
  font-size: 1rem;
}

.recent-points {
  color: #0066cc;
  font-weight: 700;
  font-size: 1rem;
}

.recent-time-secondary {
  font-family: 'Courier New', monospace;
  color: #666;
  font-weight: 500;
  font-size: 0.85rem;
}

.recent-result-time-inline {
  font-size: 0.75rem;
  color: #666;
  font-weight: normal;
  margin-left: auto;
}

.validation-warning {
  background: var(--accent-red);
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 600;
}

.registration-mode {
  background: var(--accent-orange);
  color: white;
  padding: 8px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  margin: 0 0 20px 0;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 100;
}

/* Enhanced quiz-specific styling - clean and focused design */
.quiz-results-clean {
  margin-top: 10px;
  padding: 0;
}

.quiz-main-score {
  background: #ffffff;
  border: 3px solid #333333;
  border-radius: 18px;
  padding: 30px;
  text-align: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}

.quiz-score-header {
  font-size: 3.6rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.quiz-score-breakdown {
  font-size: 2.1rem;
  font-weight: 600;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.quiz-correct {
  color: #006600;
  font-weight: 700;
}

.quiz-incorrect {
  color: #cc0000;
  font-weight: 700;
}

.quiz-unanswered {
  color: #ff6600;
  font-weight: 700;
}

.quiz-separator {
  color: #666666;
  font-weight: 400;
}

.quiz-unanswered-section {
  background: #fff3cd;
  border: 2px solid #ffeaa7;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}

.quiz-unanswered-title {
  font-size: 1.95rem;
  font-weight: 700;
  color: #856404;
  margin-bottom: 12px;
}

.quiz-unanswered-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.quiz-missed-question {
  background: #f8d7da;
  color: #721c24;
  padding: 9px 15px;
  border-radius: 9px;
  font-size: 1.5rem;
  font-weight: 600;
  border: 1px solid #f5c6cb;
}

.quiz-answered-compact {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 22px;
  margin-top: 15px;
}

.quiz-answer-compact {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  margin-bottom: 9px;
  border-radius: 9px;
  font-size: 1.65rem;
  font-weight: 600;
}

.quiz-answer-compact:last-child {
  margin-bottom: 0;
}

.quiz-answer-compact.correct {
  background: #d4edda;
  border-left: 6px solid #28a745;
}

.quiz-answer-compact.incorrect {
  background: #f8d7da;
  border-left: 6px solid #dc3545;
}

.quiz-answer-icon {
  font-size: 1.8rem;
  margin-right: 15px;
  min-width: 36px;
}

.quiz-answer-text {
  flex: 1;
  color: #000000;
  font-weight: 600;
}

.quiz-answer-points {
  color: #6c757d;
  font-weight: 700;
  font-size: 1.5rem;
  min-width: 60px;
  text-align: right;
}

.quiz-answer-compact.correct .quiz-answer-points {
  color: #28a745;
}

.quiz-answer-compact.incorrect .quiz-answer-points {
  color: #dc3545;
}

/* Quiz race - smaller time display since results are more important */
.time-display.quiz-mode {
  font-size: 2.8rem;
  color: #666666;
  margin-bottom: 10px;
  min-height: 50px;
}

/* Mobile quiz adjustments for clean design */
@media (max-width: 768px) {
  .quiz-score-header {
    font-size: 2.0rem;
  }
  .quiz-score-breakdown {
    font-size: 1.2rem;
    gap: 8px;
  }
  .quiz-answer-compact {
    font-size: 1.0rem;
  }
  .quiz-missed-question {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .quiz-score-header {
    font-size: 1.8rem;
  }
  .quiz-score-breakdown {
    font-size: 1.1rem;
    gap: 6px;
  }
  .quiz-answer-compact {
    font-size: 0.95rem;
    padding: 6px 10px;
  }
}

/* =========================================
   NEW CARD READ VISUAL FEEDBACK ANIMATIONS
   ========================================= */

/* Keyframe animations for new card feedback */
@keyframes cardReadGlow {
  0% {
    box-shadow: 0 4px 16px var(--shadow);
    border-color: var(--border-color);
  }
  25% {
    box-shadow: 0 0 25px 5px rgba(0, 102, 204, 0.6), 0 4px 16px var(--shadow);
    border-color: var(--accent-blue);
  }
  50% {
    box-shadow: 0 0 35px 8px rgba(0, 102, 204, 0.8), 0 4px 16px var(--shadow);
    border-color: var(--accent-blue);
  }
  75% {
    box-shadow: 0 0 25px 5px rgba(0, 102, 204, 0.6), 0 4px 16px var(--shadow);
    border-color: var(--accent-blue);
  }
  100% {
    box-shadow: 0 4px 16px var(--shadow);
    border-color: var(--border-color);
  }
}

@keyframes cardNumberPulse {
  0% {
    transform: scale(1);
    color: var(--accent-blue);
  }
  50% {
    transform: scale(1.05);
    color: #0066cc;
    text-shadow: 0 0 10px rgba(0, 102, 204, 0.5);
  }
  100% {
    transform: scale(1);
    color: var(--accent-blue);
  }
}

@keyframes dataFlash {
  0% {
    background: var(--bg-secondary);
  }
  30% {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
  }
  100% {
    background: var(--bg-secondary);
  }
}

@keyframes successPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation classes to apply */
.display.new-card-read {
  animation: cardReadGlow 1.2s ease-out;
}

.display.data-flash {
  animation: dataFlash 0.8s ease-out;
}

.card-number.pulse {
  animation: cardNumberPulse 1s ease-out;
}

.display.success-pulse {
  animation: successPulse 0.6s ease-out;
}

/* Enhanced glow effect for successful reads */
.display.success-glow {
  box-shadow: 0 0 20px 3px rgba(0, 180, 0, 0.4), 0 4px 16px var(--shadow) !important;
  border-color: var(--accent-green) !important;
  transition: all 0.3s ease-out;
}

/* Quick flash for registration mode */
.display.registration-flash {
  animation: registrationFlash 0.5s ease-out;
}

@keyframes registrationFlash {
  0% {
    background: var(--bg-secondary);
  }
  50% {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  }
  100% {
    background: var(--bg-secondary);
  }
}

/* Responsive text scaling */
@media (max-width: 768px) {
  .card-number { font-size: 1.4rem; }
  .runner-name { font-size: 2.5rem; }
  .primary-display #course-name,
  .previous-display #course-name { font-size: 2.5rem; padding: 12px 20px; }
  .time-display { font-size: 3.5rem; }
  .codes-display { font-size: 1.4rem; }
  .points-display { font-size: 1.8rem; }
  .history-time { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .card-number { font-size: 1.2rem; }
  .runner-name { font-size: 1.8rem; }
  .primary-display #course-name,
  .previous-display #course-name { font-size: 2.0rem; padding: 10px 15px; }
  .time-display { font-size: 2.8rem; }
  .codes-display { font-size: 1.2rem; }
  .points-display { font-size: 1.5rem; }
  .history-time { font-size: 1.5rem; }
}

/* =========================================
   ADMIN.HTML SPECIFIC STYLES - Admin Panel
   ========================================= */

.header {
  background: var(--bg-secondary-admin);
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color-admin);
  box-shadow: 0 1px 3px var(--shadow-admin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header h1 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--text-primary-admin);
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.back-link {
  background: var(--accent-blue-admin);
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.9rem;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.status-registration {
  background: var(--accent-orange);
  color: white;
  font-size: 0.8rem;
}

/* Compact active race bar */
.active-race-bar {
  background: var(--bg-secondary-admin);
  border: 1px solid var(--border-color-admin);
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px var(--shadow-admin);
}

.race-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-primary-admin);
}

.controls-inline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* Compact race list items */
.race-item-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color-admin);
  transition: background-color 0.2s;
}

.race-item-compact:hover {
  background: var(--bg-secondary-admin);
}

.race-item-compact:last-child {
  border-bottom: none;
}

.race-main-info {
  flex: 1;
}

.race-name-status {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.race-date {
  font-size: 0.8rem;
  color: #666;
}

.race-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Warning bar for missing active race */
.warning-bar {
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}

/* Admin container override */
.admin-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.section {
  background: var(--bg-secondary-admin);
  border-radius: 8px;
  border: 1px solid var(--border-color-admin);
  box-shadow: 0 1px 3px var(--shadow-admin);
  margin-bottom: 25px;
  overflow: hidden;
}

.section-header {
  background: var(--accent-blue-admin);
  color: white;
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 600;
}

.section-content {
  padding: 20px;
}

/* Compact layout modifiers */
.compact {
  padding: 10px 15px !important;
  margin-bottom: 10px !important;
}

.controls.compact {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.form-row.compact {
  margin-bottom: 12px !important;
}

.points-config.compact,
.quiz-config.compact {
  margin-top: 15px !important;
  padding: 15px !important;
}

.race-history.compact {
  max-height: 350px;
}

/* Course management styles */
.courses-section {
  margin-top: 20px;
  padding: 15px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color-admin);
  border-radius: 6px;
}

.courses-section h3 {
  margin: 0 0 15px 0;
  color: var(--text-primary-admin);
}

.courses-list {
  margin-bottom: 15px;
}

.no-courses-message {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
}

.course-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color-admin);
}

.course-item:last-child {
  margin-bottom: 0;
}

.course-item-content {
  flex: 1;
}

.course-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.course-description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
}

.course-controls {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 2px;
}

.course-details {
  font-size: 0.85rem;
  color: #666;
}

.course-item-actions {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

.course-form {
  background: var(--bg-secondary-admin);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color-admin);
  margin-bottom: 15px;
}

.course-form.compact {
  padding: 12px !important;
}

/* Course and team badges */
.course-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 600;
}

.team-badge {
  background: var(--accent-blue-admin);
  color: white;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
}

.race-status {
  text-align: center;
  margin-bottom: 20px;
}

.race-info {
  font-size: 1.2rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn-quiz {
  background: var(--accent-purple);
  color: white;
  border-color: var(--accent-purple);
}

/* Tabs - always horizontal */
.tabs {
  display: flex;
  background: var(--bg-secondary-admin);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border-color-admin);
  border-bottom: none;
  overflow: hidden;
}

.tab-btn {
  flex: 1;
  padding: 15px 20px;
  background: var(--bg-secondary-admin);
  color: var(--text-primary-admin);
  border: none;
  cursor: pointer;
  font-size: 1.0rem;
  font-weight: 500;
  transition: all 0.2s;
  border-right: 1px solid var(--border-color-admin);
}

.tab-btn:last-child {
  border-right: none;
}

.tab-btn.active {
  background: var(--accent-blue-admin);
  color: white;
}

.tab-btn:hover:not(.active) {
  background: #e9ecef;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  min-width: 200px;
}

.form-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-input, .form-select {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  border: 2px solid var(--border-color-admin);
  border-radius: 4px;
  background: var(--bg-primary);
}

.form-checkbox {
  margin-right: 8px;
  transform: scale(1.2);
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  margin-bottom: 10px;
  cursor: pointer;
}

/* =========================================
   IMPROVED POINTS CONFIGURATION STYLES
   ========================================= */

.points-config, .quiz-config {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color-admin);
  border-radius: 6px;
}

/* Points rules section with improved layout */
.points-rules-section {
  margin-top: 20px;
}

.points-rules-section h4 {
  margin: 0 0 15px 0;
  color: var(--text-primary-admin);
  font-size: 1.1rem;
}

.points-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  min-height: 60px; /* Ensure space even when empty */
}

.points-rule-item {
  background: var(--bg-secondary-admin);
  border: 1px solid var(--border-color-admin);
  border-radius: 6px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
}

.points-rule-item:hover {
  background: #e9ecef;
}

.points-rule-content {
  flex: 1;
}

.points-rule-points {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-blue-admin);
  margin-bottom: 2px;
}

.points-rule-controls {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Courier New', monospace;
}

.points-rule-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.no-points-message {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
  grid-column: 1 / -1; /* Span all columns */
}

/* Quick add points form */
.quick-add-points {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
}

.quick-add-points .form-row {
  margin-bottom: 0;
  align-items: flex-end;
}

.quick-add-points .form-label {
  font-size: 1.0rem;
  margin-bottom: 6px;
}

.quick-add-points .form-input {
  padding: 8px 12px;
  font-size: 1.0rem;
}

/* Legacy point rule for backwards compatibility */
.point-rule, .quiz-control {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-secondary-admin);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color-admin);
}

.point-rule input, .quiz-control input {
  padding: 8px;
  border: 2px solid var(--border-color-admin);
  border-radius: 4px;
  font-size: 1rem;
}

.quiz-codes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.quiz-code-input {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-primary);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color-admin);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.results-table th,
.results-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color-admin);
}

.results-table th {
  background: var(--bg-secondary-admin);
  font-weight: 600;
}

.registration-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-color-admin);
  border-radius: 4px;
  margin-top: 20px;
}

.registration-item {
  padding: 15px;
  border-bottom: 1px solid var(--border-color-admin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

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

.registration-item:nth-child(even) {
  background: var(--bg-secondary-admin);
}

.registration-item-content {
  flex: 1;
}

.registration-item-actions {
  display: flex;
  gap: 5px;
}

.runner-names-list {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.race-history {
  max-height: 400px;
  overflow-y: auto;
}

.race-item {
  padding: 15px;
  border-bottom: 1px solid var(--border-color-admin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

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

.race-item:nth-child(even) {
  background: var(--bg-secondary-admin);
}

.race-info-content {
  flex: 1;
}

.race-name-item {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.race-details {
  font-size: 0.9rem;
  color: #666;
}

.race-type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

.race-type-time {
  background: var(--accent-blue-admin);
  color: white;
}

.race-type-points {
  background: var(--accent-green-admin);
  color: white;
}

.race-type-quiz {
  background: var(--accent-purple);
  color: white;
}

.registration-mode-indicator {
  background: var(--accent-orange-admin);
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 15px;
  border-radius: 8px;
}

.hidden {
  display: none !important;
}

/* Delete confirmation modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.7);
  transition: transform 0.3s ease;
}

.modal-overlay.show .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.modal-icon {
  font-size: 2rem;
  margin-right: 15px;
  color: var(--accent-red-admin);
}

.modal-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text-primary-admin);
}

.modal-content {
  margin-bottom: 25px;
  line-height: 1.5;
  color: #555;
}

.modal-race-name {
  font-weight: bold;
  color: var(--text-primary-admin);
  background: var(--bg-secondary-admin);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  margin: 8px 0;
}

.modal-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 12px;
  margin: 15px 0;
  color: #856404;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}

.modal-btn-cancel {
  background: #f8f9fa;
  color: var(--text-primary-admin);
  border: 2px solid var(--border-color-admin);
}

.modal-btn-cancel:hover {
  background: #e9ecef;
}

.modal-btn-delete {
  background: var(--accent-red-admin);
  color: white;
}

.modal-btn-delete:hover {
  background: #a71e2a;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .modal {
    margin: 20px;
    padding: 20px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-btn {
    width: 100%;
  }

  .admin-page .container {
    padding: 15px 10px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-group {
    min-width: unset;
  }

  .point-rule, .quiz-control {
    flex-direction: column;
    align-items: stretch;
  }

  .controls {
    flex-direction: column;
  }

  .race-actions {
    flex-direction: column;
  }

  .registration-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .registration-item-actions {
    justify-content: center;
  }

  .tab-btn {
    font-size: 0.9rem;
    padding: 12px 16px;
  }

  /* Make header stack on mobile */
  .header {
    flex-direction: column;
    gap: 10px;
    padding: 10px 15px;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .header-status {
    justify-content: center;
  }

  .active-race-bar {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .race-item-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .race-actions {
    justify-content: center;
  }

  .course-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .course-item-actions {
    justify-content: center;
  }

  /* Mobile points rules adjustments */
  .points-rules-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quick-add-points .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-add-points .form-group {
    min-width: unset;
  }
}

@media (max-width: 480px) {
  /* Further compact on very small screens */
  .points-rules-grid {
    gap: 6px;
  }

  .points-rule-item {
    padding: 10px 12px;
  }

  .points-rule-points {
    font-size: 1.0rem;
  }

  .points-rule-controls {
    font-size: 0.85rem;
  }
}

/* =========================================
   SCANNER STATUS INDICATOR
   ========================================= */

.scanner-status-box {
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  transition: all 0.3s ease;
}

.scanner-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.1rem;
}

.scanner-status-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.scanner-status-text {
  flex: 1;
}

.scanner-status-message {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  font-weight: 500;
}

.scanner-reconnect-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--accent-green);
  color: white;
}

.scanner-reconnect-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.scanner-reconnect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Real-DOM spinner overlaid in the primary panel. Hidden by default;
   .reading-pending fades it in, and removing the class fades it out so
   the new card content reveals smoothly instead of popping. */
.primary-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border: 10px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent-green, #22c55e);
  border-radius: 50%;
  animation: reading-spinner 0.9s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.30s ease;
}
@keyframes reading-spinner {
  to { transform: rotate(360deg); }
}

/* While reading-pending: spinner visible, content invisible and nudged
   slightly downward so the slide-up reveal has somewhere to come from. */
.display.reading-pending { position: relative; }
.display.reading-pending > *:not(.primary-spinner) {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.display.reading-pending .primary-spinner { opacity: 1; }

/* When .reading-pending is removed, the spinner fades out (its own
   transition above) AND the children fade up into place, slightly
   delayed so the spinner has time to dissolve before the result lands.
   Net effect: 300 ms crossfade + slide instead of an abrupt pop. */
.display > *:not(.primary-spinner) {
  transition:
    opacity 0.40s ease 0.10s,
    transform 0.40s cubic-bezier(0.22, 0.94, 0.4, 1) 0.10s;
}

/* Quick-switch button shown next to the wrong-dialect warning */
.quick-switch-btn {
  display: inline-block;
  margin-left: 12px;
  padding: 6px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  background: var(--accent-green, #22c55e);
  color: #fff;
  cursor: pointer;
}
.quick-switch-btn:hover {
  filter: brightness(1.1);
}

/* Fixed bottom status bar — replaces the bulky sidebar status box.
   Touch-friendly: every interactive element is ≥44px tall (Apple HIG /
   Material guideline), so a finger can hit it on the kiosk display. */
body { padding-bottom: 64px; }     /* keep content from sliding under the bar */
.status-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  font-size: 15px;
  z-index: 50;
}
.status-bar-section {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.status-bar-section.status-bar-scanner { gap: 8px; }
.status-bar-divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: #e5e7eb;
}
.status-bar-spacer { flex: 1 1 auto; }
.status-bar-label  {
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.status-bar-link {
  color: #1f2937;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  /* min-width + min-height enforce a 44x44 hit target even when the
     label is narrow. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-bar-link:hover, .status-bar-link:active {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Connection state — colour the icon + text */
.status-bar .scanner-status-icon { font-size: 20px; }
.status-bar .scanner-status-text { font-weight: 500; color: #111827; }
.status-bar.scanner-disconnected { background: #fef2f2; border-top-color: #fecaca; }
.status-bar.scanner-disconnected .scanner-status-text { color: #991b1b; }

.scanner-reconnect-btn-inline {
  margin-left: 10px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: var(--accent-green, #22c55e);
  color: #fff;
  cursor: pointer;
}
.scanner-reconnect-btn-inline:disabled { opacity: 0.6; cursor: not-allowed; }
.scanner-reconnect-btn-inline:hover:not(:disabled),
.scanner-reconnect-btn-inline:active:not(:disabled) { filter: brightness(1.08); }

.station-pin-select {
  min-height: 44px;
  padding: 0 36px 0 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff
    /* down-chevron rendered inline as data-uri so the select looks like a
       proper touch control across browsers without a separate asset. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 14px 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #111827;
  cursor: pointer;
  max-width: 240px;
}
.station-pin-select:focus { outline: 2px solid #22c55e; outline-offset: 1px; }

/* Light-blur backdrop behind the dialect overlay. Sits between the
   page content and the centred card so the rest of the screen reads as
   "paused, wait for me". */
.dialect-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 89;
  animation: dialect-backdrop-in 0.18s ease-out;
}
@keyframes dialect-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Centered overlay shown while a dialect change is in flight, then
   briefly when confirmed (green tick) or timed out (warning). Big and
   obvious because the change is async — the reader has to apply it and
   ack back, which takes a beat. */
.dialect-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  z-index: 90;
  min-width: 360px;
  max-width: 92vw;
  animation: dialect-overlay-in 0.18s ease-out;
}
@keyframes dialect-overlay-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.dialect-overlay-spinner {
  width: 44px;
  height: 44px;
  border: 5px solid rgba(0, 0, 0, 0.10);
  border-top-color: var(--accent-green, #22c55e);
  border-radius: 50%;
  animation: reading-spinner 0.85s linear infinite;
  flex: 0 0 auto;
}
.dialect-overlay-icon {
  font-size: 36px;
  line-height: 1;
  flex: 0 0 auto;
}
.dialect-overlay-text {
  font-size: 15px;
  color: #111827;
  line-height: 1.4;
}
.dialect-overlay-text strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}
.dialect-overlay-text div {
  color: #4b5563;
  font-size: 14px;
}
.dialect-overlay-text code {
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.dialect-overlay-close {
  border: 0;
  background: transparent;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  align-self: flex-start;
}
.dialect-overlay-close:hover { color: #4b5563; }
.dialect-overlay.state-confirmed { border-color: #86efac; background: #f0fdf4; }
.dialect-overlay.state-timeout   { border-color: #fecaca; background: #fef2f2; }

/* "We auto-pinned to your local reader" toast — anchored just above the
   status bar so it's visible without interrupting the main display. */
.local-reader-toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #065f46;
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  z-index: 60;
  transition: opacity 0.4s ease;
}
.local-reader-toast.fading { opacity: 0; }
.local-reader-toast button {
  border: 1px solid #6ee7b7;
  background: #fff;
  color: #065f46;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.local-reader-toast button.toast-close {
  border: 0; background: transparent;
  font-size: 18px; padding: 0 4px;
  color: #065f46;
}

/* Bigger Auto/EPT/MTR pill segments inside the status bar. */
.status-bar .scanner-dialect-toggle {
  min-height: 44px;
  border-radius: 8px;
  position: relative;
}
.status-bar .scanner-dialect-toggle button {
  min-width: 56px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}

/* "Applying…" state — shown after the user clicks a dialect button,
   cleared once the reader heartbeats back with appliedDialect == desired.
   Dimmed buttons + a small spinner pulled to the right of the toggle. */
.scanner-dialect-toggle.pending button { opacity: 0.55; }
.scanner-dialect-toggle.pending::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -28px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--accent-green, #22c55e);
  border-radius: 50%;
  animation: reading-spinner 0.8s linear infinite;
}

/* Reader dialect toggle (Auto / EPT / MTR) on kiosk display */
.scanner-dialect-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}
.scanner-dialect-label {
  color: var(--text-secondary, #666);
  font-weight: 500;
}
.scanner-dialect-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.scanner-dialect-toggle button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.scanner-dialect-toggle button + button {
  border-left: 1px solid #d1d5db;
}
.scanner-dialect-toggle button:hover:not(:disabled):not(.active) {
  background: #f3f4f6;
}
.scanner-dialect-toggle button.active {
  background: var(--accent-green, #22c55e);
  color: #fff;
}
.scanner-dialect-toggle button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Scanner connected state - green */
.scanner-status-box.scanner-connected {
  border-color: var(--accent-green);
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f4 100%);
}

.scanner-status-box.scanner-connected .scanner-status-header {
  color: var(--accent-green);
}

/* Scanner disconnected state - red */
.scanner-status-box.scanner-disconnected {
  border-color: #ff4444;
  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
  animation: disconnectedPulse 2s ease-in-out infinite;
}

.scanner-status-box.scanner-disconnected .scanner-status-header {
  color: #ff4444;
}

.scanner-status-box.scanner-disconnected .scanner-status-message {
  background: #ffe5e5;
  color: #cc0000;
  font-weight: 600;
}

@keyframes disconnectedPulse {
  0%, 100% {
    border-color: #ff4444;
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
  }
  50% {
    border-color: #ff6666;
    box-shadow: 0 0 0 8px rgba(255, 68, 68, 0);
  }
}

/* Scanner reconnecting state - yellow/orange */
.scanner-status-box.scanner-reconnecting {
  border-color: #ff9800;
  background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}

.scanner-status-box.scanner-reconnecting .scanner-status-header {
  color: #ff9800;
}

.scanner-status-box.scanner-reconnecting .scanner-status-icon {
  animation: reconnectSpin 1.5s linear infinite;
}

.scanner-status-box.scanner-reconnecting .scanner-status-message {
  background: #fff4e5;
  color: #e65100;
}

@keyframes reconnectSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}