/**
 * Tableaux Sombres et Responsive - Intranet DTISI
 *
 * Styles pour tableaux avec:
 * - Thème sombre optimisé
 * - Mode card automatique sur mobile
 * - Support DataTables
 * - Animations fluides
 */

/* ============================= */
/* 1. TABLEAUX DE BASE (SOMBRES) */
/* ============================= */

/* IMPORTANT : Forcer le fond sombre sur tous les tableaux */
.table,
table.table,
.table-responsive table,
.dataTables_wrapper table,
table.dataTable {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-primary, #f0f0f0) !important;
    background-color: transparent !important;
    border-collapse: collapse;
}

/* Assurer que le tbody n'a pas de fond blanc */
.table tbody,
table.table tbody,
table.dataTable tbody {
    background-color: transparent !important;
}

.table th,
.table td,
table.dataTable th,
table.dataTable td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent !important;
    color: var(--text-primary, #f0f0f0) !important;
}

/* Forcer les cellules à ne jamais avoir de fond blanc */
.table tbody tr td,
table.dataTable tbody tr td {
    background-color: transparent !important;
}

/* En-têtes de tableau */
.table thead th {
    background: rgba(0, 0, 70, 0.6);
    color: #f0f0f0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Corps du tableau */
.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* Tableau rayé */
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 50, 0.3);
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background: rgba(102, 126, 234, 0.15);
}

/* Tableau avec bordures */
.table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tableau compact */
.table-sm th,
.table-sm td {
    padding: 0.5rem;
    font-size: 0.875rem;
}

/* Tableau hover (pour rendre explicite) */
.table-hover tbody tr:hover {
    background: rgba(102, 126, 234, 0.15);
}

/* ============================= */
/* 2. COULEURS CONTEXTUELLES     */
/* ============================= */

.table-primary {
    background: rgba(0, 123, 255, 0.1);
}

.table-success {
    background: rgba(40, 167, 69, 0.1);
}

.table-danger {
    background: rgba(220, 53, 69, 0.1);
}

.table-warning {
    background: rgba(255, 193, 7, 0.1);
}

.table-info {
    background: rgba(23, 162, 184, 0.1);
}

.table tbody tr.table-primary {
    background: rgba(0, 123, 255, 0.15);
}

.table tbody tr.table-success {
    background: rgba(40, 167, 69, 0.15);
}

.table tbody tr.table-danger {
    background: rgba(220, 53, 69, 0.15);
}

.table tbody tr.table-warning {
    background: rgba(255, 193, 7, 0.15);
}

.table tbody tr.table-info {
    background: rgba(23, 162, 184, 0.15);
}

/* ============================= */
/* 3. CONTENEUR RESPONSIVE       */
/* ============================= */

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* Indicateur de scroll */
.table-responsive {
    position: relative;
}

.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0, 0, 60, 0.8), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.table-responsive:not(.scrolled-end)::after {
    opacity: 1;
}

/* ============================= */
/* 4. MODE CARD MOBILE           */
/* ============================= */

/* Classe pour activer le mode card sur mobile */
.table-responsive-cards {
    display: block;
}

/* Desktop: affichage normal */
@media (min-width: 769px) {
    .table-responsive-cards {
        overflow-x: auto;
    }
}

