/* ===========================================================
   CHARTS (tuiles 100% Canvas / Lightweight Charts)
   Fichier: static/css/charts.css
   =========================================================== */

html, body { height: 100%; margin: 0; }

body{
  font-family: Arial, sans-serif;
  background: var(--ia-workspace-bg, #ffffff);
  padding: 12px;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  height:100vh;
  overflow:hidden;
}

.row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
.group { display:flex; gap:12px; align-items:center; }
.spacer { flex: 1 1 auto; }

button { padding:8px 12px; cursor:pointer; }
input, select { padding:6px 8px; }

.muted{ color: inherit; font-size: 12px; }
#symSearch { width: 180px; }

#charts{ flex: 1 1 auto; min-height: 0; }

#charts{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}

#charts.single,
#charts.two,
#charts.four{
  display: block;
}


.tile{
  display:flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  min-height: 0;
}

/* ✅ Démarrage: aucun chart ouvert par défaut.
   Ouverture uniquement via le bouton "+" (événement ia:tile_opened). */
[id^="tile_chart"]{
  display: none;
}

.tilebar{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: stretch;
  column-gap: 8px;
  row-gap: 0;
  padding: 4px 8px;
  background:#f7f7f7;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  min-height: 44px;
}

.tilebar .tilebarCol{
  min-width: 0;
}

