bulk request

src/index.css

@@ -1599,3 +1599,136 @@ main {
   margin-top: 2px;
   flex: none;
 }
+
+/* ── Bulk selection ────────────────────────────────────────────────────────
+   A row of checkboxes with no visible action reads as broken, and a bar that
+   shouts at rest pushes the list itself down the page. So it sits quiet until
+   something is picked, then takes the brand tint and shows its actions.      */
+.bulkbar {
+  padding: 10px 14px;
+  border: 1px solid var(--color-line);
+  border-radius: 12px;
+  background: var(--color-surface);
+  transition: background .15s ease, border-color .15s ease;
+}
+
+.bulkbar[data-active='yes'] {
+  border-color: var(--color-brand);
+  background: var(--color-brand-tint);
+}
+
+.bulkbar-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Sized up from the browser default: these are hit on a phone, and a 13px
+   target next to a 40px product thumbnail is the hardest thing on the row. */
+.bulkbar-all input[type='checkbox'],
+.bulkbar-tick {
+  width: 17px;
+  height: 17px;
+  flex: none;
+  accent-color: var(--color-brand);
+  cursor: pointer;
+  margin: 0;
+}
+
+.bulkbar-all input[type='checkbox']:focus-visible,
+.bulkbar-tick:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bulkbar { transition: none; }
+}
+
+/* The tick on a catalogue card. Top-left: the photo arrows own the right edge
+   and the "Imported" badge owns the top-right. Given its own opaque chip so it
+   stays visible against a light product photo. */
+.pcard-tick {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 3;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-line);
+  cursor: pointer;
+}
+
+.pcard-tick input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--color-brand);
+  cursor: pointer;
+}
+
+.pcard-tick:focus-within {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 1px;
+}
+
+/* ── Bulk stock request ────────────────────────────────────────────────────
+   One line per product, each with its own quantity: a shop asks for two crates
+   of oil and twenty packets of biscuits, so a single figure for the batch
+   would be ignored or wrong. Scrolls internally so the send button stays put
+   however many products were picked. */
+.bulkreq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 46vh;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.bulkreq-line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid var(--color-line);
+  border-radius: 10px;
+  background: var(--color-surface);
+}
+
+.qty-step {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--color-line);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-ink-2);
+  cursor: pointer;
+}
+
+.qty-step:hover { border-color: var(--color-brand); color: var(--color-brand); }
+.qty-step:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }
+
+.qty-input {
+  width: 46px;
+  height: 28px;
+  text-align: center;
+  border: 1px solid var(--color-line);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-ink-1);
+  font: 500 13px/1 var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+
+.qty-input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }