
        .editable {
            cursor: pointer;
            position: relative;
            border-bottom: 1px dashed var(--border-color);
            -webkit-tap-highlight-color: transparent; /* Rimuove flash grigio al tap su mobile */
        }
        
        /* Colonna Hotel bloccata (non modificabile) */
        .hotel-cell {
            cursor: not-allowed;
            background: var(--bg-secondary);
            opacity: 0.7;
            user-select: none;
            pointer-events: none;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        .hotel-cell:hover {
            background: var(--bg-secondary);
            opacity: 0.8;
        }
        
        [data-theme="dark"] .hotel-cell {
            background: rgba(184, 212, 184, 0.1);
            opacity: 0.8;
        }

        .editable:hover {
            background: var(--color-editable-hover) !important;
        }

        td.editable.editing {
            padding: 0;
        }

        .editable input,
        .editable textarea {
            width: 100%;
            border: 2px solid var(--accent-primary);
            padding: 8px;
            font-size: inherit;
            font-family: inherit;
            border-radius: 4px;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }

        .editable textarea {
            min-height: 60px;
            resize: vertical;
        }

        /* Empty state per tab senza dati */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
            font-size: 1.05em;
        }
        .empty-state-icon {
            font-size: 2em;
            margin-bottom: 8px;
        }

        /* Azioni riga */
        .row-action {
            text-align: center;
            white-space: nowrap;
        }
        /* Stile per righe selezionate per cancellazione */
        tr.row-selected-for-deletion {
            background-color: rgba(217, 83, 79, 0.15) !important;
            outline: 2px solid #d9534f;
            outline-offset: -2px;
        }
        
        [data-theme="dark"] tr.row-selected-for-deletion {
            background-color: rgba(217, 83, 79, 0.25) !important;
            outline-color: #ff6b6b;
        }
        
        /* v1.1 - Stile per righe selezionate con checkbox */
        tr.row-selected {
            background-color: rgba(76, 175, 80, 0.15) !important;
            outline: 2px solid var(--accent-primary);
            outline-offset: -2px;
        }
        
        [data-theme="dark"] tr.row-selected {
            background-color: rgba(76, 175, 80, 0.25) !important;
        }
        
        /* MOB-008: Custom checkbox (appearance:none) - consistente iOS/Android/Desktop.
           Pattern: GitHub, Linear, Stripe. Accessibilita preservata (resta <input type=checkbox>). */
        .row-checkbox {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border: 1.5px solid var(--border-color);
            border-radius: 3px;
            background-color: var(--bg-primary);
            cursor: pointer;
            position: relative;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .row-checkbox:checked {
            background-color: var(--accent-primary);
            border-color: var(--accent-primary);
        }

        .row-checkbox:checked::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background-color: white;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }

        /* Hover solo su device con mouse (non touch) */
        @media (hover: hover) {
            .row-checkbox:not(:disabled):hover {
                border-color: var(--accent-primary);
            }
        }

        .row-checkbox:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        td.row-select-cell {
            text-align: center;
            padding: 4px;
            overflow: visible; /* Fix clipping colonna sticky su iOS */
        }
        
        /* STRUCT-009: Toolbar selezione (separata dai filtri) */
        .row-selection-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--color-success-dark) 100%);
            border-radius: 8px;
            color: white;
            margin-bottom: 8px;
            animation: slideIn 0.2s ease-out;
        }
        .row-selection-toolbar .selection-count {
            font-weight: 600;
        }
        .btn-toolbar {
            padding: 6px 12px;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            color: white;
            cursor: pointer;
            font-weight: 500;
        }
        .btn-toolbar:hover {
            background: rgba(255,255,255,0.3);
        }
        .btn-toolbar-close {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.2);
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Accessibilita: disabilita animazioni per chi preferisce reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .row-selection-toolbar {
                animation: none;
            }
        }
        
        .btn-row-delete,
        .btn-row-history {
            background: transparent;
            color: #888;
            padding: 4px 8px;
            border: none;
            cursor: pointer;
            font-size: 1em;
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }
        .btn-row-delete:hover {
            opacity: 1;
            color: #666;
        }
        .btn-row-history { 
            background: #1f6f8b;
            color: #fff;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.18);
        }
        .btn-row-history:hover {
            filter: brightness(1.07);
        }
        
        /* Stile per colonna Pareggio */
        td.pareggio-cell {
            text-align: center;
            vertical-align: middle;
            min-width: 80px;
            padding: 8px;
        }
        
        .pareggio-link {
            cursor: pointer;
            color: var(--portal-primary);
            font-weight: bold;
            font-size: 1.1em;
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            text-decoration: none;
        }
        
        .pareggio-link:hover {
            background-color: var(--table-hover);
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        .pareggio-empty {
            color: var(--text-secondary);
            opacity: 0.3;
            font-size: 0.9em;
        }
        
        /* Pareggi numero (⛳️ #X) usa colori portale */
        .pareggio-numero {
            color: var(--portal-primary);
        }
        
        [data-theme="dark"] .pareggio-link {
            color: var(--portal-tertiary);
        }
        
        [data-theme="dark"] .pareggio-link:hover {
            background-color: var(--table-hover);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        [data-theme="dark"] .pareggio-empty {
            color: var(--text-secondary);
        }
        
        /* Stile per ID link (element-id-link) */
        .element-id-link {
            cursor: pointer;
            color: var(--portal-primary);
            font-weight: bold;
            font-size: 0.9em;
            display: inline-block;
            padding: 2px 6px;
            margin-left: 6px;
            border-radius: 4px;
            transition: all 0.2s ease;
            text-decoration: none;
            background: rgba(var(--portal-primary-rgb, 46, 125, 50), 0.1);
        }
        
        .element-id-link:hover {
            background-color: var(--table-hover);
            transform: scale(1.05);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        [data-theme="dark"] .element-id-link {
            color: var(--portal-tertiary);
            background: rgba(var(--portal-tertiary-rgb, 67, 160, 71), 0.15);
        }
        
        [data-theme="dark"] .element-id-link:hover {
            background-color: var(--table-hover);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        
        /* Highlight temporaneo per righe quando si clicca su ID */
        .element-highlight {
            animation: highlightPulse 3s ease-out;
            outline: 3px solid var(--portal-primary);
            outline-offset: -3px;
        }
        
        @keyframes highlightPulse {
            0% {
                outline-color: var(--portal-primary);
                background-color: rgba(var(--portal-primary-rgb, 46, 125, 50), 0.2);
            }
            50% {
                outline-color: var(--portal-secondary);
                background-color: rgba(var(--portal-secondary-rgb, 56, 142, 60), 0.15);
            }
            100% {
                outline-color: transparent;
                background-color: transparent;
            }
        }
        
        [data-theme="dark"] .element-highlight {
            animation: highlightPulseDark 3s ease-out;
        }
        
        @keyframes highlightPulseDark {
            0% {
                outline-color: var(--portal-tertiary);
                background-color: rgba(var(--portal-tertiary-rgb, 67, 160, 71), 0.25);
            }
            50% {
                outline-color: var(--portal-secondary);
                background-color: rgba(var(--portal-secondary-rgb, 56, 142, 60), 0.2);
            }
            100% {
                outline-color: transparent;
                background-color: transparent;
            }
        }
        
        /* Stile per celle Sig. Sergio selezionate - SOLO la cella, non tutta la riga */
        /* Stile per celle Fatto selezionate - SOLO la cella, non tutta la riga */
        .fatto-cell.selected,
        .sig-sergio-cell.selected {
            background: var(--color-editable-hover) !important;
            outline: 2px solid var(--accent-primary);
            outline-offset: -2px;
            position: relative;
            z-index: 10;
        }
        
        /* Previeni selezione testo durante drag su celle Fatto e Sig. Sergio */
        /* Previeni selezione testo su righe con celle Sig. Sergio selezionate (JavaScript gestisce questo) */
        .prevent-text-selection {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        
        /* Riga evidenziata quando Sig. Sergio = "sì" - escludi Stagione, Hotel, Note, Pareggio */
        /* Colore cella Fatto quando contiene "sì" (solo cella, non riga) */
        tbody tr td.fatto-cell[data-fatto="sì"],
        tbody tr[data-fatto="sì"] td.fatto-cell {
            background: var(--color-sig-sergio-done) !important;
        }
        
        /* CAPARRA: evidenzia TUTTA LA RIGA quando Sig. Sergio = "sì" */
        tbody tr[data-sig-sergio="sì"] td:nth-child(1),  /* Data Conferma */
        tbody tr[data-sig-sergio="sì"] td:nth-child(2),  /* Data Inserimento */
        tbody tr[data-sig-sergio="sì"] td:nth-child(4),  /* Nome (dopo Pareggio) */
        tbody tr[data-sig-sergio="sì"] td:nth-child(5),  /* Check Out */
        tbody tr[data-sig-sergio="sì"] td:nth-child(6),  /* Canale */
        tbody tr[data-sig-sergio="sì"] td:nth-child(7),  /* Totale */
        tbody tr[data-sig-sergio="sì"] td:nth-child(8),  /* Circuito */
        tbody tr[data-sig-sergio="sì"] td:nth-child(9),  /* Numero */
        tbody tr[data-sig-sergio="sì"] td:nth-child(10) { /* Sig. Sergio */
            background: var(--color-sig-sergio-done) !important;
        }
        
        /* GIR: evidenzia colonne chiave quando Sig. Sergio = "sì" */
        /* Struttura post-insertBefore: 1=checkbox 2=data 3=pareggio 4=nome 5=totale 6=somma 7=id 8=fatto 9=sig-sergio 10=note 11=delete */
        #girTable tbody tr[data-sig-sergio="sì"] td:nth-child(2),  /* Data */
        #girTable tbody tr[data-sig-sergio="sì"] td:nth-child(4),  /* Nome */
        #girTable tbody tr[data-sig-sergio="sì"] td:nth-child(5),  /* Totale */
        #girTable tbody tr[data-sig-sergio="sì"] td:nth-child(6),  /* Somma */
        #girTable tbody tr[data-sig-sergio="sì"] td:nth-child(9) { /* Sig. Sergio */
            background: var(--color-sig-sergio-done) !important;
        }

        /* Color coding per GIR FEST e FE: usa data-field="totale" (robusto) */
        #girTable tbody tr[data-tipo-gir^="FEST"] td[data-field="totale"] {
            background: rgba(255, 152, 0, 0.2) !important;
            font-weight: 600;
            border-left: 3px solid var(--color-warning);
        }

        #girTable tbody tr[data-tipo-gir^="FE"]:not([data-tipo-gir^="FEST"]) td[data-field="totale"] {
            background: rgba(156, 39, 176, 0.2) !important;
            font-weight: 600;
            border-left: 3px solid var(--color-tipo-fe);
        }

        [data-theme="dark"] #girTable tbody tr[data-tipo-gir^="FEST"] td[data-field="totale"] {
            background: rgba(255, 152, 0, 0.3) !important;
        }

        [data-theme="dark"] #girTable tbody tr[data-tipo-gir^="FE"]:not([data-tipo-gir^="FEST"]) td[data-field="totale"] {
            background: rgba(156, 39, 176, 0.3) !important;
        }

        /* Selezione e somma totale */
        .table-container {
            position: relative;
        }

        .total-summary {
            position: fixed;
            bottom: 100px;  /* Più in alto, sopra il footer */
            right: 40px;    /* Leggermente più a sinistra */
            background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
            color: white;
            padding: 15px 25px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4);
            font-size: 1.1em;
            font-weight: 600;
            z-index: 1000;
            display: none;
            min-width: 200px;
            text-align: center;
        }

        .total-summary.visible {
            display: block;
        }

        .total-summary .label {
            font-size: 0.9em;
            opacity: 0.9;
            margin-bottom: 5px;
        }

        .total-summary .value {
            font-size: 1.3em;
        }

        /* Selezione celle */
        td.selectable {
            cursor: pointer;
        }

        /* Selezione celle Totale - deve sovrascrivere il blu fisso */
        tbody tr td.selectable.selected,
        #girTable tbody tr td.selectable.selected {
            background: var(--color-selected) !important;
            font-weight: bold !important;
            outline: 2px solid var(--color-selected-border);
            outline-offset: -2px;
        }

        /* Evidenziazione celle Data quando corrispondente Totale è selezionato */
        tbody tr td.date-highlighted {
            background: var(--color-selected) !important;
            font-weight: bold !important;
            outline: 2px solid var(--color-selected-border);
            outline-offset: -2px;
        }

        td.selectable:hover {
            background: var(--color-editable-hover) !important;
        }
        
        /* JI-P1-02 fix: usa data-field="totale" invece di nth-child (robusto se cambiano colonne) */
        /* Scoped a caparraTable/girTable per non colpire POS (ha stili propri) */
        #caparraTable tbody tr td[data-field="totale"],
        #girTable tbody tr td[data-field="totale"] {
            background: var(--color-totale-bg) !important;
            color: var(--color-totale-text) !important;
            font-weight: 500;
        }

        /* Evidenzia celle con virgola (errore) */
        #caparraTable tbody tr td[data-field="totale"][data-has-comma="true"],
        #girTable tbody tr td[data-field="totale"][data-has-comma="true"] {
            background: var(--color-error) !important;
            color: var(--color-error-text) !important;
        }

        /* PERF-001: Controlli paginazione tabelle */
        .pagination-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            margin-top: 4px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-secondary);
            border-radius: 0 0 8px 8px;
        }

        .btn-page {
            padding: 6px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 1em;
            font-weight: 600;
            min-width: 36px;
            transition: all 0.15s ease;
        }

        .btn-page:hover:not(:disabled) {
            background: var(--accent-primary);
            color: white;
            border-color: var(--accent-primary);
        }

        .btn-page:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .page-info {
            font-size: 0.85em;
            color: var(--text-secondary);
            padding: 0 8px;
            white-space: nowrap;
        }

        /* UX-006: Selettore righe per pagina */
        .pagesize-selector {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            white-space: nowrap;
        }

        .pagesize-selector label {
            font-size: 0.82em;
            color: var(--text-secondary);
        }

        .pagesize-select {
            padding: 4px 8px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 0.85em;
            cursor: pointer;
            transition: border-color 0.15s ease;
        }

        .pagesize-select:hover {
            border-color: var(--accent-primary);
        }

        .pagesize-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
        }

        [data-theme="dark"] .pagination-controls {
            border-top-color: rgba(184, 212, 184, 0.2);
        }

        /* ========================================
           RESP-007: Touch targets >= 44px su mobile (tabella)
           ======================================== */
        @media (max-width: 768px) {
            /* Paginazione: bottoni piu' grandi */
            .btn-page {
                min-height: 44px;
                min-width: 44px;
                padding: 8px 14px;
            }

            /* UX-006: Selettore pageSize su mobile - label nascosta, select touch-friendly */
            .pagination-controls {
                flex-wrap: wrap;
            }

            .pagesize-selector label {
                display: none;
            }

            .pagesize-select {
                min-height: 44px;
                font-size: 1em;
            }

            /* M05: Su mobile rimuovi bordi dashed editabili - pulizia visiva */
            .editable {
                border-bottom: none;
            }

            /* MOB-008: Checkbox 14px visuale, area touch 44px (Apple HIG) */
            td.row-select-cell {
                padding: 0;
                width: 44px;
                height: 44px;
            }

            .row-checkbox {
                width: 14px;
                height: 14px;
                /* Area touch 44x44 con padding trasparente (appearance:none = no clipping iOS) */
                padding: 15px;
                margin: 0;
                box-sizing: content-box;
            }

            .row-checkbox:checked::before {
                width: 8px;
                height: 8px;
            }

            /* Bottoni riga: delete e history */
            .btn-row-delete,
            .btn-row-history {
                min-height: 44px;
                min-width: 44px;
                padding: 10px 12px;
                font-size: 1.1em;
            }

            /* Toolbar selezione: adatta su mobile */
            .row-selection-toolbar {
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 12px;
            }

            .btn-toolbar {
                min-height: 44px;
                padding: 8px 14px;
            }
        }

        /* UX-BADGE: Badge conteggio filtri attivi sul pulsante Reset */
        .filter-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            margin-left: 6px;
            border-radius: 9px;
            background: var(--accent-primary);
            color: white;
            font-size: 0.75em;
            font-weight: 600;
            line-height: 1;
            vertical-align: middle;
        }

        [data-theme="dark"] .filter-badge {
            background: var(--accent-primary);
            color: #1a2a1a;
        }

