/* Shopping list view — group headers, big check boxes, bought section.
   Uses app.css variables; integrator links this in index.html after app.css. */

/* header subtotal under the h1 */
.shop-subtotal { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; }

/* item rows: [48px check] [name/qty/job] [price + HD link] */
.shop-row {
  display: flex; align-items: center; gap: 2px;
  min-height: 60px; padding: 4px 12px 4px 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.shop-check {
  flex-shrink: 0; min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.shop-box {
  width: 26px; height: 26px;
  border: 2px solid var(--muted); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 17px; line-height: 1; font-weight: 700;
  background: var(--card);
}
.shop-check:active .shop-box { border-color: var(--accent); }
.shop-main {
  flex: 1; min-width: 0; min-height: 44px;
  display: block; text-align: left; padding: 8px 0;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
div.shop-main { cursor: default; }
.shop-side { display: flex; flex-direction: column; align-items: flex-end; }
.shop-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.shop-hd {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}

/* job sub-group within a customer: a bold, unclickable job header with its items tabbed
   under it (left rule), so a customer with several jobs to shop for reads clearly — you
   see which items belong to which job. The header is plain text, not a control. */
.shop-job-head { font-size: 14px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; padding: 0 2px; }
.shop-job-items { margin-left: 11px; padding-left: 13px; border-left: 2px solid var(--line); }

/* bought section (collapsed behind the chip) — muted, struck-through */
.shop-bought-toggle { margin-top: 16px; }
.shop-row.bought { background: transparent; border-style: dashed; }
.shop-row.bought .shop-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-row.bought .row-title { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.shop-row.bought .shop-price { color: var(--muted); }

/* add-item sheet: catalog suggestions + linked-material hint */
.shop-sugg { display: flex; flex-direction: column; margin: -6px 0 12px; }
.shop-sugg:empty { display: none; }
.shop-sugg-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 4px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; color: inherit; cursor: pointer;
}
.shop-sugg-row:last-of-type { border-bottom: 0; }
.shop-linked { font-size: 13px; font-weight: 600; color: var(--accent); margin: -6px 0 12px; }
.shop-linked:empty { display: none; }
select.input.full { width: 100%; }