* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f3f2f2;
  color: #fff;
  padding: 20px;
  background-repeat: no-repeat; /* Prevents repeating the logo */
  background-position: right 20px top -65px; /* Adjust this to raise the logo upwards */
  background-size: auto 240%; /* Adjust the logo size to fit without overflowing */
  z-index: 1000; /* Makes sure header stays on top */
}

.about-link {
  color: #b22222;         
  font-style: italic;
  font-size: 20px;
  margin-left: 40px;
  text-decoration: none;
}

.about-link:hover {
  text-decoration: underline;
  color: #004466;
}

.button-link1, .button-link2{
  display: inline-block;
  font-style: normal;
  font-size: 16px;
  text-align: center;
  width:160px; 
  padding: 10px 16px;
  background-color: #747474; /* Grey */
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: normal;
  border: none;
  cursor: pointer;
}
.button-link1:hover, .buttonlink2:hover {
  background-color: #d9d9d9;
}

.button-link1 {
  margin-left:2rem; }

.button-link2 {
  margin-left:30px;}


#output-dashboard {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#output-dashboard.show {
  opacity: 1;
}

.hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
}

.visible {
  display: block;
}

h1 {
  color: rgb(4, 67, 49);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 140%;
}

#notes {
  width: 100%;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  box-sizing: border-box;
   
}

.notes-header {
  font-style: italic;
  font-weight: bold;
  font-size: 10px;
}

.notes-subtext {
  margin: 2px 0;
   font-size: 10px;
  font-style: italic;
}


.logo-right {
  position: fixed;
  top: -73px;
  right: 6px;
  height: 225px;
  width: 250px;
  z-index: 1001;
}

.logo-far-right {
  position: fixed;
  top: -64px;
  right: 170px; /* Adjust for desired spacing */
  height: 225px;
  width: 250px;
  z-index: 1001;
}

.header-logo-container {
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.header-logo-container img {
  height: 225px;
  width: 250px;
  object-fit: contain; /* Keeps image quality intact */
}


#input_form,
#references,
#output-placeholder,
.output_graphic_container,
#logout,
.output-section, {
  display: none;
}

#login-wrapper {
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  background-color: transparent; /* optional */
}

#login-box {
  border: 2px solid #000;
  border-radius: 12px;
  width: 320px;
  margin: 40px 0 0 40px;
  padding: 20px;
  background-color: #b22222;
  box-sizing: border-box;
  align-self: flex-start; /* if inside flex container */
}

#login-section {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#login-section input,
#login-section button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 2px solid rgb(12, 0, 0);
  border-radius: 10px;
  box-sizing: border-box;
  margin-botton:1px;
}

#login-section button {
  background-color: #333;
  color: white;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

#login-section button:hover {
  background-color: #d43f00; /* Slightly darker on hover */
}

#login-section form {
  margin: 0;
  padding: 0;
}

#login-link a {
  color: white;
  text-decoration: underline;
}

main {
  margin-top: 100px; /* add some margin to the top of the main content */
  color: rgb(0, 0, 0);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 85%;
  border: 2px solid rgb(3, 66, 37);
}

/*updated */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Input narrow, output wider */
  gap: 20px;
  padding: 20px;
  padding-top:10px;
}

/*output section presentation*/


.output_graphic_container {
  gap: 10px;
  pointer-events: none;
  margin-left:5rem;
  margin-bottom:5rem;
}

#Title_wheel {
  color: rgb(4, 67, 49);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 150%;
  padding:2rem;
}

#output-placeholder {
  color: #666;
  font-style: italic;

  justify-content: center;   /* Horizontal centering */
  align-items: center;       /* Vertical centering */
  flex-direction: column;    /* Keeps text and image stacked vertically */
  min-height: 300px;         /* Optional: ensures there's space to center */
  text-align: center;        /* Optional: centers text inside */
}

#output-results {
  transition: opacity 0.3s ease;
}

