/* ===========================================
   Styles pour les onglets Offre - Style Chevron
   Fichier: ccv2_tabs_offer.css
   Description: Onglets chevron pour COM_offer.php
                Style harmonise avec le reste de CARCARE
   =========================================== */

/* Conteneur header des onglets - style CARCARE allege */
.tab-header-offer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Base des boutons onglets */
.tab-link-offer {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px 10px 28px;
    font-size: 13px;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #555;
    position: relative;
    margin: 0;
    height: 36px;
    box-sizing: border-box;
    border-radius: 0;
    transition: all 0.3s ease;
    min-width: 150px;
    width: 200px;
}

/* Couleurs de fond par onglet - style Material Design CARCARE */
.tab-link-offer[data-index="0"] {
    background-color: #F8BBD0; /* Fuchsia/Rose - Client (comme .bc) */
}

.tab-link-offer[data-index="1"] {
    background-color: #C8E6C9; /* Vert clair - Reprise (comme .offres) */
}

.tab-link-offer[data-index="2"] {
    background-color: #B3E5FC; /* Bleu clair - Offre et Credit */
}

.tab-link-offer[data-index="3"] {
    background-color: #E0E0E0; /* Gris clair - Historique */
}

/* Premier onglet - coins arrondis a gauche, pointe a droite */
.tab-link-offer[data-index="0"] {
    padding-left: 16px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    z-index: 10;
}

/* Deuxieme onglet - encoche gauche, pointe droite */
.tab-link-offer[data-index="1"] {
    margin-left: -12px;
    padding-left: 28px;
    padding-right: 24px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    z-index: 9;
}

/* Troisieme onglet - encoche gauche, pointe droite (comme les autres) */
.tab-link-offer[data-index="2"] {
    margin-left: -12px;
    padding-left: 28px;
    padding-right: 24px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    z-index: 8;
}

/* Quatrieme onglet - Historique - gris, ferme a droite */
.tab-link-offer[data-index="3"]:not(.tab-control) {
    margin-left: -12px;
    padding-left: 28px;
    padding-right: 16px;
    /* Ferme a droite (pas de pointe), encoche a gauche, coins arrondis a droite */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 7;
}

/* Cinquieme onglet - Controle - style discret separe */
.tab-link-offer.tab-control {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-left: 8px;
    padding: 6px 12px;
    height: 28px;
    min-width: auto;
    width: auto;
    clip-path: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666;
    z-index: 7;
}

/* Hover states - style Material Design CARCARE */
.tab-link-offer[data-index="0"]:hover:not(.disabled) {
    background-color: #F48FB1; /* Rose plus foncé */
    color: #880E4F;
}

.tab-link-offer[data-index="1"]:hover:not(.disabled) {
    background-color: #A5D6A7; /* Vert plus foncé */
    color: #1B5E20;
}

.tab-link-offer[data-index="2"]:hover:not(.disabled) {
    background-color: #81D4FA; /* Bleu plus foncé */
    color: #01579B;
}

.tab-link-offer[data-index="3"]:not(.tab-control):hover:not(.disabled) {
    background-color: #BDBDBD; /* Gris plus foncé */
    color: #424242;
}

.tab-link-offer.tab-control:hover:not(.disabled) {
    background-color: #e0e0e0;
    border-color: #999;
    color: #333;
}

/* Active state - couleurs Material Design */
.tab-link-offer.active {
    font-weight: bold;
}

.tab-link-offer[data-index="0"].active {
    background-color: #F48FB1; /* Rose/Fuchsia - bordure .bc */
    color: #880E4F;
}

.tab-link-offer[data-index="1"].active {
    background-color: #81C784; /* Vert - bordure .offres */
    color: #1B5E20;
}

.tab-link-offer[data-index="2"].active {
    background-color: #4FC3F7; /* Bleu - plus saturé */
    color: #01579B;
}

.tab-link-offer[data-index="3"]:not(.tab-control).active {
    background-color: #9E9E9E; /* Gris moyen - active */
    color: #212121;
}

.tab-link-offer.tab-control.active {
    background-color: #e8e8e8;
    border-color: #666;
    color: #333;
}

/* Disabled state */
.tab-link-offer.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Icons - style CARCARE */
.tab-link-offer i {
    font-size: 14px;
    margin-right: 4px;
    transition: all 0.3s ease;
}

.tab-link-offer.tab-control i {
    font-size: 11px;
    margin-right: 3px;
}

/* Couleurs des icones par onglet - Material Design */
.tab-link-offer[data-index="0"] i {
    color: #C2185B;
}

/* Rose/Fuchsia foncé */
.tab-link-offer[data-index="1"] i {
    color: #2E7D32;
}

/* Vert foncé */
.tab-link-offer[data-index="2"] i {
    color: #0277BD;
}

/* Bleu foncé */
.tab-link-offer[data-index="3"]:not(.tab-control) i {
    color: #616161;
}

/* Gris foncé */
.tab-link-offer.tab-control i {
    color: #666;
}

/* Tab content */
.tab-content-offer {
    display: none;
    padding: 0;
}

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

/* Responsive */
@media (max-width: 768px) {
    .tab-header-offer {
        padding: 4px;
    }

    .tab-link-offer {
        padding: 8px 12px 8px 20px;
        font-size: 11px;
        min-width: 100px;
        height: 32px;
    }

    .tab-link-offer.tab-control {
        margin-left: 8px;
        padding: 4px 8px;
        height: 24px;
        font-size: 10px;
    }
}