/* Faro POS Design System — BUNDLE (rigen 2026-06-22: landing brand palette) */


/* ===== 01-tokens.css ===== */
/* Faro POS — DESIGN TOKENS v2 (2026-05-18)
   Adattati dal design system Claude Design (handoff bundle).
   File: 01-tokens.css

   FILOSOFIA:
   - Warm-black "espresso", non grigio cool
   - Brand bordeaux (scala completa 50-950)
   - Ottone come accento premium rarefatto
   - Crema calda, non bianco freddo
   - Stati spenti (salvia/ambra/bordeaux), non fluo
   - Display Cormorant Garamond + Body Manrope + Numeri JetBrains Mono
   - Ombre calde no blu
   - Tracking caps 0.12em per UPPERCASE labels

   STRUTTURA:
   - :root contiene tokens non-cromatici (font, spacing, radius, transition)
     E palette colori (tema dark fissato, niente toggle).
*/

/* ────────────────────────────────────────────────────────────────────────
   TOKENS NON-CROMATICI — invarianti tra temi
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* TIPOGRAFIA — Cormorant display + Manrope body + JetBrains Mono numeri */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Alias backward-compat: --font-ui = sans per chi usava il nome vecchio */
  --font-ui:      var(--font-sans);

  /* Scala dimensioni font (px, design system Claude) */
  --fs-display-xl: 56px;  --lh-display-xl: 64px;
  --fs-display-l:  40px;  --lh-display-l:  48px;
  --fs-display-m:  28px;  --lh-display-m:  36px;
  --fs-heading-l:  22px;  --lh-heading-l:  28px;
  --fs-heading-m:  18px;  --lh-heading-m:  24px;
  --fs-heading-s:  15px;  --lh-heading-s:  20px;
  --fs-body-l:     16px;  --lh-body-l:     24px;
  --fs-body-m:     14px;  --lh-body-m:     20px;
  --fs-body-s:     13px;  --lh-body-s:     18px;
  --fs-caption:    11px;  --lh-caption:    14px;
  --fs-num-xl:     40px;  --lh-num-xl:     44px;
  --fs-num-l:      28px;  --lh-num-l:      32px;
  --fs-num-m:      18px;  --lh-num-m:      22px;

  /* Scala backward-compat (per i CSS legacy che usano --fs-md ecc.) */
  --fs-xs:   var(--fs-caption);
  --fs-sm:   var(--fs-body-s);
  --fs-md:   var(--fs-body-l);
  --fs-lg:   var(--fs-heading-m);
  --fs-xl:   var(--fs-heading-l);
  --fs-2xl:  var(--fs-display-m);
  --fs-3xl:  var(--fs-display-l);

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
  --ls-label: var(--tracking-caps);  /* backward-compat */

  /* Line-height */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-relaxed: 1.7;

  /* Font-weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* SPACING (base 4) */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Backward-compat */
  --sp-xs:  var(--space-1);
  --sp-sm:  var(--space-2);
  --sp-md:  var(--space-3);
  --sp-lg:  var(--space-4);
  --sp-xl:  var(--space-6);
  --sp-2xl: var(--space-8);
  --sp-3xl: var(--space-12);
  --sp-4xl: var(--space-16);

  /* RADIUS */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;
  --radius-full: var(--radius-pill);

  /* MOTION */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.5, 0, .2, 1);
  /* Backward-compat */
  --t-fast: var(--motion-fast) var(--ease-out);
  --t-base: var(--motion-base) var(--ease-out);
  --t-slow: var(--motion-slow) var(--ease-out);

  /* Z-INDEX */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-nav:            50;
  --z-modal-overlay:  1000;
  --z-modal:          1010;
  --z-overlay:        var(--z-modal-overlay);
  --z-toast:          2000;
  --z-tooltip:        3000;

  /* TOUCH TARGETS */
  --hit-target-min: 44px;
  --touch-min:      var(--hit-target-min);
  --touch-pos:      56px;

  /* LAYOUT */
  --container-max:  1280px;
  --page-max-width: var(--container-max);
  --rail-w:         260px;
  --page-padding-x: var(--space-4);
}

/* ────────────────────────────────────────────────────────────────────────
   TEMA DARK — "Faro Landing Brand" (2026-06-22)
   Tema fissato: niente più toggle dark/light. Base nero-carbone della
   landing, bordeaux e ottone come accenti identitari del locale.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* SUPERFICI — nero-carbone landing */
  --bg-canvas:   #08080B;   /* canvas: nero-carbone profondo */
  --bg-surface:  #111014;   /* card default */
  --bg-elevated: #171419;   /* modali, raised, hover */
  --bg-sunken:   #050508;   /* pozzetti input, più profondo del canvas */
  --bg-overlay:  rgba(8, 8, 11, 0.88);
  /* Backward-compat */
  --bg-0: var(--bg-canvas);
  --bg-1: var(--bg-surface);
  --bg-2: var(--bg-elevated);
  --bg-3: #211B20;

  /* BORDI — hairline calde da landing */
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(213, 179, 111, 0.34);
  --border-muted:   var(--border-subtle);

  /* BORDEAUX scale completa */
  --bordeaux-50:  #FBE9EB;
  --bordeaux-100: #F2C5CC;
  --bordeaux-200: #F0A0AD;
  --bordeaux-300: #D9576C;
  --bordeaux-400: #C51D37;
  --bordeaux-500: #C51D37;
  --bordeaux-600: #8F1427;
  --bordeaux-700: #76101F;
  --bordeaux-800: #4A0E18;
  --bordeaux-900: #2E0810;
  --bordeaux-950: #1A040A;
  /* Backward-compat brand */
  --rosso-primario: var(--bordeaux-600);
  --rosso-scuro:    var(--bordeaux-500);
  --rosso-soft-08:  rgba(143, 20, 39, 0.10);
  --rosso-soft-20:  rgba(143, 20, 39, 0.22);
  --rosso-soft-30:  rgba(143, 20, 39, 0.35);

  /* OTTONE — accento premium della landing */
  --brass-300: #F0D79C;
  --brass-400: #E5C584;
  --brass-500: #D5B36F;
  --brass-600: #B49355;
  --brass-700: #7C6238;
  /* Backward-compat */
  --accento-oro:      var(--brass-500);
  --accento-oro-soft: rgba(213, 179, 111, 0.15);
  --accento-oro-glow: 0 0 0 3px rgba(213, 179, 111, 0.25);

  /* TESTO — crema calda della landing */
  --text-primary:    #F7F3EA;
  --text-secondary:  #C9C1B6;
  --text-tertiary:   #827A73;
  --text-disabled:   #5B544E;
  --text-on-primary: #FBE9EB;
  --text-on-brass:   #1A120A;
  /* Backward-compat */
  --testo-primario:   var(--text-primary);
  --testo-secondario: var(--text-secondary);
  --testo-muted:      var(--text-tertiary);
  --testo-disabled:   var(--text-disabled);

  /* STATI SEMANTICI — coerenti con landing, niente blu freddo */
  --success-500: #3FAE6B;
  --success-700: #2E7D4F;
  --success-bg:  rgba(63, 174, 107, 0.12);
  --warning-500: #D5B36F;
  --warning-700: #8E6D34;
  --warning-bg:  rgba(213, 179, 111, 0.10);
  --danger-500:  #C51D37;
  --danger-700:  #76101F;
  --danger-bg:   rgba(143, 20, 39, 0.12);
  --info-500:    #C9C1B6;
  --info-bg:     rgba(201, 193, 182, 0.10);
  /* Backward-compat */
  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger:  var(--danger-500);
  --danger-light: var(--bordeaux-400);
  --info:    var(--info-500);
  --success-soft-20: rgba(63, 174, 107, 0.20);
  --warning-soft-20: rgba(213, 179, 111, 0.22);
  --danger-soft-20:  rgba(143, 20, 39, 0.22);
  --info-soft-20:    rgba(201, 193, 182, 0.20);

  /* SHADOW — calde, no blu */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.6),  0 10px 20px rgba(0, 0, 0, 0.4);
  --glow-bordeaux: 0 0 0 1px rgba(197, 29, 55, 0.48), 0 18px 44px rgba(143, 20, 39, 0.28);
  --glow-brass:    0 0 0 1px rgba(213, 179, 111, 0.45), 0 0 18px rgba(213, 179, 111, 0.12);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --inset-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  /* Backward-compat */
  --shadow-glow:        var(--glow-bordeaux);
  --shadow-danger-glow: 0 0 0 3px rgba(197, 29, 55, 0.3);

  color-scheme: dark;
}


/* ===== 02-reset.css ===== */
/* Faro POS — Design System v1
   File: 02-reset.css
   Reset moderno (ispirato a Josh Comeau). Normalizza box-sizing, margini,
   line-height, touch-highlight, pulisce default browser per controlli form. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Bottoni: rimuove default UA. Importante -webkit-tap-highlight-color
   per evitare il flash blu su iOS al tap (UX POS). */