* {
  box-sizing: border-box;
}

.results-row1,
.results-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.output-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.output-banner {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  height: 60px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
   border-left: 6px solid #b22222;
}

.input-banner {
  position:relative;
  padding 0 1rem;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  height: 60px; /* Match output banner height */
   border-left: 6px solid #b22222;
  background-color:#f5f5f5
}

.section-banner {
  width: 100%;
  margin: 0;              /* reset default h2 margin */
  padding: 0 1rem;        /* horizontal padding only */
  box-sizing: border-box;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #f5f5f5;
  color: #333;
}

#input_form {
  position: relative;
 margin-top:10px;
}

.form-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.input-section {
  border-right: 1px solid #ccc;
  padding-right:1rem;
}

.box-title {
  background-color: #b1b1b1;
  color: white;
  outline: 1px solid #ccc; /* See exact box size */
  font-size: 1.2rem !important;
  padding: 0.6rem 1rem !important;
  font-weight: bold;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  line-height: 1.2;
  height: 2.5rem; /* Let it size naturally */
  white-space: nowrap; /* Prevent wrapping if you want a single line */
  overflow: hidden;
  display: flex;
  /* NO flex changes here */
}

.help-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: 6px;
  color: #b22222;
  vertical-align: middle;
  white-space: nowrap; /* Prevent wrapping */
}

.help-icon .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.help-text {
  display: none;
  position: absolute; /* or fixed if you want it to stay in viewport */
  z-index: 9999; /* ensure it floats above graphs/tables */
  width:500px; 
  max-width: 90vw;
  background: #f2bfbf;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 6px;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

 .table-box {
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 180px;
  overflow: hidden;
  padding: 1rem;
  border-radius: 12px;
}

.box-title {
  margin: 0;
}

.results-row1
.results-row2,
.results-row3,
.results-row4 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 1rem;
  padding-top: 10px;
}

.results-row1
.results-row2,
.results-row3,
.results-row4 {
  align-items: stretch;
}

.results-row1 >div,
.results-row2 > div,
.results-row3 > div,
.results-row4 > div {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  min-height: 180px;
  overflow: visible;
  margin-top:1rem;
}

.result-text-box,
.table-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px;
}

