/* ==========================================================================
   Stili di vista
   ========================================================================== */

/* --------------------------------------------------------- Griglie ------- */
.grid { display: grid; gap: var(--s-4); }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--main { grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1080px) { .grid--main { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-3); }
.stack--lg { gap: var(--s-6); }

/* ========================================================== DASHBOARD ==== */
.hero-bar {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-ink-900);
  color: #F2F4F8;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .hero-bar { background: var(--bg-raised); border: 1px solid var(--border-subtle); }
/* Un solo segno grafico: una barra di colore, non una sfumatura */
.hero-bar__glow {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); pointer-events: none;
}
.hero-bar h2 { color: #FFF9F0; font-size: var(--fs-xl); }
.hero-bar__sub { font-size: var(--fs-md); color: rgba(246,239,227,0.68); margin-top: 3px; }

.kpi {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.kpi:hover, button.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.kpi__label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 580; color: var(--text-secondary);
}
.kpi__val {
  font-family: var(--font-display);
  font-size: var(--fs-3xl); font-weight: 660;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-2); line-height: 1;
}
.kpi__val small { font-size: var(--fs-lg); font-weight: 600; color: var(--text-tertiary); }
.kpi__foot { display: flex; align-items: center; gap: 5px; margin-top: var(--s-2); font-size: var(--fs-xs); }
.kpi--accent { background: var(--brand-faint); border-color: var(--brand-soft); }
.kpi--alert { border-color: var(--st-alert-line); }
.kpi__spark { position: absolute; right: 0; bottom: 0; opacity: 0.5; pointer-events: none; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 620; font-variant-numeric: tabular-nums; }
.delta--up { color: var(--c-green-700); }
.delta--down { color: var(--c-red-700); }
[data-theme="dark"] .delta--up { color: var(--st-ready-fg); }
[data-theme="dark"] .delta--down { color: var(--st-alert-fg); }

/* Lista operativa compatta */
.op-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast);
  width: 100%; text-align: left;
}
.op-row:last-child { border-bottom: 0; }
.op-row:hover { background: var(--bg-hover); }
.op-row__mark {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
/* Spesso resi come <span>: senza display:block finirebbero sulla stessa riga */
.op-row__title { display: block; font-size: var(--fs-md); font-weight: 570; }
.op-row__sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 1px; }

/* Checklist onboarding */
.checklist-card { background: var(--brand-faint); border-color: var(--brand-soft); }
.check-item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%; text-align: left;
}
.check-item:last-child { border-bottom: 0; }
.check-box {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border-radius: 6px; border: 1.6px solid var(--border-strong);
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--dur-base) var(--ease-out);
}
.check-item.is-done .check-box { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }
.check-item.is-done .check-item__title { color: var(--text-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.check-item__title { display: block; font-size: var(--fs-md); font-weight: 560; }
.check-item__sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 1px; }

/* ============================================================= TAVOLI ==== */
.floor-toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex: none;
}
.floor-wrap {
  flex: 1; min-height: 0; overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0) 0 0 / 24px 24px,
    var(--bg-sunken);
  padding: var(--s-6);
}
.floor {
  position: relative;
  margin: 0 auto;
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--sh-md);
  min-height: 300px;
}
.floor__label {
  position: absolute; top: var(--s-4); left: var(--s-5);
  font-size: var(--fs-2xs); font-weight: 660; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-tertiary);
  pointer-events: none;
}