button {
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Elemento root per app */
#root,
.faro-app {
  isolation: isolate;
}

/* ===== 03-base.css ===== */
/* Faro POS — Design System v1
   File: 03-base.css
   Tipografia di base, link, selection, focus visibile. */

/* Font self-hosted (privacy + offline-friendly, niente CDN Google Fonts).
   FARO_BRAND_FONT_V1 (2026-05-18): Cormorant Garamond ovunque come font
   brand principale. Inter mantenuto come fallback per ambienti che non
   hanno caricato i woff2 (es. browser molto vecchi). Press Start 2P
   resta per skin pixel-art del mini-RPG /isola. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond/CormorantGaramond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond/CormorantGaramond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond/CormorantGaramond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond/CormorantGaramond-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/press-start-2p/PressStart2P-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* DESIGN_CLAUDE_V1 (2026-05-18): Manrope + JetBrains Mono self-hosted.
   Manrope = font-sans per UI dense (KDS, dashboard, tabelle conti).
   JetBrains Mono = numeri tabulari grandi (--font-mono / utility .t-num-*).
   Cormorant Garamond resta default per body, h*, brand. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope/Manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/manrope/Manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope/Manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/manrope/Manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-600.woff2') format('woff2');
}

/* DESIGN_CLAUDE_V1 (2026-05-18): body usa Manrope (sans, --font-sans).
   Cormorant Garamond passa a titoli h1-h3 + utility .t-display-* per
   l'aspetto "carta da menu" tipografico, mentre il body legge fluido in
   sans (KDS, dashboard, tabelle dense, form). Coerente con il design
   Claude handoff. */
body {
  background: var(--bg-0);
  color: var(--testo-primario);
  font-family: var(--font-sans);          /* Manrope */
  font-size: var(--fs-body-l);            /* 16px */
  font-weight: var(--fw-regular);         /* 400 — Manrope è già robusto a 400 */
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numeri in colonna (tabelle, totali, prezzi): allineamento fisso per leggibilità */
.faro-table td,
.faro-table th,
[data-numeric],
.totale,
.prezzo,
.fatturato {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Heading scale — pesi alleggeriti perché Cormorant è già "tipografico" di per sé */
h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);  /* 600 invece di 700, serif già ha presenza */
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;          /* serif display un po' più stretto */
  color: var(--testo-primario);
}

h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--testo-primario);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--testo-primario);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--testo-primario);
}

h5,
h6 {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--testo-primario);
}

p {
  color: var(--testo-secondario);
  line-height: var(--lh-relaxed);   /* 1.7 per prose serif, più respiro */
}

small {
  font-size: var(--fs-sm);
  color: var(--testo-muted);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

code {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--testo-primario);
}

pre {
  background: var(--bg-2);
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: 1px solid var(--border-muted);
}

pre code {
  background: transparent;
  padding: 0;
}

blockquote {
  border-left: 3px solid var(--rosso-primario);
  padding: var(--sp-sm) var(--sp-lg);
  color: var(--testo-secondario);
  font-style: italic;
  margin: var(--sp-md) 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-muted);
  margin: var(--sp-lg) 0;
}

a {
  color: var(--rosso-scuro);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--rosso-primario);
}

::selection {
  background: var(--rosso-primario);
  color: var(--testo-primario);
}

/* Focus visibile globale: solo per keyboard nav, niente outline su click mouse */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-sm);
}

/* ===== 04-layout.css ===== */
/* Faro POS — Design System v1
   File: 04-layout.css
   Layout principale: shell app, header sticky, main container, footer,
   utility flex/stack/grid riutilizzabili. */

.faro-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
}

/* Header sticky con back button + titolo + actions a destra */
.faro-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-default);
  padding: var(--sp-md) var(--page-padding-x);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 64px;
}

.faro-header__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--testo-primario);
}

.faro-header__actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}

/* Main container */
.faro-main {
  flex: 1;
  padding: var(--sp-xl) var(--page-padding-x);
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
}

.faro-page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-xl);
  color: var(--testo-primario);
}

.faro-page-subtitle {
  font-size: var(--fs-md);
  color: var(--testo-secondario);
  margin-top: calc(-1 * var(--sp-md));
  margin-bottom: var(--sp-xl);
}

/* Section */
.faro-section {
  margin-bottom: var(--sp-2xl);
}

.faro-section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-md);
  color: var(--testo-primario);
}

.faro-section__subtitle {
  font-size: var(--fs-sm);
  color: var(--testo-muted);
  margin-bottom: var(--sp-md);
}

/* Footer */
.faro-footer {
  padding: var(--sp-lg) var(--page-padding-x);
  border-top: 1px solid var(--border-muted);
  color: var(--testo-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Utility flex */
.faro-row {
  display: flex;
  gap: var(--sp-md);
  align-items: center;
}

.faro-row--end {
  justify-content: flex-end;
}

.faro-row--between {
  justify-content: space-between;
}

.faro-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.faro-stack--sm {
  gap: var(--sp-sm);
}

.faro-stack--lg {
  gap: var(--sp-lg);
}

/* Grid responsive auto-fill */
.faro-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.faro-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.faro-grid--lg {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* Utility sticky-top: applicabile a qualunque header/barra per ancorarla in alto.
   Centralizza il pattern usato da .faro-header, .kds-header, .header-mappa. */
.faro-sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-1);
}

/* Utility visibility */
.faro-hidden,
.hidden {
  display: none !important;
}

/* Visually hidden ma accessibile a screen reader */
.faro-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== components/back-button.css ===== */
/* Faro POS — Design System v1
   Componente: back-button
   Bottone standard per tornare indietro. Label fissa "Indietro" (no varianti
   custom). Hit-area >= 44px. Posizione tipica: header top-left. */

.faro-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 16px;
  min-height: var(--touch-min);
  background: linear-gradient(145deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--rosso-soft-30);
  border-radius: var(--radius-md);
  color: var(--testo-primario);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}

.faro-back-btn:hover {
  border-color: var(--rosso-primario);
  background: var(--bg-2);
}

.faro-back-btn:active {
  transform: translateY(1px);
}

/* L'icona ← */
.faro-back-btn > span[aria-hidden="true"] {
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--rosso-scuro);
  font-weight: var(--fw-semibold);
}

/* Variante sticky: utile in pagine senza header, si attacca in alto-sx */
.faro-back-btn--sticky {
  position: sticky;
  top: var(--sp-md);
  z-index: var(--z-sticky);
  align-self: flex-start;
}

/* ===== components/primary-button.css ===== */
/* Faro POS — Design System v1
   Componente: primary-button (base .faro-btn + variante --primary)
   Hit-area POS 56px (touch-pos). Letter-spacing leggero per leggibilità. */

.faro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: var(--touch-pos);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--testo-primario);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.faro-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.faro-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Variante primary: bordeaux pieno */
.faro-btn--primary {
  background: var(--rosso-primario);
  color: var(--testo-primario);
  border-color: var(--rosso-primario);
}

.faro-btn--primary:hover:not(:disabled) {
  background: var(--rosso-scuro);
  border-color: var(--rosso-scuro);
}

/* Modificatori dimensione */
.faro-btn--full {
  width: 100%;
}

.faro-btn--lg {
  min-height: 64px;
  padding: 16px 24px;
  font-size: var(--fs-lg);
}

.faro-btn--sm {
  min-height: var(--touch-min);
  padding: 8px 14px;
  font-size: var(--fs-sm);
}

/* ===== components/secondary-button.css ===== */
/* Faro POS — Design System v1
   Componente: secondary-button (variante --secondary di .faro-btn)
   Stile outline, per azioni secondarie / "Annulla" / "Indietro contestuale". */

.faro-btn--secondary {
  background: transparent;
  color: var(--testo-primario);
  border: 1px solid var(--rosso-soft-30);
}

.faro-btn--secondary:hover:not(:disabled) {
  background: var(--rosso-soft-08);
  border-color: var(--rosso-primario);
}

.faro-btn--secondary:active:not(:disabled) {
  background: var(--rosso-soft-20);
}

/* ===== components/danger-button.css ===== */
/* Faro POS — Design System v1
   Componente: danger-button (variante --danger di .faro-btn)
   Per azioni distruttive: elimina, storno, chiudi senza salvare. */

.faro-btn--danger {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}

.faro-btn--danger:hover:not(:disabled) {
  background: #b53030;
  border-color: #b53030;
}

.faro-btn--danger:active:not(:disabled) {
  background: #9c2828;
}

