/* --- SCALA TIPOGRAFICA STANDARD ---
 *
 * Titolo Pagina Principale (es. "Menu", "Conti Aperti"):
 * - <h1 id="page-title">
 * - Classi: text-2xl font-bold text-zinc-700
 *
 * Titolo di Sezione (es. "Riepilogo Generale", "Prodotti più Venduti"):
 * - <h2>, <h3>
 * - Classi: text-xl font-bold text-zinc-800
 *
 * Testo Principale / Nomi Prodotti:
 * - <p>, <span>
 * - Classi: text-base font-semibold text-zinc-800
 *
 * Descrizioni / Testo Secondario:
 * - <p>, <small>
 * - Classi: text-sm text-zinc-600
 *
 * Testo Ausiliario / Didascalie (es. "minimo 6 caratteri"):
 * - <small>
 * - Classi: text-xs text-zinc-500
 *
 * ------------------------------------ */

/* === INIZIO MODIFICA: Fix Overflow Orizzontale === */
/*
 * Applica box-sizing "border-box" a tutti gli elementi.
 * Questo dice al browser di includere padding e bordi
 * DENTRO la larghezza specificata (es. width: 100%),
 * invece di AGGIUNGERLI.
 *
 * Questo è il fix standard per eliminare le barre
 * di scorrimento orizzontali indesiderate.
 */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* === FINE MODIFICA === */

html, body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}
body { font-family: 'Inter', sans-serif; }

/* Spazio extra quando la card mostra i controlli di modifica (evita sovrapposizioni). */
.product-card.has-edit-controls > div.p-3 {
    padding-bottom: 3rem;
}

.product-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    will-change: transform;
}

/* Effetto hover/active solo su desktop (mouse/trackpad). Su mobile il "tap" può attivare hover e far uscire la card dai margini. */
@media (hover: hover) and (pointer: fine) {
  .product-card:not(.opacity-50):hover {
      transform: scale(1.05);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0,  0, 0, 0.05);
  }
  .product-card:not(.opacity-50):active {
      transform: scale(0.97);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }
}

/* === SEZIONI COLLASSABILI === */
.section-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
}

.section-content:not(.collapsed) {
    max-height: 10000px !important;
    opacity: 1 !important;
}

.section-toggle {
    cursor: pointer;
}

.section-toggle i[data-icon] {
    will-change: transform;
}

/* Icona ruota quando la sezione è aperta */
.section-toggle[aria-expanded="true"] i[data-icon] {
    transform: rotate(90deg) !important;
}

/* Icona normale quando la sezione è chiusa */
.section-toggle[aria-expanded="false"] i[data-icon] {
    transform: rotate(0deg) !important;
}
/* === FINE SEZIONI COLLASSABILI === */

