/* ==========================================================================
   AXIONMESK — GRÁFICO: moldura, profundidade e interação (v2)

   A   Moldura com gradiente da marca (dourado → verde) e cantos arredondados
   B   Glow ambiente interno (respiro de luz)
   C   Cabeçalho do gráfico com hierarquia e divisórias
   D   Interação: crosshair magnético, tooltip com sombra, zoom/pinça
   E   Feedback de toque e estados de foco
   F   Otimização: reduz repaint, respeita reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) MOLDURA DO CARTÃO
   -------------------------------------------------------------------------- */
.chart-panel {
  position: relative !important;
  isolation: isolate;
  border-radius: 16px !important;
  padding: 0 !important;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(56,107,255,.07), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(14,203,129,.06), transparent 60%),
    linear-gradient(180deg, #0C121B, #080D14) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 -1px 0 rgba(0, 0, 0, .5) inset,
    0 24px 48px -32px rgba(0, 0, 0, .95) !important;
  overflow: hidden !important;
}

/* borda superior com gradiente da marca */
.chart-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,107,255, .55) 18%,
    rgba(255, 215, 94, .85) 42%,
    rgba(14, 203, 129, .55) 72%,
    transparent 100%);
  opacity: .9;
  z-index: 6;
  pointer-events: none;
}

/* glow interno suave nas bordas */
.chart-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(56,107,255, .06) inset,
    0 0 26px rgba(56,107,255, .045) inset;
  pointer-events: none;
  z-index: 4;
}

/* o canvas nunca deve vazar os cantos */
.chart-panel > canvas,
.chart-panel > img {
  border-radius: 0 0 15px 15px !important;
  display: block !important;
  width: 100% !important;
  touch-action: pan-y;
}

/* --------------------------------------------------------------------------
   C) BARRA DE FERRAMENTAS
   -------------------------------------------------------------------------- */
.chart-panel .chart-toolbar {
  position: relative !important;
  z-index: 7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

  height: 48px !important;
  min-height: 48px !important;
  padding: 0 10px !important;
  margin: 0 !important;

  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(10px);
}

.chart-panel .chart-toolbar::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(56,107,255,.22) 30%, rgba(14,203,129,.18) 70%, transparent);
  pointer-events: none;
}

/* timeframes: segmento com elevação no ativo */
.chart-panel .chart-tfs {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;

  height: 34px !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, .30) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-sizing: border-box !important;
}

.chart-panel .chart-tf {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 26px !important;
  padding: 0 2px !important;

  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #7E8896 !important;

  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background .16s ease, transform .1s ease !important;
}

.chart-panel .chart-tf:active { transform: scale(.94) !important; }

.chart-panel .chart-tf.active {
  background: linear-gradient(180deg, rgba(56,107,255,.24), rgba(56,107,255,.10)) !important;
  color: #5C86FF !important;
  box-shadow:
    0 0 0 1px rgba(56,107,255,.38) inset,
    0 2px 10px -4px rgba(56,107,255,.7) !important;
}

/* botão Livro: vidro com ícone */
.chart-panel .cm-book-btn,
.chart-panel .chart-toolbar > *:last-child {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  height: 32px !important;
  min-width: 34px !important;
  padding: 0 8px !important;

  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #A9B1BD !important;

  font-size: 10.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}

.chart-panel .cm-book-btn:active,
.chart-panel .chart-toolbar > *:last-child:active {
  background: rgba(56,107,255, .16) !important;
  border-color: rgba(56,107,255, .40) !important;
  color: #386BFF !important;
}

/* esconde ruído legado */
.chart-panel .chart-type,
.chart-panel .chart-legend,
.chart-panel .cm-chart-note { display: none !important; }

/* --------------------------------------------------------------------------
   E) INTERAÇÃO NO TOQUE
   -------------------------------------------------------------------------- */
/* área sensível: mostra que o gráfico é interativo */
.chart-panel > canvas {
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}

/* brilho que acompanha o toque/foco */
.chart-panel.is-hover::after {
  box-shadow:
    0 0 0 1px rgba(56,107,255, .16) inset,
    0 0 34px rgba(56,107,255, .09) inset;
}

