:root {
  --bg: #EDE4D3;
  --bg-gradient-1: #F2EBE0;
  --bg-gradient-2: #E8DDCC;
  --paper: #F5EDE0;
  --paper-alt: #EDE4D3;
  --paper-warm: #E8DDCC;
  --paper-modal: #F5EDE0;
  --ink: #2A1A12;
  --ink-secondary: #5D4037;
  --ink-muted: #8D6E63;
  --ink-inverse: #F5EDE0;
  --line: #D4CCC0;
  --line-strong: #BCAAA4;
  --accent: #5B9E9E;
  --accent-dark: #3D7A7A;
  --ok: #2e7d32;
  --ok-text: #1f5f23;
  --ok-bg: #dceedd;
  --danger: #DC2626;
  --danger-bg: #f5d5d5;
  --warning: #e67e22;
  --warning-bg: #f5e6c8;
  --warning-text: #856404;
  --border: #D4CCC0;
  --border-light: #E2D8CA;
  --border-warm: #C9B9A6;
  --input-bg: #F5EDE0;
  --input-border: #C9B9A6;
  --btn-bg: #EDE4D3;
  --btn-text: #2A1A12;
  --btn-border: #BCAAA4;
  --shadow-color: rgba(62, 39, 35, 0.1);
  --overlay-color: rgba(42, 26, 18, 0.5);
  --ticket-width: 80mm;
  --group-tab-bg: #EDE4D3;
  --group-tab-text: #2A1A12;
  --group-tab-border: #C9B9A6;
  --group-tab-active-bg: #c8e6e6;
  --group-tab-active-text: #3D7A7A;
  --group-tab-active-border: #4A8E8E;
  --menu-groups-width: 178px;
  --layout-groups-font-size: 14px;
  --layout-menu-items-font-size: 15px;
  --layout-order-items-font-size: 17px;
  --burger-panel-width: min(80vw, 280px);
}

/* === DARK MODE === */
html.dark-mode {
  --bg: #1a1714;
  --bg-gradient-1: #1a1714;
  --bg-gradient-2: #1a1714;
  --paper: #242019;
  --paper-alt: #2e2922;
  --paper-warm: #2e2922;
  --paper-modal: #2e2922;
  --ink: #e8e0d4;
  --ink-secondary: #b0a898;
  --ink-muted: #7a7068;
  --ink-inverse: #1a1714;
  --line: #4a4038;
  --line-strong: #5a4e44;
  --accent: #e05555;
  --accent-dark: #c44040;
  --ok: #4caf50;
  --ok-text: #6fcf73;
  --ok-bg: #1a3a1a;
  --danger: #e05555;
  --danger-bg: #3d2020;
  --warning: #f0a040;
  --warning-bg: #3d3020;
  --warning-text: #f0a040;
  --border: #3d3630;
  --border-light: #332e28;
  --border-warm: #4a4038;
  --input-bg: #2e2922;
  --input-border: #4a4038;
  --btn-bg: #2e2922;
  --btn-text: #e8e0d4;
  --btn-border: #5a4e44;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --overlay-color: rgba(0, 0, 0, 0.6);
  --group-tab-bg: #2e2922;
  --group-tab-text: #b0a898;
  --group-tab-border: #5a4e44;
  --group-tab-active-bg: #3a2020;
  --group-tab-active-text: #e05555;
  --group-tab-active-border: #c44040;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top left, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 30%, var(--bg) 100%);
  color: var(--ink);
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

body.burger-menu-open {
  overflow: hidden;
}

@media (min-width: 762px) {
  body.summary-fullscreen-open .app-shell:not(.table-mode) .topbar {
    z-index: 10001;
  }
}

body.summary-fullscreen-open .sync-status,
body.summary-fullscreen-open .topbar-actions .sync-status,
body.summary-fullscreen-open #syncStatus {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.9rem;
}

/* === SIDEBAR LAYOUT (desktop) === */
@media (min-width: 762px) {
  .app-shell:not(.table-mode) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    max-width: 100%;
    min-height: 100dvh;
  }

  .app-shell:not(.table-mode) .topbar {
    flex: 0 0 82px;
    width: 82px;
    min-height: 100dvh;
    position: sticky;
    top: 0;
    z-index: 1201; /* sopra il banco-screen (1200) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 0.75rem;
    border: none;
    border-right: none;
    border-radius: 0;
    background: #4E342E;
    color: #EDE4D3;
    box-shadow: 2px 0 16px rgba(42, 26, 18, 0.18);
  }

  .app-shell:not(.table-mode) .topbar-menu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 0;
  }

  .app-shell:not(.table-mode) .topbar-burger-btn {
    border: none;
    background: transparent;
    box-shadow: none;
    color: #EDE4D3;
  }
  .app-shell:not(.table-mode) .burger-line {
    background: #EDE4D3;
  }

  .app-shell:not(.table-mode) .topbar-title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
  }

  .app-shell:not(.table-mode) .topbar-title h1 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: #93C9C9;
  }

  .app-shell:not(.table-mode) .topbar-title p {
    display: none;
  }

  .app-shell:not(.table-mode) .topbar-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0 0 0.5rem;
  }

  .app-shell:not(.table-mode) .topbar-actions .sync-status {
    display: none;
  }

  .app-shell:not(.table-mode) .topbar-actions button {
    width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #D7CCC8;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .app-shell:not(.table-mode) .topbar-actions button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .app-shell:not(.table-mode) .topbar-actions button::before {
    content: "↻";
    font-size: 1.1rem;
    display: block;
  }

  /* room-select-row ora è dentro tables-panel */

  .app-shell:not(.table-mode) > #mainLayout {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1rem 1rem 1rem;
  }

  /* Voci di navigazione nella sidebar */
  .topbar-nav {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0 0.4rem;
    overflow-y: auto;
  }

  .topbar-nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 66px;
    min-height: 56px;
    padding: 0.38rem 0.2rem;
    border: none;
    background: transparent;
    border-radius: 12px;
    color: #D7CCC8;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  }

  .topbar-nav-btn[hidden],
  .topbar-nav-divider[hidden] {
    display: none !important;
  }

  .topbar-nav-btn span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
  }

  .topbar-nav-btn svg {
    transition: transform 0.18s ease;
  }

  .topbar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: scale(1.04);
  }

  .topbar-nav-btn:hover svg {
    transform: scale(1.08);
  }

  .topbar-nav-btn.active {
    background: rgba(91, 158, 158, 0.18);
    color: #93C9C9;
    box-shadow: inset 3px 0 0 #5B9E9E;
  }

  .topbar-nav-divider {
    width: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0.2rem 0;
    flex-shrink: 0;
    opacity: 0.6;
  }
}

.app-shell.table-mode .topbar,
.app-shell.table-mode .sync-status {
  display: none;
}

.app-shell.table-mode .room-select-row {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  background: #4E342E;
  color: #EDE4D3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-menu {
  position: relative;
  align-self: start;
}

.topbar-burger-btn {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
}

.burger-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #EDE4D3;
}

.summary-burger-btn {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.summary-burger-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* === BURGER MENU DRAWER (stile Tilby) === */

/* Il wrapper è il trigger point, non il pannello visibile */
.topbar-burger-menu {
  position: static;
  display: contents; /* non occupa spazio, i figli si posizionano da soli */
}

/* Overlay scuro dietro il pannello */
.burger-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: var(--overlay-color);
  opacity: 1;
  transition: opacity 0.22s ease;
}

.topbar-burger-menu.hidden .burger-overlay {
  opacity: 0;
  pointer-events: none;
}

.topbar-burger-menu.settings-sticky .burger-overlay {
  background: transparent;
  pointer-events: none;
}

/* Pannello laterale */
.burger-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10020;
  width: var(--burger-panel-width);
  background: #4E342E;
  color: #EDE4D3;
  box-shadow: 8px 0 32px rgba(20, 10, 0, 0.3);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.topbar-burger-menu.hidden .burger-panel {
  transform: translateX(-100%);
}

/* Header del pannello con pulsante X */
.burger-panel-header {
  display: none;
}

.burger-close-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.1rem;
  color: #EDE4D3;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.burger-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* User box con avatar */
.burger-user-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.burger-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a8fe7, #2d6bc4);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(58, 123, 213, 0.25);
}

.burger-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.burger-user-btn {
  background: none;
  border: none;
  padding: 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: #EDE4D3;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}
.burger-user-btn:hover {
  color: #93C9C9;
}
.burger-user-btn #burgerUserName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.burger-user-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: #BCAAA4;
}
/* chevron non ruota più — punta sempre a destra (apre profilo) */

.burger-user-dropdown {
  margin: 0 0.75rem 0.5rem;
  background: #4E342E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.burger-user-dropdown.hidden {
  display: none;
}
.burger-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #EDE4D3;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.12s;
}
.burger-user-dropdown-item:last-child {
  border-bottom: none;
}
.burger-user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.burger-user-dropdown-danger {
  color: var(--danger);
}
.burger-user-dropdown-danger:hover {
  background: var(--danger-bg, #fff5f4) !important;
}

.burger-user-dropdown-env {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #BCAAA4;
}
.burger-user-dropdown-env.hidden {
  display: none;
}
.burger-user-dropdown-env svg {
  flex-shrink: 0;
  color: #8D6E63;
}
.burger-user-dropdown-select {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #EDE4D3;
  background: #5D4037;
  cursor: pointer;
  outline: none;
}
.burger-user-dropdown-select:focus {
  border-color: #5B9E9E;
}

.burger-env-label {
  display: block;
  font-size: 0.72rem;
  color: #8D6E63;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Env switch */
.burger-env-switch {
  display: grid;
  gap: 0.36rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Voci di navigazione */
.burger-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 0.15rem;
}

.burger-nav[hidden],
.burger-nav-item[hidden] {
  display: none !important;
}

.burger-nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 48px;
  padding: 0 0.85rem;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #D7CCC8;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.burger-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(2px);
}

.burger-nav-item.active {
  background: rgba(91, 158, 158, 0.15);
  color: #93C9C9;
  font-weight: 700;
}

.burger-nav-icon {
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  color: #BCAAA4;
}

.burger-footer {
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.7rem;
  color: #8D6E63;
}

.burger-env-switch label {
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #BCAAA4;
  letter-spacing: 0.3px;
}

.burger-env-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.34rem;
  align-items: center;
}

.burger-env-switch-row select {
  min-height: 40px;
}

.burger-env-switch-row button {
  min-height: 40px;
  min-width: 76px;
  text-align: center;
}

.topbar-title {
  min-width: 0;
}

.topbar-title h1 {
  margin: 0;
  font-family: "Bebas Neue", "Oswald", Arial, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.8px;
  color: #93C9C9;
}

.topbar-title p {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  color: #BCAAA4;
}

.topbar-actions {
  display: grid;
  grid-template-columns: auto;
  align-content: start;
  justify-content: end;
  gap: 0.45rem;
}

.topbar-actions .sync-status {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 0;
  min-height: 34px;
  max-width: min(92vw, 360px);
  padding: 0.26rem 0.56rem;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
}

.room-select-row {
  margin: 0.62rem 0 0.2rem;
  display: flex;
  align-items: flex-end;
}

.room-select-row label {
  width: min(320px, 100%);
}

label {
  display: grid;
  gap: 0.26rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
}

input,
select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.46rem 0.6rem;
  background: var(--paper-alt);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(186, 43, 43, 0.1);
}

button {
  min-height: 42px;
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  background: var(--btn-bg);
  font-weight: 800;
  padding: 0.4rem 0.82rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
  button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--shadow-color);
  }
}

button:active {
  transform: scale(0.97);
}

button.primary {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  button.primary:hover {
    box-shadow: 0 2px 12px rgba(186, 43, 43, 0.3);
  }
}

button.danger {
  border-color: #d08f8f;
  background: #fff1f1;
  color: #7b1f1f;
}

@media (hover: hover) {
  button.danger:hover {
    box-shadow: 0 2px 12px rgba(192, 57, 43, 0.2);
  }
}

.sync-status {
  margin: 0.65rem 0;
  padding: 0.44rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem 0.34rem;
}

.sync-status-text {
  min-width: 140px;
  flex: 1 1 auto;
}

.sync-status.busy::before {
  display: none;
}

.sync-status.ok {
  border-color: #a9cda7;
  color: #1f5f23;
  background: #f2fbf2;
}

.sync-status.warn {
  border-color: #deb88f;
  color: #7d4a11;
  background: var(--paper-warm);
}

.sync-status.err {
  border-color: #daa5a5;
  color: #7e1818;
  background: #fff2f2;
}

.app-shell.sync-busy::after {
  display: none;
}

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

/* === OFFLINE BANNER === */
.offline-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  animation: offlinePulse 2s ease-in-out infinite;
  order: -1;
}
.offline-banner svg {
  flex-shrink: 0;
}
.offline-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}
@keyframes offlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
html.dark-mode .offline-banner {
  background: #b91c1c;
}

/* Online: tutta l'app ha bordo verde sottile */
body.app-online .offline-banner { display: none !important; }

.table-notice {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  width: min(86vw, 360px);
  margin: 0;
  padding: 0.82rem 0.92rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 14px 38px rgba(32, 20, 7, 0.2);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.table-notice.ok {
  border-color: #a9cda7;
  color: #1f5f23;
  background: #f2fbf2;
}

.table-notice.warn {
  border-color: #deb88f;
  color: #7d4a11;
  background: var(--paper-warm);
}

.table-notice.err {
  border-color: #daa5a5;
  color: #7e1818;
  background: #fff2f2;
}

.layout {
  display: grid;
  grid-template-columns: 250px minmax(420px, 1fr) minmax(390px, 1fr);
  gap: 0.8rem;
}

.layout > * {
  animation: viewFadeIn 180ms ease-out both;
}
@keyframes viewFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.layout.screen-tables {
  grid-template-columns: 1fr;
}

.layout.screen-tables .table-screen-only {
  display: none;
}

/* Tavoli senza box contenitore */
.layout.screen-tables .tables-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Barra titolo "Sale e Tavoli" + sale selector orizzontale */
@media (min-width: 762px) {
  .app-shell:not(.table-mode) > #mainLayout {
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  /* Barra titolo + tab sale: blocco unico attaccato */
  .layout.screen-tables .tables-panel .panel-head {
    background: var(--paper);
    border: none;
    border-bottom: none;
    box-shadow: none;
    margin: 0 -1rem 0;
    padding: 0 1rem;
    min-height: calc(42px + 1.5rem);
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .layout.screen-tables .tables-panel .panel-head h2 {
    font-family: "Bebas Neue", "Oswald", Arial, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    font-weight: 400;
    margin: 0;
    flex-shrink: 0;
    opacity: 0.8;
  }

  /* Banner periodo di prova */
  .trial-banner {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .trial-banner[data-tone="trial"] {
    background: #fff3cd;
    color: #856404;
  }
  .trial-banner[data-tone="expired"] {
    background: #f8d7da;
    color: #721c24;
  }

  /* Statistiche generali nella barra titolo */
  .tables-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    margin-right: 0;
  }

  .tables-stats-totals {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    text-align: right;
  }

  .tables-stats-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    line-height: 1.3;
  }

  .tables-stats-label {
    font-size: 0.7rem;
    color: var(--ink-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .tables-stats-value {
    font-size: 0.84rem;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .tables-stats-coperti {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink-secondary);
    border-left: 1px solid var(--line);
    padding-left: 0.9rem;
  }

  .tables-stats-coperti svg {
    flex-shrink: 0;
  }

  .tables-stats-coperti-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
  }

  /* Room tabs attaccati al panel-head, stesso sfondo */
  .layout.screen-tables .tables-panel .room-tabs-bar {
    margin: 0 -1rem 1.1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 4px var(--shadow-color);
  }

}

/* === MENU ⋮ SALE E TAVOLI === */
.tables-panel-menu {
  position: relative;
  flex-shrink: 0;
}

.tables-panel-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s ease;
}

.tables-panel-menu-btn:hover {
  background: var(--paper-alt);
}

.tables-panel-menu-btn span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.tables-panel-menu-btn:hover span {
  opacity: 0.9;
}

.tables-panel-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(30, 15, 5, 0.1), 0 12px 32px rgba(30, 15, 5, 0.08);
  padding: 0.35rem;
  display: grid;
  gap: 0.1rem;
}

.tables-panel-dropdown.hidden {
  display: none;
}

.tables-panel-dropdown-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 0;
}

.tables-panel-dropdown-item:hover {
  background: var(--paper-alt);
}

.tables-panel-dropdown-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.2rem 0.4rem;
}

/* === MAPPA TAVOLI === */
.tables-grid.table-map-mode {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: auto;
  padding-top: 2500px;
  box-sizing: border-box;
  background:
    radial-gradient(720px 320px at 16% 0%, rgba(211, 109, 62, 0.08), transparent 42%),
    radial-gradient(520px 240px at 84% 8%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #f8efe5 0%, #efe0d0 100%);
  border-radius: 12px;
  border: 1px solid var(--line);
  /* reset grid */
  display: block;
}

.tables-grid.table-map-mode.table-map-editing {
  background:
    linear-gradient(rgba(183, 155, 122, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 155, 122, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
}

.table-card-map {
  position: absolute;
  width: 110px;
  height: 90px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.tables-grid.table-map-mode.table-map-editing .table-card-map {
  cursor: grab;
  touch-action: none;
}

.tables-grid.table-map-mode.table-map-editing .table-card-map:hover {
  transform: none;
  filter: none;
}

.table-card-map:hover {
  z-index: 5;
  transform: translateY(-2px);
  filter: saturate(1.02);
}

.table-card-map.dragging {
  cursor: grabbing;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(30, 15, 5, 0.25);
  opacity: 0.9;
  transition: none;
}

/* In modalità mappa i bottoni hanno dimensioni fisse */
.table-card-map .table-btn {
  width: 110px;
  height: 90px;
  min-height: 0;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 16px;
  align-content: start;
  justify-items: stretch;
  text-align: left;
  padding: 0.5rem 0.52rem 0.46rem;
  padding-right: 0.52rem;
}

.table-card-map .table-headline {
  gap: 0.24rem;
}

.table-card-map .table-label {
  font-size: 0.96rem;
}

.table-card-map .table-total {
  font-size: 0.71rem;
  padding: 0.1rem 0.32rem;
}

.table-card-map .table-meta-row {
  padding-right: 1rem;
}

.table-card-map .table-customer-badge {
  max-width: calc(100% - 1rem);
}

.tables-grid.table-map-mode.table-map-editing .table-card-map .table-btn {
  cursor: inherit;
  pointer-events: none;
}

.table-map-nudge-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.table-map-nudge-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  min-height: 0;
  border: 1px solid var(--border-warm);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink-secondary);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: manipulation;
}

.table-map-nudge-btn.up {
  top: 6px;
  left: calc(50% - 11px);
}

.table-map-nudge-btn.down {
  bottom: 6px;
  left: calc(50% - 11px);
}

.table-map-nudge-btn.left {
  left: 6px;
  top: calc(50% - 11px);
}

.table-map-nudge-btn.right {
  right: 6px;
  top: calc(50% - 11px);
}

.tables-grid.table-map-mode:not(.table-map-editing) .table-map-nudge-controls {
  display: none;
}

/* === TAB SALE === */
.room-tabs-bar {
  display: flex;
  margin: 0 -1rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}

.room-tabs-bar::-webkit-scrollbar {
  display: none;
}

.room-tab {
  flex: 1 1 0;
  min-width: 80px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.72rem 0.6rem;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  letter-spacing: 0.03em;
  position: relative;
}

.room-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
  font-weight: 800;
}

@media (hover: hover) {
  .room-tab:not(.active):hover {
    color: var(--ink);
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: var(--line);
  }
  html.dark-mode .room-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: var(--line);
  }
}

/* Nascondi la barra tab se c'è una sola sala */

.layout.screen-table {
  grid-template-columns: minmax(420px, 1fr) minmax(390px, 1fr);
}

.layout.screen-table .tables-panel {
  display: none;
}

.panel {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  padding: 0.72rem;
  min-height: 220px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  border-bottom: 1px solid var(--border-warm);
  margin-bottom: 0.62rem;
  padding-bottom: 0.42rem;
}

.panel-head h2 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  letter-spacing: 0.6px;
  font-size: 1.35rem;
}

.panel-head small {
  font-weight: 700;
  font-size: 0.78rem;
  color: #5a4a38;
}

.panel-head-order {
  align-items: center;
}

.panel-head-order-left {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.panel-head-order-left h2 {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#backToTablesBtn {
  min-height: auto;
  min-width: auto;
  padding: 0.04rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

#backToTablesBtn svg {
  width: 2rem;
  height: 2rem;
}

#orderStats.order-stats-mobile {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

#orderStats .order-stats-total {
  display: inline-block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}

#orderStats .order-stats-coperti {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 10px;
  margin: -6px -4px;
  border-radius: 8px;
  min-height: 36px;
  min-width: 36px;
  -webkit-tap-highlight-color: transparent;
}
#orderStats .order-stats-coperti:active {
  background: rgba(128,128,128,.12);
}
#orderStats.order-stats-mobile .order-stats-coperti {
  position: absolute;
  right: 0.02rem;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row-reverse;
}

#orderStats .order-stats-coperti svg {
  width: 1.85rem;
  height: 1.85rem;
  pointer-events: none;
}

#orderStats .order-stats-coperti-count {
  line-height: 1;
  font-size: 1rem;
  font-weight: 800;
  pointer-events: none;
}

#orderStats .order-stats-customer-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ── Link Customer Modal ────────────────────────────────── */
.link-customer-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  background: var(--success-faint, #e8f5e9);
  border: 1px solid var(--success, #4caf50);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.link-customer-unlink-btn {
  background: var(--danger, #e74c3c);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.link-customer-results {
  max-height: 250px;
  overflow-y: auto;
  margin: 0.4rem 0;
}
.link-customer-result-item {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.link-customer-result-item:hover {
  background: var(--accent-faint, rgba(79,140,255,0.08));
  border-color: var(--accent);
}
.link-customer-result-name {
  font-weight: 700;
  font-size: 0.92rem;
}
.link-customer-result-detail {
  font-size: 0.78rem;
  color: var(--ink-secondary);
}

/* Badge cliente nella griglia tavoli */
.table-customer-badge {
  font-size: 0.62rem;
  color: var(--ok, #2e7d32);
  font-weight: 800;
  background: rgba(46, 125, 50, 0.12);
  border-color: rgba(46, 125, 50, 0.18);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 0.35rem);
}

/* Form creazione nuovo cliente nel modale */
.link-customer-create-section {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  margin-top: 0.3rem;
}
.link-customer-create-row {
  display: flex;
  gap: 0.4rem;
  align-items: flex-end;
}
.link-customer-create-row label {
  flex: 1;
}
.link-customer-create-row input {
  width: 100%;
}
html.dark-mode .link-customer-current-row {
  background: var(--ok-bg, #1a3a1a);
  border-color: var(--ok, #4caf50);
  color: var(--ok-text, #6fcf73);
}
html.dark-mode .link-customer-create-section {
  border-color: var(--line);
}
html.dark-mode .link-customer-create-section p {
  color: var(--ink);
}
html.dark-mode #linkCustomerModal label {
  color: var(--ink-secondary);
}
html.dark-mode #linkCustomerModal input {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--input-border);
}
html.dark-mode .link-customer-result-item {
  border-color: var(--line);
}
html.dark-mode .link-customer-result-item:hover {
  background: rgba(224,85,85,0.1);
}

/* Pulsanti fiscali nel pannello ordine (solo desktop, table-mode) */
.order-fiscal-actions {
  display: none;
}

@media (min-width: 762px) {
  .order-fiscal-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
  }

  .order-fiscal-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--line-strong);
    background: transparent;
    border-radius: 8px;
    color: var(--ink-secondary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    transition: background 0.13s, color 0.13s;
    white-space: nowrap;
  }

  .order-fiscal-btn:hover,
  .order-fiscal-btn.active {
    background: #fff1e6;
    color: var(--accent);
    border-color: var(--accent);
  }

  .order-fiscal-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
}

.ghost-btn {
  min-height: 34px;
  padding: 0.2rem 0.56rem;
  font-size: 0.82rem;
  border-style: dashed;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

@media (hover: hover) {
  .ghost-btn:hover {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(186, 43, 43, 0.04);
  }
}

.tables-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.tables-tools input {
  min-height: 38px;
}

.tables-tools button {
  min-height: 38px;
  white-space: nowrap;
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 0.6rem;
}

.table-merge-bar {
  border: 1px solid #7e9fd8;
  border-radius: 10px;
  background: #eef5ff;
  padding: 0.5rem;
  margin-bottom: 0.55rem;
  display: grid;
  gap: 0.42rem;
}

.table-merge-bar[hidden] {
  display: none !important;
}

.table-merge-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1f3f6f;
}

.table-merge-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.table-card {
  position: relative;
}

.table-card .table-btn {
  width: 100%;
}

.table-btn {
  --table-accent: #aa9176;
  --table-tint: rgba(170, 145, 118, 0.16);
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 86px;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.99), rgba(248, 241, 233, 0.96));
  border: 1px solid rgba(150, 119, 92, 0.2);
  border-radius: 14px;
  font-weight: 800;
  display: grid;
  justify-items: stretch;
  align-content: start;
  gap: 0.36rem;
  text-align: left;
  padding: 0.62rem 0.68rem 0.58rem;
  padding-right: 1.65rem;
  box-shadow:
    0 2px 4px rgba(41, 24, 12, 0.06),
    0 8px 20px rgba(41, 24, 12, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .table-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 4px 8px rgba(41, 24, 12, 0.08),
      0 16px 32px rgba(41, 24, 12, 0.1);
  }
}

.table-btn:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

.table-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, var(--table-tint) 0%, transparent 50%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.28), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.table-btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: var(--table-accent);
  border-radius: 14px 0 0 14px;
  pointer-events: none;
  z-index: 1;
}

.table-btn > * {
  position: relative;
  z-index: 2;
}

.table-headline {
  display: block;
  width: 100%;
  min-width: 0;
}

.table-label {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.04rem;
  letter-spacing: 0.3px;
  line-height: 1.08;
  color: var(--ink);
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-id {
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--ink-secondary);
  letter-spacing: 0.25px;
}

.table-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem;
  padding: 0.12rem 0.44rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(134, 98, 64, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--accent-dark);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.table-meta-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  width: 100%;
  min-width: 0;
}

.table-coperti,
.table-timer,
.table-customer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-height: 1.22rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(134, 98, 64, 0.1);
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.table-coperti {
  font-size: 0.72rem;
}

.table-customer-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-timer {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent-dark);
}

.table-timer::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}

.table-btn.active {
  --table-accent: var(--accent-dark);
  --table-tint: rgba(215, 90, 47, 0.18);
  border-color: rgba(171, 73, 38, 0.28);
}

.table-btn.has-open {
  --table-accent: #6f9a54;
  --table-tint: rgba(111, 154, 84, 0.18);
  border-color: rgba(111, 154, 84, 0.3);
}

.table-btn.status-conto {
  --table-accent: #d5a342;
  --table-tint: rgba(213, 163, 66, 0.2);
  border-color: rgba(213, 163, 66, 0.34);
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(250, 240, 219, 0.96));
}

.table-btn.status-closed {
  --table-accent: #af9a80;
  --table-tint: rgba(175, 154, 128, 0.16);
  border-color: rgba(175, 154, 128, 0.28);
  background: linear-gradient(180deg, rgba(250, 247, 241, 0.98), rgba(241, 234, 223, 0.96));
}

.table-btn.occupied {
  --table-accent: #c74f4f;
  --table-tint: rgba(199, 79, 79, 0.2);
  border-color: rgba(199, 79, 79, 0.34);
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.98), rgba(255, 226, 226, 0.96));
  color: #6f0909;
}

.table-btn.occupied .table-label,
.table-btn.occupied .table-total {
  color: #7e0b0b;
}

.table-btn.occupied .table-coperti,
.table-btn.occupied .table-timer,
.table-btn.occupied .table-customer-badge {
  background: rgba(181, 70, 70, 0.1);
  border-color: rgba(181, 70, 70, 0.22);
  color: #7e0b0b;
}

.table-btn.merge-selected {
  --table-accent: #3a6ec5;
  --table-tint: rgba(58, 110, 197, 0.18);
  border-color: rgba(58, 110, 197, 0.34);
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(228, 238, 253, 0.96));
  color: #163763;
}

.table-btn.merge-selected .table-total,
.table-btn.merge-selected .table-timer,
.table-btn.merge-selected .table-coperti,
.table-btn.merge-selected .table-customer-badge {
  background: rgba(58, 110, 197, 0.12);
  color: #204978;
  border-color: rgba(58, 110, 197, 0.22);
}

