/* Mandrions Restaurant Suite — adattamento del DESIGN.md Square fornito dall'utente.
   Caricato per ultimo su ogni flusso: token e componenti comuni restano coerenti. */
:root {
  --sq-bg: #ffffff;
  --sq-surface: #f7f7f7;
  --sq-raised: #ebebeb;
  --sq-ink: #000000;
  --sq-body: #1c1c1c;
  --sq-muted: #5a5a5a;
  --sq-border: #d8d8d8;
  --sq-accent: #006aff;
  --sq-accent-hover: #0050c8;
  --sq-success: #1f8b4c;
  --sq-warning: #cc7700;
  --sq-warning-ink: #7a4b00;
  --sq-warning-bg: #fff4d6;
  --sq-danger: #cf202f;

  /* Alias storici usati dai microfrontend. */
  --navy: var(--sq-ink);
  --petrolio: var(--sq-ink);
  --teal: var(--sq-ink);
  --teal-hover: var(--sq-body);
  --off-white: var(--sq-surface);
  --white: var(--sq-bg);
  --text-2nd: var(--sq-muted);
  --border: var(--sq-border);
  --rame: var(--sq-accent);
  --error: var(--sq-danger);
  --error-bg: #fce8e9;
  --success: var(--sq-success);
  --success-bg: #e7f5ec;
  --font-sans: "Square Sans Text", "Square Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Square Sans Display", "Square Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, .08);
  --focus-ring: 0 0 0 3px rgba(0, 106, 255, .45);
  --content-w: 1280px;
}