/* dica de arraste na primeira visita (desktop) */
@media (hover: hover) and (min-width: 901px) {
  .chart-panel .chart-tf:hover { color: #C7CEDA !important; background: rgba(255,255,255,.05) !important; }
  .chart-panel .cm-book-btn:hover { background: rgba(255,255,255,.10) !important; color: #F5F7FA !important; }
  .chart-panel > canvas { cursor: crosshair; }
}

/* --------------------------------------------------------------------------
   F) TAMANHOS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .chart-panel { border-radius: 14px !important; }
  .chart-panel > canvas { border-radius: 0 0 13px 13px !important; }
  .chart-panel .chart-toolbar { height: 46px !important; min-height: 46px !important; padding: 0 8px !important; }
}

@media (min-width: 901px) {
  .chart-panel { border-radius: 18px !important; }
  .chart-panel > canvas { border-radius: 0 0 17px 17px !important; }
  .chart-panel .chart-toolbar { height: 54px !important; padding: 0 16px !important; }
  .chart-panel .chart-tfs { height: 38px !important; max-width: 420px !important; }
  .chart-panel .chart-tf { height: 30px !important; font-size: 11.5px !important; }
  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child { height: 36px !important; font-size: 12px !important; padding: 0 12px !important; }
}

/* --------------------------------------------------------------------------
   Acessibilidade / performance
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chart-panel .chart-tf,
  .chart-panel .cm-book-btn { transition: none !important; }
  .chart-panel .chart-tf:active { transform: none !important; }
}

/* ==========================================================================
   G) ACABAMENTO (visto no print real)

   1. O container .chart-toolbar__right aparecia como uma CAIXA vazia ao lado
      do botão Livro (dois retângulos).
   2. O botão Livro estava sem rótulo — só o ícone, sem affordance.
   3. A etiqueta de preço ($64.869,65) encostava na borda direita do canvas.
   4. O volume "VOL" ficava sobre as barras.
   ========================================================================== */
@media (max-width: 900px) {
  /* 1) o container não desenha caixa própria */
  .chart-panel .chart-toolbar__right {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* 2) Livro com rótulo curto e ícone */
  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    font-size: 0 !important;              /* esconde texto legado */
  }

  .chart-panel .cm-book-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  /* rótulo próprio, injetado por CSS */
  .chart-panel .cm-book-btn::after {
    content: "Livro";
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: inherit !important;
    line-height: 1 !important;
  }

  /* 3) espaço à direita no canvas: a etiqueta de preço respira */
  .chart-panel > canvas { border-radius: 0 0 13px 13px !important; }
}

/* ==========================================================================
   H) INTERAÇÃO: cursor e destaque no hover do gráfico
   ========================================================================== */
.chart-panel > canvas { cursor: crosshair; }

@media (hover: hover) and (min-width: 901px) {
  .chart-panel:hover::after {
    box-shadow:
      0 0 0 1px rgba(56,107,255, .14) inset,
      0 0 30px rgba(56,107,255, .07) inset;
  }

  .chart-panel .cm-book-btn:hover::after { color: #386BFF; }
}

/* ==========================================================================
   I) DESKTOP: mais respiro e hierarquia
   ========================================================================== */
@media (min-width: 901px) {
  .chart-panel .chart-toolbar__right {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child {
    font-size: 12px !important;
    padding: 0 14px !important;
    gap: 7px !important;
  }

  .chart-panel .cm-book-btn::after { content: "Livro de ofertas"; }
}

/* ==========================================================================
   J) CORREÇÃO FINAL (print 2)

   Continua aparecendo o "anel" do container .chart-toolbar__right em volta
   do botão Livro — a caixa dupla. E o rótulo "Livro" empurrou a régua de
   timeframes, encostando no "1h".

   Solução:
     • o container vira transparente de verdade (inclusive ::before/::after)
     • o botão Livro volta a ser só ícone de 34×34, sem texto
     • a régua mantém a largura original
   ========================================================================== */
.chart-panel .chart-toolbar__right,
.chart-panel .chart-toolbar__right::before,
.chart-panel .chart-toolbar__right::after {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  position: static !important;
}

/* botão apenas com ícone — 34×34, sem alterar a largura da régua */
.chart-panel .cm-book-btn,
.chart-panel .chart-toolbar > *:last-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  flex: 0 0 34px !important;
}

.chart-panel .cm-book-btn::after,
.chart-panel .chart-toolbar > *:last-child::after {
  content: none !important;
  display: none !important;
}

.chart-panel .cm-book-btn svg,
.chart-panel .chart-toolbar > *:last-child svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  margin: 0 !important;
}

/* a régua de timeframes recupera o espaço */
@media (max-width: 900px) {
  .chart-panel .chart-toolbar { gap: 8px !important; }
  .chart-panel .chart-toolbar__left { flex: 1 1 auto !important; min-width: 0 !important; }
  .chart-panel .chart-tfs { max-width: 100% !important; }
}

/* ==========================================================================
   K) LEGENDA OHLC + VOLUME (print 3)

   A legenda mostrava 4 valores numa linha só e transbordava; o "VOL"
   ficava em cima das barras. Aqui:
     • legenda compacta, com tipografia menor e RÓTULOS curtos
     • volume com o rótulo numa faixa própria, à esquerda, sem sobrepor
   ========================================================================== */
.chart-panel .chart-legend {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 26px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  background: rgba(0, 0, 0, .16) !important;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #7D8798 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums !important;
  flex: 0 0 26px !important;
  box-sizing: border-box !important;
}

.chart-panel .chart-legend > span,
.chart-panel .chart-legend > b,
.chart-panel .chart-legend > i {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}

/* o último item da legenda (variação) ganha uma pílula compacta */
.chart-panel .chart-legend > *:last-child {
  margin-left: auto !important;
  padding: 2px 6px !important;
  border-radius:5px !important;
  font-weight: 800 !important;
}

@media (max-width: 420px) {
  .chart-panel .chart-legend { gap: 7px !important; padding: 0 8px !important; }
  .chart-panel .chart-legend > span,
  .chart-panel .chart-legend > b,
  .chart-panel .chart-legend > i { font-size: 9.5px !important; }
}

@media (max-width: 360px) {
  /* em telas muito estreitas mostra só preço + variação */
  .chart-panel .chart-legend > *:nth-child(2),
  .chart-panel .chart-legend > *:nth-child(3) { display: none !important; }
}

/* "VOL" numa faixa própria, sem colidir com as barras */
.chart-panel .cm-vol-tag {
  position: absolute !important;
  left: 10px !important;
  bottom: 26px !important;
  z-index: 3 !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, .42) !important;
  background: rgba(7, 11, 18, .82) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  pointer-events: none !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   L) LEGENDA OHLC — o app reescreve o innerHTML (print 4)

   Medido em produção: .chart-legend não tem seta própria, o app injeta
   4 nós soltos em sequência. Quando o CSS pinta todos com a mesma cor,
   os números ficam ilegíveis (viram uma "tarja" escura).

   Aqui a legenda vira uma FAIXA de chips: cada valor num chip próprio,
   com o primeiro destacado (último preço) e a variação colorida.
   ========================================================================== */