/* Variante outline danger (meno aggressiva, per "Annulla operazione") */
.faro-btn--danger-outline {
  background: transparent;
  /* FIX UX audit: testo rosso chiaro per contrast >= 4.5:1 su sfondo --bg-0 */
  color: var(--danger-light, #ef5454);
  border: 1px solid var(--danger-soft-20);
}

.faro-btn--danger-outline:hover:not(:disabled) {
  background: var(--danger-soft-20);
  border-color: var(--danger);
}

/* ===== components/card.css ===== */
/* Faro POS — Design System v1
   Componente: card
   Contenitore generico. Varianti: default, interactive (cliccabile),
   compact (padding ridotto), accent (border-left bordeaux). */

.faro-card {
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.faro-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--testo-primario);
  margin-bottom: var(--sp-sm);
}

.faro-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--testo-muted);
  margin-bottom: var(--sp-md);
}

.faro-card__body {
  color: var(--testo-secondario);
  line-height: var(--lh-base);
}

.faro-card__footer {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border-muted);
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
  align-items: center;
}

/* Variante interactive: cliccabile con hover marcato */
.faro-card--interactive {
  cursor: pointer;
}

.faro-card--interactive:hover {
  border-color: var(--rosso-primario);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.faro-card--interactive:active {
  transform: translateY(0);
}

/* Variante compact: padding ridotto */
.faro-card--compact {
  padding: var(--sp-md);
}

/* Variante accent: bordo sx bordeaux 3px (categorizzazione) */
.faro-card--accent {
  border-left: 3px solid var(--rosso-primario);
}

/* Variante semantica per stati */
.faro-card--success {
  border-left: 3px solid var(--success);
}

.faro-card--warning {
  border-left: 3px solid var(--warning);
}

.faro-card--danger {
  border-left: 3px solid var(--danger);
}

.faro-card--info {
  border-left: 3px solid var(--info);
}

/* ===== components/tabs.css ===== */
/* Faro POS — Design System v1
   Componente: tabs
   Tab orizzontali con underline bordeaux sull'attivo.
   Toggle .faro-tab--active. Container scrollabile orizzontalmente su mobile. */

.faro-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rosso-soft-20) transparent;
}

.faro-tabs::-webkit-scrollbar {
  height: 4px;
}

.faro-tabs::-webkit-scrollbar-thumb {
  background: var(--rosso-soft-20);
  border-radius: var(--radius-full);
}

.faro-tab {
  padding: 12px 18px;
  min-height: var(--touch-min);
  background: transparent;
  color: var(--testo-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}

.faro-tab:hover {
  color: var(--testo-primario);
}

.faro-tab--active {
  color: var(--rosso-scuro);
  border-bottom-color: var(--rosso-primario);
  font-weight: var(--fw-semibold);
}

/* Variante pill: tab arrotondati senza underline */
.faro-tabs--pill {
  border-bottom: none;
  gap: var(--sp-xs);
}

.faro-tabs--pill .faro-tab {
  border-radius: var(--radius-full);
  border-bottom: none;
  border: 1px solid transparent;
}

.faro-tabs--pill .faro-tab--active {
  background: var(--rosso-soft-08);
  border-color: var(--rosso-soft-30);
  color: var(--rosso-scuro);
  border-bottom: 1px solid var(--rosso-soft-30);
}

/* Badge counter dentro la tab (es. notifiche) */
.faro-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--sp-sm);
  border-radius: var(--radius-full);
  background: var(--rosso-primario);
  color: var(--testo-primario);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ===== components/form-input.css ===== */
/* Faro POS — Design System v1
   Componente: form-input
   Input testo, select, textarea, checkbox, radio. Label uppercase
   con letter-spacing. Stati: focus / disabled / error. */

.faro-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.faro-field__label {
  font-size: var(--fs-xs);
  color: var(--testo-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-medium);
}

.faro-field__hint {
  font-size: var(--fs-xs);
  color: var(--testo-muted);
}

.faro-field__error {
  font-size: var(--fs-xs);
  /* FIX UX audit: testo errore deve avere contrast >= 4.5:1 su sfondo scuro;
     usa --danger-light (#ef5454, contrast 5.0:1) anziché --danger filled */
  color: var(--danger-light, #ef5454);
  font-weight: var(--fw-medium);
}

/* Input testo + select + textarea: stile condiviso */
.faro-input,
.faro-select,
.faro-textarea {
  background: var(--bg-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--testo-primario);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  min-height: var(--touch-min);
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.faro-input::placeholder,
.faro-textarea::placeholder {
  color: var(--testo-disabled);
}

.faro-input:focus,
.faro-select:focus,
.faro-textarea:focus {
  outline: none;
  border-color: var(--rosso-primario);
  box-shadow: var(--shadow-glow);
}

.faro-input:disabled,
.faro-select:disabled,
.faro-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.faro-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: var(--lh-base);
}

.faro-select {
  /* freccia custom per uniformità cross-browser */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a7f72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Stato errore */
.faro-input--error,
.faro-input[aria-invalid="true"],
.faro-select[aria-invalid="true"],
.faro-textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.faro-input--error:focus,
.faro-input[aria-invalid="true"]:focus,
.faro-select[aria-invalid="true"]:focus,
.faro-textarea[aria-invalid="true"]:focus {
  box-shadow: var(--shadow-danger-glow);
}

/* Checkbox / Radio */
.faro-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--testo-primario);
  min-height: var(--touch-min);
  user-select: none;
}

.faro-check input[type="checkbox"],
.faro-check input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--rosso-primario);
  cursor: pointer;
  flex-shrink: 0;
}

.faro-check:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Field group orizzontale */
.faro-field-group {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.faro-field-group > .faro-field {
  flex: 1;
  min-width: 180px;
}

/* ===== components/modal.css ===== */
/* Faro POS — Design System v1
   Componente: modal
   NOMI ESATTI: .modal-overlay + .modal-box per compatibilità con i 35
   modali già esistenti in index.html. Toggle via .hidden (pattern dominante).
   Backdrop con blur leggero (glass-effect). */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  z-index: var(--z-modal-overlay);
  opacity: 1;
  transition: opacity var(--t-base);
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: flex; /* override .hidden globale: serve per la transition */
}

.modal-box {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: var(--z-modal);
  transform: translateY(0);
  transition: transform var(--t-base);
}

.modal-overlay.hidden .modal-box {
  transform: translateY(-12px);
}

.modal-box__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--testo-primario);
  margin-bottom: var(--sp-md);
  line-height: var(--lh-tight);
}

.modal-box__body {
  color: var(--testo-secondario);
  line-height: var(--lh-base);
}

.modal-box__body p + p {
  margin-top: var(--sp-md);
}

.modal-box__actions {
  margin-top: var(--sp-lg);
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Bottone chiudi top-right (X) */
.modal-box__close {
  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--testo-muted);
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
}

.modal-box__close:hover {
  color: var(--testo-primario);
  background: var(--bg-3);
}

/* Varianti dimensione */
.modal-box--narrow {
  max-width: 400px;
}

.modal-box--wide {
  max-width: 800px;
}

.modal-box--full {
  max-width: 1100px;
}

/* ===== components/toast.css ===== */
/* Faro POS — Design System v1
   Componente: toast
   Notifiche transienti top-right. Container fisso, toast a cascata.
   4 varianti semantiche: success, warning, danger, info. Animazione slide-in. */

.faro-toast-container {
  position: fixed;
  top: var(--sp-lg);
  right: var(--sp-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  max-width: 360px;
  pointer-events: none; /* il container non blocca i click; i singoli toast li riabilitano */
}

.faro-toast {
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--testo-primario);
  pointer-events: auto;
  animation: faro-toast-in var(--t-slow) ease-out;
}

.faro-toast__icon {
  flex-shrink: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faro-toast__body {
  flex: 1;
  line-height: var(--lh-base);
}

.faro-toast__close {
  flex-shrink: 0;
  color: var(--testo-muted);
  background: transparent;
  border: none;
  font-size: var(--fs-md);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast);
}

.faro-toast__close:hover {
  color: var(--testo-primario);
}

/* Varianti semantiche: border-left colorato */
.faro-toast--success {
  border-left: 3px solid var(--success);
}

.faro-toast--success .faro-toast__icon {
  color: var(--success);
}

.faro-toast--warning {
  border-left: 3px solid var(--warning);
}

.faro-toast--warning .faro-toast__icon {
  color: var(--warning);
}

.faro-toast--danger {
  border-left: 3px solid var(--danger);
}

.faro-toast--danger .faro-toast__icon {
  color: var(--danger);
}

.faro-toast--info {
  border-left: 3px solid var(--info);
}

.faro-toast--info .faro-toast__icon {
  color: var(--info);
}

/* Animazione slide-in da destra */
@keyframes faro-toast-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Classe per animazione uscita (da applicare via JS prima del remove) */
.faro-toast--leaving {
  animation: faro-toast-out var(--t-base) ease-in forwards;
}

