/* ============================================================
 * M09 Graph Lógico — Controles de mouse (overlay + context menu)
 * Compartilhado entre 2D (.g2d-*) e 3D (.g3d-*) via classes neutras
 * prefixadas `.g-ctrl-hint` e `.g-ctxmenu`.
 * ============================================================ */

/* ---------- Overlay de ajuda de controles ---------- */
.g-ctrl-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.g-ctrl-hint__toggle,
.g-ctrl-hint__panel,
.g-ctrl-hint__panel * {
  pointer-events: auto;
}

.g-ctrl-hint__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #0f4f7a;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #b8cfde;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.g-ctrl-hint__toggle:hover,
.g-ctrl-hint__toggle[aria-expanded="true"] {
  background: #0f4f7a;
  color: #fff;
  border-color: #0f4f7a;
}

.g-ctrl-hint__toggle i {
  font-size: 11px;
}

.g-ctrl-hint__label {
  font-size: 11px;
  letter-spacing: 0.2px;
}

.g-ctrl-hint__panel {
  max-width: 380px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #b8cfde;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  color: #1c3d59;
  font-size: 12px;
  line-height: 1.5;
}

.g-ctrl-hint__title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0f4f7a;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.g-ctrl-hint__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.g-ctrl-hint__list li {
  font-size: 12px;
  color: #1c3d59;
}

.g-ctrl-hint__list kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-family: inherit;
  font-weight: 600;
  color: #0f4f7a;
  background: #eaf2f8;
  border: 1px solid #c8d9e6;
  border-bottom-width: 2px;
  border-radius: 4px;
  margin-right: 4px;
}

/* No tema 3D (fundo escuro), reforça contraste do overlay */
.g3d-canvas .g-ctrl-hint__toggle {
  background: rgba(255, 255, 255, 0.94);
}

.g3d-canvas .g-ctrl-hint__panel {
  background: rgba(255, 255, 255, 0.97);
}

/* ---------- Menu de contexto (botão direito) ---------- */
.g-ctxmenu {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  padding: 6px 0;
  background: #ffffff;
  border: 1px solid #b8cfde;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-user-select: none;
  user-select: none;
}

.g-ctxmenu[hidden] {
  display: none;
}

.g-ctxmenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #1c3d59;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.g-ctxmenu__item:hover,
.g-ctxmenu__item:focus-visible {
  background: #eaf2f8;
  color: #0f4f7a;
  outline: none;
}

.g-ctxmenu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.g-ctxmenu__item i {
  width: 14px;
  font-size: 12px;
  color: #0f4f7a;
}

.g-ctxmenu__sep {
  height: 1px;
  background: #dbe6ee;
  margin: 4px 0;
}

/* ---------- Cursores semânticos do canvas (2D + 3D) ----------
 * O ponteiro comunica a ação disponível antes do clique:
 *   idle        → grab       (pode arrastar o grafo / pan)
 *   panning     → grabbing   (pan do FUNDO em andamento — LMB ou middle)
 *   node        → pointer    (entidade clicável)
 *   node-grab   → mão aberta + 4 setas (hover sobre entidade arrastável)
 *   node-drag   → mão fechada + 4 setas (entidade em arraste ativo)
 *   edge        → help       (aresta com tooltip)
 *   busy        → progress   (carregando ou renderizando)
 *
 * Isolamento total do canvas: dentro da área do stage, todo gesto de mouse
 * (roda, pan, arraste, seleção de texto, drag nativo de elementos, menu de
 * contexto do navegador) fica restrito ao grafo. As proteções são em camadas:
 *   • touch-action: none              → bloqueia gestos táteis de scroll/zoom
 *   • overscroll-behavior: contain    → impede scroll-chain na página pai
 *   • user-select: none               → arraste rápido não seleciona texto
 * (roda, middle-click, dragstart, selectstart e contextmenu recebem
 *  preventDefault no JS — cobre 100% dos navegadores, inclusive Firefox)
 *
 * As mãos são SVGs inline (hotspot 16 16, tamanho 32x32) com halo branco e
 * traço navy #0f4f7a para manter contraste em qualquer fundo (claro ou escuro).
 */