.table-btn.merge-master {
  border-color: #2e5cab;
  box-shadow:
    0 12px 24px rgba(41, 24, 12, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 0 0 1px rgba(58, 110, 197, 0.2);
}

.table-btn.transfer-source {
  --table-accent: #c89d1e;
  --table-tint: rgba(200, 157, 30, 0.2);
  border-color: rgba(200, 157, 30, 0.34);
  background: linear-gradient(180deg, rgba(255, 250, 233, 0.98), rgba(255, 243, 196, 0.96));
  color: #5f4500;
  box-shadow:
    0 12px 24px rgba(41, 24, 12, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 0 0 1px rgba(200, 157, 30, 0.18);
}

.table-btn.transfer-destination {
  --table-accent: #3a7f45;
  --table-tint: rgba(58, 127, 69, 0.18);
  border-color: rgba(58, 127, 69, 0.32);
  background: linear-gradient(180deg, rgba(245, 252, 246, 0.98), rgba(234, 248, 237, 0.96));
}

.table-btn.transfer-source .table-total,
.table-btn.transfer-source .table-coperti,
.table-btn.transfer-source .table-timer,
.table-btn.transfer-destination .table-total,
.table-btn.transfer-destination .table-coperti,
.table-btn.transfer-destination .table-timer {
  border-color: rgba(0, 0, 0, 0.08);
}

html.dark-mode .tables-grid.table-map-mode {
  background:
    radial-gradient(720px 320px at 16% 0%, rgba(211, 109, 62, 0.12), transparent 42%),
    radial-gradient(520px 240px at 84% 8%, rgba(255, 255, 255, 0.04), transparent 34%),
    linear-gradient(180deg, #151210 0%, #0b0a09 100%);
  border-color: rgba(168, 132, 102, 0.2);
}

html.dark-mode .table-btn.active {
  border-color: rgba(171, 73, 38, 0.32);
}

html.dark-mode .table-btn {
  background: linear-gradient(168deg, rgba(42, 36, 30, 0.98), rgba(30, 26, 22, 0.98));
  border-color: rgba(168, 132, 102, 0.14);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(0, 0, 0, 0.18);
  color: #ead9ca;
}

@media (hover: hover) {
  html.dark-mode .table-btn:hover {
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.25),
      0 16px 32px rgba(0, 0, 0, 0.3);
  }
}

html.dark-mode .table-btn::before {
  background:
    radial-gradient(circle at 100% 0%, var(--table-tint) 0%, transparent 50%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.04), transparent 38%);
}

html.dark-mode .table-label {
  color: #fff7ef;
}

html.dark-mode .table-total,
html.dark-mode .table-coperti,
html.dark-mode .table-timer,
html.dark-mode .table-customer-badge {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.dark-mode .table-total {
  color: #ffd3aa;
}

html.dark-mode .table-coperti {
  color: #dbc6b2;
}

html.dark-mode .table-timer {
  color: #ffbf80;
}

html.dark-mode .table-customer-badge {
  background: rgba(86, 170, 106, 0.12);
  border-color: rgba(100, 216, 136, 0.18);
  color: #9ce1ad;
}

html.dark-mode .table-btn.has-open {
  border-color: rgba(111, 154, 84, 0.32);
}

html.dark-mode .table-btn.status-conto {
  border-color: rgba(213, 163, 66, 0.34);
  background: linear-gradient(180deg, rgba(57, 45, 28, 0.98), rgba(43, 34, 22, 0.98));
}

html.dark-mode .table-btn.status-closed {
  border-color: rgba(175, 154, 128, 0.24);
  background: linear-gradient(180deg, rgba(43, 37, 31, 0.98), rgba(31, 27, 24, 0.98));
}

html.dark-mode .table-btn.occupied {
  border-color: rgba(199, 79, 79, 0.34);
  background: linear-gradient(180deg, rgba(60, 28, 28, 0.98), rgba(44, 21, 21, 0.98));
  color: #f0a0a0;
}

html.dark-mode .table-btn.occupied .table-label,
html.dark-mode .table-btn.occupied .table-total,
html.dark-mode .table-btn.occupied .table-coperti,
html.dark-mode .table-btn.occupied .table-timer {
  color: #f3aaaa;
}

html.dark-mode .table-btn.merge-selected {
  border-color: rgba(58, 110, 197, 0.36);
  background: linear-gradient(180deg, rgba(27, 42, 64, 0.98), rgba(20, 31, 49, 0.98));
  color: #a9c8f0;
}

html.dark-mode .table-btn.merge-selected .table-total,
html.dark-mode .table-btn.merge-selected .table-timer,
html.dark-mode .table-btn.merge-selected .table-coperti,
html.dark-mode .table-btn.merge-selected .table-customer-badge {
  color: #a9c8f0;
  border-color: rgba(58, 110, 197, 0.24);
}

html.dark-mode .table-btn.transfer-source {
  border-color: rgba(200, 157, 30, 0.34);
  background: linear-gradient(180deg, rgba(48, 40, 18, 0.98), rgba(36, 30, 14, 0.98));
  color: #f0d98b;
}

html.dark-mode .table-btn.transfer-destination {
  border-color: rgba(58, 127, 69, 0.34);
  background: linear-gradient(180deg, rgba(27, 45, 29, 0.98), rgba(20, 33, 22, 0.98));
}

/* Dark mode: generic UI overrides */
html.dark-mode button.danger {
  border-color: #9f4444;
  background: #3d2020;
  color: #f0a0a0;
}

html.dark-mode .modal-toast.ok { background: var(--ok-bg); color: var(--ok-text); }
html.dark-mode .modal-toast.warn { background: var(--warning-bg); color: var(--warning-text); }
html.dark-mode .modal-toast.err { background: var(--danger-bg); color: var(--danger); }

html.dark-mode .fiscal-emit-mode-tabs button.active {
  border-color: #8a6e2e;
  background: #2e2818;
  color: var(--ink);
}

html.dark-mode .order-fiscal-btn:hover,
html.dark-mode .order-fiscal-btn.active {
  background: #2e2818;
}

html.dark-mode .order-block.sent {
  background: #2e2922;
}
html.dark-mode .turn-section.sent-turn .order-block {
  background: #3d3518;
}
html.dark-mode .order-block.cancelled {
  background: #3d2020;
}
html.dark-mode .order-block.move-selected {
  border-color: #4a8a44;
  background: #1e3a1a;
  box-shadow: 0 0 0 2px rgba(74, 138, 68, 0.25);
}
html.dark-mode .table-move-line.selected {
  border-color: #4a8a44;
  background: #1e3a1a;
  box-shadow: 0 0 0 2px rgba(74, 138, 68, 0.25);
}
html.dark-mode .turn-section.sent-turn .turn-section-btn,
html.dark-mode .turn-section.sent-turn .turn-collapse-btn,
html.dark-mode .turn-section.sent-turn.active .turn-section-btn {
  background: #4a3d10;
  border-color: #6b5a1e;
  color: #f0d860;
}

.table-merge-icon {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-width: 19px;
  min-height: 19px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: var(--merge-icon-bg, #e5f0ff);
  color: #fff9f3;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  z-index: 3;
}

.table-move-lines-list {
  display: grid;
  gap: 0.42rem;
  max-height: min(52vh, 420px);
  overflow: auto;
  padding-right: 0.1rem;
}

.table-move-line {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  padding: 0.44rem;
  display: grid;
  gap: 0.26rem;
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.table-move-line.swiping {
  background: var(--paper-warm);
}

.table-move-line.selected {
  border-color: #5c8f55;
  background: #f4fbf3;
  box-shadow: 0 0 0 2px rgba(92, 143, 85, 0.16);
}

.table-move-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.table-move-line-name {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.24px;
}

.table-move-line-meta {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.fiscal-emit-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

.fiscal-emit-mode-tabs button {
  min-height: 38px;
  padding: 0.25rem 0.45rem;
  font-size: 0.82rem;
}

.fiscal-emit-mode-tabs button.active {
  border-color: #af7a35;
  background: #ffeecf;
  color: var(--ink);
}

.fiscal-emit-panel {
  display: grid;
  gap: 0.35rem;
}

.fiscal-emit-roman-list,
.fiscal-emit-payments-list {
  display: grid;
  gap: 0.34rem;
  max-height: min(34vh, 260px);
  overflow: auto;
}

.fiscal-emit-roman-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.38rem 0.42rem;
}

.fiscal-emit-roman-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.fiscal-emit-roman-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink);
}

.fiscal-emit-roman-amount {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--accent-dark);
}

.fiscal-emit-payment-row {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.34rem;
  display: grid;
  gap: 0.3rem;
}

.fiscal-emit-payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px) auto;
  gap: 0.35rem;
  align-items: end;
}

.fiscal-emit-payment-grid label {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 0.74rem;
}

.fiscal-emit-payment-grid .danger {
  min-height: 38px;
  padding: 0.24rem 0.5rem;
}

.fiscal-emit-item-row {
  cursor: pointer;
}

.table-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  min-height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f7a33, #4ba454);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  border: 2.5px solid rgba(255, 252, 247, 0.96);
  box-shadow: 0 4px 10px rgba(47, 122, 51, 0.35);
  z-index: 5;
}

.table-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.table-status-box {
  display: grid;
  align-content: start;
  gap: 0.32rem;
}

.table-status-pill {
  min-height: 40px;
  min-width: 110px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: 1px solid #d8c2a7;
  background: #fef8ef;
}

.table-status-pill.open {
  border-color: #7ba576;
  color: #255f2a;
  background: #eef8ed;
}

.table-status-pill.conto {
  border-color: #d39f45;
  color: #8b5f15;
  background: var(--paper-warm);
}

.table-status-pill.closed {
  border-color: #b8b8b8;
  color: #5a5a5a;
  background: var(--paper-alt);
}

.table-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.table-status-actions button {
  min-height: 34px;
  font-size: 0.82rem;
  padding: 0.2rem 0.45rem;
}

.order-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  padding: 0.3rem 0.08rem 0.08rem;
  border-top: 1px dashed var(--border-warm);
  background: var(--paper);
  position: relative;
  z-index: 2;
}

.menu-order-actions {
  margin: 0 0 0.35rem;
  padding: 0 0.08rem 0.3rem;
  border-top: 0;
  border-bottom: 1px dashed var(--border-warm);
}

#printNewBtn,
#goNextTurnBtn,
#addCopertoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}

#printNewBtn svg,
#goNextTurnBtn svg,
#addCopertoBtn svg {
  width: 1.2rem;
  height: 1.2rem;
}

#printNewBtn {
  background: #1fa756;
  border-color: #177f41;
  color: #fff;
}

#printNewBtn:hover {
  background: #178746;
  border-color: #116336;
}

#goNextTurnBtn {
  background: #2da3f7;
  border-color: #1f7fc3;
  color: #fff;
}

#goNextTurnBtn:hover {
  background: #208ad5;
  border-color: #175f94;
}

#goNextTurnBtn:disabled,
#printNewBtn:disabled {
  opacity: 0.45;
  cursor: default;
}

.order-workspace {
  display: block;
}

.turns-panel {
  display: none;
}

.order-list {
  display: grid;
  gap: 0.58rem;
  touch-action: pan-y;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.turn-section {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.35rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.turn-section + .turn-section {
  border-top: 1px dashed #d4b98f;
  padding-top: 0.6rem;
  margin-top: 0.3rem;
}

.turn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  margin-bottom: 0.3rem;
}

.turn-collapse-btn {
  min-height: 30px;
  min-width: 34px;
  padding: 0 0.45rem;
  border-radius: 8px;
  border: 1px solid #d4b98f;
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: var(--layout-order-items-font-size, 1rem);
  font-weight: 900;
}

.turn-collapsed-summary {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-secondary);
  padding: 0.1rem 0.16rem 0.2rem;
}

.turn-section.active {
  background: transparent;
}

.turn-section.sent-turn {
  background: transparent;
}

.turn-section.sent-turn .order-block {
  background: #fff7d2;
}

.turn-section.drag-over {
  border-radius: 8px;
  border: 1px dashed #2f7a33;
  background: #f5fcf4;
}

.turn-section-btn {
  min-height: var(--layout-button-min-height, 34px);
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-family: "Oswald", Arial, sans-serif;
  font-size: var(--layout-order-items-font-size, 0.94rem);
  letter-spacing: 0.28px;
  padding: 0.12rem 0.72rem;
  justify-self: center;
}

.turn-section-btn.move-target {
  border-color: #5c8f55;
  background: #f3fbf0;
  color: #2f5f2f;
}

.turn-section-btn.move-source {
  border-color: #2f5f2f;
  background: #2f5f2f;
  color: var(--ink-inverse);
}

.turn-section.active .turn-section-btn {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: var(--ink-inverse);
}

.turn-section.sent-turn .turn-section-btn {
  border-color: #c8a93e;
  background: #f6df88;
  color: #4c3b04;
}

.turn-section.sent-turn .turn-collapse-btn {
  border-color: #c8a93e;
  background: #f6df88;
  color: #4c3b04;
}

.turn-section.sent-turn.active .turn-section-btn {
  border-color: #c8a93e;
  background: #f6df88;
  color: #4c3b04;
}

.turn-section.active .turn-section-btn.move-target {
  border-color: #5c8f55;
  background: #f3fbf0;
  color: #2f5f2f;
}

.turn-section.active .turn-section-btn.move-source {
  border-color: #2f5f2f;
  background: #2f5f2f;
  color: var(--ink-inverse);
}

.turn-section-lines {
  display: grid;
  gap: 0.42rem;
  min-height: 2.1rem;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  margin-top: 0.25rem;
}

.turn-drop-empty {
  min-height: 2.1rem;
}

.order-totals-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-warm);
  padding: 0.5rem 0.58rem;
  margin-bottom: 0.62rem;
  display: grid;
  gap: 0.24rem;
}

.order-total-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.order-total-head strong {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.45px;
}

.order-total-value {
  color: var(--accent-dark);
  font-weight: 900;
  font-size: 1.02rem;
}

.order-total-lines {
  display: grid;
  gap: 0.1rem;
}

.order-total-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.order-total-line span:last-child {
  font-weight: 900;
  color: #2f2419;
}

.order-empty {
  border: 1px dashed var(--border-warm);
  border-radius: 10px;
  padding: 1rem 0.8rem;
  text-align: center;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--paper-warm);
}

.order-block {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  padding: 0.45rem;
  display: grid;
  gap: 0.36rem;
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.order-block.variant-child {
  margin-left: 1.2rem;
  margin-top: -0.15rem;
  padding: 0.25rem 0.45rem;
  border: none;
  border-left: 2px solid var(--border-warm);
  border-radius: 0 8px 8px 0;
  background: var(--paper-alt);
  font-size: 0.88em;
}
.order-block.variant-child .line-name {
  color: var(--ink-secondary);
}
.variant-prefix {
  font-weight: 800;
  margin-right: 2px;
  color: #4a8c3f;
}
.order-block.variant-child.variant-minus .variant-prefix {
  color: #c82626;
}
.order-block.variant-child.variant-minus .line-name {
  color: #8a5a5a;
}
.order-block.draggable {
  cursor: grab;
}

.order-block.draggable:active {
  cursor: grabbing;
}

.order-block.sent {
  opacity: 0.9;
  background: #f9f8f5;
}

.order-block.cancelled {
  opacity: 0.92;
  border-color: #e2b2b2;
  background: #fff7f7;
}

.order-block.cancelled .line-top {
  position: relative;
  padding-top: 0.22rem;
}

.order-block.cancelled .line-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #c82626;
}

.order-block.cancelled .line-name {
  color: #7b2222;
}

.order-block.dragging {
  opacity: 0.42;
  border-style: dashed;
}

.order-block.dragging-turn {
  z-index: 2;
  box-shadow: 0 8px 18px rgba(60, 45, 30, 0.22);
  border-color: #84ad7f;
  background: #fbfff9;
}

.order-block.swiping {
  background: var(--paper-warm);
}

.order-block.move-selected {
  border-color: #5c8f55;
  background: #f4fbf3;
  box-shadow: 0 0 0 2px rgba(92, 143, 85, 0.16);
}

.line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.line-name {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: var(--layout-order-items-font-size, 17px);
  letter-spacing: 0.3px;
}

.line-top-right {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
}

.line-qty-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  font-size: calc(var(--layout-order-items-font-size, 17px) * 0.76);
  font-weight: 900;
  color: var(--ink-secondary);
}

.line-meta {
  margin: 0;
  font-size: calc(var(--layout-order-items-font-size, 17px) * 0.76);
  color: var(--ink-secondary);
  font-weight: 700;
}

.line-gesture-help {
  margin: 0;
  font-size: calc(var(--layout-order-items-font-size, 17px) * 0.7);
  font-weight: 800;
  color: var(--ink-secondary);
}

.line-controls {
  display: grid;
  grid-template-columns: 120px minmax(120px, 1fr);
  gap: 0.44rem;
  align-items: center;
}

.qty-controls {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 0.25rem;
  align-items: center;
}

.qty-controls button {
  min-height: 34px;
  padding: 0;
  font-size: 1.05rem;
}

.qty-value {
  text-align: center;
  font-weight: 900;
}

.line-controls .remove-btn {
  min-height: 34px;
}

.line-note {
  width: 100%;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.state-pill.new {
  background: #fff3d7;
  color: #7b4f11;
}

.state-pill.sent {
  background: #e5f3e6;
  color: #1f6a24;
}

.state-pill.cancelled {
  background: #fde3e3;
  color: #9f1717;
}

.state-pill.customer-source {
  background: #e3ecf8;
  color: #1a5ab8;
}

.state-pill.package-source {
  background: #e8f5e9;
  color: #2e7d32;
}

.state-pill.variant-source {
  background: #f0e8ff;
  color: #6e34a9;
}

.package-group {
  border: 2px solid #a5d6a7;
  border-radius: 8px;
  background: #f1f8e9;
  padding: 4px;
  margin-bottom: 4px;
}

.package-group-header {
  font-size: 13px;
  font-weight: 700;
  color: #2e7d32;
  padding: 4px 8px;
  border-bottom: 1px solid #c8e6c9;
  margin-bottom: 2px;
}

.history-box {
  border-top: 1px solid var(--border-warm);
  margin-top: 0.72rem;
  padding-top: 0.56rem;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.history-head h3 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.15rem;
}

.history-head button {
  min-height: 32px;
  font-size: 0.79rem;
  padding: 0.18rem 0.52rem;
}

.history-list {
  display: grid;
  gap: 0.34rem;
  margin-top: 0.45rem;
  max-height: 240px;
  overflow: auto;
}

.history-empty {
  border: 1px dashed var(--border-warm);
  border-radius: 9px;
  padding: 0.58rem;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.history-item {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper);
  padding: 0.4rem 0.48rem;
  display: grid;
  gap: 0.12rem;
}

.history-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.history-text {
  font-size: 0.84rem;
  font-weight: 700;
}

.history-printer-row {
  margin-top: 0.22rem;
}

.history-time {
  font-size: 0.72rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.history-del {
  min-height: 28px;
  min-width: 28px;
  width: 28px;
  padding: 0;
  border-radius: 8px;
  border-color: #d7aaaa;
  background: #fff3f3;
}

.sync-printer-badges,
.history-printer-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  align-items: center;
}

.sync-printer-badges {
  margin-left: auto;
}

.printer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  border: 1px solid #b7aa95;
  background: var(--paper-alt);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.25px;
  line-height: 1.2;
}

.printer-badge.tone-0 {
  border-color: #ceb28b;
  background: #f9efdf;
  color: #6b4721;
}

.printer-badge.tone-1 {
  border-color: #c9b0d4;
  background: #f3ecf8;
  color: #5a3c69;
}

.printer-badge.tone-2 {
  border-color: #a5c9d2;
  background: #eaf6f9;
  color: #1f5969;
}

.printer-badge.tone-3 {
  border-color: #b9cfa2;
  background: #eef7e4;
  color: #3e6224;
}

.printer-badge.tone-4 {
  border-color: #d6ba93;
  background: #fff2df;
  color: #6f4c22;
}

.printer-badge.tone-5 {
  border-color: #c7bcc7;
  background: #f4f1f5;
  color: #5a4e5a;
}

.printer-badge.tone-6 {
  border-color: #d5b1ae;
  background: #fdf0ef;
  color: #7b3232;
}

.printer-badge.tone-7 {
  border-color: #adc1da;
  background: #edf3fc;
  color: #2f4f79;
}

.search-wrap {
  margin-bottom: 0.42rem;
}

.menu-browser {
  display: grid;
  grid-template-columns: minmax(96px, var(--menu-groups-width, 178px)) minmax(0, 1fr);
  gap: 0.56rem;
  align-items: start;
}

.menu-items-pane {
  min-width: 0;
}

.dish-suggestions {
  display: none;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  padding: 0.25rem;
  max-height: 210px;
  overflow: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dish-suggestions.open {
  display: grid;
  gap: 0.25rem;
}

.suggestion-btn {
  min-height: 38px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid var(--border-warm);
  background: var(--paper);
}

.section-tabs {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  align-content: start;
  max-height: 72vh;
  overflow: auto;
  padding-right: 0.1rem;
}

@media (min-width: 761px) {
  body.table-mode-active {
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell.table-mode {
    height: 100dvh;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app-shell.table-mode .layout.screen-table {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 55%) minmax(0, 45%);
    overflow: hidden;
  }

  .app-shell.table-mode .order-panel,
  .app-shell.table-mode .menu-panel {
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.table-mode .order-panel {
    display: flex;
    flex-direction: column;
  }

  .app-shell.table-mode .order-workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.table-mode .order-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.12rem;
  }

  .app-shell.table-mode .menu-order-actions {
    flex: 0 0 auto;
    margin: 0 0 0.35rem;
  }

  .app-shell.table-mode .menu-panel {
    display: flex;
    flex-direction: column;
  }

  .app-shell.table-mode .menu-browser {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .app-shell.table-mode .section-tabs {
    max-height: none;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .app-shell.table-mode .menu-items-pane {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
    scrollbar-width: thin;
  }
}

/* Desktop: ordine a sinistra, menu (piatti+gruppi) a destra — side by side */
@media (min-width: 1151px) {
  .app-shell.table-mode .layout.screen-table {
    grid-template-columns: minmax(380px, 1.2fr) minmax(380px, 1fr);
    grid-template-rows: 1fr;
  }

  .app-shell.table-mode .order-panel {
    max-height: 100%;
  }

  .app-shell.table-mode .menu-panel {
    max-height: 100%;
  }

  /* Dentro il menu-browser: piatti (articoli) a sinistra larghi, gruppi (sezioni) a destra stretti */
  .app-shell.table-mode .menu-browser {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .app-shell.table-mode .menu-browser .section-tabs {
    order: 2;
  }

  .app-shell.table-mode .menu-browser .menu-items-pane {
    order: 1;
  }

  /* Piatti su 2 colonne */
  .app-shell.table-mode .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Gruppi su 2 colonne, tutti stessa altezza (dettata dal più grande) */
  .app-shell.table-mode .section-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.4rem;
    align-content: start;
  }

  .app-shell.table-mode .section-tabs .section-tab {
    height: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-break: break-word;
    font-size: 0.82rem;
    padding: 0.3rem 0.45rem;
  }

  /* Articoli (dish-btn) più alti */
  .app-shell.table-mode .dish-btn {
    min-height: 72px;
  }
}

.section-tab {
  min-height: 40px;
  border: 1px solid var(--group-tab-border);
  color: var(--group-tab-text);
  background: var(--group-tab-bg);
  border-radius: 10px;
  padding: 0.26rem 0.6rem;
  font-size: var(--layout-groups-font-size, 14px);
  text-align: left;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.section-tab.active {
  border-color: var(--group-tab-active-border);
  color: var(--group-tab-active-text);
  background: var(--group-tab-active-bg);
}

.section-tab.has-custom-color {
  border-color: var(--section-custom-border);
  color: var(--section-custom-text);
  background: var(--section-custom-bg);
}

.section-tab.has-custom-color.active {
  border-color: var(--section-custom-active-border);
  color: var(--section-custom-active-text);
  background: var(--section-custom-active-bg);
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-dish-grid-min, 140px), 1fr));
  gap: 0.42rem;
}

.dish-btn {
  min-height: var(--layout-button-min-height, 58px);
  text-align: left;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 1px 0.5rem;
  font-size: var(--layout-menu-items-font-size, 15px);
  position: relative;
}

.dish-btn.holding {
  box-shadow: 0 0 0 2px #d59c5f inset;
}

.dish-btn strong {
  font-size: 1.5em;
  line-height: 1.1;
  flex: 1;
}


.dish-stock {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 1.8ch;
  padding: 0.15rem 0.4rem;
  border: none;
  border-radius: 999px;
  font-style: normal;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.dish-stock.zero {
  color: #8b4f00;
  background: #fff3de;
}

.dish-stock.neg {
  color: #a00000;
  background: #fff1f1;
}

.dish-btn span {
  font-size: 0.75em;
  color: var(--ink-secondary);
  font-weight: 700;
}

.menu-empty {
  border: 1px dashed var(--border-warm);
  border-radius: 10px;
  padding: 0.8rem;
  text-align: center;
  font-weight: 700;
  color: var(--ink-secondary);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--overlay-color);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1rem;
  animation: modalFadeIn 180ms ease-out both;
}
.modal .modal-card,
.modal .modal-card-compact {
  animation: modalCardIn 180ms ease-out both;
}
#resFormModal {
  z-index: 10000;
}
#confirmDialogModal {
  z-index: 10001;
}

#quickInputModal {
  z-index: 10040;
}

#packageWizardModal {
  z-index: 10030;
}

.modal.hidden {
  display: none;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Pannelli settings: fade-in quando diventano visibili */
#printerModalCard > div:not([hidden]) {
  animation: settingsPanelIn 160ms ease-out both;
}
@keyframes settingsPanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.modal-card {
  width: min(460px, 100%);
  max-height: min(90vh, 820px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper);
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  overflow: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.12);
}

/* Impostazioni: pannello laterale (come burger menu) */
#printerModal:not(.summary-fullscreen) {
  padding: 0;
  place-items: stretch;
  justify-content: flex-start;
}
#printerModal:not(.summary-fullscreen) #printerModalCard {
  width: min(80vw, 380px);
  max-height: 100vh;
  height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08), 8px 0 32px rgba(20, 10, 0, 0.12);
  overflow-y: auto;
  overflow-x: hidden;
}

body.burger-settings-sticky #printerModal:not(.summary-fullscreen) {
  padding-left: var(--burger-panel-width);
}
body.burger-settings-sticky #printerModal:not(.summary-fullscreen) #printerModalCard {
  width: min(380px, calc(100vw - var(--burger-panel-width)));
}

/* Anagrafiche: pannello laterale stretto → torna a colonna */
#printerModal:not(.summary-fullscreen) .customers-split {
  flex-direction: column;
}
#printerModal:not(.summary-fullscreen) .customers-list-panel {
  flex: 0 0 auto;
}
#printerModal:not(.summary-fullscreen) .customers-list-panel .settings-tables-list {
  max-height: min(35vh, 280px);
}

/* Fiscali: adatta griglie al pannello laterale stretto */
#printerModal:not(.summary-fullscreen) .settings-fiscal-grid {
  grid-template-columns: 1fr;
}
#printerModal:not(.summary-fullscreen) .settings-fiscal-row-grid.vat,
#printerModal:not(.summary-fullscreen) .settings-fiscal-row-grid.department,
#printerModal:not(.summary-fullscreen) .settings-fiscal-row-grid.payment {
  grid-template-columns: 1fr;
}
#printerModal:not(.summary-fullscreen) .settings-fiscal-coverage-row {
  grid-template-columns: 1fr;
}

/* Documenti hub: pannello laterale (non-fullscreen) — 2 zone: header fisso + lista scroll */
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode > .modal-toast,
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode > .modal-actions {
  flex-shrink: 0;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode #settingsDocumentsView {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode .docs-hub-filters-section,
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode .docs-hub-stats-bar,
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode .docs-hub-analytics,
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode .settings-view-head {
  flex-shrink: 0;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.documents-scroll-mode .docs-hub-list-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#printerModal:not(.summary-fullscreen) .docs-hub-analytics {
  grid-template-columns: 1fr;
}

.modal-toast {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  transition: opacity 0.3s;
}
.modal-toast.hidden { display: none; }
.modal-toast.ok { background: #d4edda; color: #155724; }
.modal-toast.warn { background: #fff3cd; color: #856404; }
.modal-toast.err { background: #f8d7da; color: #721c24; }

/* Overlay globale per errori di stampa critici */
.print-failure-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  animation: pf-fade-in 0.2s ease-out;
}
.print-failure-overlay.hidden { display: none; }
@keyframes pf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.print-failure-card {
  background: #fff;
  border: 4px solid #dc3545;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  animation: pf-shake 0.5s ease-out;
}
.print-failure-icon {
  font-size: 3.5rem;
  color: #dc3545;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.print-failure-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #dc3545;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
}
.print-failure-message {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
.print-failure-dismiss {
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.print-failure-dismiss:active {
  background: #b02a37;
}
html.dark-mode .print-failure-card {
  background: #1e1e1e;
  border-color: #e74c3c;
}
html.dark-mode .print-failure-message { color: #ccc; }

#fiscalEmitModal .modal-card {
  width: min(460px, 100%);
}

#fiscalEmitModal .modal-card > div:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.55rem;
}

.modal-card-compact {
  width: min(360px, 100%);
}

.self-order-table-modal-card {
  width: min(400px, 94vw);
}

.self-order-table-list {
  max-height: min(55vh, 420px);
  overflow-y: auto;
  display: grid;
  gap: 0.3rem;
  -webkit-overflow-scrolling: touch;
}

.self-order-room-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-secondary);
  padding: 0.5rem 0.2rem 0.15rem;
  border-bottom: 1px solid var(--border-warm);
}

.self-order-table-btn {
  display: block;
  width: 100%;
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper);
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.self-order-table-btn:active {
  background: #f1d7b8;
}

.quick-input-card {
  width: min(340px, calc(100vw - 2rem));
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(10, 5, 2, 0.28);
}

.quick-input-card h3 {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.quick-input-card input {
  width: 100%;
  min-height: 46px;
  font-size: 1rem;
}

.auth-modal-card {
  width: min(430px, 100%);
}

body.auth-login-open .topbar {
  display: none !important;
}
.auth-login-modal {
  background:
    radial-gradient(circle at 20% 20%, rgba(242, 183, 5, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #111 0%, #1a1a1a 100%);
}

.auth-login-modal .auth-modal-card {
  width: min(480px, calc(100vw - 1.3rem));
  max-height: calc(100dvh - 2rem);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--paper);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
  padding: 0;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.auth-login-hero {
  display: grid;
  grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 1.4rem 1.3rem 1.2rem;
  background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
}

.auth-login-logo {
  width: 100%;
  max-width: 88px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(242, 183, 5, 0.35));
}

.auth-login-brand h3 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
}

.auth-login-subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

#authModalHint {
  margin: 0;
  padding: 0.55rem 1.3rem;
  background: rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

#authModalHint.warn {
  background: #fff3cd;
  border-bottom-color: #f2d086;
  color: #856404;
}

#authModalHint.err {
  background: #ffe082;
  border-bottom-color: #d6a93a;
  color: #1f1a16;
}

#authModalHint.ok {
  background: #e8f5e9;
  border-bottom-color: #a9d6ad;
  color: #1f5f23;
}

.auth-login-view {
  border: none;
  border-radius: 0;
  background: var(--paper);
  padding: 1.1rem 1.3rem 1.4rem;
  display: grid;
  gap: 0.65rem;
}

.auth-login-view label {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--ink);
  gap: 0.26rem;
  position: relative;
  isolation: isolate;
}

.auth-login-view input,
.auth-login-view select {
  margin-top: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: var(--paper-alt);
  border-radius: 10px;
  min-height: 48px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-login-view input:focus,
.auth-login-view select:focus {
  border-color: rgba(242, 183, 5, 0.6);
  box-shadow: 0 0 0 2.5px rgba(242, 183, 5, 0.12);
  outline: none;
  position: relative;
  z-index: 1;
}
.auth-login-view input:-webkit-autofill,
.auth-login-view input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 30px var(--paper-alt, #1e1e1e) inset !important;
  -webkit-text-fill-color: var(--ink, #eee) !important;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 30px var(--paper-alt, #1e1e1e) inset;
}
.auth-login-view input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--paper-alt, #1e1e1e) inset !important;
  -webkit-text-fill-color: var(--ink, #eee) !important;
  border-color: rgba(242, 183, 5, 0.6);
  box-shadow: 0 0 0 2.5px rgba(242, 183, 5, 0.12), 0 0 0 30px var(--paper-alt, #1e1e1e) inset;
}

.auth-login-view .modal-actions {
  margin-top: 0.2rem;
}

.auth-login-view .primary {
  min-height: 50px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: none;
  color: #F2B705;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: filter 0.15s, transform 0.1s;
}

.auth-login-view .primary:active {
  filter: brightness(0.85);
  transform: scale(0.98);
}

@media (hover: hover) {
  .auth-login-view .primary:hover {
    filter: brightness(1.15);
  }
}

@media (max-width: 520px) {
  .auth-login-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.2rem 1rem 1rem;
  }

  .auth-login-logo {
    max-width: 72px;
  }

  .auth-login-brand h3 {
    font-size: 1.35rem;
  }
}

/* Google Sign-In separator & button */
.auth-google-separator {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.3rem 0 0.1rem;
}
.auth-google-separator::before,
.auth-google-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(128, 128, 128, 0.25);
}
.auth-google-separator span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-muted, rgba(0,0,0,0.45));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 48px;
  border: 1.5px solid rgba(128, 128, 128, 0.25);
  border-radius: 10px;
  background: var(--paper, #fff);
  color: var(--ink, #222);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.auth-google-btn:hover {
  background: var(--paper-alt, #f5f5f5);
  border-color: rgba(66, 133, 244, 0.5);
  box-shadow: 0 1px 6px rgba(66, 133, 244, 0.15);
}
.auth-google-btn:active {
  transform: scale(0.98);
}
.auth-google-btn svg {
  flex-shrink: 0;
}
#authGoogleRenderTarget {
  display: flex;
  justify-content: center;
  padding-bottom: 1rem;
}

.modal-card h3 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.28rem;
  letter-spacing: 0.4px;
}