@keyframes faro-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* ===== components/table.css ===== */
/* Faro POS — Design System v1
   Componente: table
   Tabella sobria su dark theme. Header con label uppercase.
   Varianti: striped (zebra), compact (padding ridotto). */

.faro-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--testo-primario);
}

.faro-table th,
.faro-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
  vertical-align: middle;
}

.faro-table th {
  background: var(--bg-1);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
  color: var(--testo-muted);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}

.faro-table tbody tr {
  transition: background var(--t-fast);
}

.faro-table tbody tr:hover {
  background: var(--rosso-soft-08);
}

.faro-table tbody tr:last-child td {
  border-bottom: none;
}

/* Variante zebra */
.faro-table--striped tbody tr:nth-child(even) {
  background: var(--bg-1);
}

.faro-table--striped tbody tr:nth-child(even):hover {
  background: var(--rosso-soft-08);
}

/* Variante compact */
.faro-table--compact th,
.faro-table--compact td {
  padding: 8px 10px;
}

/* Allineamenti colonna */
.faro-table .col-right {
  text-align: right;
}

.faro-table .col-center {
  text-align: center;
}

.faro-table .col-mono {
  font-family: var(--font-mono);
}

/* Wrapper per scroll orizzontale su mobile */
.faro-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-1);
}

/* ===== components/loading.css ===== */
/* Faro POS — Design System v1
   Componente: loading
   Spinner e skeleton per stati di caricamento. */

.faro-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl);
  gap: var(--sp-sm);
}

.faro-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--rosso-primario);
  border-radius: var(--radius-full);
  animation: faro-spin 800ms linear infinite;
}

.faro-loading__label {
  font-size: var(--fs-sm);
  color: var(--testo-muted);
  margin-top: var(--sp-sm);
}

@keyframes faro-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Variante inline (spinner accanto a testo) */
.faro-loading--inline {
  flex-direction: row;
  padding: var(--sp-sm);
  gap: var(--sp-sm);
}

.faro-loading--inline .faro-loading__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.faro-loading--inline .faro-loading__label {
  margin-top: 0;
}

/* Variante small */
.faro-loading--sm .faro-loading__spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* Skeleton placeholder con shimmer */
.faro-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bg-1) 0%,
    var(--bg-2) 50%,
    var(--bg-1) 100%
  );
  background-size: 200% 100%;
  animation: faro-shimmer 1400ms ease-in-out infinite;
  border-radius: var(--radius-sm);
  min-height: 12px;
}

.faro-skeleton--text {
  height: 14px;
  width: 100%;
  margin-bottom: var(--sp-sm);
}

.faro-skeleton--title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--sp-md);
}

.faro-skeleton--block {
  height: 80px;
  width: 100%;
}

.faro-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

@keyframes faro-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Riduzione movimento: rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .faro-loading__spinner {
    animation-duration: 2400ms;
  }
  .faro-skeleton {
    animation: none;
    background: var(--bg-2);
  }
}

/* ===== components/empty-state.css ===== */
/* Faro POS — Design System v1
   Componente: empty-state
   Stato "nessun risultato" / "lista vuota" con icona, titolo, descrizione,
   call-to-action. */

.faro-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3xl) var(--sp-lg);
  text-align: center;
  color: var(--testo-muted);
}

.faro-empty__icon {
  font-size: var(--fs-3xl);
  opacity: 0.5;
  margin-bottom: var(--sp-md);
  line-height: 1;
  color: var(--testo-muted);
}

.faro-empty__title {
  font-size: var(--fs-lg);
  color: var(--testo-primario);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-sm);
}

.faro-empty__text {
  font-size: var(--fs-sm);
  color: var(--testo-muted);
  max-width: 360px;
  line-height: var(--lh-base);
}

.faro-empty__actions {
  margin-top: var(--sp-lg);
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  justify-content: center;
}

/* Variante compact (es. dentro un card piccolo) */
.faro-empty--compact {
  padding: var(--sp-xl) var(--sp-md);
}

.faro-empty--compact .faro-empty__icon {
  font-size: var(--fs-2xl);
}

/* ===== 05-ux-overrides.css ===== */
/* Faro POS Design System — 05-ux-overrides.css
   Override globali per soddisfare i criteri UX audit:
   - hit-area minima 44×44 px (WCAG 2.5.5 Target Size + Apple HIG)
   - feedback visivo immediato su click (<100ms)
   - distanza minima 8px tra elementi cliccabili adiacenti
   - testo con contrasto WCAG AA (≥4.5:1) anche sui tab inattivi
   Caricato come ULTIMO @import in all.css per vincere sulla cascade. */

