/* ordens.css — formulário de ordem do spot.
 *
 * 🔑 O reset da captura prefixa toda regra com [dir], o que dá
 * especificidade (0,1,1) e vence qualquer seletor de uma classe só. Por
 * isso as regras daqui nascem com [dir] também — e a cor sai da RAIZ que
 * eu controlo, nunca herdada: o `body` da captura calcula rgb(0,0,0) numa
 * página escura, e texto preto em fundo escuro some sem erro nenhum.
 */

[dir] .oc-ord {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #f4f4f5;
  font-size: 13px;
}

/* As barras `.oc-ord-tipos` / `.oc-ord-lados` sairam em 23/08/2026 junto com
 * os botoes que elas vestiam: o painel passou a LIGAR os controles da origem
 * (`.mtb-base-p-item-wrap`, `.trade-tab-item`) em vez de desenhar outros
 * abaixo. Quem pinta o estado ativo agora e a folha da propria captura, pelas
 * classes `mtb-item-active` e `active-item-left/right`.
 *
 * 🔑 Duas folhas estilizando o mesmo controle discordam na primeira mudanca
 * de tema. A da origem ja existia — a nossa e que sobrava. */
[dir] .oc-ord-ligado {
  cursor: pointer;
}

[dir] .oc-ord-enviar {
  padding: 11px 12px;
  border: 0;
  border-radius: 6px;
  background: #00e08f;
  color: #06130d;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
[dir] .oc-ord-enviar.oc-venda {
  background: #ff4d4f;
  color: #1b0b0c;
}
[dir] .oc-ord-enviar:disabled {
  opacity: 0.6;
  cursor: default;
}

[dir] .oc-ord-nota {
  color: #8b8d95;
  font-size: 11px;
  line-height: 1.45;
}

[dir] .oc-ord-aviso {
  font-size: 12px;
  line-height: 1.45;
  color: #00e08f;
}
[dir] .oc-ord-aviso.oc-ruim {
  color: #ff4d4f;
}
[dir] .oc-ord-aviso:empty {
  display: none;
}

/* ── ordens abertas ─────────────────────────────────────────────────── */

[dir] .oc-ord-abertas {
  display: block;
  padding: 12px 14px;
  color: #f4f4f5;
  font-size: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
}

[dir] .oc-ord-abertas-titulo {
  color: #a1a1aa;
  font-size: 12px;
  margin-bottom: 8px;
}

[dir] .oc-ord-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #1f2027;
  white-space: nowrap;
}

[dir] .oc-ord-par {
  font-weight: 600;
  min-width: 78px;
}
[dir] .oc-ord-tipo-tag {
  color: #a1a1aa;
  min-width: 86px;
}
[dir] .oc-ord-lado-tag.oc-compra {
  color: #00e08f;
}
[dir] .oc-ord-lado-tag.oc-venda {
  color: #ff4d4f;
}
[dir] .oc-ord-preco,
[dir] .oc-ord-qtd {
  font-variant-numeric: tabular-nums;
}
[dir] .oc-ord-preco {
  min-width: 96px;
}

[dir] .oc-ord-cancelar {
  margin-inline-start: auto;
  padding: 4px 10px;
  border: 1px solid #3f424c;
  border-radius: 5px;
  background: transparent;
  color: #a1a1aa;
  font-size: 11px;
  cursor: pointer;
}
[dir] .oc-ord-cancelar:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
[dir] .oc-ord-cancelar:disabled {
  opacity: 0.6;
  cursor: default;
}

[dir] .oc-ord-vazio {
  color: #8b8d95;
  padding: 10px 0;
}

/* ── histórico do spot como TABELA ────────────────────────────────────
 *
 * 04/09/2026: as abas `Order History` e `Trade History` passaram a listar de
 * verdade (ver `carregaHistorico`). Grade em vez de flex pelo mesmo motivo
 * do painel de futuros: no flex a largura da célula vem do conteúdo, e a
 * coluna de uma linha não cai sob a mesma coluna da linha de baixo.
 *
 * A caixa rola na horizontal; o `min-width` segura as colunas antes disso. */
[dir] [data-oc-ord-grade] .oc-ord-linha {
  display: grid;
  grid-template-columns: var(--oc-ord-cols);
  align-items: center;
  gap: 0 10px;
  min-width: 720px;
}
[dir] [data-oc-ord-grade] .oc-ord-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-ord-cab {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 0 6px;
  border-bottom: 1px solid #2a2c33;
  background: #0b0b0d;
  color: #6b6d75;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[dir] .oc-ord-col.oc-ord-par {
  font-weight: 600;
}
[dir] .oc-ord-col.oc-ord-tipo-col {
  color: #a1a1aa;
}
[dir] .oc-ord-col.oc-ord-hora {
  color: #6b6d75;
  font-size: 11px;
}
/* Par com a marca do token à esquerda (04/09). O nome corta com reticências
 * em vez de empurrar a coluna. */
