/* General Form Styling */
form {
  margin: 20px auto; /* Center the form horizontally */
  max-width: 600px; /* Limit the width of the form */
  padding: 20px;
  border: 1px solid #ddd; /* Light border */
  border-radius: 10px;
  background-color: #fff; /* White background */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

form label {
  display: block; /* Make labels display on their own line */
  font-weight: bold;
  margin-bottom: 5px;
}

form input,
form select,
form textarea,
form button {
  width: 100%; /* Make form elements take full width */
  margin-bottom: 15px;
  font-size: 14px;
  box-sizing: border-box; /* Include padding in width calculation */
}

form button {
  width: auto; /* Buttons should not stretch the full width */
  padding: 10px 20px; /* Add more padding for better clickability */
}

form button:hover {
  background-color: #2980b9; /* Adjust hover for consistency */
}

/* Styling for Form Group */
.form-group {
  margin-bottom: 20px; /* Add spacing between fields */
}

/* Headings for Forms */
form h1 {
  text-align: center;
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 20px;
}

/* Hidden cells */
td[style="display: none;"] {
  visibility: hidden;
}

/* Controls styling */
#controls {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#controls label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 15px; /* Adjust spacing between items */
  margin-bottom: 15px;
}

.score-row label {
  font-weight: bold;
  font-size: 1.5rem; /* Increases label text size */
}

.score-row input {
  width: 100px; /* Make the boxes wider */
  height: 50px; /* Increase the height */
  font-size: 2rem; /* Make the numbers larger */
  text-align: center;
  border: 2px solid #333; /* Adds a border for better visibility */
  border-radius: 8px; /* Rounds the edges */
}

/* Remove arrows from number inputs */
input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield; /* Standard */
  font-size: 24px; /* Increase font size */
  width: 80px; /* Make input bigger */
  text-align: center; /* Center text */
}

/* Remove spinners for WebKit browsers */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.timer-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.timer-container input {
  font-size: 1.8rem;
  text-align: center;
  width: 100px;
  font-weight: bold;
}

/* Default Button Styles */
.timer-container button {
  font-size: 1.5rem;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.1s ease;
}

/* Hover Effect */
.timer-container button:hover {
  background-color: #2980b9;
}

/* Active/Pressed Effect */
.timer-container button:active {
  transform: scale(0.9);
}

/* Start Button (Green when active) */
#startTimer.active {
  background-color: #27ae60; /* Green */
}

/* Pause Button (Yellow when active) */
#pauseTimer.active {
  background-color: #f39c12; /* Orange/Yellow */
}

/* Reset Button (Red when active) */
#resetTimer.active {
  background-color: #e74c3c; /* Red */
}

/* Ensure quarter dropdown looks like Goals & Points input */
.score-input {
  font-size: 2rem; /* Increase font size */
  padding: 10px;
  text-align: center;
  width: 100px; /* Same width as score input */
  height: 60px; /* Increase height to match input fields */
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
}