.modal.summary-fullscreen {
  padding: 0;
  place-items: stretch;
  background: var(--paper);
}

.modal.summary-fullscreen .modal-card {
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: none;
  padding: 0 0.68rem 0.68rem;
  background: var(--paper);
  overflow: hidden;
}

.modal.summary-fullscreen #printerModalCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal.summary-fullscreen #printerModalCard > .settings-view {
  flex: 1 1 auto;
  min-height: 0;
}

/* Fullscreen packages scroll (desktop/browser) */
.modal.summary-fullscreen #printerModalCard.packages-scroll-mode {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
.modal.summary-fullscreen #printerModalCard.packages-scroll-mode #settingsPackagesView {
  display: block;
  height: auto;
  min-height: auto;
}
.modal.summary-fullscreen #printerModalCard.packages-scroll-mode #settingsPackagesView .settings-section {
  overflow: visible;
}

/* Non-fullscreen packages scroll (Android lateral panel) */
#printerModal:not(.summary-fullscreen) #printerModalCard.packages-scroll-mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.packages-scroll-mode > .modal-toast,
#printerModal:not(.summary-fullscreen) #printerModalCard.packages-scroll-mode > .modal-actions {
  flex-shrink: 0;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.packages-scroll-mode #settingsPackagesView {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
#printerModal:not(.summary-fullscreen) #printerModalCard.packages-scroll-mode #settingsPackagesView .settings-section {
  overflow: visible;
}

@media (min-width: 762px) {
  body.summary-fullscreen-open .modal.summary-fullscreen {
    left: 82px;
  }
  body.summary-fullscreen-open .modal.summary-fullscreen .modal-card {
    width: calc(100vw - 82px);
  }
}

.modal.summary-fullscreen #settingsSummaryView {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.modal.summary-fullscreen #settingsSummaryView .settings-section:not(.summary-dashboard-layout) {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.modal.summary-fullscreen #settingsSummaryView .settings-section.summary-dashboard-layout {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.modal.summary-fullscreen #settingsSummaryList {
  min-height: 0;
  max-height: none;
}

/* Mobile: riepilogo scroll libero */
@media (max-width: 761px) {
  .modal.summary-fullscreen #settingsSummaryView {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal.summary-fullscreen #settingsSummaryView .settings-section {
    display: block;
    overflow: visible;
  }
  .modal.summary-fullscreen #settingsSummaryList {
    max-height: none;
    overflow: visible;
  }
}

.modal.summary-fullscreen #settingsDocumentsView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modal.summary-fullscreen #settingsDocumentsView[hidden] {
  display: none !important;
}
.modal.summary-fullscreen #settingsDocumentsView .settings-view-head,
.modal.summary-fullscreen #settingsDocumentsView .docs-hub-filters-section,
.modal.summary-fullscreen #settingsDocumentsView .docs-hub-stats-bar,
.modal.summary-fullscreen #settingsDocumentsView .docs-hub-analytics {
  flex-shrink: 0;
}
.modal.summary-fullscreen .docs-hub-list-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Mobile: scroll unificato per documenti e centri di produzione */
@media (max-width: 761px) {
  .modal.summary-fullscreen #settingsDocumentsView:not([hidden]),
  .modal.summary-fullscreen #settingsProductionCentersView:not([hidden]),
  .modal.summary-fullscreen #settingsInvoiceHistoryView:not([hidden]) {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal.summary-fullscreen #settingsInvoiceHistoryView .settings-section {
    overflow: visible !important;
  }
  .modal.summary-fullscreen #fiscalInvoicesList {
    overflow: visible !important;
    max-height: none !important;
  }
  .modal.summary-fullscreen #settingsProductionCentersView .settings-section,
  .modal.summary-fullscreen #settingsProductionCentersView #pcConfigSection,
  .modal.summary-fullscreen #settingsProductionCentersView .pc-main-shell,
  .modal.summary-fullscreen #settingsProductionCentersView .pc-config-wrap,
  .modal.summary-fullscreen #settingsProductionCentersView .pc-centers-list {
    display: block !important;
    overflow: visible !important;
    min-height: unset !important;
    max-height: none !important;
  }
  .modal.summary-fullscreen .docs-hub-list-section {
    flex: unset;
    min-height: unset;
    overflow: visible;
  }
}

/* --- Stock fullscreen --- */
.modal.summary-fullscreen #settingsStockView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.modal.summary-fullscreen #settingsStockView > .settings-view-head {
  flex-shrink: 0;
}

.modal.summary-fullscreen #settingsStockView .settings-section {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.modal.summary-fullscreen .settings-stock-list,
#adminUsersList,
#adminEnvironmentList {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.invoice-view-tab {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border-warm, rgba(0,0,0,.12));
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink-muted, #888);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.invoice-view-tab.active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}

.invoice-view-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.invoice-view-panel[hidden] {
  display: none !important;
}

/* --- Invoice History fullscreen --- */
.modal.summary-fullscreen #settingsInvoiceHistoryView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.modal.summary-fullscreen #settingsInvoiceHistoryView > .settings-view-head,
.modal.summary-fullscreen #settingsInvoiceHistoryView > div:not(#invoiceViewTabHistory):not(#invoiceViewTabSdi) {
  flex-shrink: 0;
}
.modal.summary-fullscreen #invoiceViewTabHistory {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.summary-fullscreen #invoiceViewTabSdi {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.summary-fullscreen #settingsInvoiceHistoryView .settings-section {
  min-height: unset;
  overflow: visible;
}

.modal.summary-fullscreen #settingsInvoiceHistoryView .docs-hub-filters-section {
  overflow: visible;
}

.modal.summary-fullscreen #fiscalInvoicesList {
  max-height: none;
  overflow: visible;
}

/* Customers view: flex layout — list + form scroll, header fixed */
#settingsCustomersView {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow: hidden;
}
#settingsCustomersView .settings-view-head {
  flex-shrink: 0;
}
.customers-split {
  display: flex;
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.customers-list-panel {
  flex: 0 0 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-warm);
  padding-right: 1rem;
}
.customers-list-panel .settings-tables-list {
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
}
.customers-form-panel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.5rem 0.5rem 0;
}

/* --- Groups & Articles fullscreen --- */
.modal.summary-fullscreen #settingsGroupsArticlesView {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.modal.summary-fullscreen #settingsGroupsArticlesView .settings-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.modal.summary-fullscreen .gas-groups-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.modal.summary-fullscreen #settingsPrintAgentView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.summary-fullscreen #settingsHomeView {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.modal.summary-fullscreen #settingsHomeView .settings-menu-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal.summary-fullscreen #settingsPackagesView {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.modal.summary-fullscreen #settingsPackagesView .settings-section {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.stock-view-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.stock-view-head h4 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

#burgerSettingsBackBtn {
  border-bottom: 1px solid var(--border-light);
  border-radius: 10px 10px 0 0;
  margin-bottom: 0.15rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

.stock-burger-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 6px;
  border: 1px solid #d3b894;
  border-radius: 8px;
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

@media (min-width: 762px) {
  .stock-burger-btn {
    display: none;
  }
}

.stock-burger-btn .burger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-secondary);
  border-radius: 2px;
}

body.menu-standalone-open {
  overflow: hidden;
}

.menu-standalone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1301;
  background: var(--bg);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 0.6rem;
  gap: 0.5rem;
}

.menu-standalone.hidden {
  display: none;
}

@media (min-width: 762px) {
  .menu-standalone {
    left: 82px;
  }
}

@media (max-width: 761px) {
  .menu-standalone {
    padding: 0;
    gap: 0;
  }

  body.menu-standalone-open .topbar {
    opacity: 0;
    pointer-events: none;
  }

  .menu-standalone-frame {
    border: none;
    border-radius: 0;
    background: transparent;
  }
}

.menu-standalone-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
}

.table-action-hint {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.table-action-hint:empty {
  display: none;
}

.table-action-hint.warn {
  color: var(--warning-text);
}

.table-action-hint.err {
  color: var(--danger);
}

.table-action-hint.ok {
  color: var(--ok-text);
}

.table-action-totals {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-warm);
  padding: 0.45rem 0.55rem;
  display: grid;
  gap: 0.22rem;
}

.table-action-totals-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.table-action-totals-head strong {
  font-size: 1.02rem;
  color: var(--accent-dark);
}

.table-action-totals-meta {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

#tableActionTitle {
  text-align: center;
}

#tableActionModal .modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

#tableActionModal .table-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

#tableActionModal .table-action-grid button {
  border-radius: 6px;
  min-height: 44px;
  padding: 0.34rem 0.56rem;
  font-size: 0.9rem;
}

#tableActionModal .table-action-grid button span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tableActionModal .table-action-btn-icon {
  width: 1.02rem;
  height: 1.02rem;
  flex-shrink: 0;
}

.table-rename-row {
  display: grid;
  gap: 0.24rem;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.printer-config-info {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.printer-pickers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: end;
}

.printer-pickers button {
  min-height: 42px;
}

.printer-picker-actions {
  display: flex;
  gap: 0.25rem;
  align-items: end;
}

.settings-printer-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.settings-printer-tab {
  min-height: 40px;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.32px;
}

.settings-printer-tab.active {
  background: #d6af6f;
  color: var(--ink);
  border-color: #b38341;
}

.printer-collapse {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper);
  padding: 0.26rem 0.42rem;
  display: grid;
  gap: 0.4rem;
}

.printer-collapse > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.25px;
  color: var(--ink);
  text-transform: uppercase;
  user-select: none;
}

.printer-collapse > summary::-webkit-details-marker {
  display: none;
}

.printer-collapse > summary::after {
  content: "▾";
  font-size: 0.88rem;
  transition: transform 0.18s ease;
}

.printer-collapse[open] > summary::after {
  transform: rotate(180deg);
}

.printer-group-routing-list {
  display: grid;
  gap: 0.34rem;
  max-height: min(30vh, 230px);
  overflow: auto;
}

.settings-section .checkbox-inline {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  min-height: 42px;
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper-alt);
  padding: 0.34rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-secondary);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.settings-section .checkbox-inline input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 20px;
  border: none;
  background: #ccc;
  position: relative;
  cursor: pointer;
  outline: none;
  flex: 0 0 auto;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.settings-section .checkbox-inline input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease;
}

.settings-section .checkbox-inline input[type="checkbox"]:checked {
  background: var(--ok, #2e7d32);
  box-shadow: 0 0 8px rgba(46, 125, 50, 0.3);
}

.settings-section .checkbox-inline input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

.settings-section .checkbox-inline input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #5B9E9E);
  outline-offset: 2px;
}

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

.printer-style-label-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.printer-style-label-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent, #c17e34);
}

.printer-style-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.layout-width-value {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.settings-view {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  grid-auto-rows: max-content;
}

#settingsLayoutView {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

#settingsLayoutView .settings-layout-shell {
  min-height: 0;
  display: grid;
  gap: 0.6rem;
  border: none;
  background: transparent;
  padding: 0;
}

#settingsLayoutView .settings-layout-field {
  display: grid;
  gap: 0.28rem;
}

#invoicingGeneratePanel {
  display: grid;
  gap: 0.5rem;
}

.settings-view[hidden] {
  display: none !important;
}

/* --- Contatori: scroll + icone compatte --- */
#printerModal .settings-view {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
}

.counter-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.counter-section-head h4 {
  margin: 0;
}
.counter-section-head .printer-style-hint {
  margin: 0.15rem 0 0;
}

.counter-actions-icons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.counter-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.counter-icon-btn:hover {
  border-color: var(--border-warm);
  background: var(--paper-alt);
}
.counter-icon-btn:active {
  transform: scale(0.92);
  border-color: var(--accent);
  color: var(--accent);
}
.counter-icon-btn.save {
  color: #4caf50;
}
.counter-icon-btn.reload {
  color: var(--ink);
  opacity: 0.6;
}

.counter-icon-btn svg {
  display: block;
}

.layout-reset-icon {
  margin-left: auto;
}

/* Toggle inline compatti per pacchetti menu */
.pkg-inline-toggle {
  width: auto;
  gap: 4px;
  font-size: 12px;
}
.pkg-inline-toggle .perm-toggle-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* HACCP: form a 2 colonne forzato */
.haccp-row-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px;
}

/* HACCP: chip voci template */
.haccp-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 8px;
}
.haccp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.3;
}
.haccp-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--danger, #d32f2f);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
}
.haccp-chip-remove:hover {
  opacity: 0.6;
}

/* QR Code tavoli — accordion per sala */
.qr-room-accordion {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.qr-room-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.75rem;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-alt);
  cursor: pointer;
  list-style: none;
}
.qr-room-summary::-webkit-details-marker {
  display: none;
}
.qr-room-summary::before {
  content: "\25B6";
  font-size: 10px;
  transition: transform 0.2s;
}
details.qr-room-accordion[open] > .qr-room-summary::before {
  transform: rotate(90deg);
}
.qr-room-count {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
}
.qr-room-tables {
  padding: 0.25rem 0.5rem 0.5rem;
}

/* Toolbar fasce orarie */
.ts-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper-alt);
  margin-bottom: 0.5rem;
}

.ts-toolbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  transition: opacity 0.15s;
  opacity: 0.75;
}
.ts-toolbar-btn span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ts-toolbar-btn:hover,
.ts-toolbar-btn:active {
  opacity: 1;
}
.ts-toolbar-btn svg {
  color: var(--ink, #e8e0d6);
}
.ts-toolbar-save svg {
  color: var(--ink, #e8e0d6);
}

/* Toggle compatti per chip giorni/canali nelle fasce orarie */
.ts-chip-toggle {
  gap: 4px;
}
.ts-chip-toggle .perm-toggle-label {
  font-size: 11px;
  min-width: 32px;
}
.ts-days-grid .ts-chip-toggle {
  width: calc(25% - 5px);
  justify-content: space-between;
}

.pkg-trash-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--danger, #d32f2f);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pkg-trash-btn:hover {
  opacity: 0.7;
}
.pkg-trash-btn:active {
  transform: scale(0.85);
  opacity: 1;
}

.settings-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0;
}

.settings-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.13s;
}

.settings-menu-btn:hover,
.settings-menu-btn:active {
  background: var(--paper-alt);
  color: var(--accent);
}

.settings-menu-icon {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.settings-menu-icon svg {
  display: block;
}

.settings-view-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.settings-view-head h4 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0.3px;
}

.settings-head-close-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--accent-dark);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.settings-head-close-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-head-close-btn:hover {
  background: var(--paper-alt);
  color: var(--accent);
  transform: translateX(-1px);
}

.settings-head-close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.packages-help-box {
  margin-top: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed #d6d6d6;
  border-radius: 8px;
  background: var(--paper);
}

.packages-help-box h5 {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-family: "Oswald", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.packages-help-box ol {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.22rem;
  font-size: 0.8rem;
  color: var(--ink);
}

.gas-help-btn {
  margin-left: auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-secondary);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.gas-help-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.gas-help-btn:hover {
  background: rgba(186, 43, 43, 0.06);
  color: var(--accent);
  transform: translateY(-1px);
}

.gas-help-btn:active {
  transform: scale(0.95);
}

.gas-help-modal-card {
  max-width: 620px;
}

.gas-help-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.35;
}

.settings-section {
  border: 1px solid var(--border-warm);
  border-radius: 14px;
  background: var(--paper-warm);
  padding: 0.5rem;
  display: grid;
  gap: 0.45rem;
  transition: box-shadow 0.18s ease;
}

.settings-section h4 {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

/* KDS settings (operators UI) */
#settingsKdsView #kdsConfigSection {
  display: grid;
  gap: 0.6rem;
}

.kds-settings-note {
  margin: 0.25rem 0 0.15rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  line-height: 1.35;
}

.kds-inline-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.kds-flex-input {
  flex: 1 1 auto;
  min-width: 0;
}

.kds-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.3rem;
}

.kds-time-label {
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
  color: var(--ink-secondary);
}

.kds-time-input {
  width: 100%;
  margin-top: 0.22rem;
}

.kds-time-merge-label {
  margin-top: 0.45rem;
}

.kds-open-url {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--accent);
  word-break: break-all;
}

.kds-open-row {
  margin-top: 0.5rem;
}

#kdsOperatorsList {
  display: grid;
  gap: 0.5rem;
}

.kds-ops-empty {
  margin: 0.25rem 0;
}

.kds-op-card {
  border: 1px solid var(--border-warm);
  border-radius: 11px;
  background: var(--paper-alt);
  padding: 0.55rem 0.6rem;
  box-shadow: 0 1px 0 var(--shadow-color);
}

.kds-op-card.expanded {
  background: var(--paper);
  border-color: var(--line-strong);
}

.kds-op-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.kds-op-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.kds-op-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.kds-op-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kds-op-preview {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.kds-op-preview-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  background: var(--paper);
  color: var(--ink-secondary);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kds-op-preview-more {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ink-muted);
}

.kds-op-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
}

.kds-op-caret {
  color: var(--ink-muted);
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

.kds-op-card.expanded .kds-op-caret {
  transform: rotate(180deg);
}

.kds-op-delete-btn {
  min-height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}

.kds-op-delete-btn:hover {
  opacity: 0.7;
}

.kds-op-detail {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 0.55rem;
}

.kds-op-detail[hidden] {
  display: none !important;
}

.kds-op-detail-title {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-secondary);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kds-op-sections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.kds-op-section-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
}

.kds-op-section-head {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.38rem 0.46rem;
}

.kds-op-section-title-btn {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 800;
}

.kds-op-section-title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kds-op-section-title-caret {
  font-size: 0.72rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.kds-op-section-assign-toggle {
  flex-shrink: 0;
}

.kds-op-section-prep {
  border-top: 1px dashed var(--border);
  padding: 0.42rem 0.46rem 0.5rem;
  display: grid;
  gap: 0.38rem;
  background: var(--paper-alt);
}

.kds-op-prep-group {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.34rem;
  align-items: center;
}

.kds-op-prep-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-secondary);
  font-weight: 800;
}

.kds-op-prep-input {
  min-height: 32px;
  width: 88px;
  text-align: center;
  padding: 0.22rem 0.3rem;
}

.kds-op-prep-input:disabled {
  opacity: 0.6;
}

.kds-op-prep-reset {
  min-height: 32px;
  padding: 0.16rem 0.46rem;
}

.kds-op-prep-note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-muted);
  line-height: 1.3;
}

.kds-op-prep-products {
  display: grid;
  gap: 0.28rem;
}

.kds-op-prep-row {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 33px;
  margin: 0;
  padding: 0.22rem 0.34rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
}

.kds-op-prep-product-name {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kds-op-prep-toggle {
  flex-shrink: 0;
}

.kds-op-prep-empty {
  font-size: 0.74rem;
  color: var(--ink-muted);
  padding: 0.26rem 0.06rem;
}

.kds-op-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.kds-op-product-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  max-width: 100%;
}

.kds-op-product-remove {
  min-height: 18px;
  min-width: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.kds-op-product-remove:hover {
  color: var(--danger);
}

.kds-op-search-wrap {
  position: relative;
}

.kds-op-search-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  padding: 0.38rem 0.55rem;
}

.kds-op-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 170px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper-modal);
  box-shadow: 0 8px 18px var(--shadow-color);
  z-index: 12;
  padding: 0.2rem;
  display: grid;
  gap: 0.16rem;
}

.kds-op-search-dropdown[hidden] {
  display: none !important;
}

.kds-op-search-option {
  width: 100%;
  min-height: 32px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.22rem 0.5rem;
}

.kds-op-search-option:hover {
  background: var(--paper-alt);
  border-color: var(--border);
}

@media (max-width: 700px) {
  .kds-time-grid {
    grid-template-columns: 1fr;
  }

  .kds-inline-row {
    flex-wrap: wrap;
  }

  .kds-inline-row .ghost-btn,
  .kds-inline-row button {
    width: 100%;
  }

  .kds-op-prep-group {
    grid-template-columns: 1fr;
  }

  .kds-op-prep-group .kds-op-prep-input,
  .kds-op-prep-group .kds-op-prep-reset {
    width: 100%;
  }
}

.settings-fiscal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.settings-fiscal-grid label {
  letter-spacing: 0.5px;
}
.settings-fiscal-grid input,
.settings-fiscal-grid select,
.settings-fiscal-grid textarea {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-fiscal-grid input:focus,
.settings-fiscal-grid select:focus,
.settings-fiscal-grid textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(186, 43, 43, 0.1);
}

.settings-fiscal-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.settings-fiscal-list-head button {
  min-height: 34px;
  padding: 0.16rem 0.54rem;
}

.settings-coperto-types-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.settings-coperto-save-icon-btn {
  min-height: 42px;
  min-width: 42px;
  width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
}

.settings-coperto-save-icon-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-note {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.82rem;
  color: var(--text-secondary, #888);
  line-height: 1.3;
}

.settings-fiscal-list {
  display: grid;
  gap: 0.34rem;
}

.settings-fiscal-row {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.4rem;
  display: grid;
  gap: 0.35rem;
}

.settings-fiscal-row-grid {
  display: grid;
  gap: 0.35rem;
}

.settings-fiscal-row-grid.vat {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
}

.settings-fiscal-row-grid.department {
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
}

.settings-fiscal-row-grid.payment {
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(160px, 1.2fr) 72px;
}

.settings-fiscal-row-grid label {
  font-size: 0.68rem;
}

.settings-fiscal-row-tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.settings-fiscal-row-tools button {
  min-height: 32px;
  min-width: 96px;
  padding: 0.16rem 0.44rem;
}

.settings-fiscal-coverage-list {
  display: grid;
  gap: 0.35rem;
  max-height: min(34vh, 290px);
  overflow: auto;
}

.settings-fiscal-coverage-row {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.34rem 0.42rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 168px);
  gap: 0.45rem;
  align-items: center;
}

.settings-fiscal-coverage-override {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 168px) auto;
  margin-left: 16px;
  border-style: dashed;
}

.settings-fiscal-coverage-main {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.settings-fiscal-coverage-title {
  font-size: 0.86rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-fiscal-coverage-meta {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.settings-fiscal-doc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 66px;
  padding: 0 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.settings-fiscal-doc-status.sent {
  border-color: #9ec3a4;
  background: #eefaf0;
  color: #235e2f;
}

.settings-fiscal-doc-status.error {
  border-color: #d78d8d;
  background: #fff1f1;
  color: #a00000;
}

.settings-tables-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}
.settings-customers-tools {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-warm);
}
#fiscalCustomerNewBtn {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  #fiscalCustomerNewBtn:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(186, 43, 43, 0.22);
    transform: translateY(-1px);
  }
}
#fiscalCustomerSearchInput {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
#fiscalCustomerSearchInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(186, 43, 43, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Reusable icon button for settings toolbars */
.settings-icon-btn {
  min-height: 42px;
  min-width: 42px;
  width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  box-shadow: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.1);
  transform: translateY(-1px);
}
.settings-icon-btn:active {
  transform: scale(0.95);
}
.settings-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invoice-customer-suggestions {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.2rem;
  max-height: min(26vh, 220px);
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
}

.invoice-customer-suggestions[hidden] {
  display: none;
}

.invoice-customer-suggestion-btn {
  min-height: 40px;
  width: 100%;
  display: grid;
  gap: 0.08rem;
  text-align: left;
  justify-items: start;
  border-radius: 8px;
  border: 1px solid var(--border-warm);
  background: var(--paper);
  padding: 0.34rem 0.5rem;
}

.invoice-customer-suggestion-name {
  font-size: 0.83rem;
  font-weight: 900;
  color: var(--ink);
}

.invoice-customer-suggestion-meta {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.settings-rooms-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.settings-room-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: end;
}

.settings-room-picker label {
  display: grid;
  gap: 0.24rem;
}

.settings-room-options {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  overflow-x: auto;
  padding: 0.2rem 0.04rem 0.15rem;
}

.settings-room-option {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--border-warm);
  background: var(--paper);
  color: var(--ink);
  padding: 0.18rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-room-option:active {
  transform: scale(0.95);
}

.settings-room-option.active {
  border-color: var(--accent);
  background: rgba(186, 43, 43, 0.06);
  color: var(--accent-dark);
  box-shadow: 0 0 0 2px rgba(186, 43, 43, 0.08);
}

html.dark-mode .settings-room-option.active {
  background: rgba(186, 43, 43, 0.12);
}

.settings-room-option-name {
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.settings-room-option-count {
  min-width: 1.3rem;
  min-height: 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 0.22rem;
  font-variant-numeric: tabular-nums;
}

.settings-room-option.active .settings-room-option-count {
  border-color: rgba(186, 43, 43, 0.2);
  background: rgba(186, 43, 43, 0.08);
  color: var(--accent);
}

.settings-room-picker-actions {
  display: flex;
  gap: 0.25rem;
  align-items: end;
}

.settings-tables-list {
  display: grid;
  gap: 0.3rem;
  max-height: min(34vh, 280px);
  overflow: auto;
  padding-right: 0.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-warm) transparent;
}

.settings-table-row {
  border: 1px solid var(--border-warm);
  border-left: 3px solid transparent;
  border-radius: 9px;
  background: var(--paper);
  padding: 0.42rem 0.48rem 0.42rem 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-table-row:active {
  border-left-color: var(--accent);
  background: var(--paper-alt);
}

.settings-table-meta {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.settings-table-name {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.settings-table-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 20px;
  padding: 0 0.38rem;
  border: 1px solid var(--border-warm);
  border-radius: 999px;
  background: var(--paper-alt);
  font-size: 0.66rem;
  font-weight: 900;
  color: var(--ink-secondary);
  letter-spacing: 0.4px;
  font-family: "DM Mono", "Fira Code", monospace;
  text-transform: uppercase;
}

.settings-table-delete {
  min-height: 32px;
  min-width: 90px;
  padding: 0.22rem 0.5rem;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-table-delete:active {
  transform: scale(0.92);
}

.settings-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.settings-table-action {
  min-height: 32px;
  min-width: 86px;
  padding: 0.22rem 0.5rem;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-table-action:active {
  transform: scale(0.92);
}

.settings-table-row.drag-over-table {
  border-top: 2.5px solid var(--accent, #5B9E9E);
  background: rgba(186, 43, 43, 0.03);
}

.settings-table-empty {
  border: 1px dashed var(--border-warm);
  border-radius: 8px;
  padding: 0.8rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--paper-alt);
  letter-spacing: 0.3px;
  opacity: 0.7;
}

#settingsTablesView {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

#settingsTablesView .settings-tables-section {
  min-height: 0;
  display: grid;
  gap: 0.4rem;
  border: none;
  background: transparent;
  padding: 0;
  align-content: start;
}

.settings-tables-block {
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper-warm);
  padding: 0.55rem 0.55rem 0.55rem 0.65rem;
  display: grid;
  gap: 0.42rem;
  transition: border-left-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-tables-block:hover {
  border-left-color: var(--accent);
}

#printerModal:not(.summary-fullscreen) #settingsTablesView .settings-tables-section > .settings-tables-block + .settings-tables-block {
  margin-top: 0.35rem;
}

.settings-tables-block-title {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-warm);
}

#settingsTablesView .settings-room-picker label {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22px;
  color: var(--ink-secondary);
}

#settingsTablesView .settings-room-picker select {
  min-height: 36px;
}

#settingsTablesView .settings-tables-list {
  max-height: min(42vh, 370px);
}

#printerModal:not(.summary-fullscreen) #settingsTablesView .settings-tables-list {
  max-height: min(52vh, 460px);
}

#settingsTablesView .settings-tables-block {
  padding: 0.4rem 0.55rem 0.4rem 0.65rem;
  gap: 0.32rem;
}

#settingsTablesView .settings-tables-block input[type="text"] {
  padding: 0.28rem 0.5rem;
  font-size: 0.82rem;
  min-height: 34px;
}

.settings-coperto-groups-list {
  display: grid;
  gap: 0.34rem;
  max-height: min(32vh, 240px);
  overflow: auto;
}

.settings-coperto-group-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.38rem 0.42rem;
}

.settings-coperto-group-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.settings-coperto-group-name {
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-coperto-types-list {
  display: grid;
  gap: 0.42rem;
  max-height: min(46vh, 380px);
  overflow: auto;
}

.coperto-type-row {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
}

.coperto-type-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  user-select: none;
}

.coperto-type-summary-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.coperto-type-badge-default {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent, #5B9E9E);
  border: 1px solid var(--accent, #5B9E9E);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.coperto-type-summary-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-secondary);
  border: 1px solid var(--border-warm);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  background: #f9ebda;
  margin-left: auto;
}

.coperto-type-delete-btn {
  flex-shrink: 0;
}

.pkg-card {
  margin-bottom: 12px;
}

.pkg-card-summary {
  list-style: none;
  padding-right: 0.75rem;
}

.pkg-card-summary::-webkit-details-marker {
  display: none;
}

.pkg-card-chevron {
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--ink-secondary);
  border-bottom: 2px solid var(--ink-secondary);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
  flex-shrink: 0;
}

.pkg-card[open] .pkg-card-chevron {
  transform: rotate(225deg);
}

.pkg-card-body {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--border-warm);
  display: grid;
  gap: 0.2rem;
}

.packages-summary-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.packages-summary-name-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.packages-summary-main .coperto-type-summary-name {
  min-width: 0;
  line-height: 1.15;
  white-space: normal;
}

.packages-status-dot {
  width: 10px;
  height: 10px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--border-warm);
  flex-shrink: 0;
}

