/*
 * Cette règle garantit que lorsqu'un élément flex (comme .is-flex)
 * doit être caché (.is-hidden), il le soit sans équivoque.
*/
.is-flex.is-hidden {
  display: none !important;
}

#settings-modal-card {
  height: 32rem;
  display: flex;
  flex-direction: column;
}

/* Empêche les onglets de rétrécir verticalement */
#settings-modal .tabs {
  flex-shrink: 0;
}

#settings-modal-card .modal-card-head,
#settings-modal-card .modal-card-foot {
  flex-shrink: 0;
}

#settings-modal-card .modal-card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Empêche le corps lui-même de déborder */
}

.settings-scroll-container {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0; /* Indispensable pour que le scroll fonctionne dans un conteneur Flex */
}

/* Pousse le conteneur du bouton vers le bas */
.reset-button-container {
  margin-top: auto; /* La propriété magique qui fait tout le travail */
}

#add-curve-modal-card{
  height: 30rem;
  width: 45rem;
}

#new-file-modal-card{
  width: 45rem;
}

.new-file-button{
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#choose-curves-modal-card{
  width: 48rem;
}

#curveColorPicker option {
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: 15px 15px;
}

.navbar, .navbar-dropdown {
  z-index: 180 !important;
}

#grapheur-panel {
  flex-grow: 1;
  overflow: hidden;
}

.model-toggle {
  cursor: pointer;
  background-color: var(--darker-bg-color);
}

#chart-wrapper {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  position: relative; /* Pour servir de référence au sélecteur */

}

#chart {
  flex-grow: 1;
  min-height: 0;
}

#calculation-sidebar .menu-list a {
  padding: 4px 8px;
  display: block; /* Assure que le lien remplit son conteneur */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Rendre les colonnes de fonctions sans espace pour la compacité */
#calculation-sidebar-functions .columns {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.chart-free-crosshair {
  cursor: crosshair !important;
}


/* Style personnalisé pour les fonctions dans l'éditeur CodeMirror */
/* Thème de base pour la cohérence avec Bulma */
#calculs-panel .CodeMirror {
  /* 1. Force l'éditeur à prendre toute la hauteur disponible */
  flex-grow: 1;
  min-height: 0; /* Essentiel pour le bon fonctionnement de flexbox */
  max-height: none;
  
  /* 2. Style visuel inspiré de Bulma */
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);

  line-height: 1.5;

  font-family: "Inter", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  resize: none; 
}

/* 3. Style au focus, comme un textarea Bulma */
#calculs-panel .CodeMirror-focused {
  border-color: #485fc7 !important;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

/* 4. Palette de couleurs (inchangée) */
.cm-phyweb-function {
  color: #544fc5; 
  font-weight: 500;
}
.cm-variable-2 {
  color: #008000;
}
.cm-def {
  color: #d568fb;
}
.cm-number {
  color: #fe6a35;
}
.cm-operator {
  color: #888;
}
.cm-comment {
  color: #999;
  font-style: italic;
}

/* Modèles*/

#add-model-modal-card {
  width: 50rem;
}

.model-type-item {
  width: 120px;
  border: 1px solid #dbdbdb;
  transition: all 0.2s ease-in-out;
}

.model-type-item.is-active {
  border-color: var(--bulma-primary);
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 0.25);
}

#modelisation-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

#modelisation-panel .modelisation-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Centre le contenu horizontalement */
  position: relative; /* Crée un contexte de positionnement */
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

#modelisation-panel .modelisation-header .title {
  margin: 0;
  flex-grow: 1; /* S'assure que le titre peut occuper tout l'espace */
  text-align: center; /* Centre le texte du titre */
}

#modelisation-panel #compress-modelisation-button {
  position: absolute; /* Sort le bouton du flux normal */
  left: 0; /* Le place tout à gauche du conteneur */
}

#model-list {
  flex-grow: 1;
  overflow-y: auto;
}

/* Style pour la coche de succès du calcul */
#calculation-success-checkmark {
  font-size: 1.5rem; /* Ajustez la taille si besoin */
  color: var(--bulma-success);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#calculation-success-checkmark.show {
  opacity: 1;
  animation: fadeOut 2s forwards; /* Durée totale de 2s avant disparition */
}

#save-format-warning {
  min-height: 4em; /* Réserve une hauteur équivalente à ~2 lignes de texte */
}

#xaxis-selector-container {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 10; /* Assure que le menu est au-dessus du graphique */
}

/* Optionnel : pour éviter que le menu ne soit trop large */
#xaxis-select {
  field-sizing: content;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1; /* Reste visible pendant 80% du temps */
  }
  100% {
    opacity: 0;
  }
}

/* Animation du panneau : Slide solide depuis la droite */
#modelisation-panel {
  overflow: hidden;    /* Masque le contenu qui dépasse pendant l'animation */
  white-space: nowrap; /* Empêche le texte de se "comprimer" ou revenir à la ligne pendant le mouvement */
  
  /* On anime uniquement la largeur et le déplacement */
  transition: max-width 0.4s ease-in-out,
              padding 0.4s ease,
              margin 0.4s ease,
              transform 0.4s ease-in-out;
}

/* ÉTAT FERMÉ */
#modelisation-panel:not(.is-open) {
  max-width: 0 !important;    /* Fermé horizontalement */
  padding-left: 0 !important; 
  padding-right: 0 !important;
  margin: 0 !important;       
  
  /* On le décale de 100px vers la droite pour créer l'élan quand il s'ouvrira */
  transform: translateX(100px); 
}

/* ÉTAT OUVERT */
#modelisation-panel.is-open {
  max-width: 300px; /* Largeur cible (ajustez selon vos besoins) */
  transform: translateX(0); /* Il revient à sa position naturelle */
}

/* Transition d'opacité pour les boutons */
#expand-modelisation-button, 
#compress-modelisation-button {
  transition: opacity 0.3s ease-in-out;
  opacity: 1; /* Visible par défaut */
}

/* Classe utilitaire pour rendre transparent (mais l'élément est toujours là) */
.is-transparent {
  opacity: 0 !important;
  pointer-events: none; /* Empêche de cliquer pendant le fondu */
}

#file-extension-label {
  width: 4rem;
}