/* ============================================================
   Waste tracking, everywhere EXCEPT the weighbridge (that has
   its own surface — see tip.css).

   Three places: the seating card on a job record, the waste
   settings blocks, and the compliance queue on the office page.
   ============================================================ */

/* ---- Seating (POPs): stages 1 and 2, on the job record ---- */
.waste-seating-card{margin-top:18px}
.waste-seating-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.waste-seating-stage{border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  background:var(--paper)}
.waste-seating-stage h3{font:700 11px var(--font-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.waste-seating-stage .quiet-copy{font-size:12px;margin:0 0 10px}
.waste-seating-choice{display:flex;gap:7px;flex-wrap:wrap}
.waste-seating-choice .button{flex:1;min-width:110px;padding:10px 8px;font-size:13px}
/* Amber, not green: seating found on site is the answer that costs money. The
   .button-warn modifier itself lives in skip-planner.css beside its siblings
   .button-primary and .button-danger -- generic UI vocabulary defined in a
   feature stylesheet is what made every side-rail tooltip render as a
   full-height panel (see the .tip-capture note in tip.css). */
.waste-seating-detail{display:grid;gap:10px;margin-top:11px}
.waste-seating-detail label{display:grid;gap:5px;font:700 11px var(--font-body);
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.waste-seating-detail input,.waste-seating-detail select{border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;background:var(--paper);color:var(--ink);font-size:13px}
/* "Customer said no, driver found two armchairs" is the case the whole feature
   exists to catch, so it is called out rather than reconciled away. It uses the
   app's own `notice notice-warning` pair, not a private class: this file
   briefly carried a .form-error/.form-warning of its own, which was a second
   spelling of something the product already had (skip-planner.css .notice). */
.waste-seating-stage .notice{margin:10px 0 0;font-size:12px;line-height:1.45}

/* ---- Waste settings ---- */
.waste-settings-list{display:grid;gap:10px;margin:14px 0}
.waste-settings-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;background:var(--paper)}
.waste-settings-row b{font-size:13.5px}
.waste-settings-row code{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.waste-settings-row .waste-settings-flags{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.waste-settings-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.waste-settings-form label{display:grid;gap:5px;font:700 11px var(--font-body);
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.waste-settings-form input,.waste-settings-form select{border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;background:var(--paper);color:var(--ink);font-size:13px}
.waste-settings-form .waste-check-field{display:flex;flex-direction:row;align-items:center;
  gap:8px;font-weight:650;align-self:end;text-transform:none;letter-spacing:0;font-size:12.5px;
  color:var(--ink)}
.waste-settings-form .waste-check-field input{width:16px;height:16px;accent-color:var(--yellow)}
/* Settings that have no safe default and must not be given one. */
.waste-setting-unset{border-color:var(--amber);background:var(--amber-bg)}
.waste-setting-note{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--muted);line-height:1.5}

/* ---- The chase banner on the dashboard ----
   Amber by default (a countdown), red once a deadline is missed. It replaced
   an informational banner that was styled green-when-tidy; tidiness was never
   the point. */
.waste-chase-banner{display:block;width:100%;text-align:left;border:1px solid var(--rust);
  background:var(--rust-bg);color:#7a2a20;border-radius:11px;padding:12px 15px;font-size:13px;
  margin:0 0 18px;cursor:pointer}
.waste-chase-banner:hover{border-color:#8f2d22}
.waste-chase-banner b{font-size:14px;font-family:var(--font-mono)}
.waste-chase-banner.complete{border-color:var(--amber);background:var(--amber-bg);color:#6d4d17}

/* ---- Compliance queue ---- */
.waste-compliance{margin-top:18px}
.waste-compliance-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;margin:14px 0}
.waste-tile{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--paper)}
.waste-tile b{display:block;font:700 26px var(--font-mono);line-height:1.1}
.waste-tile span{font-size:11.5px;color:var(--muted)}
/* The one that matters. A wrong weight is a correction; a load nobody
   recorded at all is the actual exposure. */
.waste-tile.alarm{border-color:var(--rust);background:var(--rust-bg)}
.waste-tile.alarm b{color:var(--rust)}
.waste-tile.warn{border-color:var(--amber);background:var(--amber-bg)}
.waste-tile.warn b{color:#6d4d17}
.waste-overdue-list{display:grid;gap:8px;margin:14px 0}
.waste-overdue-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-left:4px solid var(--amber);border-radius:11px;padding:11px 14px;background:var(--paper)}
.waste-overdue-row.overdue{border-left-color:var(--rust);background:var(--rust-bg)}
/* Block, not inline: the address and the detail line below it are a <b> and an
   <i> inside one <span>, and left inline they render as
   "Albany Road, Earlsdon4 yard collection" with no break. */
.waste-overdue-row b{display:block;font-size:13px}
.waste-overdue-row i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.waste-overdue-due{margin-left:auto;text-align:right;flex:none;font-family:var(--font-mono);
  font-size:12px;color:var(--muted)}
.waste-overdue-due b{display:block;font-size:13px;color:var(--ink)}
.waste-overdue-row.overdue .waste-overdue-due b{color:var(--rust)}
.waste-blocker-list{margin:0;padding-left:17px}
.waste-blocker-list li{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:4px}

@media(max-width:700px){
  .waste-seating-stages{grid-template-columns:1fr}
  .waste-settings-form{grid-template-columns:1fr}
  .waste-overdue-row{flex-direction:column;align-items:flex-start}
  .waste-overdue-due{margin-left:0;text-align:left}
}