/* ===========================
   Material Cost (page scoped)
   =========================== */

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Headings */
.page-wrap h1,
.page-wrap h2 {
  text-align: center;
  color: #2C3E50;
  margin: 0.5rem 0 1rem;
}

/* Unit toggle */
.page-wrap .unit-toggle {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 18px;
}
.page-wrap .unit-toggle label {
  color: #2C3E50;
  cursor: pointer;
  font-weight: 600;
}
.page-wrap .unit-toggle input { margin-right: 6px; }

/* ===========================
   Input tables (inch/metric)
   =========================== */
.page-wrap .form-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #F5F5F5;
  table-layout: fixed;
}
.page-wrap .form-table th,
.page-wrap .form-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
  color: #000;
  vertical-align: middle;
  white-space: nowrap;
}
.page-wrap .form-table th {
  background-color: #4A6274;
  color: #FFF;
  position: sticky;
  top: 0;
  z-index: 1;
}
.page-wrap .form-table tbody tr:nth-child(even) { background: #fafafa; }

/* Inputs/selects */
.page-wrap form input,
.page-wrap form select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #111;
}
.page-wrap form input[readonly] { background-color: #e9ecef; }
.page-wrap form input:disabled {
  background-color: #eee;
  color: #666;
  cursor: not-allowed;
}

/* ===========================
   Buttons
   =========================== */
.page-wrap .button-row,
.page-wrap #table-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  flex-wrap: wrap;
}
.page-wrap button,
.page-wrap .btn {
  padding: 10px 16px;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background: #34495E;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.page-wrap button:hover,
.page-wrap .btn:hover { filter: brightness(1.05); }

/* ===========================
   Correction table
   =========================== */
.page-wrap #correctionTableSection { display: none; } /* toggled by JS */

.page-wrap #costCorrectionTable {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}
.page-wrap #costCorrectionTable th,
.page-wrap #costCorrectionTable td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  white-space: nowrap;
}
.page-wrap #costCorrectionTable th {
  background: #4A6274;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}
.page-wrap #costCorrectionTable tbody tr:nth-child(even) { background: #fafafa; }

/* Editing state */
.page-wrap #costCorrectionTable td[contenteditable="true"] {
  background: #fff;
  outline: none;
}
.page-wrap #costCorrectionTable td.edited-local {
  outline: 2px solid #1f8e2d;
}

/* ===========================
   Legends
   =========================== */
.page-wrap .legends {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 10px;
}
.page-wrap .legend-item {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 3px;
  border: 1px solid #999;
}
.page-wrap .green  { background-color: #c8f7c5; } /* < 3 months */
.page-wrap .yellow { background-color: #fff7c2; } /* 3–6 months */
.page-wrap .orange { background-color: #ffe0b2; } /* 6–9 months */
.page-wrap .gray   { background-color: #e9ecef; } /* > 9 months */

/* Age tints applied by JS to correction cells */
.page-wrap td.edited-0-3  { background-color: #c8f7c5; }
.page-wrap td.edited-3-6  { background-color: #fff7c2; }
.page-wrap td.edited-6-9  { background-color: #ffe0b2; }
.page-wrap td.edited-9    { background-color: #e9ecef; }

/* Age tints applied by JS to price output inputs */
.page-wrap input.age-tint-0  { background-color: #f0fff0; }
.page-wrap input.age-tint-3  { background-color: #fffbeb; }
.page-wrap input.age-tint-6  { background-color: #fff3e6; }
.page-wrap input.age-tint-9  { background-color: #f5f6f7; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
  .page-wrap { padding: 12px; }
  .page-wrap .unit-toggle { flex-wrap: wrap; }
  .page-wrap .form-table th,
  .page-wrap .form-table td { padding: 8px 6px; }
}