.table-object {
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    -webkit-user-select: none; user-select: none;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 12px; /* Bordi più arrotondati */
    border: 1px solid; /* Bordo definito dalle variabili */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    background-image: linear-gradient(to bottom, var(--table-bg-from, #9ca3af), var(--table-bg-to, #6b7280));
    border-color: var(--table-border, #4b5563);
    will-change: transform;
}

.table-main-content {
    font-size: 1.8rem; /* Numero del tavolo più grande e leggibile */
    font-weight: 800; /* Più grassetto */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.table-info {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 5px;
    display: flex;
    gap: 10px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.25); /* Sfondo leggermente più scuro per contrasto */
    padding: 3px 8px;
    border-radius: 9999px; /* Forma a "pillola" */
    backdrop-filter: blur(2px); /* Effetto vetro smerigliato */
    -webkit-backdrop-filter: blur(2px); /* Safari */
}

.covers-info i {
    margin-right: 4px;
    opacity: 0.9;
}

/* Colori e gradienti per ogni stato */
.table-object.free {
    --table-bg-from: #34d399; /* emerald-400 */
    --table-bg-to: #10b981;   /* emerald-500 */
    --table-border: #059669; /* emerald-600 */
}
.table-object.occupied {
    --table-bg-from: #f87171; /* red-400 */
    --table-bg-to: #ef4444;   /* red-500 */
    --table-border: #dc2626; /* red-600 */
}
.table-object.ready-to-serve {
    --table-bg-from: #fde047; /* yellow-300 */
    --table-bg-to: #facc15;   /* yellow-400 */
    --table-border: #eab308; /* yellow-500 */
    color: #422006; /* Testo scuro per migliore leggibilità sul giallo */
    text-shadow: none;
}
.table-object.ready-and-waiting {
    --table-bg-from: #fb923c; /* orange-400 */
    --table-bg-to: #f97316;   /* orange-500 */
    --table-border: #ea580c; /* orange-600 */
}
.table-object.waiting-next-course {
    --table-bg-from: #60a5fa; /* blue-400 */
    --table-bg-to: #3b82f6;   /* blue-500 */
    --table-border: #2563eb; /* blue-600 */
}

/* Effetto al passaggio del mouse potenziato */
.table-object:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.table-object.dragging {
    z-index: 1000;
    cursor: grabbing;
    transform: translateY(-8px) scale(1.15);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    border: 2px solid #6366f1; /* Colore viola per evidenziare il trascinamento */
}

.edit-map-mode .table-object {
    cursor: grab;
    touch-action: none;
}

.kds-column {
    height: calc(100vh - 10rem);
    overflow-y: auto;
}
/* === MODIFICA KDS: Rimozione Bordo Laterale Ticket === */
.kds-ticket { 
    transition: background-color 0.3s ease, transform 0.2s ease; 
    animation: kds-ticket-in 0.4s ease forwards; 
    border-left: none; /* RIMOSSO IL BORDO LATERALE */
}
@keyframes kds-ticket-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* === INIZIO NUOVI STILI PER TITOLI COLONNE KDS === */
.kds-column-title {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;    /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    /* MODIFICA: Testo nero invece di bianco */
    color: #18181b; 
    
    border-top-left-radius: 0.5rem; /* rounded-lg */
    border-top-right-radius: 0.5rem;
    background-image: linear-gradient(to bottom, var(--col-bg-from), var(--col-bg-to));
    /* MODIFICA KDS: Rimozione Bordo Inferiore Colonna per look più pulito */
    border-bottom: none; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* MODIFICA: Rimossa ombra testo per pulizia su testo scuro */
    text-shadow: none;
}

.kds-column-title.status-new {
    --col-bg-from: #60a5fa; /* blue-400 */
    --col-bg-to: #3b82f6;   /* blue-500 */
    --col-border: #2563eb; /* blue-600 */
}

.kds-column-title.status-preparing {
    --col-bg-from: #fb923c; /* orange-400 */
    --col-bg-to: #f97316;   /* orange-500 */
    --col-border: #ea580c; /* orange-600 */
}

.kds-column-title.status-ready {
    --col-bg-from: #fde047; /* yellow-300 */
    --col-bg-to: #facc15;   /* yellow-400 */
    --col-border: #eab308; /* yellow-500 */
    color: #18181b; /* Forzato a nero */
    text-shadow: none;
}
/* === FINE NUOVI STILI PER TITOLI COLONNE KDS === */


/* === MODIFICA INIZIO: Nuovi stili per KDS Ticket con gradienti e testo nero === */
/* RIMOSSI border-left-color da tutti gli stati KDS */
.kds-ticket.status-new {
    --table-bg-from: #60a5fa; /* blue-400 */
    --table-bg-to: #3b82f6;   /* blue-500 */
    --table-border: #2563eb; /* blue-600 */
    background-image: linear-gradient(to bottom, var(--table-bg-from), var(--table-bg-to));
    /* border-left-color: var(--table-border); RIMOSSO */
    color: #18181b; /* Testo scuro */
}

.kds-ticket.status-preparing {
    --table-bg-from: #fb923c; /* orange-400 */
    --table-bg-to: #f97316;   /* orange-500 */
    --table-border: #ea580c; /* orange-600 */
    background-image: linear-gradient(to bottom, var(--table-bg-from), var(--table-bg-to));
    /* border-left-color: var(--table-border); RIMOSSO */
    color: #18181b; /* Testo scuro */
}

.kds-ticket.status-ready {
    --table-bg-from: #fde047; /* yellow-300 */
    --table-bg-to: #facc15;   /* yellow-400 */
    --table-border: #eab308; /* yellow-500 */
    background-image: linear-gradient(to bottom, var(--table-bg-from), var(--table-bg-to));
    /* border-left-color: var(--table-border); RIMOSSO */
    color: #18181b;
}

/* Override dei colori testo per leggibilità sui nuovi sfondi */
.kds-ticket.status-new h3,
.kds-ticket.status-preparing h3,
.kds-ticket.status-new .text-zinc-800,
.kds-ticket.status-preparing .text-zinc-800,
.kds-ticket.status-new .text-zinc-600,
.kds-ticket.status-preparing .text-zinc-600,
.kds-ticket.status-new .text-emerald-700,
.kds-ticket.status-preparing .text-emerald-700 {
    color: #18181b !important;
}

.kds-ticket.status-ready h3,
.kds-ticket.status-ready .text-zinc-800,
.kds-ticket.status-ready .text-zinc-600,
.kds-ticket.status-ready .text-emerald-700 {
    color: #18181b !important;
}

/* Stili specifici per i pulsanti dentro i KDS Ticket */
.kds-ticket .kds-action-prepare,         /* "Prepara" */
.kds-ticket .kds-action-ready,          /* "Tutto Pronto" */
.kds-ticket .kds-action-partial-ready { /* "Pronto Parziale" */
    background-image: none !important;
    background-color: var(--btn-neutral-bg) !important;
    color: #111827 !important;
    border-color: var(--btn-neutral-bg-hover) !important;
}
.kds-ticket .kds-action-prepare:hover,
.kds-ticket .kds-action-ready:hover,
.kds-ticket .kds-action-partial-ready:hover {
    background-color: var(--btn-neutral-bg-hover) !important;
}


.kds-ticket .kds-timer-total,
.kds-ticket .kds-timer-phase {
    color: #18181b !important;
    font-weight: 700;
}

.kds-ticket .kds-timer-total i,
.kds-ticket .kds-timer-phase i {
    color: #4b5563 !important;
}
/* === MODIFICA FINE === */

.kds-ticket .flash { animation: flash-bg 1s ease; }
@keyframes flash-bg { 0% { background-color: #fefce8; } 100% { background-color: white; } }
.kds-timer-total.is-warning { color: #f97316; }
.kds-timer-total.is-critical { color: #dc2626; animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.offcanvas-visible { transform: translateY(0) !important; }
/* Aggiungi questa regola per nascondere l'area di stampa di default */
.print-area {
    display: none;
}

@media print {
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 1rem; }
    .no-print { display: none; }
}

#connection-indicator, #mobile-connection-indicator {
    cursor: help;
    transition: color 0.5s ease-in-out;
}
#connection-indicator.online i, #mobile-connection-indicator.online i {
    color: #22c55e; /* Verde (online) */
}
#connection-indicator.offline i, #mobile-connection-indicator.offline i {
    color: #f59e0b; /* Ambra (offline) */
    animation: pulse-amber-icon 2s infinite;
}
@keyframes pulse-amber-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
#connection-status {
    display: none !important;
}
/* === Light theme base === */
/* Diciamo esplicitamente al browser che il tema di default è chiaro */
html {
  color-scheme: light;
}

/* Assicuriamo sfondo chiaro e testo scuro di base */
html body {
  background-color: #f4f4f5; /* o il tuo bg di default (bg-zinc-100/200) */
  color: #111827;            /* zinc-900 */
}

/* Se vuoi essere ancora più “forte” sugli input in tema chiaro: */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d4d4d8 !important; /* zinc-300 */
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #6b7280 !important; /* zinc-500 */
}


/* === Dark theme overrides === */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #111827;
  color: #f9fafb;
}
html.dark .bg-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
html.dark .bg-zinc-50,
html.dark .bg-zinc-100 {
  background-color: #111827 !important;
}
html.dark .text-zinc-950,
html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-zinc-700 {
  color: #f9fafb !important;
}
html.dark .text-zinc-600,
html.dark .text-zinc-500 {
  color: #9ca3af !important;
}
html.dark .text-zinc-400 {
    color: #6b7280 !important;
}
html.dark .border-zinc-200,
html.dark .border-zinc-300 {
  border-color: #374151 !important;
}
html.dark .ring-zinc-200,
html.dark .ring-zinc-300 {
  --tw-ring-color: #374151 !important;
}
html.dark input,
html.dark textarea,
html.dark select {
  background-color: #374151 !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  --tw-ring-color: #3b82f6 !important;
}
html.dark ::placeholder {
  color: #9ca3af !important;
}
html.dark .bg-zinc-200 {
  background-color: #374151 !important;
}
html.dark .hover\:bg-zinc-100:hover {
  background-color: #4b5563 !important;
}

