/* ==========================================
   TELEMETRIE
   ========================================== */

/* Définit la zone fixe à droite pour la télémétrie et la console, alignée sur le panneau de gauche. */
.panneau-data {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    /* 150mm (Panneau G) + 15px (Marge G) + 20px (Espace entre les deux) */
    left: calc(150mm + 60px); 
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

/* Formate les titres des graphiques avec une police réduite et une marge basse minimale. */
#charts-container h3 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
}

/* Grille flexible empilant les graphiques verticalement sans dépassement de zone. */
.charts-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    flex: 1; 
    min-height: 0; /* Important pour le flexbox */
}

/* Prépare un conteneur extensible et relatif pour accueillir un graphique. */
.chart-wrapper { 
    flex: 1; 
    position: relative; 
    min-height: 0; 
    width: 100%; /* Force la largeur */
}

/* Contraint le canvas à remplir exactement son conteneur pour éviter les débordements. */
.chart-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}



/* Container de la console pour aligner les boutons à droite */
#console-container {
    display: flex;
    flex: 1; /* Prend l'espace restant dans panneau-data */
    background: #1e1e1e;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}


/* Zone de texte défilante pour les logs avec police monospace et défilement vertical automatique. */
#console {
    flex: 1; /* La console prend tout le reste */
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    overflow-y: auto;
}


/* Style par défaut des logs */
.log-normal {
    color: #00ff00; 
    border-left: 3px solid transparent;
    padding-left: 5px;
    margin-bottom: 2px;
}


/* Style quand le mode discret est actif */
.log-error {
    color: #fa9c9c; /* Rouge vif */
    font-weight: bold;
    background: rgba(192, 57, 43, 0.1); /* Léger fond rouge pour surligner */
    border-left: 3px solid #c0392b; /* Barre latérale rouge */
    padding-left: 5px;
    margin-bottom: 2px;
}

/* Style pour le mode ACK (Bleu) */
.log-ack {
    color: #48c1f1; /* Un beau bleu clair */
    border-left: 3px solid #53bad4;
    padding-left: 5px;
    margin-bottom: 2px;
    font-family: 'Courier New', Courier, monospace;
}


/* Style pour le mode LOG (Vert / Bulle de dialogue) */
.log-log {
    color: #bdd14c; /* Un vert émeraude doux */
    border-left: 3px solid #acae3d;
    padding-left: 5px;
    margin-bottom: 2px;
    font-family: 'Courier New', Courier, monospace;
}


/* Barre de boutons verticale */
.console-actions {
    display: flex;
    flex-direction: column;
    background: #080808;
    padding: 5px;
    gap: 5px;
    border-left: 1px solid #444;
}


/* Bouton carré compact pour les actions console avec icône centrée et transition de couleur. */
.btn-console {
    width: 30px;
    height: 30px;
    background: #c7cac7;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-console:hover { 
    background: #29a30b; 
}

.btn-console.active { 
    background: #27ae60; 
    border-color: #2ecc71; 
}

.btn-console.active-danger { 
    background: #c0392b; 
    border-color: #e74c3c; 
    color: white;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

/* Change la couleur au survol spécifiquement pour le bouton de configuration */
.console-actions .btn-console:last-child:hover {
    background: #f1c40f; /* Jaune */
    border-color: #d4ac0d;
    color: #000;
}

/* ==========================================
   PERSONNALISATION DU SCROLLBAR CONSOLE
   ========================================= */

/* Largeur et fond du rail */
#console::-webkit-scrollbar {
    width: 10px;
    background-color: #f7f7f7; 
}


/* Le rail (piste) */
#console::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}


/* Le curseur (la partie qui bouge) */
#console::-webkit-scrollbar-thumb {
    /* Un gris aluminium brossé */
    background: #7f8c8d; 
    border-radius: 4px;
    /* Un petit liseré pour le détacher du fond */
    border: 2px solid #2c3e50; 
}


/* Effet au survol : Plus brillant */
#console::-webkit-scrollbar-thumb:hover {
    background: #e3e9ed; /* Gris très clair, presque blanc */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}


/* Version Firefox (Ligne fine et contrastée) */
#console {
    scrollbar-width: thin;
    scrollbar-color: #009048 #4c4c4c;
}


/* Barre d'envoi de commandes rigide et stylisée avec espacement interne et ombre portée. */
#direct-send-container {
    display: flex;
    gap: 10px;
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Empêche le container de s'écraser */
}


/* Champ de saisie extensible avec bordure stylisée et police de console pour l'envoi de données. */
#input-data {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #bdc3c7;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    outline: none;
}

#input-data:focus {
    border-color: #3498db;
}


/* Bouton d'envoi bleu nuit avec texte gras, coins arrondis et changement de couleur fluide. */
.btn-direct-send {
    background: #2c3e50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-direct-send:hover {
    background: #34495e;
    border-bottom: 2px solid #3498db;
}