:root {
  /* Global scaling controls */
  --row-scale: 0.60;   /* Adjust row height (0.60 = 60% of normal) */
  --col-scale: 0.95;   /* Adjust column widths (0.95 = 95% of normal) */
}

/* Page chrome */
body {
  font-family: 'Inter', 'Roboto', sans-serif;
  background: #111;
  color: #eee;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#app-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
  margin: auto;
  background: #111;
  color: #fff;
  box-sizing: border-box;
  padding: 1rem;
}

/* Title */
h1 {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: clamp(18px, 2vw, 32px);
  color: #fff;
}

/* Timing table */
.timing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 1.2vw, 18px);
  table-layout: fixed;
}

.timing-table th, .timing-table td {
  border: 1px solid #444;
  padding: calc(0.3em * var(--row-scale)) calc(0.5em * var(--row-scale));
  font-size: calc(1em * var(--row-scale));
  line-height: calc(1.2em * var(--row-scale));
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column widths with scaling */
.timing-table th:nth-child(1),
.timing-table td:nth-child(1) { width: calc(3% * var(--col-scale)); }   /* Car # */

.timing-table th:nth-child(2),
.timing-table td:nth-child(2) { width: calc(10% * var(--col-scale)); }  /* Driver */

.timing-table th:nth-child(3),
.timing-table td:nth-child(3) { width: calc(10% * var(--col-scale)); }  /* Vehicle */

.timing-table th:nth-child(4),
.timing-table td:nth-child(4) { width: calc(5% * var(--col-scale)); }   /* Club */

.timing-table th:nth-child(5),
.timing-table td:nth-child(5) { width: calc(5% * var(--col-scale)); }   /* Points */

/* Runs / Splits (columns 6–21 = 16 cols) */
.timing-table th:nth-child(n+6):nth-child(-n+21),
.timing-table td:nth-child(n+6):nth-child(-n+21) { width: calc(5% * var(--col-scale)); }

/* Class header row */
tr.class-header-row td.class-header {
  background: #222 !important;
  color: #ffd700 !important;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: bold;
  text-align: left;
  padding: calc(0.5em * var(--row-scale));
}


/* Zebra striping */
.timing-table tbody tr:nth-child(even):not(.class-header-row) td { background: #1e1e1e; }
.timing-table tbody tr:nth-child(odd):not(.class-header-row) td { background: #000; }

/* Highlights */
.best-run { color: #00ff00; font-weight: bold; }
.best-split { color: #ffff00; font-weight: bold; }

/* Driver + Vehicle alignment */
.timing-table td:nth-child(2), .timing-table th:nth-child(2) {
  text-align: left; font-weight: 600;
}
.timing-table td:nth-child(3), .timing-table th:nth-child(3) {
  text-align: left; font-weight: 500;
}

/* Car numbers */
.timing-table tbody td:nth-child(1) {
  color: #4da6ff; font-weight: 600;
}

/* Outright record bar */
#records-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  color: #fff;
  padding: calc(0.3em * var(--row-scale)) calc(0.6em * var(--row-scale));
  font-size: calc(clamp(12px, 1vw, 16px) * var(--row-scale));
  margin-bottom: 0.5rem;
  border-radius: 6px;
}

/* Leaderboard bar */
#leaderboard-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.5em * var(--row-scale)) calc(0.8em * var(--row-scale));
  background: #1e1e1e;
  border-radius: 8px;
  margin-bottom: 1rem;
  color: #fff;
  font-size: calc(clamp(12px, 1vw, 16px) * var(--row-scale));
}

.leaderboard-section h3 {
  margin: 0 0 0.3em 0;
  font-size: calc(clamp(14px, 1.2vw, 18px) * var(--row-scale));
  font-weight: 600;
  color: #ffcc00;
}

.leaderboard-items { display: flex; gap: 0.4em; }

/* Chips */
.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--row-scale));
  padding: calc(6px * var(--row-scale)) calc(14px * var(--row-scale));
  border-radius: 9999px;
  font-size: calc(clamp(12px, 1vw, 16px) * var(--row-scale));
  font-weight: 600;
  margin: 4px;
  background-color: #f5f5f5;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.lb-chip.gold { background: #ffca28; color: #5d4037; }
.lb-chip.silver { background: #bdbdbd; color: #424242; }
.lb-chip.bronze { background: #fb8c00; color: #4e342e; }

/* Record pills */
.record-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--row-scale));
  padding: calc(4px * var(--row-scale)) calc(12px * var(--row-scale));
  border-radius: 9999px;
  font-size: calc(clamp(12px, 0.9vw, 14px) * var(--row-scale));
  font-weight: 600;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.record-pill.outright-record { background-color: #e3f2fd; color: #1565c0; }
.record-pill.class-record { background-color: #e3f2fd; color: #1565c0; }
.record-pill.new-record { background-color: #fff3e0; color: #ef6c00; }