/**
 * Campo Catino Core - Tabelle Responsive
 * @since 3.1.0
 * @updated 3.2.6 - Font Awesome + Colori Elementor
 */

/* ============================================
   CSS VARIABLES - Ereditato da Elementor Kit
   ============================================ */

.ccpi-table-wrapper,
.ccpi-table {
    /* Usa colori Elementor se disponibili (ereditati dal parent .elementor-kit-XX) */
    --ccpi-table-primary: var(--e-global-color-primary, var(--ccpi-primary, #6EC1E4));
    --ccpi-table-secondary: var(--e-global-color-secondary, var(--ccpi-secondary, #54595F));
    --ccpi-table-text: var(--e-global-color-text, var(--ccpi-text, #7A7A7A));
    --ccpi-table-accent: var(--e-global-color-accent, var(--ccpi-accent, #61CE70));
    --ccpi-table-dark: var(--e-global-color-97ddd8d, #00678A);
    
    /* Font Elementor */
    --ccpi-table-font: var(--e-global-typography-text-font-family, 'Roboto', sans-serif);
    font-family: var(--ccpi-table-font);
    
    /* Colori derivati */
    --ccpi-table-success: var(--ccpi-success, #4caf50);
    --ccpi-table-error: var(--ccpi-error, #f44336);
    --ccpi-table-warning: var(--ccpi-warning, #ff9800);
}

/* ============================================
   FORCE LIGHT MODE - Sovrascrive dark mode del tema
   ============================================ */

@media (prefers-color-scheme: dark) {
    .ccpi-table-wrapper,
    .ccpi-table,
    .ccpi-table tbody,
    .ccpi-table tbody tr,
    .ccpi-table tbody td {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #333333 !important;
    }
    
    .ccpi-table thead,
    .ccpi-table thead tr,
    .ccpi-table thead th {
        background: linear-gradient(135deg, var(--ccpi-table-primary), var(--ccpi-table-primary)) !important;
        color: #ffffff !important;
    }
    
    .ccpi-col-nome strong {
        color: #333333 !important;
    }
    
    .ccpi-table tbody td {
        border-color: #eeeeee !important;
    }
    
    .ccpi-badge,
    .ccpi-badge-tipo {
        background: #e3f2fd !important;
        color: var(--ccpi-table-primary) !important;
    }
    
    .ccpi-riepilogo,
    .ccpi-riepilogo-item {
        background: #ffffff !important;
        color: #333333 !important;
    }
}

/* ============================================
   BASE TABLE STYLES
   ============================================ */

.ccpi-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

.ccpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ccpi-table thead {
    background: linear-gradient(135deg, var(--ccpi-table-primary), var(--ccpi-table-primary)) !important;
    color: #fff !important;
}

.ccpi-table thead th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    color: #fff !important;
    background: transparent !important;
}

.ccpi-table tbody {
    background: #ffffff !important;
}

.ccpi-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.ccpi-table tbody tr:nth-child(even) {
    background: #fafafa !important;
    background-color: #fafafa !important;
}

.ccpi-table tbody tr:hover {
    background: #f0f7ff !important;
    background-color: #f0f7ff !important;
}

.ccpi-table tbody tr:last-child {
    border-bottom: none;
}

.ccpi-table tbody td {
    padding: 12px;
    vertical-align: middle;
    background: transparent !important;
    color: #333 !important;
}

/* Colonne specifiche */
.ccpi-col-num {
    width: 40px;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.ccpi-col-nome strong {
    color: #333;
    font-weight: 600;
}

/* Forza colore nome anche con stato aperto */
.ccpi-row.ccpi-stato-aperto .ccpi-col-nome strong,
.ccpi-stato-aperto .ccpi-col-nome strong,
tr.ccpi-stato-aperto td.ccpi-col-nome strong {
    color: #333 !important;
}

.ccpi-col-stato {
    width: 90px;
    text-align: center;
}

.ccpi-stato-img {
    height: 24px;
    width: auto;
}

.ccpi-col-tipo,
.ccpi-col-difficolta {
    width: 100px;
}

.ccpi-col-lunghezza,
.ccpi-col-dislivello,
.ccpi-col-posti,
.ccpi-col-portata {
    text-align: right;
    white-space: nowrap;
}

.ccpi-col-quota {
    white-space: nowrap;
}

.ccpi-quota-sep {
    margin: 0 4px;
    color: #999;
}

/* ============================================
   BADGES
   ============================================ */

.ccpi-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.ccpi-badge-tipo {
    background: #e3f2fd;
    color: #1976d2;
}

/* Difficoltà piste */
.ccpi-badge-diff.ccpi-diff-verde {
    background: #4caf50;
    color: #fff;
}

.ccpi-badge-diff.ccpi-diff-blu {
    background: #2196f3;
    color: #fff;
}

.ccpi-badge-diff.ccpi-diff-rossa {
    background: #f44336;
    color: #fff;
}

.ccpi-badge-diff.ccpi-diff-nera {
    background: #212121;
    color: #fff;
}

.ccpi-badge-diff.ccpi-diff-fondo {
    background: #9c27b0;
    color: #fff;
}

/* ============================================
   RIGHE PER STATO
   ============================================ */

.ccpi-row.ccpi-stato-chiuso {
    opacity: 0.7;
}

.ccpi-row.ccpi-stato-chiuso .ccpi-col-nome strong {
    color: #999;
}

/* ============================================
   RIEPILOGO STATI
   ============================================ */

.ccpi-riepilogo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.ccpi-riepilogo-inline {
    align-items: center;
    justify-content: flex-start;
}

.ccpi-riepilogo-cards {
    justify-content: center;
}

.ccpi-riepilogo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ccpi-riepilogo-cards .ccpi-riepilogo-item {
    flex-direction: column;
    text-align: center;
    padding: 20px 30px;
    min-width: 150px;
}

.ccpi-riepilogo-icon {
    font-size: 24px;
}

.ccpi-riepilogo-label {
    font-size: 13px;
    color: #666;
}

.ccpi-riepilogo-value {
    font-size: 16px;
}

.ccpi-riepilogo-value .ccpi-aperti {
    color: #4caf50;
    font-size: 20px;
}

.ccpi-riepilogo-value .ccpi-sep {
    color: #999;
    margin: 0 2px;
}

.ccpi-riepilogo-value .ccpi-totale {
    color: #666;
}

.ccpi-riepilogo-value .ccpi-unit {
    font-size: 12px;
    color: #999;
    margin-left: 2px;
}

/* ============================================
   RESPONSIVE - TABLET (max 992px)
   ============================================ */

@media screen and (max-width: 992px) {
    .ccpi-table thead th {
        padding: 12px 8px;
        font-size: 11px;
    }
    
    .ccpi-table tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    .ccpi-col-posti,
    .ccpi-col-portata {
        display: none;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (max 768px)
   Righe diventano cards verticali
   ============================================ */

@media screen and (max-width: 768px) {
    /* Container */
    .ccpi-table-wrapper {
        overflow-x: visible !important;
        background: #f5f5f5 !important;
        padding: 10px !important;
        border-radius: 12px !important;
        border: none !important;
    }
    
    /* Table diventa container trasparente */
    .ccpi-table,
    table.ccpi-table {
        display: block !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    /* Nasconde completamente thead */
    .ccpi-table thead,
    table.ccpi-table thead {
        display: none !important;
    }
    
    /* tbody diventa flex container */
    .ccpi-table tbody,
    table.ccpi-table tbody,
    .ccpi-table-impianti tbody,
    .ccpi-table-piste tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    /* Ogni riga diventa una card */
    .ccpi-table tbody tr,
    table.ccpi-table tbody tr,
    .ccpi-table-impianti tbody tr,
    .ccpi-table-piste tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ogni cella diventa una riga della card: LABEL sinistra, VALORE destra */
    .ccpi-table tbody td,
    table.ccpi-table tbody td,
    .ccpi-table-impianti tbody td,
    .ccpi-table-piste tbody td {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #eee !important;
        background: #ffffff !important;
        color: #333 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ccpi-table tbody td:last-child {
        border-bottom: none !important;
    }
    
    /* Label da data-attribute - appare a sinistra */
    .ccpi-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: #666 !important;
        text-transform: uppercase !important;
        flex-shrink: 0 !important;
        margin-right: 15px !important;
    }
    
    /* NASCONDE NUMERO # */
    td.ccpi-col-num,
    .ccpi-col-num {
        display: none !important;
    }
    
    /* NOME - Header blu della card (unica eccezione) */
    td.ccpi-col-nome,
    .ccpi-col-nome,
    .ccpi-table tbody td.ccpi-col-nome,
    .ccpi-table-impianti tbody td.ccpi-col-nome,
    .ccpi-table-piste tbody td.ccpi-col-nome {
        background: linear-gradient(135deg, #1976d2, #1565c0) !important;
        padding: 16px !important;
        justify-content: center !important;
        border-bottom: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    td.ccpi-col-nome::before,
    .ccpi-col-nome::before {
        display: none !important;
    }
    
    td.ccpi-col-nome strong,
    .ccpi-col-nome strong,
    .ccpi-table tbody td.ccpi-col-nome strong,
    .ccpi-stato-aperto .ccpi-col-nome strong,
    .ccpi-stato-aperto td.ccpi-col-nome strong {
        color: #ffffff !important;
        font-size: 16px !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* STATO, TIPO, DIFFICOLTA - 100% con label a sinistra e valore a destra */
    td.ccpi-col-stato,
    td.ccpi-col-tipo,
    td.ccpi-col-difficolta,
    .ccpi-col-stato,
    .ccpi-col-tipo,
    .ccpi-col-difficolta {
        background: #ffffff !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Label a sinistra per STATO, TIPO, DIFFICOLTA */
    td.ccpi-col-stato::before,
    td.ccpi-col-tipo::before,
    td.ccpi-col-difficolta::before,
    .ccpi-col-stato::before,
    .ccpi-col-tipo::before,
    .ccpi-col-difficolta::before,
    .ccpi-table tbody td.ccpi-col-stato::before,
    .ccpi-table tbody td.ccpi-col-tipo::before,
    .ccpi-table tbody td.ccpi-col-difficolta::before,
    table tbody td.ccpi-col-stato::before,
    table tbody td.ccpi-col-tipo::before,
    table tbody td.ccpi-col-difficolta::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: #666 !important;
        text-transform: uppercase !important;
        flex-shrink: 0 !important;
        margin-right: auto !important;
    }
    
    /* Immagine stato */
    .ccpi-stato-img {
        height: 28px !important;
        flex-shrink: 0 !important;
    }
    
    /* Badges - non vanno a capo */
    .ccpi-badge {
        padding: 6px 14px !important;
        font-size: 12px !important;
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Riepilogo responsive */
    .ccpi-riepilogo {
        flex-direction: column !important;
        background: #f5f5f5 !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }
    
    .ccpi-riepilogo-item {
        width: 100% !important;
        justify-content: space-between !important;
        background: #ffffff !important;
    }
}

/* ============================================
   MOBILE SMALL (max 480px)
   ============================================ */

@media screen and (max-width: 480px) {
    .ccpi-table-wrapper {
        padding: 8px !important;
    }
    
    .ccpi-table tbody {
        gap: 12px !important;
    }
    
    .ccpi-table tbody td,
    table.ccpi-table tbody td {
        padding: 10px 14px !important;
        font-size: 13px !important;
        background: #ffffff !important;
    }
    
    .ccpi-table tbody td::before {
        font-size: 11px !important;
    }
    
    /* Numero sempre nascosto */
    .ccpi-col-num {
        display: none !important;
    }
    
    .ccpi-col-nome,
    .ccpi-table tbody td.ccpi-col-nome {
        padding: 14px !important;
    }
    
    .ccpi-col-nome strong {
        font-size: 15px !important;
        color: #ffffff !important;
    }
}

/* ============================================
   NO RESULTS
   ============================================ */

.ccpi-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    background: #f8f9fa;
    border-radius: 8px;
}

/* ============================================
   ANIMAZIONI
   ============================================ */

@keyframes ccpi-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ccpi-row.ccpi-stato-aperto .ccpi-stato-img {
    animation: ccpi-pulse 2s ease-in-out infinite;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .ccpi-table-wrapper {
        overflow: visible;
    }
    
    .ccpi-table {
        box-shadow: none;
        font-size: 10pt;
    }
    
    .ccpi-table thead {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .ccpi-table tbody tr {
        page-break-inside: avoid;
    }
    
    .ccpi-stato-img {
        height: 16px;
    }
    
    .ccpi-riepilogo {
        display: none;
    }
}