/* Compact Settings panel: denser grid, tighter cards, cleaner headers */
/* Masonry a colonne: card di altezze diverse si impacchettano senza buchi */
#panel-impostazioni .settings-grid {
    column-count: 3;
    column-gap: 16px;
}
@media (max-width: 1200px) { #panel-impostazioni .settings-grid { column-count: 2; } }
@media (max-width: 760px)  { #panel-impostazioni .settings-grid { column-count: 1; } }
#panel-impostazioni .settings-card {
    padding: 18px 18px 16px;
    border-radius: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 16px;
    display: inline-block;
    width: 100%;
}
#panel-impostazioni .settings-card h3 {
    font-size: 0.95rem;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    color: var(--primary);
}
#panel-impostazioni .settings-card h3 i { width: 18px; text-align: center; }
#panel-impostazioni .settings-card .form-group { margin-bottom: 12px; }
#panel-impostazioni .settings-card label { font-size: 0.82rem; }
#panel-impostazioni .settings-card .form-control { padding: 9px 11px; font-size: 0.9rem; }
#panel-impostazioni .toggle-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border); margin: 0;
}
#panel-impostazioni .toggle-row:last-child { border-bottom: none; }
#panel-impostazioni .toggle-row label:first-child { margin: 0; font-weight: 500; }
#panel-impostazioni .settings-card small { font-size: 0.72rem; line-height: 1.3; display:block; margin-top:4px; }

