:root {
  --color-practice-red: #FF6B6B;
  --color-practice-grey: #F5F5F5;
  --color-practice-text-light: #FFFFFF;
  --color-practice-text-dark: #222222;

  --color-qualifying-red: #FF3B3B;
  --color-qualifying-grey: #E6E6E6;
  --color-qualifying-text-light: #FFFFFF;
  --color-qualifying-text-dark: #222222;

  --color-sprint-red: #D72638;
  --color-sprint-grey: #D9D9D9;
  --color-sprint-text-light: #FAFAFA;
  --color-sprint-text-dark: #1F1F1F;

  --color-race-red: #B30000;
  --color-race-grey: #CCCCCC;
  --color-race-text-light: #F0F0F0;
  --color-race-text-dark: #111111;

  --color-border-red: #dd0101;
  --color-border-grey: #dddddd;


}
.event-table__wrapper {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
  max-width: 1600px;
  margin: 0 auto;
  scrollbar-width: none;        /* Hide scrollbar (Firefox) */
  -ms-overflow-style: none;     /* Hide scrollbar (IE/Edge) */
}

.event-table__wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar (Chrome, Safari) */
}

.event-table {
  width: 100%;
  border-collapse: collapse;
  font-family: RacingSans, sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.event-table__main-header th {
    padding: 0.25rem;
    position: sticky;
    top: 0;
    background: #e10600;
    color: white;
    z-index: 2;
    text-shadow: 1px 1px 2px black;
}

.event-table__group-header th {
  position: sticky;
  top: 1.75rem;
  background: black;
  color: white;
  z-index: 2;
  padding: 0.25rem;
  text-shadow: 1px 1px 2px black;
}

.event-table::-webkit-scrollbar {
    display: none;
}

.event-table__row {
    text-shadow: 0.5px 0.5px 1px grey;
}

.event-table__row--alt {
    text-shadow: 0.5px 0.5px 1px black;
}

.event-table__row,
.event-table__row--alt {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.event-table__row:hover,
.event-table__row--alt:hover {
  background-color: rgba(255, 230, 150, 0.25); /* light yellow tint for visibility */
  transform: scale(1.005);
}

.event-table__row:focus-within,
.event-table__row--alt:focus-within {
  outline: 2px solid #FFD54F; /* a warm yellow outline */
  outline-offset: -2px;
}

.event-table__row.practice {
    background-color: var(--color-practice-grey);
    color: var(--color-practice-text-dark);
    border-top: 1px solid var(--color-border-grey);
}

.event-table__row--alt.practice {
    background-color: var(--color-practice-red);
    color: var(--color-practice-text-light);
    border-top: 1px solid var(--color-border-red);
}

.event-table__row.qualifying {
    background-color: var(--color-qualifying-grey);
    color: var(--color-qualifying-text-dark);
}

.event-table__row--alt.qualifying {
    background-color: var(--color-qualifying-red);
    color: var(--color-qualifying-text-light);
}

.event-table__row.sprint {
    background-color: var(--color-sprint-grey);
    color: var(--color-sprint-text-dark);
}

.event-table__row--alt.sprint {
    background-color: var(--color-sprint-red);
    color: var(--color-sprint-text-light);
}

.event-table__row.race {
    background-color: var(--color-race-grey);
    color: var(--color-race-text-dark);
}

.event-table__row--alt.race {
    background-color: var(--color-race-red);
    color: var(--color-race-text-light);
}

.event-table__cell {
    padding: 0.5rem 1rem;
}

#countdown--race {
    font-size: 1.5em;
    margin-top: 15px;
}