/* ── HIT-AREA: 44×44 px minimo su tutto ciò che è cliccabile ── */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
a[href].nav-btn,
a[href].btn,
a[href].faro-btn,
.tab-btn,
.nav-btn,
.cal-btn,
.faro-tab {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Pattern HACCP/cassa: button con CSS inline o classi custom hanno spesso
   altezza fissa <44px. Override con !important per tutti i tag <button>. */
button:not(.skip-hitarea),
input[type="button"],
input[type="submit"] {
  min-height: 44px !important;
}

/* Tab/nav: spesso hanno altezza ridotta — forza 44px ma con padding-y minimo */
.tab-btn,
.nav-btn,
.faro-tab {
  padding-top: max(10px, var(--sp-sm, 8px));
  padding-bottom: max(10px, var(--sp-sm, 8px));
}

/* Bottoni piccoli (icona singola) — forza minimo quadrato 44×44 */
button.btn-icon,
button.cal-btn,
.btn-mini,
.btn-back,
.faro-btn--sm,
.btn-pag,
.btn-sm,
.btn.btn-sm,
.btn.btn-secondary.btn-sm,
button[class*="btn-sm"] {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ── CLICK FEEDBACK: transition rapida su tutti i bottoni ── */
button,
[role="button"],
.btn,
.faro-btn,
.tab-btn,
.nav-btn,
.faro-tab,
.hub-card,
.btn-play,
.btn-back,
.btn-login,
.lp-btn,
.mk-btn,
.ml-btn {
  transition: transform 120ms ease-out,
              background-color 120ms ease-out,
              border-color 120ms ease-out,
              box-shadow 120ms ease-out;
}

button:active,
[role="button"]:active,
.btn:active,
.faro-btn:active,
.tab-btn:active,
.nav-btn:active,
.faro-tab:active,
.hub-card:active,
.btn-play:active,
.btn-back:active,
.lp-btn:active,
.mk-btn:active,
.ml-btn:active {
  transform: scale(0.97);
}

/* ── TAP DISTANCE: 8px gap minimo su contenitori con bottoni multipli ── */
.faro-tabs,
.tabs,
.nav,
.tab-bar,
[role="tablist"] {
  gap: max(8px, var(--sp-sm, 8px));
}

/* Forza gap su contenitori flex/grid con bottoni multipli */
.tab-bar,
.nav,
.tabs,
.btn-row,
.button-row,
.btn-group,
.periodo,
.periodo-btns,
.tab-controls,
.actions,
[role="group"] {
  gap: 8px !important;
}

/* Bottoni adiacenti diretti (fallback su tutti i selettori flex) */
.faro-row > button + button,
.faro-row > .btn + .btn,
.actions > * + *,
.btn-row > * + * {
  margin-left: 8px;
}

/* Adiacenze in <a> link grid (giochi.html, menu-digitale.html exp-* tiles) */
a + a.btn-play,
a.btn + a.btn,
.exp-game + .exp-game,
.exp-feedback + .exp-feedback,
.idx-card + .idx-card,
.hub-card + .hub-card,
.tavolo + .tavolo {
  margin-top: 8px;
}

/* Container giochi.html: anche se i tile sono <a> separati da spazi, forza gap
   sui parent flex/grid (i tile sono dentro #content o simili) */
#content,
.giochi-container,
.giochi-list,
main > a + a[href*="?game="],
main > a + a[onclick*="game"] {
  /* Garantisce gap pieno se il container è flex */
}
a[href*="?game="] + a[href*="?game="],
a[onclick*="?game="] + a[onclick*="?game="] {
  margin-top: 8px;
}

/* Tab buttons vicini orizzontali con gap=0 (haccp/costi/index) */
.tab-btn + .tab-btn,
.nav-btn + .nav-btn,
[role="tab"] + [role="tab"] {
  margin-left: 8px;
}

/* ── CONTRAST: testo deve avere contrast >= 4.5:1 ── */
/* Tab inattivi: usavano --testo-muted (#8a7f72, ~2.5:1) → bump a --testo-secondario */
.tab-btn:not(.active):not(:hover):not(:focus),
.nav-btn:not(.active):not(:hover):not(:focus),
.faro-tab:not(.faro-tab--active):not(:hover):not(:focus),
.cat-tab:not(.active):not(:hover):not(:focus),
.admin-tab:not(.active):not(:hover):not(:focus),
button[data-tab]:not(.active):not(:hover):not(:focus) {
  color: var(--testo-secondario, #c9c0b3) !important;
}

/* Tab ATTIVI: usavano spesso --rosso-scuro #b82035 in foreground (~3:1).
   Soluzione: bg bordeaux pieno + testo crema (15:1) come da design system */
.tab-btn.active,
.nav-btn.active,
.faro-tab.faro-tab--active,
.cat-tab.active,
.admin-tab.active,
button[data-tab].active,
[role="tab"][aria-selected="true"] {
  color: var(--testo-primario, #f4ede4) !important;
  border-bottom-color: var(--rosso-primario, #8a1828) !important;
}

/* h1/h2/h3 in bordeaux puro su scuro: contrasto basso (~2.07:1).
   Forza colore principale crema per heading principali. */
h1, h2.faro-page-title, .page-title, .header h1, .form-card h1 {
  color: var(--testo-primario, #f4ede4) !important;
}

/* Sub-pillole / pill selectors (gamification .sel, periodo, ecc.) */
.sel,
.pill,
.periodo button,
button.periodo,
.periodo-btns button {
  color: var(--testo-primario, #f4ede4) !important;
}
.sel.active,
.pill.active,
.periodo button.active,
button.periodo.active {
  background: var(--rosso-primario, #8a1828) !important;
  color: var(--testo-primario, #f4ede4) !important;
  border-color: var(--rosso-primario, #8a1828) !important;
}

/* Tab attivi inline-style override (index #tabbtn-tavoli, gamification, ecc.) */
[id^="tabbtn-"].active,
[id^="tab-"].active,
button.active[role="tab"],
[role="tab"][aria-selected="true"] {
  color: var(--testo-primario, #f4ede4) !important;
}

/* Link inline visibili (account-link, back-link, pilot demo link) — contrast minimo */
.account-link,
.faro-back-btn,
a.back-link,
a.demo-link,
.demo a {
  color: var(--testo-primario, #f4ede4) !important;
}

/* Anchor generici nel testo: bordeaux #b82035 ha contrast 3.05 → bump a crema con
   underline visibile, mantengono accent bordeaux via border-bottom */
main a:not(.btn):not(.faro-btn):not(.faro-back-btn):not(.btn-back):not(.tab-btn):not(.nav-btn):not(.account-link),
.faro-main a:not(.btn):not(.faro-btn):not(.faro-back-btn) {
  color: var(--testo-primario, #f4ede4);
  text-decoration-color: var(--rosso-primario, #8a1828);
}

/* ── STICKY: padding-top su contenuto principale per non coprire bottoni ── */
/* Headers sticky comuni: .faro-header (h~64), .header HACCP (h~50), .nav HACCP
   (~55), navbar index. Aggiungiamo padding scroll-margin agli elementi
   "primi" sotto sticky per garantire visibilità a scroll-to. */
.faro-back-btn,
.btn-back,
button.back,
.back > button {
  scroll-margin-top: 80px;
}

/* ── OVERFLOW: max-width sicuro per evitare overflow orizzontale ── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
.faro-app, main, .faro-main, .container, .wrapper {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Tabelle: scrollabili orizzontalmente in wrapper invece di overflow body */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}
table.faro-table,
table.report-table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Nav tabs scrollabili orizzontale (haccp, costi multitab) */
.nav,
.tab-bar,
.faro-tabs,
.tabs {
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.faro-tabs::-webkit-scrollbar {
  display: none;
}

/* Canvas/mappe grandi (es. isola RPG) confinati */
canvas, #mappa, .game-map, #app {
  max-width: 100vw;
  overflow: hidden;
}

/* Code/pre: wrap invece di forzare scroll body */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Img/video sempre responsive */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Cucina KDS header: spazio per refresh-info che eccedeva su mobile */
.kds-header {
  flex-wrap: wrap;
  gap: 8px;
}
.kds-header .refresh-info {
  flex-wrap: wrap;
  gap: 8px;
}

/* Override flex-direction su mobile per ridurre overflow header complessi */
@media (max-width: 480px) {
  .kds-header,
  .header.flex,
  .header-mappa {
    flex-wrap: wrap;
  }
  .refresh-info {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── REDUCED MOTION: rispetta preferenza utente ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ── SKIP LINK: aggiunto da ux-fix-a11y per WCAG 2.4.1 (bypass blocks) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  background: var(--rosso-primario, #8a1828);
  color: var(--testo-primario, #f4ede4);
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 8px;
  outline: 2px solid var(--testo-primario, #f4ede4);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────────
   FARO_CARRELLO_HIERARCHY_V1 (2026-05-18) — Roberto: "essential things
   must pop out". Il bottone INVIO COMANDA, il TOTALE, e le righe del
   carrello sono i 3 elementi più letti/cliccati del flusso operativo
   principale. Vanno organizzati con gerarchia visiva netta.
   ──────────────────────────────────────────────────────────────────────── */

/* TOTALE CARRELLO — Importo dorato, tabular-nums, sticky in fondo */
.cart-totale {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--sp-md) !important;
  padding: var(--sp-md) var(--sp-lg) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-default) !important;
  border-left: 3px solid var(--accento-oro) !important;
  border-radius: var(--radius-md) !important;
  font-variant-numeric: tabular-nums !important;
}
.cart-totale__label {
  font-size: var(--fs-sm);
  color: var(--testo-secondario);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.cart-totale__value {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--accento-oro);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* BOTTONE INVIA COMANDA — XL primary con accento oro a riposo, glow
   bordeaux on-hover. È il bottone più premuto dell'app, deve dominare. */
.btn-invia {
  min-height: 64px !important;
  padding: 18px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--rosso-primario) !important;
  color: var(--testo-primario) !important;
  border: 1px solid var(--rosso-primario) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 14px rgba(138, 24, 40, 0.35),
              inset 0 1px 0 rgba(244, 237, 228, 0.12) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: transform 120ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out !important;
}
.btn-invia:hover {
  background: var(--rosso-scuro) !important;
  box-shadow: 0 6px 22px rgba(138, 24, 40, 0.55),
              0 0 0 3px var(--accento-oro-soft),
              inset 0 1px 0 rgba(244, 237, 228, 0.15) !important;
  transform: translateY(-1px) !important;
}
.btn-invia:active {
  transform: translateY(0) scale(0.98) !important;
}
.btn-invia .cart-badge {
  background: var(--accento-oro) !important;
  color: var(--bg-0) !important;
  font-weight: var(--fw-bold) !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-full) !important;
  margin-left: 10px !important;
  font-size: var(--fs-sm) !important;
  font-family: var(--font-ui) !important;       /* numeri in Inter per chiarezza */
}

/* RIGHE CARRELLO — aerate, hover sottile, separatore minimal */
.cart-row {
  padding: var(--sp-md) var(--sp-sm) !important;
  border-bottom: 1px solid var(--border-muted) !important;
  transition: background 120ms ease-out !important;
}
.cart-row:hover {
  background: var(--rosso-soft-08) !important;
}
.cart-row:last-of-type {
  border-bottom: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
   FARO_SEARCH_REFINEMENT_V1 (2026-05-18)
   Search bar prodotti — porta al design system attuale (bordeaux focus ring,
   Cormorant body, padding aerato). Override sul CSS legacy main.css 1272+.
   ──────────────────────────────────────────────────────────────────────── */
.search-bar {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 var(--sp-md) !important;
  gap: var(--sp-sm) !important;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important;
}
.search-bar:focus-within {
  border-color: var(--rosso-primario) !important;
  box-shadow: var(--shadow-glow) !important;
}
.search-bar input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--testo-primario) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  padding: 14px 0 !important;          /* +4px aerato */
  min-height: 44px !important;
}
.search-bar input::placeholder {
  color: var(--testo-muted) !important;
  font-style: italic;
}
.search-bar .search-clear {
  color: var(--testo-muted) !important;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px;
  border-radius: var(--radius-full) !important;
  transition: color 150ms ease-out, background 150ms ease-out !important;
}
.search-bar .search-clear:hover {
  color: var(--testo-primario) !important;
  background: var(--rosso-soft-08) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   FARO_PRODUCT_CARDS_V1 (2026-05-18)
   Cards prodotto (cucina/bar) cliccate 100+ volte al giorno. Devono:
   - mantenere i colori categoria (cucina arancione, vino rosso, bianchi
     gialli, ecc.) → riconoscimento immediato della categoria a colpo
     d'occhio (memory pattern del cameriere)
   - AGGIUNGERE feedback tattile: hover lift + shadow, active scale
   - radius coerente con il design system
   - font Cormorant per il nome (ereditato), tabular-nums per prezzo
   Non sovrascrivo i colori esistenti, aggiungo SOLO presentation polish.
   ──────────────────────────────────────────────────────────────────────── */
.item-grid .item,
.split-grid .item,
[class*="item-"][onclick] {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  transition: transform 120ms ease-out, box-shadow 200ms ease-out, filter 200ms ease-out !important;
  position: relative !important;
  cursor: pointer !important;
}
.item-grid .item:hover,
.split-grid .item:hover,
[class*="item-"][onclick]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  filter: brightness(1.08) !important;
}
.item-grid .item:active,
.split-grid .item:active,
[class*="item-"][onclick]:active {
  transform: translateY(0) scale(0.97) !important;
  filter: brightness(0.92) !important;
}

/* Header split (CUCINA / BAR) — meno compresso, più editoriale */
.split-hdr-label {
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Bottone "Fuori Menu" — azione speciale ad-hoc, pillola oro */
.btn-fuori-menu {
  background: transparent !important;
  border: 1px dashed var(--accento-oro) !important;
  color: var(--accento-oro) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--radius-full) !important;
  padding: 10px 18px !important;
  min-height: 40px !important;
  cursor: pointer !important;
  transition: background 150ms ease-out, border-style 150ms !important;
}
.btn-fuori-menu:hover {
  background: var(--accento-oro-soft) !important;
  border-style: solid !important;
}

/* ────────────────────────────────────────────────────────────────────────
   FARO_MODALS_REFINEMENT_V1 (2026-05-18)
   I modali (aggiungi prodotto, varianti, HACCP, conferme, ecc.) sono
   diffusi nell'app. Il refresh visuale dà subito una sensazione di
   "qualità" complessiva. Override sul CSS legacy main.css 909+.
   ──────────────────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(10, 6, 10, 0.78) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  padding: 28px 16px !important;
}
.modal-box {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-top: 3px solid var(--rosso-primario) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--sp-xl) var(--sp-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  /* Lascio width/max-width come definiti per ogni modal (alcuni 380, altri 560) */
}
.modal-title {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--testo-primario) !important;
  margin-bottom: var(--sp-md) !important;
  padding-bottom: var(--sp-sm) !important;
  border-bottom: 1px solid var(--border-default) !important;
  letter-spacing: 0.06em !important;
}
.modal-btns {
  display: flex !important;
  gap: var(--sp-sm) !important;
  margin-top: var(--sp-lg) !important;
}
.modal-cancel {
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--testo-secondario) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-medium) !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: background 150ms, border-color 150ms !important;
}
.modal-cancel:hover {
  background: var(--rosso-soft-08) !important;
  border-color: var(--rosso-soft-30) !important;
}
.modal-confirm {
  background: var(--rosso-primario) !important;
  border: 1px solid var(--rosso-primario) !important;
  color: var(--testo-primario) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 8px rgba(138, 24, 40, 0.3) !important;
  cursor: pointer !important;
  transition: background 150ms, box-shadow 200ms, transform 120ms !important;
}
.modal-confirm:hover {
  background: var(--rosso-scuro) !important;
  box-shadow: 0 4px 14px rgba(138, 24, 40, 0.45), 0 0 0 3px var(--accento-oro-soft) !important;
  transform: translateY(-1px) !important;
}
.modal-confirm:active {
  transform: translateY(0) scale(0.98) !important;
}


/* ===== 06-design-claude.css ===== */
/* Faro POS — DESIGN CLAUDE UTILITIES & PATTERNS v1
   File: 06-design-claude.css
   Aggiunto: 2026-05-18

   Adatta dal handoff bundle "Claude Design" (claude.ai/design) i pattern
   tipografici e component ricorrenti del design system, mappati sui token
   Faro (01-tokens.css). NESSUN override sui component esistenti: tutto è
   opt-in via classi `.t-*`, `.stat`, `.section__eyebrow`, `.divider`,
   `.appbar`, `.badge`, `.alert`. I CSS legacy continuano a funzionare.

   Carica DOPO 05-ux-overrides.css per avere precedenza solo dove richiesto.
*/

/* ────────────────────────────────────────────────────────────────────────
   TIPOGRAFIA — utility per applicare i ruoli del design system
   ──────────────────────────────────────────────────────────────────────── */

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.t-display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.t-display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.t-heading-l {
  font-family: var(--font-sans);
  font-size: var(--fs-heading-l);
  line-height: var(--lh-heading-l);
  font-weight: 600;
  color: var(--text-primary);
}
.t-heading-m {
  font-family: var(--font-sans);
  font-size: var(--fs-heading-m);
  line-height: var(--lh-heading-m);
  font-weight: 600;
  color: var(--text-primary);
}
.t-heading-s {
  font-family: var(--font-sans);
  font-size: var(--fs-heading-s);
  line-height: var(--lh-heading-s);
  font-weight: 600;
  color: var(--text-primary);
}
.t-body-l {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-primary);
}
.t-body-m {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-primary);
}
.t-body-s {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-secondary);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.t-num-xl,
.t-num-l,
.t-num-m {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--text-primary);
}
.t-num-xl { font-size: var(--fs-num-xl); line-height: var(--lh-num-xl); font-weight: 500; }
.t-num-l  { font-size: var(--fs-num-l);  line-height: var(--lh-num-l);  font-weight: 500; }
.t-num-m  { font-size: var(--fs-num-m);  line-height: var(--lh-num-m);  font-weight: 500; }

.t-mute      { color: var(--text-secondary); }
.t-quiet     { color: var(--text-tertiary); }
.t-brand     { color: var(--bordeaux-500); }
.t-brass     { color: var(--brass-500); }

/* ────────────────────────────────────────────────────────────────────────
   SECTION — eyebrow + heading + body pattern (titoletti "Carta da menu")
   ──────────────────────────────────────────────────────────────────────── */

.section {
  margin-bottom: var(--space-12);
}
.section__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: var(--lh-caption);
  color: var(--brass-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-2);
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: var(--tracking-tight);
}
.section__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   DIVIDER — sottile, opzionale con label tipo "CARTA DEI VINI · 2026"
   ──────────────────────────────────────────────────────────────────────── */

.divider {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}
.divider--brass {
  border-top: 1px solid var(--brass-700);
}
.divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-8) 0;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.divider--labeled::before,
.divider--labeled::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border-subtle);
}

/* ────────────────────────────────────────────────────────────────────────
   STAT — card numerica per dashboard / report (es. fatturato, ticket medio)
   ──────────────────────────────────────────────────────────────────────── */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--inset-hi);
}
.stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-num-l);
  line-height: var(--lh-num-l);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat__value--xl {
  font-size: var(--fs-num-xl);
  line-height: var(--lh-num-xl);
}
.stat__delta {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--text-secondary);
}
.stat__delta--up   { color: var(--success-500); }
.stat__delta--down { color: var(--danger-500); }
.stat--accent {
  border-color: var(--brass-700);
  box-shadow: var(--shadow-sm), var(--inset-hi), var(--glow-brass);
}