/* Accessibility: visible keyboard focus ring (overrides any default :focus { outline:none } in components below) */
:focus-visible {
    outline: 3px solid var(--primary, #1890C0);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--primary, #1890C0);
    outline-offset: 2px;
}

:root {
    /* Palette brand SagraGO — tema "Sagra Chiara" (giorno): base calda carta/crema,
       testo navy, azioni blu, prezzi rossi. Leggibile al sole, on-brand da sagra. */
    --primary: #1890C0;
    --primary-rgb: 24, 144, 192;
    --primary-strong: #11749D;
    --primary-hover: #0C3054;
    --on-primary: #FFFFFF;
    --primary-ink: #11749D;
    --primary-light: #FBF3E2;
    --secondary: #0C3054;
    --surface: #FFFDF7;
    --bg-color: #F3ECDD;
    --text-main: #26210F;
    --text-muted: #75684F;
    --border: #E6DCC4;
    --danger: #D8402F;
    --error: var(--danger);
    --success: #4FAE64;
    --on-success: #04101F;
    --warning: #F2901F;

    /* Alias storici + token Material usati dalle sette pagine. Esplicitarli nel tema
       chiaro evita che una var senza fallback annulli silenziosamente la dichiarazione. */
    --bg: var(--bg-color);
    --bg-card: var(--surface);
    --surface-hover: #FBF3E2;
    --on-surface: var(--text-main);
    --text: var(--text-main);
    --line: var(--border);
    --line-soft: #F0E7D5;
    --navy: var(--secondary);
    --shadow-1: var(--elevation-1);
    --md-sys-color-surface: var(--surface);
    --md-sys-color-surface-container: #FFF8EA;
    --md-sys-color-surface-container-low: #FFFAF0;
    --md-sys-color-surface-container-high: #F1E8D5;
    --md-sys-color-primary-container: #D9EFF8;
    --md-sys-color-on-primary-container: #0C3054;
    --md-sys-color-secondary: #0C3054;
    --md-sys-color-secondary-container: #DCE6EE;
    --md-sys-color-on-secondary-container: #0C3054;
    --md-sys-color-tertiary-container: #EEE5FA;
    --md-sys-color-on-tertiary-container: #4A2C7A;
    --md-sys-color-error: var(--danger);
    --md-sys-color-error-container: #FDE7E3;
    --md-sys-color-on-error-container: #7A1C13;

    /* colori reparto/accento per POS/KDS (coerenti tra schermate) */
    --accent: #F2901F;
    --pay: #4FAE64;

    /* Gradiente brand (stile mockup vetrina) */
    --grad: linear-gradient(120deg, #1890C0, #00A8E4 45%, #4FAE64);
    --grad-navy: linear-gradient(135deg, #0C3054, #1890C0);

    /* Airy Radii */
    --radius-xs: 6px;
    --radius-s: 12px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px; 
    --pill: 100px;
    
    /* Airy Elevations - MULTI LAYER SOFT SHADOWS */
    --elevation-1: 0 4px 6px -1px rgba(120, 90, 30, 0.06), 0 2px 4px -1px rgba(120, 90, 30, 0.04);
    --elevation-2: 0 10px 18px -3px rgba(120, 90, 30, 0.10), 0 4px 6px -2px rgba(120, 90, 30, 0.05);
    --elevation-3: 0 22px 30px -5px rgba(120, 90, 30, 0.14), 0 10px 12px -5px rgba(120, 90, 30, 0.06);

    
    --font-family: 'Outfit', sans-serif;
}

body.dark-mode {
    /* tema "Festa Notturna" (sera): navy profondo, alto contrasto, accenti luminosi */
    --primary: #2FC0F5;
    --primary-rgb: 47, 192, 245;
    --primary-strong: #2FC0F5;
    --primary-hover: #6AD3FA;
    --on-primary: #04101f;
    --primary-ink: #2FC0F5;
    --primary-light: #14294a;
    --secondary: #8FA6C6;
    --surface: #12233F;
    --bg-color: #0A1526;
    --text-main: #EAF2FB;
    --text-muted: #93A9C8;
    --border: #213A5E;
    --danger: #FF6B5E;
    --error: var(--danger);
    --success: #4FAE64;
    --on-success: #04101F;
    --warning: #F2901F;
    --accent: #F2901F;
    --pay: #4FAE64;
    --elevation-1: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
    --elevation-2: 0 12px 24px -4px rgba(0, 0, 0, 0.62);
    --elevation-3: 0 26px 44px -8px rgba(0, 0, 0, 0.7);
    /* Token aggiuntivi usati in giro (card, hover, testo, righe) */
    --bg: #0A1526;
    --bg-card: #12233F;
    --surface-hover: #16294a;
    --on-surface: #EAF2FB;
    --text: #EAF2FB;
    --line: #213A5E;
    --line-soft: #16294a;
    --navy: #EAF2FB;
    --shadow-1: var(--elevation-1);
    /* Material tokens (usati nel POS) rimappati per il dark */
    --md-sys-color-surface: #12233F;
    --md-sys-color-surface-container: #12233F;
    --md-sys-color-surface-container-low: #0E1E38;
    --md-sys-color-surface-container-high: #1B3152;
    --md-sys-color-primary-container: #15334A;
    --md-sys-color-on-primary-container: #9FD8F5;
    --md-sys-color-secondary-container: #22303F;
    --md-sys-color-secondary: #8FA6C6;
    --md-sys-color-on-secondary-container: #B7D4EA;
    --md-sys-color-tertiary-container: #2A2140;
    --md-sys-color-on-tertiary-container: #D9C9F5;
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-error-container: #3A1414;
    --md-sys-color-on-error-container: #FFDAD6;
}

/* Dark mode: forza i componenti con fondo chiaro fisso ad usare le variabili scure. */
body.dark-mode .admin-card,
body.dark-mode .stat-card,
body.dark-mode .summary-card-md3,
body.dark-mode .mobile-access-card,
body.dark-mode .pos-cart,
body.dark-mode .pos-sidebar,
body.dark-mode .admin-sidebar,
body.dark-mode .cart-header,
body.dark-mode .cart-footer,
body.dark-mode .modal,
body.dark-mode .product-card { background: var(--surface) !important; color: var(--text-main); }
body.dark-mode .cart-item { background: var(--surface-hover) !important; }
body.dark-mode .pos-main, body.dark-mode .admin-content, body.dark-mode .kds-layout { background: var(--bg-color); }
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode select,
body.dark-mode textarea { background: var(--bg-color) !important; color: var(--text-main) !important; border-color: var(--border) !important; }
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #6E7A8A; }
body.dark-mode table th { background: #1B2129 !important; color: var(--text-main) !important; }
body.dark-mode table td { color: var(--text-main); border-color: var(--border); }
body.dark-mode .pm-tile, body.dark-mode .pm-chip, body.dark-mode .pm-row:hover { background: var(--surface-hover) !important; }
body.dark-mode .ip-badge, body.dark-mode .sector-badge { background: var(--surface-hover) !important; color: var(--text-main); }
/* Testo generico che era scuro su bianco */
body.dark-mode .modal h2, body.dark-mode .admin-panel h1, body.dark-mode h3 { color: var(--text-main); }
/* Tasti sconto rapidi POS (-10/-20/-50) e simili su surface-hover: poco visibili in dark → bordo + testo chiaro */
body.dark-mode .cart-footer .btn { color: var(--text-main); }
body.dark-mode [style*="var(--surface-hover)"] { background: #262D36 !important; color: var(--text-main) !important; border: 1px solid var(--border); }
body.dark-mode .btn-choice { color: var(--text-main); border: 1px solid var(--border); }
body.dark-mode .btn-choice.active { background: var(--primary); color: #0D1117; border-color: var(--primary); }

/* Glassmorphism Classes - AIRY STYLE */
.glass {
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--elevation-1);
}

body.dark-mode .glass {
    background-color: rgba(22, 27, 34, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Toasts */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10000;
}
.toast {
    background: var(--surface);
    color: var(--text-main);
    padding: 16px 24px;
    border-radius: var(--radius-m);
    box-shadow: var(--elevation-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.show {
    transform: translateX(0);
    opacity: 1;
}
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.info i { color: var(--primary); }


/* Page Transitions */
.admin-panel {
    display: none;
    animation: fadeIn 0.4s ease-out;
}
.admin-panel.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Premium Card Hover */
.summary-card-md3, .admin-card, .product-card {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.summary-card-md3:hover, .admin-card:hover, .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; outline-color: var(--primary); }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4 { font-weight: 600; color: var(--text-main); }

.btn {
    border: none;
    border-radius: var(--pill);
    padding: 12px 24px;
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    box-shadow: none;
}

.btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; }

.btn-primary {
    background: var(--grad);
    color: var(--on-primary);
    box-shadow: 0 6px 16px rgba(0,168,228,.25);
    border: none;
}
.btn-primary:hover:not(:disabled) {
    background: var(--grad-navy);
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--primary-light);
    color: var(--primary);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--border);
}

.btn-success { background: var(--success); color: var(--on-success); }
.btn-danger { background: var(--danger); color: #fff; }

/* --- HOME PAGE (MD3 Refresh) --- */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg-color);
}

.home-header { text-align: center; margin-bottom: 48px; }
.home-header .logo { font-size: 4rem; color: var(--primary); margin-bottom: 16px; }

.cards-container { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }

.home-card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    width: 300px;
    text-align: center;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s ease;
}
.home-card:hover { 
    background: var(--primary-light);
    transform: translateY(-8px); 
    box-shadow: var(--elevation-2);
}

.card-icon { font-size: 3.5rem; margin-bottom: 24px; color: var(--primary); }

/* --- POS LAYOUT (MD3 Refresh) --- */
.pos-layout { display: grid; grid-template-columns: 280px 1fr 380px; height: 100vh; background: var(--bg-color); }

.pos-sidebar { 
    background: var(--surface); 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    overflow-y: auto; 
}
.category-btn { 
    background: transparent; 
    color: var(--text-main); 
    border: none;
    padding: 14px 20px; 
    border-radius: var(--radius-m); 
    text-align: left; 
    font-size: 0.95rem; 
    font-weight: 600;
    transition: all 0.2s; 
    display: flex;
    align-items: center;
    gap: 10px;
}
.category-btn:hover { background: var(--primary-light); }
.category-btn.active { 
    background: var(--primary);
    color: #fff;
    box-shadow: var(--elevation-1);
}

.category-btn.has-color {
    background: var(--cat-color);
    color: #fff;
    box-shadow: 0 4px 10px rgba(12,48,84,.12);
}
.category-btn.has-color:hover { transform: translateY(-1px); filter: brightness(1.06); }
.category-btn.has-color.active {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cat-color) 45%, transparent), inset 4px 0 0 rgba(255,255,255,.85);
    transform: scale(1.03);
}

.pos-main { padding: 24px; overflow-y: auto; }
.pos-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Layout prodotti/carrello CONSOLIDATO nel blocco POS più in basso (~riga 1685) per evitare duplicati.
   Qui restano solo gli stili NON duplicati (nome/prezzo prodotto + animazione). */
.product-name { font-size: 1.05rem; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.product-price { font-size: 1.35rem; font-weight: 900; color: var(--danger); align-self: flex-end; letter-spacing: -.3px; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.cart-total { font-size: 2.4rem; font-weight: 900; color: var(--text-main); margin-bottom: 20px; text-align: right; letter-spacing: -1px; }
.checkout-btn { width: 100%; padding: 18px; font-size: 1.2rem; }

/* --- MODALS (MD3 styling) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 32px; width: 520px;
    box-shadow: var(--elevation-3);
    border: none;
    max-width: 95vw;
    max-height: 90dvh; overflow-y: auto;
    border: 1px solid var(--border);
}

.btn-choice {
    background: var(--surface);
    color: var(--text-main);
    flex-direction: column;
    padding: 12px 8px !important;
    gap: 4px;
    font-size: 0.85rem !important;
    border: 2px solid transparent;
}
.btn-choice i { font-size: 1.2rem; }
.btn-choice.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}
.modal h2 { margin-bottom: 24px; font-size: 1.8rem; color: var(--primary); text-align: center; }

.modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.modal-total { font-weight: 800; color: var(--primary); font-size: 1.4rem; }
.modal-resto { font-weight: 800; color: var(--success); font-size: 1.6rem; }

.quick-cash {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 15px 0;
}
.quick-cash .btn {
    background: var(--surface-hover);
    padding: 12px 5px;
    font-size: 0.95rem;
}
.cash-input {
    width: 140px;
    text-align: right;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-m);
}
.cash-input:focus { border-color: var(--primary); outline: none; }

.form-control {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-m);
    border: 1px solid var(--border);
    background: var(--bg-color);
    font-family: inherit;
    font-size: 1rem;
    margin-top: 8px;
}
.form-control:focus { border-color: var(--primary); outline: 2px solid var(--primary-light); }

/* --- KITCHEN (KDS) MD3 Refresh --- */
.kds-layout { background: var(--bg-color); min-height: 100vh; padding: 24px; }
.kds-header {
    background: var(--grad-navy);
    color: #fff;
    padding: 24px 40px;
    border-radius: var(--radius-xl);
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--elevation-2);
}
.kds-header h1 { color: #fff; }
.kds-header h1 i { color: #00A8E4 !important; }

.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.ticket { 
    background: var(--surface); 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    border: none;
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
}
.ticket-header { 
    background: var(--primary-light); 
    padding: 16px 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ticket-id { color: var(--primary); font-size: 1.5rem; font-weight: 700; }

.ticket-items { padding: 16px; flex: 1; }
.t-item { 
    background: var(--bg-color); 
    border-radius: var(--radius-m); 
    padding: 12px 16px; 
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.t-item.done { background: #e8f5e9; border: 1px solid #c8e6c9; }

.ticket-footer { padding: 16px; border-top: 1px solid var(--border); }

/* --- ADMIN (MD3 Style) --- */
.admin-layout { 
    display: grid;
    grid-template-columns: 320px 1fr;
    height: 100vh;
    background: var(--bg-color);
}

.admin-sidebar { 
    background: var(--surface); 
    width: 320px; 
    padding: 32px 24px; 
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 9999;
    height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    padding: 24px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    color: var(--text-main);
    font-weight: 800;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-nav-item {
    padding: 16px 24px;
    border-radius: var(--pill);
    font-weight: 500;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    width: 100%;
}
.admin-nav-item i { font-size: 1.25rem; width: 24px; text-align: center; }

.admin-nav-item:hover { 
    background: var(--primary-light); 
    color: var(--primary);
    transform: translateX(4px);
}
.admin-nav-item.active {
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,168,228,.28);
    transform: none;
}
.admin-nav-item.active i { color: #fff; }
.admin-nav-item.active:hover { transform: none; color: #fff; }

.admin-content {
    padding: 40px 48px;
    overflow-y: auto;
    background: var(--bg-color);
    border-radius: 32px 0 0 0;
    margin-top: 16px;
    box-shadow: -8px 0 16px rgba(0,0,0,0.03);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.admin-panel {
    max-width: 1200px;
    margin: 0 auto;
}

.admin-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
.admin-card:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
table th {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 16px;
    text-align: left;
}
table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}
table tr:hover td {
    background: var(--bg-color);
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 24px;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--elevation-1);
    transition: all 0.25s ease;
}
.stat-card:hover { box-shadow: var(--elevation-2); transform: translateY(-3px); }

.stat-card i {
    font-size: 1.9rem;
    color: #fff;
    background: var(--grad);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 8px;
    box-shadow: 0 8px 18px rgba(0,168,228,.25);
}

.stat-label { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); }
.stat-value { font-size: 2.2rem; font-weight: 800; color: var(--primary); }

/* --- RESPONSIVE OPTIMIZATION --- */
@media screen and (max-width: 900px) {
    .pos-layout { display: flex; flex-direction: column; }
    .pos-sidebar { flex-direction: row; width: 100%; height: auto; padding: 8px; overflow-x: auto; scrollbar-width: none; }
    .pos-sidebar::-webkit-scrollbar { display: none; }
    .pos-sidebar button { min-width: fit-content; padding: 10px 20px; }

    .pos-cart {
        position: fixed; bottom: -100%; left: 0; width: 100%; height: 85vh;
        border-radius: 28px 28px 0 0;
        z-index: 2000;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -12px 32px rgba(0,0,0,0.15);
    }
    .pos-cart.active { bottom: 0; }
    
    .mobile-cart-toggle {
        display: flex !important;
        position: fixed; bottom: 32px; right: 32px;
        width: 72px; height: 72px; border-radius: 24px; /* Squircle */
        background: var(--primary);
        color: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        align-items: center; justify-content: center;
        z-index: 1001;
    }
    .mobile-cart-toggle .badge {
        position: absolute; top: -4px; right: -4px;
        background: var(--danger); color: #fff;
        padding: 4px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: bold;
    }
}

/* Print Utilities - Comprehensive Thermal Support */
/* Legacy print classes removed, merged at bottom */

/* Page Size Configuration */
@page { margin: 0; }
body.print-80mm { @page { size: 80mm auto; } }
body.print-58mm { @page { size: 58mm auto; } }
body.print-a4 { @page { size: A4; } }

/* Receipt Styling */
.receipt-section {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.2;
    padding: 5mm;
}
.receipt-header h1 { font-size: 1.4rem; margin: 5px 0; text-align: center; }
.receipt-items { margin: 10px 0; border-top: 1px dashed #000; padding-top: 10px; }
.receipt-item { display: flex; justify-content: space-between; font-weight: bold; }
.receipt-total { 
    display: flex; justify-content: space-between; 
    font-size: 1.5rem; font-weight: 900; 
    border-top: 2px solid #000; margin-top: 10px; padding-top: 5px;
}
.receipt-footer { text-align: center; font-size: 0.8rem; margin-top: 15px; font-style: italic; }

tr.stornato td {
    text-decoration: line-through;
    color: var(--text-muted) !important;
}

/* UI Fixes for large containers and mobile leakage */
@media screen and (min-width: 1025px) and (pointer: fine) {
    .mobile-cart-toggle, .mobile-only {
        display: none !important;
    }
}

/* === ADMIN RESPONSIVE (tablet / mobile) — orchestrazione da tablet === */
@media screen and (max-width: 1024px) {
    /* Layout a righe: barra in alto (auto) + contenuto che scorre (1fr). Body resta invariato → POS/KDS non toccati. */
    .admin-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100vh; }
    /* min-width:0 evita il "grid blowout": senza, il contenuto largo allarga la colonna oltre lo schermo */
    .admin-sidebar, .admin-content { min-width: 0; max-width: 100vw; }
    .admin-sidebar {
        width: 100%; height: auto; overflow-x: hidden; overflow-y: visible;
        flex-direction: column; padding: 8px 10px; gap: 8px;
        border-right: none; border-bottom: 1px solid var(--border);
        position: static; z-index: 9999;
    }
    .admin-brand { padding: 6px 10px; margin-bottom: 4px; font-size: 1.1rem; }
    .admin-nav {
        flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; min-width: 0; max-width: 100%;
        gap: 6px; padding-bottom: 4px; scrollbar-width: none;
    }
    .admin-nav::-webkit-scrollbar { display: none; }
    /* Il gruppo Utenti/Impostazioni/Logout è un <div colonna> con display:flex INLINE: !important per scioglierlo in riga */
    .admin-nav > div { display: contents !important; }
    /* Tasti compatti: niente più "enormi" in orizzontale */
    .admin-nav-item { flex: 0 0 auto; width: auto; padding: 8px 12px; font-size: 0.82rem; gap: 7px; white-space: nowrap; margin: 0 !important; }
    .admin-nav-item i { font-size: 0.95rem; width: auto; }
    .admin-nav-item:hover { transform: none; }
    .admin-content {
        padding: 18px 14px; border-radius: 0; margin-top: 0;
        border-left: none; box-shadow: none;
        overflow-y: auto; overflow-x: hidden; min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    .admin-panel { max-width: 100%; }
    /* Collassa le griglie multi-colonna a colonna singola */
    .dashboard-secondary-grid,
    .dashboard-main-layout,
    .admin-panel > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    /* Tabelle scrollabili in orizzontale (niente sfondamento layout) */
    .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-panel table { min-width: 640px; }
    .admin-panel h1 { font-size: 1.4rem; }
    /* Header dei pannelli vanno a capo su schermi stretti */
    .admin-panel > div[style*="justify-content:space-between"],
    .admin-panel > div[style*="justify-content: space-between"] { flex-wrap: wrap; gap: 12px; }
}
@media screen and (max-width: 560px) {
    .admin-content { padding: 14px 10px; }
    .admin-panel h1 { font-size: 1.25rem; }
    #search-history { width: 100% !important; }
}

.admin-panel .stat-card {
    box-shadow: none;
    border: 1px solid var(--border);
}

.summary-card-md3 {
    border-radius: var(--radius-xl) !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
}

/* Designer Stampa refinements */
.form-group input[type="range"] {
    display: block;
    margin: 12px 0;
    accent-color: var(--primary);
}
.form-group span[id^="val-margin"] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-light);
    padding: 4px 12px;
    border-radius: var(--pill);
}

.drag-list {
    background: var(--bg-color);
    border: 1px dashed var(--border);
    border-radius: var(--radius-m);
    padding: 12px;
}

.drag-item {
    background: var(--primary-light);
    border-radius: var(--radius-s);
    margin-bottom: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--elevation-1);
}

/* MD3 Switch for Designer */
.drag-toggle {
    width: 44px;
    height: 24px;
    background: #E0E2EC;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.drag-toggle::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.drag-toggle.active {
    background: var(--primary);
}
.drag-toggle.active::after {
    left: 24px;
    background: #fff;
}

/* POS Cart Overflow Fix */
.cart-item-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.cart-note-input {
    flex: 1;
    min-width: 180px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text-main);
    font-family: inherit;
}
@media screen and (max-width: 1200px) {
    .cart-note-input {
        width: 100%;
        flex: none;
        margin-top: 8px;
    }
}

/* Designer Stampa Styles */
.designer-list {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius-m);
    padding: 16px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.designer-item {
    background: var(--primary-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 12px 16px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}
.designer-item:hover {
    background: var(--surface);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}
.designer-item:active { cursor: grabbing; }
.designer-item::before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    opacity: 0.3;
}

/* Ottimizzazione Stampa Termica 80mm */
/* Ottimizzazione Stampa Termica (58mm/80mm Reale) */
@media print {
    body * { visibility: hidden !important; }
    body, html { margin: 0; padding: 0; background: white; }
    
    #receipt-print, #receipt-print * {
        visibility: visible !important;
        color: black !important;
        background: white !important;
        font-family: 'Courier New', Courier, monospace !important; /* Termico puro */
        -webkit-font-smoothing: none; /* No antialiasing per stampanti termiche */
    }
    
    #receipt-print {
        position: absolute;
        left: 0;
        top: 0;
        padding: 2mm;
        margin: 0;
        width: 100%;
    }
    
    body.print-80mm #receipt-print { width: 75mm; font-size: 14px; }
    body.print-58mm #receipt-print { width: 52mm; font-size: 11px; }

    .receipt-header, .receipt-footer { text-align: center; margin-bottom: 10px; }
    .receipt-header h1 { font-size: 1.5em; margin: 0; font-weight: bold; text-transform: uppercase; }
    
    .order-id-giant {
        font-size: 2.5em;
        font-weight: 900;
        text-align: center;
        border: 2px solid black;
        margin: 5px 0;
        padding: 5px;
        letter-spacing: 2px;
    }

    .receipt-total { 
        border-top: 2px dashed black; 
        margin-top: 10px; 
        padding-top: 5px; 
        font-weight: 900; 
        font-size: 1.3em; 
        display: flex; 
        justify-content: space-between; 
    }
    
    /* Perfect CSS Grid for Items */
    .r-item-grid {
        display: grid;
        grid-template-columns: 1fr 4fr 2fr;
        gap: 5px;
        margin-bottom: 5px;
        font-weight: bold;
        align-items: start;
    }
    .r-item-grid .r-qty { text-align: left; }
    .r-item-grid .r-name { text-align: left; word-break: break-word; }
    .r-item-grid .r-price { text-align: right; }
    
    .r-item-notes {
        grid-column: 1 / -1;
        font-size: 0.9em;
        font-style: italic;
        padding-left: 10px;
        margin-top: -3px;
        margin-bottom: 5px;
    }

    .page-break { page-break-after: always; border-bottom: 2px dashed black; margin-bottom: 10px; }
    
    .qr-container {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid black;
    }
    .qr-container img {
        width: 120px;
        height: 120px;
        image-rendering: pixelated; /* Stampa termica definita */
    }
}
/* Category Grid System */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.category-item-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-item-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elevation-3);
    border-color: var(--primary-light);
}