/* Mobile: transformation en cartes */
@media (max-width: 768px) {
    .table-responsive-cards table,
    .table-responsive-cards thead,
    .table-responsive-cards tbody,
    .table-responsive-cards th,
    .table-responsive-cards td,
    .table-responsive-cards tr {
        display: block;
    }

    /* Cacher l'en-tête sur mobile */
    .table-responsive-cards thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Chaque ligne devient une carte */
    .table-responsive-cards tbody tr {
        margin-bottom: 1rem;
        background: rgba(0, 0, 80, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .table-responsive-cards tbody tr:hover {
        background: rgba(0, 0, 90, 0.5);
        border-color: rgba(102, 126, 234, 0.5);
    }

    /* Chaque cellule affiche son label */
    .table-responsive-cards td {
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        padding-left: 45%;
        text-align: left;
        min-height: 35px;
        display: flex;
        align-items: center;
    }

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

    /* Label avant chaque donnée */
    .table-responsive-cards td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 40%;
        padding-right: 10px;
        font-weight: 600;
        color: var(--text-secondary, #b0b0b0);
        text-align: left;
    }

    /* Styles spécifiques pour les actions */
    .table-responsive-cards td[data-label="Actions"],
    .table-responsive-cards td.actions {
        padding-left: 0;
        justify-content: center;
        gap: 0.5rem;
    }

    .table-responsive-cards td[data-label="Actions"]::before,
    .table-responsive-cards td.actions::before {
        display: none;
    }
}

/* ============================= */
/* 5. DATATABLES DARK THEME      */
/* ============================= */

/* IMPORTANT: Forcer tous les éléments DataTables en sombre */
.dataTables_wrapper,
.dataTables_wrapper table,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable tbody,
.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable tbody tr td {
    background-color: transparent !important;
}

/* Conteneur DataTables */
.dataTables_wrapper {
    color: var(--text-primary, #f0f0f0);
}

/* S'assurer que TOUTES les cellules DataTables sont sombres */
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: transparent !important;
}

table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1 {
    background-color: transparent !important;
}

/* Lignes alternées pour DataTables */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: rgba(0, 0, 50, 0.3) !important;
}

table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
    background-color: transparent !important;
}

/* Hover sur les lignes DataTables */
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.15) !important;
}

table.dataTable.hover tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr:hover > .sorting_1 {
    background-color: rgba(102, 126, 234, 0.15) !important;
}

/* En-tête avec recherche et filtres */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-primary, #f0f0f0);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-primary, #f0f0f0);
}