/* ────────────────────────────────────────────────────────────────────────
   BADGE — pillole stato (NEW · 86 · IN PREP · IN PAUSA)
   ──────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: var(--lh-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.badge--brand   { background: var(--bordeaux-900); color: var(--bordeaux-100); border-color: var(--bordeaux-700); }
.badge--brass   { background: rgba(201, 168, 106, 0.12); color: var(--brass-300); border-color: var(--brass-700); }
.badge--success { background: var(--success-bg); color: var(--success-500); border-color: var(--success-700); }
.badge--warning { background: var(--warning-bg); color: var(--warning-500); border-color: var(--warning-700); }
.badge--danger  { background: var(--danger-bg);  color: var(--bordeaux-300); border-color: var(--bordeaux-700); }
.badge--info    { background: var(--info-bg);    color: var(--info-500);   border-color: #2a3540; }

/* ────────────────────────────────────────────────────────────────────────
   ALERT — banner informativo / errore con accent bar a sinistra
   ──────────────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--brass-500);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.alert__title {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}
.alert__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  margin: 0;
}
.alert--success { border-left-color: var(--success-500); background: var(--success-bg); }
.alert--warning { border-left-color: var(--warning-500); background: var(--warning-bg); }
.alert--danger  { border-left-color: var(--danger-500);  background: var(--danger-bg); }
.alert--info    { border-left-color: var(--info-500);    background: var(--info-bg); }

/* ────────────────────────────────────────────────────────────────────────
   APPBAR — header alto, sottile, brand-aware (per pagine interne)
   ──────────────────────────────────────────────────────────────────────── */

