/*
 * Modulo Acquisti (purchases#new / #index): pannello di composizione con picker
 * fornitore/prodotto, lista righe e differenza % vs ultimo costo (pill sempre visibile,
 * alert oltre la soglia). Regole design system: una property per riga, niente box-shadow.
 */

/* Il limite globale di .app-main (760px) per gli acquisti e' troppo stretto: la tabella
 * (fornitore, prodotto+codice, prezzi, diff, date) ha bisogno di respirare su desktop. */

.app-main:has(.purchases-page) {
  max-width: 1280px;
}

.purchases-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--gray-text);
}

.purchase-composer {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.composer-grid + .composer-grid {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
}

@media (min-width: 900px) {
  .composer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .composer-grid-who {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

/* Scelta in evidenza sotto ai picker: nome + codice articolo + ultimo costo. Il codice deve
 * saltare all'occhio, soprattutto quando i campi li ha compilati Marina. */

.composer-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.75rem;
  background: var(--azure-soft);
  border: 1px solid var(--azure);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-small);
}

.composer-chosen-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.composer-chosen-meta {
  font-size: 0.8rem;
  color: var(--gray-text);
}

.code-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--navy);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #ffffff;
  white-space: nowrap;
}

.composer-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.composer-field-add {
  justify-content: flex-end;
}

.composer-input {
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--bg);
  font-size: 0.95rem;
  font-family: inherit;
}

.composer-input:focus {
  background: var(--surface);
  border-color: var(--navy);
}

.composer-quantity-row,
.composer-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.composer-quantity-row .composer-input,
.composer-price-row .composer-input {
  flex: 1;
  min-width: 0;
}

.composer-unit {
  flex: 0 0 auto;
  width: 6.5rem;
}

.composer-sublabel {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-text);
}

.composer-omaggio-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.composer-omaggio {
  flex: 0 0 auto;
  width: 6.5rem;
}

.composer-omaggio-suffix {
  font-size: 0.9rem;
  color: var(--gray-text);
}

.composer-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.composer-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Cosa manca per aggiungere la riga: il bottone spento non lascia piu' indovinare. */
.composer-missing {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--gray-text);
}

.composer-missing:empty {
  display: none;
}

/* Picker (componente riusabile shared/_picker) */

.picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.picker-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-text);
}

.picker-input {
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--bg);
  font-size: 0.95rem;
  font-family: inherit;
}

.picker-input:focus {
  background: var(--surface);
  border-color: var(--navy);
}

.picker-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 12;
}

.picker-list {
  margin: 0.3rem 0 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-small);
  max-height: 18rem;
  overflow-y: auto;
}

.picker-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.picker-option:hover {
  background: var(--azure-soft);
}

.picker-option-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.picker-option-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.picker-empty {
  margin: 0.3rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: var(--gray-text);
}

/* Differenza % vs ultimo costo: pill sempre visibile, alert oltre soglia. */

.purchase-diff {
  display: inline-block;
  min-width: 3.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--gray-text);
}

.purchase-diff-ok {
  background: #e2f5e9;
  border-color: #bfe6cd;
  color: #176b32;
}

.purchase-diff-alert {
  background: #fdecea;
  border-color: var(--danger);
  color: var(--danger);
}

/* Tabelle acquisti: le tabelle larghe scorrono nel PROPRIO contenitore, mai fuori dalla
 * card (bug reale: la colonna date usciva dal riquadro). */

.table-scroll {
  margin-top: 1.25rem;
  overflow-x: auto;
}

.purchases-table {
  width: 100%;
  margin-top: 0;
}

.purchases-table th,
.purchases-table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

/* Titoli di colonna piu' visibili e dati chiave in evidenza. */

.purchases-table th {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy);
}

.purchases-table .col-quantity,
.purchases-table .col-count {
  font-weight: 600;
}

.purchases-table .col-quantity,
.purchases-table .col-dates {
  white-space: nowrap;
}

.purchases-table .col-dates {
  min-width: 10.5rem;
}

.purchases-table .col-diff {
  min-width: 6rem;
}

.purchases-table .col-supplier {
  max-width: 12rem;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.purchases-table .col-product {
  min-width: 14rem;
}

.purchase-product-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.purchases-table .code-badge {
  margin-top: 0.2rem;
}

/* Righe alternate marcate (lo stacco tra un ordine/acquisto e l'altro si vede subito)
 * e hover LEGGERO e coerente: il base --azure e' troppo forte e perdeva per specificita'
 * contro le righe in alert — meta' righe si tingevano e meta' no (bug segnalato).
 * Solo desktop: sotto i 600px il layout impilato di application.css azzera i fondi td. */

@media (min-width: 601px) {
  /* Alternanza CONTRASTATA (l'azure-soft base era quasi impercettibile). */
  .purchases-table tbody tr:nth-child(even) td {
    background: #ddeefb;
  }

  .purchases-table tbody tr:hover td {
    background: #bfe2f7;
  }

  /* Riga con prezzo in alert: tutta la riga segnala, non solo la pill — e in hover si
   * scurisce nella SUA tinta, mai a chiazze. */

  .purchases-table tbody tr:has(.purchase-diff-alert) td {
    background: #fdf1f0;
  }

  .purchases-table tbody tr:has(.purchase-diff-alert):hover td {
    background: #f9e2df;
  }
}

.purchase-composer form:has(tbody tr) .purchases-hint {
  display: none;
}

.purchases-actions {
  display: none;
}

.purchase-composer form:has(tbody tr) .purchases-actions {
  display: flex;
}

.purchases-table .col-select {
  width: 2.5rem;
}

.purchase-select {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--navy);
}

.purchases-dispatch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.history-download-link {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--navy);
}

.purchases-registered,
.purchases-orders {
  margin-top: 2rem;
}

.purchases-registered h3,
.purchases-orders h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: var(--navy);
}

/* Filtri dello storico ordini: una riga compatta sopra la tabella. */

.purchases-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0.75rem 0 0.25rem;
}

.purchases-filters .composer-input {
  min-height: 40px;
}

.purchases-filter-q {
  flex: 1 1 14rem;
  max-width: 20rem;
}

.purchases-filter-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-text);
}

.purchases-filter-reset {
  font-size: 0.85rem;
  color: var(--navy);
}

/* Riga ordine nello storico: numero compatto, colonne che respirano senza overflow. */

.purchases-orders .col-order {
  width: 4.5rem;
  white-space: nowrap;
}

.purchases-orders td {
  padding: 0.7rem 0.85rem;
}

/* Cella azioni: MAI display flex su un <td> (esce dal layout tabellare e spacca
 * l'allineamento della riga in hover — bug reale). Allineamento con text-align. */

.purchases-order-actions {
  text-align: right;
  white-space: nowrap;
}

.btn-order {
  display: inline-block;
  min-height: 36px;
  margin-right: 0.6rem;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

/* Storico Ergon al centro: link articolo verso la griglia settimanale (badge + nome),
 * sezioni secondarie richiudibili per il flusso di carico dell'app. */

.history-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.history-product-link:hover .purchase-product-name {
  text-decoration: underline;
}

.purchases-secondary {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.purchases-secondary > summary {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

/* Dentro il details il titolo della sezione registrati e' ridondante col summary. */

.purchases-secondary .purchases-registered h3 {
  display: none;
}