/* Variáveis globais dos cursores customizados (reutilizadas na legenda viva) */
:root {
  /* Mão ABERTA com 4 setas em volta — hover sobre entidade (pronto para arrastar) */
  --g-node-grab-cursor:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3V8M13.5 5.5L16 3L18.5 5.5'/%3E%3Cpath d='M16 29V24M13.5 26.5L16 29L18.5 26.5'/%3E%3Cpath d='M3 16H8M5.5 13.5L3 16L5.5 18.5'/%3E%3Cpath d='M29 16H24M26.5 13.5L29 16L26.5 18.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%230f4f7a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 3V8M13.5 5.5L16 3L18.5 5.5'/%3E%3Cpath d='M16 29V24M13.5 26.5L16 29L18.5 26.5'/%3E%3Cpath d='M3 16H8M5.5 13.5L3 16L5.5 18.5'/%3E%3Cpath d='M29 16H24M26.5 13.5L29 16L26.5 18.5'/%3E%3C/g%3E%3Cpath d='M10 17v-4a1.4 1.4 0 0 1 2.8 0v3m0-4a1.4 1.4 0 0 1 2.8 0v4m0-4a1.4 1.4 0 0 1 2.8 0v4m0-2a1.4 1.4 0 0 1 2.8 0v3a5 5 0 0 1-10 0' fill='white' stroke='%230f4f7a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
      16 16,
    grab;

  /* Mão FECHADA com 4 setas em volta — entidade em arraste ativo */
  --g-node-drag-cursor:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3V9M13 6L16 3L19 6'/%3E%3Cpath d='M16 29V23M13 26L16 29L19 26'/%3E%3Cpath d='M3 16H9M6 13L3 16L6 19'/%3E%3Cpath d='M29 16H23M26 13L29 16L26 19'/%3E%3C/g%3E%3Cg fill='none' stroke='%230f4f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3V9M13 6L16 3L19 6'/%3E%3Cpath d='M16 29V23M13 26L16 29L19 26'/%3E%3Cpath d='M3 16H9M6 13L3 16L6 19'/%3E%3Cpath d='M29 16H23M26 13L29 16L26 19'/%3E%3C/g%3E%3Cpath d='M11 14v5a5 5 0 0 0 10 0v-5a1.5 1.5 0 0 0-3 0v2m0-2a1.5 1.5 0 0 0-3 0v2m0-2a1.5 1.5 0 0 0-3 0' fill='white' stroke='%230f4f7a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
      16 16,
    grabbing;
}