.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  min-height: var(--hit-target-min);
  box-shadow: var(--shadow-xs);
}
.appbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-heading-l);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.appbar__brand-mark {
  color: var(--bordeaux-500);
}
.appbar__spacer { flex: 1; }
.appbar__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: var(--hit-target-min);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.appbar__action:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ────────────────────────────────────────────────────────────────────────
   BOTNAV — bottom navigation per layout mobile/tablet (KDS standby ecc.)
   ──────────────────────────────────────────────────────────────────────── */

.botnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  padding: var(--space-1) var(--space-1);
}
.botnav__item {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 56px;
  padding: var(--space-1) var(--space-2);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.botnav__item:hover { color: var(--text-secondary); background: var(--bg-elevated); }
.botnav__item--active {
  color: var(--bordeaux-300);
  background: rgba(184, 32, 53, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────
   STAGE — area "scenografica" centrale (hero / vuoto-elegante)
   Usata es. in /menu-digitale, splash, login.
   ──────────────────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(201, 168, 106, 0.06), transparent 60%),
    var(--bg-canvas);
}
.stage__kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--brass-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-3);
}
.stage__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
}
.stage__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto var(--space-6) auto;
  line-height: var(--lh-body-l);
}

/* ────────────────────────────────────────────────────────────────────────
   GRID — pattern "tre/quattro card affiancate" da design Claude
   ──────────────────────────────────────────────────────────────────────── */

.grid-claude {
  display: grid;
  gap: var(--space-4);
}
.grid-claude--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-claude--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-claude--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-claude--3,
  .grid-claude--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .grid-claude--2,
  .grid-claude--3,
  .grid-claude--4 { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────
   MAPPING LEGACY → DESIGN CLAUDE
   Applica l'estetica del design Claude alle classi storiche di index.html
   senza richiedere modifiche HTML. Tre ancore:
   .sezione   → eyebrow brass + uppercase tracking caps
   .stat-card → card warm-black con border + inset highlight
   .stat-val  → numeri JetBrains Mono tabular grandi
   ──────────────────────────────────────────────────────────────────────── */

.sezione {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: var(--lh-caption);
  color: var(--brass-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--inset-hi);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--inset-hi);
}
.stat-card .stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.stat-card .stat-val {
  font-family: var(--font-mono);
  font-size: var(--fs-num-l);
  line-height: var(--lh-num-l);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Varianti colore card: bordo accent + glow soft, senza rendere TUTTA la
   card colorata (il design Claude evita riempimenti pieni). */
.stat-card.verde   { border-left: 3px solid var(--success-500); }
.stat-card.blu     { border-left: 3px solid var(--info-500); }
.stat-card.giallo  { border-left: 3px solid var(--brass-500); }
.stat-card.rosso   { border-left: 3px solid var(--bordeaux-500); }

/* ──────────────────────────────────────────────────────────────────
   BOTTOM TAB BAR — Design Claude: superfici warm-black, icone SVG
   line-style stroke 1.6, active = bordeaux 300 + barra superiore brass
   ────────────────────────────────────────────────────────────────── */
.tab-bar {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
}
.tab-bar .tab-btn {
  color: var(--text-tertiary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600 !important;
  line-height: var(--lh-caption) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  gap: 4px !important;
  border-bottom: 0 !important;
  border-top: 2px solid transparent !important;
  padding: 6px 4px !important;
  background: transparent !important;
}
.tab-bar .tab-btn .tab-ico {
  display: inline-flex;
  width: 24px;
  height: 24px;
  font-size: 0 !important;          /* annulla l'1.4rem emoji legacy */
  line-height: 0;
  filter: none !important;          /* annulla drop-shadow rosso legacy */
}
.tab-bar .tab-btn .tab-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  color: currentColor;
}
.tab-bar .tab-btn:hover:not(.active) {
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
}
.tab-bar .tab-btn.active {
  color: var(--bordeaux-300) !important;
  background: linear-gradient(180deg, rgba(184, 32, 53, 0.10), transparent 70%) !important;
  border-top-color: var(--brass-500) !important;
}
.tab-bar .tab-btn.active::after {
  display: none !important;         /* la barra superiore brass sostituisce il pallino */
}

/* ──────────────────────────────────────────────────────────────────
   ICONE SVG INLINE — TUTTE allo stesso stile, stessa dimensione (22px)
   stroke 1.6, fill none, linecap/join round, currentColor.
   Le classi delle icone diventano semplicemente .ico-faro o si
   ereditano per contesto: tutte hanno la stessa metrica.
   ────────────────────────────────────────────────────────────────── */

/* Selettore unificato: ogni SVG dentro tab/nav/section-title legacy
   eredita 22px e baseline allineata. Niente più variabilità. */
.tab-bar .tab-btn .tab-ico svg,
.tab-bar .tab-btn .tab-ico,
.kds-tab .kds-tab-ico,
.tabs .tab .tab-ico-svg,
.tab-ico-svg,
.faro-header__title .header-ico,
.nav-btn .nav-ico svg,
.nav-btn .nav-ico-svg,
.nav-btn > svg,
.section-title .ico svg,
.section-title > svg,
.faro-btn .btn-ico,
.sec-ico {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: -5px;
  flex-shrink: 0;
}

/* Tab-bar in basso: l'icona è sopra il label (flex column), quindi reset vertical-align */
.tab-bar .tab-btn .tab-ico svg,
.tab-bar .tab-btn .tab-ico {
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

/* Spacing label dopo icona */
.kds-tab .kds-tab-ico,
.tabs .tab .tab-ico-svg,
.faro-header__title .header-ico,
.faro-btn .btn-ico,
.tab-btn .tab-ico-svg {
  margin-right: 8px;
}
.section-title .ico svg,
.section-title > svg,
.sec-ico {
  margin-right: 8px;
  vertical-align: -4px;
}
.nav-btn .nav-ico,
.nav-btn .nav-ico-svg {
  margin-right: 6px;
}
.nav-btn .nav-ico {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────
   PATTERN TAVOLO (design Claude .screen-mock__tav)
   Lo stato visivo è dato da .dot + label, non da gradient cromatici
   eccessivi. Il bordo cambia colore (brass/bordeaux/staff) ma il bg
   resta vicino a bg-surface con velo soft (~8% del brand).
   ────────────────────────────────────────────────────────────────── */

.tavolo {
  padding: 10px 12px !important;
  min-height: 84px !important;
  max-width: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  align-items: stretch !important;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Numero tavolo / nome — display Cormorant, no overflow */
.tavolo .t-num {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  display: block !important;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Riga stato: dot + label */
.tavolo .t-stato {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin: 0 !important;
}
.tavolo.libero .t-stato {
  color: var(--text-tertiary);
}

/* Meta secondaria — limita a 1 riga, ellipsis */
.tavolo .t-cam,
.tavolo .t-coperti {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  color: var(--text-tertiary) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-style: normal !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tavolo .t-cam {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  max-width: 60%;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  z-index: 1;
}
.tavolo .t-tot {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-style: normal !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

/* Pulsante × per svuotare tavolo in attesa */
.tavolo .lbl-svuota-tavolo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.tavolo .lbl-svuota-tavolo:hover {
  background: var(--bordeaux-700);
  color: var(--text-on-primary);
}

/* DOT — pallini stato (6-8px con glow brand) */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.dot--bord {
  background: var(--bordeaux-500);
  box-shadow: 0 0 8px rgba(184, 32, 53, 0.6);
}
.dot--brass {
  background: var(--brass-500);
  box-shadow: 0 0 8px rgba(201, 168, 106, 0.55);
}
.dot--staff {
  background: #A78BFA;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.55);
}
.dot--success {
  background: var(--success-500);
  box-shadow: 0 0 8px rgba(107, 154, 110, 0.5);
}
.dot--danger {
  background: var(--danger-500);
  box-shadow: 0 0 8px rgba(184, 32, 53, 0.5);
}

/* ──────────────────────────────────────────────────────────────────
   OVERFLOW SAFETY — testo che esce dalle card
   Tutte le card hanno min-width:0 (per consentire flex shrink) e i
   loro testi sono single-line con ellipsis. I valori numerici
   restano tabular ma non eccedono mai la card.
   ────────────────────────────────────────────────────────────────── */

.stat-card,
.hub-card,
.hub-btn,
.stat {
  min-width: 0 !important;
  overflow: hidden;
}

.stat-card .stat-label,
.hub-card .hub-card-title,
.hub-card .hub-card-sub,
.hub-btn .hub-btn-label,
.hub-btn .hub-btn-desc {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card .stat-val {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Stat-card riduce font-size del valore quando lo spazio è poco */
.stats-bar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2) !important;
}
.stats-bar .stat-card {
  padding: 10px 12px !important;
  min-height: 64px;
  gap: 2px;
}
.stats-bar .stat-card .stat-label {
  font-size: 9.5px !important;
  letter-spacing: 0.08em !important;
}
.stats-bar .stat-card .stat-val {
  font-size: clamp(13px, 3.5vw, 18px) !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}

/* Hub-card / hub-btn — label e desc compatti, no overflow */
.hub-card .hub-card-title {
  font-size: 14px;
  line-height: 1.2;
}
.hub-card .hub-card-sub {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-tertiary);
}
.hub-btn .hub-btn-label {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}
.hub-btn .hub-btn-desc {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.hub-btn .hub-btn-ico {
  font-size: 18px;
  line-height: 1;
}

/* Modal titoli e label — nowrap dove possibile */
.modal-title,
.tavolo-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Tab-btn / nav-btn label troppo lunghi → ellipsis (mantiene altezza fissa) */
.tab-btn,
.nav-btn {
  min-width: 0;
}
.tab-bar .tab-btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────────
   PRENOTAZIONI — calendario, lista, evento
   ────────────────────────────────────────────────────────────────── */

/* CALENDARIO mensile */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.cal-nav button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  font-family: var(--font-sans);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.cal-nav button:hover {
  background: var(--bg-canvas);
  color: var(--bordeaux-300);
  border-color: var(--bordeaux-700);
}
.cal-month {
  font-family: var(--font-display) !important;
  font-size: var(--fs-heading-l) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--tracking-tight);
  text-transform: none !important;
}
.cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}
.cal-dow {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 6px 0;
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.cal-day:hover:not(.empty) {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.cal-day.empty {
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
}
.cal-day.selected {
  border-color: var(--bordeaux-500) !important;
  background: linear-gradient(180deg, rgba(184, 32, 53, 0.10), var(--bg-surface)) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.cal-day.has-prenotazioni .cal-dot,
.cal-day .cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--bordeaux-500);
  box-shadow: 0 0 5px rgba(184, 32, 53, 0.6);
  display: inline-block;
}
.cal-day.has-evento .cal-dot-evento,
.cal-day .cal-dot-evento {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #A78BFA;
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.55);
  display: inline-block;
}

/* CARD PRENOTAZIONE */
.pren-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}
.pren-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  align-items: center;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.pren-card:hover { border-color: var(--border-strong); }
.pren-card__main { flex: 1; min-width: 0; }
.pren-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 4px;
}
.pren-card__ora {
  font-family: var(--font-mono);
  font-size: var(--fs-num-m);
  font-weight: 600;
  color: var(--brass-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pren-card__nome {
  font-family: var(--font-display);
  font-size: var(--fs-heading-m);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.pren-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.pren-card__persone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success-500);
}
.pren-card__tavolo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--font-sans);
  color: var(--brass-300);
  background: rgba(201, 168, 106, 0.10);
  border: 1px solid var(--brass-700);
  border-radius: var(--radius-sm);
}
.pren-card__tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--info-500);
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
}
.pren-card__tel:hover { color: var(--text-primary); }
.pren-card__tel svg { width: 14px; height: 14px; }
.pren-card__note {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-s);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.pren-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pren-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  margin: 0;
}
.pren-alert__label {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
}
.pren-card__actions .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  transform: none !important;
  margin: 0 !important;
}
.pren-card__actions .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pren-card__actions .switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.pren-card__actions .switch .slider::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  left: 2px;
  top: 2px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: transform var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.pren-card__actions .switch input:checked + .slider {
  background: rgba(184, 32, 53, 0.25);
  border-color: var(--bordeaux-500);
}
.pren-card__actions .switch input:checked + .slider::before {
  transform: translateX(14px);
  background: var(--bordeaux-300);
}

