/* Inbound costing sheet - modelled on the original colour-coded spreadsheet:
   a category section per cost type, each row tinted by its own status, a
   subtotal row closing out each section, then a Total All + Profit bar at
   the bottom of the whole sheet. */

.cost-category { margin: 0 0 var(--sp-4); }
.cost-category-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--soft); border: 1px solid var(--line);
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.cost-category-head h4 { margin: 0; color: var(--navy); font-size: var(--text-base); }
.cost-category-head .cost-category-subtotal { font-weight: 700; color: var(--navy); font-size: var(--text-sm); }

.cost-table-wrap { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: auto; background: #fff; }
.cost-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.cost-table th, .cost-table td { border-bottom: 1px solid var(--line); padding: var(--sp-2); vertical-align: top; }
.cost-table th { background: #fbfbfc; color: var(--muted); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.cost-table input, .cost-table select { height: 34px; padding: 0 var(--sp-2); font-size: var(--text-xs); }
.cost-table tr:last-child td { border-bottom: 0; }

/* status colour is applied to the whole row via a class the status <select> controls */
.cost-row-pending { background: var(--amber-soft); }
.cost-row-confirmed { background: var(--green-soft); }
.cost-row-urgent { background: var(--red-soft); }
.status-select { font-weight: 700; border: 0; background: transparent; }
.cost-row-pending .status-select { color: var(--amber); }
.cost-row-confirmed .status-select { color: var(--green); }
.cost-row-urgent .status-select { color: var(--red); }

.cost-category-add { margin: var(--sp-2) 0 0; }

.cost-summary { margin: var(--sp-5) 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.cost-summary-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); font-weight: 700; }
.cost-summary-row + .cost-summary-row { border-top: 1px solid rgba(255,255,255,.5); }
.cost-summary-row span { font-size: var(--text-sm); }
.cost-summary-row strong { font-size: var(--text-lg); }
.total-row { background: var(--amber-soft); color: #7a5400; }
.input-row { background: #fff; }
.input-row input { max-width: 220px; margin-left: auto; text-align: right; font-weight: 700; height: var(--control-h); }
.profit-row { background: var(--navy-soft); color: var(--navy); }
.profit-row strong.negative { color: var(--red); }

@media (max-width: 980px) {
  .cost-table-wrap { overflow-x: hidden; border: 0; }
  .cost-table { min-width: 0; width: 100%; }
  .cost-table thead { display: none; }
  .cost-table, .cost-table tbody { display: block; width: 100%; }
  .cost-table tr { display: block; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-3); padding: var(--sp-3); background: #fff; box-shadow: var(--shadow-card); }
  .cost-table.cost-row-pending tr, tr.cost-row-pending { background: var(--amber-soft); }
  .cost-table td { display: block; border: 0; padding: var(--sp-2) 0; }
  .cost-table td + td { border-top: 1px solid rgba(0,0,0,.06); }
  .cost-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: var(--sp-1); opacity: .8; }
  .cost-summary-row { flex-direction: column; align-items: stretch; gap: var(--sp-1); text-align: left; }
  .input-row input { max-width: none; text-align: left; margin-left: 0; }
}