/* route: Lista della spesa — Blocco 8 · B7B3a. Estratto da spesa.html inline.
   Usa i token --bf-* di bf-home.css. La actionbar/toast fissi si alzano
   sopra la bottom-nav mobile via --bf-mobile-nav-h (0 su desktop). */
[data-route="spesa"].spesa-wrap { max-width: 620px; margin: 0 auto; }
[data-route="spesa"] * { box-sizing: border-box; }

[data-route="spesa"] .intro { color: var(--bf-muted); font-size: .82rem; margin: 0 2px 12px; line-height: 1.45; }

[data-route="spesa"] .tabs { display: flex; gap: 8px; margin-bottom: 12px; }
[data-route="spesa"] .tabs button {
  flex: 1; padding: 11px 6px; border-radius: 13px; cursor: pointer; text-align: center;
  background: var(--bf-surface); border: 1px solid var(--bf-line); color: var(--bf-muted);
  font: 600 .82rem 'Poppins', Arial, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
[data-route="spesa"] .tabs button .n {
  font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--bf-surface-2); color: var(--bf-muted);
}
[data-route="spesa"] .tabs button.on.compra { background: var(--bf-danger-soft); border-color: #e6b3ad; color: #a53a30; }
[data-route="spesa"] .tabs button.on.compra .n { background: var(--bf-danger); color: #fff; }
[data-route="spesa"] .tabs button.on.ho { background: var(--bf-accent-soft); border-color: #a9cfa2; color: var(--bf-accent-2); }
[data-route="spesa"] .tabs button.on.ho .n { background: var(--bf-ok); color: #fff; }

[data-route="spesa"] .toolbar { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; }
[data-route="spesa"] .toolbar .sel-all { font-size: .78rem; color: var(--bf-info); cursor: pointer; background: none; border: none; padding: 4px; font-family: inherit; }
[data-route="spesa"] .toolbar .copia {
  font: 600 .74rem 'Poppins', Arial, sans-serif; color: var(--bf-accent-2); cursor: pointer;
  background: none; border: 1px solid #a9cfa2; border-radius: 10px; padding: 5px 10px;
}
[data-route="spesa"] .toolbar .copia:active { background: var(--bf-accent-soft); }
[data-route="spesa"] .toolbar .conta { font-size: .74rem; color: var(--bf-muted); margin-left: auto; }

[data-route="spesa"] .cat-tit { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bf-faint); margin: 14px 4px 6px; font-weight: 600; }

[data-route="spesa"] .riga {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; margin-bottom: 7px;
  background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: 12px;
  cursor: pointer; user-select: none;
}
[data-route="spesa"] .riga:active { background: var(--bf-surface-2); }
[data-route="spesa"] .riga.sel { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
[data-route="spesa"] .riga .box {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid #b9c4b6; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: #fff;
}
[data-route="spesa"] .riga.sel .box { background: var(--bf-accent); border-color: var(--bf-accent); }
[data-route="spesa"] .riga .info { flex: 1; min-width: 0; }
[data-route="spesa"] .riga .info .nm { font-size: .9rem; font-weight: 500; }
[data-route="spesa"] .riga .info .qt { font-size: .7rem; color: var(--bf-muted); margin-top: 2px; }

/* #vuoto → primitiva globale .bf-empty (B9B) */
body.has-bar [data-route="spesa"] { padding-bottom: 150px; }

[data-route="spesa"] .actionbar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--bf-mobile-nav-h, 0px) + env(safe-area-inset-bottom) + 12px);
  z-index: 90; display: flex; gap: 8px;
  max-width: 620px; margin: 0 auto; padding: 0 14px;
}
[data-route="spesa"] .actionbar button {
  flex: 1; padding: 13px 10px; border: none; border-radius: 16px; cursor: pointer;
  font: 700 .84rem 'Poppins', Arial, sans-serif; color: #fff;
  box-shadow: 0 6px 20px rgba(60, 90, 60, .25);
}
[data-route="spesa"] .actionbar .a-ho { background: linear-gradient(135deg, #2f9e5c, #3ab873); }
[data-route="spesa"] .actionbar .a-compra { background: linear-gradient(135deg, #c0453d, #d6574d); }
[data-route="spesa"] .actionbar .a-del { background: #7a8794; flex: 0 0 46px; padding: 13px 0; }

[data-route="spesa"] #bf-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bf-mobile-nav-h, 0px) + env(safe-area-inset-bottom) + 78px); z-index: 3000;
  background: var(--bf-text); color: #fff; padding: 10px 18px; border-radius: 20px;
  font-size: .82rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
[data-route="spesa"] #bf-toast.show { opacity: 1; }