.chart-box {
  display: flex;
  flex-direction: column;
  height: 300px; /* ✅ Fixed height */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

@media (max-width: 768px) {
  .chart-box {
    height: 220px;
  }
}
@media screen and (max-width: 768px) {
  td {
    max-width: 120px;
    font-size: 0.8rem;
  }
}
canvas {
  width: 100%;
  height: 100%;
  margin: 0; /* centers both horizontally & vertically */
  padding: 10;
  display: block;
  box-sizing: border-box;
}

.chart-canvas-wrapper {
  flex: 1; /* take all available space under the title */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8; /* more vertical space */
  position:relative;
  overflow: hidden;
  border-radius: 12px;
}

.table-box {
   display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 'top' isn't valid here */
  width: 100%;
}

/* centers the table*/
.table-box table {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Bar chart canvas sizing */
#barchart_strip,
#barchart_pile,
#soilreuseChart_materials,
#soilreuseChart_processes {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#stripDoughnutChart,
#pileDoughnutChart {
  display: block;
  margin: auto;
  max-width: 220px;
  max-height: 220px;
  padding-top: 0;
  margin-top: 5; /* Removes vertical spacing above the canvas */
}

table {
  margin-bottom: 5px; /* Reduces space below the input table */
}

/* Table styling */
table {
  width: 100%;
  margin: 0;
  border: 2px solid;
  border-collapse: separate;
  background-color: rgb(243, 242, 242);
  table-layout: auto; /* Columns adjust based on content */
}

/* Header and cell styling */
th,
td {
  text-align: left;
  border: 0px solid #ccc;
  padding: 4px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* First column: allow wrapping */
td:nth-child(1),
th:nth-child(1) {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Second column: right-align content */
td:nth-child(2),
th:nth-child(2) {
  text-align: right;
}
/* third column: right-align content */
td:nth-child(3),
th:nth-child(3) {
  text-align: right;
}

/* Number input styling in second column */
td:nth-child(2) input[type="number"] {
  text-align: right;
  width: 100%;
  max-width: 120px;
  padding: 4px 8px;
  box-sizing: border-box;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.results-header {
  display: flex;
  justify-content: space-between; /* space between h2 and button */
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc; /* optional: visual separation */
}

.cell-value {
  display: block; /* or flex if needed */
  max-width: 100%; /* allows it to fill its container */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.cell-value {
  min-width: 0;
  flex-shrink: 1;
}

#optimumTable, #comparisonTable {
  width: 80%;
  max-width:100%;
  box-sizing: border-box; /* Ensures padding/border don't exceed container */
  padding-top: 10px;
  padding-right:10px;
  border: 2px solid;
  border-collapse: separate;
  border-radius: 12px;
  background-color: #fcf1f1;
  margin: 10px auto; /* centers the table horizontally */
  table-layout: auto;
}

#resultstable {
  th:nth-child(1),
  td:nth-child(1) {
   /* width: 180px; /* First column width */
    text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  }

  th:nth-child(2),
  td:nth-child(2) {
    /*width: 40px; /* Second column width */
    padding: 2px;
    text-align: center;
  }
  
  th:nth-child(3),
  td:nth-child(3) {
    /*width: 40px; /* Third column width */
    padding: 2px; /* Adjust padding as needed */
    text-align: center;
  }

  #resultstable td:nth-child(2) .cell-value,
  #resultstable td:nth-child(3) .cell-value {
  display: inline-block;
  width: 100%;
  text-align: center;
  }

  #resultstable th,
  #resultstable td {
  width: auto; /* Let content define width */
  min-width: 40px; /* Prevent collapse */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  }
  
  /* Set the width of each column */
  th,
  td {
    padding: 1%;
    vertical-align: middle; /* Align inputs/select vertically in the middle */
  }
}

#geology_table {
  margin: 0; /* Removes space around the table */
  border-top: 2px solid #080808; /* Top border for the entire table */
  border-left: 2px solid #050505; /* Left border for the entire table */
  border-right: 2px solid #050505; /* Right border for the entire table */
  border-bottom: none; /* Remove bottom border */
  border-collapse: collapse;
  background-color:rgb(243, 242, 242);
  table-layout: fixed; /* Makes the columns have consistent widths */
}
#subsoil_table {
  margin: 0; /* Removes space around the table */
  border-left: 2px solid #050505; /* Left border for the entire table */
  border-right: 2px solid #050505; /* Right border for the entire table */
  border-top: none; /* Remove bottom border */
  border-collapse: collapse;
  background-color:rgb(243, 242, 242);
  table-layout: fixed; /* Makes the columns have consistent widths */
}

#soil_waste_heading_table {
  margin: 0; /* Removes space around the table */
  border-left: 2px solid #050505; /* Left border for the entire table */
  border-right: 2px solid #050505; /* Right border for the entire table */
  border-bottom: none; /* Remove bottom border */
  border-collapse: collapse;
  background-color: rgb(243, 242, 242);
  table-layout: fixed; /* Makes the columns have consistent widths */
}

#waste_heading_table {
  margin: 0; /* Removes space around the table */
  border-left: 2px solid #050505; /* Left border for the entire table */
  border-right: 2px solid #050505; /* Right border for the entire table */
  border-bottom: none; /* Remove bottom border */
  border-top: none;
  border-collapse: collapse;
  background-color: rgb(243, 242, 242);
  table-layout: fixed; /* Makes the columns have consistent widths */
}
#soil_waste_table {
  margin: 0; /* Removes space around the table */
  border-left: 2px solid #050505; /* Left border for the entire table */
  border-right: 2px solid #050505; /* Right border for the entire table */
  border-top: none; /* Remove bottom border */
  border-collapse: collapse;
  background-color: rgb(243, 242, 242);
  table-layout: fixed; /* Makes the columns have consistent widths */
}

