/* Ultra-class glassmorphism design pour les tableaux d'informations */

.table-infos {
    position: relative;
    --border-radius-table-infos: var(--border-radius);
    border-radius: var(--border-radius-table-infos);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(var(--card-shadow-color), 0.1);
    border: 1px solid rgba(var(--background-quaternary), 0.2);

    & table {
        background: rgba(var(--background-tertiary), 0.2);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-collapse: separate;
        border-spacing: 0;
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius-table-infos);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(var(--blue-primary), 0.6),
                    transparent);
        }

        & tbody {
            & tr {
                border-bottom: 1px solid rgba(var(--background-quaternary), 0.15);
                transition: all 0.3s ease;
                position: relative;

                &:last-child {
                    border-bottom: none;
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 3px;
                    background: linear-gradient(135deg,
                            rgba(var(--blue-primary), 0.8),
                            rgba(var(--blue-primary), 0.4));
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }

                &:hover {
                    background: rgba(var(--background-quaternary), 0.15);
                    backdrop-filter: blur(25px);
                    -webkit-backdrop-filter: blur(25px);

                    &::before {
                        opacity: 1;
                    }

                    & th {
                        color: rgba(var(--blue-primary), 1);
                        transform: translateX(5px);
                    }

                    & td {
                        color: rgba(var(--text-primary), 1);
                    }
                }

                & th {
                    padding: 6px 8px;
                    text-align: left;
                    font-weight: 600;
                    font-size: 12px;
                    color: rgba(var(--text-secondary), 1);
                    width: 0px !important;
                    max-width: min-content !important;
                    min-width: 20px !important;
                    transition: all 0.3s ease;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 60%;
                        background: linear-gradient(180deg,
                                transparent,
                                rgba(var(--background-quaternary), 0.3),
                                transparent);
                    }
                }

                & td {
                    padding: 12px 16px;
                    text-align: left;
                    font-weight: 400;
                    color: rgba(var(--text-primary), 0.9);
                    transition: all 0.3s ease;
                    font-size: 0.95em;
                }
            }

            /* Effet zebré subtil et moderne */
            & tr:nth-child(even) {
                background: rgba(var(--background-quaternary), 0.05);
            }

            /* Première ligne avec style spécial */
            & tr:first-child {

                & th,
                & td {
                    padding-top: 16px;
                }
            }

            /* Dernière ligne avec style spécial */
            & tr:last-child {

                & th,
                & td {
                    padding-bottom: 16px;
                }
            }
        }
    }
}

/* Style alternatif pour les tableaux avec titre */
h2+.table {
    margin-top: 15px;
}

/* Animation au chargement */
@keyframes tableSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table {
    animation: tableSlideIn 0.5s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .table {
        & table {
            & tbody {
                & tr {
                    & th {
                        width: 40%;
                        padding: 10px 12px;
                        font-size: 0.85em;
                    }

                    & td {
                        padding: 10px 12px;
                        font-size: 0.9em;
                    }
                }
            }
        }
    }
}

/* Variante compacte */
.table.table-compact {
    & table {
        & tbody {
            & tr {

                & th,
                & td {
                    padding: 8px 12px;
                    font-size: 0.85em;
                }
            }
        }
    }
}

/* Variante avec bordures arrondies pour chaque ligne */
.table.table-rounded-rows {
    & table {
        border-spacing: 0 8px;

        & tbody {
            & tr {
                background: rgba(var(--background-tertiary), 0.3);
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(15px);
                border-radius: var(--border-radius-table-infos);
                border-bottom: none;
                box-shadow: 0 2px 8px rgba(var(--card-shadow-color), 0.05);

                &:hover {
                    background: rgba(var(--background-quaternary), 0.25);
                    box-shadow: 0 4px 12px rgba(var(--card-shadow-color), 0.1);
                    transform: translateX(3px);
                }

                & th {
                    border-top-left-radius: 12px;
                    border-bottom-left-radius: 12px;
                }

                & td {
                    border-top-right-radius: 12px;
                    border-bottom-right-radius: 12px;
                }
            }
        }
    }
}

/* Effet de brillance au hover */
.table {
    & table {
        & tbody {
            & tr {
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg,
                            transparent,
                            rgba(255, 255, 255, 0.01),
                            transparent);
                    transition: left 0.8s ease;
                }

                &:hover::after {
                    left: 100%;
                }
            }
        }
    }
}