[dir] .oc-ord-col.oc-ord-moeda {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
[dir] .oc-ord-moeda-logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
/* Substituto de quando não há arte: não finge ser a marca que falta. */
[dir] .oc-ord-moeda-mono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: hsl(var(--oc-h, 0), 62%, 62%);
  color: #16120b;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}
[dir] .oc-ord-moeda-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

[dir] .oc-ord-selo {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid #3f424c;
  border-radius: 4px;
  color: #8b8d95;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
[dir] .oc-ord-selo.oc-compra {
  border-color: rgba(0, 224, 143, 0.45);
  background: rgba(0, 224, 143, 0.1);
  color: #00e08f;
}
[dir] .oc-ord-selo.oc-venda {
  border-color: rgba(255, 77, 79, 0.45);
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}
/* A caixa do painel precisa rolar quando a tabela é mais larga que ela. */
[dir] .oc-ord-abertas-corpo {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Segundo passo da ordem a mercado: o botão troca de papel (cotar ->
 * confirmar) e precisa PARECER outro botão, senão a pessoa clica duas
 * vezes achando que o primeiro clique não pegou. */
[dir] .oc-ord-enviar.oc-confirmar {
  background: #f7931a;
  color: #1a1204;
}

/* ── saida automatica (take-profit / stop-loss) ───────────────────────────
 *
 * Uma caixa de marcar embaixo do valor e, quando marcada, dois precos. Fica
 * recolhida por padrao: a maioria das ordens nao pede protecao, e dois campos
 * vazios permanentes empurrariam o botao de enviar para fora da tela.
 * ⚠️ Nada de `rem`: a raiz do espelho e 13.33vw e 1rem vale ~240px.
 */
[dir] .oc-ord-saidas {
  margin: 10px 0 2px;
}

[dir] .oc-ord-saidas-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a1a1aa;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

[dir] .oc-ord-saidas-check {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #00e08f;
  cursor: pointer;
}

[dir] .oc-ord-saidas-campos {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
/* 🔑 `display: grid` ANULA o atributo `hidden` — o padrao so aplica
 * `display:none` a `[hidden]` numa regra de origem do agente, que qualquer
 * `display` explicito vence. Sem esta linha os campos nascem abertos. */
[dir] .oc-ord-saidas-campos[hidden] {
  display: none;
}

[dir] .oc-ord-saida-campo {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid #2a2c33;
  border-radius: 8px;
  background: #16171b;
}

/* 🔴 O rotulo tinha `min-width: 88px` e o campo do meio crescia livre: numa
 * coluna estreita a moeda da ponta era EMPURRADA para fora da caixa e ficava
 * cortada ("USD" no lugar de "USDC"). Rotulo encolhivel e o input com
 * `min-width: 0` mantem os tres dentro da linha. */
[dir] .oc-ord-saida-rotulo {
  flex: 0 1 auto;
  min-width: 0;
  color: #a1a1aa;
  font-size: 11px;
  white-space: nowrap;
}

[dir] .oc-ord-saida-campo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 13px;
  outline: none;
}

[dir] .oc-ord-saida-moeda {
  flex: 0 0 auto;
  color: #71717a;
  font-size: 11px;
}

/* O que vai ser criado quando a ordem encher. Discreto de proposito: e
 * informacao de conferencia, nao o dado principal da linha. */
[dir] .oc-ord-protecao {
  color: #71717a;
  font-size: 11px;
}

/* ── "Disponível 123,45 USDT ⊕" entre as abas e o preço (referência Bybit) ── */
.oc-ord-disp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #a8a8a8;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-ord-disp {
  margin: 0 0 8px;
}
.oc-ord-disp-rot {
  margin-right: auto;
  white-space: nowrap;
}
.oc-ord-disp-val {
  color: #e8eaf0;
  white-space: nowrap;
}

/* MÁX — enche o campo com o saldo inteiro (a barra em 100%). Discreto ao lado
 * do número: é atalho, não o dado principal da linha. */
[dir] .oc-ord-max {
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: rgba(247, 147, 26, 0.12);
  color: var(--offcode-brand, #f7931a);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
[dir] .oc-ord-max:hover {
  background: rgba(247, 147, 26, 0.24);
}

/* "100%" virou "MÁX" no fim da barra (celular, onde o botão não cabe na linha
 * do saldo). Ganha a cor da marca para ler como AÇÃO — os outros quatro
 * rótulos são escala. */
.ice-slider .mark-text.oc-ord-marca-max {
  color: var(--offcode-brand, #f7931a);
  font-weight: 700;
}
/* Rótulo flutuante do campo (a caixa da origem): `.ti-prefix-text` é
 * `position:absolute; top:6px` e o campo desce 9px com `.focus`/`.hasInput`.
 * Vazio e sem foco não há o que rotular, e o rótulo cairia SOBRE o texto do
 * campo — some, como na origem. O `ordens.js` põe e tira a marca. */
.ti-outer-wrap.oc-ord-vazio .ti-prefix-text {
  visibility: hidden;
}

/* 🔴 Dono, 04/09/2026, duas vezes: "centralize os números dentro da caixinha".
 * O `top: 9px` da origem existe para ABRIR ESPAÇO ao rótulo flutuante — e ele
 * dispara com `.focus` TAMBÉM, não só com `.hasInput`. Quantidade e Total vêm
 * da captura com o `<div>` do rótulo vazio: o número descia 9px por um rótulo
 * que ali não existe, ao digitar e enquanto o campo estivesse em foco.
 *
 * 🔑 Cancelado na FOLHA e não negando as classes no JS: `focus` é o que pinta
 * a borda branca do campo ativo. Tirar a classe para acertar a posição
 * apagaria a marca do foco junto — um conserto que quebra o vizinho. */
.ti-outer-wrap.oc-ord-sem-rotulo .tl-input-inner {
  top: 0 !important;
}

/* ⊕ fino (a mesma peça existe em terminal-movel.css para 1001x/grade no celular) */
[dir] .oc-mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #e6e6e6;
  cursor: pointer;
  border-radius: 50%;
}
[dir] .oc-mais::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 7px no-repeat;
}
[dir] .oc-mais:hover {
  color: var(--offcode-brand, #f7931a);
}