.tilebar .tilebarColLeft{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.tilebar .tilebarColCenter{
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  min-width: 0;
  row-gap: 6px;
}

.tilebar .tilebarColRight{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tilebar .tilebarRow{
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.tilebar .tilebarRowTop{
  font-size: 14px;
  line-height: 1.25;
  justify-content: center;
  width: 100%;
  gap: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.tilebar .tilebarRowTop .tileKpi{
  gap: 8px;
}

/* Lisibilité KPI sans changer les couleurs (rouge/vert/noir conservées) */
.tilebar .tilebarRowTop .tileKpiLabel,
.tilebar .tilebarRowTop .tileKpiValue{
  text-shadow:
    0 1px 1px rgba(0,0,0,0.55),
    0 0 1px rgba(255,255,255,0.28);
  -webkit-text-stroke: 0.2px rgba(255,255,255,0.20);
}

.tilebar .tilebarRowTop .tileKpiLabel{
  font-weight: 400;
}

.tilebar .tilebarRowTop .tileKpiValue{
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  line-height: 1.05;
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,0.55);
}

.tilebar .tilebarRowBottom{
  min-height: 24px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Espace visuel dans la ligne basse */
.tilebar .tilebarRowBottom .marketMeta{
  margin-right: 10px;
}

/* Plus d'air entre UT et le bloc des 2 boutons */
.tilebar .tilebarRowBottom .tfLocal + :is(.iaTilebarPanelBtn, .btnLegend, .btnOrderBook){
  margin-left: 10px;
}

.tilebar .tileKpi{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.tilebar .tileKpiLabel{
  opacity: 1;
}

.tilebar .tileKpiValue{
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.tilebar .tileKpiValue.is-pos{
  color: #0a6b2b;
}

.tilebar .tileKpiValue.is-neg{
  color: #9f1f1f;
}

.tilebar .tileKpiValue.is-flat{
  color: #334155;
}

.tilebar .tileTradeWin{
  color: #0a6b2b;
}

.tilebar .tileTradeNeutral{
  color: #0f172a;
}

.tilebar .tileTradeLoss{
  color: #9f1f1f;
}

.tilebar .tileTradesValue{
  display: inline-flex;
  align-items: center;
}

.tilebar .tileTradeSep{
  margin: 0 4px;
  color: inherit;
  font-weight: 400;
}

.tiletitle{
  color: inherit;
  min-width: 52px;
  font-size: 14px;
  line-height: 1.2;
}
.tilebar .symLocal,
.tilebar .tfLocal{
  height: 22px;
  min-height: 22px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.1;
}

.tilebar .symLocal{
  width: clamp(94px, 12vw, 112px);
  min-width: 90px;
}

.tilebar .tfLocal{
  width: 66px;
  min-width: 62px;
}

.tilebar .iaTilebarPanelBtn,
.tilebar .btnLegend,
.tilebar .btnOrderBook{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  padding: 0 !important;
  border-radius: 7px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  background: #fff !important;
  color: inherit !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tilebar .iaTilebarPanelBtn:hover,
.tilebar .btnLegend:hover,
.tilebar .btnOrderBook:hover{
  background: #f3f3f3 !important;
}

.tilebar .iaTilebarPanelBtn svg,
.tilebar .iaTilebarPanelBtn svg *{
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

.tilebar .tilebarColRight .tileMaxBtn,
.tilebar .tilebarColRight .tileCloseBtn{
  margin-left: 0 !important;
}

.tile .tilebar [id^="info_"]{
  display: none !important;
}

.chart{
  flex: 1 1 auto;
  min-height: 0;
  position: relative; /* overlay pancartes */
}

.ia-tile-wait-spinner{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(23, 63, 90, 0.26);
  border-top-color: rgba(23, 63, 90, 0.95);
  animation: ia-chart-spin 850ms linear infinite;
  pointer-events: none;
  z-index: 40;
  display: none;
}

.ia-tile-wait-spinner.is-visible{
  display: block;
}

.ia-chart-loading-overlay{
  position: absolute;
  inset: 0;
  z-index: 28;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(1px);
}

.ia-chart-loading-overlay.is-visible{
  display: flex;
}

.ia-chart-loading-card{
  min-width: 220px;
  max-width: min(84%, 380px);
  border-radius: 10px;
  border: 1px solid rgba(24, 78, 126, 0.25);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  padding: 14px 18px 12px;
  text-align: center;
}

.ia-chart-loading-spinner{
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 3px solid rgba(37, 112, 187, 0.20);
  border-top-color: #2570bb;
  animation: ia-chart-spin 850ms linear infinite;
}

.ia-chart-loading-title{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: #1d3552;
}

.ia-chart-loading-time{
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #45586d;
  font-variant-numeric: tabular-nums;
}

@keyframes ia-chart-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.countdown{ margin-left: 8px; white-space: nowrap; color: inherit; }
#clocks { margin-left: 10px; }
button[disabled] { opacity: 0.45; cursor: not-allowed; }

.badge{
  display:inline-block;
  padding:2px 6px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid #ddd;
  background: #fff;
  color:#333;
  white-space: nowrap;
}
.badge.ready { border-color:#bfe8c9; background:#effbf2; color:#0a6b2b; }
.badge.wait  { border-color:#f2d3a6; background:#fff7ea; color:#8a5200; }

.linkBtn{
  padding:4px 8px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  border-radius: 6px;
}
.linkBtn:hover{ background:#f3f3f3; }

.tileLeft{ display:flex; align-items:center; gap:8px; }

.badge.marketBadge{
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid #ddd;
  background:#fff;
  color:#333;
}
.badge.marketBadge.open{
  border-color:#bfe8c9; background:#effbf2; color:#0a6b2b;
}
.badge.marketBadge.closed{
  border-color:#f3b8b8; background:#fff1f1; color:#8a1f1f;
}
.badge.marketBadge.unknown{
  border-color:#ddd; background:#f4f4f4; color:#666;
}

/* Voyant compact dans la tilebar charts */
.tile .tilebar .badge.marketBadge{
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.40);
  --led-light: #fbbf24;
  --led-core: #f59e0b;
  --led-edge: #a35707;
  --led-glow: rgba(245, 158, 11, 0.68);
  --led-glow-soft: rgba(245, 158, 11, 0.34);
  --led-spark: #ffdba3;
  background: radial-gradient(
    circle at 32% 28%,
    var(--led-spark) 0%,
    var(--led-light) 22%,
    var(--led-core) 54%,
    var(--led-edge) 100%
  );
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: visible;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.16),
    inset 0 1px 1px rgba(255,255,255,0.36),
    inset 0 -1px 1px rgba(0,0,0,0.42),
    0 0 4px var(--led-glow),
    0 0 8px var(--led-glow-soft);
  cursor: help;
}
.tile .tilebar .badge.marketBadge::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 72% 74%,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0) 58%
  );
  pointer-events: none;
}
.tile .tilebar .badge.marketBadge::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 4px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    var(--led-spark) 0%,
    rgba(255,255,255,0) 78%
  );
  opacity: 0.95;
  pointer-events: none;
}
.tile .tilebar .badge.marketBadge.open{
  border-color: #0e7a37;
  --led-light: #6ee7a1;
  --led-core: #22c55e;
  --led-edge: #0f7a3f;
  --led-glow: rgba(34, 197, 94, 0.70);
  --led-glow-soft: rgba(34, 197, 94, 0.34);
  --led-spark: #b7f7cf;
}
.tile .tilebar .badge.marketBadge.closed{
  border-color: #b91c1c;
  --led-light: #ff8a8a;
  --led-core: #ef4444;
  --led-edge: #9f1f1f;
  --led-glow: rgba(239, 68, 68, 0.70);
  --led-glow-soft: rgba(239, 68, 68, 0.34);
  --led-spark: #ffbcbc;
}
.tile .tilebar .badge.marketBadge.indicative,
.tile .tilebar .badge.marketBadge.unknown{
  border-color: #c27a06;
  --led-light: #fbbf24;
  --led-core: #f59e0b;
  --led-edge: #a35707;
  --led-glow: rgba(245, 158, 11, 0.68);
  --led-glow-soft: rgba(245, 158, 11, 0.34);
  --led-spark: #ffdba3;
}

.marketMeta{
  font-size:12px;
  color: inherit;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
}

/* ===========================================================
   Pancartes Canvas (overlay DOM)
   =========================================================== */

:root{
  --ia-price-label-up-bg:   rgba(20,160,60,0.92);
  --ia-price-label-down-bg: rgba(210,40,40,0.92);
  --ia-price-label-cursor-bg: rgba(0,0,0,0.85);
  --ia-cursor-label-fg: #ffffff;
  --ia-cursor-vline-width: 1;
  --ia-cursor-vline-style: dotted;
  --ia-cursor-hline-width: 1;
  --ia-cursor-hline-style: dotted;
  --ia-price-label-line-width: 1;
  --ia-price-label-line-style: dotted;
  --ia-indpane-btn-bg: #ffffff;
  --ia-indpane-btn-fg: #111111;
  --ia-indpane-btn-hover-bg: #f3f3f3;
  --ia-indpane-btn-hover-fg: #111111;
}

.iaPancartesOverlay{
  position:absolute;
  inset:0;
  pointer-events:none; /* ne bloque pas le chart */
  z-index: 20;
}

/* Base commune (style trading) */
.iaPancarte{
  position:absolute;
  pointer-events:none;

  border: 1px solid rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.85);
  color: #fff;

  /* style "plateforme trading" */
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
  padding: 3px 7px;
  white-space: nowrap;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Labels à droite */
.iaPancarteCursor,
.iaPancarteCurrent{
  right: 0px;
  border-left: none;
}

/* Info (en haut à gauche) */
.iaPancarteInfo{
  left: 8px;
  top: 8px;
  right: auto;

  color: #111;
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.20);

  white-space: normal;
  min-width: 170px;

  font-weight: 400;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.iaInfoTime{
  font-size: 11px;
  color: rgba(0,0,0,0.62);
  margin-bottom: 6px;
}
.iaInfoRow{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 2px 0;
}
.iaInfoRow .k{ color: rgba(0,0,0,0.62); }
.iaInfoRow .v{ font-weight: 700; color:#111; }

.ia-chart-transient-note{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  max-width: min(82%, 520px);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(187, 134, 16, 0.45);
  background: rgba(255, 248, 220, 0.96);
  color: #5b4300;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  opacity: 0;
  z-index: 24;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ia-chart-transient-note.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================================================
   Quand un panneau est ouvert : neutraliser le chart,
   MAIS garder la pancarte OHLC cliquable
   =========================================================== */
body.ia-panel-open .chart{ pointer-events: none; }
body.ia-panel-open .iaPancartesOverlay{ pointer-events: none; }
body.ia-panel-open .ia-ohlc-panel,
body.ia-panel-open .ia-ohlc-panel *{
  pointer-events: auto !important;
}

/* ===========================================================
   PANES: séparateurs + titres
   =========================================================== */
.ia-pane{ position: relative; box-sizing: border-box; }

.ia-pane-vol{
  border-top: 1px solid rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.ia-pane-rsi{ border-top: 1px solid rgba(0,0,0,0.18); }

.ia-pane-title{
  position:absolute;
  left: 8px;
  top: 6px;
  z-index: 40;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.86);
  padding: 2px 6px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  pointer-events:none;
}

/* ===========================================================
   OHLC panel (sur bougies)
   =========================================================== */
.ia-ohlc-panel{
  position:absolute;
  left: 8px;
  top: 28px;
  z-index: 45;

  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: rgba(0,0,0,0.9);
  min-width: 160px;

  pointer-events: auto;
  cursor: move;
  touch-action: none; /* important pour pointer events */
}
.ia-ohlc-panel.dragging{ cursor: grabbing; }

.ia-ohlc-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.ia-ohlc-panel .t{
  font-size: 11px;
  color: rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.ia-ohlc-panel .r{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 0;
}
.ia-ohlc-panel .r span{ color: rgba(0,0,0,0.55); }
.ia-ohlc-panel .r b{ font-variant-numeric: tabular-nums; }

.ia-ohlc-close{
  position:absolute;
  top: 6px;
  right: 6px;
  z-index: 60;

  pointer-events:auto;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;

  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  cursor: pointer;
}
.ia-ohlc-close:hover{ color: rgba(0,0,0,0.90); }

/* Header des panes (titre + boutons) */
.ia-pane-header{
  position:absolute;
  top: 6px;
  left: 8px;
  height: 22px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index: 50;
  pointer-events:auto;
}

.ia-pane-header-title{
  height: 22px;
  display:flex;
  align-items:center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ia-indpane-btn-fg, rgba(0,0,0,0.85));
  background: var(--ia-indpane-btn-bg, rgba(255,255,255,0.86));
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  padding: 0 8px;
}

.ia-pane-close{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--ia-indpane-btn-fg, rgba(0,0,0,0.75));
  background: var(--ia-indpane-btn-bg, rgba(255,255,255,0.86));
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  cursor:pointer;
}
.ia-pane-close:hover{
  color: var(--ia-indpane-btn-hover-fg, var(--ia-indpane-btn-fg, rgba(0,0,0,0.90)));
  background: var(--ia-indpane-btn-hover-bg, rgba(255,255,255,0.98));
}

.ia-pane-edit{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;

  padding: 0;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;

  background: var(--ia-indpane-btn-bg, rgba(255,255,255,0.86));
  color: var(--ia-indpane-btn-fg, rgba(0,0,0,0.90));
  cursor:pointer;
}
.ia-pane-edit svg{ display:block; }
.ia-pane-edit:hover{
  background: var(--ia-indpane-btn-hover-bg, rgba(255,255,255,0.98));
  color: var(--ia-indpane-btn-hover-fg, rgba(0,0,0,1));
}

.ia-pane-resizer{
  height: 8px;
  cursor: row-resize;
  background: transparent;
  position: relative;
  z-index: 30;
}
.ia-pane-resizer:hover{ background: rgba(0,0,0,0.05); }

/* Quick jump to latest candles (bottom-right, above time axis) */
.ia-jump-latest-btn{
  position: absolute;
  right: 26px; /* centered in the 80px right price-scale column */
  bottom: 8px;
  z-index: 35;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  background: rgba(255,255,255,0.88);
  color: rgba(0,0,0,0.82);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
  cursor: pointer;
  user-select: none;
}
.ia-jump-latest-btn:hover{
  background: rgba(255,255,255,0.98);
  color: rgba(0,0,0,1);
}

/* ================================
   CLIP HARD pour la pancarte OHLC
   (empêche tout débordement hors bougies)
   ================================ */

.ia-pane.ia-pane-main{
  position: relative;
  overflow: hidden;     /* clip */
  contain: paint;       /* renforce le clipping (super efficace) */
}

.ia-main-clip{
  position: absolute;
  inset: 0;
  overflow: hidden;     /* clip absolu */
  pointer-events: none; /* ne bloque pas le chart */
  z-index: 100;         /* au-dessus du canvas */
}

.ia-main-clip .ia-ohlc-panel,
.ia-main-clip .ia-ohlc-panel *{
  pointer-events: auto; /* la pancarte reste draggable/cliquable */
}

.ia-ohlc-sep{
  height: 8px;
  margin: 4px 0 2px 0;
  border: none;
}

.ia-ohlc-panel .r.r-ind span{
  color: rgba(0,0,0,0.62);
}

.ia-ohlc-panel .ia-ohlc-ind{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ia-ohlc-panel .ia-ohlc-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ohlc-dot, #999);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
}
/* ================================
   SMA overlay labels (bas gauche/droite)
   ================================ */

.ia-sma-overlay{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Optionnel : si tu veux un look “price label” net */
.ia-sma-label{
  border-radius: 0 !important;
  box-shadow: none !important;
}