.calculator-container {
  max-width: 100%;
  margin: 0 auto;
}

.results-section {
  padding: 1em;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  /* Option 1: Add scrollbar to results-section if table overflows */
  /* overflow-x: auto; */ /* Uncomment this if you prefer scrollbar on results-section itself */
}

/* Wrapper for the table to handle overflow if needed */
.table-wrapper {
  overflow-x: auto; /* This will add a horizontal scrollbar ONLY if the table is too wide */
  max-width: 100%; /* Ensure the wrapper itself doesn't overflow .results-section */
}

.calculator-container table { /* Applies to both calc-table and time-loss-table */
  border-collapse: collapse;
  width: 100%;
  /* Key property for controlling table width behavior */
  table-layout: fixed;
}

.calculator-container table th,
.calculator-container table td {
  padding: 0.5em;
  text-align: left;
  /* Allow long words to break and wrap */
  word-wrap: break-word; /* Older browsers */
  overflow-wrap: break-word; /* Modern browsers */
  /* You might also consider hyphens for better visual breaking */
  /* hyphens: auto; */
}

/* Specific styling for the main calculation table if needed (though covered by above) */
.calc-table {
  /* width: 100%; already set by .calculator-container table */
  /* table-layout: fixed; already set by .calculator-container table */
}


.calculator-container input[type="text"] {
  text-align: left;
  padding: 0.5625rem 0.25rem;
  border-collapse: collapse;
  border-spacing: 0;
  direction: ltr;
  font: inherit;
  line-height: normal;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  border-radius: 0;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  width: 200px; /* This is a fixed width, ensure it fits in narrower contexts or make it responsive */
  max-width: 100%; /* Add this so it can shrink if container is too small */
  border-color: #ccc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-family: inherit;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  box-sizing: border-box;
  transition: border-color 0.15s linear, background 0.15s linear;
}

.calculator-container input[type="submit"] {
  direction: ltr;
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  line-height: 1;
  display: inline-block;
  font-family: var(--main-font);
  text-transform: uppercase;
  padding: 1em !important;
  background: #086993;
  border: none !important;
  color: #fff !important;
  width: 200px; /* Fixed width, consider responsiveness */
  max-width: 100%; /* Add this */
  margin-bottom: 1em;
}

.calc-table-header {
  background: #3c6991;
}

.calc-table-header tr:nth-child(even){ 
 background: #F9F9F9;
}

.calc-table tbody tr:nth-child(even){
	background: #F9F9F9;
}

.calc-table-header > tr > th > b {
  background: #3c6991;
  color: white;
}

.time-loss-table-container {
  padding: 5px; /* Add padding here */
  /* The content of this th (the nested table) will also benefit from word-wrap */
}

.time-loss-table,
.projection-section { /* .projection-section might not be a table */
  border: 1px solid #ddd;
  background-color: white;
  /* width: 100%; and table-layout: fixed; are inherited from .calculator-container table */
}

.time-loss-table td {
  text-align: center;
  /* word-wrap/overflow-wrap is inherited from .calculator-container table td */
}

.time-loss-table tr:first-child td {
  text-align: center;
}

.mini-calc-input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 15px;
}

@media (max-width: 600px) {
	.mini-calc-input {
		flex-direction: column !important;
	}	
}