/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the shopping list adds on top of styles.css, written with the tokens of design-system.css and never
 * with values of its own. The tests read this file with the others: a rule written twice anywhere,
 * a token used and not defined, a design system token written again, all fail.
 */

.shopping-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shopping-box { display: flex; flex-direction: column; gap: var(--space-3); }

.shopping-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.shopping-row__main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.shopping-row--recent { opacity: 0.6; background: var(--surface-2); }

.shopping-row__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.shopping-row__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }

.shopping-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.shopping-row__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.shopping-chip {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-caption);
}

.shopping-chip--auto_zero { background: var(--state-expired-soft); border-color: var(--state-expired); }
.shopping-chip--auto_min_stock { background: var(--state-expiring-soft); border-color: var(--state-expiring); }

.shopping-card { border-left: 4px solid var(--state-ok); background: var(--state-ok-soft); }
.shopping-card__text { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }