/* ==========================================
   PANNEAU GAUCHE 
   ========================================= 
   PID vitesse et Rotation
   ========================================= */

/* Conteneur principal  (robot, flèches, réglages). */
#view-robot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Gère l'alignement vertical et l'espacement serré entre l'image du robot et ses étiquettes de statut. */
.robot-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 5px;
}


/* Le conteneur global qui empile les lignes PID (Vitesse et Rotation) */
.pid-container-global {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Plus d'espace entre les deux lignes PID */
    width: 100%; /* Utilise toute la largeur du panneau gauche */
    padding: 1px 0;
    align-items: center; /* Centre l'ensemble du bloc */
}

/* Une ligne de réglage (Label + Inputs + Bouton) */
.pid-row { 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Centre le contenu de la ligne */
    gap: 15px; /* Augmente l'espace entre le label, les inputs et le bouton */
    width: 100%;
}

/* Le label (ex: PID VITESSE) */
.label-pid {
    width: 120px; /* Un peu plus large pour ne pas coller aux inputs */
    text-align: right;
    font-weight: bold;
    font-size: 0.75rem;
    color: #34495e;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Le groupe des 3 champs de saisie (P, I, D) */
.input-pid { 
    display: flex; 
    gap: 6px; /* Plus d'espace entre les petits carrés P, I et D */
    align-items: center;
    flex-shrink: 0;
}

/* Le style individuel de chaque petit champ P, I et D */
.input-pid input {
    width: 90px !important; /* On garde la petite taille pour P, I, D */
    min-width: 35px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-align: center;
    font-size: 0.85rem;
    background: white;
}

/* Le style des boutons envoyer */
.btn-send {
    min-width: 100px; /* On donne une largeur généreuse au bouton envoyer */
    height: 30px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.75rem;
    transition: all 0.2s;
    flex-shrink: 0;
}


.btn-send:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}


/* ==========================================
   Bouton "voir le parcours"
   ========================================= */

/*  La structure de base du bouton (fond crème et forme) */
#btn-toggle-path {
    margin-right: auto;
    width: 160px;
    height: 40px;
    background-color: #fdfcf5; /* Blanc cassé / Crème */
    border: 1px solid #dcdde1;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    
    /* On cache le texte par défaut pour laisser place à l'illustration */
    color: transparent; 
}

/* Le texte qui s'affiche (VOIR PARCOURS) */
#btn-toggle-path::after {
    content: 'VOIR PARCOURS';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    color: #7f8c8d;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    transition: color 0.3s;
}


#btn-toggle-path.mode-robot::after {
    content: 'RETOUR ROBOT'; /* Affiché quand on a ajouté la classe via JS */
    color: #e74c3c;
}




/* L'illustration SVG (la ligne sinueuse bleue et rouge) */
#btn-toggle-path::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    
    /* Dessin d'une trajectoire sinueuse en SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40"><path d="M5 30 Q 20 5, 40 25 T 90 10" fill="none" stroke="%233498db" stroke-width="3" stroke-linecap="round" stroke-dasharray="1 5" /><circle cx="5" cy="30" r="3" fill="%233498db" /><circle cx="90" cy="10" r="4" fill="%23e74c3c" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    transition: transform 0.4s ease, opacity 0.3s;
}

/* Les états Hover (Survol) */
#btn-toggle-path:hover {
    background-color: #ffffff;
    border-color: #3498db;
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.15);
}

/* Style par défaut du bouton quand il est désactivé */
#btn-toggle-path:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* On force les couleurs de base pour annuler les effets de hover globaux */
    background-color: #34495e; 
    transform: none; /* Annule l'effet de soulèvement si tu en as un */
}

/* L'état ACTIF (Quand on voit la carte) (Mode Robot / Rouge) */
#btn-toggle-path.mode-robot {
    border-color: #e74c3c;
    background-color: #fff9f9;
}

#btn-toggle-path.mode-robot::after {
    content: 'RETOUR ROBOT';
    color: #e74c3c;
}

/* On change la couleur de la trajectoire en rouge quand actif */
#btn-toggle-path.mode-robot::before {
    filter: hue-rotate(140deg) saturate(1.5);
}


/* Annulation spécifique du hover quand le bouton est disabled */
#btn-toggle-path:disabled:hover {
    background-color: #34495e !important; /* Garde la couleur d'origine */
    box-shadow: none !important;           /* Supprime l'ombre portée */
    transform: none !important;            /* Empêche le bouton de bouger */
}


#btn-toggle-path:hover::before {
    opacity: 1;
    transform: scale(1.05);
}

