/* =========================
   Controls card – centered & tidy
   ========================= */

/* Keep your scope */
.inputs-centered {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: block;
}

/* Consistent max width + centering for all field bodies */
.inputs-centered .field-wrap,
.inputs-centered .dd,
.inputs-centered .form-control,
.inputs-centered .input-group,
.inputs-centered .rc-slider,
.inputs-centered .Select,
.inputs-centered .Select__control,
.inputs-centered .Select-control {
  max-width: 320px;            /* NEW */
  margin-left: auto;           /* NEW */
  margin-right: auto;          /* NEW */
  width: 100%;
}

/* Labels */
.inputs-centered label,
.inputs-centered .form-label {
  display: block;
  text-align: center;
  margin-bottom: 10px;          /* UPDATED (12→10) */
  font-weight: 600;
}

/* Inputs – uniform height + centered text */
.inputs-centered input[type="number"],
.inputs-centered input[type="text"],
.inputs-centered .form-control {
  height: 40px;
  padding: 6px 10px;
  text-align: center;
}

/* InputGroup: make add-ons match height & center text */
.inputs-centered .input-group .form-control {
  text-align: center;
}
.inputs-centered .input-group-text {          /* NEW */
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  font-weight: 600;
}

/* Dash dropdown (react-select v1/v3 safe) */
.inputs-centered .dd .Select-control,
.inputs-centered .dd .Select__control {
  min-height: 40px;
  height: 40px;
}
.inputs-centered .dd .Select-placeholder,
.inputs-centered .dd .Select--single > .Select-control .Select-value,
.inputs-centered .dd .Select__value-container {
  line-height: 38px;
  text-align: center;
}

/* Slider + caption */
.inputs-centered .rc-slider { margin: 6px 8px 0; }     /* keep */
.inputs-centered .waste-label {
  display: block;
  margin-top: 6px;                                     /* UPDATED (4→6) */
  text-align: center;
  color: #6b7280;
  font-size: 12px;                                     /* NEW */
}

/* Optional: slightly larger slider handle for easier grab */
.inputs-centered .rc-slider-handle {                   /* NEW */
  width: 14px; height: 14px; margin-top: -5px;
}

/* Checkbox rows tighter and centered */
.inputs-centered .form-check {
  margin: 6px 0;                                       /* UPDATED (4→6) */
  max-width: 320px; margin-left: auto; margin-right: auto;  /* NEW */
}

/* Button row */
.inputs-centered .action-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* =========================
   Cards / tables
   ========================= */
.page-card, .subcard {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.do-title { font-weight: 800; letter-spacing: .2px; }
.kv-table td { padding: 6px 10px; }

.customer-preview-table thead th {
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.customer-preview-table td:nth-last-child(-n+2),
.customer-preview-table th:nth-last-child(-n+2) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.customer-preview-table tr:hover { background: #fafafa; }
.preview-totalbar {
  display: flex; justify-content: flex-end; gap: 24px; padding: 10px 12px;
  background: #f7f7f9; border-radius: 8px; font-weight: 700;
}

/* =========================
   Small-screen polish
   ========================= */
@media (max-width: 576px) {
  .inputs-centered .input-group,
  .inputs-centered .dd,
  .inputs-centered .form-control,
  .inputs-centered .rc-slider {
    max-width: 100%;              /* let it breathe on phones */
  }
  .inputs-centered { padding-top: 8px !important; padding-bottom: 8px !important; }
}