/* 

SCREENS 

*/


/* Centered Content for Main Screen */
#mainScreen {
  flex-direction: column;
  /* Stack items vertically */
  justify-content: center;
  /* Center items vertically */
  align-items: center;
  /* Center items horizontally */
}

#settingsScreen {
  flex-direction: column;
  /* Stack items vertically */
}


/* 

BOTTOM BAR 

*/
/* Bottom Tab Bar for Mobile */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--background-light);
  border-top: 2px solid var(--primary-red);
  padding: 10px 0;
}

.bottom-bar button {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* Active Button Style */
.bottom-bar button.active {
  background-color: var(--primary-red);
}

.bottom-bar button.active:hover {
  background-color: var(--hover-red);
}

/* Inactive Button Style */
.bottom-bar button:not(.active) {
  background-color: var(--dark-red);
}

.bottom-bar button:not(.active):hover {
  background-color: var(--hover-dark-red);
}

/* 

MAIN SCREEN 

*/
/* Common Display Styles */
#timerDisplay {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1px, 6vw, 90px);
  max-width: 600px;
  min-width: 300px;
  width: 80%;
  text-align: center;
  border: 3px solid;
  border-radius: 10px;
  padding: 20px;
}

/* Common Button Styles */
#startButton {
  max-width: 240px;
  /* Maximum width */
  min-width: 80px;
  /* Minimum width */
  max-height: 240px;
  /* Maximum height */
  min-height: 80px;
  /* Minimum height */
  width: 5em;
  /* Set width to a percentage to allow scaling */
  height: 5em;
  /* Set height to a percentage to allow scaling */
  border-width: 3px;
  border-style: solid;
  border-radius: 100%;
  font-weight: bold;
  /* Make text bold */
  font-size: 2.5vw;
  /* Font size */
  cursor: pointer;
  /* Cursor style */
  margin-top: 20px;
  /* Space above the button */
  transition: background-color 0.3s;
  /* Smooth transition */
}

.sideButton {
  max-width: 160px;
  /* Maximum width */
  min-width: 50px;
  /* Minimum width */
  max-height: 160px;
  /* Maximum height */
  min-height: 50px;
  /* Minimum height */
  width: 6em;
  /* Set width to a percentage to allow scaling */
  height: 6em;
  /* Set height to a percentage to allow scaling */
  border: 3px solid;
  border-radius: 100%;
  font-weight: bold;
  /* Make text bold */
  font-size: 1.5vw;
  /* Font size */
  cursor: pointer;
  /* Cursor style */
  margin-top: 20px;
  /* Space above the button */
  transition: background-color 0.3s;
  /* Smooth transition */
}

.mainButtons {
  display: flex;
}

/* Red Styles */
#timerDisplay.red {
  background-color: var(--background-color);
  color: var(--timer-red);
  border-color: var(--timer-red);
  box-shadow: 0 0 20px var(--shadow-red);
}

button.red {
  background-color: var(--dark-red);
  border-color: var(--primary-red);
  box-shadow: 0 0 20px var(--shadow-red);
  color: var(--text-color);
}

button.red:hover {
  background-color: var(--hover-dark-red);
}

/* Yellow Styles */
#timerDisplay.yellow {
  background-color: var(--background-color);
  color: var(--timer-yellow);
  border-color: var(--timer-yellow);
  box-shadow: 0 0 20px var(--shadow-yellow);
}

button.yellow {
  background-color: var(--dark-yellow);
  border-color: var(--primary-yellow);
  box-shadow: 0 0 20px var(--shadow-yellow);
  color: var(--text-color);
}

button.yellow:hover {
  background-color: var(--hover-dark-yellow);
}

/* Green Styles */
#timerDisplay.green {
  background-color: var(--background-color);
  color: var(--timer-green);
  border-color: var(--timer-green);
  box-shadow: 0 0 20px var(--shadow-green);
}

button.green {
  background-color: var(--dark-green);
  border-color: var(--primary-green);
  box-shadow: 0 0 20px var(--shadow-green);
  color: var(--text-color);
}

button.green:hover {
  background-color: var(--hover-dark-green);
}

/* 

SETTINGS SCREEN 

*/

/* Controls Block */
.controls {
  margin: 0;
  /* Ensures no auto-centering */
  width: 100%;
}


/* Control Group Styles */
.control-group {
  display: flex;
  /* Flexbox for inline layout */
  margin: 10px 0px;
  /* Space between control groups */
  width: 100%;
}