#btn-toggle-path:hover::after {
    color: #3498db;
}

/* ==========================================
   Batterie
   ========================================= */

/* Le conteneur du groupe batterie (icône + jauge + valeur) */
.battery-group { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}


/* Le wrapper qui permet de superposer le curseur de seuil sur la barre */
.battery-gauge-wrapper {
    position: relative;
    width: 150px; /* Même largeur que ton #robot-slider */
    height: 12px;
    display: flex;
    align-items: center;
}


/* La barre de progression (Style spécifique pour simuler une jauge) */
#robot-slider {
    -webkit-appearance: none; 
    appearance: none;
    margin: 0;
    width: 100%; 
    height: 12px; 
    background: #ecf0f1; /* Fond de la barre vide */
    border-radius: 6px; 
    overflow: hidden; 
    border: 1px solid #bdc3c7;
    cursor: default;
}


/* La barre verticale (Seuil) */
#battery-threshold-marker {
    position: absolute;
    top: -2px;      /* Dépasse un peu en haut */
    bottom: -2px;   /* Dépasse un peu en bas */
    left: 50%;      /* Position par défaut, sera mise à jour par le JS */
    width: 2px;
    background-color: #e74c3c; /* Rouge */
    z-index: 5;
    pointer-events: none; /* Ne gêne pas le clic */
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.8);
    transition: left 0.3s ease; /* Animation fluide si le seuil change */
}

/* Définition de l'animation : passe d'un fond transparent à un fond rouge translucide */
@keyframes battery-danger-flash {
    0%   { background-color: rgba(231, 76, 60, 0); } /* Transparent */
    50%  { background-color: rgba(231, 76, 60, 0.2); } /* Rouge translucide */
    100% { background-color: rgba(231, 76, 60, 0); } /* Transparent */
}


/* Classe à appliquer dynamiquement sur .battery-group pour déclencher l'alerte */
.battery-group.alert-active {
    animation: battery-danger-flash 1s infinite; /* Boucle l'animation toutes les secondes */
    border-radius: 8px; /* Pour que le fond clignotant ait des bords arrondis */
    padding: 2px 5px; /* Un peu d'espace pour le fond coloré */
    transition: all 0.3s ease; /* Transition douce pour l'activation */
}


/* Optionnel : change la couleur du texte en rouge quand l'alerte est active */
.battery-group.alert-active #slider-value {
    color: #e74c3c;
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}


/* --- FIX POUR CHROME / EDGE / SAFARI --- */
#robot-slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    width: 0; 
    height: 0;
    /* L'astuce du shadow pour remplir à gauche */
    box-shadow: -200px 0 0 200px #2ecc71; 
}


/* Firefox a une propriété dédiée pour le remplissage à gauche */
#robot-slider::-moz-range-progress {
    background-color: #2ecc71;
    height: 12px;
    border-radius: 6px;
}

#robot-slider::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
    background: transparent;
}

#robot-slider::-moz-range-track {
    background: #ecf0f1;
    height: 12px;
}

#slider-value { 
    font-weight: bold; 
    color: #333; 
    font-family: monospace;
}



/* ==========================================
   Robot - le cercle bleu
   ========================================= */


/* Organise l'image du robot et ses légendes en colonne centrée avec un espacement minimal de 5px. */
.robot-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 5px;
}



.cercle {
    position: relative;
    width: 14cm;
    height: 14cm;
    background-color: #3498db;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

/* ==========================================
   Robot - les roues
   ========================================= */
.roue_gauche, .roue_droite { 
   position: absolute; 
   top: 50%; 
   transform: translateY(-50%); 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
}

.roue_gauche { 
   left: 5mm; 
}

.roue_droite { 
   right: 5mm; 
}

.moteur_gauche, .moteur_droit { 
   position: absolute; 
   width: 40mm; 
   top: 3mm; 
}

.moteur_gauche { 
   left: 1mm; 
   transform: scaleX(-1); 
}

.moteur_droit { 
   right: 1mm; 
}

.pneu_gauche, .pneu_droit { 
   position: relative; 
   width: 22mm; 
   height: 32mm; 
   background: #333; 
   border-radius: 5%; 
   opacity: 0.75; 
   overflow: hidden; /* INDISPENSABLE pour que les vagues ne sortent pas du pneu */
   display: flex;
   flex-direction: column;
}

.wave { 
   width: 100%; 
   height: 10mm; 
   background-color: rgb(136, 136, 131);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="20" viewBox="0 0 100 20"><path d="M0 10 Q12.5 0 25 10 T50 10 T75 10 T100 10" fill="none" stroke="black" stroke-width="2"/></svg>');
    -webkit-mask-size: 50px 20px; 
    -webkit-mask-repeat: repeat-x;
}

.wave.moving { 
   animation: move-down 0.5s linear infinite; 
}

@keyframes move-down {
   from { -webkit-mask-position: 0 0; } to { -webkit-mask-position: 0 10px; } 
}


/* ==========================================
   Robot - les encodeurs
   ========================================= */
/* Les étiquettes pour les encodeurs Gauche et Droit */
.label-encodeur-left, .label-encodeur-right { 
   position: absolute; 
   z-index: 20; 
   width: 25mm; 
   font-family: 'Courier New', monospace; 
   font-size: 14px; 
   font-weight: bold; 
   color: #ffffff; 
}


.label-encodeur-left { 
   left: 40mm; 
   text-align: left;
}


.label-encodeur-right { 
   right: 40mm; 
   text-align: right;
}


/* ==========================================
   Robot - capteur de proximité
   ========================================= */

.proximity-sensor { 
   width: 80mm; 
   height: 13mm; 
   background: #fb03e2; 
   position: absolute; 
   top: -3mm; 
   left: 50%; 
   transform: translateX(-50%); 
   display: flex; 
   justify-content: space-around; 
   align-items: center; 
   color: white; 
   font-weight: bold; 
}


/* ==========================================
   Robot - capteur IR
   ========================================= */
.lineFollower-sensor { 
   width: 80mm; 
   height: 13mm; 
   background: black; 
   position: absolute; 
   top: 20mm; 
   left: 50%; 
   transform: translateX(-50%); 
   border-radius: 5px; 
   display: flex; 
   justify-content: space-around; 
   align-items: center; 
}

.backIR-sensor { 
   width: 12mm; 
   height: 20mm; 
   background: black; 
   position: absolute; 
   bottom: 3mm; 
   left: 50%; 
   transform: translateX(-50%); 
   border-radius: 5px; 
   display: flex; 
   align-items: end; 
   justify-content: center; 
}

.led { 
   width: 6mm; 
   height: 6mm; 
   border-radius: 50%; 
   border: 1px solid #9c9999; 
   background-color: rgb(88, 2, 2); 
}

.led.on {
   background-color: red; 
   box-shadow: 0 0 10px red; 
}

.backIR-sensor .led{ 
   margin-bottom: 5px; 
}



/* ==========================================
   Robot - boutons de direction
   ========================================= */


/* Le conteneur global des contrôles */
.controls { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    margin-top: 10px;
}


/* Les lignes de boutons (Haut, Milieu avec Gauche/Droite, Bas) */
.row { 
    display: flex; 
    gap: 10px; 
    justify-content: center; 
}


/* Style de base des boutons de direction (Bleu foncé avec bordure bleue) */
.btn-ctrl { 
    padding: 12px; 
    font-weight: bold; 
    background: #2c3e50; 
    color: white; 
    border: 2px solid #3498db; 
    border-radius: 8px; 
    cursor: pointer; 
    min-width: 120px; 
}


/* L'état quand le bouton est activé (Rouge) */
.active-btn { 
    background: #e74c3c; 
}

/* Le positionnement des réglages sous les boutons */
.status-settings-row { 
    display: flex; 
    justify-content: flex-end; /* ALIGNEMENT À GAUCHE */
    align-items: center; 
    gap: 15px;
    margin-top: 2px;
    margin-bottom: 8px;
    width: 100%;
    padding-left: 20px; /* Petit retrait du bord gauche pour l'esthétique */
    box-sizing: border-box;
}


/* ==========================================
   ZONE DE TESTS (Boutons gris en bas)
   ========================================== */

/* Conteneur spécifique pour la zone de test en bas de panneau */

.test-row { 
    z-index: 999;
    margin-top: 5px; 
    padding: 10px ; /* Ajout d'un peu de padding latéral */
    border-top: 1px dashed #bdc3c7; 
    display: flex; 
    flex-wrap: nowrap; /* Empêche le saut de ligne */
    justify-content: space-between; /* Distribue l'espace */
    gap: 10px; /* Réduit l'espace entre les boutons pour Firefox */
    width: 100%;
    box-sizing: border-box;
}

/* Style individuel des boutons de test (gris) */
.btn-test { 
    background: #7f8c8d; 
    border-color: #95a5a6; 
    flex: 1; 
    min-width: 0; 
    font-size: 0.9em; 
}


.btn-test:hover {
    background: #95a5a6;
}