/* styles/timerpage.css – overrides just for the timer page */

.main-container {
padding: 0 28%;
}

/* make the timer display very large */
#timers {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
}

#rtatimer,
#cumtimer {
  font-size: 4em;
  text-align: center;
}

.timer-box {
  background-color: #382159;      /* matches your odd-row purple */
  border: 2px solid #FCCD4C;      /* same yellow accent as buttons & table */
  padding: 1em;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 8em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.timer-box h2 {
  color: #FFFFFF;                 /* keep the big numbers white */
  margin: 0;
}

.timer-label {
  font-size: 1em;
  color: #FCCD4C;                 /* yellow to match the border */
  margin-bottom: 0.25em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* layout for the six single-digit inputs */
#split-input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  margin-bottom: 1em;
}

#split-input input {
  width: 1.5em;
  font-size: 1.2em;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#split-input span {
  font-size: 1.2em;
  line-height: 1;
}

/* simple styling for the splits table */
#splits {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9em;
}

#splits th,
#splits td {
  border: 1px solid #aaa;
  padding: 0.3em 0.5em;
  text-align: center;
}

#splits thead {
  background-color: #f0f0f0;
}

#loadComparison,
#reset,
#undo,
#export,
#startStop {
  font-size: 1em;
  padding: 0.5em 1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /* match your start/stop colors: */
  background-color: #FCCD4C;
  color: #030303;
}

#loadComparison:hover,
#reset:hover,
#undo:hover,
#export:hover,
#startStop:hover {
  transform: scale(1.05);
  background-color: #e6c044;
}

#loadComparison:disabled,
#reset:disabled,
#undo:disabled,
#export:disabled,
#startStop:disabled {
  background-color: #e8d59a;
  color: #888;
  cursor: not-allowed;
  opacity: 0.8;
  transform: none;
  pointer-events: none;
}