/* =============================================
   charts.css — Análise de Gráficos
   CryptoMinds Pro IA
   ============================================= */

/* Faz o layout preencher 100vh sem scroll (gráfico ocupa tudo) */
.charts-page .app-layout {
  height: 100vh;
  overflow: hidden;
}

.charts-page .main-content {
  display: flex !important;
  flex-direction: column;
  height: 100vh;
  min-height: unset;
  overflow: hidden;
}

/* ─── Controls bar ─────────────────────────────── */
.charts-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Coin search */
.coin-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.coin-search-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  padding: 7px 32px 7px 12px;
  width: 150px;
  outline: none;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coin-search-input:focus {
  border-color: var(--purple-vivid);
  box-shadow: 0 0 0 3px rgba(44, 154, 207, 0.15);
}

.coin-search-input::placeholder {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.coin-search-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 9px;
  pointer-events: none;
}

.coin-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 300;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.coin-dropdown.open { display: block; }

.coin-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.coin-dropdown-item:last-child { border-bottom: none; }
.coin-dropdown-item:hover { background: var(--bg-card-hover); }
.coin-dropdown-item.active { background: rgba(44, 154, 207, 0.12); }

.cdi-icon   { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.cdi-symbol { font-weight: 700; color: var(--text-primary); font-size: 13px; }
.cdi-name   { color: var(--text-muted); font-size: 11px; }

/* Separator */
.charts-ctrl-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex-shrink: 0;
}

/* Timeframe buttons */
.tf-group-chart {
  display: flex;
  gap: 3px;
}

.tf-btn-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.tf-btn-chart:hover {
  border-color: var(--purple-vivid);
  color: var(--text-primary);
}

.tf-btn-chart.active {
  background: rgba(44, 154, 207, 0.18);
  border-color: var(--purple-vivid);
  color: var(--purple-vivid);
}

/* Indicator toggles */
.indicators-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.ind-btn {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid;
  transition: var(--transition);
  background: transparent;
  opacity: 0.45;
}

.ind-btn.active { opacity: 1; }