.category-item-card .color-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    opacity: 0.8;
}

.category-item-card .cat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 8px;
}

.category-item-card .cat-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.category-item-card .cat-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-color);
    padding: 6px 12px;
    border-radius: var(--pill);
    width: fit-content;
}

.category-item-card .cat-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.category-item-card .action-btn-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    color: var(--text-muted);
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-size: 1.1rem;
}

.category-item-card .action-btn-circle:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.category-item-card .action-btn-circle.delete:hover {
    background: var(--danger);
    color: white;
}

.category-item-card .cat-icon-bg {
    position: absolute;
    box-shadow: var(--elevation-2);
}
.designer-item:active { cursor: grabbing; }
.designer-item::before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    opacity: 0.3;
}

/* Ottimizzazione Stampa Termica 80mm */
/* Ottimizzazione Stampa Termica (58mm/80mm Reale) */
@media print {
    body.print-flyer-mode .admin-layout,
    body.print-flyer-mode .modal-overlay,
    body.print-flyer-mode .toast-container,
    body.print-flyer-mode aside,
    body.print-flyer-mode nav { display: none !important; }
    
    body.print-flyer-mode #printable-flyer { 
        display: block !important; 
        position: absolute; 
        top: 0; left: 0; width: 100%; height: 100%;
        margin: 0; padding: 0;
    }
}

@media print {
    body:not(.print-flyer-mode) #printable-flyer { display: none !important; }
    body * { visibility: hidden !important; }
    body, html { margin: 0; padding: 0; background: white; }
    
    #receipt-print, #receipt-print * {
        visibility: visible !important;
        color: black !important;
        background: white !important;
        font-family: 'Courier New', Courier, monospace !important; /* Termico puro */
        -webkit-font-smoothing: none; /* No antialiasing per stampanti termiche */
    }
    
    #receipt-print {
        position: absolute;
        left: 0;
        top: 0;
        padding: 2mm;
        margin: 0;
        width: 100%;
    }
    
    body.print-80mm #receipt-print { width: 75mm; font-size: 14px; }
    body.print-58mm #receipt-print { width: 52mm; font-size: 11px; }

    .receipt-header, .receipt-footer { text-align: center; margin-bottom: 10px; }
    .receipt-header h1 { font-size: 1.5em; margin: 0; font-weight: bold; text-transform: uppercase; }
    
    .order-id-giant {
        font-size: 2.5em;
        font-weight: 900;
        text-align: center;
        border: 2px solid black;
        margin: 5px 0;
        padding: 5px;
        letter-spacing: 2px;
    }

    .receipt-total { 
        border-top: 2px dashed black; 
        margin-top: 10px; 
        padding-top: 5px; 
        font-weight: 900; 
        font-size: 1.3em; 
        display: flex; 
        justify-content: space-between; 
    }
    
    /* Perfect CSS Grid for Items */
    .r-item-grid {
        display: grid;
        grid-template-columns: 1fr 4fr 2fr;
        gap: 5px;
        margin-bottom: 5px;
        font-weight: bold;
        align-items: start;
    }
    .r-item-grid .r-qty { text-align: left; }
    .r-item-grid .r-name { text-align: left; word-break: break-word; }
    .r-item-grid .r-price { text-align: right; }
    
    .r-item-notes {
        grid-column: 1 / -1;
        font-size: 0.9em;
        font-style: italic;
        padding-left: 10px;
        margin-top: -3px;
        margin-bottom: 5px;
    }

    .page-break { page-break-after: always; border-bottom: 2px dashed black; margin-bottom: 10px; }
    
    .qr-container {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid black;
    }
    .qr-container img {
        width: 120px;
        height: 120px;
        image-rendering: pixelated; /* Stampa termica definita */
    }
}
/* Category Grid System */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.category-item-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-item-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elevation-3);
    border-color: var(--primary-light);
}

