/**
 * Header Component - UX v2
 * Bandeau coloré selon le mode actif
 */

/* Base header styles */
header.navbar {
    transition: background-color 0.3s ease;
}

/* Mode Apprenant - Bleu */
body.mode-learner header.navbar {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    border-bottom: 2px solid #0a58ca;
}

body.mode-learner header.navbar .navbar-brand,
body.mode-learner header.navbar .nav-link,
body.mode-learner header.navbar .dropdown-toggle {
    color: white !important;
}

/* Mode Formateur - Violet */
body.mode-trainer header.navbar {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
    border-bottom: 2px solid #5a32a3;
}

body.mode-trainer header.navbar .navbar-brand,
body.mode-trainer header.navbar .nav-link,
body.mode-trainer header.navbar .dropdown-toggle {
    color: white !important;
}

/* Ajustements pour le dropdown profile sur fond coloré */
body.mode-learner header.navbar .profile-dropdown .dropdown-toggle,
body.mode-trainer header.navbar .profile-dropdown .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0.4rem 1rem;
}

body.mode-learner header.navbar .profile-dropdown .dropdown-toggle:hover,
body.mode-trainer header.navbar .profile-dropdown .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Badge utilisateur adapté */
body.mode-learner header.navbar .user-role.badge,
body.mode-trainer header.navbar .user-role.badge {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
}

/* Sélecteur de langue sur fond coloré */
body.mode-learner header.navbar .language-selector select,
body.mode-trainer header.navbar .language-selector select {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Logo adaptatif selon le mode */
header.navbar .navbar-brand img {
    transition: filter 0.3s ease;
}

/* Logo sur fond bleu (mode apprenant) - Inversion pour visibilité */
body.mode-learner header.navbar .navbar-brand img {
    filter: brightness(0) invert(1) contrast(1.2);
    opacity: 0.95;
}

/* Logo sur fond violet (mode formateur) - Inversion + teinte */
body.mode-trainer header.navbar .navbar-brand img {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(200deg) saturate(0.8);
    opacity: 0.95;
}

/* Logo par défaut (fond clair) */
body:not(.mode-learner):not(.mode-trainer) header.navbar .navbar-brand img {
    filter: none;
}

/* Toggle adapté au mode - Suppression du cadre rectangulaire */
body.mode-learner #modeToggle,
body.mode-trainer #modeToggle {
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* Arrière-plan du curseur plus subtil */
body.mode-learner #modeToggle .toggle-background,
body.mode-trainer #modeToggle .toggle-background {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Labels du toggle sur fond coloré */
body.mode-learner #modeToggle .toggle-labels,
body.mode-trainer #modeToggle .toggle-labels {
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Correction de l'asymétrie verticale du toggle */
body.mode-learner #modeToggle,
body.mode-trainer #modeToggle {
    margin: 15px 0; /* Espacement symétrique haut/bas */
    padding: 0; /* Suppression du padding qui créait l'effet "gommette" */
}

/* Centrage vertical parfait */
body.mode-learner header.navbar .d-flex.justify-content-center,
body.mode-trainer header.navbar .d-flex.justify-content-center {
    align-items: center;
    min-height: 80px; /* Hauteur fixe pour éviter les variations */
}