/* Base layout */
body {
  background-color: #0d0d2b;
  color: #f3d4aa;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

/* Headings */
h2 {
  margin-top: 20px;
  color: #f3d4aa;
  font-size: 28px;
  text-align: center;
}

/* Table layout for calculators */
table.calc-table,
#selectOptions {
  width: 40%;
  max-width: 800px;
  margin: 20px auto;
  background-color: #1b1f42;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

#selectOptions {
  width: 50%;
}

table.calc-table th,
table.calc-table td,
#selectOptions th,
#selectOptions td {
  border: 1px solid #2f3266;
  padding: 12px 16px;
  color: #f3d4aa;
}

table.calc-table th,
#selectOptions th {
  background-color: #2a2e5a;
  font-weight: bold;
}

table.calc-table tr:nth-child(even),
#selectOptions tr:nth-child(even) {
  background-color: #20244e;
}

/* Result tables (shared class) */
.results-table {
  width: 50%;
}

.results-table th,
.results-table td {
  border: 1px solid #2f3266;
  padding: 12px 16px;
  color: #f3d4aa;
}

.results-table th {
  background-color: #2a2e5a;
  font-weight: bold;
}

.results-table tr:nth-child(even) {
  background-color: #20244e;
}

.results-table td:nth-child(n+2),
.results-table th:nth-child(n+2) {
  text-align: center;
}

/* Inputs and selects */
select,
input[type="number"] {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  color: #f3d4aa;
  background-color: #2f3266;
  border: 1px solid #000;
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 160px;
}

select:focus,
input:focus {
  outline: none;
  border-color: #6fa3ef;
  background-color: #3a3e7a;
}

/* Narrow selects */
/* select { */
  /* max-width: 125px; */
/* } */

/* Align first and second columns */
td:nth-child(1),
th:nth-child(1) {
  text-align: center;
}

td:nth-child(2),
th:nth-child(2) {
  text-align: left;
  min-width: 200px;
}

/* Corner menu toggle */
#menuToggle {
  display: none;
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 28px;
  color: #f3d4aa;
  background-color: #363b77;
  padding: 5px 10px;
  border: 1px solid #c69da3;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2000;
}

/* Sidebar menu */
#menu {
  position: absolute;
  top: 60px;
  left: 20px;
  background-color: #1b1f42;
  border: none; /* Remove outer border */
  border-radius: 8px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

#menu table {
  border-collapse: collapse;
  width: 160px;
}

#menu th,
#menu td {
  border: 1px solid #2f3266;
  color: #f3d4aa;
  padding: 12px 16px;
  text-align: center;
  background-color: #2a2e5a;
  transition: background-color 0.2s ease;
}

#menu tr:nth-child(even) td {
  background-color: #20244e;
}

#menu a {
  display: block;
  width: 100%;
  color: #f3d4aa;
  text-decoration: none;
}

#menu td:hover {
  background-color: #363b77 !important;  /* uniform highlight color */
  cursor: pointer;
}

#menu td a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Mobile styles */
@media (max-width: 768px) {
  table.calc-table,
  #selectOptions,
  .results-table {
    width: 100%;
    font-size: 14px;
  }

  select,
  input {
    font-size: 14px;
  }

  body {
    padding: 10px;
  }

  #menuToggle {
    display: block;
  }

  #menu {
    transform: translateX(-200px);
  }

  #menu.show {
    transform: translateX(0);
  }

  /* Force title line break on small screens */
  h2 .mobile-break::before {
    content: "\A";  /* line break */
    white-space: pre;
  }
}

#equipmentResults th:nth-child(2),
#equipmentResults td:nth-child(2),
#equipmentResults th:nth-child(3),
#equipmentResults td:nth-child(3) {
  width: 130px;
  min-width: 130px;
  text-align: center;
}

.glacier-table {
  table-layout: fixed;
}

.glacier-table th:nth-child(1),
.glacier-table td:nth-child(1) {
  width: 125px;
  text-align: left;
  padding-left: 16px;
}

.glacier-table th:nth-child(2),
.glacier-table td:nth-child(2) {
  width: 200px;
  text-align: center;
}

/* ===== Equipment tab: small phones ===== */
@media (max-width: 480px) {
  /* Force full-width tables and fixed layout so columns obey widths */
  #equipmentTab .calc-table,
  #equipmentTab .results-table {
    width: 100%;
    table-layout: fixed;
    overflow-x: auto; /* safety net if user zooms */
  }

  /* Slightly tighter padding & font for small screens */
  #equipmentTab .calc-table,
  #equipmentTab .results-table {
    font-size: 14px;
  }
  #equipmentTab .calc-table th,
  #equipmentTab .calc-table td,
  #equipmentTab .results-table th,
  #equipmentTab .results-table td {
    padding: 10px 12px;
  }

  /* Override the global min-width that’s making col 2 too wide */
  #equipmentTab td:nth-child(2),
  #equipmentTab th:nth-child(2) {
    min-width: 140px;   /* down from the global 200px */
    text-align: left;
  }

  /* Results table: keep Minimum/Maximum compact and equal */
  #equipmentResults th:nth-child(2),
  #equipmentResults td:nth-child(2),
  #equipmentResults th:nth-child(3),
  #equipmentResults td:nth-child(3) {
    width: 90px;
    min-width: 90px;
    text-align: center;
  }

  /* Percent column compact too */
  #equipmentResults th:nth-child(4),
  #equipmentResults td:nth-child(4) {
    width: 70px;
    min-width: 70px;
    text-align: center;
  }
}