/* WRAPPER SCROLL TABELLARE */
.table-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
}


/* TABELLA */
#tolcTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


/* HEADER */
#tolcTable th {
    background: #124e9f;
    color: white;
    padding: 10px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
}


/* CELLE */
#tolcTable td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    word-break: break-word;
    white-space: normal;
}


/* HOVER RIGHE */
#tolcTable tr:hover {
    background: #ebeff6;
}


/* STATO ISCRIZIONE */
.stato-aperto {
    color: #1f9d3a;
    font-weight: 600;
}

.stato-chiuso {
    color: #d93025;
    font-weight: 600;
}


/* BOTTONI TOLC */
.tolc-btn {
    background-color: #ffffff;
    border: 2px solid #124e9f;
    color: #124e9f;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}


/* HOVER BOTTONI */
.tolc-btn:hover {
    background-color: #E44A26;
    border: 2px solid #E44A26;
    color: #ffffff;
}


/* BOTTONE ATTIVO */
.tolc-btn.active {
    background-color: #E44A26;
    border: 2px solid #E44A26;
    color: #ffffff;
}


/* SELECT FILTRI NELLE COLONNE */
.tolcSelect {
    width: 100%;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #124e9f;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    outline: none;
}

/* quando la select è cliccata o selezionata */
.tolcSelect:focus,
.tolcSelect:active {
    background-color: #124e9f;
    color: #ffffff;
    outline: none;
}

.tolcSelect option {
    color: #000;
    background: #fff;
}

@media (max-width: 768px) {
    /* Rendi la tabella scorrevole orizzontalmente su dispositivi mobili */
    .table-scroll {
        overflow-x: auto; /* Permetti lo scorrimento orizzontale */
        -webkit-overflow-scrolling: touch; /* Migliora l'esperienza su dispositivi mobili */
    }

    /* La tabella non deve mai diventare troppo stretta, quindi imposta una larghezza minima */
    #tolcTable {
        min-width: 600px; /* Evita che la tabella diventi troppo stretta */
        width: auto; /* La larghezza si adatta al contenuto */
    }

    /* Mantieni la visibilità delle colonne, impedendo che vengano nascoste */
    #tolcTable th,
    #tolcTable td {
        white-space: nowrap; /* Impedisce che il testo vada a capo */
    }
}