.tbl-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  border: 2px solid var(--st-done-line);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
  user-select: none;
  box-shadow: var(--sh-xs);
}
.tbl-node:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--sh-md); z-index: 5; }
.tbl-node--round { border-radius: 50%; }
.tbl-node--square { border-radius: var(--r-md); }
.tbl-node--rect { border-radius: var(--r-md); }
.tbl-node--bar { border-radius: var(--r-sm); }
.tbl-node__label {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 680; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tbl-node__seats { font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.tbl-node__amt { font-size: 10.5px; font-weight: 680; font-variant-numeric: tabular-nums; }

.tbl-node[data-state="libero"] { border-style: dashed; border-color: var(--border-default); color: var(--text-tertiary); background: transparent; }
.tbl-node[data-state="occupato"] { border-color: var(--st-new-line); background: var(--st-new-bg); color: var(--st-new-fg); }
.tbl-node[data-state="preparazione"] { border-color: var(--st-prep-line); background: var(--st-prep-bg); color: var(--st-prep-fg); }
.tbl-node[data-state="pronto"] { border-color: var(--st-ready-line); background: var(--st-ready-bg); color: var(--st-ready-fg); }
.tbl-node[data-state="pagamento"] { border-color: var(--st-plum-line); background: var(--st-plum-bg); color: var(--st-plum-fg); }
.tbl-node[data-state="richiesta"] { border-color: var(--st-alert-line); background: var(--st-alert-bg); color: var(--st-alert-fg); --pulse-c: rgba(224,62,81,0.45); }
.tbl-node[data-state="prenotato"] { border-color: var(--border-strong); border-style: dotted; background: var(--bg-inset); color: var(--text-secondary); }

.tbl-node__badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  background: var(--c-red-700); color: #fff;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.tbl-node__badge--brand { background: var(--brand); }
.tbl-node__people {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  display: flex; padding: 1px 3px; border-radius: var(--r-full);
  background: var(--bg-surface); box-shadow: var(--sh-xs);
}
.tbl-node.is-editing { cursor: grab; }
.tbl-node.is-dragging { cursor: grabbing; z-index: 20; transform: scale(1.06); box-shadow: var(--sh-lg); }

.floor-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-secondary); }
.floor-legend span { display: inline-flex; align-items: center; gap: 5px; }
.floor-legend i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid; }

/* Sessione tavolo (drawer) */
.sess-hero {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
}
.sess-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.sess-money__cell { padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.sess-money__lbl { display: block; font-size: var(--fs-2xs); font-weight: 620; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); }
.sess-money__val { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 660; font-variant-numeric: tabular-nums; margin-top: 3px; }

.guest-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.guest-row + .guest-row { margin-top: var(--s-2); }
.guest-row__name { display: block; font-size: var(--fs-md); font-weight: 580; }
.guest-row__sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); }
.guest-row.is-paid { background: var(--st-ready-bg); border-color: transparent; }
.guest-row.is-idle { border-style: dashed; }

.line-item { display: flex; gap: var(--s-3); padding: var(--s-2) 0; align-items: flex-start; }
.line-item__qty {
  min-width: 24px; height: 22px; padding: 0 5px; flex: none;
  border-radius: 6px; background: var(--bg-inset);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.line-item__name { display: block; font-size: var(--fs-md); font-weight: 540; }
.line-item__mods { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.line-item__price { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.line-item__price.is-void { text-decoration: line-through; color: var(--text-tertiary); font-weight: 500; }
.line-item.is-void { opacity: 0.6; }
.line-item.is-void .line-item__name { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Attribuzione: chi paga quella riga. Cliccabile, ma discreta. */
.line-item__attr {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 1px 6px 1px 4px;
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--text-secondary); background: var(--bg-inset);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.line-item__attr:hover { background: var(--brand-soft); color: var(--text-brand); }
.line-item__attr .ic { opacity: 0.7; }

.guest-row.is-left { opacity: 0.55; }

/* =============================================================== ORDINI == */
.kanban {
  flex: 1; min-height: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  padding: var(--s-4) var(--s-5) var(--s-5);
  overflow-x: auto;
}
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); } }

.kcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.kcol__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 2px solid var(--kc, var(--border-default));
  flex: none;
}
.kcol__title { font-size: var(--fs-sm); font-weight: 680; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.kcol__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-3) 2px var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.kcol__empty {
  border: 1.5px dashed var(--border-default); border-radius: var(--r-md);
  padding: var(--s-5); text-align: center;
  font-size: var(--fs-xs); color: var(--text-tertiary);
}