/* Label Styles */
.control-group label:not(.radio-button) {
  flex: 0 0 90px;
  margin-right: 10px;
  height: 40px;
  padding-top: 12px;
}

/* Input Styles */
.controls input[type="number"],
.controls input[type="text"] {
  width: 60px;
  /* Fixed width for input fields */
  height: 40px;
  /* Set height to match input fields */
  padding: 5px;
  /* Add padding for comfort */
  margin: 0 2px;
  /* Space between buttons and input */
  font-size: 16px;
  /* Font size */
  text-align: center;
  color: var(--text-color);
  background-color: var(--background-color);
  border: 2px solid var(--primary-red);
  /* Border for input */
  border-radius: 5px;
  /* Rounded corners */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  /* Hide spinner controls in Firefox */
  appearance: textfield;
}

/* Button Styles for Adjustment */
.adjust-button {
  width: 30px;
  height: 40px;
}


/* Hide the default checkbox */
.toggle-input {
  display: none;
}

/* Style the slider track */
.slider {
  display: inline-block;
  width: 60px;
  /* Width of the entire toggle */
  height: 34px;
  margin: 3px 0px;
  /* Height of the entire toggle */
  background-color: var(--gray);
  /* Default grey background */
  border-radius: 34px;
  /* Makes the track rounded */
  position: relative;

  cursor: pointer;
}

/* Style the knob (the ::before pseudo-element) */
.slider::before {
  content: '';
  position: absolute;
  height: 26px;
  /* Height of the knob */
  width: 26px;
  /* Width of the knob */
  left: 4px;
  /* Initial position on the left */
  bottom: 4px;
  /* Aligns with the bottom of the track */
  background-color: var(--background-color);
  /* White knob */
  transition: .4s;
  /* Smooth transition for the movement */
  border-radius: 50%;
  /* Makes the knob circular */
}

/* Change the slider's background when the checkbox is checked */
.toggle-input:checked+.slider {
  background-color: var(--primary-red);
  /* Blue background when checked */
}

/* Move the knob to the right when the checkbox is checked */
.toggle-input:checked+.slider::before {
  transform: translateX(26px);
}

label.checkbox {
  padding-top: 0px !important;
}

/* Radio Buttons Container */
.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  justify-content: flex-start;
  /* Align items to the left */
  align-items: flex-start;
  /* Align items at the top */
  width: 100%;
  row-gap: 10px;

}

/* Hide default radio buttons */
.radio-buttons input[type="radio"] {
  display: none;
}

/* Radio Button Label Styling */
.radio-button {
  display: inline-block;
  padding: 10px 10px;
  margin: 0px 2px;
  font-size: 1em;
  transition: background-color 0.3s, color 0.3s;
}

.radio-buttons input[type="radio"]:checked+.radio-button {
  background-color: var(--primary-red);
}

.radio-button:hover {
  background-color: var(--hover-dark-red);
}

.radio-buttons input[type="radio"]:checked+.radio-button:hover {
  background-color: var(--hover-red);
}

/* Refresh Button */
.refreshButton {
  background-color: var(--dark-red);
  color: var(--text-color);
  border: 2px solid var(--primary-red);
  border-radius: 4px;
  padding: 10px;
  margin: 0px 2px;
  font-size: 1em;
  cursor: pointer;
}

.refreshButton:hover {
  background-color: var(--hover-dark-red);
}

#version {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9em;
  color: var(--primary-red);
  /*
  position: absolute;
  bottom: 10px;
  right: 10px;
*/
  text-align: right;
}


/* 

Responsive Layouts 

*/

/* PC */
@media (min-width: 768px) {

  #mainScreen,
  #settingsScreen {
    display: flex;
    flex: 1;
    margin: 0;
  }

  #settingsScreen {
    margin-left: 3px;
  }

  .bottom-bar {
    display: none;
  }


  #menu-bg1 {
    display: none;
  }
}

/* Mobile */
@media (max-width: 767px) {

  body {
    /* Adjust this value to match the actual height of your bottom bar */
    padding-bottom: 50px;
  }

  .bottom-bar {
    display: flex;
    /* Show the bottom bar on mobile */
  }

  #timerDisplay {
    font-size: 12vw;
    /* Adjust font size as needed */
  }

  #startButton {
    font-size: 5vw;
    /* Font size */
  }

  .sideButton {
    font-size: 3vw;
    /* Font size */
  }

  /*
  #version {
    bottom: 50px;
  }
*/
}