/* ── Placement dialog on a phone (docs/plans/shopping-to-cellar-flow-2.md Phase 1, F2/F14) ─────────────────────────────
 * A centred card on a wide screen, a bottom sheet under 600px (the same shape as the cart review sheet, so the flow feels like one
 * tool). Every choice row stacks: the wine's name in full, a full-width select, then the reason as a sentence. The controls a person
 * has to operate are at least 44px, and a select is 16px (below that iOS zooms the page when it takes focus). The title and the
 * pinned actions stay on screen; only the body scrolls. */

/* Choice rows, at every width: one scan direction (name, control, reason). */
.batch-placement-review-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.batch-placement-review-item:first-child { border-top: none; }
.batch-placement-review-item .batch-placement-wine { overflow-wrap: anywhere; }
.batch-placement-zone-select,
.batch-placement-bulk-select {
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem 0.6rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.batch-placement-review-hint {
  font-size: 0.85rem;
  color: var(--text-secondary, var(--text-muted));
}

/* The bulk row: one tap to keep them all, or one choice for them all. */
.batch-placement-bulk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--bg-slot);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.batch-placement-bulk-hold {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.batch-placement-bulk-hold:hover { border-color: var(--text-muted); }
.batch-placement-bulk-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary, var(--text-muted));
}
.batch-placement-bulk-pick {
  display: flex;
  gap: 8px;
}
.batch-placement-bulk-pick .batch-placement-bulk-select { flex: 1 1 auto; min-width: 0; width: auto; }
.batch-placement-bulk-apply {
  flex: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.batch-placement-bulk-apply:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 600px) {
  #batch-placement-modal {
    align-items: flex-end;
  }
  #batch-placement-modal .batch-placement-modal {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 100%);
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.2s ease-out;
  }
  .batch-placement-body {
    overscroll-behavior: contain;
  }
  .batch-placement-actions {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .batch-placement-actions > button {
    flex: 1 1 auto;
  }
  .batch-placement-zone-select {
    min-height: 44px;
  }
  .batch-placement-bulk-select {
    min-height: 44px;
  }
  .batch-placement-bulk-hold {
    min-height: 44px;
  }
  .batch-placement-bulk-apply {
    min-height: 44px;
  }
  .batch-placement-confirm-btn {
    min-height: 44px;
  }
  .batch-placement-cancel-btn {
    min-height: 44px;
  }
  .batch-placement-close {
    min-height: 44px;
    min-width: 44px;
  }
}

/* A wine whose earlier choice named a place that no longer exists (flow 2, F3): what the dialog says changed, and the marks on the rows. */
.batch-placement-stale-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--color-warning-ink);
  background: var(--color-warning-bg);
  color: var(--color-warning-ink);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.batch-placement-stale-mark {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--color-warning-ink);
}