.scrollable-table-wrapper {
    margin: 10px 0;
}

.styled-grid {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 5px, 5px;
    table-layout: auto;
    border-collapse: collapse;
}

    .styled-grid thead tr {
        background-color: var(--color-btn-bg--primary);
        color: var(--color-btn-text--primary);
        text-align: left;
    }

    .styled-grid th,
    .styled-grid td {
        padding: 12px 15px;
        word-wrap: break-word;
    }

    .styled-grid tbody {
        height: 100%;
    }
        .styled-grid tbody tr {
            border-bottom: 1px solid #dddddd;
        }
        .styled-grid tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

    
        .styled-grid tbody tr.active-row {
            font-weight: bold;
            color: #009879;
        }

/*    MOBILE*/

@media (max-width: 768px) {

    .styled-grid {
        font-size: 0.8em; /* Réduction de la taille de la police */
    }

        .styled-grid thead {
            display: none; /* Cache les en-têtes sur mobile */
        }

        .styled-grid tbody tr {
            display: flex;
            flex-direction: column; /* Les lignes deviennent des blocs */
            margin-bottom: 1em;
            border-bottom: none; /* Supprime les bordures inutiles */
        }

        .styled-grid tbody td {
            display: flex;
            justify-content: space-between; /* Gère le contenu en colonnes */
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

            .styled-grid tbody td::before {
                content: attr(data-label); /* Ajoute les noms des colonnes */
                font-weight: bold;
                text-transform: uppercase;
                margin-right: 8px;
                color: #333;
            }
}