/* === MODIFICA: Rimuovo le regole dark per i KDS ticket per far applicare i gradienti === */
/*
html.dark .kds-ticket.status-new {
  background-color: #1e293b;
  border-left-color: #3b82f6;
}
html.dark .kds-ticket.status-preparing {
  background-color: #332319;
  border-left-color: #f97316;
}
html.dark .kds-ticket.status-ready {
  background-color: #163023;
  border-left-color: #22c55e;
}
*/


/* === SISTEMA DI STILI CENTRALIZZATO PER PULSANTI === */
:root {
  --btn-primary-bg: #2563eb;      /* blue-600 */
  --btn-primary-bg-hover: #1d4ed8;/* blue-700 */
  --btn-confirm-bg: #059669;      /* emerald-600 */
  --btn-confirm-bg-hover: #047857;/* emerald-700 */
  --btn-danger-bg: #dc2626;       /* red-600 */
  --btn-danger-bg-hover: #b91c1c; /* red-700 */
  --btn-warning-bg: #d97706;      /* amber-600 */
  --btn-warning-bg-hover: #b45309;/* amber-700 */
  --btn-serve-bg: #facc15;        /* yellow-400 - Più giallo */
  --btn-serve-bg-hover: #f59e0b;  /* yellow-500 - Giallo più scuro per hover */
  --btn-neutral-bg: #e5e7eb;      /* zinc-200 */
  --btn-neutral-bg-hover: #d4d4d8;/* zinc-300 */
  --btn-info-bg: #0284c7;         /* sky-600 */
  --btn-info-bg-hover: #0369a1;   /* sky-700 */
}

/* Base per tutti i pulsanti gestiti dal sistema */
button[data-action], .danger-btn, .cancel-last-btn, .cash-close-btn, .submit-order-action, .confirm-action-btn, .cancel-action-btn {
  color: white;
  font-weight: 700;
  transition: background-color 0.2s, background-position 0.3s ease-in-out;
  border: 1px solid transparent;
  touch-action: manipulation; /* migliora feeling su mobile */
}

/* Azioni Primarie (Login, Registrazione, Aggiungi) */
button[data-action="add"] {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg-hover);
}
button[data-action="add"]:hover {
  background-color: var(--btn-primary-bg-hover);
}

/* === MODIFICHE PER GRADIENTI === */

/* Azioni di Conferma (Salva, Paga, Invia Ordine) */
button[data-action="close"],
.cash-close-btn,
.submit-order-action,
.confirm-action-btn {
  background-image: linear-gradient(to right, #10b981, #059669);
  border: none;
  background-size: 200% auto;
}
button[data-action="close"]:hover,
.cash-close-btn:hover,
.submit-order-action:hover,
.confirm-action-btn:hover {
  background-position: right center;
}

/* Azioni Pericolose (Cancella, Rimuovi) */
.danger-btn,
.cancel-last-btn,
button[data-action="delete-item"] {
  background-image: linear-gradient(to right, #ef4444, #b91c1c);
  border: none;
  background-size: 200% auto;
}
.danger-btn:hover,
.cancel-last-btn:hover,
button[data-action="delete-item"]:hover {
  background-position: right center;
}

/* Azioni di Avviso (Sconto, Prendi in Carico) */
button[data-action="discount"] {
  background-image: linear-gradient(to right, #f59e0b, #b45309);
  border: none;
  background-size: 200% auto;
}
button[data-action="discount"]:hover {
  background-position: right center;
}

/* === FINE MODIFICHE PER GRADIENTI === */

/* Azioni di Servizio (Consegna) */
button[data-action="serve"] {
  background-color: var(--btn-serve-bg);
  border-color: var(--btn-serve-bg-hover);
  color: #1f2937; /* Testo scuro per migliore contrasto su giallo */
}
button[data-action="serve"]:hover {
  background-color: var(--btn-serve-bg-hover);
}

/* Azioni Informative / Secondarie (Paga Parziale, Dividi) */
button[data-action="pay-partial"],
button[data-action="split-auto"],
button[data-action="split-manual"] {
  background-color: var(--btn-info-bg);
  border-color: var(--btn-info-bg-hover);
}
button[data-action="pay-partial"]:hover,
button[data-action="split-auto"]:hover,
button[data-action="split-manual"]:hover {
  background-color: var(--btn-info-bg-hover);
}

/* Azioni Neutrali (Annulla, Preconto, Sposta) */
button[data-action="prebill"],
button[data-action="move-selected"],
.cancel-action-btn {
  background-color: var(--btn-neutral-bg);
  color: #111827; /* Testo scuro per pulsanti chiari */
  border-color: var(--btn-neutral-bg-hover);
}
button[data-action="prebill"]:hover,
button[data-action="move-selected"]:hover,
.cancel-action-btn:hover {
  background-color: var(--btn-neutral-bg-hover);
}

/* Stato Disabilitato */
button:disabled {
  filter: saturate(60%) brightness(95%);
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none; /* evita click fantasma */
}

/* === Stili per le notifiche Toast === */
.toast-notification {
    transition: all 0.5s ease-in-out;
}
@keyframes toast-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes toast-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}
.toast-enter {
    animation: toast-fade-in 0.3s forwards;
}
.toast-leave {
    animation: toast-fade-out 0.3s forwards;
}
/* =================================================================== */
/* FIX: Ripristino Stile Bottoni +/- e Quantità nei Conti Aperti     */
/* =================================================================== */

/* Rende i bottoni +/- e regalo trasparenti, come in A5 */
#open-accounts-view .group-remove-action,
#open-accounts-view .group-add-action,
#open-accounts-view .group-gift-action {
    background-image: none !important; /* <-- MODIFICA APPLICATA */
    border: none !important;
    padding: 0.25rem !important;
    box-shadow: none !important;
}

/* Ripristina i colori specifici per le icone */
#open-accounts-view .group-remove-action {
    color: var(--btn-danger-bg) !important;
}

