/* =============================================================
   Context Toolbar — shell global (.ctx-toolbar) + slots
   Layout estilo Canva: shell unico acima do canvas, sempre visivel.
   Slot `.gtb-fixed` recebe o gear (Configuracoes Gerais, sempre).
   Slot `.gtb-contextual` recebe o provider do tipo da layer ativa
   (texto, imagem, etc.). Apenas UM provider montado por vez.
   Segue o padrao .X-toolbar do CLAUDE.md: surface-2, border-mid,
   gap 14px, radius-lg.
   ============================================================= */

.ctx-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 5;
  align-self: start;             /* nao estica na linha do grid */
  min-height: 0;
}

/* Override do grid do .lp-main: 2 linhas — toolbar contextual (auto)
   e stage do canvas (1fr). */
.lp-main:has(#contextToolbar) {
  grid-template-rows: auto minmax(0, 1fr);
}

/* Slot FIXO: gear global. Sempre visivel. */
.gtb-fixed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Slot CONTEXTUAL: ocupado pelo provider do tipo da layer ativa.
   Quando data-state="empty" ou "disabled", esconde o slot inteiro
   (e nao apenas seus filhos via display:contents — esse anti-pattern
   foi removido). O gear continua visivel pois esta em outro slot. */
.gtb-contextual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.gtb-contextual[data-state="empty"],
.gtb-contextual[data-state="disabled"] {
  display: none;
}

/* Sep visual entre grupos */
.tctx-sep {
  width: 1px;
  height: 22px;
  background: var(--border-mid);
  margin: 0 4px;
  flex: 0 0 1px;
}

/* Label do layer ativo (Texto 1/2/3) no inicio da toolbar */
.tctx-active-label {
  font-family: var(--ui-font);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 8px 0 2px;
}

/* Botoes da toolbar — alinha com o padrao das outras toolbars */
.tctx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ease-hover), border-color var(--ease-hover), color var(--ease-hover);
}

.tctx-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-mid);
}

.tctx-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tctx-btn:active {
  filter: brightness(0.92);
}

.tctx-btn[aria-pressed="true"],
.tctx-btn.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.42);
  color: var(--accent-hi);
}

.tctx-btn[aria-disabled="true"],
.tctx-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.tctx-btn[hidden] { display: none; }

/* Stepper de tamanho da fonte: [-] [57] [+] */
.tctx-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 36px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}

.tctx-stepper__btn {
  width: 28px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease-hover), color var(--ease-hover);
}

.tctx-stepper__btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tctx-stepper__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tctx-stepper__value {
  min-width: 38px;
  text-align: center;
  font-family: var(--ui-font);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  border-left: 1px solid var(--border-mid);
  border-right: 1px solid var(--border-mid);
  line-height: 34px;
  user-select: none;
}

/* Seletor de fonte (dropdown placeholder) */
.tctx-font-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  min-width: 160px;
  max-width: 220px;
  text-align: left;
  transition: background-color var(--ease-hover), border-color var(--ease-hover);
}

.tctx-font-pick:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-hi);
}

.tctx-font-pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tctx-font-pick__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tctx-font-pick__caret {
  flex: 0 0 auto;
  opacity: 0.7;
  font-size: var(--text-xs);
}

/* Swatch de cor mostrado dentro do botao de cor.
   pointer-events: none garante que clicks no swatch SEMPRE passam pro
   botao pai — antes o swatch interceptava o click e o popover nao abria
   quando o usuario clicava na cor preta interna. */
.tctx-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--text);
  pointer-events: none;
}

/* Label/caret da fonte: o botao .tctx-font-pick e o alvo de click,
   nao seus filhos. */
.tctx-font-pick__label,
.tctx-font-pick__caret {
  pointer-events: none;
}

/* Empurra grupo final (lock + rotacao) para direita */
.tctx-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* ===== Fase 4: esconder configuracoes antigas do painel lateral =====
   Cor do Texto + Intensidade migraram para o popover de Cor e Transparencia
   da toolbar contextual. Mantemos o HTML pra nao quebrar handlers, so
   ocultamos visualmente.
   #textColorPickerPopover continua disponivel (usado pelo Banco de Cores
   personalizado, ainda nao migrado pra dentro do popover de cor). */
#toolbarTextColorGroup {
  display: none !important;
}

/* ===== Elementos usados dentro dos popovers (Fase 3) ===== */

/* Lista de fontes (popover de Fonte) */
.tctx-font-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

.tctx-font-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color var(--ease-hover), border-color var(--ease-hover);
}

.tctx-font-opt:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-mid);
}

.tctx-font-opt.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.42);
  color: var(--accent-hi);
}

/* Grid de swatches (popover de Cor) */
.tctx-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  gap: 8px;
}

.tctx-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  padding: 0;
  transition: transform var(--ease-hover), border-color var(--ease-hover);
}

.tctx-swatch:hover {
  border-color: var(--accent);
}

.tctx-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tctx-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

/* Range input dos sliders dentro dos popovers */
.tctx-range {
  flex: 1 1 auto;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--accent);
}

.tctx-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}