.ocard {
  flex: none; /* dentro una colonna flex le card non devono comprimersi */
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--oc, var(--border-default));
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  animation: card-in var(--dur-slow) var(--ease-out);
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.ocard:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.ocard.is-late { border-color: var(--st-alert-line); box-shadow: 0 0 0 1px var(--st-alert-line), var(--sh-sm); }

.ocard__top { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2); }
.ocard__table {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 700; line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.ocard__table small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-tertiary); display: block; margin-top: 3px; letter-spacing: 0; }
.ocard__timer {
  margin-left: auto; text-align: right; flex: none;
  font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.ocard__timer small { display: block; font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.ocard.is-late .ocard__timer { color: var(--st-alert-fg); }

.ocard__items { padding: 0 var(--s-3) var(--s-2); }
.ocard__item { display: flex; gap: var(--s-2); padding: 3px 0; align-items: baseline; }
.ocard__q {
  min-width: 21px; flex: none; text-align: center;
  font-size: var(--fs-sm); font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: var(--bg-inset); border-radius: 5px; padding: 1px 3px;
}
.ocard__n { font-size: var(--fs-md); font-weight: 540; line-height: 1.3; }
.ocard__m { font-size: var(--fs-xs); color: var(--st-prep-fg); font-weight: 570; line-height: 1.35; }
.ocard__note {
  margin: 0 var(--s-3) var(--s-2);
  padding: 6px 8px; border-radius: 7px;
  background: var(--st-prep-bg); color: var(--st-prep-fg);
  font-size: var(--fs-xs); font-weight: 560; line-height: 1.4;
}
.ocard__note--alert { background: var(--st-alert-bg); color: var(--st-alert-fg); }
.ocard__foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}
.ocard__act { flex: 1; }

.chan {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 660; letter-spacing: 0.02em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--bg-inset); color: var(--text-secondary);
}
.chan--app { background: var(--st-new-bg); color: var(--st-new-fg); }
.chan--web { background: var(--st-plum-bg); color: var(--st-plum-fg); }
.chan--staff { background: var(--st-done-bg); color: var(--st-done-fg); }

/* Ritiro al banco */
.pickup-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pickup-card {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
}
.pickup-card--ready { border-color: var(--st-ready-line); background: var(--st-ready-bg); }
.pickup-code {
  font-family: var(--font-display);
  font-size: var(--fs-4xl); font-weight: 720; line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.board {
  border-radius: var(--r-lg); overflow: hidden;
  background: #0D0B0A; color: #F5F0E8; padding: var(--s-5);
}
.board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-3); }
.board__code {
  padding: var(--s-3); border-radius: var(--r-md); text-align: center;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  background: rgba(255,255,255,0.06);
}
.board__code--ready { background: var(--c-green-700); color: #fff; }

/* ============================================================ RICHIESTE == */
.req-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--rc, var(--border-default));
  background: var(--bg-surface);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.req-card:hover { box-shadow: var(--sh-md); }
.req-card--urgent { --pulse-c: rgba(224,62,81,0.4); }
.req-card__emoji { font-size: 24px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-inset); flex: none; }
.req-card__table { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 680; }
.req-card__type { display: block; font-size: var(--fs-md); font-weight: 560; }
.req-card__time { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ========================================================= PRENOTAZIONI == */
.res-timeline { position: relative; overflow-x: auto; }
.res-timeline__head { display: flex; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: var(--bg-surface); z-index: 2; }
.res-timeline__slot { flex: none; width: 84px; padding: var(--s-2) 0; text-align: center; font-size: var(--fs-xs); font-weight: 620; color: var(--text-tertiary); border-left: 1px solid var(--border-subtle); }
.res-timeline__rows { position: relative; }
.res-row { display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); min-height: 46px; position: relative; }
.res-row__label { position: sticky; left: 0; z-index: 1; width: 120px; flex: none; padding: 0 var(--s-3); background: var(--bg-surface); font-size: var(--fs-sm); font-weight: 600; border-right: 1px solid var(--border-subtle); align-self: stretch; display: flex; align-items: center; gap: 6px; }
.res-row__track { position: relative; flex: 1; height: 46px; }
.res-chip {
  position: absolute; top: 6px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--s-2);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--st-new-bg); color: var(--st-new-fg);
  border: 1px solid currentColor;
  overflow: hidden; white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.res-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-md); z-index: 3; }
