/* ============================ */
/* Reset and Universal Styles */
/* ============================ */

* {margin: 0;
    padding: 0;
    box-sizing: border-box;}

html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}


body {background-color: dimgray; /* Set your desired background color */}

/*///////////////////three columns 1 wide 2 small same size////////////////////////////////////////////*/

.column3d {flex: 0 0 65%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}


.container-columns-stacked {display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 2000px;
            margin: 10px auto;}

/* Add padding to table cells */
th, td {padding: 10px; /* Add space inside cells */
    text-align: left; /* Align text to the left for readability */}

/* Optional: Add spacing between columns */
th, td {border: 1px solid #ddd; /* Light border for readability */}

/* Universal styles for form rows */
.form-row1 {display: flex;
    align-items: center; /* Align items vertically */
    margin-bottom: 10px; /* Adjust this value as needed */}

.body1 {background-color: red;}

/* Style for disabled checkboxes */
.checkbox-format input[type="checkbox"]:disabled + .checkmark {background-color: black; /* Change the background color for disabled checkboxes */}

/* Ensure the white checkmark remains visible on disabled checkboxes */
.checkbox-format input[type="checkbox"]:disabled + .checkmark:after {border-color: white; /* Change the color of the checkmark */}

/* Show active tab content */
.tabcontent.active {display: block;}

/* Style the tab buttons */
.tablink {background-color: #f2f2f2; /* Default background color */
  color: black; /* Default text color */
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;}

/* Style the active tab button */
.tablink.active {background-color: #ccc;
  color: white;}

/* Add this CSS to center the column headers */
#certTable th {text-align: center;}

/* Add this CSS to center the button */
#addCertBtn {margin-left: auto;
    margin-right: auto;
    display: block;}

/* Red border for invalid fields */
.input-error {border: 2px solid red !important;}

/* Yellow background for highlighted fields */
.input-highlight {background-color: yellow; /* Change this to any color */}

/* Red border for new rows (for dynamic rows added to the table) */
.new-row select,
.new-row input[type="date"] {border: 2px solid red;}

/* Styling for the select dropdowns */
select {padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;}

/* Styling for input date fields */
input[type="date"] {padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;}

/* Center the Show On Runs checkbox */
td input[type="checkbox"] {width: 20px;
    height: 20px;
    margin: 0;}

/* Style for the Remove button */
button {padding: 5px 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;}

/* Styling for table rows */
#deptMemberTable tr {background-color: #f9f9f9;
    padding: 10px;}

/* Styling for invalid input fields (if you don't use .input-error) */
select:invalid, input:invalid {border: 2px solid red;}

/* Additional styling for focus on invalid fields */
select:invalid:focus, input:invalid:focus {border: 2px solid red;}

/* ============================ */
/* Layout and Containers */
/* ============================ */