/* Apply to all input fields within both tables */
#soil_waste_table input,
#waste_heading_table input {
  width: 100%; /* Ensures inputs take up full width of their cell */
  padding: 8px; /* Adjust padding to make them look uniform */
  margin: 0; /* Remove any margins to avoid extra space around inputs */
  font-size: 14px; /* Ensure consistent font size */
  box-sizing: border-box; /* Include padding and border in the total width */
}

/* Define column widths for both tables (5 columns) */
#waste_heading_table td:nth-child(1),
#soil_waste_table td:nth-child(1),
#waste_heading_table th:nth-child(1),
#soil_waste_table th:nth-child(1) {
  width: 20%; /* Adjust the width for column 1 */
}

#waste_heading_table td:nth-child(2),
#soil_waste_table td:nth-child(2),
#waste_heading_table th:nth-child(2),
#soil_waste_table th:nth-child(2) {
  width: 20%; /* Adjust the width for column 2 */
}

#waste_heading_table td:nth-child(3),
#soil_waste_table td:nth-child(3),
#waste_heading_table th:nth-child(3),
#soil_waste_table th:nth-child(3) {
  width: 20%; /* Adjust the width for column 3 */
}

#waste_heading_table td:nth-child(4),
#soil_waste_table td:nth-child(4),
#waste_heading_table th:nth-child(4),
#soil_waste_table th:nth-child(4) {
  width: 20%; /* Adjust the width for column 4 */
}

#waste_heading_table td:nth-child(5),
#soil_waste_table td:nth-child(5),
#waste_heading_table th:nth-child(5),
#soil_waste_table th:nth-child(5) {
  width: 20%; /* Adjust the width for column 5 */
}
/* Optional to prevent overflow of text inside cells */
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Add space between the columns */
}

button {
  background-color: #b22222; /* Red */
  border: none;
  color: white;
  padding: 15px 42px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px; /* Rounded corners */
  margin-top: 10px;
  margin-left: auto; /* Center the button horizontally */
  margin-right: 10px; 
}

.button-wrapper {
  text-align: right; /* Aligns the button to the right */
}
.button-wrapper button {
  display: inline-block; /* Keeps it from stretching */
}

.calculate-button {
  width: 160px; /* or whatever width you want */
}

button#add_row {
  background-color: #b22222; /* Red */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 4px; /* Rounded corners */
  /*  margin: 0px 275px;*/
  cursor: pointer;
}

#download_pdf {
  background-color: #b22222;
  width:160px;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right:10px;
  margin-top:0px;
  min-width:160px;
}

#download_pdf:hover {
  background-color: #d43f00; /* ✅ Darker color on hover */
}

.delete_button {
  background-color: #b22222;
  border: none;
  color: white;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  margin-top:-5px;
  vertical-align: top;
}



/* Ensure all form elements have the same padding and font size */

input[type="text"],input[type="number"],
select {
  background-color: #fff; /* white */
  margin: 0; /* Ensure no margin causing misalignment */
  display: inline-block; /* Ensures it behaves like a block-level element */
  color: #1a1a1a; /* Dark text color */
  padding: 4px 8px; /* Padding for better spacing */
  border: 1px solid #ccc; /* black border */
  border-radius: 4px; /* Rounded corners */
  font-size: 14px; /* Consistent font size */
  width: 100%; /*ensure they fill the container */
  height: 30px; /* Set a consistent height for both input and select */
  line-height: 22px; /* Adjust line height for better alignment */
  box-sizing: border-box; /* Include padding in the element’s total width and height */
  appearance:none;
  text-align: right; /* Align the content inside input boxes to the right */
}

