/* AITradePro V60 — premium-chart.css
 * V60 Institutional UI Refactor — Clean Chart Workspace
 * UI Only — No AI/backend changes
 */

/* ===== V60 CHART WORKSPACE — INSTITUTIONAL STYLE ===== */

/* V60: Overlay toolbar — compact, institutional */
#chart-overlay-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  font-size: 10px;
}

/* V60: Core overlay buttons — ON by default, solid look */
.ov-btn {
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: all 0.15s;
}
.ov-btn:hover {
  background: var(--bg3);
  color: var(--text);
}
.ov-btn.active {
  background: rgba(41,98,255,0.15);
  border-color: rgba(41,98,255,0.4);
  color: #5c8eff;
}
/* Core defaults: Entry/SL, Target, S/R */
.ov-btn.core-active {
  background: rgba(41,98,255,0.12);
  border-color: rgba(41,98,255,0.35);
  color: #6ba3ff;
}

/* V60: Separator */
.ov-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 3px;
  opacity: 0.5;
}
.ov-label {
  font-size: 9px;
  color: var(--text2);
  opacity: 0.6;
  white-space: nowrap;
  margin-right: 2px;
}

/* Layout buttons */
.layout-btn {
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 10px;
}
.layout-btn.active {
  background: rgba(41,98,255,0.15);
  border-color: rgba(41,98,255,0.4);
  color: #5c8eff;
}

/* Multi-chart grid */
#multi-chart-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
  position: relative;
  background: var(--bg);
}
#multi-chart-wrap.layout-2 { grid-template-columns: 1fr 1fr; }
#multi-chart-wrap.layout-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.chart-cell {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.chart-cell:last-child { border-right: none; }

/* V60: Chart cell label — minimal */
/* V2 UI Polish: moved below #chart-ohlc (top:4px) to fix exact-overlap/garbled-text bug */
.chart-cell-label {
  position: absolute;
  top: 26px;
  left: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text2);
  background: rgba(13,17,23,0.7);
  padding: 1px 5px;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
  letter-spacing: 0.2px;
}

/* V60: Overlay legend — bottom-left, minimal */
#overlay-legend {
  position: absolute;
  bottom: 4px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  z-index: 20;
  pointer-events: none;
}
.ol-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text2);
  background: rgba(13,17,23,0.75);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.2px;
}
.ol-dot {
  width: 12px;
  height: 1px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Zone labels on chart */
.chart-zone-tooltip {
  position: absolute;
  font-size: 9px;
  pointer-events: none;
  z-index: 15;
  padding: 1px 4px;
  border-radius: 2px;
}

/* V60: Chart info overlay — right-side price labels, TradingView style */
#chart-info-overlay {
  position: absolute;
  top: 26px;
  right: 62px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.ci-item {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 1px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ci-item.v60-entry {
  background: rgba(41,98,255,0.15);
  color: #5c8eff;
  border-left: 2px solid #2962ff;
}
.ci-item.v60-sl {
  background: rgba(244,67,54,0.12);
  color: #ef5350;
  border-left: 2px solid #f44336;
}
.ci-item.v60-target {
  background: rgba(0,137,123,0.12);
  color: #4db6ac;
  border-left: 2px solid #00897b;
}
.ci-item.v60-sup {
  background: rgba(38,166,154,0.1);
  color: #4db6ac;
  border-left: 2px solid rgba(38,166,154,0.5);
}
.ci-item.v60-res {
  background: rgba(239,83,80,0.1);
  color: #ef9a9a;
  border-left: 2px solid rgba(239,83,80,0.5);
}
/* Legacy ci-item support */
.ci-item.entry { border-left: 2px solid #2962ff; color: #5c8eff; background: rgba(41,98,255,0.12); }
.ci-item.sl-line { border-left: 2px solid #f44336; color: #ef5350; background: rgba(244,67,54,0.1); }
.ci-item.t1, .ci-item.t2, .ci-item.t3 { border-left: 2px solid #00897b; color: #4db6ac; background: rgba(0,137,123,0.1); }
.ci-item.support { border-left: 2px solid rgba(38,166,154,0.5); }
.ci-item.resistance { border-left: 2px solid rgba(239,83,80,0.5); }

/* Market Panel */
#market-panel { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mp-item { background: var(--bg3); border-radius: 2px; padding: 4px 6px; border-left: 2px solid var(--border); }
.mp-item .mp-label { font-size: 9px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.3px; }
.mp-item .mp-val { font-size: 11px; font-weight: 600; color: var(--text); }
.mp-item.bullish { border-left-color: var(--green); }
.mp-item.bearish { border-left-color: var(--red); }
.mp-item.neutral { border-left-color: var(--yellow); }

/* SMC badges */
.smc-badge { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 9px; font-weight: 600; margin: 1px 2px; }
.smc-badge.ob-bull { background: rgba(0,137,123,0.1); color: var(--green); border: 1px solid rgba(0,137,123,0.3); }
.smc-badge.ob-bear { background: rgba(239,83,80,0.1); color: var(--red); border: 1px solid rgba(239,83,80,0.3); }
.smc-badge.fvg { background: rgba(26,61,74,0.3); color: #4db6ac; border: 1px solid rgba(26,61,74,0.5); }
.smc-badge.liq { background: rgba(74,59,18,0.3); color: #ffa726; border: 1px solid rgba(74,59,18,0.5); }
.smc-badge.bos { background: rgba(61,30,30,0.3); color: #ef9a9a; border: 1px solid rgba(61,30,30,0.5); }
.smc-badge.choch { background: rgba(46,30,61,0.3); color: #ce93d8; border: 1px solid rgba(46,30,61,0.5); }

/* SMC panel */
#smc-panel { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.smc-row { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.tl-row.exec-row { border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 3px; }