/* ==========================================================================
   AXIONMESK — ORDENS NO MOBILE (redesenho)

   PROBLEMAS MEDIDOS em 390×844:
     • as 3 abas somam 420px em uma faixa de 358px → "Minhas negociações"
       cortada no meio ("Min|")
     • a aba ativa parecia um botão solto, sem relação com o painel
     • o vazio era um retângulo cinza sem personalidade
     • a tabela de 8 colunas não caberia de forma alguma

   SOLUÇÃO:
     1. abas em segmento com indicador deslizante (rolagem horizontal suave)
     2. contador numérico em pílula
     3. estado vazio ilustrado, com ícone e ação
     4. ordens como CARTÕES (não tabela), com hierarquia clara
     5. entrada animada em cascata
   ========================================================================== */

@media (max-width: 900px) {

  /* ======================================================================
     1) PAINEL
     ====================================================================== */
  .orders-panel {
    position: relative !important;
    padding: 0 !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(56,107,255, .045), transparent 60%),
      linear-gradient(180deg, #0E141D, #0A0F17) !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.045) inset,
      0 18px 40px -30px rgba(0,0,0,.95) !important;
    overflow: hidden !important;
  }

  /* filete luminoso no topo — assinatura da marca */
  .orders-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent, rgba(56,107,255,.5) 25%, rgba(14,203,129,.42) 75%, transparent);
    pointer-events: none;
    z-index: 2;
  }

  /* ======================================================================
     2) ABAS — segmento com rolagem e indicador
     ====================================================================== */
  .orders-tabs {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;

    margin: 0 !important;
    padding: 5px !important;
    height: 50px !important;
    box-sizing: border-box !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;

    background: rgba(0, 0, 0, .26) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
  }

  .orders-tabs::-webkit-scrollbar { display: none; }

  /* indicador deslizante (inserido pelo JS) */
  .orders-tabs .cm-otab-ind {
    position: absolute;
    top: 5px;
    left: 0;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(56,107,255,.20), rgba(56,107,255,.085));
    box-shadow:
      0 0 0 1px rgba(56,107,255,.32) inset,
      0 3px 12px -6px rgba(56,107,255,.6);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: transform .30s cubic-bezier(.22,1,.36,1),
                width .30s cubic-bezier(.22,1,.36,1);
  }

  .orders-tabs .cm-otab-ind.is-on { opacity: 1; }

  .orders-tab {
    position: relative !important;
    z-index: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    flex: 0 0 auto !important;
    height: 40px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;

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

    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .12s ease !important;
  }

  .orders-tab:active { transform: scale(.97) !important; }

  .orders-tab.active {
    color: #5C86FF !important;
  }

  /* contador em pílula */
  .orders-tab #openCount,
  .orders-tab .cm-otab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 17px !important;
    padding: 0 5px !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,.09) !important;
    color: #9AA4B2 !important;
    font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease !important;
  }

  .orders-tab.active #openCount,
  .orders-tab.active .cm-otab-count {
    background: rgba(56,107,255,.20) !important;
    color: #386BFF !important;
  }

  /* ======================================================================
     3) ESTADO VAZIO — ilustrado e com ação
     ====================================================================== */
  .orders-panel .table-wrap { border: 0 !important; }

  .orders-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 34px 22px 30px !important;
    gap: 4px !important;
    animation: cmOrdFade .34s ease both;
  }

  .orders-empty__ico {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    background: linear-gradient(165deg, rgba(56,107,255,.13), rgba(56,107,255,.035));
    border: 1px solid rgba(56,107,255,.22);
    box-shadow: 0 8px 22px -14px rgba(56,107,255,.5);
    color: #386BFF;
  }

  .orders-empty__ico svg { width: 24px; height: 24px; display: block; }

  .orders-empty__ico.is-verde {
    background: linear-gradient(165deg, rgba(14,203,129,.13), rgba(14,203,129,.03));
    border-color: rgba(14,203,129,.24);
    color: #0ECB81;
    box-shadow: 0 8px 22px -14px rgba(14,203,129,.5);
  }

  .orders-empty__ico.is-azul {
    background: linear-gradient(165deg, rgba(59,130,246,.13), rgba(59,130,246,.03));
    border-color: rgba(59,130,246,.24);
    color: #60A5FA;
    box-shadow: 0 8px 22px -14px rgba(59,130,246,.5);
  }

  .orders-empty b {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #F5F7FA !important;
    letter-spacing: -.01em;
    line-height: 1.25;
  }

  .orders-empty p {
    margin: 3px 0 0 !important;
    max-width: 250px;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #8996AA !important;
  }

  .orders-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    background: linear-gradient(135deg, #5C86FF, #386BFF);
    color: #221900;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    border: 0;
    box-shadow: 0 8px 20px -10px rgba(56,107,255,.65);
    transition: transform .12s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .orders-empty__btn:active { transform: scale(.97); filter: brightness(1.05); }

  /* ======================================================================
     4) CARTÕES DE ORDEM (substituem a tabela de 8 colunas)
     ====================================================================== */
  .orders-panel .tabela-cards { display: block !important; }

  .orders-panel .tabela-cards thead { display: none !important; }

  .orders-panel .tabela-cards tbody {
    display: block !important;
    padding: 10px !important;
  }

  /* cada linha vira cartão */
  .orders-panel .tabela-cards tbody tr.cm-ord {
    display: block !important;
    position: relative;
    margin-bottom: 9px;
    padding: 13px 14px 13px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
    animation: cmOrdIn .32s cubic-bezier(.22,1,.36,1) both;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .16s ease, background .16s ease, transform .12s ease;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord:last-child { margin-bottom: 0; }

  .orders-panel .tabela-cards tbody tr.cm-ord:active {
    transform: scale(.99);
    border-color: rgba(56,107,255,.32) !important;
    background: linear-gradient(168deg, rgba(56,107,255,.10), rgba(56,107,255,.02)) !important;
  }

  /* faixa lateral por lado */
  .orders-panel .tabela-cards tbody tr.cm-ord::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: #F6465D;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord.is-buy::before { background: #0ECB81; }

  /* todas as células viram blocos */
  .orders-panel .tabela-cards tbody tr.cm-ord > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 12px;
    color: #C5CBD4;
  }

  /* cabeçalho do cartão: par + lado + status */
  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 11px !important;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-par {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #F5F7FA !important;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-lado {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: .045em;
    background: rgba(246,70,93,.15);
    color: #F6465D;
    line-height: 1;
    white-space: nowrap;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord.is-buy .cm-ord-lado {
    background: rgba(14,203,129,.15);
    color: #0ECB81;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-status {
    margin-left: auto !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    background: rgba(56,107,255,.13) !important;
    color: #386BFF !important;
    white-space: nowrap;
    line-height: 1;
  }

  /* grade de dados */
  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px 12px !important;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-grid span {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #8996AA !important;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-grid b {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    color: #F5F7FA !important;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* data discreta no rodapé */
  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-date {
    margin-top: 9px !important;
    font-size: 10.5px !important;
    color: #59606B !important;
    font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
    letter-spacing: .02em;
  }

  /* botão de cancelar */
  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-acao {
    margin-top: 11px !important;
    width: 100% !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(246,70,93,.28) !important;
    background: rgba(246,70,93,.09) !important;
    color: #FF8494 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-acao:active {
    transform: scale(.98);
    background: rgba(246,70,93,.17) !important;
    border-color: rgba(246,70,93,.48) !important;
  }

  /* ======================================================================
     5) CONTAGEM TOTAL no cabeçalho do painel
     ====================================================================== */
  .orders-panel .cm-ord-head {
    display: none;
  }

  /* ======================================================================
     6) ANIMAÇÕES
     ====================================================================== */
  @keyframes cmOrdIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes cmOrdFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* cascata nos cartões */
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(1) { animation-delay: 0ms; }
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(2) { animation-delay: 40ms; }
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(3) { animation-delay: 80ms; }
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(4) { animation-delay: 120ms; }
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(5) { animation-delay: 160ms; }
  .orders-panel .tabela-cards tbody tr.cm-ord:nth-child(n+6) { animation-delay: 190ms; }
}

/* ======================================================================
   7) TELAS MUITO ESTREITAS
   ====================================================================== */
@media (max-width: 380px) {
  .orders-tab {
    padding: 0 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-grid {
    gap: 8px 10px !important;
  }

  .orders-empty { padding: 28px 16px 24px !important; }
}

/* ======================================================================
   8) ACESSIBILIDADE
   ====================================================================== */
@media (max-width: 900px) {
  .orders-tab:focus-visible,
  .orders-empty__btn:focus-visible,
  .orders-panel .tabela-cards tbody tr.cm-ord .cm-ord-acao:focus-visible {
    outline: 2px solid rgba(56,107,255, .7);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .orders-tabs .cm-otab-ind,
    .orders-panel .tabela-cards tbody tr.cm-ord,
    .orders-empty {
      transition: none !important;
      animation: none !important;
    }
  }
}

/* ==========================================================================
   9) RÓTULOS CURTOS NO MOBILE

   MEDIDO: as 3 abas somam 474px numa faixa de 358px (overflow 101px).
   Rótulos completos não cabem em 390px nem em 430px.

   Solução: rótulo curto visível + texto completo no title/aria.
   Ex.: "Ordens abertas" → "Abertas" · "Histórico de ordens" → "Histórico"
        "Minhas negociações" → "Negociações"
   ========================================================================== */
@media (max-width: 900px) {
  .orders-tab {
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  /* reserva espaço para os 3 rótulos curtos caberem com folga */
  .orders-tabs { gap: 3px !important; }
}

@media (max-width: 420px) {
  .orders-tab {
    flex: 1 1 0 !important;      /* divide a largura igualmente */
    padding: 0 6px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .orders-tabs {
    padding: 5px !important;
    overflow-x: hidden !important;
  }

  /* em telas muito estreitas, o contador fica mais discreto */
  .orders-tab #openCount,
  .orders-tab .cm-otab-count {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
  }
}

@media (max-width: 360px) {
  .orders-tab { font-size: 10.5px !important; padding: 0 4px !important; }
}

/* ==========================================================================
   10) CORREÇÕES DA IMAGEM (390×844)

   a) "Abertas (0)" — o contador herdou a cor do rótulo e ficou ilegível
   b) faixa preta de ~300px entre o painel de ordem e as abas
   c) o cartão de ordens ficava atrás da barra inferior
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- a) contador com contraste próprio ---- */
  .orders-tab.active #openCount,
  .orders-tab.active .cm-otab-count {
    background: rgba(56,107,255, .22) !important;
    color: #5C86FF !important;
  }

  .orders-tab #openCount,
  .orders-tab .cm-otab-count {
    color: #8996AA !important;
  }

  /* separa o rótulo do contador */
  .orders-tab #openCount,
  .orders-tab .cm-otab-count { margin-left: 1px !important; }

  /* ---- b) remove a faixa morta entre os painéis ---- */
  .trade-main {
    gap: 10px !important;
  }

  .trade-main > .orders-panel {
    margin-top: 0 !important;
  }

  /* o painel de ordem não deve criar respiro extra no fim */
  .order-panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .order-panel .order-balance { margin-bottom: 10px !important; }

  /* a área de ordens encosta no painel anterior */
  .orders-panel {
    margin-top: 0 !important;
  }

  /* ---- c) respiro suficiente para a barra inferior ---- */
  .trade-main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

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

/* ==========================================================================
   11) ESPAÇO INTERNO DO VAZIO um pouco menor (evita cartão muito alto)
   ========================================================================== */
@media (max-width: 900px) {
  .orders-empty {
    padding: 26px 20px 24px !important;
  }

  .orders-empty__ico {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
  }

  .orders-empty__ico svg { width: 21px !important; height: 21px !important; }
}

/* ==========================================================================
   12) ELIMINA O VÃO DE 202px ENTRE O PAINEL DE ORDEM E AS ORDENS

   MEDIDO (390×844):
     .order-panel   y=662  h=753  bottom=1415  margin-bottom:40px
     .orders-panel  y=1617
     → vão real de 202px (40 de margem + ~160 de um espaçador invisível)
   ========================================================================== */
@media (max-width: 900px) {

  .trade-main { gap: 10px !important; }

  /* zera qualquer margem no painel de ordem */
  .trade-main > .order-panel {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* remove espaçadores vazios (elementos sem conteúdo e sem altura útil) */
  .trade-main > *:not(.chart-panel):not(.order-panel):not(.orders-panel):not(.book-panel) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* as ordens encostam no painel acima */
  .trade-main > .orders-panel {
    margin-top: 0 !important;
  }

  /* respiro abaixo do painel de ordem é responsabilidade do formulário */
  .order-panel .auth-msg,
  .order-panel .order-balance {
    margin-bottom: 10px !important;
  }
}

/* ==========================================================================
   13) VÃO DEFINITIVO — era o padding-bottom do .trade-main

   MEDIDO: .trade-main h=1315, mas os filhos somam ~980.
   O padding-bottom (reserva para a barra inferior) empurrava o painel
   de ordens 200px para baixo, criando a faixa preta.

   Correção: o padding fica no ÚLTIMO elemento, não no container.
   ========================================================================== */
@media (max-width: 900px) {
  .trade-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* o painel de ordens é o último: ele reserva o espaço da barra fixa */
  .trade-main > .orders-panel {
    margin-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* se o painel de ordens estiver oculto, o respiro vai para o painel de ordem */
  .trade-main > .order-panel:last-child {
    margin-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}