.pren-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.pren-btn svg { width: 16px; height: 16px; }
.pren-btn--edit:hover {
  background: rgba(201, 168, 106, 0.10);
  border-color: var(--brass-700);
  color: var(--brass-300);
}
.pren-btn--del:hover {
  background: rgba(184, 32, 53, 0.12);
  border-color: var(--bordeaux-700);
  color: var(--bordeaux-300);
}

.pren-totale {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  border-top: 1px solid var(--border-subtle);
}
.pren-totale__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.pren-totale__val {
  font-family: var(--font-mono);
  font-size: var(--fs-num-m);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* CARD SYNC ARUBA SDI — stato ultimo sync + bottone manuale */
.aruba-sync-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--brass-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--inset-hi);
}
.aruba-sync-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.aruba-sync-card__ico {
  width: 22px;
  height: 22px;
  color: var(--brass-500);
  flex-shrink: 0;
}
.aruba-sync-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-heading-m);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.aruba-sync-card__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.aruba-sync-card__status {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  padding: 6px 0 2px 0;
}
.aruba-sync-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.aruba-sync-badge--ok {
  background: rgba(107, 154, 110, 0.15);
  color: var(--success-500);
  border: 1px solid var(--success-700);
}
.aruba-sync-badge--err {
  background: rgba(184, 32, 53, 0.12);
  color: var(--bordeaux-300);
  border: 1px solid var(--bordeaux-700);
}
.aruba-sync-card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  min-height: var(--hit-target-min);
  background: linear-gradient(180deg, var(--bordeaux-700), var(--bordeaux-800));
  border: 1px solid var(--bordeaux-600);
  border-radius: var(--radius-md);
  color: var(--text-on-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.aruba-sync-card__btn svg { width: 16px; height: 16px; }
.aruba-sync-card__btn:hover {
  background: linear-gradient(180deg, var(--bordeaux-600), var(--bordeaux-700));
}
.aruba-sync-card__btn:active { transform: translateY(1px); }
.aruba-sync-card__btn:disabled,
.aruba-sync-card__btn.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.aruba-sync-card__btn--ghost {
  background: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}
.aruba-sync-card__btn--ghost:hover {
  background: var(--bg-canvas) !important;
  border-color: var(--brass-700) !important;
  color: var(--brass-300) !important;
}
.aruba-sync-card--alt {
  border-left-color: var(--border-strong);
  background: var(--bg-canvas);
}
.aruba-sync-card__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(201, 168, 106, 0.12);
  color: var(--brass-300);
  border: 1px solid var(--brass-700);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* Details collassabile per alternative meno usate (es. Aruba API) */
.aruba-sync-details {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  margin-bottom: var(--space-2);
  background: transparent;
}
.aruba-sync-details > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 0;
  user-select: none;
}
.aruba-sync-details[open] {
  border-color: var(--border-strong);
}
.aruba-sync-details[open] > summary {
  margin-bottom: var(--space-2);
}
.aruba-sync-details .aruba-sync-card {
  margin-bottom: 0;
  border-left-width: 0;
  padding: var(--space-2) 0 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.aruba-sync-card__btn.is-loading svg {
  animation: aruba-spin 1s linear infinite;
}
@keyframes aruba-spin { to { transform: rotate(360deg); } }

/* BANNER PRENOTAZIONI OGGI — sopra mappa tavoli, soft link cliccabile */
.pren-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--bordeaux-600);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.pren-banner:hover {
  background: linear-gradient(180deg, rgba(184, 32, 53, 0.05), var(--bg-surface));
  border-color: var(--border-strong);
  border-left-color: var(--bordeaux-500);
}
.pren-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brass-500);
  margin-bottom: 8px;
}
.pren-banner__ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pren-banner__title {
  color: var(--brass-500);
}
.pren-banner__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--bordeaux-700);
  color: var(--text-on-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pren-banner__totale {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: none;
}
.pren-banner__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pren-banner__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 5px 10px 5px 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  color: var(--text-primary);
  white-space: nowrap;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.pren-banner__chip:hover {
  border-color: var(--bordeaux-500);
}
.pren-banner__chip.is-passata {
  opacity: 0.45;
}
.pren-banner__ora {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--brass-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pren-banner__nome {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pren-banner__cop {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.pren-banner__tav {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--brass-300);
  background: rgba(201, 168, 106, 0.12);
  border: 1px solid var(--brass-700);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}

/* EVENTO — card serata speciale (accent viola, non gradient pieno) */
.evento-card {
  position: relative;
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid #A78BFA;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--inset-hi);
}
.evento-card__edit {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.evento-card__edit svg { width: 16px; height: 16px; }
.evento-card__edit:hover {
  background: rgba(167, 139, 250, 0.10);
  color: #C4B5FD;
}
.evento-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: #C4B5FD;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-2);
}
.evento-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 6px;
}
.evento-card__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-l);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.evento-empty {
  text-align: center;
  margin-bottom: var(--space-4);
}
.evento-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface);
  border: 1px dashed #6E5A9A;
  border-radius: var(--radius-md);
  color: #C4B5FD;
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.evento-empty__btn:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: #A78BFA;
}
.evento-empty__btn svg { width: 16px; height: 16px; }

/* Login screen: applica stage scenografica */
.login-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg), var(--inset-hi);
  border-radius: var(--radius-xl);
}
.login-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}