/* Stage 1.7: products and mixes pages. */

/* status badges */
.app-status { font-weight: 500; }
.app-status--in_work { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.app-status--curing { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.app-status--rework { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.app-status--ready { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.app-status--defect { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* product card */
.app-product-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
.app-product-good { color: var(--bs-danger-text-emphasis); font-weight: 500; }
.app-product-note { color: var(--bs-secondary-color); }
.app-status-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.app-status-switch-label { font-size: 0.9rem; color: var(--bs-secondary-color); }
.app-status-switch .btn { min-height: 2.5rem; }
.app-product-cost { margin-bottom: 0.75rem; }
.app-product-cost dd { text-align: right; font-variant-numeric: tabular-nums; }
.app-product-cost .app-product-total { font-weight: 600; color: var(--bs-body-color); }
.app-product-hours { font-size: 0.95rem; }
.app-product-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.app-product-head .app-h2 { margin: 0; }
.app-product-head .btn { min-height: 2.5rem; }
.app-product-add { margin-top: 1rem; }
.app-product-add > summary { list-style: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.app-product-add > summary::-webkit-details-marker { display: none; }
.app-product-add[open] > summary { margin-bottom: 1rem; }
.app-product-crumb { margin: 0; padding: 0; border: 0; min-width: 0; }
.app-product-crumb legend { float: none; font-size: 1rem; }

/* material rows (product card, mix components) and mix outputs */
.app-use-rows { display: grid; gap: 0.75rem; }
.app-use-row,
.app-out-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}
.app-product-add .app-use-row { padding: 0; border: 0; background: none; }
.app-use-row .app-use-material,
.app-use-row .app-use-qty,
.app-use-row .app-use-errors,
.app-out-row .app-out-target,
.app-out-row .app-out-value,
.app-out-row .app-use-errors { grid-column: 1 / -1; }
.app-use-row .form-control,
.app-use-row .form-select,
.app-out-row .form-control,
.app-out-row .form-select { min-height: 2.75rem; }
.app-use-row .input-group > .form-select,
.app-out-row .input-group > .form-select { flex: 0 1 45%; max-width: 12rem; }
.app-use-remove { display: flex; justify-content: flex-end; }
.app-use-row .app-use-remove { grid-column: 1 / -1; }
.app-use-remove .btn { min-height: 2.75rem; }
.app-out-main { display: flex; align-items: center; min-height: 2.75rem; }
.app-out-main .form-check { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding-left: 0; }
.app-out-main .form-check-input { margin: 0; float: none; width: 1.25rem; height: 1.25rem; }
.app-use-row [hidden],
.app-out-row [hidden] { display: none !important; }
@media (min-width: 768px) {
  .app-use-row { grid-template-columns: 2.4fr 2fr 1.4fr 1fr auto; }
  .app-use-row .app-use-material,
  .app-use-row .app-use-qty,
  .app-use-row .app-use-remove { grid-column: auto; }
  .app-out-row { grid-template-columns: 2.4fr 2fr auto auto; }
  .app-out-row .app-out-target,
  .app-out-row .app-out-value { grid-column: auto; }
}

.app-mix-split { max-width: 28rem; }
.app-mix-alloc { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.app-mix-alloc legend { float: none; font-size: 1rem; }
.app-mix-alloc .form-check { min-height: 2.25rem; display: flex; align-items: center; gap: 0.5rem; padding-left: 0; }
.app-mix-alloc .form-check-input { margin: 0; float: none; }
.app-mix-split .form-control { min-height: 2.75rem; }

@media (min-width: 768px) {
  .app-filters.app-filters--mixes { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto; }
}