.res-chip--seated { background: var(--st-ready-bg); color: var(--st-ready-fg); }
.res-chip--done { background: var(--st-done-bg); color: var(--st-done-fg); }
.res-chip--noshow { background: var(--st-alert-bg); color: var(--st-alert-fg); text-decoration: line-through; }
/* Tratteggiata finché è solo una proposta: il tavolo reale nasce con la sessione */
.res-chip--proposed { border-style: dashed; background: transparent; }

.now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-red-500); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-red-500); }

.res-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  width: 100%; text-align: left;
  transition: background var(--dur-fast);
}
.res-item:hover { background: var(--bg-hover); }
.res-item__time {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 680;
  font-variant-numeric: tabular-nums; width: 60px; flex: none;
}
.res-item__name { display: block; font-size: var(--fs-md); font-weight: 580; }
.res-item__meta { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 1px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell {
  aspect-ratio: 1 / 0.82; border-radius: var(--r-sm);
  padding: 5px 6px; text-align: left;
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  transition: background var(--dur-fast);
}
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell.is-today { border-color: var(--brand); background: var(--brand-faint); }
.cal-cell.is-sel { background: var(--c-ink-900); color: var(--text-inverse); }
.cal-cell.is-out { opacity: 0.3; }
.cal-cell__n { font-weight: 640; font-variant-numeric: tabular-nums; }
.cal-cell__dots { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; }
.cal-cell__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }

/* =============================================================== MENU ==== */
.menu-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 900px) { .menu-layout { grid-template-columns: 1fr; } }

.cat-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 540;
  text-align: left;
  transition: background var(--dur-fast);
}
.cat-item:hover { background: var(--bg-hover); }
.cat-item.is-active { background: var(--c-ink-900); color: var(--text-inverse); font-weight: 600; }
[data-theme="dark"] .cat-item.is-active { background: var(--bg-inset); color: var(--text-primary); }
.cat-item__emoji { font-size: 16px; width: 22px; text-align: center; flex: none; }
.cat-item__count { font-size: var(--fs-xs); opacity: 0.6; font-variant-numeric: tabular-nums; }

.prod-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast);
}
.prod-row:hover { background: var(--bg-hover); }
.prod-row.is-out { opacity: 0.62; }
.prod-thumb {
  width: 50px; height: 50px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 24px;
  background: var(--c-amber-50);
  border: 1px solid var(--border-subtle);
  position: relative;
}
[data-theme="dark"] .prod-thumb { background: rgba(224,135,0,0.13); }
.prod-thumb--cool { background: var(--c-sky-50); }
.prod-thumb--fresh { background: var(--c-green-50); }
.prod-thumb--hot { background: var(--c-red-50); }
.prod-thumb--earth { background: var(--c-teal-50); }
[data-theme="dark"] .prod-thumb--cool { background: rgba(59,130,246,0.13); }
[data-theme="dark"] .prod-thumb--fresh { background: rgba(14,159,110,0.13); }
[data-theme="dark"] .prod-thumb--hot { background: rgba(229,72,77,0.13); }
[data-theme="dark"] .prod-thumb--earth { background: rgba(13,148,136,0.13); }
.prod-thumb--lg { width: 84px; height: 84px; font-size: 40px; border-radius: var(--r-lg); }
.prod-thumb__out {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(18,16,14,0.55); color: #fff;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}

.prod-row__name { display: block; font-size: var(--fs-md); font-weight: 580; }
.prod-row__desc { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.prod-row__price { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 660; font-variant-numeric: tabular-nums; }
.prod-row__price s { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: 500; margin-right: 5px; }

.opt-group { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.opt-group__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--bg-sunken); }
.opt-line { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-md); }