#open-accounts-view .group-add-action {
    color: var(--btn-confirm-bg) !important;
}

#open-accounts-view .group-gift-action {
    color: var(--btn-warning-bg) !important;
}

/* Stile per il pulsante della quantità per farlo sembrare un "chip" leggibile */
#open-accounts-view .group-edit-quantity-action {
    background-color: #f4f4f5 !important; /* Colore di sfondo neutro (zinc-100) */
    border: 1px solid #d4d4d8 !important; /* Bordo leggero (zinc-300) */
    color: #18181b !important; /* Testo scuro (zinc-900) */
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0.25rem 0.5rem !important;
    min-height: auto !important; /* Rimuove l'altezza minima se presente */
}

/* Effetto hover per il pulsante quantità */
#open-accounts-view .group-edit-quantity-action:hover {
    background-color: #e4e4e7 !important; /* zinc-200 */
}

/* === Stili per la Vista Display Cliente === */
#display-view {
    min-height: calc(100vh - 88px);
}

.display-ticket {
    background-color: #1f2937;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    color: white;
    border: 4px solid #f97316;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(249, 115, 22, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 3;
    animation: display-ticket-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.display-ticket-number {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.display-ticket-status {
    margin-top: 0.5rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #f97316;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#display-no-orders {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: #4b5563;
    text-align: center;
}

@keyframes display-ticket-in {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* =================================================================== */
/* NUOVI STILI PER INTERFACCIA CONTI MIGLIORATA                      */
/* =================================================================== */

/* Pulsante di pagamento primario */
.primary-pay-btn {
    background-color: var(--btn-confirm-bg);
    border-color: var(--btn-confirm-bg-hover);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}
.primary-pay-btn:hover {
    background-color: var(--btn-confirm-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Stile per il menu "Altre Azioni" (usando <details>) */
.other-actions-details {
    background-color: #f4f4f5; /* zinc-100 */
    border: 1px solid #e4e4e7; /* zinc-200 */
}
html.dark .other-actions-details {
    background-color: #3f3f46; /* zinc-700 */
    border-color: #52525b; /* zinc-600 */
}
.other-actions-details[open] > summary {
    background-color: #e4e4e7; /* zinc-200 */
}
html.dark .other-actions-details[open] > summary {
    background-color: #52525b; /* zinc-600 */
}
.other-actions-details[open] summary .fa-chevron-down,
.other-actions-details[open] summary .fa-chevron-up {
    transform: rotate(180deg);
}

/* --- INIZIO MODIFICA: Stili per il dropdown "Altre Azioni" --- */
.other-actions-details .other-actions-content {
    display: none; /* Nascosto di default */
}
.other-actions-details[open] > .other-actions-content {
    display: block; /* Mostra quando il details è aperto */
    z-index: 10;
}
.other-actions-details summary::-webkit-details-marker {
    display: none; /* Nasconde la freccia di default su Chrome/Safari */
}
/* --- FINE MODIFICA --- */


/* Barra contestuale per la selezione degli articoli */
.contextual-actions-bar {
    animation: slide-up-fade-in 0.3s ease forwards;
}

@keyframes slide-up-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Stile per rendere i coperti modificabili nella scheda conto */
.account-action-edit-covers {
    cursor: pointer;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.account-action-edit-covers:hover {
    background-color: #e0f2fe; /* light blue bg */
}

html.dark .account-action-edit-covers:hover {
    background-color: #0c4a6e; /* dark blue bg */
}
/* in fondo a style.css */

/* =================================================================== */
/* STILI MIGLIORATI PER LE CARD DEI CONTI APERTI                   */
/* =================================================================== */

.account-card-header {
    transition: background-color 0.2s ease-in-out;
}

#account-card:hover .account-card-header {
    background-color: #f4f4f5; /* Un grigio leggermente più scuro al passaggio del mouse */
}

html.dark #account-card:hover .account-card-header {
    background-color: #3f3f46; /* Equivalente scuro */
}

.table-identifier {
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
}

#account-card:hover .table-identifier {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
html.dark #legend-panel {
    background-color: #27272a; /* Colore di Tailwind "zinc-800" */
    border-color: #52525b;     /* Colore di Tailwind "zinc-600" */
}

html.dark #legend-panel h4,
html.dark #legend-panel ul {
    color: #e4e4e7; /* Colore di Tailwind "zinc-200" per il testo */
}
/* ======================================================= */
/* FIX DEFINITIVO: Sfondo Legenda e Pulsante in Tema Scuro */
/* ======================================================= */
html.dark #legend-panel,
html.dark #legend-toggle {
    background-color: #18181b; /* Colore zinc-900, molto scuro */
    border-color: #3f3f46;     /* Colore zinc-700 per il bordo */
}

html.dark #legend-toggle:hover {
    background-color: #27272a; /* Colore zinc-800 per l'hover */
}
/* ======================================================= */
/* Stili per il pannello "Note Rapide" in Modifica Menu    */
/* ======================================================= */

.quick-notes-container {
  background-color: #f4f4f5; /* zinc-100 */
}

.quick-notes-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.quick-notes-summary:hover {
  background-color: #e4e4e7; /* zinc-200 */
}

/* Rimuove la freccia di default del browser */
.quick-notes-summary::-webkit-details-marker {
  display: none;
}
.quick-notes-summary {
  list-style: none;
}

/* Animazione per l'icona della freccia */
.quick-notes-container[open] > .quick-notes-summary .fa-chevron-right {
  transform: rotate(90deg);
}

html.dark .quick-notes-container {
    background-color: #27272a; /* zinc-800 */
    border-color: #3f3f46; /* zinc-700 */
}
html.dark .quick-notes-summary:hover {
    background-color: #3f3f46; /* zinc-700 */
}
html.dark .quick-notes-container[open] > .quick-notes-summary {
    border-bottom: 1px solid #3f3f46; /* zinc-700 */
}
/* ======================================================= */
/* Stili per la Pagina di Aiuto (Settings -> Help)         */
/* ======================================================= */

