/* ==========================================================================
   AXIONMESK — TRADE mobile v3 (acabamento visual)
   - candles mais largos e definidos
   - cards com contorno sutil
   - espaço inferior correto
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CARDS DE ESTATÍSTICA — contorno discreto e fundo consistente
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  .trade-page .pbs {
    background: #16191F !important;
    border: 1px solid rgba(255, 255, 255, .04) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 10px 11px !important;
  }

  .trade-page .pbs span {
    color: #6F7784 !important;
    font-size: 8.8px !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
  }

  .trade-page .pbs b {
    color: #ECEFF3 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
  }

  /* ------------------------------------------------------------------------
     2) GRÁFICO — mais área útil e candles definidos
     ------------------------------------------------------------------------ */
  .trade-page .chart-panel {
    background: #101317 !important;
    border: 1px solid rgba(255, 255, 255, .04) !important;
  }

  /* canvas com mais altura para os candles respirarem */
  .trade-page #chart {
    height: 320px !important;
  }

  /* ------------------------------------------------------------------------
     3) PASSO INFERIOR — nada cortado pela bottom nav
     ------------------------------------------------------------------------ */
  body.trade-page .trade-main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.trade-page .orders-panel {
    margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* a última seção visível ganha folga */
  body.trade-page .order-panel + .orders-panel,
  body.trade-page .trade-main > section:last-of-type {
    padding-bottom: 8px !important;
  }

  /* bottom nav sólida, sem transparência sobre o conteúdo */
  body.trade-page #bottomNav {
    background: #0B1220 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .6) !important;
  }

  /* ------------------------------------------------------------------------
     4) Barras de rolagem invisíveis
     ------------------------------------------------------------------------ */
  .trade-page ::-webkit-scrollbar { width: 0; height: 0; }
}

/* --------------------------------------------------------------------------
   5) Telas pequenas
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .trade-page #chart { height: 285px !important; }
  .trade-page .pbs b { font-size: 12.5px !important; }
  .trade-page .pbs span { font-size: 8.2px !important; }
}

/* ==========================================================================
   CORREÇÃO: espaço real para a bottom nav no fim do Trade
   ========================================================================== */
@media (max-width: 900px) {

  /* O ultimo bloco (ultimo/variacao + ordens) precisa de folga real */
  body.trade-page .trade-main {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Qualquer painel final ganha margem extra */
  body.trade-page .trade-main > *:last-child,
  body.trade-page .order-panel,
  body.trade-page .orders-panel {
    margin-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Espaçador no fim do documento, independente da estrutura */
  body.trade-page::after {
    content: "";
    display: block;
    height: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 100%;
  }
}