.column4A {display: flex; /* Use flexbox */
    align-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack content vertically */

    
    flex: 1 1 50%; /* Each column takes up 50% of the width */
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensure padding doesn't affect width */



     border: 3px solid grey;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column4,
.column4B {
  padding: 10px;
  margin: 0 auto;
  max-width: 100%;
  overflow-x: hidden;

  display: flex;              /* ✅ enables flexbox layout */
  justify-content: center;    /* ✅ centers child horizontally */
}
.column4C {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  background-color: white;
}





/* Make inputs and selects fill available width inside these columns */
.column4 input,
.column4 select,
.column4B input,
.column4B select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Optional: Tables inside these columns should be responsive too */
.column4 table,
.column4B table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.column4 table th,
.column4 table td,
.column4B table th,
.column4B table td {
  white-space: nowrap;
  padding: 8px;
  text-align: left;
}


.column2A {flex: 0 0 45%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column2 {flex: 0 0 80%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}


.column2a {flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column3e {flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column3b {flex: 0 0 55%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column3c {flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;}

.column3 {flex: 1; /* Let the  3 columns grow and shrink equally */
      width: 30%;
     margin: 10px;
     border: 3px solid #ff0000;
      background-color: #FFFFFF;}

.column {width: 90%;
     margin: 10px auto;
     border: 3px solid #ff0000;
    background-color: #FFFFFF;}

.column-a {width: 90%;
     margin: 10px auto;
     border: 3px solid #ff0000;
    background-color: #FFFFFF;  
     display: flex; /* Use Flexbox */
      justify-content: space-between; /* Distribute space evenly between the columns */
       flex-wrap: wrap; /* Allow items to wrap to the next line */}

.column-list {flex: 1; /* Distribute available space equally among the column-list elements */
    padding: 0 100px; /* Add padding for spacing */
    min-width: 200px; /* Set a minimum width to prevent items from becoming too narrow */}

.container-columns {display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            max-width: 2000px;
            margin: 1px auto;}

.columns-container {display: flex;
  flex-wrap: wrap;}

.column-container {display: flex;
  flex-wrap: wrap;}

.column1 {width: calc(50% - 10px); /* Adjust the width as needed */
    margin-right: 20px; /* Adjust the spacing between columns */
    margin-bottom: 20px; /* Adjust the spacing between rows */}

.column1B {width: 100%; /* Full width for column 3 */}

.column-stacked {flex-basis: 100%; /* Forces the column to take full width */
  margin-top: 20px; /* Adjust as needed */}

.column2,
.column2a,
.column3, 
.column3a,
.column3b,
.column3c {
    flex-basis: 100%;  /* Set the initial size of the columns to 100% in mobile view */
    margin: 10px 0;    /* Adjust margin for mobile view */
    background-image: none;
}



.column-label {font-size: 16px; /* Adjust the font size as needed */
    color: red;
    padding-top: 10px;
    padding-bottom: 10px;}

.container {width: 1000px;
    margin: auto;
    /* border: 3px solid #ff0000; */
    /* background-image: url(../img/BlackDiamond1.png); */}

.flex-container {display: flex;
    justify-content: space-between; /* Adjust as needed for spacing */}

#deptMemberTable td {padding: 8px;}

/* ============================ */
/* Components */
/* ============================ */

.logintext {color: red;
    font-size: 20px;
   /* margin-right: 5px;
    padding-left:5px;
    */}

.status-message {font-size: 40px;
    margin-top: 60px;}

.button1 {font-size: 18px;
    padding: 10px 20px;
    background-color: #0000FF;
    color: #FFFFFF;
    border: none;
    cursor: pointer;}

.success-message {font-size: 40px !important; 
    margin-top: 60px;
    color: white;}

/* ============================ */
/* Form Elements and Inputs */
/* ============================ */

.checkbox-container1 {flex-direction: column;}

.checkbox-container1 > div {flex: 1;
        margin-right: 0;
        margin-bottom: 5px;}

.user-check-form input[type="text"] {width: 60%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;}

.user-check-form input[type="submit"] {width: 20%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 10px;
    background-color: ghostwhite;
    color: black;
    border: none;
    cursor: pointer;}

.user-check-form input[type="submit"]:hover {background-color: darkred;}

}

.form-group {text-align: center;
    margin-bottom: 10px; /* Adjust as needed */}

.form-group label {display: inline-block;
    width: 150px; /* Adjust as needed */
    text-align: right;
    margin-right: 10px; /* Adjust as needed */}

.form-container {text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust the max-width as needed */}



.form-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

/* Default: 3 columns side-by-side */
.column3A {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  box-sizing: border-box;
  background-color: #fff;
  border: 2px solid #ccc;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

/* Make input fields full width */
.column3A input,
.column3A select {
  width: 100%;
  box-sizing: border-box;
}

/* Stack columns on smaller screens */
@media screen and (max-width: 900px) {
  .column4,
  .column4B {
    width: 100% !important;
    flex: 1 1 100%;
    display: block;
  }

  .column4 input,
  .column4 select,
  .column4B input,
  .column4B select {
    width: 100%;
    box-sizing: border-box;
  }

  .column4 table,
  .column4B table {
    width: 100%;
    overflow-x: auto;
    display: block;
  }
}


/* This makes the table scroll horizontally on small screens */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* Minimum width for table to trigger scroll if screen is smaller */
.table-wrapper table {
  width: 100%;
  min-width: 650px; /* You can lower this to like 500px if needed */
  border-collapse: collapse;
}

/* Keep table content from wrapping */
.table-wrapper th,
.table-wrapper td {
  white-space: nowrap;
  padding: 6px;
}










.form-row {display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust this value as needed */}

.form-row label {flex: 0 0 150px;}

.form-row1 label {flex: 0 0 auto; /* Allow label to take its natural width */
    width: 150px; /* Set a fixed width for labels */
    text-align: right; /* Align text of labels to the right */
    margin-right: 10px; /* Add spacing between label and input */}

.form-row1 input {flex: 1; /* Allow input to take remaining space */
    padding-left: 5px; /* Add padding to the left of the input box */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
       margin-left: auto; /* Align input box to the right by pushing it to the end of the flex container */}

.form-row .password-input {flex: 2;
    display: flex; /* Align the input and button horizontally */ 
    align-items: center; /* Center items vertically */}

.form-row .password-input input {flex: 1;}

.form-row input[type="text"],
.form-row input[type="password"] {display: flex; 
align-items: center; 
margin-bottom: 10px; 


/*flex: 1;  */}

.form-row .password-input button {margin-left: 5px; /* Adjust this value to add space between the input and button */
    /* Add any other styling you need for the toggle button */}

.password-input-container {display: flex;
    align-items: center;}

.password-input-container input[type="password"] {flex: 1;}

..form-row .password-input-container .toggle-password {margin-left: 10px; /* Adjust this value as needed  */}

.form-row input,
.form-row select {width: 175px;
    padding: 5px; /* Adjust the padding as needed */}

.form-row textarea {max-width: 400px; /* Set your desired maximum width */  
    height: 30px;
    width: 100%; /* Ensure the textarea takes full width of its container */  
    box-sizing: border-box; /* Include padding and border in the total width and height */  
    overflow-y: hidden; /* Hide vertical scrollbar */}

.checkbox-label {display: flex; 
 /*align-items: center;   */}

.checkbox-container {display: block;
text-align: left;
margin-left: 10px;}

.checkbox-container input[Type="checkbox"] {margin-left:10px;
    display: inline-block;}

.checkbox-container label {color: #FF0000;  /* color red */
    display: inline-block; /* Add this line */}

.checkbox-container1 {display: block;
text-align: left;
margin-left: 10px;}

.checkbox-container1 input[Type="checkbox"] {margin-left:10px;
    display: inline-block;}

.checkbox-container1 label {display: inline-block; /* Add this line */}

.right-aligned-input {margin-right: 10px;
    text-align: right;
    margin-bottom: 10px;}

.center-aligned-input {text-align: center;
    margin-bottom: 10px;}

.center-aligned-input textarea {width: 100%;}

.cert-user-container label {font-weight: bold;
    color: red; /* Set font color to red */
    font-size: 18px;}

.cert-label {/* Add styles for the certification label */
    color: red; /* Example: set text color to red */
    font-weight: bold; /* Example: set font weight to bold */
    /* Add other styles as needed */}

input.no-error-style.input-error {border: 1px solid #ccc; /* or whatever your normal style is */}

.date-label {/* Add styles for the issue date label */
    color: red; /* Example: set text color to blue */
    font-weight: bold; /* Example: set font style to italic */
    /* Add other styles as needed */}

td input[type="checkbox"] {display: block;
    margin: 0 auto; /* Center align checkboxes */}

#firefighterTitles select.input-error,
#firefighterTitles input.input-error {border: 2px solid red !important;}

#requiredInput select.input-error,
#requiredInput input.input-error {border: 2px solid red !important;}

select.input-error, 
input.input-error {border: 2px solid red !important; /* Forces red border */}

select:disabled,
input[type="checkbox"]:disabled {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-text-fill-color: #000 !important;
}

/* ============================ */
/* Tables and Cells */
/* ============================ */

@media (max-width: 1250px) {
  .column,
  .column-a {
    flex-direction: column;
    align-items: center;
  }
}

.user-check-form table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

@media screen and (max-width: 2000px) {
  .centered-content {
    min-width: auto;
    width: 80%;
  }
}

@media screen and (max-width: 1200px) {
  .centered-content {
    min-width: auto;
    width: 80%;
  }
}



.cert-user-container td {text-align: center;
    padding: 5px; /* Adjust padding as needed */}

th {text-align: center; /* Center align all headings */}

/* ============================ */
.tabs {
  display: flex;
  flex-wrap: wrap;         /* Allows buttons to wrap to new lines */
  justify-content: center; /* Keeps them centered */
  gap: 5px;                /* Adds spacing between buttons */
  margin-bottom: 10px;
}

.tablink {
  flex: 1 1 auto;           /* Allow flexible resizing */
  min-width: 120px;         /* Prevent buttons from getting too small */
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Active tab styling */
.tablink.active {
  background-color: #ccc;
  color: white;
}

/* Mobile friendly adjustments */
@media screen and (max-width: 600px) {
  .tablink {
    font-size: 14px;
    padding: 8px 10px;
  }
}

/* ============================ */

.tabcontent {display: none;}

/* ============================ */
/* Messages and Text */
/* ============================ */

.tabs-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* or margin if needed */
}
.tab-button {
    flex: 1 1 auto; /* grow, shrink, basis */
    padding: 8px 12px;
    font-size: 1rem;
    min-width: 100px;
    max-width: 200px;
    text-align: center;
    white-space: nowrap; /* prevents wrapping individual tab text */
}





.centered-wrapperbk {position: relative;
    text-align: center;
    /* background-image: url(../img/BlackDiamond1.png); */}

.centered-wrapper {min-height: 100%;
    display: flex;
    flex-direction: column;}

.centered-wrapper:before {content: "";
    position: relative;
    display: inline-block;
    width: 800px;
    height: 100%;
    vertical-align: middle;}

p {font-size: 40px;
    line-height: 1.6;
    color: #333; /* Text color */}

.main {padding-top: 20px; /* Adjust the value as needed */}

.p1 {font-size: 20px;
    padding: 20px; 
    color: white;}

#passwordFields {transition: all 0.3s ease;}

/* ============================ */
/* Media Queries */
/* ============================ */



/* ============================ */
/* Utility Classes */
/* ============================ */

.centered-button {display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 40px;}

.div1 {text-align: left !important;
    color: white;}

.user-check-form-container {text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust the max-width as needed */}

.user-check-form-centered-content {flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
       max-width: 80%;
       min-width: 1000px; 
     margin: auto; 
    border: 3px solid #ff0000;
  background-image: url(../img/BlackDiamond1.png);}

.user-check-form form {display: flex;
    flex-direction: column;
    gap: 10px; /* Adds spacing between form elements */
    max-width: 400px; /* Limits form width */
    margin: 0 auto; /* Centers the form */}

.user-check-form {display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: green;
    font-weight: bold;}

.user-check-form-red {display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: red;
    font-weight: bold;}

h2.user-check-form {display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: white;
    font-weight: bold;}

.centered-content {flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
       max-width: 80%;
       min-width: 2000px; 
     margin: auto; 
    border: 3px solid #ff0000;
  background-image: url(../img/BlackDiamond1.png);}

.content {max-width: 800px;
    margin: 0 auto;
    padding: 20px;}

.firefighter-column {width: 50%; /* Adjust as needed for column width */}

.edit-form-text {margin-right: 5px; 
 margin-bottom: 10px;}

.box {margin-right: 10px;
    text-align: right;
    margin-bottom: 10px;
    width: 60px;}

.div-menu {display: inline-block; 
vertical-align: top;
 border: 1px solid #ff0000;
 
 margin-left: 20px; /* Adjust the value as needed */
 padding: 10px;}

.div-menu a {padding: 5px; /* Padding for the links inside the div */}

.div-cntr {display: block;
text-align: center;}

.hidden {display: none;}

.cert-user-container {display: grid;
    grid-template-columns: auto auto; /* Adjust column width as needed */
    grid-gap: 10px; /* Adjust gap between columns as needed */}

.cert-user-container > div {display: flex;
    flex-direction: column;}

.center-checkbox {margin: 0 auto; /* Center the checkbox horizontally */
    display: block; /* Ensure the checkbox is displayed as a block element */}

.active-heading-cell {padding-left: 40px; /* Adjust as needed */}

.required-field {background-color: yellow !important; /* Yellow background for required fields */}

.highlight-checkbox {background-color: yellow !important;  /* Background color */}

button:hover {background-color: #c0392b;}

/* Generic styles for readonly lookalikes */
.readonly-select,
.readonly-date,
.readonly-checkbox {
    background-color: transparent !important;
    color: #000 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    border: 1px solid #ccc !important;
    cursor: default !important;
    -webkit-text-fill-color: #000 !important;
}

/* ======================================== */
/* RESET and BASE */
/* ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* outline: 1px solid rgba(255, 0, 0, 0.2); */ /* Uncomment only when debugging */
}

/* ======================================== */
/* TABLE WRAPPER STYLES */
/* ======================================== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1rem; /* Keep consistent across breakpoints */
}

.table-wrapper table {
  background-color: white;
  width: 100%;
  min-width: 650px; /* Adjust as needed */
  border-collapse: collapse;
}

.table-wrapper th,
.table-wrapper td {
  white-space: nowrap;
  padding: 6px;
}

.table-wrapper input,
.table-wrapper select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ======================================== */
/* RESPONSIVE COLUMNS */
/* ======================================== */
@media screen and (max-width: 900px) {
  .column4,
  .column4B {
    width: 100% !important;
    display: block;
    padding: 0;
  }
}

@media screen and (max-width: 600px) {
  .table-wrapper input,
  .table-wrapper select {
    font-size: 14px;
  }

  .centered-button {
    width: 100%;
    margin-top: 10px;
  }
}




/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

/* Table wrapper: scrolls if needed */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  width: 100%;
  min-width: 650px; /* fallback */
  border-collapse: collapse;
}

.table-wrapper th,
.table-wrapper td {
  white-space: nowrap;
  padding: 6px;
}

.table-wrapper input,
.table-wrapper select {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* ✅ added to allow proper shrinking */
  box-sizing: border-box;
  font-size: 14px;
}

/* Sections: make stackable */
.column4,
.column4B {
  padding: 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
}

/* Button */
.centered-button {
  width: 100%;
  margin-top: 10px;
}

/* Responsive behavior */
@media screen and (max-width: 900px) {
  .table-wrapper {
    margin-bottom: 1rem;
  }

  .column4,
  .column4B {
    width: 100% !important;
    padding: 0;
  }
}

@media screen and (max-width: 667px) {
  .table-wrapper table {
    min-width: unset; /* ✅ allow it to shrink naturally */
  }

  .table-wrapper th,
  .table-wrapper td {
    padding: 4px;
    font-size: 13px;
  }

  .tablink {
    font-size: 12px;
    padding: 6px 6px;
  }

  html, body {
    overflow-x: hidden;
  }
}
@media screen and (max-width: 667px) {
  .rotate-tip {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin: 10px 0;
  }
}
 /* Align label and input horizontally */
  .left-aligned-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px !important,
  }
  

  /* Consistent label width for alignment */
  .left-aligned-input label {
    width: 180px;          /* adjust for longest label */
    text-align: right;     /* align text close to input */
    margin-right: 10px;
    font-weight: 600;
    color: #222;
  }

  /* Inputs and selects stay same width */
  .left-aligned-input input,
  .left-aligned-input select {
    flex: 0 0 auto;
    width: 250px;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  /* Optional narrower column container */
  .column2 {
    max-width: 500px;
  }

  /* Stack labels and inputs vertically on small screens */
  @media (max-width: 600px) {
    .left-aligned-input {
      flex-direction: column;
      align-items: flex-start;
    }

    .left-aligned-input label {
      width: auto;
      text-align: left;
      margin-bottom: 4px;
    }

    .left-aligned-input input,
    .left-aligned-input select {
      width: 100%;
    }
  }

  /* Error message text (under the field) */
.error {
    color: #dc3545;          /* red text */
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Highlight invalid fields with red border + light red background */
input.input-error,
select.input-error,
textarea.input-error,
input[type="date"].input-error {
    border: 2px solid #dc3545 !important;   /* bright red outline */
    border-radius: 4px;
    background-color: #ffecec !important;   /* light red/pink background */
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
}



/* ============================ */
/*  Add Inventory — Correct Input Layout */
/* ============================ */

/* Make each left-aligned row work consistently */
#inventoryForm .left-aligned-input {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Label on the left */
#inventoryForm .left-aligned-input label {
    width: 180px;       
    text-align: right;
    margin-right: 10px;
    font-weight: 600;
}

/* Input next to the label */
#inventoryForm .left-aligned-input input,
#inventoryForm .left-aligned-input select {
    flex: 0 0 auto;
    width: 250px;       
    max-width: 100%;
}

/* Helper text below input */
/* Helper text to the RIGHT of the input */
#inventoryForm .left-aligned-input small {
    flex: 0 0 auto;       /* no forced line break */
    margin-left: 10px;    /* space between input and text */
    margin-top: 0;        /* remove upward spacing */
    font-size: 0.85rem;
    color: red !important;
    opacity: 1 !important;
    white-space: nowrap;  /* prevent wrapping */
}


/* Quantity input a bit narrower */
#inventoryForm #quantity {
    max-width: 120px;
}

/* FINAL override for helper text on Add Inventory form */
#inventoryForm .left-aligned-input small,
#inventoryForm .left-aligned-input .form-text,
#inventoryForm .left-aligned-input .text-muted {
    color: red !important;
    opacity: 1 !important;
}

/* =========================== */
/* Generic inline input row    */
/* =========================== */

#inventoryForm .inline-input-row {
    display: flex;
    flex-wrap: nowrap;       /* keep everything on one line */
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Label */
#inventoryForm .inline-input-row label {
    width: 180px;            /* same as your other labels */
    text-align: right;
    margin-right: 10px;
    font-weight: 600;
}

/* Inputs and selects */
#inventoryForm .inline-input-row input,
#inventoryForm .inline-input-row select {
    flex: 0 0 auto;
    margin-right: 10px;
    width: 150px;            /* generic input width */
}

/* If you need smaller fields like qty */
#inventoryForm .inline-input-row .small-field {
    width: 100px !important;
}

/* If you need larger text fields */
#inventoryForm .inline-input-row .large-field {
    width: 250px !important;
}
/* ============================ */
/* Add Inventory outer wrapper  */
/* ============================ */

.inventory-column {
    width: 100% !important;
    max-width: 1200px !important;   /* make it nice and wide; change if you like */
    margin: 20px auto !important;   /* center it on the page */
    padding: 20px !important;
    box-sizing: border-box;

    border: 3px solid #ff0000 !important;  /* 🔴 red border */
    background-color: #ffffff !important;  /* ⚪ white background inside */
}