.chart-panel .chart-legend {
  gap: 6px !important;
  padding: 0 8px !important;
  background: rgba(8, 12, 19, .55) !important;
  color: #93A0B2 !important;
}

/* cada nó solto (texto) -> chip; usa seletores de conteúdo */
.chart-panel .chart-legend > span,
.chart-panel .chart-legend > b,
.chart-panel .chart-legend > i,
.chart-panel .chart-legend > em {
  padding: 2px 6px !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .05) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #A8B4C4 !important;
}

/* o app pode usar nós de texto puros: nesse caso o chip é o próprio
   contêiner — espaçamento horizontal resolve a leitura */
.chart-panel .chart-legend { word-spacing: 2px !important; }

/* variação: pílula colorida (último elemento) */
.chart-panel .chart-legend > *:last-child {
  background: rgba(14, 203, 129, .12) !important;
  border-color: rgba(14, 203, 129, .26) !important;
  color: #0ECB81 !important;
}

/* VOL como rótulo próprio, fora do canvas, na faixa da legenda */
.chart-panel .cm-vol-tag {
  position: static !important;
  margin-left: auto !important;
  font-size: 7.5px !important;
  letter-spacing: .1em !important;
  color: rgba(148, 163, 184, .40) !important;
  background: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   M) RESPONSIVIDADE REAL DO GRÁFICO
   O canvas agora é dimensionado por chart-responsive.js (ResizeObserver +
   DPR + altura por faixa). Aqui cuidamos apenas da MOLDURA e da densidade
   visual em cada tamanho de tela: 360 → ultrawide.

   Importante: não fixamos height aqui — o JS é a fonte de verdade.
   ========================================================================== */

/* ---------- base: o canvas usa o tamanho dado pelo JS ---------- */
.chart-panel > canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  image-rendering: auto;
  contain: strict;
  will-change: transform;
}

/* ==========================================================================
   MOBILE PEQUENO (≤ 380px)
   ========================================================================== */