.g2d-canvas-stage,
.g3d-canvas-stage {
  /* Garante captura de eventos em TODA a área do stage (inclusive regiões
     vazias sem grafo renderizado) */
  pointer-events: auto;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * Descendentes (canvas do ECharts/Three.js e wrappers internos) herdam
 * pointer-events e cursor do stage. Isso impede que o canvas interno
 * "engula" eventos em áreas vazias ou imponha seu próprio cursor.
 */
.g2d-canvas-stage *,
.g3d-canvas-stage * {
  pointer-events: inherit;
}

/*
 * Canvas internos herdam do stage — FORÇA OBRIGATÓRIA com !important.
 *
 * Motivo: ECharts e 3d-force-graph aplicam `style.cursor = '…'` INLINE direto no
 * <canvas> interno nas suas próprias rotinas de interação (ECharts usa 'default'
 * e 'pointer'; 3d-force-graph usa 'grab' e 'pointer'). Inline style tem
 * prioridade sobre regra CSS sem !important, então sem o !important o cursor
 * real visto pelo usuário seria o da biblioteca, não o definido por
 * [data-cursor="…"] no stage pai. O !important aqui é o único caminho para
 * neutralizar o cursor inline das libs e fazer o canvas herdar do stage.
 *
 * Também cobrimos qualquer <div> intermediária que as libs possam inserir
 * (ex.: wrapper do 3d-force-graph). Todo descendente direto ou indireto do
 * stage que porventura tenha cursor próprio é forçado a herdar.
 */
.g2d-canvas-stage,
.g2d-canvas-stage *,
.g3d-canvas-stage,
.g3d-canvas-stage * {
  cursor: inherit !important;
}

/* Restaura o cursor semântico exatamente no stage (raiz da cadeia).
   Idle = seta padrão do SO (não mão aberta) para não sugerir arraste onde não há elemento */
.g2d-canvas-stage {
  cursor: default !important;
}
.g3d-canvas-stage {
  cursor: default !important;
}
.g2d-canvas-stage[data-cursor="panning"],
.g3d-canvas-stage[data-cursor="panning"] {
  cursor: grabbing !important;
}
.g2d-canvas-stage[data-cursor="node"],
.g3d-canvas-stage[data-cursor="node"] {
  cursor: pointer !important;
}
.g2d-canvas-stage[data-cursor="node-grab"],
.g3d-canvas-stage[data-cursor="node-grab"] {
  cursor: var(--g-node-grab-cursor, grab) !important;
}
.g2d-canvas-stage[data-cursor="node-drag"],
.g3d-canvas-stage[data-cursor="node-drag"] {
  cursor: var(--g-node-drag-cursor, grabbing) !important;
}
.g2d-canvas-stage[data-cursor="edge"],
.g3d-canvas-stage[data-cursor="edge"] {
  cursor: help !important;
}
.g2d-canvas-stage[data-cursor="busy"],
.g3d-canvas-stage[data-cursor="busy"] {
  cursor: progress !important;
}

/* ---------- Tabela de controles dentro do painel de ajuda ---------- */
.g-ctrl-hint__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #1c3d59;
}

.g-ctrl-hint__table th,
.g-ctrl-hint__table td {
  text-align: left;
  padding: 4px 6px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f6;
}

.g-ctrl-hint__table th {
  font-size: 10px;
  font-weight: 700;
  color: #0f4f7a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #b8cfde;
}

.g-ctrl-hint__table tr:last-child td {
  border-bottom: none;
}

/* Ponteiro visual: ícone + nome CSS, ambos pequenos */
.g-ctrl-hint__ptr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #0f4f7a;
  white-space: nowrap;
}

.g-ctrl-hint__ptr i {
  font-size: 11px;
  width: 12px;
  text-align: center;
}

.g-ctrl-hint__ptr code {
  background: #eaf2f8;
  border: 1px solid #cfdfe8;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  color: #0f4f7a;
}

/* Legenda dedicada de ponteiros (tabela secundária) */
.g-ctrl-hint__legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #b8cfde;
}

.g-ctrl-hint__legend strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #0f4f7a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.g-ctrl-hint__legend table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.g-ctrl-hint__legend td {
  padding: 3px 6px;
  vertical-align: middle;
  border-bottom: 1px solid #f3f6f9;
}

.g-ctrl-hint__legend tr:last-child td {
  border-bottom: none;
}

/* Amostra viva do cursor: quadrado onde o próprio cursor real é exibido */
.g-ctrl-hint__sample {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid #cfdfe8;
  border-radius: 4px;
  background: repeating-linear-gradient(
    45deg,
    #f7fafc,
    #f7fafc 4px,
    #eef3f7 4px,
    #eef3f7 8px
  );
  vertical-align: middle;
}

.g-ctrl-hint__sample[data-ptr="grab"] {
  cursor: grab;
}
.g-ctrl-hint__sample[data-ptr="grabbing"] {
  cursor: grabbing;
}
.g-ctrl-hint__sample[data-ptr="pointer"] {
  cursor: pointer;
}
.g-ctrl-hint__sample[data-ptr="node-grab"] {
  cursor: var(--g-node-grab-cursor, grab);
}
.g-ctrl-hint__sample[data-ptr="node-drag"] {
  cursor: var(--g-node-drag-cursor, grabbing);
}
.g-ctrl-hint__sample[data-ptr="help"] {
  cursor: help;
}
.g-ctrl-hint__sample[data-ptr="progress"] {
  cursor: progress;
}
.g-ctrl-hint__sample[data-ptr="default"] {
  cursor: default;
}