/* Styles spécifiques pour le thème Yellow */

/* Variables CSS personnalisées */
:root {
    --primary-yellow: #FFD700;
    --secondary-orange: #FFA500;
    --accent-dark-orange: #FF8C00;
    --light-yellow-bg: #FFF8DC;
    --dark-brown-text: #8B4513;
    --yellow-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --yellow-gradient-light: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
    --yellow-gradient-dark: linear-gradient(90deg, #FFD700 0%, #FF8C00 100%);
    --yellow-shadow: rgba(255, 215, 0, 0.2);
    --orange-shadow: rgba(255, 165, 0, 0.3);
    --border-color: #FFE4B5;
}

/* Styles pour les éléments de navigation supplémentaires */
.navbar-brand {
    color: var(--primary-yellow) !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-brand:hover {
    color: var(--secondary-orange) !important;
}

/* Styles pour les formulaires */
.form-control:focus {
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 0.2rem var(--yellow-shadow);
}

.form-select:focus {
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 0.2rem var(--yellow-shadow);
}

/* Styles pour les modales */
.modal-header {
    background: var(--yellow-gradient-light);
    border-bottom: 2px solid var(--primary-yellow);
    color: var(--dark-brown-text);
}

.modal-footer {
    background: var(--light-yellow-bg);
    border-top: 1px solid var(--border-color);
}

/* Styles pour les tooltips */
.tooltip-inner {
    background-color: var(--primary-yellow);
    color: var(--dark-brown-text);
    font-weight: 600;
}

.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--primary-yellow);
}

.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--primary-yellow);
}

.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--primary-yellow);
}

.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--primary-yellow);
}

/* Styles pour les popovers */
.popover-header {
    background-color: var(--light-yellow-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--dark-brown-text);
    font-weight: 600;
}

.popover-body {
    background-color: white;
    color: var(--dark-brown-text);
}

/* Styles pour les accordéons */
.accordion-button {
    background-color: var(--light-yellow-bg);
    color: var(--dark-brown-text);
    border: 1px solid var(--border-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-yellow);
    color: var(--dark-brown-text);
    font-weight: 600;
}

.accordion-button:focus {
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 0.25rem var(--yellow-shadow);
}

.accordion-button::after {
    filter: invert(1);
}

/* Styles pour les breadcrumbs */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--secondary-orange);
}

.breadcrumb-item.active {
    color: var(--dark-brown-text);
}

/* Styles pour les spinners */
.spinner-border.text-primary {
    color: var(--primary-yellow) !important;
}

.spinner-grow.text-primary {
    color: var(--primary-yellow) !important;
}

/* Styles pour les badges personnalisés */
.badge.bg-primary {
    background-color: var(--primary-yellow) !important;
    color: var(--dark-brown-text) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-orange) !important;
    color: white !important;
}

/* Styles pour les listes groupées */
.list-group-item-action:hover {
    background-color: var(--light-yellow-bg);
    color: var(--dark-brown-text);
}

.list-group-item-action:active {
    background-color: var(--primary-yellow);
    color: var(--dark-brown-text);
}

/* Styles pour les onglets */
.nav-tabs .nav-link {
    color: var(--dark-brown-text);
    border-color: var(--border-color);
}

.nav-tabs .nav-link:hover {
    color: var(--primary-yellow);
    border-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    color: var(--dark-brown-text);
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

/* Styles pour les barres de navigation verticales */
.nav-vertical .nav-link {
    color: var(--dark-brown-text);
    border-left: 3px solid transparent;
}

.nav-vertical .nav-link:hover {
    color: var(--primary-yellow);
    border-left-color: var(--primary-yellow);
    background-color: var(--light-yellow-bg);
}

.nav-vertical .nav-link.active {
    color: var(--dark-brown-text);
    background-color: var(--primary-yellow);
    border-left-color: var(--secondary-orange);
}

/* Styles spécifiques pour la sidebar de livraison */
.sidebar .nav-link {
    color: #8B4513 !important;
}

.sidebar .nav-link i {
    color: #FFA500 !important;
}

.sidebar .nav-link:hover {
    background: #FFE4B5 !important;
    color: #FF8C00 !important;
}

.sidebar .nav-link:hover i {
    color: #FF8C00 !important;
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%) !important;
    color: #8B4513 !important;
    font-weight: 600;
}

.sidebar .nav-link.active i {
    color: #8B4513 !important;
}

.sidebar-section-title {
    color: #8B4513 !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Force l'application des couleurs yellow pour la sidebar */
.sidebar .nav-link {
    color: #8B4513 !important;
}

.sidebar .nav-link i {
    color: #FFA500 !important;
}

.sidebar .nav-link:hover {
    background: #FFE4B5 !important;
    color: #FF8C00 !important;
}

.sidebar .nav-link:hover i {
    color: #FF8C00 !important;
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%) !important;
    color: #8B4513 !important;
    font-weight: 600;
}