.category-item-card .color-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    opacity: 0.8;
}

.category-item-card .cat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 8px;
}

.category-item-card .cat-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.category-item-card .cat-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-color);
    padding: 6px 12px;
    border-radius: var(--pill);
    width: fit-content;
}

.category-item-card .cat-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

/* Redundant class removed - using global definition below */

.category-item-card .cat-icon-bg {
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-size: 5rem;
    opacity: 0.03;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Product Grid System */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.product-item-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.product-item-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elevation-3);
    border-color: var(--primary-light);
}

.product-item-card .prod-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--pill);
    width: fit-content;
    letter-spacing: 0.5px;
}

.product-item-card .prod-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.product-item-card .prod-price {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary);
    margin: 4px 0;
}

.product-item-card .prod-info-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 12px;
    background: var(--bg-color);
    border-radius: var(--radius-m);
}

.product-item-card .prod-info-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.product-item-card .prod-info-item b {
    color: var(--text-main);
}

.product-item-card .prod-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.product-item-card .action-btn-circle { width: 40px; height: 40px; font-size: 1.05rem; }
.product-item-card .action-btn-circle.delete { color: var(--danger, #E5484D); }

/* Indicatore drag&drop riordino */
.product-item-card[draggable="true"], .category-item-card[draggable="true"] { cursor: grab; }
.product-item-card.dragging, .category-item-card.dragging { opacity: 0.35; }
.product-item-card.drag-target, .category-item-card.drag-target {
    outline: 3px dashed var(--primary, #0061A4);
    outline-offset: 3px;
    transform: scale(1.03);
    transition: transform 0.12s;
}

/* Printer Grid System */
.printer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.printer-item-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--elevation-1);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.printer-item-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elevation-3);
    border-color: var(--primary-light);
}

.printer-item-card .printer-header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.printer-item-card .printer-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.printer-item-card .printer-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
}

.printer-item-card .printer-details {
    background: var(--bg-color);
    padding: 16px;
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.printer-item-card .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    align-items: center;
}

.printer-item-card .ip-badge {
    font-family: monospace;
    color: var(--primary);
    font-weight: 700;
}

.printer-item-card .sector-badge {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.printer-item-card .printer-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

.printer-item-card .status-dot {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
/* --- GLOBAL PREMIUM ACTION BUTTONS --- */
.action-btn, .action-btn-circle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text-muted);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 1px solid var(--border);
    font-size: 1.1rem;
    padding: 0;
    box-shadow: var(--elevation-1);
}

.action-btn:hover, .action-btn-circle:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 16px rgba(12, 48, 84, 0.2);
}

.action-btn.delete:hover, .action-btn-circle.delete:hover {
    background: #fff0f0;
    color: var(--danger);
    border-color: #ffcccc;
    box-shadow: 0 8px 16px rgba(186, 26, 26, 0.2);
}

.action-btn i, .action-btn-circle i {
    pointer-events: none;
}

.action-btn:active, .action-btn-circle:active {
    transform: scale(0.95);
}

/* --- MD3 Toggle Switch FIX --- */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E0E2EC;
  transition: .3s;
  border-radius: 34px;
  border: 2px solid #C4C6D0;
}

body.dark-mode .slider {
    background-color: #161B22;
    border-color: #30363D;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 2px;
  background-color: #74777F;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

input:checked + .slider:before {
  transform: translateX(22px);
  background-color: white;
}

/* Range input styling */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--primary-light);
    border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* --- NEXT-GEN KDS (Kitchen) --- */
.kds-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; }
.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; padding: 32px; }
.ticket { background: var(--surface); border-radius: var(--radius-l); border: 1px solid var(--border); box-shadow: var(--elevation-1); display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ticket:hover { transform: translateY(-4px); box-shadow: var(--elevation-3); }
.ticket-header { padding: 20px; background: color-mix(in srgb, var(--bg-color) 60%, var(--surface)); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; }
.ticket.urgent-mid .ticket-header { background: #FFF4E5; border-bottom-color: #FFD5A1; }
.ticket.urgent-high .ticket-header { background: #FFE5E5; border-bottom-color: #FFB3B3; }
.ticket.completed .ticket-header { background: #E5F6ED; border-bottom-color: #B3E5CC; }
.header-main .ticket-id { font-size: 0.8rem; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.header-main .ticket-customer { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); }
.ticket-time { text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.time-elapsed { display: block; font-size: 0.7rem; color: var(--accent); }
.ticket-table { padding: 12px 20px; background: #f1f3f9; font-size: 0.85rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.ticket-items { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.t-item { padding: 12px 16px; background: #f8f9fa; border-radius: var(--radius-m); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.t-item:hover { background: white; border-color: var(--primary); }
.t-item.done { opacity: 0.4; background: #eee; }
.t-qty { font-weight: 800; color: var(--primary); font-size: 1.1rem; min-width: 24px; }
.t-name { flex: 1; font-weight: 600; font-size: 0.95rem; }
.t-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.7rem; }
.t-item.done .t-check { background: var(--success); border-color: var(--success); color: var(--on-success); }
.ticket-footer { padding: 16px 20px; }
.btn-action { width: 100%; height: 50px; border-radius: var(--radius-m); border: none; background: var(--primary); color: white; font-weight: 800; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; }
.btn-action:active { transform: scale(0.98); }
.btn-action.ready { background: var(--success); color: var(--on-success); }
@keyframes pulse-urgent { 0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 87, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); } }
.urgent-high { animation: pulse-urgent 2s infinite; border-color: var(--accent) !important; }

/* --- NEXT-GEN POS --- */
.pos-layout { display: flex; height: 100vh; overflow: hidden; background: var(--surface); }
.pos-sidebar { width: 280px; background: white; border-right: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; z-index: 10; }
.pos-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-color); overflow-y: auto; padding: 24px; }
.pos-cart { width: 400px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; box-shadow: -4px 0 12px rgba(0,0,0,0.03); }

.pos-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; }
.pos-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--on-surface); }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }

/* Tessera prodotto (tema Sagra): contenuto a sinistra, nome sopra, prezzo grande in basso,
   accento del reparto sul bordo inferiore — si riconosce il reparto a colpo d'occhio. */
.product-card { background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); padding: 16px 16px 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: flex-start; text-align: left; justify-content: space-between; min-height: 132px; position: relative; overflow: hidden; }
.product-card .product-price { align-self: flex-start; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--elevation-2); border-color: var(--primary); }
.product-card:active { transform: scale(0.96); }
.product-card.out-of-stock { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }

.product-name { font-weight: 700; font-size: 1rem; color: var(--on-surface); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { font-weight: 900; color: var(--danger); font-size: 1.35rem; letter-spacing: -.3px; }

.cart-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.05rem; color: var(--on-surface); }
/* Lista articoli: priorità allo scroll, altezza minima garantita così non viene mai schiacciata dal footer */
.cart-items { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 32vh; }
/* Riga articolo COMPATTA (2 righe invece di 4) */
.cart-item { background: #f8f9fa; border-radius: var(--radius-m); padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; transition: 0.2s; }
.cart-item:hover { background: white; border-color: var(--primary-light); box-shadow: var(--elevation-1); }
@keyframes cartFlash { 0% { background: #d8f3e3; } 100% { background: #f8f9fa; } }

/* Footer: non può crescere oltre metà schermo → se serve scorre lui, la lista resta visibile */
.cart-footer { padding: 14px 18px; border-top: 2px dashed var(--border); background: var(--surface); box-shadow: 0 -10px 40px rgba(0,0,0,0.03); flex: 0 0 auto; max-height: 54vh; overflow-y: auto; border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
/* Tasto INCASSA: verde pieno, grande, il pulsante più evidente della cassa */
.checkout-btn { height: 60px; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.4px; background: linear-gradient(135deg, var(--pay), #3f9a55) !important; color: #fff !important; border: none !important; box-shadow: 0 10px 22px rgba(79,174,100,0.4) !important; border-radius: var(--radius-m); }
.checkout-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.checkout-btn:active { transform: translateY(0) scale(.99); }
/* Note articolo: nascoste di default, si aprono col bottino 🗒️ (risparmia spazio in lista) */
.cart-note-wrap { display: none; }
.cart-note-wrap.open { display: block; }

/* --- CATEGORY BUTTONS --- */
.category-btn { width: 100%; padding: 14px 20px; border-radius: var(--radius-m); border: 1px solid transparent; background: transparent; text-align: left; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.category-btn:hover { background: var(--surface-hover); color: var(--primary); }
.category-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.category-btn i { font-size: 1.1rem; width: 24px; text-align: center; }

/* Pulse animation for add to cart */
@keyframes pulse-add { 0% { transform: scale(1); } 50% { transform: scale(1.05); background: var(--primary-light); } 100% { transform: scale(1); } }
.pulse-animation { animation: pulse-add 0.4s ease-out; }

.stat-badge.primary-badge { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); }
.stat-badge i { margin-right: 6px; }

/* --- DASHBOARD POWER-UP (PREMIUM) --- */
.dashboard-kpi-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-bottom: 32px; 
}

.stat-card-md3.premium { 
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card-md3.premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    border-color: var(--primary-light);
}

.stat-card-md3.premium .stat-icon-wrapper { 
    width: 44px; 
    height: 44px; 
    border-radius: 12px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-card-md3.premium .stat-info { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

.stat-card-md3.premium .stat-label { 
    font-size: 0.8rem; 
    font-weight: 700; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.8px; 
}

.stat-card-md3.premium .stat-value { 
    font-size: 2.2rem; 
    font-weight: 800; 
    color: var(--on-surface); 
    letter-spacing: -1px;
}

.stat-card-md3.premium .stat-trend {
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.trend-up { color: var(--success); }
.trend-down { color: var(--error); }

/* Accesso Mobile - Premium Style */
.mobile-access-card {
    background: linear-gradient(135deg, var(--primary) 0%, #004a80 100%);
    color: white;
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(12, 48, 84, 0.2);
    position: relative;
    overflow: hidden;
}

.mobile-access-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.mobile-access-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.mobile-access-card .ip-box {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 18px;
    border-radius: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    backdrop-filter: blur(5px);
}

.mobile-access-card .qr-hint {
    font-size: 0.75rem;
    margin-top: 16px;
    opacity: 0.8;
    text-align: center;
    line-height: 1.4;
}

@keyframes pulse-dot { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.pulse-dot { animation: pulse-dot 2s infinite ease-in-out; }

/* ===================================================================
   FIX RESPONSIVE POS — tablet/telefono (incl. Honor Pad 8 ~1000px landscape).
   Posto in fondo per VINCERE sul blocco "NEXT-GEN POS" duplicato sopra.
   Breakpoint 1024px allineato al min-width:1025px che nasconde i controlli mobile
   → niente più zona morta 901-1024px (dove i tasti finivano fuori schermo).
   =================================================================== */
@media screen and (max-width: 1024px), (pointer: coarse) {
    .pos-layout { display: flex !important; flex-direction: column !important; height: 100vh; overflow: hidden; }
    /* Barra categorie: STICKY in alto + chip grandi e scorrevoli */
    .pos-sidebar {
        flex-direction: row !important; width: 100% !important; height: auto !important;
        padding: 10px !important; overflow-x: auto; overflow-y: hidden; flex-shrink: 0;
        border-right: none; border-bottom: 1px solid var(--border); gap: 10px; white-space: nowrap;
        position: sticky; top: 0; z-index: 20; background: var(--surface, #fff);
    }
    .pos-sidebar::-webkit-scrollbar { display: none; }
    .pos-sidebar > div:first-child { display: flex !important; grid-template-columns: none !important; gap: 8px; flex-shrink: 0; }
    .pos-sidebar h3 { display: none; }
    .category-btn { width: auto !important; white-space: nowrap; min-height: 46px; padding: 10px 18px !important; font-size: 0.98rem; border-radius: 999px; margin-bottom: 0 !important; }
    /* .pos-main è un flex in colonna: senza questo la barra categorie (flex: 0 1 auto) si
       LASCIA SCHIACCIARE dalla griglia prodotti — misurata a 17px su telefono contro i 64
       che le servono — e siccome overflow-x:auto forza anche overflow-y, i chip venivano
       tagliati a metà. Vietato restringerla. */
    .category-bar { flex: 0 0 auto; overflow-y: hidden; }
    .pos-main { flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 92px; min-height: 0; }
    /* Tessere prodotto grandi e touch-friendly */
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px; }
    .product-card { min-height: 120px; padding: 16px; }
    .product-name { font-size: 1.05rem; -webkit-line-clamp: 3; }
    .product-price { font-size: 1.35rem; }
    .pos-cart {
        position: fixed !important; bottom: -100%; left: 0; width: 100% !important; height: 88vh;
        border-left: none; border-radius: 24px 24px 0 0; z-index: 2000;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -12px 32px rgba(0,0,0,0.18);
    }
    .pos-cart.active { bottom: 0; }
    /* Pulsante carrello: barra larga in basso, più tappabile */
    .mobile-cart-toggle {
        display: flex !important; position: fixed; bottom: 16px; right: 16px;
        width: 72px; height: 72px; border-radius: 24px; background: var(--primary); color: #fff;
        box-shadow: 0 10px 28px rgba(0,0,0,0.3); align-items: center; justify-content: center;
        z-index: 1001; border: none; font-size: 1.6rem;
    }
    .mobile-only { display: flex !important; }
    .pos-header { flex-wrap: wrap; gap: 10px; }
    .pos-header h2 { font-size: 1.2rem; }
    #pos-search { height: 44px; }
    /* Modali: allinea in alto + scrollabili, così la tastiera non copre i tasti Conferma/metodo */
    .modal-overlay { align-items: flex-start !important; overflow-y: auto; padding: 10px; }
    .modal { max-height: 92dvh; overflow-y: auto; width: 94vw !important; margin: 8px auto; }
    .cash-input, #checkout-modal input[type="number"] { font-size: 16px; }
}

/* Fuori dal telefono la barra non esiste (sul tablet resta il bottone tondo).
   Dichiarata PRIMA della media query, altrimenti vincerebbe sul display:flex. */
#mobile-cart-bar { display: none; }

/* ===================================================================
   TELEFONO (<=560px): cassa COMPATTA.
   Su uno schermo da telefono il problema non è la larghezza delle tessere ma
   l'altezza sprecata prima dei prodotti (riga strumenti + titolo + ricerca +
   chip categorie) e il totale che si vedeva solo aprendo il carrello.
   Qui: intestazioni ridotte all'essenziale, ricerca a tutta larghezza, tessere
   più basse e BARRA IN BASSO con pezzi/totale/PAGA al posto del bottone tondo.
   =================================================================== */
@media screen and (max-width: 560px) {
    /* Riga strumenti: icone compatte, non deve rubare mezzo schermo */
    .pos-sidebar { padding: 6px 8px !important; gap: 6px; }
    .pos-sidebar .btn { padding: 8px 12px !important; font-size: 0.88rem; min-height: 40px; }
    .pos-sidebar > div:first-child { gap: 6px; margin-bottom: 0 !important; }

    /* Il titolo "Tutti i Prodotti" è già scritto nella chip di categoria attiva */
    .pos-header { gap: 6px; margin-bottom: 8px; }
    .pos-header h2 { display: none; }
    .pos-header > div { width: 100% !important; }
    #pos-search { height: 42px; font-size: 16px; }  /* 16px = iOS non zooma al focus */

    /* I chip restano da 48px (bersaglio giusto per un dito): il blocco generale
       `.category-bar .category-btn` è più in basso nel file e vincerebbe comunque. */
    .category-bar { gap: 6px; padding-bottom: 6px; flex: 0 0 auto; overflow-y: hidden; }

    .pos-main { padding: 10px 10px 78px; }          /* spazio per la barra in basso */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .product-card { min-height: 86px; padding: 10px; }
    .product-name { font-size: 0.92rem; -webkit-line-clamp: 2; }
    .product-price { font-size: 1.1rem; }

    /* Carrello: quasi a tutto schermo, righe compatte */
    .pos-cart { height: 94vh; }
    .cart-items { padding: 8px; gap: 6px; min-height: 0; }
    .cart-item { padding: 8px 10px; }
    .cart-footer { padding: 10px 12px; }
    .modal { width: 96vw !important; }

    /* Barra inferiore al posto del bottone tondo */
    .mobile-cart-toggle { display: none !important; }
    #mobile-cart-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
        gap: 8px; padding: 8px 10px; background: var(--surface, #fff);
        border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
    }
    #mcb-open {
        flex: 1 1 auto; display: flex; align-items: baseline; justify-content: space-between;
        gap: 10px; padding: 10px 14px; min-height: 52px; border: 1px solid var(--border);
        border-radius: 14px; background: var(--bg-color, #f4f6f8); color: var(--text-main, #10233b);
        font-size: 0.9rem;
    }
    #mcb-open strong { font-size: 1.25rem; font-weight: 800; }
    #mcb-pay {
        /* on-primary, non #fff: in tema notturno il primary è ciano chiaro */
        flex: 0 0 auto; min-width: 116px; min-height: 52px; padding: 10px 18px;
        border: none; border-radius: 14px; background: var(--primary); color: var(--on-primary, #fff);
        font-weight: 800; font-size: 1.05rem; letter-spacing: .5px;
    }
    #mcb-pay:disabled { opacity: .45; }
    /* Con un modale aperto la barra sparisce: copriva l'ultima riga del modale pagamento,
       cioè proprio i metodi (contanti/carta/tessera). La classe la mette pos_new.js. */
    body.modal-open #mobile-cart-bar { display: none !important; }
    /* Un po' d'aria in fondo ai modali, così l'ultima riga non finisce a filo bordo */
    .modal { padding-bottom: 18px; }

    /* ---- Dashboard Admin sul telefono ----
       Le 4 card KPI stavano su UNA riga da 4 colonne: a 375px diventavano larghe 72px
       con dentro un'icona da 44px, e le etichette venivano tagliate (l'icona e il testo
       sono in flex e senza min-width:0 il testo non può nemmeno andare a capo). */
    .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 18px; }
    .stat-card-md3.premium { padding: 14px; border-radius: 18px; gap: 10px; }
    .stat-card-md3.premium .stat-info { min-width: 0; }
    .stat-card-md3.premium .stat-icon-wrapper { width: 36px; height: 36px; font-size: 1rem; flex: 0 0 auto; }
    .stat-card-md3.premium .stat-label { font-size: 0.68rem; letter-spacing: 0.4px; }
    .stat-card-md3.premium .stat-value { font-size: 1.5rem; letter-spacing: -0.5px; }
    .mobile-access-card { padding: 18px; border-radius: 18px; }
    .mobile-access-card .ip-box { padding: 12px; font-size: 0.95rem; word-break: break-all; }

    /* ---- Tabelle dell'Admin sul telefono ----
       Ogni tabella è larga ~640px dentro una card da 353px con overflow:hidden →
       le ultime colonne (Azioni, Dettagli, Stato…) erano semplicemente TAGLIATE, senza
       modo di raggiungerle. Ora la card scorre in orizzontale e la tabella tiene una
       larghezza minima leggibile invece di spremersi. */
    /* !important perché le card delle tabelle hanno `overflow:hidden` scritto INLINE in
       Admin.html (serve a tagliare gli angoli arrotondati): senza, l'inline vince. */
    .admin-panel .admin-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    /* Stesso trucco per i contenitori intermedi con overflow inline (es. Analisi Vendite,
       dove la tabella sta in un <div style="overflow:hidden"> dentro la card). */
    .admin-panel .admin-card > div[style*="overflow:hidden"],
    .admin-panel .admin-card > div[style*="overflow: hidden"] { overflow-x: auto !important; }
    .admin-panel .admin-card table { min-width: 620px; }
    .admin-panel .admin-card th,
    .admin-panel .admin-card td { padding: 10px 12px; font-size: 0.9rem; }

    /* ---- Righe di filtri e bottoni ----
       Sono <div> con display:flex/grid scritto inline (quindi non intercettabile da una
       classe): sul telefono andavano oltre lo schermo perché non andavano a capo. */
    .admin-panel [style*="display:flex"],
    .admin-panel [style*="display: flex"] { flex-wrap: wrap !important; }
    .admin-panel [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .admin-panel .admin-card .form-control,
    .admin-panel .admin-card input,
    .admin-panel .admin-card select { max-width: 100%; }
    .admin-panel .admin-card .btn { flex: 1 1 auto; }
    .admin-panel h1 { font-size: 1.3rem; }
    .admin-panel .admin-card h3 { font-size: 1.05rem; }
}

/* ===================================================================
   Cassa desktop / tablet in ORIZZONTALE (>1024px): la colonna carrello a
   destra deve restare usabile anche con poca altezza (landscape tablet).
   Senza min-height:0 la lista articoli non si restringe e spinge fuori il
   footer → il tasto "Procedi al pagamento" spariva sotto lo schermo.
   =================================================================== */
@media screen and (min-width: 1025px) and (pointer: fine) {
    .pos-cart { max-height: 100vh; overflow: hidden; }
    .cart-items { min-height: 0; }
    .cart-footer { flex-shrink: 0; max-height: 70vh; overflow-y: auto; }
}

/* ===================================================================
   INTERRUTTORE MANUALE LAYOUT CASSA (Impostazioni Cassa → Layout schermo)
   body.force-mobile  → layout mobile sempre (anche su PC/mouse)
   body.force-desktop → layout desktop 3 colonne sempre (anche su touch)
   (senza classe = Automatico, gestito dalle media query sopra)
   =================================================================== */
body.force-mobile .pos-layout { display:flex !important; flex-direction:column !important; height:100vh; overflow:hidden; }
body.force-mobile .pos-sidebar { flex-direction:row !important; width:100% !important; height:auto !important; padding:10px !important; overflow-x:auto; overflow-y:hidden; flex-shrink:0; border-right:none; border-bottom:1px solid var(--border); gap:10px; white-space:nowrap; position:sticky; top:0; z-index:20; background:var(--surface,#fff); }
body.force-mobile .pos-sidebar > div:first-child { display:flex !important; gap:8px; flex-shrink:0; }
body.force-mobile .pos-sidebar h3 { display:none; }
body.force-mobile .category-btn { width:auto !important; white-space:nowrap; min-height:46px; padding:10px 18px !important; border-radius:999px; margin-bottom:0 !important; }
body.force-mobile .pos-main { flex:1 1 auto; overflow-y:auto; padding:14px 14px 92px; min-height:0; }
body.force-mobile .products-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:12px; }
body.force-mobile .pos-cart { position:fixed !important; bottom:-100%; left:0; width:100% !important; height:88vh; max-height:none; border-left:none; border-radius:24px 24px 0 0; z-index:2000; transition:bottom .3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 -12px 32px rgba(0,0,0,.18); overflow:hidden; }
body.force-mobile .pos-cart.active { bottom:0; }
body.force-mobile .mobile-cart-toggle { display:flex !important; position:fixed; bottom:16px; right:16px; width:72px; height:72px; border-radius:24px; background:var(--primary); color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.3); align-items:center; justify-content:center; z-index:1001; border:none; font-size:1.6rem; }
body.force-mobile .mobile-only { display:flex !important; }

body.force-desktop .pos-layout { flex-direction:row !important; }
body.force-desktop .pos-sidebar { flex-direction:column !important; width:280px !important; height:auto; overflow-x:visible; border-bottom:none; border-right:1px solid var(--border); position:static; white-space:normal; }
body.force-desktop .pos-sidebar h3 { display:block; }
body.force-desktop .category-btn { width:100% !important; }
body.force-desktop .pos-main { padding:24px; }
body.force-desktop .pos-cart { position:static !important; bottom:auto; left:auto; width:400px !important; height:auto; max-height:100vh; overflow:hidden; border-left:1px solid var(--border); border-radius:0; box-shadow:none; }
body.force-desktop .cart-items { min-height:0; }
body.force-desktop .cart-footer { flex-shrink:0; max-height:70vh; overflow-y:auto; }
body.force-desktop .mobile-cart-toggle, body.force-desktop .mobile-only { display:none !important; }
body.force-desktop .products-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; }

/* ===== Barra categorie orizzontale (POS) — chip colorate per reparto ===== */
.category-bar { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.category-bar .category-btn {
    width: auto; margin: 0; padding: 12px 20px; min-height: 48px;
    border-radius: var(--radius-m); text-align: center; justify-content: center;
    font-weight: 800; font-size: .95rem; letter-spacing: -.2px;
    background: color-mix(in srgb, var(--bg-color) 70%, var(--surface));
    color: var(--text-muted); border: 1.5px solid var(--border);
}
.category-bar .category-btn:hover { background: var(--surface); color: var(--text-main); }
/* Selezionata: piena, nel colore del reparto (o navy per "Tutti") */
.category-bar .category-btn.active { background: var(--secondary); color: #fff; border-color: transparent; }
.category-bar .category-btn.has-color.active {
    background: var(--cat-color); color: #fff; border-color: transparent;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cat-color) 40%, transparent);
}
/* Non selezionata ma con colore: pallino del reparto come indizio */
.category-bar .category-btn.has-color:not(.active)::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--cat-color); margin-right: 8px; flex: 0 0 auto;
}
@media (max-width: 900px) { .category-bar { flex-wrap: nowrap; overflow-x: auto; } .category-bar .category-btn { flex: 0 0 auto; } }
/* Tema sera: chip "Tutti i Prodotti" selezionata in ciano brillante (il navy sparirebbe sullo sfondo scuro) */
body.dark-mode .category-bar .category-btn.active { background: var(--primary); color: var(--on-primary); }
body.dark-mode .category-bar .category-btn { background: color-mix(in srgb, var(--surface) 70%, var(--bg-color)); }

/* ==================================================================
   KDS CUCINA — restyle: numero comanda gigante, urgenza a colpo d'occhio,
   righe piatto grandi da toccare, tasto PRONTO pieno.
   ================================================================== */
.kds-layout { padding: 20px 22px 28px; }
.kds-header { padding: 18px 26px; border-radius: var(--radius-l); margin-bottom: 22px; }
.kds-header h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.4px; }
.tickets-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; padding: 0; }

/* Card comanda: barra di stato a sinistra (verde=pronta, arancio/rosso=in ritardo) */
.ticket { border-left: 6px solid var(--primary); border-radius: var(--radius-l); }
.ticket.urgent-mid { border-left-color: var(--warning); }
.ticket.urgent-high { border-left-color: var(--danger); }
.ticket.completed { border-left-color: var(--success); }

.ticket-header { padding: 16px 18px 14px; align-items: center; }
/* Il numero è il dato che si legge da 3 metri: dominante */
.header-main .ticket-id { font-size: 2.6rem; font-weight: 900; line-height: .95; letter-spacing: -2px; color: var(--text-main); margin: 0; }
.header-main .ticket-customer { font-size: .92rem; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.ticket-time { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ticket-time > span:first-child { font-size: .8rem; color: var(--text-muted); font-weight: 700; }
.time-elapsed { font-size: 1rem !important; font-weight: 900; padding: 3px 11px; border-radius: var(--pill);
    background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.ticket.urgent-mid .time-elapsed { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.ticket.urgent-high .time-elapsed { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.ticket.completed .time-elapsed { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }

.ticket-table { padding: 9px 18px; background: color-mix(in srgb, var(--bg-color) 65%, var(--surface)); font-weight: 800; color: var(--text-main); font-size: .84rem; }
.ticket-items { padding: 14px 16px; gap: 8px; }
/* Riga piatto: alta da toccare col guanto, quantità come pastiglia */
.t-item { padding: 13px 14px; min-height: 56px; background: color-mix(in srgb, var(--bg-color) 55%, var(--surface)); border-radius: var(--radius-s); }
.t-item:hover { background: var(--surface); border-color: var(--border); }
.t-qty { min-width: 38px; height: 32px; border-radius: 9px; background: var(--secondary); color: #fff; font-size: 1.05rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; }
.t-name { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.t-item.done { opacity: .45; background: color-mix(in srgb, var(--success) 10%, transparent); }
.t-item.done .t-name { text-decoration: line-through; }
/* Tasto PRONTO / CONSEGNA: pieno e grande */
.ticket-footer { padding: 12px 16px 16px; }
.btn-action { height: 58px; font-size: 1.05rem; font-weight: 900; letter-spacing: .4px;
    background: linear-gradient(135deg, var(--pay), #3f9a55); box-shadow: 0 8px 18px color-mix(in srgb, var(--pay) 38%, transparent); }
.btn-action.ready { background: linear-gradient(135deg, var(--secondary), var(--primary)); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 34%, transparent); }
body.dark-mode .t-qty { color: var(--on-primary); background: var(--primary); }

/* ==================================================================
   ADMIN — restyle: KPI con tessera-icona, card e tabelle coerenti
   ================================================================== */
.stat-card, .summary-card-md3 { position: relative; }
.stat-card { border-radius: var(--radius-l); }
/* La prima icona dentro una stat-card diventa una tessera colorata in alto a destra */
.stat-card > i:first-child, .stat-card .stat-icon {
    position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.05rem; color: #fff;
    background: var(--grad-navy); box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 30%, transparent);
}
.admin-card { border-radius: var(--radius-l); }
.admin-sidebar { border-right: 1px solid var(--border); }
/* Header KDS: fascia navy brand (una regola più in basso lo rendeva bianco su bianco) */
.kds-header { background: var(--grad-navy) !important; color: #fff; border: none; box-shadow: var(--elevation-2); position: static; }
.kds-header h1, .kds-header h1 i { color: #fff !important; }
.kds-header .stat-badge { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff !important; font-weight: 800; }
.kds-header .stat-badge.primary-badge { background: rgba(255,255,255,.92); color: var(--secondary) !important; border-color: transparent; }

/* Tema sera: le intestazioni di urgenza avevano fondi chiari fissi → il numero comanda
   (testo chiaro) diventava illeggibile. Qui diventano tinte SCURE dello stesso colore. */
body.dark-mode .ticket.urgent-mid .ticket-header { background: color-mix(in srgb, var(--warning) 22%, var(--surface)) !important; border-bottom-color: color-mix(in srgb, var(--warning) 40%, var(--surface)) !important; }
body.dark-mode .ticket.urgent-high .ticket-header { background: color-mix(in srgb, var(--danger) 22%, var(--surface)) !important; border-bottom-color: color-mix(in srgb, var(--danger) 40%, var(--surface)) !important; }
body.dark-mode .ticket.completed .ticket-header { background: color-mix(in srgb, var(--success) 20%, var(--surface)) !important; border-bottom-color: color-mix(in srgb, var(--success) 38%, var(--surface)) !important; }

/* ===== ADMIN — KPI a tessera piena (come il tema approvato) ===== */
.stat-card-md3.premium { border-radius: var(--radius-l); box-shadow: var(--elevation-1); border: 1px solid var(--border); }
.stat-card-md3.premium:hover { box-shadow: var(--elevation-2); }
/* tessera icona: piena, colore distinto per posizione (le tinte pallide inline vengono sostituite) */
.stat-card-md3.premium .stat-icon-wrapper {
    width: 50px; height: 50px; border-radius: 14px; color: #fff !important;
    background: linear-gradient(135deg, #1890C0, #0C3054) !important;
    box-shadow: 0 6px 14px rgba(24,144,192,.30) !important; flex: 0 0 auto;
}
.dashboard-kpi-grid > .stat-card-md3:nth-child(2) .stat-icon-wrapper { background: linear-gradient(135deg, var(--success), #2f7a43) !important; box-shadow: 0 6px 14px rgba(79,174,100,.30) !important; }
.dashboard-kpi-grid > .stat-card-md3:nth-child(3) .stat-icon-wrapper { background: linear-gradient(135deg, var(--warning), #e07a12) !important; box-shadow: 0 6px 14px rgba(242,144,31,.30) !important; }
.dashboard-kpi-grid > .stat-card-md3:nth-child(4) .stat-icon-wrapper { background: linear-gradient(135deg, #00A8E4, #1890C0) !important; box-shadow: 0 6px 14px rgba(0,168,228,.30) !important; }
.dashboard-kpi-grid > .stat-card-md3:nth-child(5) .stat-icon-wrapper { background: linear-gradient(135deg, #8b5cf6, #6d3fd6) !important; box-shadow: 0 6px 14px rgba(139,92,246,.30) !important; }
/* il numero è il protagonista */
.stat-card-md3.premium .stat-value { font-size: 2.3rem; font-weight: 900; letter-spacing: -1.2px; color: var(--text-main); }
.stat-card-md3.premium .stat-label { font-weight: 800; letter-spacing: .5px; color: var(--text-muted); }
/* navigazione admin coerente col resto */
.admin-nav-item { border-radius: var(--radius-s); font-weight: 700; }
.admin-nav-item.active { background: var(--secondary); color: #fff; }
body.dark-mode .admin-nav-item.active { background: var(--primary); color: var(--on-primary); }
body.dark-mode .admin-nav-item.active i { color: var(--on-primary); }

/* ===================== PAGAMENTO (cassa) ===================== */
.modal.pay-modal{width:min(1180px,96vw);max-width:96vw;display:grid;grid-template-columns:340px 1fr;padding:0;overflow:hidden;gap:0}
.pay-modal>*{min-width:0}
/* colonna ordine */
.pay-order{background:color-mix(in srgb,var(--bg-color) 55%,var(--surface));border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column}
.pay-order-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pay-order-head span{font-size:.7rem;font-weight:800;letter-spacing:1.4px;color:var(--text-muted);text-transform:uppercase}
.pay-back{display:none}
.pay-order-toggle{display:none;border:1.5px solid var(--border);background:var(--surface);color:var(--text-main);border-radius:100px;padding:8px 14px;font-weight:800;font-size:.8rem;cursor:pointer;font-family:inherit}
.pay-order-items{overflow-y:auto;max-height:46vh}
.pay-li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.pay-li .q{min-width:30px;height:25px;border-radius:8px;background:var(--c,var(--primary));color:#fff;display:grid;place-items:center;font-weight:900;font-size:.8rem;flex:0 0 auto}
.pay-li .n{flex:1;font-weight:700;font-size:.9rem;color:var(--text-main);line-height:1.2}
.pay-li .p{font-weight:800;font-size:.9rem;white-space:nowrap}
.pay-order-foot{margin-top:auto;padding-top:12px}
.pay-order-foot .r{display:flex;justify-content:space-between;font-size:.88rem;color:var(--text-muted);padding:3px 0}
.pay-order-foot .r b{color:var(--text-main)}
.pay-order-foot .r.disc b{color:var(--success)}
.pay-order-fields{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pay-order-fields .form-control{padding:11px 13px;font-size:.92rem}
.pay-asporto{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--text-main);margin:0}
.pay-asporto input{width:20px;height:20px;flex:0 0 auto}
/* colonna pagamento */
.pay-main{padding:18px 20px;display:flex;flex-direction:column;min-height:0}
.pay-methods{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.pay-methods .btn-choice{min-height:70px;flex-direction:column;gap:7px;font-size:.84rem;font-weight:800;border-radius:14px;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);display:flex;align-items:center;justify-content:center}
.pay-methods .btn-choice i{font-size:1.15rem}
.pay-methods .btn-choice.active{background:var(--secondary);color:#fff;border-color:transparent;box-shadow:var(--elevation-2)}
body.dark-mode .pay-methods .btn-choice.active{background:var(--primary);color:var(--on-primary)}
.pay-amounts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.pay-box{border:1.5px solid var(--border);border-radius:16px;padding:13px 16px;background:var(--surface)}
.pay-box-lab{font-size:.66rem;font-weight:800;letter-spacing:1.1px;color:var(--text-muted);text-transform:uppercase}
.pay-box-val{font-size:2.3rem;font-weight:900;letter-spacing:-1.4px;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--text-main)}
.pay-box.rest{background:color-mix(in srgb,var(--success) 12%,var(--surface));border-color:color-mix(in srgb,var(--success) 34%,var(--border))}
.pay-box.rest .pay-box-val{color:color-mix(in srgb,var(--success) 78%,#000);font-size:2.9rem}
body.dark-mode .pay-box.rest .pay-box-val{color:#8BE0A6}
.pay-box.rest .modal-resto.neg{color:var(--danger)}
.pay-box-hint{font-size:.78rem;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin-top:2px}
.pay-box-hint .cash-input{width:110px;padding:4px 8px;border:1.5px solid var(--border);border-radius:9px;font-size:.95rem;font-weight:800;background:var(--surface);color:var(--text-main);text-align:right}
.pay-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:12px}
.pay-qb{border:1.5px solid var(--border);background:var(--surface);border-radius:12px;padding:14px 4px;font-weight:800;font-size:1rem;color:var(--text-main);cursor:pointer;font-family:inherit;min-height:52px}
.pay-qb:active{transform:scale(.97)}
.pay-qb.exact{background:var(--secondary);color:#fff;border-color:transparent}
body.dark-mode .pay-qb.exact{background:var(--primary);color:var(--on-primary)}
.pay-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.pay-k{border:1.5px solid var(--border);background:var(--surface);border-radius:12px;padding:15px;font-size:1.3rem;font-weight:800;color:var(--text-main);cursor:pointer;font-family:inherit;min-height:58px}
.pay-k:active{transform:scale(.97);background:var(--bg-color)}
.pay-k.del{color:var(--danger)}
/* tessera */
.pay-wallet-row{display:flex;gap:9px;margin-bottom:10px}
.pay-wallet-btn{background:var(--secondary);color:#fff;font-weight:800;padding:0 22px;border-radius:12px}
body.dark-mode .pay-wallet-btn{background:var(--primary);color:var(--on-primary)}
.pay-note{font-size:.82rem;color:var(--text-muted);margin-top:8px;font-weight:600}
/* misto */
.pay-split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pay-sbox{border:1.5px solid var(--border);border-radius:14px;padding:12px;background:var(--surface)}
.pay-sbox label{font-size:.66rem;font-weight:800;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;display:block;margin-bottom:5px}
.pay-sbox .form-control{padding:10px 12px;font-size:1.2rem;font-weight:800;text-align:right}
.pay-resid{margin-top:12px;background:color-mix(in srgb,var(--warning) 14%,var(--surface));border:1.5px solid color-mix(in srgb,var(--warning) 34%,var(--border));border-radius:12px;padding:12px 14px;font-weight:800;color:color-mix(in srgb,var(--warning) 75%,#000);display:flex;justify-content:space-between}
body.dark-mode .pay-resid{color:#F5C486}
.pay-resid.ok{background:color-mix(in srgb,var(--success) 14%,var(--surface));border-color:color-mix(in srgb,var(--success) 34%,var(--border));color:color-mix(in srgb,var(--success) 75%,#000)}
body.dark-mode .pay-resid.ok{color:#8BE0A6}
/* azioni */
.pay-actions{margin-top:auto;padding-top:14px;display:grid;grid-template-columns:1fr 2.2fr;gap:10px}
.pay-actions .btn{border-radius:14px;padding:19px;font-weight:900;font-size:1.08rem;min-height:64px}
.pay-cancel{background:var(--bg-color);color:var(--text-muted);border:none}
.pay-confirm{background:linear-gradient(135deg,var(--success),#3f9a55)!important;color:var(--on-success)!important;border:none!important;box-shadow:0 10px 22px rgba(79,174,100,.36)!important}
/* TABLET: ordine diventa striscia in alto */
@media(max-width:1100px){
  .modal.pay-modal{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .pay-order{border-right:none;border-bottom:1px solid var(--border);padding:12px 16px}
  .pay-order-items,.pay-order-foot{display:none}
  .pay-order.open .pay-order-items,.pay-order.open .pay-order-foot{display:block}
  .pay-order-toggle{display:inline-block}
  .pay-order-fields{flex-direction:row;flex-wrap:wrap;margin-top:10px;padding-top:10px}
  .pay-order-fields .form-control{flex:1 1 160px}
  .pay-box-val{font-size:2.5rem}
  .pay-box.rest .pay-box-val{font-size:3.1rem}
  .pay-k{min-height:66px;font-size:1.4rem}
}
/* TELEFONO */
@media(max-width:640px){
  .modal.pay-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .pay-main{padding:14px}
  .pay-methods{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px}
  .pay-methods .btn-choice{flex:0 0 92px}
  .pay-amounts{grid-template-columns:1fr;gap:9px}
  .pay-box-val{font-size:2.1rem}
  .pay-box.rest .pay-box-val{font-size:2.8rem}
  .pay-quick{grid-template-columns:repeat(3,1fr)}
  .pay-split{grid-template-columns:1fr}
  .pay-actions{grid-template-columns:1fr}
  .pay-cancel{order:2;min-height:48px;padding:12px;font-size:.95rem}
  /* Il modale pagamento è alto 100dvh, ma il contenitore dei modali sul touch ha
     `padding:10px` + `align-items:flex-start`: quei 10px spingevano l'ultima riga
     (tastierino e metodi) sotto il bordo dello schermo. Qui la cassa prende tutto lo
     schermo e a scorrere è il contenuto interno, non la finestra. */
  #checkout-modal{padding:0 !important;overflow:hidden !important;align-items:stretch !important}
  /* e niente margine: il blocco touch dei modali mette `margin:8px auto`, che rimetteva
     fuori schermo esattamente 8px di tastierino */
  #checkout-modal .pay-modal{margin:0 !important;width:100vw !important}
  .pay-main{overflow-y:auto;min-height:0}
  /* I metodi restano SEMPRE in vista: sono la prima scelta da fare e con lo scorrimento
     finivano sopra il bordo. Sticky in cima al contenuto, con sfondo pieno. */
  /* `flex:0 0 auto` è la parte che conta: `.pay-main` è un flex in colonna e questa riga, avendo
     `overflow-x:auto`, si lasciava SCHIACCIARE dal resto (misurata alta 10px = metodi invisibili).
     Stessa trappola della barra categorie. Lo sticky serve solo a tenerla in cima allo scorrimento. */
  .pay-methods{flex:0 0 auto;position:sticky;top:0;z-index:3;background:var(--surface);
               padding-top:2px;box-shadow:0 6px 10px -8px rgba(0,0,0,.35);
               flex-wrap:wrap;overflow-x:visible}
  /* Tutti e cinque i metodi a schermo su due righe: prima scorrevano in orizzontale e
     Voucher/Misto restavano fuori — un metodo che non si vede è un metodo che non esiste. */
  .pay-methods .btn-choice{flex:1 1 104px;min-height:52px}
  /* Uscita in alto: "Annulla" in fondo sembra annullare l'ordine, questo no. */
  .pay-back{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);
            background:var(--surface);color:var(--text-main);border-radius:100px;
            padding:8px 14px;font-weight:800;font-size:.85rem;font-family:inherit;min-height:40px}
  .pay-order-head{gap:8px}
  .pay-order-head span{flex:1 1 auto}
}

/* ============ ALLINEAMENTO AL NUOVO TEMPLATE (tasti, card, tabelle) ============
   Bottoni a rettangolo arrotondato con colori pieni: niente gradienti/pillole,
   coerenti con la cassa e con i due temi (giorno/sera). */
.btn{border-radius:var(--radius-m);font-weight:800;padding:13px 22px;min-height:46px;letter-spacing:-.1px;box-shadow:none}
.btn:active:not(:disabled){transform:scale(.985)}
.btn-primary{background:var(--primary-strong,var(--primary));color:var(--on-primary,#fff);box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 30%,transparent)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 34%,transparent);transform:translateY(-1px)}
body.dark-mode .btn-primary{color:var(--on-primary)}
body.dark-mode .btn-primary:hover:not(:disabled){background:var(--primary-hover);color:var(--on-primary)}
.btn-secondary{background:color-mix(in srgb,var(--bg-color) 70%,var(--surface));color:var(--text-main);border:1.5px solid var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--surface);border-color:var(--primary);color:var(--primary)}
.btn-success{background:var(--success);color:var(--on-success);box-shadow:0 6px 14px rgba(79,174,100,.28)}
.btn-success:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}
.btn-danger{background:var(--danger);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--danger) 26%,transparent)}
.btn-danger:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}

/* Card e pannelli: superficie calda, bordo morbido, ombra coerente */
.admin-card,.stat-card,.summary-card-md3{border-radius:var(--radius-l);border:1px solid var(--border);background:var(--surface);box-shadow:var(--elevation-1)}
.admin-card:hover{box-shadow:var(--elevation-2)}

/* Tabelle: intestazioni discrete, righe leggibili, angoli morbidi */
table th{background:transparent;color:var(--text-muted);font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-bottom:1.5px solid var(--border);padding:10px 14px}
table td{border-bottom:1px solid var(--border);padding:13px 14px;color:var(--text-main)}
table tbody tr:hover td{background:color-mix(in srgb,var(--bg-color) 45%,var(--surface))}

/* Campi: stessa famiglia dei riquadri della cassa */
.form-control,input[type="text"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],select,textarea{border-radius:var(--radius-s);border:1.5px solid var(--border);background:var(--surface);color:var(--text-main)}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);outline:none}

/* Navigazione Admin: voce attiva piena come le chip della cassa */
.admin-sidebar .nav-item.active,.admin-sidebar .nav-link.active{background:var(--secondary);color:#fff;border-radius:var(--radius-m)}
body.dark-mode .admin-sidebar .nav-item.active,body.dark-mode .admin-sidebar .nav-link.active{background:var(--primary);color:var(--on-primary)}

/* Interruttori e badge coerenti */
.badge,.chip-tag{border-radius:100px;font-weight:800;font-size:.72rem}

/* ====== BRANDING A PROVA DI ERRORE ======
   Il colore scelto dall'organizzatore guida tutta l'interfaccia, ma il testo sopra
   di esso usa sempre --on-primary (calcolato sul contrasto reale) e i testi colorati
   su fondo chiaro usano --primary-ink (versione scurita quando serve). */
:root{ --on-primary:#FFFFFF; --primary-ink:var(--primary); }

/* Pulsanti e stati pieni: testo leggibile qualunque sia il colore del brand */
.btn-primary,.btn-primary:hover:not(:disabled){color:var(--on-primary)}
.category-bar .category-btn.active:not(.has-color),
.pay-methods .btn-choice.active,
.pay-qb.exact,
.admin-sidebar .nav-item.active,.admin-sidebar .nav-link.active{color:var(--on-primary)}
.pay-wallet-btn{color:var(--on-primary)}
.btn-action{background:var(--primary-strong,var(--primary));color:var(--on-primary)}
.btn-action.ready{background:var(--success);color:var(--on-success)}

/* Testi/icone colorati su fondo chiaro: mai slavati */
.btn-secondary:hover:not(:disabled){color:var(--primary-ink)}
.stat-label i,.admin-card h3 i,.section-title i{color:var(--primary-ink)}

/* Il colore del brand non tocca gli stati di sistema: verde=ok, rosso=errore, arancio=attenzione
   restano riconoscibili anche con brand personalizzato (sicurezza operativa in cassa). */
.pay-confirm,.checkout-btn{background:linear-gradient(135deg,var(--success),#3f9a55)!important;color:var(--on-success)!important}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:var(--on-success)}

/* Fondi success pieni scritti nel markup storico: il verde resta aziendale, il testo
   usa il token misurato (4,83:1). I gradienti più scuri mantengono invece il bianco. */
[style*="background: var(--success"],
[style*="background:var(--success"] { color: var(--on-success) !important; }