.help-section {
  background-color: white;
  border: 1px solid #e4e4e7; /* zinc-200 */
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.help-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.help-section-title:hover {
  background-color: #f4f4f5; /* zinc-100 */
}

/* Rimuove la freccia di default del browser */
.help-section-title::-webkit-details-marker {
  display: none;
}
.help-section-title {
  list-style: none;
}

.help-section-content {
  padding: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e4e4e7; /* zinc-200 */
  line-height: 1.6;
}

/* Animazione per l'icona della freccia */
.help-section[open] > .help-section-title .R-Kaj-k {
  transform: rotate(90deg);
}
.help-section .R-Kaj-k {
    transition: transform 0.2s ease-in-out;
}


/* Stili per il Tema Scuro */
html.dark .help-section {
    background-color: #1f2937; /* Colore corretto e allineato */
    border-color: #3f3f46; /* zinc-700 */
}
html.dark .help-section-title:hover {
    background-color: #3f3f46; /* zinc-700 */
}
html.dark .help-section-content {
    border-top-color: #3f3f46; /* zinc-700 */
}
/* ======================================================= */
/* Stili per la Danger Zone in Tema Scuro                  */
/* ======================================================= */
html.dark .bg-red-50 {
    background-color: #450a0a; /* Un rosso molto scuro */
    border-color: #991b1b; /* Un bordo rosso scuro ma visibile */
}
html.dark .text-red-800 {
    color: #fca5a5 !important; /* Un rosso chiaro per il testo del titolo */
}
html.dark .text-red-700 {
    color: #f87171 !important; /* Un rosso chiaro per il testo del paragrafo */
}

/*
/*
==================================================================
  BLOCCO UNICO PER STILI SU DISPOSITIVI MOBILI E DESKTOP
==================================================================
*/

/* --- Stili per MOBILE (schermi fino a 1023px) --- */
@media (max-width: 1023px) {

  .station-badge { display: none !important; }
    .product-card { height: auto !important; min-height: 28px !important; padding: 0.125rem !important; }
    .product-card > div.p-3 { padding: 0.125rem !important; }
    .product-card.has-edit-controls > div.p-3 { padding-bottom: 2.75rem !important; }
    .product-card .mt-2 { margin-top: 0.25rem !important; }
    .product-card .product-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 1rem !important; line-height: 1.1 !important; }
    .product-card .price-tag-inline { font-size: 0.95rem !important; line-height: 1 !important; }
    .product-card .price-tag { font-size: 0.7rem !important; bottom: 0.25rem; right: 0.5rem; }

    /* Feedback al tap su mobile (senza zoom e senza spostamenti) */
    .product-card:not(.opacity-50):active {
        transform: none !important;
        outline: 2px solid rgba(16, 185, 129, 0.55); /* emerald */
        outline-offset: -2px;
        background-color: rgba(16, 185, 129, 0.06);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }

    /* Modal ordinazione: nome + prezzo sulla stessa riga (solo mobile) */
    .modal-product-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.25rem !important;
    }
    .modal-product-card:not(.opacity-50):active {
        outline: 2px solid rgba(16, 185, 129, 0.55);
        outline-offset: -2px;
        background-color: rgba(16, 185, 129, 0.06);
    }
    .modal-product-card > span:first-child {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.95rem !important;
    }
    .modal-product-card > span:last-child {
        white-space: nowrap;
        font-size: 0.95rem !important;
    }
  #order-total-display { display: block; } /* Mostra il totale su mobile */
  .order-item-enter { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .order-item-enter p { line-height: 1.2 !important; margin-bottom: 0.1rem !important; }
  
  /* Layout per i pulsanti di azione nel riepilogo ordine mobile */
  .actions-container {
    display: flex; /* Cambia in flex per affiancare */
    gap: 0.75rem;
    flex-direction: row !important; /* Forza la riga */
  }
  .actions-container .submit-order-action {
    flex-grow: 1; /* Occupa più spazio */
  }
  .actions-container .other-actions-details {
    flex-shrink: 0; /* Non si restringe */
  }
  .actions-container .other-actions-details summary {
      padding: 0.75rem;
  }
  .actions-container .other-actions-details .p-2 {
      padding: 0.5rem;
  }
  /* --- INIZIO MODIFICA: Riduzione altezza header mobile --- */

#main-header {
    /* Riduciamo il padding verticale (spazio sopra/sotto) */
    padding-top: 0.25rem;    /* p-1 */
    padding-bottom: 0.25rem; /* p-1 */
}

#main-header img {
    /* Dimezziamo l'altezza del logo (era h-20 / 80px) */
    height: 2.5rem; /* h-10 / 40px */
}

#main-header #page-title {
    /* Riduciamo anche il titolo "Menu", "Conti", ecc. */
    font-size: 1.25rem; /* text-xl (era 2xl) */
}

#main-header #mobile-menu-btn {
    /* Riduciamo il padding del pulsante hamburger */
    padding: 0.25rem; /* p-1 (era p-2) */
}

/* --- FINE MODIFICA --- */
}

/* --- Stili per DESKTOP (schermi da 1024px in su) --- */
@media (min-width: 1024px) {
  
  /* --- INIZIO MODIFICA: Layout pulsanti desktop --- */
  .actions-container {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: stretch;
  }
  .actions-container .submit-order-action {
    flex-grow: 1; /* Occupa lo spazio rimanente */
  }
  .actions-container .other-actions-details {
    flex-shrink: 0; /* Non si restringe */
    width: auto;
  }
  .actions-container .other-actions-details summary {
      padding-left: 1rem;
      padding-right: 1rem;
  }
  /* --- FINE MODIFICA --- */
}

/* === NUOVI STILI PER IL DISPLAY FULLSCREEN === */
body.display-fullscreen #app-container > main {
    padding-top: 0 !important;
}

/* --- INIZIO NUOVI STILI PER RAGGRUPPAMENTO TAVOLI --- */

/* Stile per un tavolo selezionato durante la modalità di raggruppamento */
.table-object.selected-for-grouping {
    outline: 4px solid #f59e0b; /* Bordo ambra acceso */
    outline-offset: 3px;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Stile per un tavolo che fa parte di un gruppo già esistente */
.table-object.grouped {
    border: 3px dashed #6366f1; /* Bordo viola tratteggiato */
}

/* Badge per indicare che un tavolo fa parte di un gruppo */
.group-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6366f1; /* Viola */
    color: white;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 20;
}
/* =======================================================
   MAPPA TAVOLI: WRAPPER RESPONSIVE + STAGE SCALABILE
   (non tocca .table-object esistente)
   ======================================================= */