.allergen-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); background: var(--st-alert-bg); color: var(--st-alert-fg); font-size: var(--fs-2xs); font-weight: 620; }

/* ================================================================ QR ===== */
.qr-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.qr-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.qr-card__code { color: var(--text-primary); }
.qr-plate {
  width: 100%; max-width: 210px;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  box-shadow: var(--sh-sm);
  color: var(--c-ink-900);
}
[data-theme="dark"] .qr-plate { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border-default); }
.qr-plate__brand { font-size: 9px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.5; }
.qr-plate__num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 720; line-height: 1; }
.qr-plate__cta { font-size: 10.5px; font-weight: 680; letter-spacing: 0.03em; text-transform: uppercase; }
.qr-plate__slot {
  margin-top: var(--s-3); padding: 6px; border-radius: var(--r-sm);
  border: 1.5px dashed currentColor; opacity: 0.9;
  font-size: 10px; font-weight: 680; letter-spacing: 0.02em;
}

.mode-card {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  text-align: left; width: 100%;
  transition: all var(--dur-fast) var(--ease-out);
}
.mode-card:hover { border-color: var(--border-strong); }
.mode-card.is-sel { border-color: var(--brand); background: var(--brand-faint); box-shadow: var(--sh-ring); }
.mode-card__emoji { font-size: 22px; }
.mode-card__title { font-size: var(--fs-md); font-weight: 620; margin-top: var(--s-2); }
.mode-card__desc { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }

/* =========================================================== CLIENTI ===== */
.cust-hero { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-5); }
.seg-bar { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; background: var(--bg-inset); }
.seg-bar > i { display: block; height: 100%; }

.stat-line { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-md); }
.stat-line:last-child { border-bottom: 0; }
.stat-line__v { font-weight: 660; font-variant-numeric: tabular-nums; }

/* ========================================================= RECENSIONI ==== */
.rev-card { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.rev-card:last-child { border-bottom: 0; }
.rev-card__text { font-size: var(--fs-md); line-height: 1.55; margin-top: var(--s-2); }
.rev-reply {
  margin-top: var(--s-3); padding: var(--s-3);
  border-radius: var(--r-md); background: var(--bg-inset);
  border-left: 3px solid var(--brand);
  font-size: var(--fs-sm); line-height: 1.5;
}
.verified-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--r-full); background: var(--st-ready-bg); color: var(--st-ready-fg); font-size: 10px; font-weight: 660; }

.dish-rank { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.dish-rank__pos { width: 20px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.dish-rank__bar { flex: 1; }

.dist-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); }
.dist-row__n { width: 34px; display: flex; align-items: center; gap: 2px; color: var(--text-secondary); }

/* ========================================================== PROMOZIONI === */
.promo-card {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.promo-card.is-off { opacity: 0.68; }
.promo-card__badge {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
}
.tier-card { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); }
.tier-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 680; }

/* ========================================================= STATISTICHE === */
.chart-wrap { position: relative; }
.chart-svg { width: 100%; display: block; overflow: visible; }
.bar { transition: opacity var(--dur-fast); cursor: pointer; }
.bar:hover { opacity: 0.75; }
.axis-lbl { font-size: 10px; fill: var(--text-tertiary); font-weight: 600; }
.grid-line { stroke: var(--border-subtle); stroke-width: 1; }

.metric-hero {
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-ink-900);
  color: #F2F4F8;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .metric-hero { background: var(--bg-raised); border: 1px solid var(--border-subtle); }
.metric-hero__val {
  font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: #FFF9F0;
  font-variant-numeric: tabular-nums;
}

.rank-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle); }
.rank-row:last-child { border-bottom: 0; }
.rank-row__i { width: 22px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--text-tertiary); }

