/* ===========================================================
   Panneau Indicateurs IA
   Fichier: static/css/panneau_indicateur_ia.css
   =========================================================== */

/* ✅ Titre sur UNE ligne (copie de la logique calendrier) */
#legendPanel .panelHeader .legendHeaderLine{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}

/* ✅ Le titre "Indicateurs IA" */
#legendPanel #legendPanelTitle{
  display:inline;
  font-weight:700;
  font-size:14px;
  color:#111;
  line-height:1.2;
}

/* ✅ Le sous-titre "• chartX • symbole • UT" */
#legendPanel #legendTitle{
  display:inline;
  font-weight:400;
  font-size:12px;
  color:#666;
  line-height:1.2;

  /* si un jour c’est trop long : tu peux ellipsiser */
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ Bouton fermer : même esprit que le calendrier (petit, clean) */
#legendPanel #legendClose{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#legendPanel #legendClose:hover{ background:#f0f0f0; }

/* ✅ Ligne des boutons ON/OFF */
#legendPanel .legendActions{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 10px;      /* comme le calendrier qui pad ses zones */
  box-sizing:border-box;
}

#legendPanel .legendBtn:hover{ background:#f3f3f3; }

/* Le bouton 🔗 garde linkBtn (déjà défini dans charts.css) */

/* ===========================
   Frames (cadres par section)
   =========================== */
#legendPanel .iaLegendFrame{
  border: 1px solid var(--ia-panels-body-border-soft);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--ia-panels-body-bg);
}

#legendPanel .iaLegendFrameTitle{
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 10px;
}

/* Ligne séparatrice interne (comme réglages) */
#legendPanel .iaLegendLine{
  border-top: 1px solid var(--ia-panels-body-border-soft);
  margin: 8px 0;
}

/* ===========================
   Switch PLAT + BLEU (plus fin)
   =========================== */


#legendPanel .iaLegendCard{
  margin-bottom: 10px;
}

#legendPanel .iaLegendRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#legendPanel .iaLegendControls{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#legendPanel .iaLegendLabel{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

#legendPanel .iaLegendEmpty{
  font-size: 12px;
  opacity: 0.75;
  padding: 2px 0 0 0;
}
/* ===========================================================
   FINITIONS UI / HIÉRARCHIE / ALIGNEMENTS
   =========================================================== */

/* 1) Plus d'air sous la barre Tout ON/OFF */
#legendPanel .legendActions{
  margin-bottom: 10px;          /* ✅ respire */
}

/* 2) Root : espacement global */
#legendPanel .iaLegendRoot{
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* ✅ espace entre OHLC et cadres */
}

/* 3) Ligne item : padding + hauteur cohérente */
#legendPanel .iaLegendRow.iaLegendItem{
  min-height: 34px;             /* ✅ aligne verticalement switch/crayon */
  padding: 2px 0;
}

/* 4) Labels indicateurs : un peu moins "blocky" + lisible */
#legendPanel .iaLegendLabel{
  font-size: 13px;
  font-weight: 700;
}

/* 5) Titres sections : plus gros + plus hiérarchie */
#legendPanel .iaLegendFrameTitle{
  font-size: 13px;              /* ✅ plus gros qu'avant */
  font-weight: 800;
  margin-bottom: 8px;
}

/* 6) Indentation des indicateurs sous leur section */
#legendPanel .iaLegendList{
  padding-left: 10px;           /* ✅ décalage léger */
}

/* 7) Contrôles : colonne fixe pour aligner verticalement (switch + crayon) */
#legendPanel .iaLegendControls{
  width: 74px;                  /* ✅ colonne fixe => tout s'aligne */
  justify-content: flex-end;
  gap: 8px;
}

/* 8) Switch : centré verticalement */
#legendPanel .iaThinSwitch{
  display: inline-flex;
  align-items: center;
}


/* 10) OHLC : aligné comme un item (et un peu séparé des cadres) */
#legendPanel .iaLegendRoot > .iaLegendRow.iaLegendItem{
  margin-top: 2px;
  margin-bottom: 2px;
}

/* 11) Cadres : un peu plus "respirants" */
#legendPanel .iaLegendFrame{
  padding: 12px;                /* ✅ un poil plus grand */
}

/* 12) Séparateur interne : plus doux */
#legendPanel .iaLegendLine{
  margin: 10px 0;
}