/* Wrapper che occupa lo spazio disponibile e taglia l'overflow */
#tables-wrapper {
  position: relative;
  width: 100%;
  height: calc(100dvh - 240px); /* Altezza viewport meno spazio per header e footer */
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}
/* Stage interno che verrà scalato via JS per "farci stare tutto" */
#tables-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0; /* scala dall’angolo alto-sinistra */
  will-change: transform;
}

/* In modalità modifica mappa puoi voler scorrere liberamente senza scala */
.edit-map-mode #tables-wrapper {
  overflow: auto;               /* permette pan/scroll per edit */
  height: min(80vh, 100dvh);    /* un po’ più alto in edit */
}

/* =======================================================
   STILI PER LA BARRA LATERALE DI NAVIGAZIONE
   ======================================================= */
.sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background-color: #e5e7eb; /* bg-zinc-200 */
    padding: 0.5rem;
    border-radius: 0.5rem;
}

@media (min-width: 1024px) {
    .sidebar-nav {
        flex-direction: column;
        justify-content: flex-start;
        width: 12rem; /* w-48 */
        margin-bottom: 0;
        padding: 0.75rem; /* p-3 */
        height: fit-content;
        background-color: #ffffff; /* bg-white */
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
    .sidebar-nav > button {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Tema scuro per la barra laterale */
html.dark .sidebar-nav {
    background-color: #374151; /* bg-zinc-700 */
}
/* FIX: CSS non valido "html.dark@media": riscritto come @media + selettore */
@media (min-width: 1024px) {
    html.dark .sidebar-nav {
        background-color: #1f2937; /* bg-gray-800 */
        border: 1px solid #374151; /* border-zinc-700 */
    }
}
/* Aggiungi questo codice alla fine del tuo file style.css */

/* ======================================================= */
/* STILI PER TASTIERINO NUMERICO MODALE                    */
/* ======================================================= */

#keypad-display {
    letter-spacing: 2px;
    color: #18181b; /* zinc-900 */
}

.keypad-btn {
    background-color: #f4f4f5; /* zinc-100 */
    color: #18181b; /* zinc-900 */
    border: 1px solid #e4e4e7; /* zinc-200 */
    transition: background-color 0.15s ease-in-out, transform 0.1s;
}

.keypad-btn:hover {
    background-color: #e4e4e7; /* zinc-200 */
}

.keypad-btn:active {
    background-color: #d4d4d8; /* zinc-300 */
    transform: scale(0.95);
}

/* Stile per i tasti funzione */
.keypad-btn[data-key="C"],
.keypad-btn[data-key="backspace"] {
    background-color: #fee2e2; /* red-100 */
    color: #b91c1c; /* red-700 */
    font-size: 1.25rem;
}
.keypad-btn[data-key="C"]:hover,
.keypad-btn[data-key="backspace"]:hover {
    background-color: #fecaca; /* red-200 */
}

/* Tema Scuro */
html.dark #keypad-display {
    background-color: #18181b; /* zinc-900 */
    color: #f9fafb; /* zinc-50 */
}
html.dark .keypad-btn {
    background-color: #3f3f46; /* zinc-700 */
    color: #f9fafb; /* zinc-50 */
    border-color: #52525b; /* zinc-600 */
}
html.dark .keypad-btn:hover {
    background-color: #52525b; /* zinc-600 */
}
html.dark .keypad-btn:active {
    background-color: #71717a; /* zinc-500 */
}
html.dark .keypad-btn[data-key="C"],
html.dark .keypad-btn[data-key="backspace"] {
    background-color: #450a0a; /* red-950 */
    color: #fca5a5; /* red-300 */
}
html.dark .keypad-btn[data-key="C"]:hover,
html.dark .keypad-btn[data-key="backspace"]:hover {
    background-color: #7f1d1d; /* red-800 */
}

/* --- INIZIO MODIFICA: Rimosso stile banner modifica menù --- */
#edit-mode-banner {
    display: none; /* Il banner è ora completamente rimosso dalla visualizzazione */
}
/* --- FINE MODIFICA --- */

/* ======================================================= */
/* FIX PER MODALI E TASTIERA MOBILE                        */
/* ======================================================= */

/* Contenitore per il contenuto del modale, lo rende scrollabile */
.modal-content-scrollable {
    overflow-y: auto;
    /* Calcoliamo un'altezza massima per evitare che il modale sia troppo alto
       sugli schermi dei telefoni, lasciando spazio per titolo e pulsanti. */
    max-height: calc(80vh - 150px);
    padding-right: 0.5rem; /* Un po' di spazio per la barra di scorrimento */
    margin-right: -0.5rem;
}

/* Barra delle azioni, resa "sticky" in fondo al modale */
.modal-actions-sticky {
    /* Posizionamento */
    position: sticky;
    bottom: -24px; /* Il modale ha un padding di 24px (p-6), lo annulliamo */
    left: -24px;
    right: -24px;
    z-index: 10;

    /* Stile */
    background-color: #ffffff;
    padding: 1rem 1.5rem; /* p-4 px-6 */
    border-top: 1px solid #e4e4e7; /* border-zinc-200 */
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05); /* Sfumatura per separazione */
    margin-top: 1.5rem; /* Spazio dal contenuto se non si scrolla */

    /* Layout pulsanti */
    display: flex;
    justify-content: center;
    gap: 1rem; /* space-x-4 */
}

/* Versione per il tema scuro */
html.dark .modal-actions-sticky {
    background-color: #1f2937; /* bg-gray-800 o simile */
    border-top-color: #374151; /* border-zinc-700 */
}
/* ======================================================= */
/* FIX: LAYOUT CONTENITORE ORDINE MOBILE (STICKY SEARCH) */
/* ======================================================= */

