/* Style global du tableau */
.table-responsive .table.table-hover {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-spacing: 0;
}

/* En-tête du tableau */
.table-responsive .table.table-hover thead {
    background-color: white!important;
    border-bottom: 2px solid #dee2e6;
}
.table-responsive .table.table-hover thead tr {
    background-color: white!important;
}

.table-responsive .table.table-hover thead th {
    padding: 0.75rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
    color: #495057;
    background-color: white!important;
}

/* Corps du tableau */
.table-responsive .table.table-hover tbody tr {
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
}

/* Alternance des lignes */
.table-responsive .table.table-hover tbody tr:nth-child(odd) {
    background-color: rgba(var(--light), 0.2)!important;
}

/* Cellules du tableau */
.table-responsive .table.table-hover tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    color: #212529;
}

/* Survol des lignes */
.table-responsive .table.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.075);
}

/* Style pour les badges de statut (comme dans le premier exemple) */
.badge-status {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 500;
    border-radius: 0.25rem;
    text-align: center;
    white-space: nowrap;
}

.badge-status.en-cours {
    background-color: #28a745;
    color: white;
}

.badge-status.lower {
    background-color: #e83e8c;
    color: white;
}

.badge-status.high {
    background-color: #007bff;
    color: white;
}

.badge-status.medium {
    background-color: #ffc107;
    color: #212529;
}

/* Style pour les boutons d'action */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    margin-right: 0.25rem;
}

.action-btn.edit {
    background-color: #17a2b8;
    color: white;
}

.action-btn.delete {
    background-color: #e83e8c;
    color: white;
}

/* Pagination */
.table-responsive .datatable-pagination {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Controls (like search, entries per page) */
.table-responsive .datatable-controls {
    margin-bottom: 1rem;
}

/* Amélioration des filtres et zones de recherche */
.table-responsive input[type="search"],
.table-responsive select {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.table-responsive input[type="search"]:focus,
.table-responsive select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


/* Style du bouton Effacer */
.badge.bg-light[wire\:click\.prevent="clearSorts"] {
    background-color: #dc3545 !important; /* Rouge Bootstrap (classe danger), remplacez au besoin par le rouge de votre thème */
    color: white !important;
    transition: all 0.2s ease-in-out;
}

/* Effet de survol (optionnel) */
.badge.bg-light[wire\:click\.prevent="clearSorts"]:hover {
    background-color: #c82333 !important; /* Rouge plus foncé au survol, remplacez au besoin par le rouge foncé de votre thème */
    text-decoration: none;
}


[x-data="laravellivewiretable($wire)"] .pagination .page-item.active .page-link {
    /* Style pour l'élément actif de pagination */
    background-color: #007bff; /* Couleur primaire - changez selon votre palette */
    color: white !important;
    border-color: #007bff;
}

/* Style pour les éléments non-actifs */
[x-data="laravellivewiretable($wire)"] .pagination .page-item:not(.active) .page-link {
    background-color: white;
    color: var(--bs-secondary-color) !important;
}

/* Style pour les flèches précédent/suivant */
[x-data="laravellivewiretable($wire)"] .pagination .page-item button[dusk="previousPage"],
[x-data="laravellivewiretable($wire)"] .pagination .page-item button[dusk="nextPage"] {
    color: var(--bs-secondary-color) !important;
    font-weight: bold;
}

/* Style au survol pour tous les éléments de pagination */
[x-data="laravellivewiretable($wire)"] .pagination .page-item .page-link:hover {
    background-color: #E5E7EB; /* Gris clair au survol */
    color: #111827 !important;
}

/* Style au survol pour l'élément actif */
[x-data="laravellivewiretable($wire)"] .pagination .page-item.active .page-link:hover {
    background-color: #374151; /* Gris un peu plus foncé au survol */
    color: white !important;
}

/* Pour garantir que vos styles ont priorité */
[x-data="laravellivewiretable($wire)"] .pagination {
    display: flex !important;
    visibility: visible !important;
}

/* Style pour le badge de tri avec couleur primaire */
[x-data="laravellivewiretable($wire)"] .badge.bg-info,
span[wire\:key^="table-sorting-pill-"] {
    background-color: var(--bs-primary) !important; /* Utilise la couleur primaire de Bootstrap */
    border-color: var(--bs-primary) !important;
}

/* Assure que le texte reste bien lisible sur fond primaire */
[x-data="laravellivewiretable($wire)"] .badge.bg-info *,
span[wire\:key^="table-sorting-pill-"] * {
    color: white !important;
}

/* Style pour l'icône de suppression au survol */
[x-data="laravellivewiretable($wire)"] .badge.bg-info a:hover,
span[wire\:key^="table-sorting-pill-"] a:hover {
    opacity: 0.8;
}