/* =============================================================== STAFF === */
.perm-tbl th:first-child, .perm-tbl td:first-child { position: sticky; left: 0; background: var(--bg-surface); z-index: 2; text-align: left; }
.perm-tbl td { text-align: center; }
.perm-dot { width: 16px; height: 16px; border-radius: 5px; display: inline-grid; place-items: center; }
.perm-dot--2 { background: var(--c-green-700); color: #fff; }
.perm-dot--1 { background: var(--st-prep-bg); color: var(--st-prep-fg); }
.perm-dot--0 { background: var(--bg-inset); }

.staff-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); }
.staff-card:last-child { border-bottom: 0; }

/* ========================================================= IMPOSTAZIONI == */
.set-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .set-layout { grid-template-columns: 1fr; } }
.set-nav { position: sticky; top: 0; }
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hours-row { display: grid; grid-template-columns: 108px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle); }
.hours-row:last-child { border-bottom: 0; }

/* ========================================================== ONBOARDING === */
.ob-hero {
  border-radius: var(--r-2xl);
  padding: var(--s-8) var(--s-7);
  background: var(--c-ink-900);
  color: #F2F4F8; text-align: center;
  position: relative; overflow: hidden;
}
[data-theme="dark"] .ob-hero { background: var(--bg-raised); border: 1px solid var(--border-subtle); }
.ob-step {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.ob-step:hover { box-shadow: var(--sh-md); }
.ob-step__n {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
  background: var(--bg-inset); color: var(--text-secondary);
}
.ob-step.is-done .ob-step__n { background: var(--c-green-700); color: #fff; }

/* Barra flusso ecosistema */
.flow {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  font-size: var(--fs-2xs); font-weight: 620; letter-spacing: 0.02em;
}
.flow__step {
  padding: 5px 10px; border-radius: var(--r-full);
  background: var(--bg-inset); color: var(--text-secondary);
  white-space: nowrap;
}
.flow__step.is-on { background: var(--brand-soft); color: var(--text-brand); }
.flow__arr { color: var(--text-tertiary); }

/* Banner informativo */
.callout {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--st-new-bg); color: var(--st-new-fg);
  font-size: var(--fs-sm); line-height: 1.5;
}
.callout--warn { background: var(--st-prep-bg); color: var(--st-prep-fg); }
.callout--alert { background: var(--st-alert-bg); color: var(--st-alert-fg); }
.callout--ok { background: var(--st-ready-bg); color: var(--st-ready-fg); }
.callout .ic { flex: none; margin-top: 1px; }
.callout strong { font-weight: 680; }

/* Toolbar di vista */
.vtoolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.vtoolbar .search-wrap { min-width: 200px; flex: 1 1 200px; max-width: 320px; }

/* --- Telefono: adattamenti delle viste ------------------------------------ */
@media (max-width: 760px) {
  .grid--main, .menu-layout, .set-layout { grid-template-columns: 1fr; }
  .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kanban { grid-template-columns: repeat(4, 84vw); padding: var(--s-3); gap: var(--s-3); }
  .floor-toolbar { padding: var(--s-3); flex-wrap: nowrap; overflow-x: auto; }
  .floor-toolbar > * { flex: none; }
  .floor-wrap { padding: var(--s-3); }
  .set-nav { position: static; display: flex; gap: var(--s-1); overflow-x: auto; }
  .set-nav .cat-item { flex: none; width: auto; }
  .sess-money { grid-template-columns: 1fr; }
  .vtoolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .vtoolbar > * { flex: none; }
  .vtoolbar .search-wrap { flex: 1 1 180px; min-width: 160px; }
  .metric-hero { padding: var(--s-4); }
  .metric-hero__val { font-size: var(--fs-4xl); }
  .ob-hero { padding: var(--s-6) var(--s-4); }
  .prod-row { flex-wrap: wrap; gap: var(--s-3); }
  .res-row__label { width: 92px; }
  .cust-hero { flex-direction: column; align-items: flex-start; }
}

@media print {
  .rail, .topbar, .no-print { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { overflow: visible; height: auto; }
  .view { overflow: visible; }
}