/*
 Su MOBILE (fino a 1023px):
 Calcoliamo l'altezza esatta per riempire lo spazio
 tra l'header (sticky) e la barra riepilogo (fixed).
*/
@media (max-width: 1023px) {
  #order-view-content-wrapper {
    /*
     Altezza Header (Logo h-10/40px + padding p-1/4px * 2) = 48px
     Altezza Barra Riepilogo (stima) = 60px
     Altezza totale = 100dvh - (header) - (barra riepilogo)
    */
    height: calc(100dvh - 48px - 60px);

    /*
     L'overflow Y deve essere 'hidden' qui,
     perché lo scroll è gestito dai figli interni.
    */
    overflow-y: hidden;
  }

  /*
   Forziamo il contenitore interno (quello con la ricerca)
   a ereditare questa altezza e a funzionare
   correttamente come colonna flex.
  */
  #order-view-content-wrapper > .flex-1.flex.flex-col {
    height: 100%;
  }
}

/*
 Su DESKTOP (da 1024px in su):
 Ripristiniamo l'altezza fissa originale
 che funzionava bene.
*/
@media (min-width: 1024px) {
  #order-view-content-wrapper {
    height: 85vh;
    max-height: calc(100vh - 100px);
  }
}

/* === NUOVI STILI PER IL DISPLAY FULLSCREEN === */
body.display-fullscreen #app-container > main {
    padding-top: 0 !important;
}

/* === ACCESSIBILITÀ: focus visibile per elementi interattivi === */
.product-card:focus-visible,
.table-object:focus-visible,
button[data-action]:focus-visible,
.danger-btn:focus-visible,
.cancel-last-btn:focus-visible,
.cash-close-btn:focus-visible,
.submit-order-action:focus-visible,
.confirm-action-btn:focus-visible,
.cancel-action-btn:focus-visible,
.group-edit-quantity-action:focus-visible,
.other-actions-details summary:focus-visible,
.quick-notes-summary:focus-visible,
.help-section-title:focus-visible,
.fab:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* === PREFERENZE UTENTE: ridurre animazioni/transizioni === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover,
  .table-object:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}
/* FIX: Sfondo barra "Assegna a uscita" (order-group-actions) in chiaro/scuro */
#order-group-actions {
  background-color: #ecfdf5; /* emerald-50 */
  border-color: #a7f3d0;     /* emerald-200 */
}

html.dark #order-group-actions {
  background-color: #27272a; /* zinc-800 */
  border-color: #52525b;     /* zinc-600 */
}

/* === INIZIO FIX: Tema Scuro per Pulsante Quantità in Conti Aperti === */

/* Stile per il pulsante quantità in modalità scura */
html.dark #open-accounts-view .group-edit-quantity-action {
    background-color: #3f3f46 !important; /* zinc-700 (sfondo scuro) */
    border-color: #52525b !important;     /* zinc-600 (bordo scuro) */
    color: #f9fafb !important;           /* zinc-50 (testo chiaro) */
}

/* Effetto hover per il pulsante quantità in modalità scura */
html.dark #open-accounts-view .group-edit-quantity-action:hover {
    background-color: #52525b !important; /* zinc-600 */
}

/* === FINE FIX === */


/* === INIZIO NUOVI STILI: Pulsante Flottante (FAB) === */
#fab-container {
    position: fixed;
    bottom: 1.5rem; /* 24px */
    right: 1.5rem;  /* 24px */
    z-index: 40;
}

.fab {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 1rem; /* 16px */
    border-radius: 9999px; /* rounded-full */
    font-weight: 700; /* font-bold */
    color: white;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition: all 0.2s ease-in-out;
}

.fab:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* --- INIZIO MODIFICA: Rimossa la regola che nasconde il testo su mobile --- */
/* @media (max-width: 640px) {
    .fab span {
        display: none;
    }
    .fab {
        width: 4rem;
        height: 4rem;
        justify-content: center;
        font-size: 1.25rem;
    }
} */
/* --- FINE MODIFICA --- */
/* === FINE NUOVI STILI === */
/* === INIZIO NUOVI STILI: Card generica per Impostazioni === */
.setting-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* zinc-200 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.setting-card-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* zinc-800 */
    padding: 1.25rem; /* p-5 */
    border-bottom: 1px solid #e5e7eb; /* zinc-200 */
}
.setting-card-content {
    padding: 1.25rem; /* p-5 */
}
.setting-card-footer {
    padding: 1rem 1.25rem; /* p-4 px-5 */
    background-color: #f9fafb; /* zinc-50 */
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}
.setting-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* zinc-700 */
    margin-bottom: 0.25rem;
}
.setting-input {
    width: 100%;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid #d1d5db; /* zinc-300 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Tema Scuro */
html.dark .setting-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .setting-card-title {
    color: #f9fafb;
    border-bottom-color: #374151;
}
html.dark .setting-card-footer {
    background-color: #111827; /* Più scuro del corpo della card */
    border-top-color: #374151;
}
html.dark .setting-label {
    color: #d1d5db; /* zinc-300 */
}
html.dark .setting-input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

/* === INIZIO NUOVI STILI: Card Utente Specifica === */
.user-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
}
.user-avatar {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #1e40af; /* blue-800 */
    background-color: #dbeafe; /* blue-100 */
}
.user-info .user-name {
    font-weight: 600;
    color: #1f2937;
}
.user-info .user-role {
    font-size: 0.875rem;
    color: #6b7280;
}
.user-pin {
    font-family: monospace;
    font-size: 1rem;
    color: #166534; /* green-700 */
    background-color: #dcfce7; /* green-100 */
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
}
.user-actions-menu {
    position: relative;
    margin-left: auto;
}
.user-actions-menu > button {
    color: #6b7280;
}
.user-actions-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 150px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 10;
    overflow: hidden;
}
.user-actions-dropdown button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
}
.user-actions-dropdown button.delete {
    color: #dc2626;
}
/* Tema Scuro per User Card */
html.dark .user-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .user-avatar {
    color: #bfdbfe; /* blue-200 */
    background-color: #1e3a8a; /* blue-800 */
}
html.dark .user-info .user-name {
    color: #f9fafb;
}
html.dark .user-info .user-role {
    color: #9ca3af;
}
html.dark .user-pin {
    color: #bbf7d0; /* green-200 */
    background-color: #14532d; /* green-900 */
}
html.dark .user-actions-menu > button {
    color: #9ca3af;
}
html.dark .user-actions-dropdown {
    background-color: #374151;
    border: 1px solid #4b5563;
}
html.dark .user-actions-dropdown button:hover {
    background-color: #4b5563;
}
html.dark .user-actions-dropdown button.delete {
    color: #f87171; /* red-400 */
}
/* === FINE NUOVI STILI === */