@media (max-width: 380px) {
  .chart-panel {
    border-radius: 12px !important;
    border-color: rgba(255, 255, 255, .07) !important;
  }

  .chart-panel::before { height: 1px; opacity: .75; }

  .chart-panel .chart-toolbar {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 7px !important;
  }

  .chart-panel .chart-tfs { height: 30px !important; padding: 2px !important; }
  .chart-panel .chart-tf { height: 24px !important; font-size: 9.5px !important; }

  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child { width: 30px !important; min-width: 30px !important; height: 30px !important; }
}

/* ==========================================================================
   MOBILE (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {
  .chart-panel {
    /* o card respira nas laterais, sem colar na borda da tela */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 14px !important;
  }

  .chart-panel > canvas { border-radius: 0 0 13px 13px !important; }
}

/* ==========================================================================
   TABLET (901 – 1279px)
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1279px) {
  .chart-panel {
    border-radius: 16px !important;
  }

  .chart-panel .chart-toolbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 12px !important;
  }

  .chart-panel .chart-tfs { height: 34px !important; max-width: 340px !important; }
  .chart-panel .chart-tf { height: 28px !important; font-size: 10.5px !important; }
}

/* ==========================================================================
   DESKTOP (1280 – 1799px)
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1799px) {
  .chart-panel {
    border-radius: 18px !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .05) inset,
      0 -1px 0 rgba(0, 0, 0, .5) inset,
      0 30px 60px -40px rgba(0, 0, 0, .95) !important;
  }

  .chart-panel .chart-toolbar {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 16px !important;
  }

  .chart-panel .chart-tfs { height: 38px !important; max-width: 400px !important; }
  .chart-panel .chart-tf { height: 30px !important; font-size: 11.5px !important; padding: 0 6px !important; }

  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child {
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 10px !important;
  }
}

/* ==========================================================================
   GRANDE (1800 – 2199px)
   ========================================================================== */