/* Champ de recherche */
.dataTables_wrapper .dataTables_filter input {
    background: rgba(0, 0, 60, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #f0f0f0);
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background: rgba(0, 0, 60, 0.7);
    border-color: rgba(93, 173, 226, 0.5);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
}

/* Select pour le nombre d'entrées */
.dataTables_wrapper .dataTables_length select {
    background: rgba(0, 0, 60, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #f0f0f0);
    border-radius: 4px;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    margin: 0 0.5rem;
}

/* Info et pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary, #b0b0b0);
    padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem;
}

/* Boutons de pagination DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(0, 0, 80, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-primary-text, #5dade2) !important;
    border-radius: 4px;
    padding: 0.375rem 0.75rem !important;
    margin: 0 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 123, 255, 0.3);
    border-color: rgba(93, 173, 226, 0.4);
    color: var(--text-primary, #f0f0f0) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(0, 123, 255, 0.3);
    border-color: rgba(93, 173, 226, 0.4);
    color: var(--text-primary, #f0f0f0) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0, 0, 60, 0.3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: rgba(0, 0, 60, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Tri des colonnes */
.dataTable thead .sorting,
.dataTable thead .sorting_asc,
.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

.dataTable thead .sorting::after,
.dataTable thead .sorting_asc::after,
.dataTable thead .sorting_desc::after {
    opacity: 0.5;
    color: var(--text-secondary, #b0b0b0);
}

.dataTable thead .sorting_asc::after,
.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--color-primary-text, #5dade2);
}

/* Message "aucune donnée" */
.dataTables_empty {
    color: var(--text-secondary, #b0b0b0);
    font-style: italic;
    padding: 2rem !important;
    text-align: center;
}

/* Processing */
.dataTables_processing {
    background: rgba(0, 0, 60, 0.9);
    border: 1px solid rgba(93, 173, 226, 0.5);
    color: var(--color-primary-text, #5dade2);
    border-radius: 8px;
    padding: 1rem 2rem;
}

/* ============================= */
/* 6. RESPONSIVE DATATABLES      */
/* ============================= */

/* DataTables Responsive sur mobile */
@media (max-width: 768px) {
    /* Wrapper mobile */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 1rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }

    /* Recherche pleine largeur */
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        max-width: 300px;
        margin: 0.5rem 0;
    }

    /* Pagination compacte */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem;
        margin: 0 1px;
    }

    /* DataTables avec mode card */
    .dataTables_wrapper.table-responsive-cards table.dataTable {
        margin-bottom: 0;
    }

    /* Child rows (détails) */
    table.dataTable tbody tr.child {
        background: rgba(0, 0, 90, 0.5);
        border-left: 3px solid rgba(93, 173, 226, 0.5);
    }

    table.dataTable tbody tr.child ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    table.dataTable tbody tr.child ul li {
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    table.dataTable tbody tr.child ul li:last-child {
        border-bottom: none;
    }
}

/* ============================= */
/* 7. TABLEAUX AVEC ACTIONS      */
/* ============================= */

/* Colonne d'actions */
.table td.actions,
.table th.actions {
    text-align: center;
    white-space: nowrap;
}

.table td.actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.table td.actions .btn {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Mobile: actions en colonne */
@media (max-width: 768px) {
    .table-responsive-cards td.actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .table-responsive-cards td.actions .btn {
        width: 100%;
    }
}

/* ============================= */
/* 8. TABLEAUX AVEC CHECKBOXES   */
/* ============================= */

.table th.checkbox-column,
.table td.checkbox-column {
    width: 40px;
    text-align: center;
    padding: 0.5rem;
}

.table .form-check {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.table .form-check-input {
    margin: 0;
}

/* Mobile: checkbox en haut de la carte */
@media (max-width: 768px) {
    .table-responsive-cards td.checkbox-column {
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0;
    }

    .table-responsive-cards td.checkbox-column::before {
        display: none;
    }
}

/* ============================= */
/* 9. BADGES DANS TABLEAUX       */
/* ============================= */

.table .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    white-space: nowrap;
}

/* ============================= */
/* 10. ANIMATIONS                */
/* ============================= */

/* Transition douce pour les lignes */
.table tbody tr {
    transition: all 0.2s ease;
}

/* Transition pour le mode card */
@media (max-width: 768px) {
    .table-responsive-cards tbody tr {
        animation: fadeInUp 0.3s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================= */
/* 11. SCROLL SHADOWS            */
/* ============================= */

/* Ombre pour indiquer le scroll horizontal */
.table-scroll-container {
    position: relative;
    overflow: auto;
}

.table-scroll-container::before,
.table-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.3s;
}

.table-scroll-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 60, 0.8), transparent);
    opacity: 0;
}

.table-scroll-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 60, 0.8), transparent);
}

.table-scroll-container.scrolled-start::before {
    opacity: 1;
}

.table-scroll-container.scrolled-end::after {
    opacity: 0;
}

/* ============================= */
/* 12. LOADING STATE             */
/* ============================= */

.table-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(93, 173, 226, 0.3);
    border-top-color: rgba(93, 173, 226, 0.8);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================= */
/* 13. UTILITAIRES               */
/* ============================= */

/* Texte centré dans cellule */
.table .text-center {
    text-align: center;
}

/* Texte aligné à droite */
.table .text-end {
    text-align: right;
}

/* Pas de wrap */
.table .text-nowrap {
    white-space: nowrap;
}

/* Largeurs fixes */
.table .w-auto {
    width: auto;
}

.table .w-25 {
    width: 25%;
}

.table .w-50 {
    width: 50%;
}

.table .w-75 {
    width: 75%;
}

.table .w-100 {
    width: 100%;
}

/* Sticky first column */
.table-sticky-first-col th:first-child,
.table-sticky-first-col td:first-child {
    position: sticky;
    left: 0;
    background: rgba(0, 0, 70, 0.6);
    z-index: 2;
}

.table-sticky-first-col thead th:first-child {
    z-index: 11;
}

/* ============================= */
/* 14. PRINT STYLES              */
/* ============================= */

@media print {
    .table {
        color: #000;
        background: #fff;
    }

    .table thead th {
        background: #f0f0f0;
        color: #000;
        border: 1px solid #ddd;
    }

    .table tbody tr:hover {
        background: transparent;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background: #f9f9f9;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: none;
    }
}