/* === Base Styling === */
body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  padding: 1.25rem;
}

h1 {
  font-size: 1.75rem; /* ~28px */
  font-weight: bold;
  color: #000;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 1.375rem; /* ~22px */
  font-weight: bold;
  color: #000;
  margin: 1.25rem 0 0.625rem;
}

p {
  font-size: 0.875rem; /* ~14px */
  color: #000;
}

.p-bold {
  font-weight: bold;
}

label, th, td {
  font-size: 1rem; /* ~16px */
  color: #000;
}


/* === Table Styling === */
table {
  margin-bottom: 1.25rem; /* 20px */
  border-collapse: collapse;
}

table, th, td {
  border: 0.0625rem solid #ccc; /* 1px */
  padding: 0.3125rem; /* 5px */
  text-align: center;
}

/* === Fit Highlight Classes === */
th.fit-ok-header {
  background-color: #b2f2bb;
  font-weight: bold;
}

th.fit-fail-header {
  background-color: #ffc9c9;
  font-weight: bold;
}

.fit-ok {
  background-color: #b2f2bb;
}

.fit-ok-strong {
  background-color: #2b8a3e;
  color: white;
  font-weight: bold;
}

.fit-fail {
  background-color: #ffc9c9;
}

.fit-fail-strong {
  background-color: #c92a2a;
  color: white;
  font-weight: bold;
}

.table-border-ok {
  border: 0.1875rem solid #2b8a3e; /* 3px */
}

.table-border-fail {
  border: 0.1875rem solid #c92a2a; /* 3px */
}

.fit-header {
  background-color: #d0ebff;
  font-weight: bold;
}

/* === Unit Toggle Buttons === */
.unit-toggle {
  display: inline-flex;
  margin-bottom: 0.625rem; /* 10px */
  border: 0.0625rem solid #888; /* 1px */
  border-radius: 0.3125rem; /* 5px */
  overflow: hidden;
}

.unit-toggle button {
  padding: 0.25rem 0.5rem; /* 4px 8px */
  border: none;
  background-color: #e9ecef;
  color: #666;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-right: 0.0625rem solid #ccc; /* 1px */
}

.unit-toggle button:last-child {
  border-right: none;
}

.unit-toggle button.active {
  background-color: #fff;
  color: #000;
}

.unit-toggle button:hover:not(.active) {
  background-color: #dee2e6;
}

/* === Input Field with Unit Label === */
.input-with-unit {
  display: inline-block;
  position: relative;
  margin: 0.3125rem; /* 5px */
}

.input-with-unit input[type=number] {
  width: 12ch;
  padding-right: 4ch; /* space for the unit */
  box-sizing: border-box;
}

.input-with-unit .unit {
  position: absolute;
  right: 0.625rem; /* 10px */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.9em;
  color: #555;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* === Loadable Status Box === */
.form-container {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.form-left {
  display: flex;
  flex-direction: column;
}

.inputs-inline {
  display: flex;
  flex-wrap: nowrap;
}

.inline-status-box {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
  font-size: 1rem;
  white-space: nowrap;
  line-height: 1.4;
}

.inline-status-box .status-main,
.inline-status-box .status-lower {
  font-weight: normal; /* Only value is normal */
  background: none;
  color: #000;
}