/* === INIZIO NUOVI STILI: Card Stazioni Specifica === */
.station-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 0.75rem;
}
.station-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    font-size: 1.1rem;
}
.station-info .station-name {
    font-weight: 600;
    color: #1f2937; /* zinc-800 */
}
.station-info .station-badge-container {
    margin-top: 0.125rem;
    height: 1rem;
}
.station-actions-menu {
    position: relative;
    margin-left: auto;
}
.station-actions-menu > button {
    color: #6b7280; /* zinc-500 */
}
.station-actions-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 20;
    overflow: hidden;
}
.station-actions-dropdown button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}
.station-actions-dropdown button:hover {
    background-color: #f9fafb;
}

/* Tema Scuro per Station Card */
html.dark .station-card {
    background-color: #1f2937;
    border-color: #374151;
}
html.dark .station-icon {
    background-color: #334155; /* slate-700 */
    color: #cbd5e1; /* slate-300 */
}
html.dark .station-info .station-name {
    color: #f9fafb;
}
html.dark .station-actions-menu > button {
    color: #9ca3af;
}
html.dark .station-actions-dropdown {
    background-color: #374151;
    border-color: #4b5563;
}
html.dark .station-actions-dropdown button:hover {
    background-color: #4b5563;
}

/* =================================================================== */
/* FIX DEFINITIVO KDS: TESTO SEMPRE NERO NEI TICKET (Anche in Dark Mode) */
/* =================================================================== */

/* Forza il colore base del ticket */
.kds-ticket,
html.dark .kds-ticket {
    color: #18181b !important; /* zinc-900 */
}

/* Override specifico per tutti gli elementi di testo dentro il ticket.
   L'uso di !important e html.dark serve a vincere sulle regole 
   generali del tema scuro che renderebbero il testo bianco.
*/
.kds-ticket h3,
html.dark .kds-ticket h3,
.kds-ticket p,
html.dark .kds-ticket p,
.kds-ticket span,
html.dark .kds-ticket span,
.kds-ticket i,
html.dark .kds-ticket i,
.kds-ticket strong,
html.dark .kds-ticket strong,
.kds-ticket .text-zinc-500,
html.dark .kds-ticket .text-zinc-500,
.kds-ticket .text-zinc-600,
html.dark .kds-ticket .text-zinc-600,
.kds-ticket .text-zinc-800,
html.dark .kds-ticket .text-zinc-800,
.kds-ticket .text-emerald-900,
html.dark .kds-ticket .text-emerald-900,
.kds-ticket .text-sky-900,
html.dark .kds-ticket .text-sky-900 {
    color: #09090b !important; /* zinc-950 (Nero profondo) */
    text-shadow: none !important;
}

/* Manteniamo i timer leggermente distinti ma sempre scuri */
.kds-ticket .kds-timer-total,
html.dark .kds-ticket .kds-timer-total,
.kds-ticket .kds-timer-phase,
html.dark .kds-ticket .kds-timer-phase {
    color: #18181b !important;
}

/* =================================================================== */
/* LAYOUT PAGINA MAPPA TAVOLI: FLEX SENZA SCROLL                      */
/* =================================================================== */

#table-map-view {
  height: calc(100vh - 4rem);
  overflow: hidden;
}

#table-map-view #table-map-container {
  height: auto !important;
}

#table-map-view #map-controls-dock {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* FIX: Su desktop il dock deve rimanere orizzontale e non diventare una sidebar verticale */
@media (min-width: 1024px) {
  #table-map-view #map-controls-dock {
    flex-direction: row;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    background-color: #e5e7eb;
    box-shadow: none;
    padding: 0.5rem;
    height: auto;
  }

  #table-map-view #map-controls-dock > button {
    width: auto;
    justify-content: center;
  }

  html.dark #table-map-view #map-controls-dock {
    background-color: #374151;
    border: none;
  }
}

/* =================================================================== */
/* DOCK CONTROLLI MAPPA: COMPATTA E COERENTE TEMA                     */
/* =================================================================== */

.map-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  border: 1px solid transparent;
}

.map-dock-btn:hover { transform: translateY(-1px); }
.map-dock-btn:active { transform: translateY(0); }

.map-dock-btn.help {
  background: transparent;
  color: #71717a;              /* zinc-500 */
  border-color: #e4e4e7;       /* zinc-200 */
}
html.dark .map-dock-btn.help {
  color: #d4d4d8;              /* zinc-300 */
  border-color: #3f3f46;       /* zinc-700 */
}
.map-dock-btn.help .label { display: none; } /* Etichetta help sempre nascosta */

.map-dock-btn.secondary {
  background: #f8fafc;         /* zinc-50 */
  color: #3f3f46;              /* zinc-700 */
  border-color: #e4e4e7;       /* zinc-200 */
}
html.dark .map-dock-btn.secondary {
  background: #1f2937;         /* zinc-800-ish */
  color: #e5e7eb;              /* zinc-200 */
  border-color: #374151;       /* zinc-700 */
}

.map-dock-btn.primary {
  background: linear-gradient(90deg, #4f46e5, #7c3aed); /* indigo→violet */
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
}
.map-dock-btn.primary:hover {
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.4);
}

.map-dock-sep {
  width: 1px;
  height: 1.75rem;
  background: #e5e7eb;         /* zinc-200 */
}
html.dark .map-dock-sep { background: #3f3f46; } /* zinc-700 */

.map-dock-text {
  color: #52525b;              /* zinc-600 */
  font-weight: 600;
  font-size: 0.8rem;
}
html.dark .map-dock-text { color: #e4e4e7; }

/* Riduci ingombro su schermi stretti */
@media (max-width: 640px) {
  .map-dock-btn {
    padding: 0.5rem 0.7rem;
    gap: 0.3rem;
    font-size: 0.8rem;
  }
}

/* Quando la dock è nascosta in edit mode, evita spazio occupato */
#map-controls-dock[style*="display: none"] { pointer-events: none; }