/* ============================================
 * TELANODE - Responsive Table (.tn-table-responsive)
 * ============================================
 * Usage: ajouter la classe "tn-table-responsive" sur la <table>
 *        et data-label="Nom colonne" sur chaque <td>
 *
 * En desktop : tableau classique
 * En mobile (<768px) : chaque <tr> se replie en carte
 * ============================================ */

.tn-responsive-label {
    display: none;
}

@media screen and (max-width: 768px) {

    .tn-table-responsive {
        border: 0;
    }

    .tn-table-responsive thead {
        display: none;
    }

    .tn-table-responsive tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid var(--tn-border);
        border-radius: var(--tn-radius);
        background: var(--tn-bg-primary);
        padding: 8px 0;
    }

    /* Suppression du striped en mode carte */
    .tn-table-responsive.striped tbody tr:nth-child(odd),
    .tn-table-responsive.striped tbody tr:nth-child(even) {
        background: var(--tn-bg-primary);
    }

    .tn-table-responsive tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 12px;
        text-align: right;
        border: none;
        border-bottom: 1px solid var(--tn-border-light);
        min-height: 32px;
    }

    .tn-table-responsive tbody td:last-child {
        border-bottom: none;
    }

    /* Label à gauche via data-label */
    .tn-table-responsive tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: var(--tn-text-3);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Afficher le label texte à côté des icônes */
    .tn-responsive-label {
        display: inline;
        margin-left: 4px;
        font-size: 12px;
    }

    /* Actions : centrer dans la carte */
    .tn-table-responsive tbody td:last-child {
        justify-content: center;
        padding-top: 8px;
    }

    .tn-table-responsive tbody td:last-child::before {
        display: none;
    }

    /* Badges : wrap naturel */
    .tn-table-responsive tbody td .tn-badge {
        margin: 1px 0;
    }

    /* Première cellule mise en avant comme header de carte */
    .tn-table-responsive tbody td:first-child {
        background: var(--tn-bg-tertiary);
        border-radius: var(--tn-radius) var(--tn-radius) 0 0;
        font-weight: 600;
    }
}

@media screen and (max-width: 480px) {

    .tn-table-responsive tbody td {
        padding: 5px 10px;
        font-size: 13px;
    }

    .tn-table-responsive tbody td::before {
        font-size: 11px;
    }
}