/* ========================================
   SKELETON LOADER - Caricamento elegante
   ======================================== */

/* Animazione shimmer */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Base skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--border-color) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton per righe tabella */
.skeleton-row td {
    padding: 10px 8px;
}

.skeleton-row td .skeleton-cell {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--border-color) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Larghezze variabili per colonna - piu realistico */
.skeleton-row td:nth-child(1) .skeleton-cell { width: 16px; height: 16px; border-radius: 3px; }
.skeleton-row td:nth-child(2) .skeleton-cell { width: 75%; }
.skeleton-row td:nth-child(3) .skeleton-cell { width: 70%; }
.skeleton-row td:nth-child(4) .skeleton-cell { width: 30%; }
.skeleton-row td:nth-child(5) .skeleton-cell { width: 85%; }
.skeleton-row td:nth-child(6) .skeleton-cell { width: 45%; }
.skeleton-row td:nth-child(7) .skeleton-cell { width: 65%; }
.skeleton-row td:nth-child(8) .skeleton-cell { width: 55%; }
.skeleton-row td:nth-child(9) .skeleton-cell { width: 50%; }
.skeleton-row td:nth-child(10) .skeleton-cell { width: 60%; }

/* Delay progressivo per effetto onda */
.skeleton-row:nth-child(2) td .skeleton-cell { animation-delay: 0.1s; }
.skeleton-row:nth-child(3) td .skeleton-cell { animation-delay: 0.2s; }
.skeleton-row:nth-child(4) td .skeleton-cell { animation-delay: 0.3s; }
.skeleton-row:nth-child(5) td .skeleton-cell { animation-delay: 0.4s; }
.skeleton-row:nth-child(6) td .skeleton-cell { animation-delay: 0.5s; }
.skeleton-row:nth-child(7) td .skeleton-cell { animation-delay: 0.6s; }
.skeleton-row:nth-child(8) td .skeleton-cell { animation-delay: 0.7s; }

/* Skeleton per testo/numeri */
.skeleton-text {
    height: 1em;
    width: 60%;
    margin: 4px 0;
}

.skeleton-number {
    height: 2.5rem;
    width: 80%;
    margin: 8px auto;
}

.skeleton-number-small {
    height: 1.2rem;
    width: 50%;
    margin: 4px auto;
}

/* Skeleton per stat cards */
.stat-card-quadratura .skeleton-label {
    height: 0.9rem;
    width: 70%;
    margin: 0 auto 8px;
}

.stat-card-quadratura .skeleton-value {
    height: 3rem;
    width: 60%;
    margin: 8px auto;
}

.stat-card-quadratura .skeleton-subtitle {
    height: 0.85rem;
    width: 50%;
    margin: 4px auto;
}

.stat-card-quadratura .skeleton-percent {
    height: 1.1rem;
    width: 40%;
    margin: 8px auto 0;
}

/* Nascondi contenuto reale quando skeleton attivo (opacity per smooth transition) */
.stat-card-quadratura.is-loading .stat-label,
.stat-card-quadratura.is-loading .stat-value,
.stat-card-quadratura.is-loading .stat-total,
.stat-card-quadratura.is-loading .stat-subtitle,
.stat-card-quadratura.is-loading .stat-percent,
.stat-card-quadratura.is-loading .stat-details {
    opacity: 0;
    pointer-events: none;
}

/* Mostra skeleton solo quando loading */
.stat-card-quadratura .skeleton-wrapper {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.stat-card-quadratura.is-loading .skeleton-wrapper {
    display: block;
}

.stat-card-quadratura.is-loading {
    position: relative;
    min-height: 120px;
}

/* Transizione smooth */
.stat-card-quadratura .stat-label,
.stat-card-quadratura .stat-value,
.stat-card-quadratura .stat-total,
.stat-card-quadratura .stat-subtitle,
.stat-card-quadratura .stat-percent,
.stat-card-quadratura .stat-details {
    transition: opacity 0.3s ease;
}

/* Fade-in per righe tabella - solo al primo caricamento (skeleton -> dati) */
.data-first-load .caparra-row,
.data-first-load .gir-row {
    animation: fadeInData 0.3s ease;
}

/* Anti-flash: nasconde valori numerici durante il caricamento */
.footer-stat .stat-value.is-loading {
    opacity: 0;
}

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

/* CONS-001: Loading text uniforme - per aree di contenuto che mostrano "Caricamento..." */
@keyframes loading-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.loading-text {
    color: var(--text-secondary);
    font-style: italic;
    animation: loading-pulse 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .loading-text {
        animation: none;
        opacity: 0.6;
    }
}

.footer-stat .stat-value.data-ready {
    opacity: 1;
    animation: fadeInData 0.3s ease;
}

/* Accessibilita: disabilita animazioni per utenti con sensibilita al movimento */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-row td .skeleton-cell,
    .footer-stat .stat-value.data-ready,
    .data-first-load .caparra-row,
    .data-first-load .gir-row {
        animation: none;
    }
}

/* Dark mode skeleton */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-row td .skeleton-cell {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        #3a4a3a 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
}

/* ========================================
   PRINT STYLESHEET
   Stampa tabelle leggibili, nasconde UI
   ======================================== */
@media print {
    /* Nascondi UI non necessaria per la stampa */
    .footer-fixed,
    .filters,
    .header-actions,
    .upload-section,
    .btn,
    button,
    .history-modal,
    .theme-toggle,
    .skip-link,
    .pareggi-container,
    input[type="checkbox"] {
        display: none !important;
    }

    /* Reset sfondo e colori per stampa */
    body {
        background: white !important;
        color: black !important;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }

    .main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header semplificato */
    .header {
        background: white !important;
        color: black !important;
        border-bottom: 2px solid black;
        padding: 8px 0 !important;
        position: static !important;
    }

    .header h1 {
        color: black !important;
        font-size: 14pt;
    }

    /* Tabelle leggibili */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
        font-size: 9pt;
    }

    th, td {
        border: 1px solid #333 !important;
        padding: 4px 6px !important;
        background: white !important;
        color: black !important;
        text-align: left;
    }

    th {
        background: #e0e0e0 !important;
        font-weight: bold;
    }

    /* Evita taglio righe tra pagine */
    tr {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    /* Mostra tutte le tab attive */
    .tab-content {
        display: block !important;
        page-break-before: always;
    }

    .tab-content:first-of-type {
        page-break-before: auto;
    }

    /* Nascondi colonne non utili in stampa */
    th:first-child, td:first-child {
        display: none !important;
    }

    /* Colonne hidden restano hidden */
    .col-numero, [style*="display:none"],
    [style*="display: none"] {
        display: none !important;
    }
}