.packages-status-dot.is-enabled {
  background: var(--success, #4caf50);
}

.packages-summary-meta {
  min-width: 92px;
  display: grid;
  gap: 0.12rem;
  justify-items: start;
  line-height: 1.1;
  white-space: normal;
}

.packages-summary-price-text {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
}

.packages-summary-groups {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

/* ═══ Coperto Type Modal ═══ */
.coperto-type-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--overlay-color, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.coperto-type-modal-card {
  background: var(--paper-modal, #fff);
  color: var(--ink, #1f1a16);
  border-radius: 12px;
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.25));
  display: flex;
  flex-direction: column;
}

.coperto-type-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-warm, #e5ddd4);
  position: sticky;
  top: 0;
  background: var(--paper-modal, #fff);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.coperto-type-modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.coperto-type-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink-muted, #666);
  padding: 0 4px;
  line-height: 1;
}

.coperto-type-modal-body {
  padding: 12px 16px 16px;
  display: grid;
  gap: 0.38rem;
}

.coperto-type-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.coperto-type-default {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
}

.coperto-type-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(100px, 1fr);
  align-items: end;
  gap: 0.35rem 0.75rem;
}

.coperto-type-grid label {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.coperto-type-grid input {
  min-height: 34px;
  width: 100%;
  max-width: 100%;
}

.coperto-type-grid label:nth-child(1) input[data-coperto-name] {
  max-width: 100%;
}

.coperto-type-grid .coperto-type-selforder {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: end;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.coperto-web-label-field {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
}
.coperto-web-label-field input {
  min-height: 34px;
  width: 100%;
}

.coperto-type-selforder input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: #ccc;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  min-height: 0;
}

.coperto-type-selforder input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.coperto-type-selforder input[type="checkbox"]:checked {
  background: var(--accent, #5B9E9E);
}

.coperto-type-selforder input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.coperto-type-slot-list {
  display: grid;
  gap: 0.3rem;
}

.coperto-slot-row {
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  background: var(--paper-warm);
  position: relative;
  padding: 0.35rem 0.35rem 2.25rem;
  display: grid;
  gap: 0.32rem;
}

.coperto-slot-row.coperto-slot-row-required {
  padding-bottom: 0.35rem;
}

.coperto-slot-time-price {
  display: grid;
  grid-template-columns: minmax(56px, 72px) minmax(56px, 72px) minmax(56px, 72px) minmax(56px, 72px);
  align-items: end;
  gap: 0.32rem;
}

.coperto-slot-price-field {
  width: 72px;
  min-width: 0;
  max-width: 72px;
}

.coperto-slot-ayce-field {
  width: 72px;
  min-width: 0;
  max-width: 72px;
}

.coperto-slot-price-field input[data-coperto-slot-price],
.coperto-slot-ayce-field input[data-coperto-slot-ayce-price] {
  width: 72px;
  max-width: 72px;
}

.coperto-slot-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.15rem 2.5rem 0 0;
}

.coperto-slot-row.coperto-slot-row-required .coperto-slot-days {
  padding-right: 0;
}

.coperto-slot-day-label {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  user-select: none;
}

.coperto-slot-day-label input[type="checkbox"] {
  min-height: unset;
  width: 15px;
  height: 15px;
  margin: 0;
}

.coperto-slot-row label[hidden] {
  display: none;
}

.coperto-slot-row label {
  display: grid;
  gap: 0.18rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.coperto-slot-row input {
  min-height: 30px;
  padding: 0.25rem 0.35rem;
}

.coperto-slot-delete-btn {
  min-height: 40px;
  min-width: 40px;
  width: 40px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  position: absolute;
  right: 0.2rem;
  bottom: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a33636;
}

.coperto-slot-delete-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coperto-slot-delete-btn:hover {
  color: #8a2323;
}

.coperto-slot-add-btn {
  justify-self: start;
  min-height: 34px;
}

.coperto-slot-empty {
  font-size: 0.75rem;
}

/* Production Center Modal */
.pc-modal-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--border-warm);
}
.pc-modal-section-row:last-child { border-bottom: none; }

.pc-modal-section-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-modal-section-toggles {
  display: flex;
  gap: 0.9rem;
  flex-shrink: 0;
}

.pc-modal-toggle-compact {
  padding: 0 !important;
  gap: 0.22rem !important;
}

.pc-modal-toggle-compact .perm-toggle-label {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 0;
}

.coperto-type-grid select {
  min-height: 34px;
  width: 100%;
  max-width: 100%;
  font-size: 0.82rem;
}

.coperto-picker-modal-card {
  width: min(520px, 94vw);
}

.coperto-picker-list {
  display: grid;
  gap: 0.34rem;
  max-height: min(45vh, 340px);
  overflow: auto;
}

.coperto-picker-row {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
  padding: 0.4rem 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
}

.coperto-picker-row.single {
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;
}

.coperto-picker-row.open-table {
  touch-action: pan-y;
}

.coperto-picker-main {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.coperto-picker-main strong {
  font-size: 0.9rem;
  color: var(--ink);
}

.coperto-picker-main span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.coperto-picker-qty {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.86rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.42rem;
}

.coperto-picker-qty.active {
  border-color: #b23a32;
  background: #f7dbd9;
  color: #8f1e1e;
}

.coperto-picker-stepper {
  display: inline-grid;
  grid-template-columns: 36px 42px 36px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-warm);
}

.coperto-picker-stepper button {
  border: 0;
  background: #f1d7b8;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
  min-height: 32px;
  width: 100%;
}

.coperto-picker-stepper span {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--ink);
}

.variant-picker-modal-card {
  width: min(560px, 94vw);
}

.variant-picker-row {
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease;
}

.variant-picker-row.swiping {
  background: #fff4e6;
}

@media (max-width: 820px) {
  .coperto-type-grid {
    grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr);
  }

  .coperto-slot-time-price {
    grid-template-columns: 1fr;
  }

  .coperto-slot-delete-btn {
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RIEPILOGO — Warm Industrial Dashboard
   ═══════════════════════════════════════════════════════════════ */

.settings-summary-filters {
  display: grid;
  gap: 0.5rem;
}

.settings-summary-range-btn {
  min-height: 42px;
  border: 1.5px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper);
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-summary-range-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.08);
  transform: translateY(-1px);
}

.settings-summary-range-label {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--ink);
  text-align: center;
}

.settings-summary-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.settings-summary-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.settings-summary-mode-switch button {
  min-height: 38px;
  border: 1.5px solid var(--border-warm);
  border-radius: 10px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-secondary);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-summary-mode-switch button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.settings-summary-mode-switch button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  box-shadow: 0 2px 10px rgba(186, 43, 43, 0.18);
}

/* --- Dashboard 2-Column Layout --- */
.summary-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0.75rem;
  align-items: start;
}

.summary-dashboard-sidebar {
  order: 2;
  position: sticky;
  top: 0;
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: var(--paper);
  padding: 0.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.summary-top-dishes-mobile {
  display: none;
}
@media (max-width: 760px) {
  .summary-dashboard-sidebar:not(.summary-top-dishes-mobile) {
    display: none;
  }
  .summary-top-dishes-mobile {
    display: grid;
    position: static;
    order: unset;
    border: 1px solid var(--border-warm);
    border-left: 3px solid var(--accent);
    border-radius: 14px;
    background: var(--paper);
    padding: 0.65rem;
  }
}

.summary-dashboard-main {
  order: 1;
  display: grid;
  gap: 0.6rem;
}

/* --- Dashboard KPI Cards --- */
.summary-dashboard-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.summary-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper);
  padding: 0.6rem 0.4rem;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.summary-kpi-card--primary {
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
}

@media (hover: hover) {
  .summary-kpi-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(186, 43, 43, 0.06);
  }
}

.summary-kpi-value {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--ink);
  line-height: 1;
}

.summary-kpi-card--primary .summary-kpi-value {
  color: var(--accent);
}

.summary-kpi-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Dashboard Section Titles --- */
.summary-section-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-secondary);
  margin: 0.7rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-warm);
}

/* --- Top Dishes --- */
.summary-top-dishes {
  display: grid;
  gap: 0.2rem;
}

.summary-top-dish {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  background: var(--paper-alt);
  border: 1px solid var(--border-light);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .summary-top-dish:hover {
    border-color: var(--border-warm);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
}

.summary-top-dish:first-child {
  border-color: var(--accent);
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.06);
}

.summary-top-rank {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: center;
}

.summary-top-dish:first-child .summary-top-rank {
  color: var(--accent);
  font-weight: 700;
}

.summary-top-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.summary-top-name {
  font-size: 0.77rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-top-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-light);
}

.summary-top-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-top-dish:not(:first-child) .summary-top-bar-fill {
  background: var(--ink-secondary);
  opacity: 0.5;
}

.summary-top-qty {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 1.8rem;
  text-align: right;
}

/* --- Charts Row --- */
.summary-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.summary-pies-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: border-left-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.summary-pies-row:hover {
  border-left-color: var(--accent);
}

.summary-groups-chart {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-left-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-groups-chart:hover {
  border-left-color: var(--accent);
}

.summary-groups-chart .summary-payments {
  gap: 0.18rem;
}

.summary-groups-chart .summary-payment-row {
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
}

/* --- Hourly Chart --- */
.summary-time-charts-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-hourly-chart,
.summary-daily-chart {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-hourly-chart:hover,
.summary-daily-chart:hover {
  border-left-color: var(--accent);
  background: var(--paper-alt, rgba(0,0,0,0.03));
  box-shadow: 0 3px 12px rgba(186, 43, 43, 0.06);
  transform: translateY(-1px);
}

.summary-daily-bar {
  background: #d98b3a !important;
  box-shadow: 0 -1px 4px rgba(217, 139, 58, 0.15);
}

.summary-band-bar {
  background: #5e9a5a !important;
  box-shadow: 0 -1px 4px rgba(94, 154, 90, 0.15);
}

.summary-hourly-chart-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.summary-hourly-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 3px;
  height: 100px;
  padding-bottom: 1.3rem;
  position: relative;
}

.summary-hourly-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.summary-hourly-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -1px 4px rgba(186, 43, 43, 0.1);
}

.summary-hourly-label {
  position: absolute;
  bottom: -1.15rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.2px;
}

.summary-hourly-val {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.56rem;
  font-weight: 400;
  color: var(--ink-secondary);
  margin-bottom: 3px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* --- Payment Breakdown --- */
.summary-payments {
  display: grid;
  gap: 0.25rem;
}

.summary-payment-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0;
}

.summary-payment-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-payment-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--border-light);
  overflow: hidden;
}

.summary-payment-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-payment-value {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-secondary);
  min-width: 3.5rem;
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* --- Table List Collapsible --- */
.summary-table-details {
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-left-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-table-details:hover {
  border-left-color: var(--accent);
}

.summary-table-details > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-table-details[open] > summary {
  color: var(--accent);
  border-bottom: 1px solid var(--border-light);
}

.summary-table-details > summary::-webkit-details-marker { display: none; }

.summary-table-details > summary::before {
  content: "\25B6";
  font-size: 0.55rem;
  color: var(--ink-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-table-details[open] > summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}

.summary-table-details-list {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  max-height: min(50vh, 400px);
  overflow-y: auto;
}

/* --- Chart Expand Overlay --- */
[data-chart-expand] {
  cursor: pointer;
}

.summary-chart-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--overlay-color);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  animation: summaryOverlayIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes summaryOverlayIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.summary-chart-overlay-content {
  background: var(--paper);
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  padding: 1.2rem;
  width: min(92vw, 800px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px var(--shadow-color), 0 4px 16px rgba(186, 43, 43, 0.06);
}

.summary-chart-overlay-content .summary-hourly-bars {
  height: 200px;
}

.summary-chart-overlay-content .summary-payment-row {
  grid-template-columns: 10rem minmax(0, 1fr) auto;
}

.summary-chart-overlay-content .summary-groups-chart .summary-payment-row {
  grid-template-columns: 10rem minmax(0, 1fr) auto;
}

.settings-summary-stats {
  display: grid;
  gap: 0.35rem;
}

.settings-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper);
  padding: 0.45rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ink-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-summary-stat strong {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--ink);
  line-height: 1;
}

.settings-summary-list {
  display: grid;
  gap: 0.55rem;
  overflow: auto;
}

.settings-stock-list {
  display: grid;
  gap: 0.3rem;
  max-height: min(50vh, 420px);
  overflow-y: auto;
}

.settings-stock-actions {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  overflow: hidden;
}

.settings-stock-actions button {
  flex: 1;
  min-height: 34px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  transition: background 0.15s, color 0.15s;
}

.settings-stock-actions button:not(:last-child) {
  border-right: 1px solid var(--border-warm);
}

.settings-stock-actions button.active {
  background: var(--accent);
  color: var(--ink-inverse);
}

.settings-stock-deleted-wrap {
  display: grid;
  gap: 0.35rem;
}

.settings-summary-stats[hidden],
.settings-stock-list[hidden],
.settings-stock-deleted-wrap[hidden] {
  display: none !important;
}

.settings-stock-deleted-wrap h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #6a533d;
  letter-spacing: 0.2px;
}

.settings-summary-entry {
  border: 1px solid var(--border-warm);
  border-left: 3px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper);
  padding: 0.6rem 0.65rem;
  display: grid;
  gap: 0.22rem;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.settings-summary-entry[data-action="pick-fiscal-customer"] {
  cursor: pointer;
}

@media (hover: hover) {
  .settings-summary-entry[data-action="pick-fiscal-customer"]:hover {
    border-left-color: var(--accent);
    background: var(--paper-warm);
    box-shadow: 0 3px 12px rgba(186, 43, 43, 0.06);
    transform: translateY(-1px);
  }
}

.settings-summary-entry.active {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--paper-warm);
  box-shadow: 0 4px 16px rgba(186, 43, 43, 0.1), inset 0 0 0 1px rgba(186, 43, 43, 0.06);
}

.settings-summary-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.settings-summary-entry-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.settings-summary-entry-amount {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ok-text);
  letter-spacing: 0.3px;
}

.settings-summary-entry-meta {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.admin-env-entry {
  gap: 0.32rem;
}

.admin-env-status {
  font-weight: 900;
}

.admin-env-status.active {
  color: #2a6d34;
}

.admin-env-status.blocked {
  color: #a23a3a;
}

.admin-env-status.expired {
  color: #a56b18;
}

.admin-env-status.trial {
  color: #286c8d;
}

.admin-env-tools {
  display: grid;
  gap: 0.36rem;
}

.admin-env-trial-row {
  display: grid;
  gap: 0.2rem;
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--ink-secondary);
}

.admin-env-trial-row input {
  min-height: 34px;
}

.admin-env-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.admin-env-actions button {
  min-height: 34px;
}

.admin-env-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   DOCUMENTS HUB — Premium Redesign
   ═══════════════════════════════════════════════════════════ */

/* --- Filter Section --- */
.docs-hub-filters-section {
  padding-bottom: 0.1rem !important;
}

.docs-hub-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.docs-hub-filter-field {
  display: grid;
  gap: 0.18rem;
}

.docs-hub-filter-label {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-secondary);
}

.docs-hub-filter-field select,
.docs-hub-filter-field input {
  min-height: 36px;
  font-size: 0.82rem;
}

.docs-hub-filter-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.docs-hub-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.docs-hub-apply-btn:active {
  transform: scale(0.97);
}

.docs-hub-apply-btn svg {
  flex-shrink: 0;
}

.docs-hub-reset-btn {
  min-height: 40px;
  min-width: 72px;
  padding: 0 0.65rem;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

/* --- Stats Bar --- */
.docs-hub-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  margin: 0 0.1rem;
}

.docs-hub-stats-bar[hidden] {
  display: none !important;
}

.docs-hub-stats-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.docs-hub-stats-count {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
}

