/* ========================================
   TABLES RESPONSIVE - ADMIN & SELLER
   ======================================== */

/* Base table styles */
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

/* Style des en-têtes de tableaux - visible par défaut sur desktop */
.table thead {
    /* Visible par défaut, sera caché en mobile */
}

.table thead.table-light {
    background: linear-gradient(180deg, #f0f7ff 0%, #e8f2ff 100%) !important;
}

.table thead.table-light th {
    background: transparent;
    color: #1e40af !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem !important;
    border-bottom: 2px solid #bfdbfe !important;
    white-space: nowrap;
}

.table thead th {
    vertical-align: middle;
}

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

/* Amélioration des tableaux sur desktop */
@media (min-width: 992px) {
    .table thead th {
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }
}

/* Tableaux responsive pour tablettes */
@media (max-width: 991px) {
    .table {
        font-size: 0.9rem;
    }

    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
    }

    /* Cacher les colonnes moins importantes sur tablette */
    .table th.d-lg-table-cell,
    .table td.d-lg-table-cell {
        display: none;
    }
}

/* Tableaux responsive pour mobile */
@media (max-width: 767px) {
    /* Option 1: Tableau horizontal scrollable */
    .table-responsive-scroll {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive-scroll .table {
        min-width: 600px;
        margin-bottom: 0;
    }

    /* Option 2: Tableau en mode carte (recommandé pour mobile) */
    .table-mobile-cards {
        display: block;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tbody {
        display: block;
    }

    .table-mobile-cards tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

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

    .table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
        margin-right: 1rem;
        flex: 0 0 40%;
    }

    .table-mobile-cards td > * {
        flex: 1;
        text-align: right;
    }

    /* Actions en mode mobile */
    .table-mobile-cards .btn-group {
        display: flex;
        gap: 0.25rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .table-mobile-cards .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Tables with data-label attribute - automatic mobile stacking */
    .table thead.d-none.d-md-table-header-group {
        display: none !important;
    }
}

/* Forcer l'affichage des en-têtes sur desktop */
@media (min-width: 768px) {
    .table thead.d-none.d-md-table-header-group {
        display: table-header-group !important;
    }
    
    .table thead {
        display: table-header-group !important;
    }
    
    .table thead.table-light th {
        background: #f8fafc;
        color: #475569;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        padding: 0.875rem 1rem;
        border-bottom: 2px solid #e2e8f0;
    }
}

/* Styles mobile pour les tableaux - UNIQUEMENT sur mobile */
@media (max-width: 767px) {
    /* CACHER les en-têtes sur mobile */
    .table thead {
        display: none !important;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 0.75rem;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
    }

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

    .table tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
        margin-right: 1rem;
        text-align: left;
        flex: 0 0 40%;
    }

    .table tbody td > * {
        flex: 1;
    }

    .table tbody .btn-group {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
    }

    .table tbody .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* Tableaux pour très petits écrans */
@media (max-width: 575px) {
    .table-mobile-cards tr {
        padding: 0.75rem;
    }

    .table-mobile-cards td {
        padding: 0.4rem 0;
        font-size: 0.85rem;
    }

    .table-mobile-cards td::before {
        font-size: 0.8rem;
    }

    /* Images dans les tableaux */
    .table img {
        max-width: 40px;
        max-height: 40px;
    }

    /* Badges */
    .table .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Styles pour les en-têtes de tableaux avec tri */
.table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}

.table th.sortable:hover {
    background-color: #f8f9fa;
}

.table th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
}

.table th.sortable.asc::after {
    content: '\2191';
    opacity: 1;
}

.table th.sortable.desc::after {
    content: '\2193';
    opacity: 1;
}

/* Pagination responsive */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 1rem 0;
}

@media (max-width: 575px) {
    .pagination {
        font-size: 0.85rem;
    }

    .pagination .page-link {
        padding: 0.375rem 0.625rem;
    }

    /* Cacher certains numéros de page sur mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

/* Filtres au-dessus des tableaux */
.table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .table-filters {
        flex-direction: column;
    }

    .table-filters > * {
        width: 100%;
    }

    .table-filters .input-group,
    .table-filters .form-select {
        width: 100%;
    }
}

/* Export et actions de masse */
.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .table-actions .btn,
    .table-actions .btn-group {
        width: 100%;
    }
}

/* Checkboxes dans les tableaux */
.table input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

/* Status indicators */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-indicator.active {
    background-color: #28a745;
}

.status-indicator.inactive {
    background-color: #dc3545;
}

.status-indicator.pending {
    background-color: #ffc107;
}

/* Tableaux avec colonnes fixes (sticky) */
@media (min-width: 768px) {
    .table-sticky-first-col thead th:first-child,
    .table-sticky-first-col tbody td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 10;
    }

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