.sidebar .nav-link.active i {
    color: #8B4513 !important;
}

/* Styles spécifiques pour les icônes Bootstrap dans la sidebar */
.sidebar .bi {
    color: #FFA500 !important;
}

.sidebar .nav-link:hover .bi {
    color: #FF8C00 !important;
}

.sidebar .nav-link.active .bi {
    color: #8B4513 !important;
}

/* Override pour toutes les icônes dans la sidebar */
.sidebar i[class*="bi-"] {
    color: #FFA500 !important;
}

.sidebar .nav-link:hover i[class*="bi-"] {
    color: #FF8C00 !important;
}

.sidebar .nav-link.active i[class*="bi-"] {
    color: #8B4513 !important;
}

/* Styles pour les cartes spéciales */
.card-yellow {
    background: var(--yellow-gradient-light);
    border: 2px solid var(--primary-yellow);
    border-radius: 15px;
    box-shadow: 0 4px 15px var(--yellow-shadow);
}

.card-yellow .card-header {
    background: var(--primary-yellow);
    color: var(--dark-brown-text);
    font-weight: bold;
    border-radius: 13px 13px 0 0;
}

/* Styles pour les boutons spéciaux */
.btn-yellow {
    background: var(--yellow-gradient);
    border: none;
    color: var(--dark-brown-text);
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-yellow:hover {
    background: var(--yellow-gradient-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--orange-shadow);
}

/* Styles spécifiques pour les boutons de profil */
.btn-primary[style*="FFD700"] {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border: none !important;
    color: #8B4513 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-primary[style*="FFD700"]:hover {
    background: linear-gradient(135deg, #FFA500, #FF8C00) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3) !important;
}

/* Styles pour les avatars et icônes */
.avatar-placeholder[style*="FFF8DC"] {
    background: linear-gradient(135deg, #FFF8DC, #FFE4B5) !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2) !important;
}

.avatar-placeholder[style*="FFF8DC"] i {
    color: #FFA500 !important;
}

/* Styles pour les titres de sections */
h6[style*="FFD700"] {
    color: #FFD700 !important;
    font-weight: 600 !important;
}

/* Styles pour les onglets actifs */
.nav-link.active[style*="FFD700"] {
    border-bottom: 3px solid #FFD700 !important;
    /* color: #FFD700 !important; */
    font-weight: 600 !important;
}

/* Styles pour les animations */
@keyframes yellowPulse {
    0% {
        box-shadow: 0 0 0 0 var(--yellow-shadow);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.animate-yellow-pulse {
    animation: yellowPulse 2s infinite;
}

/* Styles pour les sections spéciales */
.section-yellow {
    background: var(--yellow-gradient-light);
    padding: 60px 0;
    border-top: 3px solid var(--primary-yellow);
    border-bottom: 3px solid var(--primary-yellow);
}

.section-yellow h2 {
    color: var(--dark-brown-text);
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
}

/* Styles pour les icônes spéciales */
.icon-yellow {
    color: var(--primary-yellow);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.icon-yellow:hover {
    color: var(--secondary-orange);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Styles pour les textes spéciaux */
.text-yellow {
    color: var(--primary-yellow) !important;
}

.text-orange {
    color: var(--secondary-orange) !important;
}

.bg-yellow {
    background-color: var(--light-yellow-bg) !important;
}

.bg-yellow-gradient {
    background: var(--yellow-gradient) !important;
}

/* Styles pour les bordures spéciales */
.border-yellow {
    border-color: var(--primary-yellow) !important;
}

.border-orange {
    border-color: var(--secondary-orange) !important;
}

/* Styles pour les ombres spéciales */
.shadow-yellow {
    box-shadow: 0 4px 15px var(--yellow-shadow) !important;
}

.shadow-orange {
    box-shadow: 0 4px 15px var(--orange-shadow) !important;
}

/* Styles spécifiques pour le menu "Suivi de livraison" */
.navbar-nav .nav-link[href*="suivi_livraison"] {
    color: var(--dark-brown-text) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link[href*="suivi_livraison"]:hover {
    color: var(--primary-yellow) !important;
}

.navbar-nav .nav-link[href*="suivi_livraison"].active {
    color: var(--primary-yellow) !important;
    font-weight: 600;
}

/* Styles pour le footer */
.footer-nav-link[href*="suivi_livraison"] {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav-link[href*="suivi_livraison"]:hover {
    color: var(--primary-yellow);
}