/* ═══════════════════════════════════════════════════════ */
        /* TOKENS — Design tokens e variabili globali             */
        /* ═══════════════════════════════════════════════════════ */
        :root {
            /* ── Brand ── */
            --color-brand: #E4002B;
            --color-brand-dark: #C50025;
            --color-brand-bg: #C8001E;

            /* ── Semantic ── */
            --color-success: #34C759;
            --color-success-dark: #2da44e;
            --color-success-mat: #4CAF50;
            --color-success-mat-dark: #2e7d32;
            --color-success-light: #e8f5e9;
            --color-success-pale: #a5d6a7;
            --color-warning: #FF9500;
            --color-warning-dark: #f57c00;
            --color-warning-mat: #FF9800;
            --color-warning-mat-dark: #e65100;
            --color-warning-light: #fff3e0;
            --color-danger: #FF3B30;
            --color-danger-dark: #c62828;
            --color-danger-light: #ffcdd2;
            --color-info: #007AFF;
            --color-info-dark: #1565c0;
            --color-info-light: #e3f2fd;

            /* ── Accent / special ── */
            --color-gold: #FFD700;
            --color-purple: #9B59B6;
            --color-purple-dark: #8E44AD;
            --color-purple-deep: #6c3483;

            /* ── Text ── */
            --color-text: #333;
            --color-text-dark: #111;
            --color-text-medium: #555;
            --color-text-light: #666;
            --color-text-muted: #888;
            --color-text-placeholder: #999;
            --color-text-faint: #aaa;
            --color-text-disabled: #bbb;
            --color-text-ghost: #ccc;

            /* ── Backgrounds ── */
            --color-bg: #f0f0f5;
            --color-bg-card: #ffffff;
            --color-bg-hover: #f5f5f5;
            --color-bg-subtle: #f8f8f8;
            --color-bg-input: #f8f9fa;
            --color-bg-dark: #1c1c1e;
            --color-bg-dark-card: #2c2c2e;
            --color-bg-dark-header: #1a1a2e;

            /* ── Borders ── */
            --color-border: #e0e0e0;
            --color-border-light: #eee;
            --color-border-lighter: #f0f0f0;
            --color-border-dark: #ddd;

            /* ── Overlays ── */
            --overlay-light: rgba(0,0,0,0.5);
            --overlay-medium: rgba(0,0,0,0.6);
            --overlay-heavy: rgba(0,0,0,0.7);
            --overlay-white-15: rgba(255,255,255,0.15);
            --overlay-white-20: rgba(255,255,255,0.2);
            --overlay-white-25: rgba(255,255,255,0.25);
            --overlay-white-30: rgba(255,255,255,0.3);

            /* ── Shadows ── */
            --shadow-card: 0 4px 12px rgba(0,0,0,0.1);
            --shadow-card-sm: 0 1px 4px rgba(0,0,0,0.07);
            --shadow-card-xs: 0 1px 3px rgba(0,0,0,0.08);
            --shadow-card-subtle: 0 1px 2px rgba(0,0,0,0.06);
            --shadow-modal: 0 8px 32px rgba(0,0,0,0.3);
            --shadow-dropdown: 0 10px 40px rgba(0,0,0,0.5);
            --shadow-elevated: 0 20px 60px rgba(0,0,0,0.3);
            --shadow-popup: 0 4px 16px rgba(0,0,0,0.15);

            /* ── Border Radius ── */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 10px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-2xl: 20px;
            --radius-pill: 9999px;

            /* ── Typography ── */
            --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

            /* ── Z-Index Scale ── */
            --z-base: 1;
            --z-search: 10;
            --z-dropdown: 50;
            --z-header-nav: 95;
            --z-header-nav-alt: 96;
            --z-header: 100;
            --z-header-sub: 101;
            --z-sidebar: 298;
            --z-sidebar-overlay: 299;
            --z-sidebar-fixed: 300;
            --z-catalog: 500;
            --z-drawer-overlay: 600;
            --z-drawer: 601;
            --z-panel: 998;
            --z-panel-actions: 999;
            --z-modal-overlay: 1000;
            --z-modal: 1001;
            --z-confirm: 3000;
            --z-admin-overlay: 9000;
            --z-admin-panel: 9001;
            --z-toast: 9999;
            --z-nf-modal-overlay: 10000;
            --z-nf-modal: 10001;
            --z-nf-detail-overlay: 10002;
            --z-loading: 99999;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* TEMI — override colori via data-theme su <html>        */
        /* ═══════════════════════════════════════════════════════ */

        /* OCEAN — blu profondo, fresco e professionale */
        [data-theme="ocean"] {
            --color-brand: #0066CC;
            --color-brand-dark: #004C99;
            --color-brand-bg: #005AB5;
            --color-info: #2196F3;
            --color-info-dark: #1565c0;
            --color-bg-dark-header: #0a1628;
        }

        /* FOREST — verde scuro, naturale e rilassante */
        [data-theme="forest"] {
            --color-brand: #2E7D32;
            --color-brand-dark: #1B5E20;
            --color-brand-bg: #256D29;
            --color-info: #43A047;
            --color-info-dark: #2E7D32;
            --color-success: #66BB6A;
            --color-success-dark: #388E3C;
            --color-bg-dark-header: #0d1f0f;
        }

        /* SUNSET — arancione caldo, energico */
        [data-theme="sunset"] {
            --color-brand: #E65100;
            --color-brand-dark: #BF360C;
            --color-brand-bg: #D84315;
            --color-warning: #FF6D00;
            --color-warning-dark: #E65100;
            --color-info: #FF8F00;
            --color-info-dark: #E65100;
            --color-bg-dark-header: #1f1008;
        }

        /* MIDNIGHT — tema scuro elegante */
        [data-theme="midnight"] {
            --color-brand: #7C4DFF;
            --color-brand-dark: #6200EA;
            --color-brand-bg: #5C35CC;
            --color-info: #B388FF;
            --color-info-dark: #7C4DFF;
            --color-success: #69F0AE;
            --color-success-dark: #00C853;
            --color-warning: #FFD740;
            --color-warning-dark: #FFC400;
            --color-danger: #FF5252;
            --color-danger-dark: #D50000;
            --color-text: #E0E0E0;
            --color-text-dark: #FFFFFF;
            --color-text-medium: #BDBDBD;
            --color-text-light: #9E9E9E;
            --color-text-muted: #757575;
            --color-bg: #121212;
            --color-bg-card: #1E1E1E;
            --color-bg-hover: #2C2C2C;
            --color-bg-subtle: #252525;
            --color-bg-input: #2C2C2C;
            --color-bg-dark: #0A0A0A;
            --color-bg-dark-card: #1A1A1A;
            --color-bg-dark-header: #0A0A14;
            --color-border: #333333;
            --color-border-light: #2A2A2A;
            --color-border-lighter: #222222;
            --color-border-dark: #3A3A3A;
        }

        /* ROSE — rosa elegante, morbido */
        [data-theme="rose"] {
            --color-brand: #C2185B;
            --color-brand-dark: #AD1457;
            --color-brand-bg: #B01550;
            --color-info: #F06292;
            --color-info-dark: #E91E63;
            --color-purple: #CE93D8;
            --color-purple-dark: #AB47BC;
            --color-bg-dark-header: #1f0a15;
        }

        /* SLATE — grigio minimal, neutro e pulito */
        [data-theme="slate"] {
            --color-brand: #455A64;
            --color-brand-dark: #37474F;
            --color-brand-bg: #3E515A;
            --color-info: #78909C;
            --color-info-dark: #546E7A;
            --color-success: #66BB6A;
            --color-warning: #FFA726;
            --color-danger: #EF5350;
            --color-bg-dark-header: #1a1f22;
        }

        /* MINIMAL — bianco pulito, accenti grigi, zero distrazioni */
        [data-theme="minimal"] {
            --color-brand: #333333;
            --color-brand-dark: #222222;
            --color-brand-bg: #2A2A2A;
            --color-info: #555555;
            --color-info-dark: #333333;
            --color-success: #4A9B5A;
            --color-success-dark: #3A7D48;
            --color-warning: #B88A2D;
            --color-warning-dark: #96701F;
            --color-danger: #C04040;
            --color-danger-dark: #993333;
            --color-purple: #777;
            --color-purple-dark: #555;
            --color-bg-dark-header: #222;
        }
        /* Minimal: sfondo body bianco invece del gradiente brand */
        [data-theme="minimal"] body {
            background: #f5f5f5;
        }
        [data-theme="minimal"] .header {
            background: rgba(40,40,40,0.9);
            backdrop-filter: blur(10px);
        }
        [data-theme="minimal"] .nav-tabs {
            background: rgba(40,40,40,0.6);
        }
        [data-theme="minimal"] .nav-tab.active {
            background: white;
            color: #333;
        }
        [data-theme="minimal"] .notif-bar {
            background: rgba(0,0,0,0.08);
        }
        [data-theme="minimal"] .login-logo {
            color: #333;
        }
        [data-theme="minimal"] .login-header h2 {
            color: #333;
        }
        [data-theme="minimal"] .pin-btn.wide {
            background: #333;
        }

        /* Midnight: override componenti che usano colori diretti */
        [data-theme="midnight"] .login-card,
        [data-theme="midnight"] .order-type-card,
        [data-theme="midnight"] .customer-card { 
            background: var(--color-bg-card);
            color: var(--color-text);
        }
        [data-theme="midnight"] .catalog-item { 
            background: var(--color-bg-card); 
        }
        [data-theme="midnight"] .catalog-item-name { 
            color: var(--color-text-dark); 
        }
        [data-theme="midnight"] .form-group input {
            background: var(--color-bg-input);
            color: var(--color-text);
            border-color: var(--color-border);
        }
        [data-theme="midnight"] .pin-btn {
            background: var(--color-bg-hover);
            color: var(--color-text);
        }
        [data-theme="midnight"] .nf-modal {
            background: var(--color-bg-card);
            color: var(--color-text);
        }
        [data-theme="midnight"] .nf-modal h3 { color: var(--color-text-dark); }
        [data-theme="midnight"] .nf-modal p { color: var(--color-text-medium); }
        [data-theme="midnight"] .order-table-body,
        [data-theme="midnight"] .order-table th { background: var(--color-bg-hover); }
        [data-theme="midnight"] .order-table td { color: var(--color-text); }
        [data-theme="midnight"] .order-table-footer { background: var(--color-bg-subtle); }
        [data-theme="midnight"] .acq-card { background: var(--color-bg-card); }
        [data-theme="midnight"] .acq-card .acq-doc { color: var(--color-text); }
        [data-theme="midnight"] .acq-summary { background: var(--color-bg-card); }

        /* Theme selector dropdown styling */
        .theme-selector-wrap {
            position: relative;
        }
        .theme-selector-btn {
            background: rgba(255,255,255,0.15);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 0.3rem 0.6rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 600;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .theme-selector-btn:hover { background: rgba(255,255,255,0.25); }
        .theme-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            background: var(--color-bg-dark);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-dropdown);
            min-width: 180px;
            padding: 0.4rem;
            z-index: var(--z-modal);
        }
        .theme-dropdown.open { display: block; }
        .theme-option {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.55rem 0.7rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.8rem;
            color: #ccc;
            font-weight: 500;
            transition: background 0.15s;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .theme-option:hover { background: rgba(255,255,255,0.08); }
        .theme-option.active { background: rgba(255,255,255,0.12); color: white; font-weight: 700; }
        .theme-swatch {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.2);
            flex-shrink: 0;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* BASE — Reset e stili fondamentali                      */
        /* ═══════════════════════════════════════════════════════ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-stack);
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            min-height: 100vh;
            color: var(--color-text);
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        .screen {
            display: none;
            animation: fadeIn 0.3s ease-in;
        }

        .screen.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* === HEADER === */
        .header {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: var(--z-header);
        }

        .header h1 {
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .agent-name {
            color: white;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .btn-back, .btn-logout {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .btn-back:active, .btn-logout:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.3);
        }

        /* === TABS NAVIGATION === */
        .nav-tabs {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem;
            gap: 0.5rem;
            position: relative;
            z-index: var(--z-header-nav-alt);
        }

        .nav-tab {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            border: none;
            padding: 0.75rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.9rem;
        }

        .nav-tab.active {
            background: white;
            color: var(--color-brand);
        }

        .nav-tab:active {
            transform: scale(0.98);
        }

        /* === BADGE CARRELLI — inline nell'header o nella notif-bar === */
        #globalCartBadges {
            display: contents; /* non crea box, i figli appaiono nel flusso del genitore */
        }

        /* === SCHERMATA CATALOGO FULLSCREEN STANDALONE === */
        #catalogScreen {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-catalog);
            background: var(--color-bg);
            flex-direction: column;
        }
        #catalogScreen.active {
            display: flex;
        }
        #catalogScreen .catalog-header {
            flex-shrink: 0;
            background: var(--color-brand-bg);
            padding: 0.4rem 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            min-height: 48px;
        }
        #catalogScreen .catalog-header-title {
            color: white;
            font-size: 0.88rem;
            font-weight: 700;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #catalogScreen .catalog-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* === SEARCH + CATEGORIE (sticky top) === */
        .catalog-search-bar {
            flex-shrink: 0;
            position: sticky;
            top: 0;
            z-index: var(--z-search);
            background: var(--color-brand-bg);
            padding: 0.5rem 0.75rem 0.4rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .catalog-search-input {
            width: 100%;
            padding: 0.55rem 0.9rem;
            border: none;
            border-radius: 10px;
            font-size: 0.9rem;
            background: white;
            outline: none;
            box-sizing: border-box;
        }
        .categories-scroll {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            padding-bottom: 2px;
        }
        .cat-chip {
            background: var(--overlay-white-15);
            color: white;
            border: 1px solid var(--overlay-white-30);
            border-radius: 20px;
            padding: 0.25rem 0.65rem;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        .cat-chip.active { background: white; color: var(--color-brand-bg); border-color: white; }
        .expiring-filter-btn {
            background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
            color: var(--color-gold);
            border: none;
            border-radius: 20px;
            padding: 0.25rem 0.7rem;
            font-size: 0.72rem;
            font-weight: 800;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0 2px 6px rgba(155, 89, 182, 0.4);
            transition: all 0.2s;
        }
        .expiring-filter-btn:hover { transform: scale(1.05); box-shadow: 0 3px 8px rgba(155, 89, 182, 0.5); }
        .expiring-filter-btn.active { 
            background: linear-gradient(135deg, var(--color-gold) 0%, #FFA500 100%); 
            color: var(--color-purple-dark); 
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
            text-shadow: none;
        }

        /* === LAYOUT PRINCIPALE: lista + tabella ordine === */
        .catalog-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .catalog-list-area {
            flex: 1;
            min-height: 160px;
            overflow-y: auto;
            padding: 0.5rem 0.6rem;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        /* === CARD ARTICOLO LISTA === */
        .catalog-item {
            background: white;
            border-radius: 10px;
            padding: 0.65rem 0.85rem;
            margin-bottom: 0.4rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0,0,0,0.07);
            transition: transform 0.12s;
        }
        .catalog-item:active { transform: scale(0.985); }
        .catalog-item-info { flex: 1; min-width: 0; }
        .catalog-item-name {
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--color-text-dark);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .catalog-item-sub {
            font-size: 0.68rem;
            color: var(--color-text-placeholder);
            margin-top: 1px;
        }
        .catalog-item-no { font-family: monospace; color: var(--color-text-light); font-weight: 600; }
        .catalog-item-stock { text-align: right; flex-shrink: 0; min-width: 80px; }
        .scheda-btn {
            display: inline-block;
            font-size: 1rem;
            cursor: pointer;
            padding: 0.15rem 0.3rem;
            border-radius: 6px;
            background: #E3F2FD;
            margin-bottom: 0.15rem;
            transition: transform 0.15s;
        }
        .scheda-btn:active { transform: scale(0.9); }
        .stock-boxes { font-size: 1.05rem; font-weight: 800; color: var(--color-info); line-height: 1.1; }
        .stock-boxes .stock-unit { font-size: 0.62rem; font-weight: 600; opacity: 0.7; }
        .stock-kg { font-size: 0.63rem; color: var(--color-text-disabled); }
        .stock-price { font-size: 0.72rem; font-weight: 600; color: var(--color-success); }
        .stock-cost  { font-size: 0.63rem; color: var(--color-text-faint); }
        .stock-margin { font-size: 0.68rem; font-weight: 700; }
        .stock-margin.good { color: var(--color-success); }
        .stock-margin.warn { color: var(--color-warning); }
        .stock-margin.bad  { color: var(--color-danger); }
        .catalog-item.diretti .stock-boxes { font-size: 0.7rem; color: var(--color-warning); }
        .catalog-item-badge {
            background: var(--color-info); color: white;
            border-radius: 10px; padding: 1px 7px;
            font-size: 0.65rem; font-weight: 700;
            display: block; margin-top: 2px;
        }
        .catalog-item.in-cart { border-left: 3px solid var(--color-info); }
        .catalog-item.expiring-lot { background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%); color: white; }
        .catalog-item.expiring-lot .catalog-item-name { color: white; }
        .catalog-item.expiring-lot .catalog-item-sub { color: rgba(255,255,255,0.85); }
        .catalog-item.expiring-lot .catalog-item-no { color: rgba(255,255,255,0.9); background: var(--overlay-white-15); }

        /* Shimmer effect per articoli non disponibili con alternative */
        @keyframes pulseAlt {
            0% { border-color: var(--color-warning); background-color: #FFF8F0; }
            50% { border-color: #FF6600; background-color: #FFE8CC; }
            100% { border-color: var(--color-warning); background-color: #FFF8F0; }
        }
        .hist-has-alt {
            border: 2.5px solid var(--color-warning) !important;
            background: #FFF8F0 !important;
            animation: pulseAlt 2s ease-in-out infinite !important;
        }

        /* Glow per card MIGLIORE nel modal suggerimenti */
        @keyframes pulseBest {
            0% { border-color: var(--color-success); background-color: #f0fff4; }
            50% { border-color: #00A832; background-color: #e0ffe8; }
            100% { border-color: var(--color-success); background-color: #f0fff4; }
        }
        .similar-best {
            animation: pulseBest 2s ease-in-out infinite !important;
        }
        .catalog-item.expiring-lot .meta-label { color: rgba(255,255,255,0.7); }
        .catalog-item.expiring-lot .meta-price, 
        .catalog-item.expiring-lot .meta-price-cf { color: var(--color-gold); }
        .catalog-item.expiring-lot .meta-cost { color: rgba(255,255,255,0.8); }
        .catalog-item.expiring-lot .meta-margin { color: #90EE90; }
        .catalog-item.expiring-lot .meta-margin.bad { color: #FFB6C1; }
        .catalog-item.expiring-lot .meta-kg { color: rgba(255,255,255,0.85); }
        .catalog-item.expiring-lot .stock-boxes { color: var(--color-gold); font-weight: 800; }
        .catalog-item.expiring-lot .stock-unit-label { color: rgba(255,255,255,0.8); }
        .catalog-item.expiring-lot.in-cart { border-left: 3px solid var(--color-gold); }
        .expiring-dates {
            color: var(--color-gold);
            font-weight: 800;
            font-size: 0.7rem;
            margin-left: 0.5rem;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .catalog-item-meta {
            display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem;
            margin-top: 0.22rem; align-items: center;
        }
        .meta-label     { font-size: 0.55rem; font-weight: 700; opacity: 0.7; margin-right: 2px; text-transform: uppercase; }
        /* VENDITA — blu */
        .meta-price     { font-size: 0.72rem; font-weight: 700; color: var(--color-info-dark); }
        .meta-price .meta-label { color: var(--color-info-dark); }
        .meta-price-cf  { font-size: 0.68rem; font-weight: 600; color: var(--color-info-dark); opacity: 0.8; }
        .meta-price-cf .meta-label { color: var(--color-info-dark); }
        /* CF < 1: CF è primario, KG secondario */
        .meta-price.meta-price-secondary  { font-size: 0.68rem; font-weight: 400; opacity: 0.8; }
        .meta-price-cf.meta-price-primary { font-size: 0.72rem; font-weight: 700; opacity: 1; }
        /* COSTO — viola */
        .meta-cost      { font-size: 0.66rem; color: var(--color-purple-dark); }
        .meta-cost .meta-label { color: var(--color-purple-dark); }
        /* MARGINE */
        .meta-margin { font-size: 0.66rem; font-weight: 700; }
        .meta-margin.good { color: var(--color-success); }
        .meta-margin.warn { color: var(--color-warning); }
        .meta-margin.bad  { color: var(--color-danger); }
        /* KG — grigio scuro */
        .meta-kg     { font-size: 0.66rem; color: var(--color-text-medium); }
        .meta-kg .meta-label { color: var(--color-text-medium); }
        .stock-unit-label { font-size: 0.6rem; font-weight: 700; color: var(--color-info); opacity: 0.7; text-align: right; margin-top: 1px; }
        .catalog-empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-placeholder); font-size: 0.88rem; }

        /* === TABELLA ORDINE (sticky bottom, collassabile) === */
        .order-table-panel {
            flex-shrink: 0;
            background: white;
            border-top: 2px solid var(--color-border);
            max-height: min(38vh, calc(100vh - 350px));
            display: flex;
            flex-direction: column;
        }
        .order-table-header {
            display: flex;
            align-items: center;
            padding: 0.45rem 0.85rem;
            background: var(--color-bg-dark-header);
            color: white;
            cursor: pointer;
            user-select: none;
            gap: 0.5rem;
        }
        .order-table-title { font-size: 0.8rem; font-weight: 700; flex: 1; }
        .order-table-summary { font-size: 0.72rem; opacity: 0.8; }
        .order-table-toggle { font-size: 0.75rem; opacity: 0.7; }
        .order-table-body {
            overflow-y: auto;
            flex: 1;
        }
        .order-table-body.collapsed { display: none; }
        .order-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.72rem;
        }
        .order-table th {
            background: var(--color-bg-hover);
            padding: 0.3rem 0.4rem;
            text-align: center;
            font-weight: 700;
            color: var(--color-text-medium);
            border-bottom: 1px solid var(--color-border-light);
            white-space: nowrap;
        }
        .order-table td {
            padding: 0.3rem 0.4rem;
            border-bottom: 1px solid var(--color-border-lighter);
            text-align: center;
            vertical-align: middle;
            color: var(--color-text-dark);
        }
        .order-table td.desc-col {
            text-align: left;
            max-width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .order-table td input {
            width: 52px;
            padding: 0.2rem 0.3rem;
            border: 1px solid var(--color-border-dark);
            border-radius: 5px;
            font-size: 0.72rem;
            text-align: center;
        }
        .order-table td.margin-col { font-weight: 700; }
        .order-table td.margin-col.good { color: var(--color-success); }
        .order-table td.margin-col.warn { color: var(--color-warning); }
        .order-table td.margin-col.bad  { color: var(--color-danger); }
        .order-row-delete {
            background: none; border: none;
            color: var(--color-danger); cursor: pointer;
            font-size: 0.9rem; padding: 0 0.2rem;
        }
        .order-table-footer {
            display: flex;
            align-items: center;
            padding: 0.4rem 0.75rem;
            background: var(--color-bg-subtle);
            border-top: 1px solid var(--color-border-light);
            gap: 0.5rem;
        }
        .order-totals { flex: 1; font-size: 0.72rem; color: var(--color-text-medium); }
        .order-totals strong { color: var(--color-text-dark); }
        .order-confirm-btn {
            background: var(--color-success);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 0.45rem 1rem;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .order-confirm-btn:disabled { background: var(--color-text-ghost); }

        /* === POPUP CONFERMA ORDINE === */
        .order-confirm-overlay {
            display: none; position: fixed; inset: 0;
            background: var(--overlay-light); z-index: var(--z-confirm);
            justify-content: center; align-items: center;
        }
        .order-confirm-overlay.open { display: flex; }
        .order-confirm-popup {
            background: white; border-radius: 16px; padding: 1.5rem;
            width: 90%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .order-confirm-popup h3 {
            margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--color-text-dark);
        }
        .order-confirm-popup .ocp-summary {
            font-size: 0.82rem; color: var(--color-text-medium); margin-bottom: 1rem; line-height: 1.5;
        }
        .order-confirm-popup textarea {
            width: 100%; min-height: 80px; border: 1.5px solid var(--color-border-dark); border-radius: 10px;
            padding: 0.7rem; font-size: 0.88rem; resize: vertical; font-family: inherit;
            box-sizing: border-box;
        }
        .order-confirm-popup textarea:focus { border-color: var(--color-info); outline: none; }
        .order-confirm-popup .ocp-label {
            font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.3rem; font-weight: 600;
        }
        .order-confirm-popup .ocp-buttons {
            display: flex; gap: 0.7rem; margin-top: 1rem;
        }
        .order-confirm-popup .ocp-btn {
            flex: 1; padding: 0.75rem; border: none; border-radius: 10px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
        }
        .order-confirm-popup .ocp-btn-cancel {
            background: var(--color-bg-hover); color: var(--color-text);
        }
        .order-confirm-popup .ocp-btn-confirm {
            background: var(--color-success); color: white;
        }
        .order-confirm-popup .ocp-btn-confirm:active { background: var(--color-success-dark); }

        /* === MODALE GENERICA APP === */
        .nf-modal-overlay {
            display:none; position:fixed; inset:0;
            background:var(--overlay-medium); z-index: var(--z-nf-detail-overlay);
            justify-content:center; align-items:center; padding:1rem;
        }
        .nf-modal-overlay.open { display:flex; }
        .nf-modal {
            background:white; border-radius:16px; padding:1.5rem;
            width:90%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,0.3);
        }
        .nf-modal h3 { margin:0 0 0.8rem; font-size:1.05rem; color:var(--color-text-dark); }
        .nf-modal p { font-size:0.88rem; color:var(--color-text-medium); line-height:1.5; margin:0 0 1rem; }
        .nf-modal .nf-modal-btns { display:flex; gap:0.7rem; }
        .nf-modal .nf-btn {
            flex:1; padding:0.7rem; border:none; border-radius:10px;
            font-size:0.9rem; font-weight:700; cursor:pointer;
        }
        .nf-btn-secondary { background:var(--color-bg-hover); color: var(--color-text); }
        .nf-btn-primary { background:var(--color-info); color:white; }
        .nf-btn-danger { background:var(--color-danger); color:white; }
        .nf-btn-success { background:var(--color-success); color:white; }

        /* === DRAWER ARTICOLO (slide-up) === */
        .item-drawer-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: var(--z-drawer-overlay);
        }
        .item-drawer-overlay.open { display: block; }
        .item-drawer {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: white;
            border-radius: 20px 20px 0 0;
            z-index: var(--z-drawer);
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
            max-height: 92vh;
            overflow-y: auto;
            padding-bottom: env(safe-area-inset-bottom, 12px);
        }
        .item-drawer.open { transform: translateY(0); }
        .drawer-handle {
            width: 40px; height: 4px;
            background: var(--color-border-dark); border-radius: 2px;
            margin: 10px auto 0;
        }
        .drawer-header {
            padding: 0.75rem 1rem 0.5rem;
            border-bottom: 1px solid var(--color-border-lighter);
        }
        .drawer-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--color-text-dark);
            line-height: 1.3;
            margin-bottom: 0.25rem;
        }
        .drawer-sub {
            font-size: 0.72rem;
            color: var(--color-text-placeholder);
        }
        .drawer-body { padding: 0.75rem 1rem; }

        /* Lotto selector */
        .drawer-lot-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .drawer-lot-label { font-size: 0.75rem; color: var(--color-text-light); width: 55px; flex-shrink: 0; }
        .drawer-lot-select {
            flex: 1;
            padding: 0.4rem 0.6rem;
            border: 1px solid var(--color-border-dark);
            border-radius: 8px;
            font-size: 0.78rem;
            background: white;
        }
        .drawer-lot-expiry { font-size: 0.72rem; color: var(--color-warning); font-weight: 600; }

        /* Quantità + bottoni */
        .drawer-qty-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .drawer-qty-label { font-size: 0.75rem; color: var(--color-text-light); width: 55px; flex-shrink: 0; }
        .drawer-qty-input {
            width: 70px;
            padding: 0.4rem 0.5rem;
            border: 2px solid var(--color-info);
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            color: var(--color-info);
        }
        .drawer-qty-kg {
            font-size: 0.8rem;
            color: var(--color-text-muted);
            flex: 1;
        }
        .drawer-add-btns {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 0.75rem;
        }
        .drawer-add-btn {
            flex: 1;
            padding: 0.45rem 0.3rem;
            background: #f0f4ff;
            color: var(--color-info);
            border: 1px solid #c0d4ff;
            border-radius: 8px;
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
        }
        .drawer-add-btn:active { background: #dce8ff; }

        /* Griglia costi/prezzi/margine */
        .drawer-price-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .drawer-price-cell {
            background: var(--color-bg-subtle);
            border-radius: 8px;
            padding: 0.4rem 0.5rem;
            text-align: center;
            min-width: 0;
            overflow: hidden;
        }
        .drawer-price-cell.editable { background: #f0f9f0; border: 1px solid #a8e6b8; }
        .drawer-price-label { font-size: 0.62rem; color: var(--color-text-placeholder); margin-bottom: 2px; }
        .drawer-price-value {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--color-text-dark);
        }
        .drawer-price-value input {
            width: 100%;
            border: none;
            background: transparent;
            font-size: 0.88rem;
            font-weight: 700;
            color: #2a7a2a;
            text-align: center;
            outline: none;
        }
        .drawer-price-value input[type="number"]::-webkit-inner-spin-button,
        .drawer-price-value input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .drawer-price-value input[type="number"] { -moz-appearance: textfield; }
        .drawer-price-input-row { display: flex; align-items: center; gap: 4px; }
        .drawer-price-input-row input { flex: 1; min-width: 0; width: auto; }
        .drawer-step-btn {
            min-width: 26px; min-height: 26px;
            border: 1.5px solid #a8d8a8; border-radius: 6px;
            background: #dff0df; color: #2a7a2a;
            font-size: 0.8rem; font-weight: 700;
            cursor: pointer; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            touch-action: manipulation; user-select: none;
            padding: 0; line-height: 1;
        }
        .drawer-step-btn:active { background: #b8e0b8; }
        .drawer-margin-bar {
            background: var(--color-border-lighter);
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.85rem;
        }
        .drawer-margin-label { font-size: 0.75rem; color: var(--color-text-light); }
        .drawer-margin-value {
            font-size: 1.1rem;
            font-weight: 800;
        }
        .drawer-margin-value.good { color: var(--color-success); }
        .drawer-margin-value.warn { color: var(--color-warning); }
        .drawer-margin-value.bad  { color: var(--color-danger); }

        .drawer-action-row {
            display: flex;
            gap: 0.5rem;
        }
        .drawer-cancel-btn {
            flex: 0 0 auto;
            padding: 0.7rem 1.1rem;
            background: var(--color-bg-hover);
            color: var(--color-text-light);
            border: none;
            border-radius: 12px;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .drawer-confirm-btn {
            flex: 1;
            padding: 0.7rem;
            background: var(--color-info);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
        }
        .drawer-confirm-btn.remove { background: var(--color-danger); }

        /* Drawer responsive — tablet e desktop */
        @media (min-width: 768px) {
            .item-drawer {
                max-width: 680px;
                left: 50%;
                right: auto;
                transform: translateX(-50%) translateY(100%);
                border-radius: 20px 20px 0 0;
            }
            .item-drawer.open { transform: translateX(-50%) translateY(0); }
            .drawer-header { padding: 1rem 1.5rem 0.75rem; }
            .drawer-title { font-size: 1.1rem; }
            .drawer-sub { font-size: 0.85rem; }
            .drawer-body { padding: 1rem 1.5rem; }
            .drawer-lot-label,
            .drawer-qty-label { font-size: 0.9rem; width: 70px; }
            .drawer-lot-select { font-size: 0.92rem; padding: 0.55rem 0.75rem; }
            .drawer-qty-input { width: 90px; font-size: 1.2rem; padding: 0.55rem 0.6rem; }
            .drawer-qty-kg { font-size: 0.95rem; }
            .drawer-add-btn { font-size: 0.88rem; padding: 0.6rem 0.5rem; }
            .drawer-price-grid { gap: 0.65rem; margin-bottom: 1rem; }
            .drawer-price-cell { padding: 0.6rem 0.7rem; }
            .drawer-price-label { font-size: 0.78rem; }
            .drawer-price-value { font-size: 1.05rem; }
            .drawer-price-value input { font-size: 1.05rem; }
            .drawer-step-btn { min-width: 32px; min-height: 32px; font-size: 0.9rem; }
            .drawer-price-input-row { gap: 5px; }
            .drawer-margin-bar { padding: 0.7rem 1rem; margin-bottom: 1rem; }
            .drawer-margin-label { font-size: 0.9rem; }
            .drawer-margin-value { font-size: 1.3rem; }
            .drawer-cancel-btn { font-size: 1rem; padding: 0.85rem 1.3rem; }
            .drawer-confirm-btn { font-size: 1.05rem; padding: 0.85rem; }
            .drawer-lot-expiry { font-size: 0.85rem; }
            .drawer-add-btns { gap: 0.5rem; margin-bottom: 1rem; }
        }

        @media (min-width: 1024px) {
            .item-drawer { max-width: 780px; }
            .drawer-header { padding: 1.2rem 2rem 0.85rem; }
            .drawer-title { font-size: 1.2rem; }
            .drawer-sub { font-size: 0.9rem; }
            .drawer-body { padding: 1.2rem 2rem; }
            .drawer-lot-label,
            .drawer-qty-label { font-size: 0.95rem; width: 80px; }
            .drawer-lot-select { font-size: 0.95rem; padding: 0.6rem 0.8rem; }
            .drawer-qty-input { width: 100px; font-size: 1.3rem; padding: 0.6rem; }
            .drawer-qty-kg { font-size: 1rem; }
            .drawer-add-btn { font-size: 0.92rem; padding: 0.7rem 0.6rem; }
            .drawer-price-cell { padding: 0.7rem 0.8rem; }
            .drawer-price-label { font-size: 0.82rem; }
            .drawer-price-value { font-size: 1.15rem; }
            .drawer-price-value input { font-size: 1.15rem; }
            .drawer-step-btn { min-width: 34px; min-height: 34px; font-size: 0.95rem; }
            .drawer-price-input-row { gap: 6px; }
            .drawer-margin-bar { padding: 0.8rem 1.2rem; }
            .drawer-margin-label { font-size: 0.95rem; }
            .drawer-margin-value { font-size: 1.45rem; }
            .drawer-cancel-btn { font-size: 1.05rem; padding: 0.9rem 1.5rem; }
            .drawer-confirm-btn { font-size: 1.1rem; padding: 0.9rem; }
        }

        /* Notif bar */
        .notif-bar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 1rem;
            background: rgba(0,0,0,0.2);
            min-height: 36px;
        }
        .notif-bar.has-urgent { background: rgba(255,200,0,0.15); }
        /* CAMPANELLA NOTIFICHE */
        .notif-bell {
            position: relative;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            border-radius: 8px;
            transition: background 0.2s;
        }
        .notif-bell:hover { background: rgba(255,255,255,0.1); }
        .notif-bell-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--color-danger);
            color: white;
            font-size: 0.6rem;
            font-weight: 800;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        .notif-bell.has-notifications { animation: pulse-bell 2s infinite; }
        @keyframes pulse-bell {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        /* PANEL NOTIFICHE */
        .notifications-panel-overlay {
            display: none; position: fixed; inset: 0;
            background: var(--overlay-light); z-index: var(--z-modal-overlay);
        }
        .notifications-panel-overlay.open { display: block; }
        .notifications-panel {
            position: fixed; top: 60px; right: 10px; width: 360px;
            background: var(--color-bg-dark); border-radius: 12px;
            box-shadow: 0 10px 40px var(--overlay-light);
            z-index: var(--z-modal); transform: translateY(-20px) scale(0.95);
            opacity: 0; pointer-events: none;
            transition: all 0.2s ease;
            max-height: 70vh; display: flex; flex-direction: column;
        }
        .notifications-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
        .notifications-panel-header {
            font-size: 1rem; font-weight: 700; color: white;
            padding: 1rem; border-bottom: 1px solid var(--color-text);
            display: flex; justify-content: space-between; align-items: center;
        }
        .notifications-panel-body { flex: 1; overflow-y: auto; padding: 0.5rem; }
        .notifications-panel-footer { padding: 0.75rem; border-top: 1px solid var(--color-text); }
        .btn-mark-all-read {
            width: 100%; background: var(--color-text); color: var(--color-text-faint); border: none;
            padding: 0.6rem; border-radius: 8px; font-size: 0.8rem;
            font-weight: 600; cursor: pointer; transition: background 0.2s;
        }
        .btn-mark-all-read:hover { background: #444; color: white; }
        /* CATEGORIE NOTIFICHE */
        .notif-category {
            background: var(--color-bg-dark-card); border-radius: 10px;
            margin-bottom: 0.5rem; overflow: hidden;
        }
        .notif-category-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.75rem; cursor: pointer; transition: background 0.2s;
        }
        .notif-category-header:hover { background: rgba(255,255,255,0.05); }
        .notif-category-title { font-size: 0.85rem; font-weight: 700; color: white; display: flex; align-items: center; gap: 0.5rem; }
        .notif-category-count { background: var(--color-danger); color: white; font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 10px; }
        .notif-category-actions { display: flex; gap: 0.3rem; }
        .notif-category-btn { background: none; border: none; color: var(--color-info); font-size: 0.7rem; cursor: pointer; padding: 0.2rem 0.4rem; }
        .notif-category-btn:hover { text-decoration: underline; }
        .notif-category-items { padding: 0 0.75rem 0.75rem; display: none; }
        .notif-category.expanded .notif-category-items { display: block; }
        .notif-item {
            background: var(--color-bg-dark); border-radius: 8px;
            padding: 0.5rem; margin-top: 0.4rem;
            font-size: 0.75rem; color: #ddd;
        }
        .notif-item-title { font-weight: 600; color: white; }
        .notif-item-meta { color: var(--color-text-muted); font-size: 0.65rem; margin-top: 2px; }
        .notif-category.new-arrivals .notif-category-count { background: var(--color-success); }
        .notif-category.returns .notif-category-count { background: var(--color-warning); }
        .notif-category.stock-out .notif-category-count { background: var(--color-danger); }
        .notif-category.payments .notif-category-count { background: var(--color-info); }
        .notifications-empty { text-align: center; padding: 2rem; color: var(--color-text-muted); font-size: 0.85rem; }
        
        /* ACQUISTI & ARRIVI */
        .acq-filter-btn { padding:0.3rem 0.7rem;border-radius:20px;border:1px solid var(--overlay-white-30);background:var(--overlay-white-15);color:white;font-weight:600;font-size:0.75rem;cursor:pointer;transition:all 0.15s;white-space:nowrap }
        .acq-filter-btn:hover { background:var(--overlay-white-25) }
        .acq-filter-btn.acq-filter-active { background:white;color:var(--color-brand-bg);border-color:white }
        .acq-summary { background:white;border-radius:10px;padding:0.7rem 1rem;margin-bottom:0.8rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,0.08) }
        .acq-summary .s-val { font-weight:700;color: var(--color-text);font-size:1.05rem }
        .acq-summary .s-label { color:var(--color-text-placeholder);font-size:0.78rem }
        .acq-card { background:white;border-radius:8px;padding:0.6rem 0.7rem;margin-bottom:0.35rem;box-shadow:0 1px 2px rgba(0,0,0,0.06);border-left:4px solid var(--color-text-ghost) }
        .acq-card.open { border-left-color:#ff9800 }
        .acq-card.closed { border-left-color:var(--color-success-mat) }
        .acq-card .acq-top { display:flex;justify-content:space-between;align-items:flex-start;gap:0.5rem }
        .acq-card .acq-main { flex:1;min-width:0 }
        .acq-card .acq-doc { font-weight:600;font-size:0.78rem;color:#333 }
        .acq-card .acq-desc { font-size:0.73rem;color:var(--color-text-medium);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
        .acq-card .acq-meta { font-size:0.7rem;color:var(--color-text-placeholder);margin-top:2px }
        .acq-card .acq-nums { text-align:right;white-space:nowrap;min-width:120px }
        .acq-card .acq-qty { font-weight:700;color:var(--color-brand);font-size:0.85rem }
        .acq-card .acq-cost { font-size:0.7rem;color:var(--color-text-light) }
        .acq-card .acq-cost-mag { font-size:0.7rem;color:var(--color-info-dark);font-weight:600 }
        .acq-badge { display:inline-block;font-size:0.63rem;padding:1px 5px;border-radius:3px;margin-left:3px;font-weight:600 }
        .acq-badge.kn { background:var(--color-success-light);color:var(--color-success-mat-dark) }
        .acq-badge.dir { background:var(--color-warning-light);color:var(--color-warning-mat-dark) }
        .acq-badge.status-open { background:var(--color-warning-light);color:var(--color-warning-mat-dark) }
        .acq-badge.status-closed { background:var(--color-success-light);color:var(--color-success-mat-dark) }
        .acq-badge.currency { background:var(--color-info-light);color:var(--color-info-dark) }
        
        /* CALENDARIO 2 SETTIMANE */
        .arr-week-grid { display:grid;grid-template-columns:repeat(7, 1fr);gap:0.4rem;margin-bottom:1rem }
        .arr-day-col { background:white;border-radius:8px;min-height:120px;padding:0.4rem;box-shadow:0 1px 3px rgba(0,0,0,0.08) }
        .arr-day-col.today { border:2px solid var(--color-brand);box-shadow:0 2px 8px rgba(228,0,43,0.2) }
        .arr-day-col.past { opacity:0.5 }
        .arr-day-col.weekend { background:#fafafa }
        .arr-day-header { font-weight:700;font-size:0.72rem;color: var(--color-text);padding-bottom:0.3rem;border-bottom:1px solid #eee;margin-bottom:0.3rem;text-align:center }
        .arr-day-header .day-name { color:var(--color-text-placeholder);font-size:0.65rem;font-weight:600;text-transform:uppercase }
        .arr-day-header .day-num { font-size:0.95rem;display:block }
        .arr-day-header.today .day-num { color:var(--color-brand) }
        .arr-day-item { font-size:0.63rem;padding:0.25rem 0.3rem;margin-bottom:0.2rem;background:var(--color-bg-input);border-radius:4px;border-left:2px solid var(--color-brand) }
        .arr-day-item .arr-vendor { font-weight:700;color: var(--color-text);font-size:0.62rem }
        .arr-day-item .arr-art { color:var(--color-text-light) }
        .arr-day-item .arr-mag { color:var(--color-info-dark);font-weight:700 }
        .arr-week-label { font-weight:800;font-size:0.85rem;color:white;margin:0.8rem 0 0.4rem;padding:0.3rem 0 }
        
        /* CALENDARIO ARRIVI */
        .arrivals-calendar-overlay {
            display: none; position: fixed; inset: 0;
            background: var(--overlay-light); z-index: var(--z-modal-overlay);
        }
        .arrivals-calendar-overlay.open { display: block; }
        .arrivals-calendar-panel {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 90%; max-width: 400px; max-height: 85vh;
            background: var(--color-bg-dark); border-radius: 16px;
            box-shadow: 0 10px 40px var(--overlay-light);
            z-index: var(--z-modal); display: none; flex-direction: column;
        }
        .arrivals-calendar-panel.open { display: flex; }
        .arrivals-calendar-header {
            display: flex; align-items: center; gap: 0.5rem;
            padding: 1rem; border-bottom: 1px solid var(--color-text);
            font-size: 1rem; font-weight: 700; color: white;
        }
        .cal-nav-btn {
            background: var(--color-text); border: none; color: white;
            width: 32px; height: 32px; border-radius: 8px;
            font-size: 0.9rem; cursor: pointer;
        }
        .cal-nav-btn:hover { background: #444; }
        .arrivals-calendar-grid {
            display: grid; grid-template-columns: repeat(7, 1fr);
            gap: 2px; padding: 0.5rem;
        }
        .cal-day-header {
            text-align: center; font-size: 0.65rem; color: var(--color-text-muted);
            padding: 0.3rem; font-weight: 600;
        }
        .cal-day {
            aspect-ratio: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            background: var(--color-bg-dark-card); border-radius: 8px;
            font-size: 0.8rem; color: var(--color-text-faint); cursor: pointer;
            position: relative; transition: background 0.2s;
        }
        .cal-day:hover { background: #3c3c3e; }
        .cal-day.other-month { opacity: 0.3; }
        .cal-day.today { border: 2px solid var(--color-info); }
        .cal-day.selected { background: var(--color-info); color: white; }
        .cal-day.has-arrivals::after {
            content: ''; position: absolute; bottom: 4px;
            width: 6px; height: 6px; border-radius: 50%; background: var(--color-success);
        }
        .cal-day.has-returns::before {
            content: ''; position: absolute; bottom: 4px; left: calc(50% + 5px);
            width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning);
        }
        .cal-day.has-arrivals.has-returns::after { left: calc(50% - 8px); }
        .arrivals-calendar-details {
            flex: 1; overflow-y: auto; padding: 0.75rem;
            border-top: 1px solid var(--color-text); max-height: 40vh;
        }
        .cal-details-placeholder { text-align: center; color: var(--color-text-light); padding: 2rem; font-size: 0.85rem; }
        .cal-details-section { margin-bottom: 1rem; }
        .cal-details-title { font-size: 0.8rem; font-weight: 700; color: white; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
        .cal-details-item {
            background: var(--color-bg-dark-card); border-radius: 8px; padding: 0.5rem;
            margin-bottom: 0.3rem; font-size: 0.75rem; color: #ddd;
        }
        .cal-details-item-title { font-weight: 600; }
        .cal-details-item-meta { color: var(--color-text-muted); font-size: 0.65rem; margin-top: 2px; }
        
        /* CARRELLO ATTIVO */
        .notif-cart-active {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.25rem 0.7rem; border-radius: 20px;
            background: rgba(0,122,255,0.7); border: 1px solid var(--color-info);
            font-size: 0.78rem; font-weight: 700; color: white; cursor: pointer;
        }
        .notif-cart-active .cart-timer {
            font-size: 0.68rem; font-weight: 600;
            background: var(--overlay-white-25); border-radius: 8px;
            padding: 0 5px; min-width: 30px; text-align: center;
        }
        .notif-cart-active.expiring { background: rgba(255,59,48,0.8); border-color: var(--color-danger); animation: pulse-badge 1.5s infinite; }
        /* BOZZE */
        .notif-drafts {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.25rem 0.7rem; border-radius: 20px;
            background: rgba(255,149,0,0.6); border: 1px solid var(--color-warning);
            font-size: 0.78rem; font-weight: 700; color: white; cursor: pointer;
        }
        /* PANEL BOZZE */
        .drafts-panel-overlay {
            display: none; position: fixed; inset: 0;
            background: var(--overlay-light); z-index: var(--z-modal-overlay);
        }
        .drafts-panel-overlay.open { display: block; }
        .drafts-panel {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: var(--color-bg-dark); border-radius: 16px 16px 0 0;
            padding: 1rem; max-height: 70vh; overflow-y: auto;
            z-index: var(--z-modal); transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        .drafts-panel.open { transform: translateY(0); }
        .drafts-panel-title {
            font-size: 1rem; font-weight: 700; color: white;
            margin-bottom: 0.75rem; display: flex; justify-content: space-between;
        }
        .draft-item {
            background: var(--color-bg-dark-card); border-radius: 10px;
            padding: 0.75rem; margin-bottom: 0.5rem;
            display: flex; align-items: center; gap: 0.75rem;
        }
        .draft-item-info { flex: 1; }
        .draft-item-name { font-size: 0.85rem; font-weight: 700; color: white; }
        .draft-item-meta { font-size: 0.72rem; color: var(--color-text-faint); margin-top: 2px; }
        .draft-item-actions { display: flex; gap: 0.4rem; }
        .draft-btn { padding: 0.35rem 0.7rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; border: none; cursor: pointer; }
        .draft-btn-resume { background: var(--color-info); color: white; }
        .draft-btn-delete { background: var(--color-danger); color: white; }
        .notif-badge {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.25rem 0.6rem;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            color: white;
            background: var(--overlay-white-15);
            border: 1px solid var(--overlay-white-20);
        }
        .notif-badge.urgent { background: var(--color-danger); border-color: var(--color-danger); animation: pulse-badge 1.5s infinite; }
        .notif-badge.draft { background: var(--overlay-white-20); }
        .notif-badge.confirmed { background: rgba(52,199,89,0.7); }
        .notif-badge-count {
            background: white; color: var(--color-text);
            border-radius: 10px; padding: 0 5px;
            font-size: 0.72rem; font-weight: 800;
            min-width: 18px; text-align: center;
        }
        .notif-badge.urgent .notif-badge-count { color: var(--color-danger); }
        .notif-badge.confirmed .notif-badge-count { color: var(--color-success); }
        @keyframes pulse-badge {
            0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.5); }
            50% { box-shadow: 0 0 0 5px rgba(255,59,48,0); }
        }

        /* === ORDERS TAB === */
        .order-type-screen { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem; }
        .order-type-title { color: white; font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
        .order-type-card {
            background: white; border-radius: 16px; padding: 1.5rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15); cursor: pointer;
            transition: transform 0.2s; display: flex; align-items: center; gap: 1rem;
        }
        .order-type-card:active { transform: scale(0.97); }
        .order-type-icon { font-size: 2.5rem; min-width: 50px; text-align: center; }
        .order-type-info h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
        .order-type-info p { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4; }
        .order-type-card.kn { border-left: 5px solid var(--color-info); }
        .order-type-card.dir { border-left: 5px solid var(--color-warning); }

        .login-container {
            max-width: 420px;
            margin: 1rem auto;
            padding: 1rem;
            touch-action: manipulation; /* blocca pinch-zoom e double-tap zoom */
        }

        .login-card {
            background: white;
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            touch-action: manipulation;
        }

        .login-header {
            text-align: center;
            margin-bottom: 1rem;
        }

        .login-logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-brand);
            letter-spacing: 1px;
            margin-bottom: 0.25rem;
        }

        .login-subtitle {
            font-size: 0.7rem;
            color: var(--color-text-placeholder);
            letter-spacing: 3px;
        }

        .login-header h2 {
            color: var(--color-brand);
            font-size: 1.4rem;
            margin: 1rem 0 0.25rem;
        }

        .login-header p {
            color: var(--color-text-light);
            font-size: 0.85rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--color-text);
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--color-border);
            border-radius: 8px;
            font-size: 16px; /* minimo 16px — iOS zomma automaticamente sotto questa soglia */
            text-transform: uppercase;
            touch-action: manipulation;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--color-brand);
        }

        .pin-display {
            width: 100%;
            padding: 0.9rem;
            border: 2px solid var(--color-border);
            border-radius: 8px;
            text-align: center;
            font-size: 1.8rem;
            letter-spacing: 0.5rem;
            margin-bottom: 0.75rem;
            min-height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pin-pad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.6rem;
            margin-bottom: 0.75rem;
        }

        .pin-btn {
            background: var(--color-bg-hover);
            border: none;
            padding: 1.2rem;
            font-size: 1.4rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 600;
            touch-action: manipulation;
        }

        .pin-btn:active {
            transform: scale(0.95);
            background: var(--color-border);
        }

        .pin-btn.wide {
            grid-column: span 3;
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
        }

        .btn-ms-login {
            width: 100%;
            padding: 0.85rem 1rem;
            margin-top: 1rem;
            background: #0078d4;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.3px;
            transition: background 0.2s, transform 0.1s;
        }
        .btn-ms-login:hover { background: #006cbf; transform: translateY(-1px); }
        .btn-ms-login:active { transform: translateY(0); }
        .btn-ms-login:disabled { background: #aaa; cursor: not-allowed; transform: none; }
        .login-loading-msg { text-align: center; color: var(--color-text-light); font-size: 0.85rem; margin-top: 0.75rem; }

        .error-message {
            background: #fee;
            color: #c33;
            padding: 0.6rem;
            border-radius: 8px;
            text-align: center;
            margin-top: 0.75rem;
            display: none;
            font-size: 0.85rem;
        }

        .error-message.show {
            display: block;
        }

        /* === CUSTOMERS SCREEN === */
        .container {
            padding: 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .search-box {
            background: white;
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .search-box input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--color-border);
            border-radius: 8px;
            font-size: 1rem;
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--color-brand);
        }

        .customer-card {
            background: white;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .customer-card:active {
            transform: scale(0.98);
        }

        .customer-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .customer-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-text);
        }

        .customer-code {
            font-size: 0.9rem;
            color: var(--color-text-light);
            background: var(--color-bg-hover);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        .customer-info {
            color: var(--color-text-light);
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }

        .customer-badges {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .badge-credit {
            background: var(--color-success-light);
            color: var(--color-success-mat-dark);
        }

        .badge-credit-red {
            background: #ffebee;
            color: var(--color-danger-dark);
        }

        .badge-dest {
            background: var(--color-info-light);
            color: var(--color-info-dark);
        }

        /* === SCADENZIARIO === */
        .summary-box {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .summary-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--color-text);
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
        }

        .summary-item {
            text-align: center;
            padding: 0.75rem;
            background: var(--color-bg-hover);
            border-radius: 8px;
        }

        .summary-label {
            font-size: 0.8rem;
            color: var(--color-text-light);
            margin-bottom: 0.25rem;
        }

        .summary-value {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--color-text);
        }

        .summary-value.overdue {
            color: var(--color-danger-dark);
        }

        .invoice-group {
            background: white;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .invoice-group-header {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--color-border-lighter);
        }

        .invoice-item {
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            background: var(--color-bg-subtle);
            cursor: pointer;
            transition: all 0.2s;
        }

        .invoice-item:active {
            transform: scale(0.98);
        }

        .invoice-item.overdue {
            border-left: 4px solid var(--color-danger-dark);
            background: #ffebee;
        }

        .invoice-item.warning {
            border-left: 4px solid #ff9800;
            background: var(--color-warning-light);
        }

        .invoice-item.caution {
            border-left: 4px solid #ffc107;
            background: #fffde7;
        }

        .invoice-item.ok {
            border-left: 4px solid var(--color-success-mat);
            background: #f1f8f4;
        }

        .invoice-item.credit {
            border-left: 4px solid var(--color-success-mat);
            background: #f1f8f4;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .invoice-no {
            font-weight: 600;
            color: var(--color-text);
        }

        .invoice-amount {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--color-success-mat);
        }
        .invoice-item.overdue .invoice-amount { color: var(--color-danger); }
        .invoice-item.warning .invoice-amount { color: var(--color-warning-dark); }
        .invoice-item.caution .invoice-amount { color: var(--color-warning); }

        .invoice-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.85rem;
            color: var(--color-text-light);
        }

        .invoice-due {
            font-size: 0.85rem;
            color: var(--color-text-light);
            margin-top: 0.25rem;
        }

        /* === MODAL === */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-modal-overlay);
            align-items: flex-start;
            justify-content: center;
            padding: 3rem 1rem 1rem 1rem;
            overflow-y: auto;
        }

        .modal.show {
            display: flex;
        }
        
        /* Per modali ordini che usano style.display */
        .modal[style*="display: block"] {
            display: flex !important;
        }
        
        .close {
            position: absolute;
            right: calc(50% - 450px - 2rem);
            top: 1rem;
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1;
            color: white;
            background: var(--color-brand);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(228, 0, 43, 0.4);
            z-index: var(--z-modal);
        }
        
        .close:hover {
            background: var(--color-brand-dark);
            transform: rotate(90deg) scale(1.15);
            box-shadow: 0 6px 20px rgba(228, 0, 43, 0.6);
        }
        
        .close:active {
            transform: rotate(90deg) scale(0.95);
        }

        .modal-content {
            background: white;
            border-radius: 20px;
            max-width: 500px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease-out;
            position: relative;
            padding: 2rem;
        }

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

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--color-border);
        }

        .modal-header h3 {
            color: var(--color-text);
            font-size: 1.3rem;
        }

        .modal-body {
            padding: 1rem;
        }

        .destination-option {
            background: var(--color-bg-hover);
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .destination-option:active {
            transform: scale(0.98);
        }

        .destination-option.primary {
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
        }

        .destination-option.secondary {
            background: var(--color-info-light);
        }

        .dest-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .dest-address {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* === CUSTOMER DETAIL === */
        .detail-header {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .detail-content {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .detail-left {
            flex: 1;
            min-width: 300px;
        }

        .detail-right {
            flex: 0 0 350px;
            min-width: 300px;
        }

        @media (max-width: 768px) {
            .detail-content {
                flex-direction: column;
            }
            .detail-right {
                flex: 1;
            }
        }
        
        /* Stats responsive */
        #statsTab.container { max-width: none; padding: 0; margin: 0; }
        
        /* Card grid: 3 col desktop, 2 tablet, 1 mobile */
        .stats-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }
        @media (max-width: 900px) {
            .stats-cards-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .stats-cards-grid { grid-template-columns: 1fr; }
        }
        
        /* Mobile: sidebar come drawer */
        @media (max-width: 768px) {
            #statsSidebar {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                height: 100% !important;
                max-height: 100% !important;
                transform: translateX(-100%);
                transition: transform 0.28s ease;
                z-index: var(--z-sidebar-fixed) !important;
                width: 260px !important;
                min-width: 260px !important;
            }
            #statsSidebar.open {
                transform: translateX(0);
            }
            #statsMainWrapper {
                padding-left: 0 !important;
            }
            #statsHamburger {
                display: flex !important;
            }
            #sidebarOverlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.4);
                z-index: var(--z-sidebar-overlay);
            }
            #sidebarOverlay.open { display: block; }
        }

        .detail-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .detail-badge.sede {
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
        }

        .detail-badge.dest {
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
        }

        .detail-section {
            margin-bottom: 1.5rem;
        }

        .detail-section h4 {
            color: var(--color-text);
            margin-bottom: 0.75rem;
            font-size: 1.1rem;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--color-border-lighter);
        }

        .detail-label {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

        .detail-value {
            color: var(--color-text);
            font-weight: 500;
        }

        .credit-box {
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        .credit-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .credit-label {
            opacity: 0.9;
        }

        .credit-value {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .credit-value.positive {
            color: var(--color-success-mat);
            font-weight: 700;
        }

        .credit-value.negative {
            color: #ffcccc;
            font-weight: 700;
        }

        .tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .tab {
            flex: 1;
            background: white;
            border: none;
            padding: 1rem;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tab.active {
            background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
            color: white;
        }

        .tab-content {
            display: none;
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
        }

        .tab-content.active {
            display: block;
        }

        /* === LOADING === */
        .loading {
            text-align: center;
            padding: 3rem;
            color: white;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--color-text-light);
        }

        .empty-state-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        /* === FILTRI ATTIVI === */
        .active-filters {
            background: white;
            padding: 0.75rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #ff9800;
        }

        .active-filters strong {
            color: var(--color-warning-mat-dark);
            display: block;
            margin-bottom: 0.25rem;
        }

        .active-filters em {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

        .reset-btn {
            margin-left: 10px;
            padding: 4px 10px;
            background: #d32f2f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .reset-btn:active {
            background: #b71c1c;
        }

        .summary-item.clickable {
            cursor: pointer;
            transition: all 0.2s;
        }

        .summary-item.clickable:active {
            transform: scale(0.98);
        }

        .summary-item.active-filter {
            border: 3px solid #d32f2f;
            box-shadow: 0 0 10px rgba(211, 47, 47, 0.3);
        }

        /* === SELEZIONE MULTIPLA PER EXPORT === */
        .selection-bar {
            position: relative;
            z-index: var(--z-panel-actions);
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin: 0 0 1rem 0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            border-left: 4px solid #1976d2;
            transition: all 0.3s ease;
        }
        
        .selection-bar.stuck {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            margin: 0 auto;
            max-width: 1200px;
            padding: 0.75rem 1rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .selection-bar-title {
            font-size: 0.85rem;
            color: var(--color-text-light);
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .selection-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .selection-chip {
            background: var(--color-info-light);
            color: var(--color-info-dark);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .selection-chip-remove {
            cursor: pointer;
            font-weight: bold;
            color: var(--color-info-dark);
            opacity: 0.7;
        }

        .selection-chip-remove:active {
            opacity: 1;
        }

        .selection-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-export {
            flex: 1;
            background: #1976d2;
            color: white;
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .btn-export:active {
            background: var(--color-info-dark);
        }

        .btn-clear-selection {
            background: var(--color-bg-hover);
            color: var(--color-text-light);
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .btn-clear-selection:active {
            background: var(--color-border);
        }

        .btn-add-selection {
            background: var(--color-info-light);
            color: #1976d2;
            border: 2px solid #1976d2;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.8rem;
            margin-left: 0.5rem;
        }

        .btn-add-selection:active {
            background: #bbdefb;
        }

        .btn-add-selection.selected {
            background: #1976d2;
            color: white;
        }

        /* === TABELLA RIGHE ORDINE === */
        .order-lines-table {
            background: var(--color-warning-light);
            padding: 1rem;
            margin: 0.5rem 0;
            border-radius: 8px;
            overflow-x: auto;
        }

        .order-lines-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--color-warning-mat-dark);
            font-size: 0.95rem;
        }

        .lines-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .lines-table th {
            background: var(--color-warning-mat-dark);
            color: white;
            padding: 0.5rem;
            text-align: left;
            font-weight: 600;
            white-space: nowrap;
        }

        .lines-table td {
            padding: 0.5rem;
            border-bottom: 1px solid #ffe0b2;
        }

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

        .lines-table tr:hover {
            background: rgba(255, 152, 0, 0.1);
        }

        .lines-table .col-code {
            font-family: monospace;
            color: var(--color-text-light);
            white-space: nowrap;
        }

        .lines-table .col-desc {
            max-width: 250px;
        }

        .lines-table .col-qty {
            text-align: right;
            white-space: nowrap;
        }

        .lines-table .col-price {
            text-align: right;
            white-space: nowrap;
        }

        .lines-table .col-amount {
            text-align: right;
            font-weight: 600;
            color: var(--color-warning-mat-dark);
            white-space: nowrap;
        }

        /* === BADGE TOTALI CLIENTE === */
        .customer-totals {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .total-badge {
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .total-badge.overdue {
            background: #ffebee;
            color: var(--color-danger-dark);
        }

        .total-badge.due {
            background: var(--color-warning-light);
            color: var(--color-warning-mat-dark);
        }

        .total-badge.credit {
            background: var(--color-success-light);
            color: var(--color-success-mat-dark);
        }

        .total-badge.total {
            background: var(--color-info-light);
            color: var(--color-info-dark);
            font-weight: 700;
        }

        .total-badge.fido-positive {
            background: var(--color-success-light);
            color: var(--color-success-mat-dark);
            font-weight: 600;
        }

        .total-badge.fido-negative {
            background: #ffebee;
            color: var(--color-danger-dark);
            font-weight: 600;
        }

        /* === ALERT PROROGA === */
        .alert-proroga {
            display: inline-block;
            margin-left: 0.5rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .alert-proroga.rischio {
            background: var(--color-warning-light);
            color: var(--color-warning-mat-dark);
        }

        .alert-proroga.urgente {
            background: #ffebee;
            color: var(--color-danger-dark);
        }
        /* Toggle Switch */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 1rem 0;
        }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--color-text-ghost);
            transition: 0.3s;
            border-radius: 26px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }
        
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--color-brand);
        }
        
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }
        
        .toggle-label {
            font-size: 0.95rem;
            color: var(--color-text);
            font-weight: 500;
        }
        
        /* Sticky toggle quando si scrolla */
        .toggle-sticky {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 4rem);
            max-width: 1200px;
            z-index: var(--z-panel-actions);
            margin: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        }
        
        /* Multi-select dropdown */
        .customer-filter {
            position: relative;
            width: 100%;
        }
        
        .customer-dropdown {
            background: white;
            border: 2px solid var(--color-border-dark);
            border-radius: 8px;
            padding: 0.75rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: border-color 0.2s;
        }
        
        .customer-dropdown:hover {
            border-color: var(--color-brand);
        }
        
        .customer-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 2px solid var(--color-border-dark);
            border-radius: 8px;
            margin-top: 0.5rem;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: var(--z-modal-overlay);
            display: none;
        }
        
        .customer-dropdown-menu.open {
            display: block;
        }
        
        .customer-option {
            padding: 0.75rem;
            border-bottom: 1px solid var(--color-border-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background 0.2s;
        }
        
        .customer-option:hover {
            background: var(--color-bg-hover);
        }
        
        .customer-option input[type="checkbox"] {
            cursor: pointer;
        }
        
        .filter-actions {
            padding: 0.75rem;
            display: flex;
            gap: 0.5rem;
            border-top: 2px solid #eee;
        }
        
        .filter-btn {
            flex: 1;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s;
        }
        
        .filter-btn.primary {
            background: var(--color-brand);
            color: white;
        }
        
        .filter-btn.primary:hover {
            background: var(--color-brand-dark);
        }
        
        .filter-btn.secondary {
            background: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        .filter-btn.secondary:hover {
            background: var(--color-border);
        }
        
        /* Tabella comparativa */
        .compare-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .compare-table th {
            background: var(--color-brand);
            color: white;
            padding: 1rem;
            text-align: left;
            cursor: pointer;
            user-select: none;
            position: relative;
        }
        
        .compare-table th:hover {
            background: var(--color-brand-dark);
        }
        
        .compare-table th.sortable::after {
            content: '↕';
            margin-left: 0.5rem;
            opacity: 0.5;
        }
        
        .compare-table th.sorted-asc::after {
            content: '↑';
            opacity: 1;
        }
        
        .compare-table th.sorted-desc::after {
            content: '↓';
            opacity: 1;
        }
        
        .compare-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--color-border-light);
        }
        
        .compare-table tr:hover {
            background: var(--color-bg-subtle);
        }
        
        .compare-table tfoot td {
            font-weight: 700;
            background: var(--color-bg-hover);
            border-top: 2px solid var(--color-brand);
        }
        /* === TEAM DASHBOARD — responsive card layout === */
        @media (min-width: 768px) {
            #teamDashboard { padding: 0.5rem; }
            #teamDashboard > div:not(:first-child) { 
                /* Agent cards side by side on tablet */
            }
        }
        @media (min-width: 1024px) {
            #teamDashboard {
                max-width: 900px;
                margin: 0 auto;
            }
        }

        /* === PWA STATUS BAR === */
        .pwa-status-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            background: rgba(0,0,0,0.35);
            font-size: 0.7rem;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
            min-height: 28px;
            position: relative;
            z-index: var(--z-header-sub);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .pwa-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            transition: background 0.3s;
        }
        .pwa-status-dot.online { background: #34D399; box-shadow: 0 0 6px #34D399; }
        .pwa-status-dot.syncing { background: #FBBF24; box-shadow: 0 0 6px #FBBF24; animation: pwa-pulse 1.5s ease-in-out infinite; }
        .pwa-status-dot.offline { background: #F87171; box-shadow: 0 0 6px #F87171; }
        .pwa-status-dot.partial { background: #FB923C; box-shadow: 0 0 6px #FB923C; }
        @keyframes pwa-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        .pwa-status-label {
            min-width: 52px;
        }
        .pwa-cache-bar-container {
            flex: 1;
            max-width: 160px;
            height: 6px;
            background: var(--overlay-white-15);
            border-radius: 3px;
            overflow: hidden;
        }
        .pwa-cache-bar-fill {
            height: 100%;
            background: #34D399;
            border-radius: 3px;
            transition: width 0.5s ease, background 0.3s;
            width: 0%;
        }
        .pwa-cache-bar-fill.partial { background: #FB923C; }
        .pwa-cache-bar-fill.empty { background: #F87171; }
        .pwa-cache-pct {
            min-width: 32px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .pwa-queue-badge {
            display: none;
            background: #FBBF24;
            color: #000;
            padding: 1px 7px;
            border-radius: 10px;
            font-size: 0.65rem;
            font-weight: 800;
            margin-left: auto;
        }
        .pwa-queue-badge.visible { display: inline-block; }
        .pwa-offline-timer {
            display: none;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 1px 7px;
            border-radius: 10px;
            background: rgba(248,113,113,0.25);
            color: #FCA5A5;
            letter-spacing: 0.02em;
            font-variant-numeric: tabular-nums;
        }
        .pwa-offline-timer.visible { display: inline-block; }
        .pwa-offline-timer.warning {
            background: rgba(251,191,36,0.25);
            color: #FDE68A;
            animation: pwa-pulse 1.5s ease-in-out infinite;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* BANNER/TOAST — sistema centralizzato                   */
        /* ═══════════════════════════════════════════════════════ */
        .nf-banner {
            position: fixed;
            left: 0; right: 0;
            color: white;
            text-align: center;
            font-weight: 700;
            font-family: var(--font-stack);
            z-index: var(--z-toast);
            transition: opacity 0.3s, transform 0.3s;
        }
        .nf-banner.top {
            top: 0;
            padding: 0.6rem 1rem;
            font-size: 0.82rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .nf-banner.bottom {
            bottom: 20px;
            left: 20px; right: 20px;
            padding: 14px 20px;
            border-radius: var(--radius-lg);
            font-size: 14px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        }
        .nf-banner.banner-warning { background: var(--color-warning); }
        .nf-banner.banner-danger { background: linear-gradient(135deg, #dc2626, #b91c1c); }
        .nf-banner.banner-success { background: #059669; }
        .nf-banner.banner-mixed { background: #D97706; }
        .nf-banner.banner-error { background: #DC2626; }

        /* ═══════════════════════════════════════════════════════ */
        /* MODAL OVERLAY — sistema centralizzato per popup JS     */
        /* ═══════════════════════════════════════════════════════ */
        .nf-popup-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: var(--z-nf-modal);
        }
        .nf-popup-overlay.overlay-light { background: var(--overlay-light); }
        .nf-popup-overlay.overlay-medium { background: var(--overlay-medium); }
        .nf-popup-overlay.overlay-heavy { background: var(--overlay-heavy); }
        .nf-popup-box {
            background: white;
            border-radius: var(--radius-xl);
            max-width: 500px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: var(--shadow-modal);
        }

        /* ═══════════════════════════════════════════════════════ */
        /* LAYOUT GRANDE — attivato da body.layout-large           */
        /* Il font-size di <html> viene portato a 20px via JS      */
        /* così tutti i valori rem scalano automaticamente x1.25   */
        /* ═══════════════════════════════════════════════════════ */

        /* Bottone toggle nell'header */
        #layoutToggleBtn {
            background: rgba(255,255,255,0.15);
            color: white;
            border: 2px solid rgba(255,255,255,0.4);
            padding: 0.4rem 0.7rem;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.3px;
            transition: all 0.3s;
            white-space: nowrap;
        }
        #layoutToggleBtn.active {
            background: rgba(255,255,255,0.30);
            border-color: rgba(255,255,255,0.80);
        }

        /* Split catalogo / carrello nella schermata ordine */
        body.layout-large #catalogScreen .catalog-body {
            flex-direction: row;
            align-items: stretch;
        }
        body.layout-large #catalogScreen .catalog-list-area {
            flex: 3;
            min-width: 0;
        }
        body.layout-large #catalogScreen .order-table-panel {
            flex: 2;
            min-width: 260px;
            max-height: none;
            height: 100%;
            border-top: none;
            border-left: 2px solid var(--color-border);
            display: flex;
            flex-direction: column;
        }
        /* Carrello sempre visibile — sovrascrive .collapsed */
        body.layout-large #catalogScreen .order-table-body,
        body.layout-large #catalogScreen .order-table-body.collapsed {
            display: flex !important;
            flex-direction: column;
            flex: 1;
        }
        /* Header carrello non cliccabile (non serve aprire/chiudere) */
        body.layout-large #catalogScreen .order-table-header {
            cursor: default;
            pointer-events: none;
        }
        body.layout-large #catalogScreen .order-table-toggle {
            display: none;
        }
        /* Footer bottoni: va in colonna per stare nel pannello laterale */
        body.layout-large #catalogScreen .order-table-footer {
            flex-direction: column;
            align-items: stretch;
            gap: 0.45rem;
        }
        body.layout-large #catalogScreen .order-table-footer > div,
        body.layout-large #catalogScreen .order-table-footer > button {
            width: 100%;
            justify-content: center;
        }
        body.layout-large #catalogScreen #deliveryDateContainer {
            justify-content: center;
        }
        body.layout-large #catalogScreen .order-confirm-btn {
            width: 100%;
        }