/**
 * Correctifs CSS pour le système d'onglets
 * Résout les problèmes de décalage et d'affichage
 */

/* S'assurer que seul l'onglet actif est visible */
.tab-content .tab-pane {
    display: none;
}

.tab-content .tab-pane.active {
    display: block;
}

.tab-content .tab-pane.show.active {
    display: block;
}

/* Transitions fluides pour les onglets */
.tab-pane.fade {
    transition: opacity 0.15s linear;
    opacity: 0;
}

.tab-pane.fade.show {
    opacity: 1;
}

/* Éviter les décalages de contenu */
.tab-content {
    position: relative;
    min-height: 200px;
}

.tab-pane {
    position: relative;
    width: 100%;
}

/* Style pour les onglets actifs */
.nav-pills .nav-link.active {
    background-color: #fdb911;
    color: white;
}

.nav-pills .nav-link:hover {
    background-color: rgba(253, 185, 17, 0.1);
    color: #fdb911;
}

.nav-pills .nav-link {
    border-radius: 0.375rem;
    margin-right: 0.25rem;
    transition: all 0.2s ease-in-out;
}

/* Corrections pour les icônes dans les onglets */
.nav-pills .nav-link .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.nav-pills .nav-link .tab-icon ion-icon {
    font-size: 16px;
}

.nav-pills .nav-link .tab-icon img {
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
}

/* Espacement des titres d'onglets */
.nav-pills .nav-link .tab-title {
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Corrections pour les formulaires dans les onglets */
.tab-pane .card {
    margin-bottom: 1rem;
}

.tab-pane .card-body {
    padding: 1.25rem;
}

/* Corrections pour les tableaux dans les onglets */
.tab-pane .table-responsive {
    margin-top: 1rem;
}

.tab-pane table.list_contract_table {
    width: 100%;
    margin-bottom: 1rem;
}

/* Corrections pour les boutons flottants */
.tab-pane h5 {
    position: relative;
    margin-bottom: 1rem;
}

.tab-pane .btn[style*="float: right"] {
    margin-left: 0.5rem;
}

/* Debug - classes pour identifier les problèmes */
.debug-tab-visible {
    border: 2px solid green !important;
    background-color: rgba(0, 255, 0, 0.1) !important;
}

.debug-tab-hidden {
    border: 2px solid red !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
    .nav-pills {
        flex-wrap: wrap;
    }
    
    .nav-pills .nav-link {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }
    
    .nav-pills .nav-link .tab-title {
        display: none;
    }
    
    .nav-pills .nav-link .tab-icon {
        margin-right: 0;
    }
}

/* Corrections spécifiques pour éviter les conflits Bootstrap */
.tab-content > .tab-pane:not(.active) {
    display: none !important;
}

.tab-content > .tab-pane.active {
    display: block !important;
}

/* Animation d'entrée pour les onglets */
.tab-pane.fade.show.active {
    animation: fadeInTab 0.3s ease-in-out;
}

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