@media (min-width: 1800px) and (max-width: 2199px) {
  .chart-panel {
    border-radius: 20px !important;
  }

  .chart-panel .chart-toolbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 20px !important;
  }

  .chart-panel .chart-tfs { height: 42px !important; max-width: 460px !important; }
  .chart-panel .chart-tf { height: 34px !important; font-size: 12.5px !important; padding: 0 9px !important; }

  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child {
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   ULTRAWIDE (≥ 2200px — 2560 / 3440 / 5120)
   ========================================================================== */
@media (min-width: 2200px) {
  .chart-panel {
    border-radius: 22px !important;
    border-color: rgba(255, 255, 255, .09) !important;
  }

  /* a borda superior fica mais presente em telas grandes */
  .chart-panel::before { height: 2px; opacity: 1; }

  .chart-panel .chart-toolbar {
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 24px !important;
    gap: 16px !important;
  }

  .chart-panel .chart-tfs {
    height: 46px !important;
    max-width: 560px !important;
    padding: 4px !important;
    gap: 3px !important;
  }

  .chart-panel .chart-tf {
    height: 36px !important;
    font-size: 13.5px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
  }

  .chart-panel .cm-book-btn,
  .chart-panel .chart-toolbar > *:last-child {
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }

  .chart-panel .cm-book-btn svg,
  .chart-panel .chart-toolbar > *:last-child svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* glow mais amplo, proporcional à área */
  .chart-panel::after {
    box-shadow:
      0 0 0 1px rgba(56,107,255, .07) inset,
      0 0 60px rgba(56,107,255, .05) inset;
  }
}

/* ==========================================================================
   TELAS BAIXAS (landscape de notebook / janela pequena)
   ========================================================================== */
@media (max-height: 700px) and (min-width: 901px) {
  .chart-panel .chart-toolbar { height: 46px !important; min-height: 46px !important; }
  .chart-panel .chart-tfs { height: 32px !important; }
  .chart-panel .chart-tf { height: 26px !important; font-size: 10.5px !important; }
}

/* ==========================================================================
   ALTO CONTRASTE / MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .chart-panel > canvas { will-change: auto; }
}

@media (prefers-contrast: more) {
  .chart-panel { border-color: rgba(255, 255, 255, .18) !important; }
  .chart-panel .chart-tf { color: #B6BFCC !important; }
  .chart-panel .chart-tf.active { color: #5C86FF !important; }
}

/* ==========================================================================
   N) ULTRAWIDE: o container estava limitado a 1600px

   MEDIDO em 3440×1440:
     .trade-main  w=1320  (max-width:1600 no pai)
     colunas      290px | 706px | 300px
     → 2.000px de tela desperdiçados; o gráfico ficava com 706px

   Aqui o layout cresce com a tela, com colunas proporcionais:
     ultrawide:  livro 16%  |  gráfico 60%  |  ordem 24%
     2560:       livro 18%  |  gráfico 58%  |  ordem 24%
     1920:       livro 18%  |  gráfico 56%  |  ordem 26%
   ========================================================================== */

/* libera o limite em telas grandes */
@media (min-width: 1800px) {
  .trade-main,
  .trade-main--desktop,
  body .trade-main,
  body > main.trade-main {
    max-width: none !important;
    width: 100% !important;
  }

  /* libera também qualquer wrapper imediato com max-width fixo */
  .trade-main { margin-left: auto !important; margin-right: auto !important; }
}

/* ==========================================================================
   GRID RESPONSIVO POR FAIXA
   ========================================================================== */

/* notebooks grandes / Full HD */
@media (min-width: 1600px) and (max-width: 1999px) {
  .trade-main {
    display: grid !important;
    grid-template-columns: minmax(220px, 18%) minmax(0, 1fr) minmax(280px, 26%) !important;
    gap: 14px !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 1920 – 2299 */
@media (min-width: 2000px) and (max-width: 2299px) {
  .trade-main {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) 320px !important;
    gap: 16px !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 2300 – 2999 (2560 QHD) */
@media (min-width: 2300px) and (max-width: 2999px) {
  .trade-main {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) 380px !important;
    gap: 18px !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 3000+ (3440 ultrawide, 5120 super ultrawide) */
@media (min-width: 3000px) {
  .trade-main {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) 460px !important;
    gap: 22px !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* o gráfico ganha ainda mais altura */
  .chart-panel { min-height: 720px !important; }
}

/* ==========================================================================
   ORDEM: em telas grandes o formulário ocupa a coluna inteira
   ========================================================================== */
@media (min-width: 1600px) {
  .order-panel {
    align-self: start !important;
    position: sticky !important;
    top: 16px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }

  .book-panel {
    align-self: start !important;
    position: sticky !important;
    top: 16px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   O canvas acompanha a largura real do card em qualquer faixa
   (o JS usa ResizeObserver; isto é só para garantir no CSS)
   ========================================================================== */
.chart-panel,
.chart-panel > canvas {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   O) RAIZ DO LIMITE: .trade-wrap tinha max-width: 1600px

   MEDIDO em 3440×1440:
     BODY        3440  ✓
     MAIN.trade-wrap  1542  ← max-width:1600 (aqui o corte)
     DIV.trade-main   1506

   Liberando o wrapper, o gráfico usa toda a largura disponível.
   ========================================================================== */
@media (min-width: 1600px) {
  .trade-wrap,
  main.trade-wrap,
  body > .trade-wrap,
  body.page > .trade-wrap {
    max-width: none !important;
    width: 100% !important;
  }
}

/* o conteúdo respira nas laterais sem esticar demais as colunas */
@media (min-width: 3000px) {
  .trade-wrap {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 3840px) {
  .trade-wrap {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ==========================================================================
   Q) GRID DESKTOP: o gráfico deve ser a coluna ELÁSTICA

   MEDIDO em 1366×768:
     grid-template-columns: 290px | 264px | 300px
     → o gráfico ficava com a MENOR coluna (264px), espremido entre
       livro (290) e ordem (300)

   Correção: livro e ordem têm largura fixa; o gráfico recebe o resto.
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1599px) {
  .trade-main {
    display: grid !important;
    grid-template-columns: 280px minmax(320px, 1fr) 300px !important;
    gap: 14px !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .trade-main > .chart-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .trade-main > .chart-panel > canvas {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* livro e ordem com largura estável */
  .trade-main > .book-panel { width: 280px !important; max-width: 280px !important; }
  .trade-main > .order-panel { width: 300px !important; max-width: 300px !important; }
}

/* ==========================================================================
   R) TELAS MÉDIAS (1024–1365): 2 colunas — gráfico + ordem (livro abaixo)
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1365px) {
  .trade-main {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    grid-template-areas:
      "chart order"
      "book  order" !important;
  }

  .trade-main > .chart-panel { grid-area: chart !important; }
  .trade-main > .order-panel { grid-area: order !important; }
  .trade-main > .book-panel  { grid-area: book !important; width: 100% !important; max-width: none !important; }
}