select {
  background-color: #fff; /* white */
  margin: 0; /* Ensure no margin causing misalignment */
  display: inline-block; /* Ensures it behaves like a block-level element */
  color: #1a1a1a; /* Dark text color */
  padding: 4px 8px; /* Padding for better spacing */
  border: 1px solid #ccc; /* black border */
  border-radius: 4px; /* Rounded corners */
  font-size: 14px; /* Consistent font size */
  width: 100%; /*ensure they fill the container */
  height: 30px; /* Set a consistent height for both input and select */
  line-height: 22px; /* Adjust line height for better alignment */
  box-sizing: border-box; /* Include padding in the element’s total width and height */
  appearance:none;
  text-align: right; /* Align the content inside input boxes to the right */
  max-width: 120px;
}

/* Override for selects inside #subsoil_table */
#subsoil_table select {
  max-width: 200px;
}


/* Make selects look consistent across browsers */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 30px; /* space for the arrow */
}

#input_table select,
#foundation_table select {
  width: 100%;
  height: 30px; /* Set height of select to match input fields */
  padding: 5px; /* Match the padding of inputs */
  font-size: 14px; /* Same font size as inputs */
  border-radius: 4px; /* Rounded borders */
  border: 1px solid #ccc;
  box-sizing: border-box; /* Include padding in element’s width */
  margin: 0;
  border-collapse: collapse;
}

table#geology_table select {
  width: 75%;
  height: 30px; /* Set height of select to match input fields */
  padding: 5px; /* Match the padding of inputs */
  font-size: 14px; /* Same font size as inputs */
  border-radius: 4px; /* Rounded borders */
  border: 1px solid #ccc; /* Same green border as inputs */
  box-sizing: border-box; /* Include padding in element’s width */
  margin: 0;
  border-collapse: collapse;
}

table#soil_waste_table select {
  width: 95%;
  height: 30px; /* Set height of select to match input fields */
  padding: 5px; /* Match the padding of inputs */
  font-size: 14px; /* Same font size as inputs */
  border-radius: 4px; /* Rounded borders */
  border: 1px solid #ccc; /* Same green border as inputs */
  box-sizing: border-box; /* Include padding in element’s width */
  margin: 0;
  border-collapse: collapse;
}

/* Ensure number inputs have similar height as text and select elements */
input[type="number"] {
  height: 30px; /* Match height to make them consistent */
  line-height: 18px; /* Match line height for consistency */
}

#logout {
  display: none; /* ✅ Hidden initially */
  padding: 10px 20px;
  font-size: 16px;
  background-color: #b22222;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0px; /* Move up by 5px */
  margin-right:10px;
  width:160px;
}


#logout:hover {
  background-color: #d43f00; /* ✅ Darker color on hover */
}

#references {
  float: left;
  width: 30%;
  padding: 5px;
}

#reference_table td {
  text-align: left; /* Aligns all td content to the left by default */
}

#reference_table span {
  display: inline-block; /* Make sure span elements behave like block elements */
}

/* Style for #reference_table */
#reference_table {
  width: 110%; /* Adjust to your desired pixel width */
   table-layout: auto;
  color: #333; /* Dark text color */
  background-color: #f3f2f2;

  line-height: 85%; /* Match line height for consistency */
  font-size: 11px; /* Same font size as inputs */
  /*margin: 0 auto; /* Centers the table horizontally */
}

/* Set column width for the first column of #output_table */
#reference_table th:nth-child(1),
#reference_table td:nth-child(1) {
  width: 450px; /* Set width for the first column */
  text-align: left;
}

/* Set column width for the second column of #output_table */
#reference_table th:nth-child(2),
#reference_table td:nth-child(2) {
  width: 200px; /* Set width for the second column */
  text-align: left;
}



#reference_table td {
  padding: 2px;
  vertical-align: top;
}

select#strip_reinforced {
    padding-right: 25px;
}