body { font-family: var(--font-sans); background: var(--sq-surface); color: var(--sq-body); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--sq-ink); letter-spacing: -.02em; text-wrap: balance; }
button, input, select, textarea { font-family: var(--font-sans); }
a:not([class]) { color: var(--sq-accent); }
a:not([class]):hover { color: var(--sq-accent-hover); text-decoration: underline; }
.menu-side__links a:not([aria-current="page"]) { color: var(--sq-body); }
.menu-side__links a:not([aria-current="page"]):hover { color: var(--sq-ink); background: var(--sq-surface); }
.menu-side__links a[aria-current="page"] { color: #fff; }
.suite-module-nav { display: none !important; }
.menu-side__source-nav { display: none !important; }
.menu-side--has-modules > .menu-side__links { flex: 0 0 auto; }
.menu-side--has-sections > .menu-side__links { flex: 0 0 auto; }
.menu-side__links--sections { flex: none; padding-block: 0; }
.menu-side__links--sections a { min-width: 0; }
.menu-side__section-group { flex: none; margin: 5px 0 10px; }
.menu-side__section-group + .menu-side__section-group { padding-top: 10px; border-top: 1px solid var(--sq-border); }
.menu-side__section-group-title { margin: 0 12px 5px; color: var(--sq-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase; }
.menu-side__section-group-links { display: flex; flex-direction: column; gap: 2px; }
.audience-nav-group { display: flex; flex: none; flex-direction: column; gap: 2px; min-width: 0; }
.audience-nav-label { display: block; margin: 0 12px 3px; color: var(--sq-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase; }
.audience-nav-group[aria-label="Sezioni cliente"] > .audience-nav-label,
.menu-side__section-group[aria-label="Sezioni cliente"] > .menu-side__section-group-title { color: #155e63; }
.audience-nav-group[aria-label="Sezioni operatore"] > .audience-nav-label,
.menu-side__section-group[aria-label="Sezioni operatore"] > .menu-side__section-group-title { color: #84552f; }
.audience-nav-group[aria-label="Sezioni rider"] > .audience-nav-label,
.menu-side__section-group[aria-label="Sezioni rider"] > .menu-side__section-group-title { color: #155e63; }
.menu-side__links > .audience-nav-group + .audience-nav-group { margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--sq-border); }
.flow-nav > .audience-nav-group { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 14px; }
.flow-nav > .audience-nav-group + .audience-nav-group { border-left: 1px solid var(--sq-border); }
.flow-nav .audience-nav-label { flex: none; margin: 0 2px 0 0; white-space: nowrap; }
.flow-nav > .audience-nav-group[aria-label="Sezioni operatore"] .audience-nav-label { color: #84552f; }
.flow-nav .audience-nav-group a { min-height: 48px; }
.menu-side__module-group { flex: none; margin: 12px 12px 0; padding-top: 12px; border-top: 1px solid var(--sq-border); }
.menu-side__module-title { margin: 0; color: var(--sq-ink); font-size: 13px; font-weight: 700; }
.menu-side__module-hint { margin: 3px 0 8px; color: var(--sq-muted); font-size: 12px; line-height: 1.4; }
.menu-side__links--modules { flex: none; gap: 2px; padding-inline: 0; }
.menu-side__links--modules a { justify-content: space-between; gap: 12px; padding-inline: 16px; }
.menu-side--has-modules .menu-side__links--modules a[aria-current="location"] { background: var(--sq-ink); color: #fff; }
.menu-side--has-modules .menu-side__links--modules a[aria-current="location"]:hover { color: #fff; }
.menu-side__module-arrow { flex: none; color: var(--sq-muted); font-size: 18px; font-weight: 400; line-height: 1; }
.menu-side__links--modules a:hover .menu-side__module-arrow { color: var(--sq-accent); }
.menu-side__links--modules a:focus-visible .menu-side__module-arrow { color: inherit; }
.kds-top .kds-top__hamburger { border-color: var(--sq-border); background: transparent; }
.kds-top .kds-top__hamburger .hamburger__lines span { background: var(--sq-ink); }
.kds-top .kds-top__hamburger:hover { border-color: var(--sq-ink); background: var(--sq-surface); }
/* Navigazioni tra moduli: fondo neutro e sezione attiva nera, senza tinte residue. */
:is(.doc-nav, .cfg-nav, .hw-nav, .mk-nav, .web-nav, .staff-nav, .kds-nav, .suite-module-nav) {
  background-color: #fff;
  border-bottom-color: var(--sq-border);
}
:is(.doc-nav, .cfg-nav, .hw-nav, .mk-nav, .web-nav, .staff-nav, .kds-nav, .suite-module-nav) a[aria-current="page"] {
  background-color: var(--sq-ink);
  border-color: var(--sq-ink);
  color: #fff;
  box-shadow: none;
}
:is(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid rgba(0, 106, 255, .55);
  outline-offset: 2px;
}

/* Il nero porta le azioni primarie; il blu segnala link e focus. */
:is(.btn--primary, .button--primary, .primary-btn, .cta-primary,
    .doc-btn--primary, .cfg-btn--primary, .staff-btn--primary, .hw-btn--primary,
    .kds-btn--primary, .mk-btn--primary, .web-btn--primary,
    .button.primary,
    .cat-tab.is-active,
    .chip.is-active, .choice-row button[aria-pressed="true"]) {
  background: var(--sq-ink);
  border-color: var(--sq-ink);
  color: #fff;
}
:is(.btn--primary, .button--primary, .primary-btn, .cta-primary,
    .doc-btn--primary, .cfg-btn--primary, .staff-btn--primary, .hw-btn--primary,
    .kds-btn--primary, .mk-btn--primary, .web-btn--primary, .button.primary):hover {
  background: var(--sq-body);
  border-color: var(--sq-body);
}
:is(.card, .panel, .paper, .status-paper, .sent-card, .result, .dish, .kpi) {
  border-color: var(--sq-border);
  box-shadow: var(--shadow-sm);
}
:is(.topbar, .site-head, .flow-nav) { background: #fff; border-color: var(--sq-border); }
.topbar__brand > span:last-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; }
.topbar__brand > span:last-child small { display: block; color: var(--sq-muted); font-size: 12px; font-weight: 400; line-height: 1.2; }
.topbar__brand > span:last-child .topbar__module-context { color: var(--sq-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
:is(.kds-top, .staff-top) { background: #000; color: #fff; }
.kds-nav a[aria-current="page"] .kds-nav__n { color: #000; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.42); }

/* Tabelle: intestazioni leggibili e nettamente separate dai dati. */
main table thead th,
main table[class] th {
  background-color: #000;
  color: #fff;
  border-bottom: 1px solid #000;
  font-weight: 700;
}
main table tbody td { color: var(--sq-body); }
main table tbody tr:not(:last-child) td { border-bottom-color: var(--sq-border); }

/* Audit pass: controlli touch, selezioni e stati semantici. */
:where(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  [role="button"],
  a.btn,
  a.doc-btn,
  a.cta,
  .staff-btn,
  .hw-btn,
  .kds-btn,
  .mk-btn,
  .web-btn,
  .cfg-btn
) {
  min-height: 44px !important;
}
.info-btn,
.kds-info-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}
.rider-header .info-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.badge--warn {
  color: var(--sq-warning-ink);
  background: var(--sq-warning-bg);
  border-color: #e5c478;
}
.badge--info {
  color: var(--sq-body);
  background: var(--sq-raised);
  border-color: var(--sq-border);
}
.kds-filter button[aria-pressed="true"],
.kds-mobile-select button[aria-pressed="true"] {
  color: var(--sq-ink);
  border-color: var(--sq-ink);
  background: var(--sq-raised);
}
.web-choice.is-selected {
  border: 2px solid var(--sq-ink);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
}
.offer-app .choice-card:has(input:checked) {
  border-color: var(--sq-ink);
  background: var(--sq-surface);
}
.cta--ordina {
  color: #fff;
  border-color: var(--sq-ink);
  background: var(--sq-ink);
}
.cta--ordina:hover { color: #fff; background: var(--sq-body); }
.promemoria,
.non-accoppiate-zone {
  color: var(--sq-warning-ink);
  border: 1px solid #e5c478;
  background: var(--sq-warning-bg);
}
.promemoria__azione { color: var(--sq-warning-ink); }
.non-accoppiate-zone__titolo,
.non-accoppiate-zone__badge { color: var(--sq-warning-ink); }

/* Le scelte del modello commerciale devono mantenere parole leggibili sui tablet. */
@media (min-width: 761px) and (max-width: 850px) {
  .offer-app .choice-layout { grid-template-columns: minmax(0, 1fr); }
  .offer-app .choice-card { overflow-wrap: normal; word-break: normal; }
}
.offer-app .choice-card { overflow-wrap: normal; word-break: normal; }

/* Banner testuali operativi neutri; le illustrazioni dimostrative restano colorate. */
.rider-header {
  color: var(--sq-body);
  background: var(--sq-bg);
  border-bottom: 1px solid var(--sq-border);
}
.rider-header::after { display: none; }
.rider-header__avatar {
  color: var(--sq-body);
  background: var(--sq-raised);
  box-shadow: none;
}
.rider-header__nome,
.rider-header__badge,
.rider-header__badge strong { color: var(--sq-ink); }
.rider-header__eyebrow { color: var(--sq-muted); }
.rider-header__badge { border-color: var(--sq-border); background: #fff; }
.rider-header__badge span { color: var(--sq-muted); }
.rider-header__stato-pill { color: var(--sq-body); border-color: var(--sq-border); background: #fff; }
.rider-header__stato-pill--online { color: #155b38; border-color: #b6d9c1; background: #e7f5ec; }
.rider-header .rider-tabs__tab { color: var(--sq-body); border-color: var(--sq-border); background: #fff; }
.rider-header .rider-tabs__tab--attiva { color: #fff; border-color: var(--sq-ink); background: var(--sq-ink); }
.rider-header .rider-section-menu__trigger {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: #fff;
}
.rider-header .info-btn,
.rider-header .hamburger {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: #fff;
}
.rider-header .hamburger__lines span { background: var(--sq-body); }
.hamburger,
.rider-header .hamburger {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}
.cfg-hero,
.hw-hero,
.mk-hero,
.appointments-app .hero,
.loyalty-app .hero {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: var(--sq-surface);
  box-shadow: var(--shadow-sm);
}
.cfg-hero h1,
.cfg-hero p:not(.cfg-eyebrow),
.hw-hero h1,
.hw-hero p:not(.hw-eyebrow),
.mk-hero h1,
.mk-hero p:not(.mk-eyebrow),
.appointments-app .hero h1,
.appointments-app .hero p,
.loyalty-app .hero h1,
.loyalty-app .hero p {
  color: var(--sq-body);
}
.cfg-hero .cfg-eyebrow,
.hw-hero .hw-eyebrow,
.mk-hero .mk-eyebrow,
.appointments-app .hero .eyebrow,
.loyalty-app .hero .eyebrow {
  color: var(--sq-muted);
}
.mk-hero::after { display: none; }
.custom-app .eyebrow,
.offer-app .eyebrow { color: var(--sq-muted); }
.custom-app .intro .eyebrow,
.offer-app .intro .eyebrow { color: #fff; }
.custom-app .summary-callout,
.custom-app .summary-block,
.offer-app .side-note,
.offer-app .selection-rail,
.offer-app .summary-callout {
  color: var(--sq-body);
  border: 1px solid var(--sq-border);
  background: var(--sq-surface);
}
.custom-app .summary-callout p,
.offer-app .side-note p,
.offer-app .selection-rail p,
.offer-app .summary-callout p { color: var(--sq-muted); }

/* Etichette di categoria e superfici: solo i colori semantici conservano tinte proprie. */
.staff-tag,
.hw-tag,
.mk-chip,
.loyalty-app .badge {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: var(--sq-raised);
}
.cfg-hero,
.cfg-scenario,
.cfg-presentation,
.cfg-hero,
.doc-paper-card,
.doc-panel,
.doc-stat,
.staff-card,
.staff-kpi,
.staff-request,
  .hw-hero,
.hw-card,
  .mk-hero,
.kds-card,
.mk-campaign,
.mk-panel,
  .appointments-app .hero,
.appointments-app .experience,
.appointments-app .panel,
  .loyalty-app .hero,
.loyalty-app .panel,
  .loyalty-app .tile,
  .custom-app .summary-callout,
  .custom-app .summary-block,
  .offer-app .side-note,
  .offer-app .selection-rail,
  .offer-app .summary-callout {
  border-radius: var(--radius-lg);
}
.cfg-scenario,
.cfg-presentation,
.doc-paper-card,
.doc-panel,
.doc-stat,
.staff-card,
.staff-kpi,
.staff-request,
.hw-card,
.kds-card,
.mk-campaign,
.mk-panel,
.appointments-app .experience,
.appointments-app .panel,
.loyalty-app .panel,
.loyalty-app .tile {
  box-shadow: var(--shadow-sm);
}

/* I titoli interni devono distinguersi dalle note e dai metadati. */
.card__title {
  color: var(--sq-body);
  font-size: var(--fs-base, 16px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
}

/* I controlli secondari della barra scura mantengono contrasto e affordance. */
.demo-toolbar .btn--secondary {
  background: #fff;
  border-color: #fff;
  color: var(--sq-ink);
}
.demo-toolbar .btn--secondary:hover:not(:disabled) {
  background: var(--sq-raised);
  border-color: var(--sq-raised);
  color: var(--sq-ink);
}
.demo-toolbar #demo-btn-moduli {
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.demo-toolbar #demo-btn-moduli:hover {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
}
.demo-toolbar #demo-btn-moduli:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Spazio di lettura uniforme nei flussi: 20 px sui telefoni, più ampio su tablet. */
@media (max-width: 760px) {
  :is(.page, .staff-main, .cfg-main, .doc-main, .kds-main, .mk-main,
      .hw-main, .web-main, .app-main, main.main) {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  :is(.topbar, .staff-top, .staff-nav, .cfg-nav, .step-nav) {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar__brand { flex: 1 1 auto; min-width: 0; }
  .topbar__brand > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .topbar__actions { flex: none; }
  .topbar > .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .topbar > .brand strong { font-size: 14px; }
  .topbar > :is(.badge, .chip) { flex: none; padding-inline: 10px; font-size: 11px; }
  .cfg-title { display: none; }
  .staff-week button { min-width: 72px; padding-inline: 10px; }
  .cfg-nav a { padding-inline: 10px; }
  .demo-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: none;
    overflow: visible;
    padding: 8px max(20px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .demo-toolbar__label { flex: none; }
  .demo-toolbar__azioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-toolbar__azioni > * { min-width: 0; width: 100%; }
  body.has-demo-toolbar .page { padding-bottom: calc(var(--sp-6) + 96px); }
  body.has-demo-toolbar .demo-panel { bottom: 96px !important; }
}

@media (min-width: 761px) {
  .page { padding-left: clamp(24px, 3vw, 40px); padding-right: clamp(24px, 3vw, 40px); }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .menu-side { width: min(320px, 85vw); }
  .menu-side__links { padding-inline: 12px; }
  .menu-side__links a { min-height: 48px; padding-inline: 16px; }
}

/* Le carrello sticky deve restare sopra la toolbar demo sui telefoni. */
@media (max-width: 760px) {
  body.has-demo-toolbar :is(.sticky-cta, .order-rail) {
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

/* La barra strumenti demo non deve coprire i contenuti sui telefoni. */
@media (max-width: 640px) {
  body.has-demo-toolbar:not(.kds-app) .demo-toolbar { display: none !important; }
  body.has-demo-toolbar:not(.kds-app) .page { padding-bottom: var(--sp-6) !important; }
  body.has-demo-toolbar:not(.kds-app) .demo-panel { bottom: 0 !important; }
  body.has-demo-toolbar:not(.kds-app) :is(.sticky-cta, .order-rail) { bottom: env(safe-area-inset-bottom) !important; }
  body.kds-app.has-demo-toolbar .demo-toolbar { display: flex !important; }
  body.kds-app.has-demo-toolbar .kds-main { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
}

body.kds-app.has-demo-toolbar .kds-main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  body.kds-app.has-demo-toolbar .kds-main { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* La barra di ogni modulo segue la stessa impostazione sobria del flusso rider. */
:is(.topbar, .site-head, .doc-top, .cfg-top, .hw-top, .kds-top, .mk-top, .staff-top, .web-top, .top, .appbar) {
  min-height: 72px;
  padding: 12px clamp(12px, 2vw, 24px);
  color: var(--sq-ink);
  background: var(--sq-bg);
  border-bottom: 1px solid var(--sq-border);
  box-shadow: none;
}
.cfg-top::after { display: none; }
:is(.doc-top, .cfg-top, .hw-top, .kds-top, .mk-top, .staff-top, .web-top, .top, .appbar) :is(.module-title, .cfg-title, .doc-module, .web-title, .head-module, .module-label) {
  color: var(--sq-muted);
}
.staff-top .staff-mark,
.kds-top .kds-mark {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: var(--sq-surface);
}
.staff-top .staff-brand__hint,
.kds-top .kds-brand__hint {
  color: var(--sq-muted);
  border-color: var(--sq-border);
}
.staff-top .staff-module,
.kds-top .kds-module { color: var(--sq-muted); }
.doc-module::before,
.cfg-title::before,
.staff-module::before,
.hw-module::before,
.kds-module::before,
.mk-mod::before,
.head-module strong::before,
.web-title::before,
.module-title::before,
.module-label::before { content: "Modulo · "; }
:is(.doc-module, .cfg-title, .staff-module, .hw-module, .kds-module,
    .mk-mod, .head-module strong, .web-title, .module-title, .module-label) {
  font-weight: 700;
}
body.loyalty-app .topbar .brand > div::after { content: "Modulo · Fidelizzazione clienti"; }
body.appointments-app .topbar .brand > div::after { content: "Modulo · Prenotazioni appuntamenti"; }
:is(body.loyalty-app, body.appointments-app) .topbar .brand > div::after {
  display: block;
  margin-top: 2px;
  color: var(--sq-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
body.p4-rider .rider-header__module { margin-left: 8px; font-weight: 700; }
.staff-top .staff-suite,
.kds-top .kds-top__link {
  color: var(--sq-body);
  border-color: var(--sq-border);
  background: var(--sq-bg);
}
.staff-top .staff-suite:hover,
.kds-top .kds-top__link:hover {
  color: var(--sq-ink);
  background: var(--sq-surface);
}