.docs-hub-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 20px;
  line-height: 1.2;
}
.docs-hub-pill.scontrino { background: #eaf6f9; color: #1f5969; }
.docs-hub-pill.fattura { background: #eef7e4; color: #3e6224; }
.docs-hub-pill.pagato { background: #fff2df; color: #6f4c22; }

html.dark-mode .docs-hub-pill.scontrino { background: #1a3540; color: #7ac4d4; }
html.dark-mode .docs-hub-pill.fattura { background: #1a3518; color: #88c468; }
html.dark-mode .docs-hub-pill.pagato { background: #3a2e18; color: #d4a456; }

.docs-hub-stats-total {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* --- List Section --- */
.docs-hub-list-section {
  padding-top: 0.15rem !important;
}

.docs-hub-list {
  display: grid;
  gap: 0.35rem;
  padding-right: 0.1rem;
}

/* --- Document Card --- */
.docs-hub-card {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  border: 1px solid var(--border-warm);
  border-radius: 11px;
  background: var(--paper-alt);
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s;
}

.docs-hub-card:active {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.docs-hub-card-accent {
  border-radius: 11px 0 0 11px;
  background: var(--border-warm);
}

.docs-hub-card-accent.scontrino { background: #3a8fa0; }
.docs-hub-card-accent.fattura { background: #5a9a3a; }
.docs-hub-card-accent.pagato { background: #c08a40; }
.docs-hub-card-accent.nota_credito { background: #d97706; }

.docs-hub-card-body {
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.22rem;
}

.docs-hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.docs-hub-card-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.docs-hub-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  border: 1px solid var(--border-warm);
  color: var(--ink-secondary);
}

.docs-hub-card-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-hub-card-icon.scontrino { color: #1f5969; background: #eaf6f9; border-color: #a5c9d2; }
.docs-hub-card-icon.fattura { color: #3e6224; background: #eef7e4; border-color: #b9cfa2; }
.docs-hub-card-icon.pagato { color: #6f4c22; background: #fff2df; border-color: #d6ba93; }
.docs-hub-card-icon.nota_credito { color: #d97706; background: #f59e0b20; border-color: #d9770640; }

.docs-hub-card-title-wrap {
  min-width: 0;
  display: grid;
  gap: 0.04rem;
}

.docs-hub-card-number {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-hub-card-type-label {
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-secondary);
}

/* Type badge (kept for compatibility) */
.settings-doc-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  border-radius: 999px;
  padding: 0 0.38rem;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22px;
}

.settings-doc-type-badge.scontrino {
  border-color: #a5c9d2;
  background: #eaf6f9;
  color: #1f5969;
}

.settings-doc-type-badge.fattura {
  border-color: #b9cfa2;
  background: #eef7e4;
  color: #3e6224;
}

.settings-doc-type-badge.pagato {
  border-color: #d6ba93;
  background: #fff2df;
  color: #6f4c22;
}

.settings-doc-type-badge.nota_credito {
  border-color: #d9770640;
  background: #f59e0b20;
  color: #d97706;
}

/* Status badge */
.docs-hub-card-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22px;
  white-space: nowrap;
}

.settings-doc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22px;
}

.docs-hub-card-status.sent, .settings-doc-status.sent {
  border-color: #9ec3a4;
  background: #eefaf0;
  color: #235e2f;
}

.docs-hub-card-status.error, .settings-doc-status.error {
  border-color: #d78d8d;
  background: #fff1f1;
  color: #a00000;
}

.docs-hub-card-status.queued, .settings-doc-status.queued {
  border-color: #d4a458;
  background: #fff3de;
  color: #8b4f00;
}

.docs-hub-card-status.paid, .settings-doc-status.paid {
  border-color: #d6ba93;
  background: #fff2df;
  color: #6f4c22;
}

.docs-hub-card-status.voided {
  border-color: #ccc;
  background: #f5f5f5;
  color: #888;
}

/* Card meta row */
.docs-hub-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.docs-hub-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  white-space: nowrap;
}

.docs-hub-card-meta-item svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

/* Card amount highlight */
.docs-hub-card-amount {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.2px;
}

/* Card event text subtitle */
.docs-hub-card-event {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card bottom row with open button */
.docs-hub-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.08rem;
}

.docs-hub-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 30px;
  padding: 0 0.6rem;
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  margin-left: auto;
}

.docs-hub-open-btn:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.docs-hub-open-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Empty state */
.docs-hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--border-warm);
  border-radius: 12px;
  background: var(--paper-warm);
}

.docs-hub-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper-alt);
  border: 1px solid var(--border-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-secondary);
  opacity: 0.5;
}

.docs-hub-empty-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-hub-empty-text {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.docs-hub-empty-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* ── Analytics ── */
.docs-hub-analytics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0 0.1rem;
}
.docs-hub-analytics[hidden] { display: none !important; }

.docs-hub-analytics-card {
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  background: var(--paper-alt);
  padding: 0.55rem 0.6rem 0.5rem;
}

.docs-hub-analytics-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-secondary);
  margin-bottom: 0.4rem;
}
.docs-hub-analytics-title svg {
  flex-shrink: 0;
}

.docs-hub-pay-grid {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.docs-hub-pay-row {
  display: grid;
  grid-template-columns: 10px 1fr minmax(50px, 2fr) auto auto;
  align-items: center;
  gap: 0.35rem;
}

.docs-hub-pay-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.docs-hub-pay-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-hub-pay-bar-wrap {
  height: 8px;
  border-radius: 4px;
  background: var(--paper-warm);
  overflow: hidden;
}

.docs-hub-pay-bar {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.3s ease;
}

.docs-hub-pay-amount {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.docs-hub-pay-pct {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-secondary);
  text-align: right;
  min-width: 32px;
  white-space: nowrap;
}

.docs-hub-pay-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-warm);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.docs-hub-hour-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
}

.docs-hub-hour-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.docs-hub-hour-bar-wrap {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.docs-hub-hour-bar {
  width: 100%;
  max-width: 22px;
  border-radius: 3px 3px 0 0;
  background: var(--accent, #cb6541);
  min-height: 0;
  transition: height 0.3s ease;
}

.docs-hub-hour-col.has-data .docs-hub-hour-bar {
  min-height: 3px;
}

.docs-hub-hour-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ink-secondary);
  line-height: 1;
}

/* Dark mode analytics */
html.dark-mode .docs-hub-analytics-card {
  background: var(--paper-alt);
  border-color: var(--border-warm);
}
html.dark-mode .docs-hub-pay-bar-wrap {
  background: var(--paper-warm);
}
html.dark-mode .docs-hub-hour-bar {
  opacity: 0.85;
}

/* ── Detail Modal ── */
.docs-hub-detail-card {
  width: min(520px, 94vw);
}

.docs-hub-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}

.docs-hub-detail-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  border: 1px solid var(--border-warm);
  color: var(--ink-secondary);
}

.docs-hub-detail-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-hub-detail-icon.scontrino { color: #1f5969; background: #eaf6f9; border-color: #a5c9d2; }
.docs-hub-detail-icon.fattura { color: #3e6224; background: #eef7e4; border-color: #b9cfa2; }
.docs-hub-detail-icon.pagato { color: #6f4c22; background: #fff2df; border-color: #d6ba93; }
.docs-hub-detail-icon.nota_credito { color: #d97706; background: #f59e0b20; border-color: #d9770640; }

.docs-hub-detail-title-wrap {
  min-width: 0;
}

.docs-hub-detail-title-wrap h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
}

.docs-hub-detail-meta {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.docs-hub-detail-body {
  margin: 0;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-warm);
  padding: 0.6rem 0.65rem;
  max-height: min(54vh, 440px);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}

.docs-hub-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.docs-hub-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 42px;
  padding: 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.docs-hub-action-btn:active {
  transform: scale(0.97);
}

.docs-hub-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.docs-hub-action-btn svg {
  flex-shrink: 0;
}

.docs-hub-action-reprint {
  background: var(--accent);
  color: #fff;
}

.docs-hub-action-void {
  background: #c0392b;
  color: #fff;
}

.docs-hub-action-credit-note {
  background: #f59e0b18;
  color: #b45309;
}

/* ── Dark mode adjustments for doc cards ── */
html.dark-mode .docs-hub-card-icon.scontrino { color: #7ac4d4; background: #1a3540; border-color: #2e5560; }
html.dark-mode .docs-hub-card-icon.fattura { color: #88c468; background: #1a3518; border-color: #2e5528; }
html.dark-mode .docs-hub-card-icon.pagato { color: #d4a456; background: #3a2e18; border-color: #5a4828; }
html.dark-mode .docs-hub-card-icon.nota_credito { color: #f59e0b; background: #3a2e18; border-color: #5a4828; }

html.dark-mode .docs-hub-card-accent.scontrino { background: #2e7080; }
html.dark-mode .docs-hub-card-accent.fattura { background: #3e7a28; }
html.dark-mode .docs-hub-card-accent.pagato { background: #8a6a30; }
html.dark-mode .docs-hub-card-accent.nota_credito { background: #8a6a18; }

html.dark-mode .docs-hub-card-status.sent, html.dark-mode .settings-doc-status.sent { background: #1a3a1a; color: #6fcf73; border-color: #2a5a2a; }
html.dark-mode .docs-hub-card-status.error, html.dark-mode .settings-doc-status.error { background: #3d2020; color: #f08080; border-color: #5a3030; }
html.dark-mode .docs-hub-card-status.queued, html.dark-mode .settings-doc-status.queued { background: #3d3020; color: #f0a040; border-color: #5a4828; }
html.dark-mode .docs-hub-card-status.paid, html.dark-mode .settings-doc-status.paid { background: #3a2e18; color: #d4a456; border-color: #5a4828; }
html.dark-mode .docs-hub-card-status.voided { background: #2a2a2a; color: #888; border-color: #3a3a3a; }

html.dark-mode .docs-hub-detail-icon.scontrino { color: #7ac4d4; background: #1a3540; border-color: #2e5560; }
html.dark-mode .docs-hub-detail-icon.fattura { color: #88c468; background: #1a3518; border-color: #2e5528; }
html.dark-mode .docs-hub-detail-icon.pagato { color: #d4a456; background: #3a2e18; border-color: #5a4828; }
html.dark-mode .docs-hub-detail-icon.nota_credito { color: #f59e0b; background: #3a2e18; border-color: #5a4828; }

html.dark-mode .settings-doc-type-badge.scontrino { background: #1a3540; color: #7ac4d4; border-color: #2e5560; }
html.dark-mode .settings-doc-type-badge.fattura { background: #1a3518; color: #88c468; border-color: #2e5528; }
html.dark-mode .settings-doc-type-badge.pagato { background: #3a2e18; color: #d4a456; border-color: #5a4828; }
html.dark-mode .settings-doc-type-badge.nota_credito { background: #3a2e18; color: #f59e0b; border-color: #5a4828; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .docs-hub-filter-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .docs-hub-stats-bar {
    flex-wrap: wrap;
  }
  .docs-hub-analytics {
    grid-template-columns: 1fr;
  }
  .docs-hub-pay-bar-wrap {
    display: none;
  }
  .docs-hub-pay-row {
    grid-template-columns: 10px 1fr auto auto;
  }
  .docs-hub-hour-chart {
    height: 60px;
  }
  .docs-hub-hour-bar-wrap {
    height: 44px;
  }
}

/* Legacy class compat */
.settings-doc-entry {
  gap: 0.26rem;
}
.settings-doc-head-left {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.settings-document-detail-body {
  margin: 0;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-warm);
  padding: 0.6rem 0.65rem;
  max-height: min(54vh, 440px);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}

.fiscal-doc-action-btn {
  flex: 1;
  padding: 0.55rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}
.fiscal-doc-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fiscal-doc-void-btn {
  background: #c0392b;
}
.fiscal-doc-void-btn:disabled {
  background: #c0392b;
}

.settings-stock-entry {
  gap: 0.18rem;
  padding: 0.35rem 0.45rem;
}

.settings-stock-entry-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.settings-stock-entry-meta {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.settings-stock-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.settings-stock-entry-actions button {
  min-height: 28px;
  padding: 0.22rem 0.5rem;
  font-size: 0.76rem;
}

.settings-stock-deleted-entry {
  border-style: solid;
  border-color: #e8d5be;
  background: var(--paper-warm);
  opacity: 0.75;
}

.settings-stock-deleted-qty {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #8a2d2d;
}

.settings-stock-meta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.settings-stock-remaining {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  padding: 0 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border-warm);
  background: var(--paper-warm);
  color: var(--ink-secondary);
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.settings-stock-remaining.pos {
  color: #235e2f;
  border-color: #9ec3a4;
  background: #eefaf0;
}

.settings-stock-remaining.zero {
  color: #8b4f00;
  border-color: #d4a458;
  background: #fff3de;
}

.settings-stock-remaining.neg {
  color: #a00000;
  border-color: #d78d8d;
  background: #fff1f1;
}

.settings-summary-sold-group .settings-summary-entry-amount {
  color: #8a5a20;
}

.settings-summary-pie-card {
  gap: 0.4rem;
  border-left: 3px solid var(--border-warm);
  transition: border-left-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-summary-pie-card:hover {
  border-left-color: var(--accent);
}

.settings-summary-pie-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.settings-summary-pie {
  --summary-pie: #d6bc9d 0% 100%;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  border: 2px solid var(--border-warm);
  background: conic-gradient(var(--summary-pie));
  position: relative;
  display: grid;
  place-items: center;
  margin-inline: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), inset 0 0 0 3px var(--paper);
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-summary-pie-card:hover .settings-summary-pie {
  box-shadow: 0 4px 18px rgba(186, 43, 43, 0.08), inset 0 0 0 3px var(--paper);
}

.settings-summary-pie::after {
  content: "";
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--border-light);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04);
}

.settings-summary-pie-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

.settings-summary-pie-center strong {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

.settings-summary-pie-center span {
  margin-top: 0.08rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.settings-summary-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.settings-summary-pie-legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
}

.settings-summary-pie-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 1.5px solid rgba(47, 33, 23, 0.18);
  background: var(--pie-color, #8d6b4c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.settings-summary-pie-group {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-summary-pie-values {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ink-secondary);
  letter-spacing: 0.3px;
}

/* --- Compact Pie (click-to-expand) --- */
.summary-pie-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.summary-pie-compact:nth-child(even) {
  border-left: 1px solid var(--border-warm);
}
.summary-pie-compact:nth-child(n+3) {
  border-top: 1px solid var(--border-warm);
}

.summary-pie-compact:hover {
  background: var(--paper-alt, rgba(0,0,0,0.03));
}

.summary-pie-compact:active {
  transform: scale(0.97);
}

.summary-pie-compact-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
}

.summary-pie-big {
  width: min(160px, 36vw);
  height: min(160px, 36vw);
}

.summary-pie-big .settings-summary-pie-center strong {
  font-size: 1.3rem;
}

.summary-pie-big .settings-summary-pie-center span {
  font-size: 0.65rem;
  letter-spacing: 0.8px;
}

/* --- Pie Overlay (expanded view) --- */
.summary-pie-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.2rem;
  max-width: min(88vw, 420px);
}

.summary-pie-overlay-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-align: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-warm);
  width: 100%;
}

.summary-pie-overlay-pie .settings-summary-pie {
  width: 220px;
  height: 220px;
}

.summary-pie-overlay-pie .settings-summary-pie-center strong {
  font-size: 1.8rem;
}

.summary-pie-overlay-pie .settings-summary-pie-center span {
  font-size: 0.78rem;
  letter-spacing: 1px;
}

.summary-pie-overlay-legend {
  width: 100%;
}

.summary-pie-overlay-legend .settings-summary-pie-legend {
  gap: 0.4rem;
}

.summary-pie-overlay-legend .settings-summary-pie-legend li {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--paper-alt);
  gap: 0.5rem;
  transition: border-color 0.18s;
}

.summary-pie-overlay-legend .settings-summary-pie-legend li:hover {
  border-color: var(--border-warm);
}

.summary-pie-overlay-legend .settings-summary-pie-dot {
  width: 0.75rem;
  height: 0.75rem;
}

.summary-pie-overlay-legend .settings-summary-pie-group {
  font-size: 0.84rem;
}

.summary-pie-overlay-legend .settings-summary-pie-values {
  font-size: 0.92rem;
}

.settings-sold-items {
  display: grid;
  gap: 0.18rem;
}

.settings-sold-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  border-top: 1px dashed var(--border-warm);
  padding-top: 0.16rem;
}

.settings-sold-item-name {
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--ink);
}

.settings-sold-item-qty {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.2px;
  color: var(--ink-secondary);
}

.summary-range-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.summary-range-head strong {
  text-align: center;
  text-transform: capitalize;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.summary-range-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
  margin-top: 0.5rem;
}

.summary-range-weekdays span {
  text-align: center;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.summary-range-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
}

.summary-range-day {
  min-height: 34px;
  border-radius: 10px;
  padding: 0.15rem 0.1rem;
  font-size: 0.82rem;
  font-weight: 800;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-range-day.outside {
  opacity: 0.4;
}

.summary-range-day.today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.summary-range-day.in-range {
  background: var(--paper-warm);
  border-color: var(--border-warm);
}

.summary-range-day.range-start,
.summary-range-day.range-end {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.2);
}

.summary-range-draft-label {
  margin: 0.25rem 0 0;
  text-align: center;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--ink);
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.modal-actions-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-actions-single {
  grid-template-columns: 1fr;
}

.pkg-wizard-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
}

.pkg-wizard-actions button {
  width: 100%;
}

.print-area {
  display: none;
}

.print-area.active {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--bg);
  overflow: auto;
  padding: 0.8rem 0.7rem 1.3rem;
}

.print-preview-close {
  position: sticky;
  top: 0.25rem;
  z-index: 1;
  margin: 0 0 0.5rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.28rem 0.82rem;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--paper-warm);
  color: var(--ink);
  font-family: "Nunito", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.ticket {
  width: var(--ticket-width);
  margin: 0 auto;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.2px;
  --print-width-scale: 1;
  --print-scale-title: 1;
  --print-scale-mode: 1;
  --print-scale-room-table: 1;
  --print-scale-turn: 1;
  --print-scale-item: 1;
  --print-scale-note: 1;
  --print-scale-datetime: 1;
  --print-scale-center-name: 1;
  --print-scale-operator: 1;
}

.ticket h1,
.ticket h2,
.ticket p {
  margin: 0;
}

.ticket h1 {
  font-size: calc(24px * var(--print-width-scale) * var(--print-scale-title));
  text-align: center;
  letter-spacing: 0.75px;
}

.ticket h2 {
  margin-top: 4px;
  font-size: 13px;
  text-align: center;
}

.ticket .meta {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ticket .mode {
  font-size: calc(13px * var(--print-width-scale) * var(--print-scale-mode));
  letter-spacing: 0.3px;
}

.ticket .mode.attention {
  font-size: calc(32px * var(--print-width-scale) * var(--print-scale-mode));
  font-weight: 900;
  letter-spacing: 0.8px;
  line-height: 1.05;
  margin-top: 2px;
}

.ticket .meta-room-table {
  font-size: calc(18px * var(--print-width-scale) * var(--print-scale-room-table));
  font-weight: 900;
  letter-spacing: 0.35px;
  margin-top: 3px;
}

.ticket .meta-center-name {
  font-size: calc(16px * var(--print-width-scale) * var(--print-scale-center-name));
  font-weight: 900;
  text-transform: uppercase;
  margin: 2px 0 4px;
}

.ticket .meta-operator {
  font-size: calc(13px * var(--print-width-scale) * var(--print-scale-operator));
  font-weight: 800;
  margin-top: 4px;
}

.ticket .meta-datetime {
  font-size: calc(13px * var(--print-width-scale) * var(--print-scale-datetime));
  font-weight: 800;
  margin-top: 4px;
}

.ticket .ticket-spacer.top-gap {
  height: 2.1rem;
}

.ticket .ticket-spacer.bottom-gap {
  height: 1.1rem;
}

.ticket ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ticket .turn-ticket-block + .turn-ticket-block {
  margin-top: 10px;
  border-top: 1px dashed #000;
  padding-top: 8px;
}

.ticket .turn-ticket-title {
  margin: 0 0 6px;
  font-size: calc(19px * var(--print-width-scale) * var(--print-scale-turn));
  font-weight: 900;
  letter-spacing: 0.32px;
  text-align: center;
}

.ticket li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px;
  font-size: calc(18px * var(--print-width-scale) * var(--print-scale-item));
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 6px;
}

.ticket li.variant-print-line {
  padding-left: 14px;
  font-size: calc(18px * var(--print-width-scale) * var(--print-scale-item) * var(--print-scale-variant, 0.8));
  font-weight: 700;
}

.ticket li.secondary-print-line {
  font-size: calc(18px * var(--print-width-scale) * var(--print-scale-item) * var(--print-scale-variant, 0.8));
  opacity: 0.7;
}

.ticket .qty {
  min-width: 32px;
  text-align: right;
}

.ticket .note {
  grid-column: 1 / -1;
  font-size: calc(13px * var(--print-width-scale) * var(--print-scale-note));
  font-weight: 700;
  font-style: italic;
}

.ticket .preconto-list li {
  grid-template-columns: 34px 1fr auto;
}

.ticket .preconto-list .amount {
  text-align: right;
  white-space: nowrap;
}

.ticket .preconto-list .preconto-desc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ticket .preconto-list .preconto-row-meta {
  font-size: calc(12px * var(--print-width-scale) * var(--print-scale-note));
  font-weight: 700;
  font-style: italic;
  color: #333;
}

.ticket .preconto-list li.preconto-package-header .preconto-desc > span {
  font-weight: 900;
}

.ticket .preconto-list li.preconto-package-header .amount {
  font-weight: 900;
}

.ticket .preconto-list li.preconto-package-item .preconto-desc > span {
  font-weight: 700;
}

.ticket .invoice-courtesy-list li {
  grid-template-columns: 34px 1fr 44px auto;
}

.ticket .invoice-courtesy-list span:nth-child(3) {
  text-align: center;
}

.ticket .invoice-courtesy-list .amount {
  text-align: right;
  white-space: nowrap;
}

.ticket .preconto-total {
  font-size: calc(24px * var(--print-width-scale) * var(--print-scale-room-table));
  font-weight: 900;
}

.ticket .ticket-spacer.preconto-total-gap {
  height: 0.9rem;
}

.ticket .footer {
  text-align: center;
  font-size: 13px;
  margin-top: 5px;
}

.ticket.w58 {
  --print-width-scale: 0.78;
}

.ticket.w58 .ticket-spacer.top-gap {
  height: 1.6rem;
}

.ticket.w58 .ticket-spacer.bottom-gap {
  height: 0.9rem;
}

.ticket.w58 li {
  grid-template-columns: 28px 1fr;
}

.ticket.w58 .preconto-list li {
  grid-template-columns: 28px 1fr auto;
}

.ticket.w58 .invoice-courtesy-list li {
  grid-template-columns: 28px 1fr 34px auto;
}

.ticket.w58 .ticket-spacer.preconto-total-gap {
  height: 0.7rem;
}

@media (max-width: 1150px) {
  .layout.screen-table {
    grid-template-columns: 1fr;
  }

  .tables-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 760px) {
  body.table-mode-active {
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell {
    padding: 0.6rem;
  }

  .app-shell.table-mode {
    height: 100dvh;
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app-shell.table-mode .layout.screen-table {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 55%) minmax(0, 45%);
    overflow: hidden;
  }

  .app-shell.table-mode .order-panel,
  .app-shell.table-mode .menu-panel {
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.table-mode .order-panel {
    display: flex;
    flex-direction: column;
  }

  .app-shell.table-mode .order-workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.table-mode .order-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.08rem;
  }

  .app-shell.table-mode .menu-order-actions {
    flex: 0 0 auto;
    margin: 0 0 0.35rem;
  }

  .app-shell.table-mode .menu-panel {
    display: flex;
    flex-direction: column;
  }

  .app-shell.table-mode .menu-browser {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .app-shell.table-mode .section-tabs,
  .app-shell.table-mode .menu-items-pane {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* topbar-actions: gestita nel media query mobile topbar (761px) */

  .app-shell.table-mode .panel-head-order {
    position: relative;
    justify-content: flex-start;
    min-height: 2.05rem;
  }

  .app-shell.table-mode .panel-head-order-left {
    max-width: calc(100% - 1.2rem);
  }

  .app-shell.table-mode .panel-head-order-left h2 {
    font-size: 1.05rem;
    letter-spacing: 0.35px;
  }

  #backToTablesBtn svg {
    width: 2.28rem;
    height: 2.28rem;
  }

  .app-shell.table-mode .panel-head-order #orderStats {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    pointer-events: none;
  }
  .app-shell.table-mode .panel-head-order #orderStats .order-stats-coperti {
    pointer-events: auto;
    cursor: pointer;
  }
  .app-shell.table-mode .panel-head-order #orderStats .order-stats-coperti:hover {
    opacity: 0.7;
  }
  .app-shell.table-mode .panel-head-order #orderStats .order-stats-customer-name {
    pointer-events: none;
  }

  .table-meta-grid {
    grid-template-columns: 1fr;
  }

  .order-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .turn-section-btn {
    min-height: 32px;
    font-size: 0.9rem;
    padding: 0.1rem 0.6rem;
  }

  .line-controls {
    grid-template-columns: 1fr;
  }

  .dish-grid {
    grid-template-columns: 1fr;
  }

  .menu-browser {
    grid-template-columns: minmax(90px, min(var(--menu-groups-width, 178px), 48vw)) minmax(0, 1fr);
  }

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

  .tables-tools {
    grid-template-columns: 1fr;
  }

  .settings-tables-tools {
    grid-template-columns: 1fr;
  }

  .settings-fiscal-grid {
    grid-template-columns: 1fr;
  }

  .customers-split {
    flex-direction: column;
  }
  .customers-list-panel {
    flex: 0 0 auto;
  }
  .customers-list-panel .settings-tables-list {
    max-height: min(35vh, 280px);
  }

  .settings-fiscal-row-grid.vat,
  .settings-fiscal-row-grid.department,
  .settings-fiscal-row-grid.payment {
    grid-template-columns: 1fr;
  }

  .settings-fiscal-coverage-row {
    grid-template-columns: 1fr;
  }

  .settings-rooms-tools {
    grid-template-columns: 1fr;
  }

  .settings-room-picker {
    grid-template-columns: 1fr;
  }

  .settings-room-picker-actions {
    grid-template-columns: 1fr;
  }

  .settings-table-row {
    gap: 0.3rem;
  }

  .settings-summary-pie-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .summary-dashboard-kpi {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-payment-row {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
  }

  .summary-charts-row {
    grid-template-columns: 1fr;
  }

  .summary-pies-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .summary-dashboard-sidebar {
    position: static;
  }

  .summary-kpi-card {
    padding: 0.5rem 0.3rem;
  }

  .fiscal-emit-mode-tabs {
    grid-template-columns: 1fr;
  }

  .fiscal-emit-payment-grid {
    grid-template-columns: 1fr;
  }

  .printer-pickers {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .printer-style-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    grid-template-columns: 1fr;
  }

  .menu-standalone {
    padding: 0.35rem;
    gap: 0.35rem;
  }

  .menu-standalone-frame {
    border-radius: 8px;
  }
}

/* ============================
   BANCO SCREEN
   ============================ */

.banco-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* mobile: occupa tutto */
  z-index: 1200;
  background: var(--bg, #f4efe6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Desktop: lascia spazio alla sidebar sinistra */
@media (min-width: 762px) {
  .banco-screen {
    left: 82px;
  }
}

.banco-screen.hidden {
  display: none;
}

.banco-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Colonna sinistra: sezioni + prodotti */
.banco-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.banco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
  height: 64px;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line, #ddc9ac);
  background: var(--paper-warm);
  flex-shrink: 0;
  box-sizing: border-box;
}

.banco-back-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.15s ease;
}
.banco-back-btn:hover { background: var(--paper-alt); transform: translateX(-1px); }

.banco-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.banco-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.banco-settings-wrap {
  position: relative;
}
.banco-settings-btn {
  border: none;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}
.banco-settings-btn svg {
  width: 28px;
  height: 28px;
}
.banco-settings-btn:hover { color: var(--accent, #5B9E9E); background: var(--paper-alt); }
.banco-listino-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.banco-listino-badge:hover { color: var(--accent, #5B9E9E); }
.banco-listino-badge svg { flex-shrink: 0; width: 28px; height: 28px; }
.banco-settings-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(30, 15, 5, 0.1), 0 12px 32px rgba(30, 15, 5, 0.08);
  z-index: 100;
  overflow: hidden;
}
.banco-settings-popover.hidden { display: none; }
.banco-popover-item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.banco-popover-item:hover { background: var(--paper-alt); color: var(--ink); }
.banco-popover-item-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.banco-popover-item-icon svg { flex-shrink: 0; }
.banco-popover-danger { color: var(--accent, #5B9E9E); }
.banco-popover-danger:hover { background: var(--paper-alt); }
.banco-popover-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  border-top: 1px solid var(--border-light);
}
.banco-popover-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.2rem 0;
}
.banco-popover-compact-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-secondary);
}
.banco-popover-number {
  width: 60px;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
}

/* Tab sezioni */
.banco-section-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  max-height: var(--banco-group-max-h, 30vh);
  overflow-y: auto;
}

.banco-section-tab {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  font-size: var(--layout-groups-font-size, 0.82rem);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  box-sizing: border-box;
}
.banco-section-tab:hover { background: var(--paper-alt); transform: translateY(-1px); box-shadow: 0 2px 6px var(--shadow-color); }
.banco-section-tab:active { transform: translateY(0); }
.banco-section-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.2);
}

.banco-section-tab.has-custom-color {
  border-color: var(--section-custom-border);
  color: var(--section-custom-text);
  background: var(--section-custom-bg);
}

.banco-section-tab.has-custom-color:hover {
  background: var(--section-custom-bg);
}

.banco-section-tab.has-custom-color.active {
  border-color: var(--section-custom-active-border);
  color: var(--section-custom-active-text);
  background: var(--section-custom-active-bg);
}

/* Griglia prodotti */
.banco-dish-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-dish-grid-min, 150px), 1fr));
  grid-auto-rows: min-content;
  gap: 0.5rem;
  align-content: start;
}

.banco-dish-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  min-height: 0;
  overflow: visible;
  word-break: break-word;
  position: relative;
  font-size: var(--layout-menu-items-font-size, 0.82rem);
}
.banco-dish-btn:hover {
  background: var(--paper-warm);
  box-shadow: 0 2px 8px var(--shadow-color);
  transform: translateY(-1px);
}
.banco-dish-btn:active {
  background: #ffeedd;
  transform: scale(0.97);
  transition-duration: 0.06s;
}

/* Card with photo */
.banco-dish-with-photo {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 100px;
}
.banco-dish-photo {
  width: 100%;
  flex: 1 1 60px;
  min-height: 30px;
  object-fit: cover;
  border-radius: 7px 7px 0 0;
  display: block;
}
.banco-dish-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.25rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  flex-shrink: 0;
  color: var(--ink, #1f1a16);
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
}
.banco-dish-caption em {
  font-style: normal;
  font-weight: 900;
  color: var(--accent);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.banco-dish-price {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 900;
}

/* Colonna destra: ordine */
.banco-right {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--paper);
}

.banco-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line, #ddc9ac);
  flex-shrink: 0;
  box-sizing: border-box;
}

.banco-order-title {
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.banco-customer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banco-customer-btn:active { opacity: 0.7; }
.banco-customer-btn[data-has-customer="true"] {
  color: var(--accent, #e4a853);
  border-color: var(--accent, #e4a853);
}

.banco-order-clock {
  font-size: 1.15rem;
  color: var(--ink-muted);
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.08em;
  font-weight: 400;
  white-space: nowrap;
}

.banco-clear-btn {
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
.banco-clear-btn:hover { color: var(--accent); border-color: var(--accent); }

.banco-order-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.banco-empty {
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 0;
  margin: 0;
}

.banco-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: var(--paper-alt);
  border: 1px solid var(--border-light);
  touch-action: pan-y;
  transition: transform 0.08s ease-out, background 0.15s ease;
}
.banco-line.swiping {
  transition: none;
}

.banco-line-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  flex: 1;
}

.banco-line-name {
  font-size: var(--layout-order-items-font-size, 0.88rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.banco-line-price {
  font-size: calc(var(--layout-order-items-font-size, 17px) * 0.82);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.banco-line-vat {
  font-size: 0.68em;
  font-weight: 600;
  color: var(--ink-muted);
  margin-left: 0.15em;
}
@media print { .banco-line-vat { display: none; } }

.banco-line-qty {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.banco-line-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.12rem 0 0.12rem 1.05rem;
  padding: 0.24rem 0.45rem;
  border-left: 2px solid var(--line-strong, #b79b7a);
  border-radius: 0 8px 8px 0;
  background: transparent;
  font-size: calc(var(--layout-order-items-font-size, 17px) * 0.82);
  color: var(--ink-secondary);
}
.banco-line-variant-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banco-line-variant .variant-prefix {
  color: #4a8c3f;
}
.banco-line-variant.variant-minus .variant-prefix {
  color: #c82626;
}
.banco-line-variant.variant-minus .banco-line-variant-name {
  color: #8a5a5a;
}
.banco-line-variant-qty {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--ink-secondary);
}
.banco-line-variant.variant-orphan {
  border-left-style: dashed;
  opacity: 0.92;
}

.banco-qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--paper);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.18s ease, transform 0.12s ease;
}
.banco-qty-btn:hover { background: #f0e8e0; transform: scale(1.08); }
.banco-qty-btn:active { transform: scale(0.95); }

/* Calcolatrice banco */
.banco-calc-panel {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--paper-alt);
  padding: 0.6rem;
  animation: bancoCalcSlideUp 0.2s ease-out;
}
.banco-calc-panel.hidden { display: none; }
@keyframes bancoCalcSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.banco-calc-display {
  text-align: right;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 2.2rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.banco-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.banco-calc-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
  touch-action: manipulation;
}
.banco-calc-key:active { background: #e8e0d6; transform: scale(0.96); }
.banco-calc-key-del { color: var(--accent); }
html.dark-mode .banco-calc-key:active { background: #3a3530; }
html.dark-mode .banco-calc-display { background: var(--paper); }

.banco-calc-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
  position: relative;
}
.banco-calc-action-btn {
  flex: 1;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
  touch-action: manipulation;
}
.banco-calc-action-btn:active { background: #e8e0d6; }
.banco-calc-rep { background: #f0ebe4; color: var(--accent); border-color: var(--accent); font-weight: 800; }
html.dark-mode .banco-calc-rep { background: #2e2818; }

.banco-calc-rep-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--paper);
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--shadow-color);
  z-index: 110;
  overflow: hidden;
}
.banco-calc-rep-popover.hidden { display: none; }
.banco-calc-rep-option {
  display: block;
  width: 100%;
  padding: 1rem 0.9rem;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
}
.banco-calc-rep-option:last-child { border-bottom: none; }
.banco-calc-rep-option:hover { background: var(--paper-alt); }
.banco-calc-rep-config-title {
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-light);
}
.banco-calc-rep-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
}
.banco-calc-rep-toggle:hover { background: var(--paper-alt); }
.banco-calc-rep-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.banco-calc-payments {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.banco-calc-pay-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem 0.3rem;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  white-space: nowrap;
}
.banco-calc-pay-btn svg { flex-shrink: 0; }
.banco-calc-pay-btn:hover { box-shadow: 0 2px 6px var(--shadow-color); }
.banco-calc-pay-btn:active { background: #e8e0d6; transform: scale(0.97); }
html.dark-mode .banco-calc-pay-btn:active { background: #3a3530; }
html.dark-mode .banco-calc-action-btn:active { background: #3a3530; }

.banco-calc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.banco-calc-toggle svg { width: 28px; height: 28px; }
.banco-calc-toggle:hover { background: var(--paper-alt); color: var(--accent); }
.banco-calc-toggle.active { background: var(--paper-alt); color: var(--accent); border-color: var(--accent); }

.banco-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--line);
  gap: 0.75rem;
  flex-shrink: 0;
}

.banco-total {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--ink);
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.banco-print-btn {
  flex: 1;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 800;
}

/* Su mobile il banco occupa tutto */
@media (max-width: 600px) {
  .banco-layout {
    flex-direction: column;
  }
  .banco-header,
  .banco-order-header {
    height: auto;
    min-height: 52px;
    padding: 0.6rem 0.75rem;
  }
  .banco-header {
    flex-wrap: wrap;
  }
  .banco-right {
    display: flex;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    min-height: 42dvh;
  }
  .banco-left {
    width: 100%;
    min-height: 58dvh;
  }
}

/* ── Asporto Screen ──────────────────────── */

.asporto-screen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1200;
  background: var(--bg, #f4efe6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 762px) {
  .asporto-screen { left: 82px; }
}
.asporto-screen.hidden { display: none; }

/* Top bar: titolo + slot orizzontali + chiudi */
.asporto-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 52px;
  min-height: 52px;
  background: var(--paper, #fff);
  flex-shrink: 0;
  box-sizing: border-box;
}
.asporto-settings-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink-secondary);
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}
.asporto-settings-btn svg { width: 28px; height: 28px; }
.asporto-settings-btn:hover { color: var(--accent); background: var(--paper-alt); }
.asporto-settings-btn:active { background: rgba(255,255,255,.1); }
.asporto-settings-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.asporto-settings-modal {
  background: var(--paper, #fff);
  color: var(--ink, #1f1a16);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 16px 48px rgba(0,0,0,.18);
  width: 90%; max-width: 380px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.asporto-settings-modal-wide {
  max-width: 520px;
}
.asporto-settings-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
  flex-shrink: 0;
}
.asporto-settings-modal-close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--ink-muted, #888); line-height: 1; padding: 0 2px;
}
.asporto-settings-modal-body {
  padding: 16px 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.asporto-settings-modal-body .perm-toggle-row { margin: 0; }
.asporto-settings-card {
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px;
  background: var(--paper-alt, rgba(255, 250, 244, 0.96));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asporto-settings-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.asporto-settings-card-copy strong {
  font-size: 0.96rem;
  color: var(--ink, #1f1a16);
}
.asporto-settings-card-copy p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-secondary, #777);
}
.asporto-settings-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.asporto-settings-media-card {
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 12px;
  padding: 11px;
  background: var(--paper, rgba(255,255,255,.72));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asporto-settings-media-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.asporto-settings-media-label {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink, #1f1a16);
}
.asporto-settings-media-hint {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-secondary, #777);
}
.asporto-settings-media-preview {
  border-radius: 12px;
  min-height: 132px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(59, 35, 27, 0.94), rgba(151, 61, 36, 0.9)),
    radial-gradient(circle at 20% 18%, rgba(255, 200, 152, 0.45), transparent 52%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.asporto-settings-media-preview::after {
  content: "";
  position: absolute;
  inset: auto -12% -34% auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 212, 180, 0.32), transparent 68%);
}
.asporto-settings-media-preview.is-empty {
  color: rgba(255,255,255,.82);
  text-align: center;
  padding: 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
}
.asporto-settings-media-preview img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  display: block;
  object-fit: cover;
}
.asporto-settings-media-actions {
  display: flex;
  gap: 8px;
}
.asporto-settings-upload-btn,
.asporto-settings-clear-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  cursor: pointer;
}
.asporto-settings-upload-btn {
  background: linear-gradient(135deg, #5a2818, #9b3f1f);
  color: #fff;
  border-color: transparent;
}
.asporto-settings-clear-btn {
  background: transparent;
  color: var(--ink, #1f1a16);
}
.asporto-settings-clear-btn:disabled,
.asporto-settings-upload-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.asporto-settings-modal-body .asporto-settings-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--accent, #b79b7a);
  text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0;
  font-weight: 600;
}
.asporto-settings-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.asporto-settings-link-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--input-bg, rgba(255,255,255,.8));
  color: var(--ink, #1f1a16);
  cursor: text;
}
.asporto-settings-copy-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  border: none;
  background: linear-gradient(135deg, #5a2818, #9b3f1f);
  color: #fff;
  cursor: pointer;
}
.asporto-settings-copy-btn:active {
  transform: scale(0.96);
}
.asporto-settings-details {
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 14px;
}
.asporto-settings-summary {
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink, #1f1a16);
}
.asporto-settings-summary::-webkit-details-marker { display: none; }
.asporto-settings-summary::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.asporto-settings-details[open] > .asporto-settings-summary::before {
  transform: rotate(45deg);
}
.asporto-settings-details > .asporto-settings-card {
  padding: 0 14px 14px;
}
.asporto-settings-details .asporto-settings-media-grid {
  grid-template-columns: 1fr;
}
@media (max-width: 560px) {
  .asporto-settings-media-grid {
    grid-template-columns: 1fr;
  }
}
.asporto-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.12em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Slot bar — seconda riga sotto topbar */
.asporto-slot-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line, #e0d5c3);
  background: var(--paper, #fff);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.asporto-slot-strip {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  scrollbar-width: none;
}
.asporto-slot-strip::-webkit-scrollbar { display: none; }
.asporto-slot-chip {
  flex-shrink: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--border, #e0d8cf);
  border-radius: 22px;
  background: var(--paper, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease, background 0.18s ease;
  white-space: nowrap;
}
.asporto-slot-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px var(--shadow-color); }
.asporto-slot-chip:active { opacity: 0.85; transform: translateY(0); }
.asporto-slot-chip.active {
  border-color: var(--accent, #e4a853);
  box-shadow: 0 0 0 2px var(--accent, #e4a853);
  background: var(--accent, #e4a853);
  color: #fff;
}
.asporto-slot-chip.active .asporto-chip-count { color: rgba(255,255,255,0.8); }
.asporto-slot-chip.slot-full { border-color: var(--danger, #dc2626); }
.asporto-chip-time {
  font-weight: 800;
  font-size: 0.95rem;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.04em;
}
.asporto-chip-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Grid ordini stile KDS */
.asporto-orders-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
}
.asporto-order-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
@media (hover: hover) {
  .asporto-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
  }
}
.asporto-order-card:active { opacity: 0.85; transform: translateY(0); }
.asporto-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.asporto-order-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.2;
}
.asporto-order-slot-badge {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--accent, #e4a853);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.04em;
}
.asporto-order-address {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.3;
}
.asporto-km-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--accent, #e4a853);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}
.asporto-order-items {
  font-size: 0.82rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}
.asporto-order-items .item-line {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border, #e0d5c3);
}
.asporto-order-items .item-line:last-child { border-bottom: none; }
.asporto-order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e0d5c3);
}
.asporto-order-total {
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent, #e4a853);
  font-variant-numeric: tabular-nums;
}
.asporto-order-actions {
  display: flex;
  gap: 6px;
}

/* Banco icon button on asporto cards */
.asporto-banco-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--paper-alt, #f5f0ea);
  color: var(--ink-secondary, #6b5e50);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.asporto-banco-icon-btn:hover {
  color: var(--accent);
  transform: scale(1.06);
}
.asporto-banco-icon-btn:active {
  background: var(--accent, #e4a853);
  color: #fff;
  transform: scale(0.95);
}
.asporto-banco-icon-btn--big {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* Asporto order overlay (expanded card) */
.asporto-order-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.asporto-order-overlay.visible { opacity: 1; }
.asporto-order-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.asporto-order-expanded {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: 16px;
  padding: 24px 28px;
  min-width: 340px;
  max-width: 480px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.2);
}
.asporto-expanded-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.asporto-expanded-name {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.2;
}
.asporto-expanded-address {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-top: 4px;
}
.asporto-expanded-notes {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 4px;
  white-space: pre-line;
}
.asporto-expanded-items {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  line-height: 1.6;
}
.asporto-expanded-items .item-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border, #e0d5c3);
}
.asporto-expanded-items .item-line:last-child { border-bottom: none; }
.asporto-expanded-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e0d5c3);
}
.asporto-expanded-total {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--accent, #e4a853);
  font-variant-numeric: tabular-nums;
}

/* Takeaway time slot buttons */
.takeaway-time-slots {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.takeaway-time-slot-btn { flex-shrink: 0; }
.takeaway-time-slot-btn {
  padding: 6px 12px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  border-radius: 6px;
  background: var(--paper-alt, #2a2520);
  color: var(--ink, #e8e0d6);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.takeaway-time-slot-btn:active { opacity: 0.7; }
.takeaway-time-slot-btn.selected {
  background: var(--accent, #e4a853);
  color: #fff;
  border-color: var(--accent, #e4a853);
}
.takeaway-time-slot-btn.slot-full {
  opacity: 0.4;
  text-decoration: line-through;
}
.takeaway-time-slot-btn .slot-count {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 3px;
}

/* Badge asporto nella topbar */
.topbar-asporto-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.topbar-asporto-badge[hidden] {
  display: none !important;
}

/* Asporto slot picker overlay */
.asporto-slot-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.asporto-slot-picker-panel {
  background: var(--paper, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  width: 320px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.asporto-slot-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-weight: 800;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border, #e0d5c3);
}
.asporto-slot-picker-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0 4px;
  line-height: 1;
}
.asporto-slot-picker-list {
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.asporto-slot-picker-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #e0d5c3);
  border-radius: 8px;
  background: var(--paper, #fff);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.asporto-slot-picker-btn:hover:not(:disabled) {
  background: var(--surface-hover, #f5efe6);
  border-color: var(--accent, #b79b7a);
}
.asporto-slot-picker-btn:disabled,
.asporto-slot-picker-full {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .asporto-topbar { height: auto; min-height: 44px; padding: 6px 12px; gap: 6px; }
  .asporto-slot-bar { padding: 6px 12px; }
  .asporto-slot-chip { padding: 8px 14px; }
  .asporto-orders-grid { grid-template-columns: 1fr; padding: 8px; }
}

/* Centri di Produzione */
/* Production Centers: nessun override, usa layout standard settings-view */

/* APK settings */
#settingsApkView .settings-apk-shell {
  display: grid;
  gap: 0.6rem;
}

/* Marketing settings */
#settingsMarketingView {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

#settingsMarketingView .settings-marketing-shell {
  min-height: 0;
  display: grid;
  gap: 0.6rem;
  border: none;
  background: transparent;
  padding: 0;
}

.settings-marketing-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
}

.settings-marketing-coupon-result {
  margin-top: 0.5rem;
  border: 1px solid var(--border-warm);
  border-radius: 0.5rem;
  background: var(--card-bg);
  padding: 0.75rem;
}
.settings-marketing-coupon-result .primary-btn {
  margin-top: 0.5rem;
  width: 100%;
}

.settings-marketing-grid {
  margin-top: 0.22rem;
}

.settings-marketing-span-2 {
  grid-column: 1 / -1;
}

.settings-marketing-toolbar {
  margin-top: 0.28rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.settings-marketing-list {
  margin-top: 0.42rem;
}

@media (min-width: 1080px) {
  #settingsMarketingView .settings-marketing-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settingsMarketingView .settings-marketing-overview,
  #settingsMarketingView .settings-marketing-main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .settings-marketing-url-row {
    grid-template-columns: 1fr;
  }

  .settings-marketing-toolbar {
    justify-content: stretch;
  }

  .settings-marketing-toolbar .ghost-btn,
  .settings-marketing-toolbar .primary-btn {
    width: 100%;
  }
}

/* ── Marketing Coupons Chart ──────────────────────────── */
.marketing-coupons-chart-block {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.marketing-chart-title {
  margin: 0 0 0.5rem;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--ink);
}
.marketing-chart-period-row {
  margin-bottom: 0.5rem;
}
.marketing-chart-period-select {
  width: auto;
  min-width: 120px;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}
.marketing-coupons-chart {
  width: 100%;
  min-height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}
.marketing-coupons-chart svg {
  display: block;
}
.marketing-chart-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink-secondary);
}
.marketing-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.marketing-chart-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.marketing-chart-dot-created { background: var(--accent); }
.marketing-chart-dot-redeemed { background: var(--ok); }

.settings-apk-summary {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  padding: 0.55rem 0.62rem;
  display: grid;
  gap: 0.22rem;
}

.settings-apk-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.settings-apk-env {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink);
}

.settings-apk-env span {
  margin-left: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.settings-apk-cards {
  display: grid;
  gap: 0.55rem;
}

.settings-apk-card {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper-alt);
  padding: 0.55rem 0.62rem;
  display: grid;
  gap: 0.28rem;
}

.settings-apk-card h5 {
  margin: 0;
  font-size: 0.95rem;
}

.settings-apk-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-secondary);
}

.settings-apk-actions {
  margin-top: 0.2rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.settings-apk-links {
  margin-top: 0.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.settings-apk-links a {
  display: block;
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 0.34rem 0.42rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.77rem;
  font-weight: 700;
}

.settings-apk-links button {
  display: block;
  width: 100%;
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 0.34rem 0.42rem;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-size: 0.77rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-apk-links a:hover,
.settings-apk-links button:hover {
  border-color: color-mix(in srgb, var(--border-warm) 72%, var(--accent, #b57a2a));
}

@media (max-width: 640px) {
  .settings-apk-links {
    grid-template-columns: 1fr;
  }
}

#settingsProductionCentersView .pc-main-shell {
  min-height: 0;
  display: grid;
  gap: 0.4rem;
  border: none;
  background: transparent;
  padding: 0;
}

#settingsProductionCentersView .pc-main-shell > .settings-tables-block {
  padding: 0.1rem 0.48rem;
}

#settingsProductionCentersView .pc-config-wrap {
  min-height: 0;
  display: grid;
  gap: 0.3rem;
}

#settingsProductionCentersView .pc-config-wrap > .settings-tables-block {
  padding: 0.1rem 0.48rem;
  gap: 0.1rem;
}

#settingsProductionCentersView .pc-add-row {
  margin-bottom: 0;
  margin-top: 0;
}

.pc-main-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.pc-explainer {
  display: grid;
  gap: 0.22rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper-alt);
}

.pc-explainer p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.pc-centers-list {
  display: grid;
  gap: 0.52rem;
  max-height: min(46vh, 430px);
  overflow: auto;
  padding-right: 0.16rem;
  scrollbar-gutter: stable;
}

.pc-center-card {
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  padding: 0.48rem;
  background: var(--paper-alt);
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.pc-center-head {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.pc-center-head input[type="text"] {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.pc-center-head .pc-delete-btn {
  min-height: 32px;
  min-width: 74px;
  padding: 0.2rem 0.44rem;
  border-radius: 9px;
  border: 1px solid #d8a6a6;
  color: #b23c3c;
  background: #fff3f3;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.pc-center-head .pc-delete-btn:hover {
  border-color: #cc7d7d;
  background: #ffe8e8;
}

.pc-field {
  display: grid;
  gap: 0.24rem;
}

.pc-field span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22px;
  color: var(--ink-secondary);
}

.pc-center-printer {
  width: 100%;
}

.pc-toggle-row {
  margin: 0 !important;
}

.pc-section-dropdown {
  border: 1px solid var(--border-warm);
  border-radius: 9px;
  background: var(--paper);
  padding: 0.15rem 0.3rem 0.22rem;
  display: grid;
  gap: 0.26rem;
}

.pc-section-dropdown > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  cursor: pointer;
  list-style: none;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  user-select: none;
}

.pc-section-dropdown > summary::-webkit-details-marker {
  display: none;
}

.pc-section-dropdown > summary::after {
  content: "▾";
  margin-left: 0.2rem;
  font-size: 0.78rem;
  transition: transform 0.16s ease;
}

.pc-section-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.pc-section-dropdown-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-section-dropdown-count {
  justify-self: end;
  font-size: 0.66rem;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  text-transform: none;
  color: var(--ink-secondary);
}

.pc-section-grid {
  display: grid;
  gap: 0.14rem;
}

.pc-section-grid-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px 62px 70px;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.06rem;
}

.pc-section-grid-head-name,
.pc-section-grid-head-none,
.pc-section-grid-head-col {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12px;
  color: var(--ink-secondary);
}

.pc-section-grid-head-none,
.pc-section-grid-head-col {
  text-align: center;
}

.pc-section-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px 62px 70px;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--border-warm);
  border-radius: 7px;
  background: var(--paper-alt);
  padding: 0.08rem 0.08rem;
}

.pc-section-name {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.16;
}

.pc-section-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pc-section-cell input[type="radio"] {
  margin: 0;
  accent-color: #4a6cf7;
}

.pc-section-empty {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.pc-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.pc-add-row button {
  min-height: 40px;
}

.pc-save-block button {
  width: 100%;
  min-height: 42px;
}

@media (max-width: 640px) {
  .pc-section-grid-head,
  .pc-section-row {
    grid-template-columns: minmax(0, 1fr) 18px 54px 62px;
    gap: 0.14rem;
  }

  .pc-section-grid-head-name,
  .pc-section-grid-head-none,
  .pc-section-grid-head-col {
    font-size: 0.58rem;
  }

  .pc-add-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    margin: 0;
    size: auto;
  }

  html,
  body {
    margin: 0;
    background: #fff;
  }

  .no-print {
    display: none !important;
  }

  .print-area {
    display: block;
    padding: 3mm 0;
  }

  .banco-screen {
    display: none !important;
  }

  .profile-screen {
    display: none !important;
  }
}

/* ============================================================
   SCHERMATA PROFILO UTENTE (stile Tilby)
   ============================================================ */

.profile-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.profile-screen.hidden {
  display: none;
}

.profile-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.profile-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.15s;
}

.profile-back-btn:hover {
  background: var(--bg);
}

.profile-topbar-title {
  font-family: "Nunito", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.profile-body {
  flex: 1;
  padding: 2rem 1.25rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.profile-avatar-large {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent, #7b8fcf);
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.profile-hero-name {
  font-family: "Nunito", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.25rem 0 0;
}

.profile-hero-sub {
  font-size: 0.88rem;
  color: var(--ink-secondary);
  margin: 0;
  text-align: center;
}

.profile-cols {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 762px) {
  .profile-cols {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .profile-col {
    flex: 1;
    min-width: 0;
  }
  .profile-card-wide {
    flex-basis: 100%;
    order: 99;
  }
  .profile-screen {
    left: 82px;
  }
}

.profile-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-card {
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.profile-card-title {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  padding: 1.1rem 1.25rem 0.6rem;
}

.profile-card-sub {
  font-size: 0.83rem;
  color: var(--ink-secondary);
  margin: 0 0 0.25rem;
  padding: 0 1.25rem 0.75rem;
  line-height: 1.5;
}

.profile-rows {
  border-top: 1px solid var(--border-light);
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.12s;
  min-height: 48px;
  box-sizing: border-box;
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row:hover:not(.no-tap) {
  background: var(--paper-alt);
}

.profile-row.no-tap {
  cursor: default;
}

.profile-row-label {
  font-size: 0.88rem;
  color: var(--ink-secondary);
  font-weight: 600;
  min-width: 110px;
  flex-shrink: 0;
}

.profile-row-value {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 600;
}

.profile-row-arrow {
  color: var(--ink-muted);
  flex-shrink: 0;
}

.profile-row-panel {
  padding: 1rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--paper-alt);
}

.profile-row-panel.hidden {
  display: none;
}

.profile-row-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  font-weight: 600;
}

.profile-row-panel label input {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.profile-row-panel label input:focus,
.profile-row-panel label select:focus {
  border-color: var(--accent, #7b8fcf);
}

.profile-row-panel label select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.profile-row-danger .profile-row-label {
  color: var(--danger);
}

.profile-row-danger .profile-row-arrow {
  color: var(--danger);
}

.profile-row-danger:hover {
  background: var(--danger-bg, #fff5f4) !important;
}

.profile-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  outline: none;
}
.profile-search-input:focus {
  border-color: var(--accent, #7b8fcf);
}

.profile-admin-form {
  padding: 0.75rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  font-weight: 600;
}

.profile-admin-form label input,
.profile-admin-form label select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  font-size: 0.88rem;
  background: var(--paper);
  color: var(--ink);
}

.profile-admin-form-row {
  display: flex;
  gap: 0.6rem;
}
.profile-admin-form-row label {
  flex: 1;
  min-width: 0;
}

.admin-user-env-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.admin-user-env-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg);
  border: 1px solid var(--input-border);
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary);
}
.admin-user-detach-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.1rem;
  border-radius: 50%;
  transition: color 0.12s, background 0.12s;
}
.admin-user-detach-btn:hover {
  color: var(--danger);
  background: var(--danger-bg);
}
.admin-user-detach-btn.armed {
  color: var(--ink-inverse);
  background: var(--danger);
}

.admin-user-tools {
  margin-top: 0.4rem;
}
.admin-user-delete-btn {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--danger);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.admin-user-delete-btn:hover {
  background: var(--danger-bg);
}
.admin-user-delete-btn.armed {
  background: var(--danger);
  color: var(--ink-inverse);
  border-color: var(--danger);
}

/* Admin user card expand button */
.admin-user-expand-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.35rem 0;
  cursor: pointer;
  font-family: "Oswald", Arial, sans-serif;
  text-align: left;
}
.admin-user-expand-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.admin-user-expand-env {
  font-size: 0.82rem;
  color: var(--ink-muted);
  flex: 1;
}
.admin-user-expand-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
  color: var(--ink-muted);
}
.admin-user-expand-btn.open .admin-user-expand-chevron {
  transform: rotate(90deg);
}
.admin-user-details.hidden { display: none; }
.admin-user-details {
  padding-top: 0.35rem;
}

/* Admin user entry layout */
.admin-user-entry-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-user-entry-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.admin-user-role-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok, #2e7d32);
  background: var(--ok-bg, #e8f5e9);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

/* Permissions expand button */
.admin-user-perms-section {
  margin-top: 0.6rem;
  border-top: 1px solid var(--line, #ddc9ac);
  padding-top: 0.5rem;
}
.admin-user-perms-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.2rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.admin-user-perms-toggle-btn:hover { color: var(--accent, #5B9E9E); }
.admin-user-perms-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.admin-user-perms-toggle-btn.open .admin-user-perms-chevron {
  transform: rotate(90deg);
}
.admin-user-perms-panel {
  margin-top: 0.5rem;
}
.admin-user-perms-panel.hidden { display: none; }

/* Permission toggles grid */
.perm-toggles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}
@media (max-width: 540px) {
  .perm-toggles-grid { grid-template-columns: 1fr; }
}
.perm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  cursor: pointer;
  user-select: none;
}
.perm-toggle-label {
  font-size: 0.82rem;
  color: var(--ink, #1f1a16);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.perm-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.perm-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.perm-toggle-slider {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 20px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.perm-toggle-slider::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.perm-toggle-input:checked + .perm-toggle-slider {
  background: var(--ok, #2e7d32);
}
.perm-toggle-input:checked + .perm-toggle-slider::after {
  transform: translateX(16px);
}
.perm-toggle-input:focus-visible + .perm-toggle-slider {
  outline: 2px solid var(--accent, #5B9E9E);
  outline-offset: 2px;
}
.perm-saved-flash {
  animation: permSavedPulse 0.6s ease;
}
@keyframes permSavedPulse {
  0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(40,167,69,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* ===== Analytics Screen (Riepilogo + Documenti) ===== */
.analytics-screen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}
.analytics-screen.hidden { display: none; }

.analytics-sidebar {
  width: 72px;
  background: var(--paper);
  border-right: 1px solid var(--line, #ddc9ac);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0;
  gap: 0.5rem;
  flex-shrink: 0;
}
.analytics-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.analytics-close-btn:hover { background: #f4ede0; color: var(--accent, #5B9E9E); }

.analytics-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 0 0.5rem;
}
.analytics-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.6rem 0.25rem;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.analytics-nav-btn[hidden] { display: none !important; }
.analytics-nav-btn:hover { background: #f4ede0; color: var(--ink, #1f1a16); }
.analytics-nav-btn.active {
  background: var(--danger-bg);
  color: var(--accent, #5B9E9E);
}

.analytics-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.analytics-tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.analytics-tab-panel.hidden { display: none; }

.analytics-panel-head {
  padding: 1.2rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--line, #ddc9ac);
  background: var(--paper);
  flex-shrink: 0;
}
.analytics-panel-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink, #1f1a16);
  margin: 0 0 0.75rem 0;
}
.analytics-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* Desktop: wider sidebar */
@media (min-width: 762px) {
  .analytics-sidebar {
    width: 160px;
    align-items: flex-start;
    padding: 1rem 0.75rem;
  }
  .analytics-close-btn {
    margin-left: 0.25rem;
    margin-bottom: 1rem;
  }
  .analytics-nav-btn {
    flex-direction: row;
    gap: 0.6rem;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    text-align: left;
  }
  .analytics-panel-head { padding: 1.5rem 2rem 1rem; }
  .analytics-list { padding: 1rem 2rem; }
  /* Account for topbar sidebar on desktop */
  .analytics-screen { left: 82px; }
}

/* ── Print Agent ──────────────────────────────────────────────────────────── */
.pa-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  color: var(--ink-soft, #5a4a3a);
}
.pa-badge {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pa-badge-off { background: var(--border); color: var(--ink-secondary); }
.pa-badge-on { background: var(--ok-bg, #d4f0d4); color: var(--ok-text, #1a5a1a); }
.pa-badge-connecting { background: #fff3cd; color: #7a5a00; }
#printAgentActivateBtn.active {
  background: var(--accent, #b56a30);
  color: var(--ink-inverse);
  border-color: var(--accent, #b56a30);
}
.pa-log-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line, #ddc9ac);
  border-radius: 6px;
  background: var(--paper, #fffdf8);
}
.pa-log-empty {
  padding: 0.7rem 0.9rem;
  color: var(--ink-soft, #9a8a7a);
  font-size: 0.85rem;
}
.pa-log-item {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--line, #ddc9ac);
  line-height: 1.35;
}
.pa-log-item:last-child { border-bottom: none; }
.pa-log-time {
  font-size: 0.75rem;
  color: var(--ink-soft, #9a8a7a);
  margin-right: 0.4rem;
}
.pa-server-toggle {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  min-height: 42px;
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  background: var(--paper);
  padding: 0.34rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-secondary);
  cursor: pointer;
}
.pa-server-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 20px;
  border: none;
  background: var(--border);
  position: relative;
  cursor: pointer;
  outline: none;
  flex: 0 0 auto;
  transition: background 0.2s;
}
.pa-server-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.pa-server-toggle input[type="checkbox"]:checked {
  background: var(--ok, #2e7d32);
}
.pa-server-toggle input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}
.pa-server-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #5B9E9E);
  outline-offset: 2px;
}
.pa-server-hint {
  font-size: 0.82rem;
  color: var(--accent, #b56a30);
  margin-top: 0;
}
.pa-incidents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.pa-incidents-head h5 {
  margin: 0;
}
.pa-incidents-head .ghost-btn {
  padding: 0.34rem 0.72rem;
  font-size: 0.8rem;
}
.pa-incidents-list {
  max-height: 340px;
}
.pa-incident-item {
  border-left: 3px solid transparent;
}
.pa-incident-level-info {
  border-left-color: var(--ink-muted);
}
.pa-incident-level-warn {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}
.pa-incident-level-error {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}
.pa-incident-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.18rem;
}
.pa-incident-level-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--line, #ddc9ac);
  background: var(--paper);
  color: var(--ink-soft, #6a5a4a);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.18rem 0.4rem;
}
.pa-incident-level-warn .pa-incident-level-pill {
  border-color: var(--warning);
  color: var(--warning-text);
  background: var(--warning-bg);
}
.pa-incident-level-error .pa-incident-level-pill {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.pa-incident-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--ink-soft, #857567);
}
.pa-incident-message {
  font-size: 0.82rem;
  color: var(--ink, #1f1a16);
  line-height: 1.35;
}
.pa-incident-meta {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--ink-soft, #8f8173);
  line-height: 1.25;
}

/* ── Print Agent indicator (sidebar + burger) ── */
.topbar-pa-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink, #3a2e25);
}
.topbar-pa-btn[hidden] { display: none; }
.topbar-pa-btn::before { content: none !important; }
.topbar-pa-btn svg { display: block; }

.topbar-pa-led {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--cream, #fffdf8);
  background: var(--ink-muted);
}
.topbar-pa-led.pa-led-off { background: var(--ink-muted); }
.topbar-pa-led.pa-led-connecting { background: #f0ad4e; }
.topbar-pa-led.pa-led-on { background: #28a745; }

.burger-pa-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
  background: var(--ink-muted);
}
.burger-pa-led.pa-led-off { background: var(--ink-muted); }
.burger-pa-led.pa-led-connecting { background: #f0ad4e; }
.burger-pa-led.pa-led-on { background: #28a745; }

/* ─── AYCE Settings ─── */
.ayce-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 16px;
}
.ayce-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ayce-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.ayce-field input,
.ayce-field select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.ayce-sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.ayce-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper-alt);
  border-radius: 8px;
  flex-wrap: wrap;
}
.ayce-section-title {
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 120px;
  flex: 1;
}
.ayce-section-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ayce-section-fields label {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ayce-section-fields select,
.ayce-section-fields input[type="number"] {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
}
.ayce-qr-output {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.ayce-qr-card {
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.ayce-qr-svg svg {
  max-width: 180px;
  height: auto;
}
.ayce-qr-label {
  font-weight: 700;
  margin-top: 8px;
}
.ayce-actions {
  display: flex;
  gap: 8px;
}

/* Compact Self Order settings layout for the side panel width */
#settingsAyceView .ayce-pricing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 10px;
}

#settingsAyceView .ayce-field {
  min-width: 0;
}

#settingsAyceView .ayce-field label {
  text-transform: none;
  letter-spacing: 0.15px;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#settingsAyceView .ayce-field input,
#settingsAyceView .ayce-field select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 5px 7px;
  font-size: 0.86rem;
}

@media (max-width: 440px) {
  #settingsAyceView .ayce-pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Time Slots Cards ─── */
.ts-slot-card {
  background: var(--paper);
  border: 1px solid var(--border-warm, var(--border));
  border-radius: 12px;
  padding: 10px 11px;
  margin-bottom: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#timeSlotsListContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-slot-card.ts-active {
  border-color: #72b864;
  box-shadow: inset 0 0 0 1px rgba(114, 184, 100, 0.2);
}

.ts-slot-card.ts-inactive {
  border-color: var(--border);
}

.ts-slot-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
}

.ts-slot-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ts-slot-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.ts-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ts-active .ts-status-dot {
  background: #4caf50;
}

.ts-inactive .ts-status-dot {
  background: #b7b7b7;
}

.ts-slot-label-input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--input-bg, var(--paper));
  color: var(--ink);
}

.ts-enabled-toggle {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ts-enabled-toggle input {
  margin: 0;
}

.ts-delete-btn {
  min-height: 28px;
  padding: 4px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 0;
  line-height: 1;
  color: var(--danger, #d32f2f);
}

.ts-delete-btn:hover {
  background: transparent;
  opacity: 0.6;
}

.ts-status-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.ts-active .ts-status-label {
  color: #3f9c47;
  font-weight: 700;
}

.ts-slot-time-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ts-time-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper-alt);
}

.ts-time-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.ts-time-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.ts-time-sep {
  color: var(--ink-muted);
  font-weight: 700;
  text-align: center;
}

.ts-slot-time-row input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.84rem;
  text-align: center;
}

.ts-slot-group {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.ts-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.ts-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ts-day-label,
.ts-channel-label {
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px 4px 6px;
  background: var(--paper-alt);
  color: var(--ink);
  line-height: 1.1;
}

.ts-day-label input,
.ts-channel-label input {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.ts-chip-text {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ts-day-label .ts-chip-text {
  text-transform: uppercase;
}

.ts-channel-label .ts-chip-text {
  text-transform: none;
}

@media (max-width: 470px) {
  .ts-slot-head {
    grid-template-columns: 1fr;
  }

  .ts-slot-actions {
    justify-content: flex-start;
  }

  .ts-slot-time-row {
    grid-template-columns: 1fr;
  }

  .ts-slot-group {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .ts-section-label {
    margin-top: 0;
  }
}

.gas-filter-wrap {
  padding: 6px 0 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  display: flex;
  gap: 10px;
  align-items: center;
}
.gas-add-group-top-btn {
  flex-shrink: 0;
  padding: 9px 20px;
  border: 1.5px solid var(--accent, #5B9E9E);
  border-radius: 10px;
  background: transparent;
  color: var(--accent, #5B9E9E);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-add-group-top-btn:hover {
    background: var(--accent, #5B9E9E);
    color: #fff;
    box-shadow: 0 4px 14px rgba(186, 43, 43, 0.22);
    transform: translateY(-1px);
  }
}
.gas-add-group-top-btn:active {
  transform: scale(0.97);
}

/* ── Ingredients Button ─────────────────────────────────── */
.gas-ingredients-top-btn {
  flex-shrink: 0;
  padding: 9px 20px;
  border: 1.5px solid var(--accent-green, #2e7d32);
  border-radius: 10px;
  background: transparent;
  color: var(--accent-green, #2e7d32);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-ingredients-top-btn:hover {
    background: var(--accent-green, #2e7d32);
    color: #fff;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.22);
    transform: translateY(-1px);
  }
}
.gas-ingredients-top-btn:active {
  transform: scale(0.97);
}

/* ── Ingredients Modal ──────────────────────────────────── */
.gas-ingredients-modal-card {
  position: relative;
  max-width: 680px;
  width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
}
.gas-ingredients-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border, #eee);
  position: sticky;
  top: 0;
  background: var(--paper, #fff);
  z-index: 2;
}
.gas-ingredients-modal-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.gas-ingredients-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 20px;
  position: sticky;
  top: 56px;
  background: var(--paper, #fff);
  z-index: 1;
  flex-wrap: wrap;
}
.gas-ingredients-search {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
}
.gas-ingredients-cat-filter {
  padding: 8px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--paper, #fff);
}
.gas-ingredients-list {
  padding: 0 20px 12px;
}
.gas-ingredient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #eee);
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--paper-alt, #fafafa);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.gas-ingredient-row:hover {
  background: var(--surface-hover, rgba(128,128,128,0.12));
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.gas-ingredient-row.active {
  border-color: var(--accent-green, #2e7d32);
  background: rgba(46, 125, 50, 0.06);
}
.gas-ingredient-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
}
.gas-ingredient-cat {
  font-size: 0.78rem;
  color: var(--ink-muted, #999);
  padding: 2px 8px;
  background: var(--paper, #fff);
  border-radius: 6px;
  border: 1px solid var(--border, #eee);
}
.gas-ingredient-unit {
  font-size: 0.78rem;
  color: var(--ink-secondary, #666);
  min-width: 28px;
  text-align: center;
}
.gas-ingredient-actions {
  display: flex;
  gap: 4px;
}
.gas-ingredient-actions button {
  padding: 4px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  background: var(--paper, #fff);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s;
}
.gas-ingredient-actions button:hover {
  background: var(--surface-hover, rgba(128,128,128,0.15));
}
.gas-ingredient-actions button.danger-btn {
  border-color: #e53935;
  color: #e53935;
}
.gas-ingredient-actions button.danger-btn:hover {
  background: rgba(229, 57, 53, 0.12);
}
.gas-ingredient-actions button.link-btn {
  border-color: var(--accent-green, #2e7d32);
  color: var(--accent-green, #2e7d32);
}
.gas-ingredient-actions button.link-btn:hover {
  background: rgba(46, 125, 50, 0.08);
}
.gas-ingredient-form.hidden { display: none; }
.gas-ingredient-link-section.hidden { display: none; }
.gas-ingredient-form {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  border-radius: inherit;
  overflow-y: auto;
  flex: 1;
  max-height: 92vh;
  padding: 0 20px 16px;
}
.gas-ingredient-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
  position: sticky;
  top: 0;
  background: var(--paper, #fff);
  z-index: 1;
}
.gas-ingredient-form-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.gas-ingredient-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gas-ingredient-form-fields .gas-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gas-ingredient-form-fields .gas-field.gas-field-full {
  grid-column: 1 / -1;
}
.gas-ingredient-form-fields .gas-field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary, #666);
}
.gas-ingredient-form-fields .gas-field input,
.gas-ingredient-form-fields .gas-field select,
.gas-ingredient-form-fields .gas-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--paper, #fff);
  color: var(--ink, #222);
}
.gas-ingredient-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  background: var(--paper, #fff);
  padding: 10px 0;
}
.gas-ingredient-form-actions button {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
/* edit-open: form covers entire modal card (same pattern as link-open) */
.gas-ingredients-modal-card.edit-open {
  overflow: hidden;
}
.gas-ingredients-modal-card.edit-open > .gas-ingredients-modal-head,
.gas-ingredients-modal-card.edit-open > .gas-ingredients-toolbar,
.gas-ingredients-modal-card.edit-open > .gas-ingredients-list,
.gas-ingredients-modal-card.edit-open > .gas-ingredient-link-section {
  display: none;
}
.gas-ingredients-modal-card.link-open {
  overflow: hidden;
}
.gas-ingredients-modal-card.link-open > .gas-ingredients-modal-head,
.gas-ingredients-modal-card.link-open > .gas-ingredients-toolbar,
.gas-ingredients-modal-card.link-open > .gas-ingredients-list,
.gas-ingredients-modal-card.link-open > .gas-ingredient-form {
  display: none;
}
.gas-ingredient-link-section {
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  border-radius: inherit;
  overflow-y: auto;
  flex: 1;
  max-height: 92vh;
}
.gas-ingredient-link-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 10px;
  position: sticky;
  top: 0;
  background: var(--paper, #fff);
  z-index: 2;
  border-bottom: 1px solid var(--border, #eee);
}
.gas-ingredient-link-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.gas-ingredient-link-back {
  background: none;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink, #333);
  line-height: 1;
}
.gas-ingredient-link-hint {
  font-size: 0.82rem;
  color: var(--ink-muted, #999);
  margin: 0 0 12px;
  padding: 0 20px;
}
.gas-ingredient-link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 0 20px 16px;
  overflow-y: auto;
}
.gas-ingredient-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 0.88rem;
}
.gas-ingredient-link-row:last-of-type {
  border-bottom: none;
}
.gas-ingredient-link-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: pointer;
}
.gas-ingredient-link-row .link-qty-input {
  width: 70px;
  padding: 4px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: right;
}
.gas-ingredient-link-group {
  border: 1px solid var(--border, #eee);
  border-radius: 8px;
  margin-bottom: 6px;
}
.gas-ingredient-link-group:not([open]) .gas-ingredient-link-row {
  display: none;
}
.gas-ingredient-link-group[open] {
  border-color: var(--accent, #4caf50);
}
.gas-ingredient-link-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink, #333);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-alt, #f5f5f5);
}
.gas-ingredient-link-group-title::-webkit-details-marker { display: none; }
.gas-ingredient-link-group-title::before {
  content: "▸";
  font-size: 0.9rem;
  transition: transform 0.15s;
}
.gas-ingredient-link-group[open] > .gas-ingredient-link-group-title::before {
  transform: rotate(90deg);
}
.gas-link-group-badge {
  background: var(--accent, #4caf50);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.gas-ingredients-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-muted, #999);
  font-size: 0.9rem;
}
.gas-ingredient-link-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}
.gas-ingredient-link-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.88rem;
}
.gas-ingredient-link-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.gas-ingredient-link-qty-wrap .link-qty-input {
  width: 72px;
}
.gas-ingredient-link-qty-wrap .link-qty-input:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.gas-ingredient-link-unit {
  font-size: 0.78rem;
  color: var(--ink-muted, #888);
  min-width: 22px;
}

/* ── Categories Manager ─────────────────────────────────── */
.gas-cat-toggle-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--border-warm, #d4c9bc);
  border-radius: 10px;
  background: var(--paper-alt, #faf6f1);
  color: var(--ink-secondary, #6b5e52);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.gas-cat-toggle-btn:hover {
  border-color: var(--accent, #5B9E9E);
  color: var(--accent, #5B9E9E);
}
.gas-categories-manager {
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--paper, #fff);
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 10px;
}
.gas-categories-list {
  padding: 10px 14px;
}
.gas-cat-mgr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.gas-cat-mgr-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 12px;
  font-size: 0.82rem;
  background: var(--paper-alt, #faf6f1);
}
.gas-cat-mgr-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gas-cat-mgr-label {
  color: var(--ink, #1f1a16);
}
.gas-cat-mgr-lock {
  font-size: 0.7rem;
  color: var(--ink-muted, #a39688);
  font-style: italic;
}
.gas-cat-mgr-top-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}
.gas-cat-top-toggle-wrap {
  transform: scale(0.75);
  flex-shrink: 0;
}
.gas-cat-topn-input {
  width: 48px;
  padding: 3px 6px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 6px;
  font-size: 0.82rem;
  text-align: center;
  background: var(--paper, #fff);
  color: var(--ink, #1f1a16);
  transition: opacity 0.15s;
}
.gas-cat-topn-input:disabled {
  opacity: 0.35;
}
.gas-cat-topn-input:focus {
  border-color: var(--accent, #5B9E9E);
  outline: none;
}
.gas-cat-delete-btn {
  background: none;
  border: none;
  color: var(--ink-muted, #a39688);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.gas-cat-delete-btn:hover {
  color: var(--accent, #5B9E9E);
}
.gas-cat-mgr-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.gas-cat-mgr-add input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--paper, #fff);
  color: var(--ink, #1f1a16);
}
.gas-cat-mgr-add input[type="color"] {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: var(--paper, #fff);
}
.gas-cat-mgr-add .primary {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* ── Category Pills on Groups ────────────────────────────── */
.gas-field-categories {
  min-width: 0;
}
.gas-group-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gas-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1.5px solid var(--cat-color, #888);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cat-color, #888);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.gas-cat-pill:hover {
  background: color-mix(in srgb, var(--cat-color, #888) 10%, transparent);
}
.gas-cat-pill.active {
  background: var(--cat-color, #888);
  color: #fff;
  border-color: var(--cat-color, #888);
}

.gas-filter-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px 10px 38px;
  border: 1.5px solid var(--border-warm, #d4c9bc);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--paper-alt, #f5f0eb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center / 16px no-repeat;
  color: var(--ink, #3a3024);
  outline: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.gas-filter-input:focus {
  border-color: var(--accent, #5B9E9E);
  background-color: var(--paper, #fff);
  box-shadow: 0 0 0 3px rgba(186, 43, 43, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gas-filter-input::placeholder {
  color: var(--ink-muted, #9e9e9e);
  font-weight: 400;
}

/* ─── Gruppi e Articoli ─────────────────────────────────── */
.modal.summary-fullscreen #settingsGroupsArticlesView {
  min-height: 0;
}
.gas-groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gas-group {
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 14px;
  background: var(--paper, #fff);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--border-warm, #d4c9bc);
}
.gas-group[open] {
  border-color: var(--accent, #5B9E9E);
  border-left-color: var(--accent, #5B9E9E);
  box-shadow: 0 4px 20px rgba(186, 43, 43, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.gas-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 15px;
  background: var(--paper-alt, #f5f0eb);
  border-radius: 11px 14px 14px 11px;
  user-select: none;
  list-style: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.gas-group[open] > .gas-group-header {
  position: sticky;
  top: 0;
  z-index: 3;
  border-radius: 11px 14px 0 0;
  border-bottom: 1px solid var(--border-warm, #d4c9bc);
  background: linear-gradient(135deg, var(--paper-alt, #f5f0eb) 0%, var(--paper, #fff) 100%);
}
@media (hover: hover) {
  .gas-group:not([open]):hover {
    border-left-color: var(--accent, #5B9E9E);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }
  .gas-group:not([open]) > .gas-group-header:hover {
    background: var(--paper, #fff);
  }
}
.gas-group-header:active {
  transform: scale(0.995);
}
.gas-group-header::-webkit-details-marker { display: none; }
.gas-group-header::marker { display: none; content: ""; }

/* Drag handle gruppi */
.gas-group-drag-handle {
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
  cursor: grab;
  touch-action: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-warm, #d4c9bc);
  background: var(--paper, #fff);
  color: var(--ink-muted, #8D6E63);
  flex-shrink: 0;
}
.gas-group-drag-handle:hover {
  color: var(--ink, #2A1A12);
  background: var(--paper-warm, #E8DDCC);
}
.gas-group-drag-placeholder {
  border: 2px dashed var(--accent, #5B9E9E);
  border-radius: 14px;
  background: rgba(91, 158, 158, 0.04);
  margin-bottom: 0;
}
.gas-group-drag-ghost {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  overflow: hidden;
}
body.dragging-gas-groups,
body.dragging-gas-groups * {
  cursor: grabbing !important;
}

.gas-group-title {
  flex: 1;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-size: 15px;
}
.gas-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.gas-badge-count {
  background: rgba(186, 43, 43, 0.07);
  color: var(--accent, #5B9E9E);
  border-color: rgba(186, 43, 43, 0.15);
}
.gas-badge-ayce {
  background: var(--ok-bg, #e8f5e9);
  color: var(--ok, #2e7d32);
  border-color: rgba(46, 125, 50, 0.15);
}
.gas-badge-extra {
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink-secondary, #7a6e5f);
  border-color: var(--border-warm, #d4c9bc);
}
.gas-badge-product {
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink, #3a3024);
  border-color: var(--border-warm, #d4c9bc);
}
.gas-badge-variant {
  background: rgba(96, 53, 140, 0.06);
  color: #60358c;
  border-color: rgba(96, 53, 140, 0.15);
}
.gas-group-body {
  padding: 16px 18px;
  border-top: 1px solid var(--border-warm, #d4c9bc);
  background: linear-gradient(180deg, var(--bg, #faf7f3) 0%, var(--paper, #fff) 100%);
}
.gas-group-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-warm, #d4c9bc);
}
.gas-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-secondary, #7a6e5f);
}
.gas-field span {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-muted, #9e9e9e);
}
.gas-field input[type="text"],
.gas-field input[type="number"],
.gas-field select {
  padding: 5px 10px;
  border: 1.5px solid var(--border-warm, #d4c9bc);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  box-sizing: border-box;
  background: var(--paper, #fff);
  color: var(--ink, #3a3024);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.gas-field input[type="text"]:focus,
.gas-field input[type="number"]:focus,
.gas-field select:focus {
  border-color: var(--accent, #5B9E9E);
  box-shadow: 0 0 0 3px rgba(186, 43, 43, 0.08);
  outline: none;
}

.gas-group-color-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gas-group-color-input {
  width: 44px;
  min-width: 44px;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 8px;
  padding: 2px;
  background: var(--paper, #fff);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gas-group-color-input:hover {
  border-color: var(--accent, #5B9E9E);
}
.gas-group-color-input:focus {
  box-shadow: 0 0 0 2px rgba(186, 43, 43, 0.08);
}

.gas-group-color-clear {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.18s ease, background 0.18s ease;
}
.gas-field-price {
  min-width: 70px;
}
.gas-field-price + .gas-field-price {
  margin-left: -4px;
}
.gas-field-price-blocked input {
  opacity: 0.4;
  pointer-events: none;
}
.gas-iva-warning {
  color: #d32f2f;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1;
}
.gas-money-input {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gas-money-prefix {
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 700;
}
.gas-money-input input[type="text"] {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  height: 30px;
  box-sizing: border-box;
  background: var(--input-bg);
  color: var(--ink);
}
.gas-money-input.disabled {
  background: var(--paper-alt);
}
.gas-money-input.disabled .gas-money-prefix {
  background: var(--bg);
}
.gas-toggle-field {
  align-items: center;
}
.gas-toggle-field .perm-toggle-wrap {
  margin-top: 2px;
}
.gas-toggle-red .perm-toggle-slider {
  background: var(--border) !important;
}
.gas-toggle-red .perm-toggle-input:checked + .perm-toggle-slider {
  background: var(--ok, #2e7d32) !important;
}
.gas-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gas-item {
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--paper, #fff);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
@media (hover: hover) {
  .gas-item:hover {
    border-color: var(--accent, #5B9E9E);
    box-shadow: 0 3px 12px rgba(186, 43, 43, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
  }
}
.gas-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.gas-item-kind-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(96, 53, 140, 0.2);
  background: rgba(96, 53, 140, 0.06);
  color: #60358c;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gas-allergens {
  font-size: 11px;
  color: var(--ink-muted);
}
.gas-item-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gas-group-variants-btn,
.gas-item-variants-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink, #3a3024);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-group-variants-btn:not([disabled]):hover,
  .gas-item-variants-btn:not([disabled]):hover {
    border-color: var(--accent, #5B9E9E);
    color: var(--accent, #5B9E9E);
    box-shadow: 0 2px 8px rgba(186, 43, 43, 0.08);
    transform: translateY(-1px);
  }
}
.gas-group-variants-btn[disabled],
.gas-item-variants-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.gas-item-required-variants-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 8px;
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink, #3a3024);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.gas-item-required-variants-btn.has-required {
  border-color: #d32f2f;
  background: #ffebee;
  color: #d32f2f;
}

.variant-required-badge {
  display: inline-block;
  background: #d32f2f;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

.variant-confirm-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gas-variant-fields {
  display: contents;
}
.gas-photo-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-secondary);
}
.gas-photo-field span {
  font-weight: 500;
}
.gas-photo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gas-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* ─── GAS Add / Delete buttons ─── */
.gas-add-group-wrap {
  padding: 18px 0;
  text-align: center;
}
.gas-add-group-btn {
  padding: 10px 24px;
  border: 1.5px solid var(--accent, #5B9E9E);
  border-radius: 12px;
  background: transparent;
  color: var(--accent, #5B9E9E);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-add-group-btn:hover {
    background: var(--accent, #5B9E9E);
    color: #fff;
    box-shadow: 0 4px 14px rgba(186, 43, 43, 0.22);
    transform: translateY(-1px);
  }
}
.gas-add-group-btn:active {
  transform: scale(0.97);
}
/* Icon buttons in group header (override .gas-badge) */
.gas-header-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.5;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.gas-header-icon svg {
  display: block;
  flex-shrink: 0;
}
.gas-group-header:hover .gas-header-icon {
  opacity: 1;
}
@media (hover: hover) {
  .gas-header-icon:hover {
    transform: scale(1.1);
    border-color: var(--border-warm, #d4c9bc);
    background: var(--paper, #fff);
  }
}
.gas-header-icon:active {
  transform: scale(0.92);
}
.gas-add-item-header-btn {
  margin-left: auto;
  color: var(--ink-muted, #9e9e9e);
}
@media (hover: hover) {
  .gas-add-item-header-btn:hover {
    color: var(--accent, #5B9E9E);
    background: rgba(186, 43, 43, 0.06);
    border-color: rgba(186, 43, 43, 0.15);
  }
}
.gas-delete-group-btn {
  color: var(--ink-muted, #9e9e9e);
}
@media (hover: hover) {
  .gas-delete-group-btn:hover {
    color: var(--danger, #e53935);
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
  }
}
.gas-badge-listino {
  color: var(--ink-muted, #9e9e9e);
}
@media (hover: hover) {
  .gas-badge-listino:hover {
    color: var(--accent, #5B9E9E);
    background: rgba(186, 43, 43, 0.06);
    border-color: rgba(186, 43, 43, 0.15);
  }
}
.gas-badge-iva {
  color: var(--ink-muted, #9e9e9e);
}
@media (hover: hover) {
  .gas-badge-iva:hover {
    color: var(--accent, #5B9E9E);
    background: rgba(186, 43, 43, 0.06);
    border-color: rgba(186, 43, 43, 0.15);
  }
}
.gas-group-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-warm, #d4c9bc);
  align-items: center;
}
.gas-add-item-btn {
  padding: 7px 18px;
  border: 1.5px dashed var(--border-warm, #d4c9bc);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-secondary, #7a6e5f);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-add-item-btn:hover {
    border-color: var(--accent, #5B9E9E);
    border-style: solid;
    color: var(--accent, #5B9E9E);
    background: rgba(186, 43, 43, 0.04);
    transform: translateY(-1px);
  }
}
.gas-add-item-btn:active {
  transform: scale(0.97);
}
.gas-save-inline-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 10px;
  background: var(--accent, #5B9E9E);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .gas-save-inline-btn:hover {
    box-shadow: 0 4px 16px rgba(186, 43, 43, 0.3);
    transform: translateY(-2px);
    filter: brightness(1.08);
  }
}
.gas-save-inline-btn:active {
  transform: scale(0.97);
  box-shadow: none;
}
.gas-delete-item-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted, #9e9e9e);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  opacity: 0.4;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.gas-delete-item-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.gas-item:hover .gas-delete-item-btn {
  opacity: 1;
}
@media (hover: hover) {
  .gas-delete-item-btn:hover {
    color: var(--danger, #e53935);
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
    transform: scale(1.08);
  }
}
.gas-delete-item-btn:active {
  transform: scale(0.92);
}
.gas-delete-item-btn-mobile {
  display: none;
}

.gas-variants-modal-card {
  max-width: 560px;
}
.gas-variants-list {
  max-height: 52vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0;
}
.gas-variant-group h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-secondary);
}
.gas-variant-group-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gas-variant-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
}
.gas-variant-row input[type="checkbox"] {
  margin-top: 2px;
}
.gas-variant-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gas-variant-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gas-variant-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper-alt);
  color: var(--ink-secondary);
  font-size: 11px;
  font-weight: 600;
}
.gas-variant-chip.inherited {
  border-color: #9fc3ea;
  background: #e9f3ff;
  color: #245381;
}
.gas-variant-group-toggle {
  border-color: var(--border);
  background: var(--paper-warm);
}
.gas-variant-group-toggle .gas-variant-main strong {
  font-size: 15px;
}
.gas-variant-group-items-preview {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.3;
}

@media (max-width: 520px) {
  .gas-group-header .gas-badge {
    display: none;
  }
  .gas-group-title {
    white-space: normal;
    font-size: 14px;
  }
  .gas-item-header > .gas-delete-item-btn {
    display: none;
  }
  .gas-delete-item-btn-mobile {
    display: flex !important;
    margin-left: auto;
  }
  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active {
    position: fixed;
    inset: 0;
    z-index: 2200;
    margin: 0;
    padding: 0.5rem;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active .gas-group {
    display: none;
  }

  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active .gas-group.gas-mobile-fullscreen-open {
    display: block;
    min-height: calc(100dvh - 1rem);
    border-radius: 12px;
    overflow: visible;
    background: var(--border);
  }

  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active .gas-group.gas-mobile-fullscreen-open .gas-group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--line);
  }

  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active .gas-add-group-wrap,
  .modal.summary-fullscreen .gas-groups-list.gas-mobile-fullscreen-active + div {
    display: none !important;
  }
}
.gas-item-name {
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border-warm, #d4c9bc);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--paper, #fff);
  color: var(--ink, #3a3024);
  transition: border-color 0.18s ease;
}
.gas-item-name:focus {
  border-color: var(--accent, #5B9E9E);
  outline: none;
}

/* ─── Table Order Role View ─── */
.table-order-view {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px;
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  background: var(--paper);
}
.table-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.table-order-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.table-order-profile-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.table-order-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
}
.table-order-input {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  background: var(--paper);
  outline: none;
  transition: border-color 0.15s;
}
.table-order-input:focus {
  border-color: var(--accent);
}
.table-order-open-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}
.table-order-error {
  width: 100%;
  color: var(--danger);
  font-size: 13px;
  margin: 0;
  min-height: 18px;
}
.table-order-active h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-secondary);
  margin: 0 0 12px;
}
.table-order-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.table-order-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.table-order-card-expired {
  opacity: 0.5;
}
.table-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.table-order-card-header strong {
  font-size: 18px;
  color: var(--ink);
}
.table-order-timer {
  font-size: 14px;
  font-weight: 600;
  color: #28a745;
  background: var(--ok-bg, #e8f5e9);
  padding: 2px 10px;
  border-radius: 12px;
}
.table-order-timer-expired {
  color: var(--danger);
  background: var(--danger-bg);
}
.table-order-card-actions {
  display: flex;
  gap: 8px;
}
.table-order-card-btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.table-order-share-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.package-wizard-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
}

/* ============================================================
   MOBILE TOPBAR — Riga orizzontale compatta, solo icone (<762px)
   ============================================================ */
@media (max-width: 761px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1201;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 0;
    border-bottom: none;
    background: #4E342E;
    color: #EDE4D3;
  }

  /* Burger: niente bordo, trasparente */
  .topbar-burger-btn {
    border: none;
    background: transparent;
    box-shadow: none;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    color: #EDE4D3;
  }
  .burger-line {
    background: #EDE4D3;
  }

  /* Nav buttons: riga orizzontale, solo icone */
  .topbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-nav::-webkit-scrollbar {
    display: none;
  }

  .topbar-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #D7CCC8;
    padding: 0.4rem;
    min-height: 40px;
    min-width: 40px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.13s, color 0.13s;
  }
  .topbar-nav-btn:hover,
  .topbar-nav-btn.active {
    background: rgba(91, 158, 158, 0.18);
    color: #93C9C9;
  }
  .topbar-nav-btn[hidden] {
    display: none !important;
  }

  /* Nasconde il testo, mostra solo icona */
  .topbar-nav-btn span {
    display: none;
  }
  .topbar-nav-btn svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  /* Divider nascosto su mobile */
  .topbar-nav-divider {
    display: none;
  }

  /* Topbar actions: stampantina sulla riga icone, sync su riga sotto */
  .topbar-actions {
    display: contents;
  }
  .topbar-actions .topbar-pa-btn {
    display: none !important;
  }
  .topbar-actions .topbar-pa-btn::before {
    content: none;
  }
  .topbar-actions .sync-status {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
    justify-content: center;
    text-align: center;
  }
  .topbar-actions .sync-status .sync-status-text {
    min-width: 0;
  }
  /* Nasconde il reload button su mobile — sync si fa dal burger */
  .topbar-actions #reloadMenuBtn {
    display: none;
  }

  /* --- Panel head "Sale e Tavoli": tutto in riga compatta --- */
  .layout.screen-tables .tables-panel .panel-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin: 0;
    min-height: auto;
  }
  .layout.screen-tables .tables-panel .panel-head h2 {
    font-size: 0.95rem;
    flex-shrink: 0;
    margin: 0;
  }
  .tables-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
  }
  .tables-stats-totals {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: right;
  }
  .tables-stats-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
    line-height: 1.2;
  }
  .tables-stats-label {
    font-size: 0.68rem;
    color: var(--ink-muted);
    font-weight: 600;
  }
  .tables-stats-value {
    font-size: 0.75rem;
    font-weight: 800;
  }
  .tables-stats-coperti {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    border-left: 1px solid var(--line);
    padding-left: 0.4rem;
  }
  .tables-stats-coperti svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .tables-stats-coperti-num {
    font-size: 0.82rem;
    font-weight: 800;
  }
  .tables-panel-menu {
    flex-shrink: 0;
  }
}

/* ============================================================
   MOBILE OPTIMIZATION — Smartphone (<480px)
   ============================================================ */
@media (max-width: 480px) {
  /* --- Touch targets: minimo 44px (WCAG 2.5.5) --- */
  .ghost-btn {
    min-height: 44px;
    padding: 0.3rem 0.7rem;
    font-size: 0.88rem;
  }
  .burger-close-btn {
    width: 44px;
    height: 44px;
  }
  .profile-back-btn {
    width: 44px;
    height: 44px;
  }
  .banco-back-btn {
    width: 44px;
    height: 44px;
  }
  .turn-collapse-btn {
    min-height: 40px;
    min-width: 40px;
  }
  .qty-controls button {
    min-height: 44px;
  }
  .qty-controls {
    grid-template-columns: 44px 1fr 44px;
  }
  .line-controls .remove-btn {
    min-height: 44px;
  }

  /* --- Padding ridotti per guadagnare spazio --- */
  .app-shell {
    padding: 0.5rem;
  }
  .topbar {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .panel {
    padding: 0.5rem;
  }
  .panel-head {
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
  }
  .modal {
    padding: 0.5rem;
  }
  .modal-card {
    padding: 0.65rem;
    border-radius: 10px;
  }
  .order-block {
    padding: 0.35rem;
    gap: 0.28rem;
  }
  .turn-section {
    padding: 0.28rem;
    gap: 0.28rem;
  }
  .room-tabs-bar {
    margin: 0 -0.5rem 0.6rem;
    -webkit-overflow-scrolling: touch;
  }
  .room-tab {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0.72rem 1rem;
  }

  /* --- Font size minime leggibili --- */
  .state-pill {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
  }
  .tables-stats-label {
    font-size: 0.78rem;
  }
  .panel-head small {
    font-size: 0.82rem;
  }
  .line-gesture-help {
    font-size: 0.78rem;
  }

  /* --- Modali più adattivi --- */
  .modal-card {
    width: min(460px, calc(100vw - 1rem));
    max-height: 92vh;
  }
  #printerModal:not(.summary-fullscreen) #printerModalCard {
    width: min(92vw, 380px);
  }

  /* --- Banco: header allineato a panel-head Sala --- */
  .banco-header {
    padding: 0.4rem 0.5rem;
    gap: 0.5rem;
    background: var(--paper);
    border-bottom: none;
    box-shadow: none;
    min-height: calc(42px + 1.5rem);
  }
  .banco-title {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    font-weight: 400;
    opacity: 0.8;
  }
  .banco-footer {
    padding: 0.5rem 0.65rem;
  }

  /* --- Profilo: body meno padding --- */
  .profile-body {
    padding: 1rem 0.75rem 2rem;
  }
  .profile-card-title {
    padding: 0.85rem 0.9rem 0.45rem;
  }
  .profile-card-sub {
    padding: 0 0.9rem 0.6rem;
  }
  .profile-row {
    padding: 0.7rem 0.9rem;
  }
  .profile-topbar {
    padding: 0.6rem 0.75rem;
  }

  /* --- Tabelle tavoli: 2 colonne con gap ridotto --- */
  .tables-grid {
    gap: 0.35rem;
  }

  /* --- Menu browser: sidebar più stretta --- */
  .menu-browser {
    grid-template-columns: minmax(78px, min(var(--menu-groups-width, 150px), 40vw)) minmax(0, 1fr);
    gap: 0.35rem;
  }
  .section-tabs {
    max-height: 65vh;
  }

  /* --- Dish grid a colonna singola --- */
  .dish-grid {
    gap: 0.35rem;
  }
  .dish-btn {
    font-size: var(--layout-menu-items-font-size, 0.88rem);
  }

  /* --- Settings: pannello più largo --- */
  #printerModal:not(.summary-fullscreen) #printerModalCard {
    width: min(94vw, 380px);
  }
  .settings-menu-btn {
    min-height: 44px;
    font-size: 0.92rem;
    padding: 0.45rem 0.6rem;
  }

  /* --- AYCE pricing grid stacking --- */
  .ayce-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- Fiscal emit modal compatto --- */
  .fiscal-emit-totals-row {
    font-size: 0.88rem;
  }

  /* --- Ordini: azioni più compatte --- */
  .order-actions {
    gap: 0.25rem;
  }
  .order-actions button {
    min-height: 40px;
    font-size: 0.82rem;
    padding: 0.2rem 0.3rem;
  }

  /* --- Table action modal compatto --- */
  #tableActionModal .modal-card.modal-card-compact {
    width: min(350px, calc(100vw - 1.6rem));
  }

  .table-action-totals {
    font-size: 0.88rem;
  }

  /* --- Burger menu: testo più leggibile --- */
  .burger-nav-item {
    font-size: 0.92rem;
  }
  .burger-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  /* --- Pre/code overflow fix --- */
  pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* --- Analytics / summary screen --- */
  .analytics-screen {
    left: 0;
  }

  /* --- Settings inline styles override: font 13px→14px, 12px→13px --- */
  .settings-view p[style*="font-size:13px"],
  .settings-view label[style*="font-size:13px"] {
    font-size: 14px !important;
  }
  .settings-view p[style*="font-size:12px"],
  .settings-view a[style*="font-size:12px"] {
    font-size: 13px !important;
  }

  /* --- Settings inline 2-col grids → stack on mobile --- */
  .settings-view div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Settings section padding compatto --- */
  .settings-section {
    padding: 0.6rem 0.5rem;
  }
  .settings-view-head {
    padding: 0.5rem;
  }
  .settings-view-head h4 {
    font-size: 1.05rem;
  }

  /* --- Perm toggle row più alto per touch --- */
  .perm-toggle-row {
    min-height: 48px;
    padding: 0.5rem 0;
  }
}

/* ============================================================
   EXTRA-SMALL SCREEN (<360px) — iPhone SE, Galaxy S mini
   ============================================================ */
@media (max-width: 360px) {
  .app-shell {
    padding: 0.35rem;
  }
  .topbar {
    padding: 0.35rem;
    gap: 0.35rem;
  }
  .modal-card {
    padding: 0.5rem;
  }
  .burger-panel {
    width: min(90vw, 280px);
  }
  .modal {
    padding: 0.35rem;
  }
  .profile-body {
    padding: 0.75rem 0.5rem 1.5rem;
  }
  .banco-header {
    padding: 0.35rem 0.5rem;
    gap: 0.35rem;
  }
  .tables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
  }
  .menu-browser {
    grid-template-columns: 1fr;
  }
  .section-tabs {
    max-height: 30vh;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .section-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Hard override desktop: allinea in modo deterministico le due barre */
@media (min-width: 601px) {
  #bancoScreen .banco-header,
  #bancoScreen .banco-order-header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }
  #bancoScreen .banco-header {
    flex-wrap: nowrap !important;
  }
}

/* Hard override desktop: allinea in modo deterministico le due barre Asporto */
@media (min-width: 601px) {
  #asportoScreen .asporto-header,
  #asportoScreen .asporto-detail-header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }
  #asportoScreen .asporto-title {
    margin: 0 !important;
  }
  #asportoScreen #asportoCloseBtn {
    min-height: 0 !important;
    min-width: 0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
}

/* ── Paid / Fiscal modals: fixed actions, scrollable list ── */
#paidResumeModal .modal-card,
#paidDividiModal .modal-card,
#paidRomanModal .modal-card,
#paidSplitModal .modal-card,
#fiscalEmitModal .modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#paidResumeModal .modal-actions,
#paidDividiModal .modal-actions,
#paidRomanModal .modal-actions,
#paidSplitModal .modal-actions,
#fiscalEmitModal .modal-actions,
#paidResumeModal .paid-resume-totals,
#paidDividiModal .paid-resume-totals,
#paidRomanModal .paid-resume-totals,
#fiscalEmitModal .paid-resume-totals,
#paidResumeModal .paid-discount-row,
#paidDividiModal .paid-discount-row,
#paidRomanModal .paid-discount-row,
#fiscalEmitModal .paid-discount-row,
#paidResumeModal .paid-discount-panel,
#paidDividiModal .paid-discount-panel,
#fiscalEmitModal .paid-discount-panel,
#paidDividiModal .paid-amount-row,
#fiscalEmitModal .paid-amount-row,
#paidDividiModal .paid-dividi-head,
#paidRomanModal .paid-dividi-head,
#paidSplitModal .paid-dividi-head,
#fiscalEmitModal .paid-dividi-head,
#paidRomanModal .paid-roman-info,
#fiscalEmitModal .paid-roman-info,
#fiscalEmitModal .fiscal-emit-mode-tabs,
#paidResumeModal h3,
#paidRomanModal h3,
#fiscalEmitModal h3,
#paidRomanModal .paid-roman-input-row,
#fiscalEmitModal .paid-roman-input-row {
  flex-shrink: 0;
}

/* ── Paid Resume Modal ───────────────────────────────────── */
.paid-resume-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
}
.paid-resume-list li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.paid-resume-list li:last-child { border-bottom: none; }
.paid-resume-list .qty {
  text-align: right;
  font-weight: 700;
  padding-right: 0.4rem;
}
.paid-resume-list .preconto-desc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.paid-resume-list .amount {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}
.paid-resume-totals {
  border-top: 2px solid var(--ink);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

/* ── Paid Amount Row ──────────────────────────────────────── */
.paid-amount-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper-warm);
}
.paid-amount-row input[type="number"] {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 120px;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
  text-align: right;
}
.paid-amount-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
}
.paid-amount-row button {
  white-space: nowrap;
}
.fiscal-causale-clear-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.fiscal-causale-clear-btn:active {
  background: var(--danger-bg, #fee);
  color: var(--danger, #c00);
}

/* ── Fiscal Payment Methods Step ────────────────────────────── */
.fiscal-payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.fiscal-payment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fiscal-payment-row select {
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
}
.fiscal-payment-row input[type="number"] {
  width: 90px;
  font-size: .95rem;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  text-align: right;
}
.fiscal-payment-row .fiscal-payment-remove-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.fiscal-payment-row .fiscal-payment-remove-btn:active {
  background: var(--danger-bg, #fee);
  color: var(--danger, #c00);
}
.fiscal-payment-add-btn {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary);
  font-size: .9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fiscal-payment-add-btn:active {
  background: var(--paper-warm);
  color: var(--ink);
}
.fiscal-payment-add-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Paid Dividi header + back button ─────────────────────── */
.paid-dividi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paid-dividi-head h3 {
  margin: 0;
}
.paid-dividi-back-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--ink-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paid-dividi-back-btn:hover,
.paid-dividi-back-btn:focus-visible {
  color: var(--ink);
  background: var(--border);
}

/* ── Paid Dividi action buttons with icons ────────────────── */
.paid-dividi-actions {
  justify-content: flex-start;
}
.paid-dividi-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 76px;
}
.paid-dividi-action-btn svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Paid Split Modal ────────────────────────────────────── */
.modal-card-wide {
  max-width: 700px;
}
.paid-split-columns {
  display: flex;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.paid-split-columns h4 {
  margin: 0 0 0.35rem 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.paid-split-left,
.paid-split-right {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}
.paid-split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  flex: 1;
}
.paid-split-line {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  font-size: 0.92rem;
  border-radius: 4px;
  transition: background 0.12s;
}
.paid-split-line:last-child { border-bottom: none; }
.paid-split-line:active {
  background: var(--paper-warm);
}
.paid-split-line .qty {
  text-align: right;
  font-weight: 700;
  padding-right: 0.35rem;
}
.paid-split-line .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paid-split-line .amount { text-align: right; white-space: nowrap; font-weight: 600; }
.paid-split-line.paid-split-package .name { font-weight: 800; }
.paid-split-line.paid-split-sub {
  cursor: default;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  border-bottom: none;
  font-size: 0.82rem;
  color: var(--ink-secondary);
}
.paid-split-line.paid-split-sub:active { background: transparent; }
.paid-split-total {
  border-top: 2px solid var(--ink);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
}
/* ── Paid Roman Modal ─────────────────────────────────── */
.paid-roman-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  font-size: 1rem;
}
.paid-roman-input-row input[type="number"] {
  width: 60px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
}
.paid-roman-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
}
.paid-roman-info {
  font-size: 1.05rem;
  padding: 0.5rem 0;
  line-height: 1.4;
}

/* ── Discount panel in paid modals ──────────────────────── */
.paid-discount-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.paid-discount-toggle.active {
  border-color: var(--accent, #f5a623);
  background: var(--accent-faint, #ffeecf);
  color: var(--accent-dark, #b87a00);
}

/* Container flex per Sconto + Riscatta Promo affiancati */
.paid-discount-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.paid-discount-row .paid-discount-toggle {
  flex: 1;
  margin: 0;
}

/* Result box nel modale coupon */
#redeemCouponResult {
  padding: 0.6rem;
  border-radius: 6px;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
#redeemCouponResult.redeem-ok {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  color: #2e7d32;
}
html.dark-mode #redeemCouponResult.redeem-ok {
  background: #1b3a20;
  border-color: #388e3c;
  color: #81c784;
}
#redeemCouponResult.redeem-err {
  background: var(--danger-bg, #fff5f4);
  border: 1px solid var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

.paid-discount-panel {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.paid-discount-panel.open {
  display: flex;
}
.paid-discount-unit-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.paid-discount-unit-tabs button {
  flex: 1;
  padding: 0.4rem 0.8rem;
  border: none;
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.paid-discount-unit-tabs button.active {
  background: var(--accent-faint, #ffeecf);
  color: var(--accent-dark, #b87a00);
}
.paid-discount-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.paid-discount-input-row input {
  flex: 1;
  width: 80px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
}
.paid-discount-input-row .paid-discount-apply-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent, #f5a623);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.paid-discount-input-row .paid-discount-remove-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--danger, #e74c3c);
  border-radius: 6px;
  background: transparent;
  color: var(--danger, #e74c3c);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: none;
}
.paid-discount-input-row .paid-discount-remove-btn.visible {
  display: inline-block;
}

@media (max-width: 500px) {
  .paid-split-columns {
    flex-direction: column;
  }
  .modal-card-wide {
    max-width: 100%;
  }
}

/* Smartphone: schermate impostazioni in primo piano (overlay) */
@media (max-width: 761px) {
  #printerModal:not(.summary-fullscreen) {
    padding: 0.55rem;
    place-items: center;
    justify-content: center;
    align-content: center;
  }

  #printerModal:not(.summary-fullscreen) #printerModalCard {
    width: min(96vw, 460px);
    height: auto;
    max-height: min(92dvh, 840px);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(20, 10, 0, 0.24);
  }

  body.burger-settings-sticky #printerModal:not(.summary-fullscreen) {
    padding-left: 0;
  }

  body.burger-settings-sticky #printerModal:not(.summary-fullscreen) #printerModalCard {
    width: min(96vw, 460px);
  }

  #printerModal .settings-view-head .stock-burger-btn {
    display: none !important;
  }
}

/* ==================== PRENOTAZIONI ==================== */

.res-main-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 0;
}

/* Pannelli sinistro/destro */
.res-left-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  overflow: visible;
  min-width: 0;
}
.res-right-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* Calendario */
.res-calendar-wrap {
  background: var(--paper, #fff);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--line, #e0d6cc);
  overflow: hidden;
}
.res-calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.res-cal-month-label {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
  text-align: center;
}
.res-cal-today-btn {
  margin-left: auto;
  font-size: 0.8rem;
}
.res-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-secondary, #8a8078);
  margin-bottom: 2px;
}
.res-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.res-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.75rem;
  cursor: pointer;
  position: relative;
  color: var(--ink, #3a3024);
  font-weight: 500;
  padding: 6px 0;
  transition: background 0.15s ease, transform 0.12s ease;
}
.res-cal-day:hover {
  background: var(--paper-alt, #f5f0eb);
  transform: scale(1.08);
}
.res-cal-day:active {
  transform: scale(0.95);
}
.res-cal-day.other-month {
  opacity: 0.3;
}
.res-cal-day.today {
  border: 2px solid var(--accent, #d44);
}
.res-cal-day.selected {
  background: var(--accent, #d44);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.25);
}
.res-cal-day.has-reservations::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #d44);
}
.res-cal-day.selected.has-reservations::after {
  background: #fff;
}

/* Filtri */
.res-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.res-search-wrap {
  flex: 1;
  min-width: 120px;
  position: relative;
}
.res-search-input {
  width: 100%;
}
.res-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e0d6cc);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.08);
  z-index: 9990;
  max-height: 260px;
  overflow-y: auto;
}
.res-search-results.hidden { display: none; }
.res-search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line, #e0d6cc);
  gap: 8px;
  transition: background 0.15s ease;
}
.res-search-item:last-child {
  border-bottom: none;
}
.res-search-item:hover {
  background: var(--paper-alt, #f5f0eb);
}
.res-search-item-name {
  font-weight: 600;
}
.res-search-item-phone {
  font-size: 0.75rem;
  color: var(--ink-secondary, #8a8078);
}
.res-search-new {
  padding: 10px 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent, #d44);
  cursor: pointer;
  border-top: 1px solid var(--line, #e0d6cc);
}
.res-search-new:hover {
  background: var(--paper-alt, #f5f0eb);
}
.res-add-btn {
  white-space: nowrap;
}

/* Lista prenotazioni */
.res-list-container {
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 120px;
  max-height: calc(100vh - 340px);
}
.res-list-empty {
  text-align: center;
  padding: 24px;
  color: var(--ink-secondary, #8a8078);
  font-size: 0.85rem;
}
.res-list-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line, #e0d6cc);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  border-radius: 8px;
  margin: 0 -4px;
  padding-left: 14px;
  padding-right: 14px;
}
@media (hover: hover) {
  .res-list-row:hover {
    background: var(--paper-alt, rgba(255,255,255,.05));
    transform: translateX(2px);
  }
}
.res-list-row:active {
  background: var(--paper-alt, rgba(255,255,255,.05));
}
.res-list-row:last-child {
  border-bottom: none;
}
.res-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}
.res-list-date {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-muted, #888);
  background: var(--bg-soft, #f0ebe3);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
}
.res-list-time {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent, #d44);
}
.res-list-name {
  font-weight: 600;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.res-list-notes {
  cursor: help;
  font-size: 1rem;
}
.res-list-covers {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-secondary, #8a8078);
}
.res-list-table {
  font-size: 0.85rem;
  color: var(--ink-secondary, #8a8078);
}
.res-status-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
  letter-spacing: 0.02em;
}
.res-status-badge.status-confirmed {
  background: var(--ok-bg, #e8f5e9);
  color: var(--ok-text, #2e7d32);
}
.res-status-badge.status-seated {
  background: #e3f2fd;
  color: #1565c0;
}
.res-status-badge.status-cancelled_restaurant {
  background: var(--danger-bg, #fce4ec);
  color: var(--danger, #c62828);
}
.res-status-badge.status-cancelled_customer {
  background: #fff3e0;
  color: #e65100;
}
.res-status-badge.status-no_show {
  background: #f5f5f5;
  color: #757575;
}
.res-status-badge.status-completed {
  background: #e8eaf6;
  color: #283593;
}
html.dark-mode .res-status-badge.status-completed {
  background: #1a1a3a;
  color: #7986cb;
}
html.dark-mode .res-status-badge.status-seated {
  background: #1a2a3a;
  color: #64b5f6;
}
html.dark-mode .res-status-badge.status-cancelled_customer {
  background: #3a2a1a;
  color: #ffb74d;
}
html.dark-mode .res-status-badge.status-no_show {
  background: #2a2a2a;
  color: #aaa;
}
.res-list-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.res-list-actions .ghost-btn {
  font-size: 0.7rem;
  padding: 2px 6px;
}

/* Form modale */
.res-form-card {
  max-width: 540px;
  width: 95vw;
}
.res-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  position: relative;
}
.res-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.res-form-field > span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-secondary, #8a8078);
}
.res-form-field-full {
  grid-column: 1 / -1;
}
.res-form-status {
  font-size: 0.8rem;
  color: var(--danger, #c62828);
  min-height: 1.2em;
  margin-top: 4px;
}

/* ═══ Covers by type popup ═══ */
.res-covers-popup {
  position: fixed;
  z-index: 9999;
}
.res-covers-popup.hidden {
  display: none;
}
.res-covers-popup-content {
  background: var(--paper-alt, #2a2520);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 12px 32px rgba(0, 0, 0, 0.12);
}
.res-covers-popup-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink, #e8e0d6);
  margin-bottom: 10px;
}
.res-covers-popup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.res-covers-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.res-covers-popup-row-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #e8e0d6);
  flex: 1;
}
.res-covers-popup-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-covers-popup-row-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.25);
  color: var(--ink, #e8e0d6);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.res-covers-popup-row-btn:hover {
  border-color: var(--accent, #d44);
  background: rgba(255,255,255,.06);
  transform: scale(1.08);
}
.res-covers-popup-row-btn:active {
  background: rgba(255,255,255,.1);
  transform: scale(0.95);
}
.res-covers-popup-row-count {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  color: var(--ink, #e8e0d6);
}
.res-covers-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.res-covers-popup-total {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink, #e8e0d6);
}
.res-covers-popup-confirm-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent, #5B9E9E);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.res-covers-popup-confirm-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.3);
}
.res-covers-popup-confirm-btn:active {
  transform: scale(0.95);
}

.res-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.res-form-head h4 { margin: 0; }
.res-form-head-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.res-form-date-covers-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  position: relative;
}
.res-form-sala-tavolo-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Griglia orari — 2 colonne (ora intera | mezz'ora) */
.res-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  padding: 4px 0;
}
.res-time-slot {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line, #e0d6cc);
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink, #3a3024);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.res-time-slot:hover {
  border-color: var(--accent, #d44);
  background: var(--paper, #fff);
  transform: translateY(-1px);
}
.res-time-slot:active {
  transform: translateY(0);
}
.res-time-slot.selected {
  background: var(--accent, #d44);
  color: #fff;
  border-color: var(--accent, #d44);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.2);
}

/* Griglia tavoli */
.res-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
  padding: 4px 0;
}
.res-table-btn {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line, #e0d6cc);
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink, #3a3024);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.res-table-btn:hover {
  border-color: var(--accent, #d44);
  background: var(--paper, #fff);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--shadow-color);
}
.res-table-btn:active {
  transform: translateY(0);
}
.res-table-btn.selected {
  background: var(--accent, #d44);
  color: #fff;
  border-color: var(--accent, #d44);
  box-shadow: 0 2px 8px rgba(186, 43, 43, 0.2);
}
.res-table-btn.no-table {
  font-style: italic;
  opacity: 0.7;
}
.res-table-btn.occupied {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
  border-color: var(--line, #e0d6cc);
  background: var(--paper-alt, #f5f0eb);
}

/* Autocomplete suggerimenti */
.res-customer-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e0d6cc);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.08);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  grid-column: 1 / -1;
}
.res-customer-suggestions.hidden { display: none; }
.res-customer-suggestion {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--line, #e0d6cc);
}
.res-customer-suggestion:last-child {
  border-bottom: none;
}
.res-customer-suggestion:hover {
  background: var(--paper-alt, #f5f0eb);
}

/* Config prenotazioni */
.res-config-details {
  margin-top: 8px;
}
.res-config-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-secondary, #8a8078);
  padding: 6px 0;
}
.res-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
  align-items: end;
}
.res-config-grid > label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}
.res-config-grid .text-input {
  width: 100%;
  box-sizing: border-box;
}
.res-config-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 6px 0;
  font-size: 0.82rem !important;
}
.res-config-toggle > span:first-child {
  font-weight: 500;
  color: var(--ink, #3a3530);
}
.res-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.res-toggle-slider {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 22px;
  background: rgba(255,255,255,.15);
  border-radius: 11px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
}
.res-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #999;
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.res-toggle-input:checked + .res-toggle-slider {
  background: var(--accent, #ff5c39);
  box-shadow: 0 0 8px rgba(186, 43, 43, 0.25);
}
.res-toggle-input:checked + .res-toggle-slider::after {
  transform: translateX(18px);
  background: #fff;
}

/* Riepilogo giorno */
.res-day-summary {
  font-size: 0.8rem;
  color: var(--ink-secondary, #8a8078);
  padding: 8px 12px 8px 36px;
  background: var(--paper, #fff);
  border-radius: 10px;
  border: 1px solid var(--line, #e0d6cc);
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.res-day-summary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--shadow-color);
}
.res-day-summary::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ba2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .7;
}
.res-day-summary::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8078' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .5;
}
.res-day-summary:active {
  background: var(--paper-alt, rgba(255,255,255,.05));
  border-color: var(--accent, #5B9E9E);
}

/* Overlay lista prenotazioni */
.res-list-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg, #1a1a1a);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.res-list-overlay-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.6rem;
  gap: 0.3rem;
  overflow: hidden;
  border-radius: 0;
}
.res-list-overlay-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-list-overlay .res-list-container {
  flex: 1;
  overflow-y: auto;
}
.res-filter-select {
  width: auto;
  min-width: 80px;
  font-size: 0.75rem;
  padding: 4px 6px;
}
.res-action-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.res-search-wrap {
  position: relative;
}
.res-quick-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--accent, #5B9E9E);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}
.res-quick-search {
  flex: 1;
  font-size: 0.8rem;
  padding: 6px 8px 6px 32px;
}
.res-day-summary-count {
  font-weight: 700;
  color: var(--ink, #3a3024);
}
.res-day-summary-covers {
  font-weight: 600;
}

/* Grafico distribuzione oraria */
.res-chart-section {
  background: var(--paper, #fff);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--line, #e0d6cc);
  transition: box-shadow 0.18s ease;
}
.res-chart-section:hover {
  box-shadow: 0 2px 8px var(--shadow-color);
}
.res-chart-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-secondary, #8a8078);
  margin: 0 0 8px;
}
.res-hourly-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
  padding-top: 4px;
}
.res-chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: flex-end;
}
.res-chart-bar {
  width: 100%;
  max-width: 28px;
  background: var(--accent, #d44);
  border-radius: 4px 4px 0 0;
  min-height: 0;
  transition: height 0.3s ease, opacity 0.15s ease, transform 0.12s ease;
  position: relative;
}
.res-chart-bar:hover {
  opacity: 0.85;
  transform: scaleY(1.03);
  transform-origin: bottom;
}
.res-chart-bar-count {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink, #3a3024);
  line-height: 1;
}
.res-chart-bar-label {
  font-size: 0.6rem;
  color: var(--ink-muted, #888);
  line-height: 1;
}
.res-chart-empty {
  text-align: center;
  padding: 16px;
  color: var(--ink-muted, #888);
  font-size: 0.8rem;
}

/* Badge prenotazione su tavolo */
.table-reservation-badge {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 243, 224, 0.97) 0%, rgba(255, 224, 178, 0.97) 100%);
  border: 1px solid rgba(255, 152, 0, 0.26);
  padding: 3px 5px;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(120, 62, 10, 0.12), 0 1px 3px rgba(120, 62, 10, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.res-badge-time {
  font-size: 0.68rem;
  font-weight: 800;
  color: #e65100;
  flex-shrink: 0;
}
.res-badge-name {
  font-size: 0.58rem;
  font-weight: 600;
  color: #bf360c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.res-badge-covers {
  font-size: 0.56rem;
  font-weight: 700;
  color: #e65100;
  flex-shrink: 0;
  opacity: 0.8;
}
.table-reservation-badge.res-badge-imminent {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
  border-color: rgba(244, 67, 54, 0.38);
  animation: resBadgePulse 2s ease-in-out infinite;
}
@keyframes resBadgePulse {
  0%, 100% { border-color: rgba(244, 67, 54, 0.38); }
  50% { border-color: rgba(255, 152, 0, 0.38); }
}
html.dark-mode .table-reservation-badge {
  background: linear-gradient(135deg, rgba(61, 42, 16, 0.98) 0%, rgba(74, 48, 21, 0.98) 100%);
  border-color: rgba(255, 152, 0, 0.26);
}
html.dark-mode .res-badge-time {
  color: #ffb74d;
}
html.dark-mode .res-badge-name {
  color: #ffe0b2;
}
html.dark-mode .res-badge-covers {
  color: #ffb74d;
}
html.dark-mode .table-reservation-badge.res-badge-imminent {
  background: linear-gradient(135deg, rgba(74, 48, 21, 0.98) 0%, rgba(93, 58, 24, 0.98) 100%);
  border-color: rgba(244, 67, 54, 0.34);
}

/* Desktop: offset overlay per sidebar */
@media (min-width: 762px) {
  .res-list-overlay {
    left: 82px;
  }
}

/* Mobile responsive */
@media (max-width: 700px) {
  .res-main-section {
    grid-template-columns: 1fr;
  }
  .res-left-panel {
    position: static;
  }
  .res-list-container {
    max-height: 40vh;
  }
  .res-list-overlay .res-list-container {
    max-height: none;
  }
  .res-calendar-grid {
    gap: 1px;
  }
  .res-cal-day {
    font-size: 0.7rem;
    border-radius: 6px;
  }
  .res-list-row {
    padding: 8px 6px;
  }
  .res-list-phone {
    display: none;
  }
  .res-form-grid {
    grid-template-columns: 1fr;
  }
  .res-form-field-full {
    grid-column: 1;
  }
}

/* ─── Listini Prezzi ─── */

/* Topbar badge */
.topbar-listino-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.topbar-listino-badge.listino-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Order listino badge (inline in turn head / banco header) */
.order-listino-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
  margin-left: auto;
}
.order-listino-badge svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.order-listino-badge:hover {
  color: var(--accent, #5B9E9E);
}

/* Listino dropdown */
.listino-dropdown {
  position: fixed;
  z-index: 2000;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  min-width: 160px;
  padding: 4px 0;
}
.listino-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--ink);
}
.listino-dropdown-item:hover {
  background: var(--bg);
}
.listino-dropdown-item.active {
  font-weight: 700;
  color: var(--accent);
}
.listino-dropdown-item .listino-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}
.listino-dropdown-item.active .listino-dot {
  background: var(--accent);
}

/* Listini settings cards */
.listini-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.listini-card:hover {
  border-color: var(--accent);
}
.listini-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.listini-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.listini-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.listini-card-badge.on { background: #e8f5e9; color: #2e7d32; }
.listini-card-badge.off { background: #fbe9e7; color: #c62828; }
.listini-card-channels {
  font-size: 0.75rem;
  color: var(--ink-secondary);
  margin-top: 4px;
}
.listini-card-slots {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.listini-add-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: none;
  color: var(--ink-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.listini-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Listino modal */
.listino-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
}
.listino-modal-card {
  background: var(--paper);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
}
.listino-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.listino-modal-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
}
.listino-modal-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0;
  line-height: 1;
}
.listino-modal-field {
  margin-bottom: 10px;
}
.listino-modal-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink-secondary);
}
.listino-modal-field input[type="text"],
.listino-modal-field input[type="number"] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--input-bg);
}
.listino-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.listino-slot-row input[type="number"] {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
  font-size: 0.85rem;
}
.listino-slot-days {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.listino-slot-day {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listino-slot-day.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.listino-slot-remove {
  border: none;
  background: none;
  color: var(--danger);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
}
.listino-channels-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.listino-channels-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}
.listino-delete-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
}

/* GAS Listino & IVA badge styles are in .gas-header-icon above */

/* GAS Listino modal (per-group pricing) */
.gas-listino-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
}
.gas-listino-modal-card {
  background: var(--paper);
  border-radius: 12px;
  width: 95%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
}
.gas-listino-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.gas-listino-modal-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
}
.gas-listino-modal-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0;
  line-height: 1;
}
.gas-listino-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.gas-listino-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-secondary);
  white-space: nowrap;
}
.gas-listino-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-light);
}
.gas-listino-table td:first-child {
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gas-listino-table .gas-listino-price-input {
  width: 70px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: right;
  font-size: 0.85rem;
  background: var(--input-bg);
}
.gas-listino-table .gas-listino-base-price {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   Caller ID — pannello notifica chiamata
   ═══════════════════════════════════════════════════════════════ */

.caller-id-overlay {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.caller-id-card {
  pointer-events: auto;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e0d6cc);
  border-left: 4px solid var(--accent, #5B9E9E);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transform-origin: top right;
}

.caller-id-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.caller-id-phone-icon {
  font-size: 1.15rem;
  color: var(--accent, #5B9E9E);
  animation: callerIdRing 0.6s ease-in-out 2;
}

@keyframes callerIdRing {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(4deg); }
}

.caller-id-phone {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink, #3a3024);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

.caller-id-close {
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink-muted, #888);
  padding: 0;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
@media (hover: hover) {
  .caller-id-close:hover {
    background: rgba(229, 57, 53, 0.08);
    color: var(--danger, #e53935);
    transform: scale(1.08);
  }
}
.caller-id-close:active {
  transform: scale(0.92);
}

.caller-id-customer {
  padding: 2px 14px 8px;
}

.caller-id-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink, #3a3024);
  letter-spacing: -0.2px;
}

.caller-id-unknown {
  font-size: 0.9rem;
  color: var(--ink-muted, #888);
  font-style: italic;
}

.caller-id-stats {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.caller-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(186, 43, 43, 0.08);
  color: var(--accent, #5B9E9E);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s ease;
}

.caller-id-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 14px;
}

.caller-id-action-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, #5B9E9E);
  color: #fff;
  text-align: center;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .caller-id-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(186, 43, 43, 0.25);
    filter: brightness(1.06);
  }
}
.caller-id-action-btn:active {
  transform: scale(0.97);
  box-shadow: none;
}
.caller-id-action-btn.caller-id-action-secondary {
  background: var(--paper-alt, #f5f0eb);
  color: var(--ink, #3a3024);
  border: 1px solid var(--line, #e0d6cc);
}
@media (hover: hover) {
  .caller-id-action-btn.caller-id-action-secondary:hover {
    background: var(--line, #e0d6cc);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
}

/* Animazioni slide-in/out — cubic-bezier raffinato */
@keyframes callerIdSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes callerIdSlideOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(40px) scale(0.96); }
}

.caller-id-slide-in {
  animation: callerIdSlideIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.caller-id-slide-out {
  animation: callerIdSlideOut 0.28s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  pointer-events: none;
}

/* Dark mode */
html.dark-mode .caller-id-card {
  background: var(--bg, #1e1e1e);
  border-color: var(--line, #333);
  border-left-color: var(--accent, #5B9E9E);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.3);
}
html.dark-mode .caller-id-pill {
  background: rgba(186, 43, 43, 0.18);
}
html.dark-mode .caller-id-action-btn.caller-id-action-secondary {
  background: var(--paper-alt, #2a2a2a);
  border-color: var(--line, #444);
}

/* Mobile */
@media (max-width: 480px) {
  .caller-id-overlay {
    right: 8px;
    left: 8px;
    top: 50px;
  }
  .caller-id-card {
    width: auto;
    max-width: 100%;
  }
}

/* ── Call Log — entries rendered via JS ── */
.calllog-entry {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--paper-alt, #f9f6f2);
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
@media (hover: hover) {
  .calllog-entry:hover {
    background: var(--bg, #fff);
    border-color: var(--line, #e0d6cc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
  }
}
.calllog-entry:active {
  transform: scale(0.99);
}

.calllog-entry-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.calllog-status-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
}
.calllog-status-icon.found {
  background: rgba(76, 175, 80, 0.10);
  color: var(--success, #4caf50);
}
.calllog-status-icon.unknown {
  background: rgba(158, 158, 158, 0.10);
  color: var(--ink-muted, #9e9e9e);
}

.calllog-info {
  flex: 1;
  min-width: 0;
}

.calllog-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink, #3a3024);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.calllog-name-unknown {
  color: var(--ink-muted, #9e9e9e);
  font-style: italic;
  font-weight: 500;
}

.calllog-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent, #5B9E9E);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calllog-phone {
  font-size: 0.78rem;
  color: var(--ink-muted, #9e9e9e);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

.calllog-time {
  text-align: right;
  white-space: nowrap;
  font-size: 0.76rem;
  color: var(--ink-muted, #9e9e9e);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.calllog-detail {
  margin-top: 0.5rem;
  padding: 0.5rem 0 0.2rem 36px;
  border-top: 1px solid var(--line, #e0d6cc);
  font-size: 0.78rem;
}

.calllog-detail-spending {
  color: var(--ink, #3a3024);
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.calllog-detail-call {
  padding: 0.15rem 0;
  color: var(--ink-muted, #9e9e9e);
  font-variant-numeric: tabular-nums;
}

.calllog-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-muted, #9e9e9e);
  font-size: 0.92rem;
}
.calllog-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

html.dark-mode .calllog-entry {
  background: var(--paper-alt, #252525);
}
html.dark-mode .calllog-entry:hover {
  background: var(--bg-alt, #2a2a2a);
  border-color: var(--line, #444);
}

/* ── Call Log — mini table in settings panel ── */
.calllog-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.calllog-mini-table thead tr {
  text-align: left;
  border-bottom: 2px solid var(--line, #e0d6cc);
}
.calllog-mini-table th {
  padding: 0.35rem 0.4rem;
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-muted, #9e9e9e);
}
.calllog-mini-table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--line, #e0d6cc);
}
.calllog-mini-table tbody tr {
  transition: background 0.15s ease;
}
@media (hover: hover) {
  .calllog-mini-table tbody tr:hover {
    background: rgba(186, 43, 43, 0.03);
  }
}
.calllog-mini-found {
  color: var(--success, #4caf50);
}
.calllog-mini-unknown {
  color: var(--ink-muted, #9e9e9e);
}

/* Takeaway km badge */
.takeaway-km-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--paper-alt, #f5f0eb);
  border: 1px solid var(--line, #e0d6cc);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink, #3a3024);
}
.takeaway-km-badge svg {
  flex-shrink: 0;
  color: var(--accent, #d44);
}
.takeaway-km-badge.hidden { display: none; }

/* Google Maps Autocomplete — legacy widget fallback */
.pac-container {
  z-index: 100000 !important;
  font-family: inherit;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  border: 1px solid var(--border, #ddd);
  margin-top: 2px;
}

/* Google Maps Autocomplete dropdown (new data-only API) */
.gmaps-ac-dropdown {
  position: fixed;
  z-index: 100000;
  background: var(--paper, #fff);
  color: var(--ink, #1f1a16);
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.92em;
}
.gmaps-ac-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-warm, rgba(0,0,0,.06));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmaps-ac-item:last-child { border-bottom: none; }
.gmaps-ac-item:hover,
.gmaps-ac-item.gmaps-ac-active {
  background: var(--paper-warm, rgba(186,43,43,.06));
  color: var(--accent, #5B9E9E);
}

/* Topbar Help Overlay */
.topbar-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(4px);
}
.topbar-help-overlay[hidden] { display: none; }
.topbar-help-card {
  width: min(480px, 100%);
  max-height: min(85vh, 780px);
  overflow: auto;
  border: 1px solid var(--border, #ddd);
  border-radius: 22px;
  background: var(--paper, #fff);
  color: var(--ink, #1f1a16);
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  font-family: inherit;
}
.topbar-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line, #ddd);
}
.topbar-help-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.topbar-help-close {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--line, #ddd); border-radius: 50%;
  background: var(--btn-bg, #f5f5f5); color: var(--ink, #333);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.topbar-help-body { padding: 14px 20px 20px; display: grid; gap: 2px; }
.topbar-help-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px; border-radius: 12px; transition: background .15s;
}
.topbar-help-row:hover { background: rgba(0,0,0,.03); }
.topbar-help-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-bg, rgba(186,43,43,.08)); color: var(--ink-secondary, #6b5040);
  margin-top: 2px;
}
.topbar-help-row strong { display: block; font-size: 14px; margin-bottom: 3px; }
.topbar-help-row p { margin: 0; color: var(--ink-secondary, #6b5040); font-size: 13px; line-height: 1.4; }
@media (max-width: 680px) {
  .topbar-help-card { border-radius: 18px; }
  .topbar-help-head, .topbar-help-body { padding-left: 14px; padding-right: 14px; }
}
/* Dark mode */
[data-theme="dark"] .topbar-help-card { background: var(--paper, #2a2420); }
[data-theme="dark"] .topbar-help-row:hover { background: rgba(255,255,255,.04); }

/* ══════════════════════════════════════
   Unified Guide Overlays
   ══════════════════════════════════════ */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: guideBackdropIn 0.2s ease-out;
}

.guide-overlay.visible {
  display: flex;
}

@keyframes guideBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.guide-card {
  background: var(--paper, #fffdf8);
  color: var(--ink, #1f1a16);
  border-radius: 14px;
  border: 1px solid var(--border-warm, #d6cec4);
  max-width: 420px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: guideCardIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes guideCardIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

html.dark-mode .guide-card {
  background: var(--paper, #242019);
  border-color: var(--border-warm, #3d3630);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-warm, #d6cec4);
  flex-shrink: 0;
}

.guide-title {
  margin: 0;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent, #5B9E9E);
}

.guide-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-secondary, #6b5040);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.guide-close:hover {
  border-color: var(--border-warm, #d6cec4);
  background: var(--paper-alt, #f5efe6);
}

.guide-close:active {
  transform: scale(0.88);
  border-color: var(--accent, #5B9E9E);
  color: var(--accent, #5B9E9E);
}

html.dark-mode .guide-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.guide-body {
  padding: 16px;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink, #1f1a16);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-warm, #d6cec4) transparent;
}

html.dark-mode .guide-body {
  color: var(--ink, #e8e0d4);
}

.guide-body b,
.guide-body strong {
  color: var(--ink, #1f1a16);
  font-weight: 800;
}

html.dark-mode .guide-body b,
html.dark-mode .guide-body strong {
  color: var(--ink, #f5eee7);
}

.guide-body .guide-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-warm, #d6cec4);
}

.guide-body .guide-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.guide-body .guide-section:first-child {
  padding-top: 0;
}

.guide-body ol {
  padding-left: 18px;
  margin: 0;
}

.guide-body ol li {
  margin-bottom: 6px;
  padding-left: 2px;
}

.guide-body ol li:last-child {
  margin-bottom: 0;
}

.guide-body .guide-example {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--ink-secondary, #6b5040);
}

html.dark-mode .guide-body .guide-example {
  color: rgba(245, 238, 231, 0.7);
}

/* Stellina preferiti su piatti */
.dish-fav-star {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--line-strong, #ccc);
  opacity: 0.35;
  cursor: pointer;
  z-index: 5;
  padding: 6px 8px;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, opacity 0.15s;
}

.dish-fav-star.fav-active {
  color: #e6a817;
  opacity: 1;
}

.dish-fav-star.fav-pressing {
  animation: favStarPulse 2s ease-in forwards;
}

@keyframes favStarPulse {
  0%   { transform: scale(1); color: var(--line-strong, #ccc); }
  50%  { transform: scale(1.4); color: #e6a817; }
  100% { transform: scale(1.2); color: #e6a817; opacity: 1; }
}

.dish-btn,
.banco-dish-btn {
  position: relative;
}

/* Tab preferiti */
.section-tab-favorites,
.banco-section-tab.section-tab-favorites {
  background: #fff8e1;
  border-color: #e6a817;
  color: #b8860b;
}

.section-tab-favorites.active,
.banco-section-tab.section-tab-favorites.active {
  background: #e6a817;
  color: #fff;
  border-color: #c78f00;
}

/* Giacenze: non-fullscreen → card scrolls natively, no special layout needed */
#printerModal:not(.summary-fullscreen) #settingsStockView .settings-section {
  overflow-y: visible;
}

/* Toggle blocca giacenza 0 */
.settings-stock-block-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e0d5c8);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

/* Lista completa articoli giacenze */
.settings-stock-all-title {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

.settings-stock-all-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stock-all-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e0d5c8);
  border-radius: 8px;
}

.stock-all-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.stock-all-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-all-section {
  font-size: 0.75rem;
  color: var(--ink-secondary);
}

.stock-all-input {
  width: 64px;
  flex-shrink: 0;
  text-align: center;
  padding: 0.35rem 0.3rem;
  border: 1px solid var(--line, #ccc);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--bg, #faf6f0);
  color: var(--ink);
}

.stock-all-input:focus {
  border-color: var(--accent, #3b8a7a);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 138, 122, 0.2);
}

.stock-all-input.stock-all-saved {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.08);
  transition: border-color 0.2s, background 0.2s;
}

/* Flash leggero riga appena aggiunta */
@keyframes lineFlash {
  0%   { background-color: rgba(213, 156, 95, 0.35); }
  100% { background-color: transparent; }
}

.line-flash {
  animation: lineFlash 0.8s ease-out;
}