/* ----- colors for light mode ----- */
:root {
    --color-white: rgb(255, 255, 255);
    --text-color: rgb(68, 68, 68);
    --first-color: rgb(30, 160, 170);
    --first-shadow-color: rgba(0, 0, 0, 0.1);
}

/* ----- Dark mode ----- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-white: rgb(68, 68, 68);
        --text-color: rgb(255, 255, 255);
    }
}

/* ----- TABLE ----- */
/* Contenitore della tabella con scorrimento orizzontale */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Per una migliore esperienza su dispositivi mobili */
}

/* ----- Tabella ----- */
.custom-table {
    border-collapse: separate;
    border-spacing: 0 10px;
    width: 100%;
}

.custom-table th,
.custom-table td {
    padding: 12px 20px;
    border: 1px solid var(--first-shadow-color);
    text-align: left;
}

.custom-table th {
    background-color: var(--first-color);
    color: var(--color-white);
    font-weight: 600;
}

.custom-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}

.custom-table tbody tr:nth-child(even) {
    background-color: var(--color-white);
}

.custom-table td {
    color: var(--text-color);
}

.custom-table th,
.custom-table td {
    font-size: 16px;
}

.custom-table th:nth-child(2),
.custom-table td:nth-child(2),
.custom-table th:nth-child(3),
.custom-table td:nth-child(3) {
    width: 30%;
}

.custom-table th:nth-child(4),
.custom-table td:nth-child(4) {
    width: auto;
}

.custom-table th:nth-child(5),
.custom-table td:nth-child(5) {
    width: 100px;
}