/* Grade de painéis arrastável das telas de negociação — a aparência.
 *
 * A geometria (posição, largura, altura) sai do `grade-painel.js`, em `style`
 * inline com `!important`: é o único jeito de vencer o `terminal.css`, que
 * também usa `!important` para desfazer o pixel congelado da captura. Aqui
 * ficam só as peças que o motor não calcula — punho, alça, fantasma e o botão
 * de restaurar.
 */

/* O bloco precisa CORTAR o que passa da altura escolhida. Sem isto, encolher
 * um painel não o encolhe: o conteúdo transborda por baixo e cobre o vizinho,
 * e a pessoa acha que o arrasto não funcionou. */
.oc-grade-viva > .oc-grade-bloco {
  overflow: hidden;
  box-sizing: border-box;
}
.oc-grade-viva > .oc-grade-bloco > [class*="-wrapper"],
.oc-grade-viva > .oc-grade-bloco > [class*="-wrap"],
.oc-grade-viva > .oc-grade-bloco > .position-panel {
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
  overflow: auto;
}

/* ── punho (arrastar) ─────────────────────────────────────────────────────
 *
 * No canto SUPERIOR direito e apagado até o ponteiro chegar perto: a tela é de
 * operar, não de arrumar móveis. Aparece inteiro no hover do bloco e no foco
 * por teclado. */
[dir] .oc-grade-viva .oc-grade-punho {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa0a6;
  cursor: grab;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    background-color 0.12s ease;
  touch-action: none;
}
.oc-grade-viva .oc-grade-punho::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  /* Seis pontos — o desenho universal de "pegue por aqui". */
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 5px 5px;
  background-position: 0 0;
}
.oc-grade-viva .oc-grade-bloco:hover > .oc-grade-punho,
.oc-grade-viva .oc-grade-punho:focus-visible {
  opacity: 1;
}
[dir] .oc-grade-viva .oc-grade-punho:hover {
  background: rgba(247, 147, 26, 0.18);
  color: var(--offcode-brand, #f7931a);
}
.oc-grade-viva .oc-grade-na-mao .oc-grade-punho {
  opacity: 1;
  cursor: grabbing;
}

/* ── alça (redimensionar) ─────────────────────────────────────────────────
 *
 * A da captura já mora no canto inferior direito de cada bloco; aqui ela ganha
 * tamanho de alvo e a seta certa. Estava lá desde o primeiro dia, sem fazer
 * nada. */
[dir] .oc-grade-viva .oc-grade-medir {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 18px;
  height: 18px;
  display: block;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.12s ease;
  touch-action: none;
  background: none;
}
.oc-grade-viva .oc-grade-medir::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #9aa0a6;
}
.oc-grade-viva .oc-grade-bloco:hover > .oc-grade-medir {
  opacity: 1;
}
.oc-grade-viva .oc-grade-medir:hover::after {
  color: var(--offcode-brand, #f7931a);
}

/* O bloco na mão flutua sobre os outros e perde a transição, para não
 * "escorregar" atrás do cursor. */
.oc-grade-viva .oc-grade-na-mao {
  z-index: 30;
  opacity: 0.92;
  transition: none !important;
}
.oc-grade-viva.oc-grade-mexendo {
  user-select: none;
}
/* Enquanto se mexe, o gráfico e o livro não recebem o ponteiro: sem isto o
 * <canvas> das velas engole o `pointermove` e o bloco trava no meio do
 * caminho. */
.oc-grade-viva.oc-grade-mexendo .oc-grade-bloco * {
  pointer-events: none;
}
.oc-grade-viva.oc-grade-mexendo .oc-grade-punho,
.oc-grade-viva.oc-grade-mexendo .oc-grade-medir {
  pointer-events: auto;
}

/* ── fantasma ─────────────────────────────────────────────────────────────
 *
 * O retângulo que mostra ONDE o bloco vai cair. É o `.vue-grid-placeholder` /
 * `.vgl-item--placeholder` da própria captura, que sem Vue nunca aparecia. */
[dir] .oc-grade-viva .oc-grade-lugar {
  z-index: 5;
  border-radius: 8px;
  background: rgba(247, 147, 26, 0.14);
  border: 1px dashed rgba(247, 147, 26, 0.55);
  pointer-events: none;
  transition: none !important;
}

/* ── restaurar ────────────────────────────────────────────────────────────
 *
 * No rodapé da grade, discreto, e SÓ quando há arranjo salvo para desfazer —
 * botão que não faz nada é ruído numa tela de operar. */
[dir] .oc-grade-viva .oc-grade-restaurar {
  position: absolute;
  right: 0;
  bottom: 4px;
  z-index: 15;
  height: 24px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #9aa0a6;
  font-family: inherit;
  font-size: 11px;
  line-height: 22px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-grade-viva .oc-grade-restaurar:hover {
  border-color: var(--offcode-brand, #f7931a);
  color: var(--offcode-brand, #f7931a);
}