/* Ingredient tubs (slice 1). App palette from styles.css; only tub-specific
   layout lives here. Fill colours are keyed to the classes tubFillClass() returns. */

.tub-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tub-tab { background:none; border:0; color:var(--text-secondary); font:inherit; font-size:14px;
  padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tub-tab:hover { color:var(--text-primary); }
.tub-tab[aria-selected="true"] { color:var(--text-primary); border-bottom-color:var(--accent-text); font-weight:600; }

.tub-sub { color:var(--text-secondary); font-size:13.5px; margin:0 0 18px; }

.filterbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.filterbar .eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.filter-pill { background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary);
  font:inherit; font-size:13px; padding:5px 12px; border-radius:999px; cursor:pointer; }
.filter-pill:hover { border-color:var(--border-strong); color:var(--text-primary); }
.filter-pill[aria-pressed="true"] { background:var(--accent-bg); border-color:var(--accent-text); color:var(--accent-text); font-weight:600; }
.filter-pill .n { opacity:.6; margin-left:6px; font-size:12px; }
.filter-pill.flag[aria-pressed="true"] { background:var(--warning-bg); border-color:var(--warning-text); color:var(--warning-text); }

.tub-count { color:var(--text-muted); font-size:13px; margin:14px 0 10px; }

.tub-list { display:flex; flex-direction:column; gap:8px; }
.tub-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tub-card.alert { border-left:3px solid var(--danger-text); }
.tub-card.watch { border-left:3px solid var(--warning-text); }
/* The app shell (.page) is capped at 480px, so this is a single, fluid layout at
   every width — no wide desktop variant to overflow it. Two rows: tub + name +
   caret on top, reserve count + facts below (facts span so long lines never clip). */
.tub-row { display:grid; grid-template-columns:52px 1fr 18px;
  grid-template-areas:"tub name car" "res facts facts"; gap:12px 16px;
  align-items:center; padding:12px 16px; cursor:pointer; user-select:none; }
.tub-row .tubcell { grid-area:tub; } .tub-row .namecell { grid-area:name; min-width:0; } .tub-row .caret { grid-area:car; }
.tub-row .reserve-cell { grid-area:res; } .tub-row .facts { grid-area:facts; }
.tub-row:hover { background:var(--surface-1); }
.tub-name { font-size:16px; font-weight:600; }
.tub-meta { color:var(--text-muted); font-size:12.5px; margin-top:3px; }
.chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.chip { font-size:11px; letter-spacing:.03em; padding:2.5px 7px; border-radius:4px; border:1px solid; background:transparent; }
.chip.d { color:var(--danger-text); border-color:var(--danger-text); }
.chip.w { color:var(--warning-text); border-color:var(--warning-text); }
.chip.i { color:var(--text-secondary); border-color:var(--border-strong); }

.reserve-cell { text-align:center; }
.reserve-cell .lbl { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
.reserve-cell .lbl.w { color:var(--warning-text); }
.reserve-cell .lbl.d { color:var(--danger-text); }

.facts { display:flex; flex-direction:column; gap:2px; text-align:right; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.facts .big { font-size:15px; font-weight:600; }
.facts .lo { color:var(--text-secondary); font-weight:400; }
.facts .dim { color:var(--text-muted); font-size:12.5px; }
.facts .bad { color:var(--danger-text); }
.facts .warnc { color:var(--warning-text); }

.caret { color:var(--text-muted); font-size:12px; transition:transform .15s; }
.tub-card.open .caret { transform:rotate(90deg); }
.detail { display:none; border-top:1px solid var(--border); background:var(--surface-1); padding:14px 16px 16px; }
.tub-card.open .detail { display:block; }
.dtitle { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin:0 0 8px; }

/* Eight columns can't fit the 480px page, so the table reflows to one stacked
   card per tub with an inline label on each field — no horizontal scroll. */
.tubtable-wrap { overflow-x:visible; }
table.tubtable, table.tubtable tbody, table.tubtable tr, table.tubtable td { display:block; }
table.tubtable { width:100%; }
table.tubtable thead { display:none; }
table.tubtable tr { border:1px solid var(--border); border-radius:8px; background:var(--surface-2); padding:7px 11px; margin-bottom:8px; }
table.tubtable td { border:0; padding:3px 0; font-size:12.5px; }
table.tubtable td::before { content:attr(data-label); display:inline-block; min-width:92px; vertical-align:top;
  color:var(--text-muted); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; }
.loc-edit { width:auto; max-width:180px; font:inherit; font-size:12.5px; padding:3px 6px; vertical-align:middle;
  background:var(--surface-1); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); }
.loc-edit:focus { outline:none; border-color:var(--accent-text); }
.loc-edit::placeholder { color:var(--text-muted); }
.state-badge { font-size:11px; padding:2px 7px; border-radius:4px; border:1px solid var(--border-strong); color:var(--text-secondary); }
.state-badge.on { color:var(--accent-text); border-color:var(--accent-text); }
.state-badge.bad { color:var(--danger-text); border-color:var(--danger-text); }
.state-badge.soon { color:var(--warning-text); border-color:var(--warning-text); }
.note { color:var(--text-muted); font-size:12px; display:block; margin-top:2px; }
.reconcile { color:var(--text-secondary); font-size:12.5px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }

.estrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border); font-size:13px; color:var(--text-secondary); }
.estrow b { color:var(--text-primary); }

/* Spot check */
.sc-note { color:var(--text-secondary); font-size:13px; margin:0 0 14px; }
/* Two rows within the 480px page: tub + flavour + last-weighed on top; the
   gross-weight input and the computed New level below — both stay visible. The
   tabular header doesn't map onto this, so it's hidden and the row self-describes. */
.sc-head { display:none; }
.sc-row { display:grid; grid-template-columns:44px 1fr 120px;
  grid-template-areas:"ic name prev" "ic input calc"; gap:6px 12px; align-items:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin-bottom:8px; }
.sc-row > div:nth-child(1) { grid-area:ic; }
.sc-row > div:nth-child(2) { grid-area:name; min-width:0; }
.sc-row > .sc-prev { grid-area:prev; }
.sc-row > div:nth-child(4) { grid-area:input; }
.sc-row > .sc-calc { grid-area:calc; }
.sc-row input { width:100%; }
.sc-prev { font-size:12.5px; color:var(--text-secondary); text-align:right; }
.sc-prev b { color:var(--text-primary); font-weight:600; }
.sc-calc { font-size:13px; color:var(--text-muted); text-align:right; }
.sc-calc.done { color:var(--accent-text); font-weight:600; }

/* Receive */
.rcv-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:8px; }
.rcv-row { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; }
.rcv-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; align-items:end; }
.rcv-code { font-family:var(--font-mono); font-size:14px; color:var(--text-primary); }
.rcv-note { font-size:12.5px; margin-top:8px; }
.rcv-note .d { color:var(--danger-text); }
.rcv-note .w { color:var(--warning-text); }
.rcv-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; color:var(--text-secondary); }

.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.hint { color:var(--text-muted); font-size:12.5px; }
.hidden { display:none; }