/* ── Pivot Boss 4 EMA (ma_config.js: 8 / 25 / 100 / 200) ── */
/* EMA 8  — Trigger Line — Ouro */
.ind-btn[data-ind="ema8"]   { border-color: #EEB714; color: #EEB714; }
.ind-btn.active[data-ind="ema8"]   { background: rgba(238, 183,  20, 0.14); }

/* EMA 25 — Short — Azul */
.ind-btn[data-ind="ema25"]  { border-color: #2C9ACF; color: #2C9ACF; }
.ind-btn.active[data-ind="ema25"]  { background: rgba( 44, 154, 207, 0.12); }

/* EMA 100 — Medium (Farol de Tendência) — Verde */
.ind-btn[data-ind="ema100"] { border-color: #4FB981; color: #4FB981; }
.ind-btn.active[data-ind="ema100"] { background: rgba( 79, 185, 129, 0.14); }

/* EMA 200 — Long — Vermelho */
.ind-btn[data-ind="ema200"] { border-color: #ef4444; color: #ef4444; }
.ind-btn.active[data-ind="ema200"] { background: rgba(239,  68,  68, 0.12); }

/* ── Osciladores / BB ── */
/* BB — cinza */
.ind-btn[data-ind="bb"]       { border-color: #94a3b8; color: #94a3b8; }
.ind-btn.active[data-ind="bb"]{ background: rgba(148, 163, 184, 0.10); }

/* StochRSI — cyan (substituiu RSI puro) */
.ind-btn[data-ind="stochrsi"]       { border-color: #22d3ee; color: #22d3ee; }
.ind-btn.active[data-ind="stochrsi"]{ background: rgba( 34, 211, 238, 0.12); }

/* MACD — rosa */
.ind-btn[data-ind="macd"]       { border-color: #f472b6; color: #f472b6; }
.ind-btn.active[data-ind="macd"]{ background: rgba(244, 114, 182, 0.12); }

/* ─── Botão Topos & Fundos ──────────────────── */
.btn-pivots {
  font-family:   var(--font-main);
  font-size:     12px;
  font-weight:   700;
  padding:       5px 12px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  border:        1px dashed rgba(238, 183, 20, 0.45);
  color:         rgba(238, 183, 20, 0.7);
  background:    transparent;
  transition:    var(--transition);
  white-space:   nowrap;
  letter-spacing: 0.3px;
  /* min-width para não "pular" quando o texto muda com os contadores */
  min-width:     64px;
  text-align:    center;
}

.btn-pivots:hover {
  border-color: #EEB714;
  color:        #EEB714;
  background:   rgba(238, 183, 20, 0.08);
}

/* Estado ativo: pisca suavemente durante a animação, depois fica estático */
.btn-pivots.active {
  border-style:  solid;
  border-color:  #EEB714;
  color:         #EEB714;
  background:    rgba(238, 183, 20, 0.14);
  box-shadow:    0 0 8px rgba(238, 183, 20, 0.25);
}

/* Pulso enquanto a animação está em andamento */
.btn-pivots.drawing {
  animation: pivot-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes pivot-pulse {
  from { box-shadow: 0 0 4px  rgba(238, 183, 20, 0.2); }
  to   { box-shadow: 0 0 16px rgba(238, 183, 20, 0.55); }
}

/* Separator label between indicator groups */
.ind-sep {
  align-self: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 2px;
  letter-spacing: 0.5px;
}

.charts-scanner-link {
  margin-left: auto;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: var(--transition);
  font-family: var(--font-main);
  font-weight: 500;
  white-space: nowrap;
}

.charts-scanner-link:hover {
  border-color: var(--purple-vivid);
  color: var(--text-primary);
}

/* ─── Price info bar ───────────────────────────── */
.price-info-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-family: 'Inter', monospace;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 36px;
}

.pib-symbol {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-main);
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.pib-field {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pib-val {
  color: var(--text-primary);
  font-weight: 500;
  margin-left: 4px;
}

.pib-val.up   { color: var(--green-profit); }
.pib-val.down { color: var(--red-loss); }

.pib-change {
  font-weight: 700;
  font-size: 13px;
}

/* ─── Chart + sub-panel layout ─────────────────── */
.charts-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Container do gráfico principal (price + volume) */
#chart-container {
  flex: 1;
  min-height: 0;
}

/* Sub-painéis (RSI / MACD) — aparecem abaixo do chart principal */
.chart-subpanel {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.chart-subpanel[data-panel="rsi"]  { height: 120px; }
.chart-subpanel[data-panel="macd"] { height: 120px; }

.chart-subpanel-label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  z-index: 2;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* ─── Overlays (loading / error) ──────────────── */
.chart-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 10;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-family: var(--font-main);
}

.chart-overlay.hidden { display: none; }

.chart-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--purple-vivid);
  border-radius: 50%;
  animation: spin-chart 0.75s linear infinite;
}

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

.chart-overlay-icon  { font-size: 36px; margin-bottom: 4px; }
.chart-overlay-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.chart-overlay-msg {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  max-width: 320px;
  line-height: 1.6;
}
.chart-overlay-msg a { color: var(--purple-vivid); text-decoration: none; }
.chart-overlay-msg a:hover { text-decoration: underline; }

/* ─── Attribution ──────────────────────────────── */
.chart-attribution {
  padding: 4px 16px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  text-align: right;
  flex-shrink: 0;
}

.chart-attribution a {
  color: var(--text-muted);
  text-decoration: none;
}
.chart-attribution a:hover { color: var(--purple-vivid); }

/* ─── Mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .charts-controls  { padding: 8px 12px; gap: 7px; }
  .coin-search-input { width: 110px; font-size: 13px; }
  .tf-btn-chart      { padding: 4px 7px; font-size: 11px; }
  .price-info-bar    { gap: 10px; padding: 6px 12px; }
  .pib-symbol        { font-size: 13px; }
  .ind-sep           { display: none; }
  .charts-scanner-link { display: none; } /* economiza espaço no mobile */
  .chart-subpanel[data-panel="rsi"]  { height: 90px; }
  .chart-subpanel[data-panel="macd"] { height: 90px; }
}