body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  form {
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .form_wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
  }
  
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  /* Universal input styling for text-based form fields */
input[type="text"], input[type="number"], input[type="tel"], input[type="time"], input[type="date"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 12px;
}

input::placeholder,
textarea::placeholder {
  font-size: 16px;
  color: #44453F;
  font-family: inherit;
  opacity: 1;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="date"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
}

/* Unified styling for select dropdowns */
select.placeholder {
  color: #999;
}

select.filled {
  color: #000;
}

/* Optional: shared dropdown styling */
select {
  font-size: 16px;
  font-family: inherit;
  height: 35px;
  padding: 6px;
  background-color: #f2f2f2;
  border-radius: 12px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}



 
  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 12px;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .button_container {
    text-align: center; 
    padding-bottom: 20px;
  }
  #submit_container{
    padding-right: 20px;
  }

  #downloadBtn {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px; /* Adjust margin as needed */
    border-radius: 12px;
  }
  
  #downloadBtn:hover {
    background-color: #0056b3;
  }

  .approach_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* responsive columns */
    gap: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    max-width: 100%;
  }
  

  /* .approach_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  } */

  .approach_field select,
  .approach_field input {
  width: 100%;
  padding: 6px;
  font-size: 16px;
  border-radius: 12px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  box-sizing: border-box;
  height: 35px;
}


  /* Set widths for each field */
  #approach {
    flex: 1 1 34%;
  }
  
  #runway {
    flex: 1 1 31%;
  }
  
  #numApproaches {
    flex: 1 1 31%;
  }
  
  /* Optional: Prevent fields from getting too small */
  @media (max-width: 400px) {
    #approach,
    #runway,
    #numApproaches {
      flex: 1 1 100%;
    }
  }
  

.approach_container input[type="text"],
.approach_container input[type="number"] {
  height: 35px;
  padding: 6px;
  border-radius: 12px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  box-sizing: border-box;
}


/* Style for the approach type dropdown */
.approach_container select,
.approach_container input {
  height: 36px;
  padding: 6px;
  border-radius: 12px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  box-sizing: border-box;
}



#numApproaches::placeholder {
  font-size: 16px;
  color: #44453F;
  font-family: inherit;
  opacity: 1;
}


#numApproaches {
  height: 36px;
  padding: 6px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 12px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  box-sizing: border-box;
  margin-top: 5.5px; /* 👈 adjust this as needed to align perfectly */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}






/* Style for the runway text box */
#runway {
  flex: 1 1 31%;
  height: 35px;
  padding: 6px;
  font-size: 16px;
  border-radius: 12px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

/* Style for the runway text box */
#runway::placeholder {
  color: black; 

}
/* Style for the flight number input */
#flightNumber {
  background-color: #f2f2f2; 
  border-radius: 12px;
  height: 30px;
}

#aircraftType {
  height:30px;
  border-radius: 30px;
}
input::placeholder {
  color: #44453F; 
}
/* Style for Checkboxes */

.checkboxes label {
 display: inline-block;
}

/* Space before the SIC checkbox */
label[for="sic"] {
  margin-left: 25px;    /* adjust 30px up or down to taste */
}


/* Style for Notes */
.date_notes_container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.date_notes_container .form_half:first-child {
  width: 40%;
}

.date_notes_container .form_half:last-child {
  width: 60%;
}

.date_notes_container textarea {
  height: 38px;
  padding: 6px 8px;
  line-height: 1.2;
  vertical-align: middle;
  margin-top: 6px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 12px;
  resize: vertical;
}

/* @media (max-width: 500px) {
  .approach_container {
    flex-direction: column;
    align-items: stretch;
  }

  .approach_container select,
  .approach_container input {
    width: 100%;
    margin-bottom: 10px;
  } */

  .date_notes_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .date_notes_container .form_half:first-child {
    width: 35%;
  }

  #notes {
  height: 38px;
  padding: 6px 8px;
  box-sizing: border-box;
}

  #date {
    height: 38px;
    padding: 6px 8px;
    width: 100%;
    font-size: 16px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
  }
  

  .date_notes_container .form_half:last-child {
    width: 65%;
  }

  .date_notes_container .form_half:first-child input[type="date"] {
    width: 100%;
  }

  .date_notes_container input[type="date"],
  .date_notes_container textarea {
    width: 100%;
  }
}



/* Style for Settings */

/* Modal container */
#manageCaptainsModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 2000;
  max-height: 300px;
  overflow-y: auto;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#manageCaptainsModal h3 {
  margin-top: 0;
  font-size: 1.2rem;
  text-align: center;
}

#captainListContainer li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

#captainListContainer button {
  background: none;
  border: none;
  cursor: pointer;
  color: red;
  font-size: 16px;
}

#captainListContainer button:hover {
  color: darkred;
}

#settingsPanel {
  display: none;
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 5px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#settingsPanel a {
  text-decoration: none;
  color: #007BFF;
  display: block;
  margin: 5px 0;
}

#settingsPanel a:hover {
  text-decoration: underline;
}

/* Optional modal overlay */
#modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1500;
}
/* Improve spacing for gear icon on mobile */
#settingsBtn {
  margin-bottom: 10px;
  padding: 20px;
  cursor: pointer;
  display: inline-block;
  touch-action: manipulation;
}

/* Fix horizontal scrolling ONLY for mobile */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body, .form_wrapper, form {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.nav-links {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}