/* toolbar.css — escopo da tool Marcar */
:root {
  --pf-app-header-h: 0px; /* será calculado dinamicamente via JS */
  --pf-mark-toolbar-gap: 12px; /* gap entre header e toolbar */
  --pf-mark-toolbar-top: calc(var(--pf-app-header-h) + var(--pf-mark-toolbar-gap));
  --pf-mark-radius: 12px;
  --pf-mark-shadow: 0 8px 24px rgba(0,0,0,.06);
  --pf-mark-btn-h: 36px;
  --pf-mark-btn-r: 10px;
  --pf-mark-border: #d1d5db;
  --pf-mark-fg: #111827;
  --pf-mark-muted: #374151;
  --pf-mark-active-bg: #eef2ff;
  --pf-mark-active-border: #c7d2fe;
}

/* Toolbar dentro do LAB: visual Berry e previsível */
#pfMarkToolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 0 12px 0; /* apenas margem inferior para separar do stage */
  padding: 0;
}

/* Faixa acima do preview: fica acessível ao rolar o LAB */
.pf-mark-toolbar-sticky {
  position: sticky;
  top: 12px;          /* offset seguro dentro do card */
  z-index: 20;
}

#pfMarkToolbar .pf-mark-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
}

/* Normalização para evitar "um botão mais alto que outro" */
#pfMarkToolbar .btn,
#pfMarkToolbar .pf-mark-chip {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#pfMarkToolbar .btn {
  min-width: var(--pf-mark-btn-h);
  padding: 0 10px;
  border-radius: var(--pf-mark-btn-r);
}

/* Ícones com caixa estável */
#pfMarkToolbar .btn i,
#pfMarkToolbar .pf-mark-chip i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* não forçar cor cinza — deixe o tema mandar */
#pfMarkToolbar .btn,
#pfMarkToolbar .pf-mark-chip {
  color: inherit;
}

/* hover/focus (SaaS) */
#pfMarkToolbar .btn:hover {
  border-color: #9ca3af;
}
#pfMarkToolbar .btn:focus-visible {
  outline: 2px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}

/* Linhas do toolbar: centralizar e manter consistência */
#pfMarkToolbar .pf-mark-row--top,
#pfMarkToolbar .pf-mark-row--options {
  justify-content: center;
  align-items: center;
}

/* linhas */
#pfMarkToolbar .pf-mark-row--top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Row vertical na coluna de encadernação (sobrescreve regras horizontais) */
.pf-mark-row--top.pf-mark-row--vertical {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px;
}

/* opções colapsáveis: padrão minimalista (fecha no select) - apenas dentro do toolbar */
#pfMarkToolbar .pf-mark-row--options {
  display: none; /* padrão: escondido */
}

#pfMarkToolbar.pf-mark-show-options .pf-mark-row--options {
  display: flex;            /* abre */
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Opções sempre visíveis acima do stage (fora do toolbar) */
.pf-mark-row--options.pf-mark-options--always-visible {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px; /* separação mínima entre botões */
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  min-height: 42px; /* altura mínima fixa para evitar mudanças de tamanho */
  box-sizing: border-box;
}

/* Toolbar de opções: sem padding/margem extra, acento apenas em borda/ícones */
#pfMarkToolbar {
  margin: 0 0 12px 0; /* apenas margem inferior para separar do stage */
  padding: 0;
  border: 0;
  background: transparent;
}

/* chips de opção */
#pfMarkToolbar .pf-mark-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  cursor: pointer;
  font-size: 13px;
  transition: opacity 0.2s ease, pointer-events 0.2s ease;
}

/* Estado desabilitado para chips não usados pela ferramenta atual */
#pfMarkToolbar .pf-mark-chip.pf-mark-chip--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

#pfMarkToolbar .pf-mark-chip.pf-mark-chip--disabled input,
#pfMarkToolbar .pf-mark-chip.pf-mark-chip--disabled select {
  pointer-events: none;
  cursor: not-allowed;
}

#pfMarkToolbar .pf-mark-chip:hover:not(.pf-mark-chip--disabled) {
  border-color: var(--pf-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#pfMarkToolbar .pf-mark-chip select {
  border: 0;
  outline: 0;
  background: transparent;
  padding-right: 18px; /* espaço do chevron */
  appearance: none;
  cursor: pointer;
  font-size: 13px;
}

#pfMarkToolbar .pf-mark-chev {
  opacity: .75;
  font-size: 12px;
}

#pfMarkToolbar .pf-mark-ico {
  opacity: .7;
  font-size: 14px;
}

#pfMarkToolbar .pf-mark-swatch {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ff0000;
  flex-shrink: 0;
}

/* o controle real (input/select) vira "overlay invisível" cobrindo o chip inteiro */
#pfMarkToolbar .pf-mark-chip__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* tudo que é "visual" não deve capturar clique */
#pfMarkToolbar .pf-mark-chip > *:not(.pf-mark-chip__cover) {
  pointer-events: none;
  z-index: 1;
}

/* chevron sempre visível */
#pfMarkToolbar .pf-mark-chev {
  opacity: .85;
}

/* permitir Berry accent propagar (sem cinza hardcoded) */
#pfMarkToolbar .pf-mark-chip,
#pfMarkToolbar .pf-mark-chip i,
#pfMarkToolbar .pf-mark-ico,
#pfMarkToolbar .pf-mark-chev {
  color: inherit;
}

/* Chips: acento via Berry (pink) — NÃO usar currentColor */
#pfMarkToolbar .pf-mark-chip[data-pf-role="accent-border"] {
  background: #fff;
  border-color: var(--pf-accent);
  color: var(--pf-accent); /* garante que ícones/chevron possam herdar pink */
}

#pfMarkToolbar .pf-mark-chip[data-pf-role="accent-border"] .pf-mark-ico,
#pfMarkToolbar .pf-mark-chip[data-pf-role="accent-border"] .pf-mark-chev {
  color: var(--pf-accent);
}

#pfMarkToolbar .pf-mark-chip[data-pf-role="accent-border"] .pf-mark-swatch {
  border-color: var(--pf-accent);
}

/* responsivo: scroll horizontal (sem quebrar sidebar) */
@media (max-width: 900px) {
  #pfMarkToolbar .pf-mark-row--top {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  #pfMarkToolbar .pf-mark-row--options {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  /* Opções sempre visíveis mantêm wrap para comportamento responsivo */
  .pf-mark-row--options.pf-mark-options--always-visible {
    flex-wrap: wrap !important;
    overflow-x: visible;
  }
  #pfMarkToolbar .pf-mark-row--top::-webkit-scrollbar,
  #pfMarkToolbar .pf-mark-row--options::-webkit-scrollbar { height: 6px; }
}

/* Split do preview (coluna lateral + página) */
.pf-lab-split {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.pf-lab-side {
  flex: 0 0 52px; /* mínimo para ícones */
  width: 52px;
}

.pf-lab-side-group {
  display: flex;
  flex-direction: column;
}

.pf-lab-side-group .btn {
  width: 100%;
}

/* Split: a coluna principal PRECISA expandir (evita preview "micro") */
.pf-lab-split {
  width: 100%;
}

.pf-lab-main {
  flex: 1 1 auto;
  min-width: 0; /* crítico em flex para não "shrinkar" o canvas */
}

/* Host do preview: container flex que gerencia scroll */
#pfLabCanvasHost {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* permite scroll interno */
  overflow: hidden; /* scroll fica no wrap, não aqui */
}

/* Wrap: scroll interno aqui, não no host */
#pfLabCanvasWrap {
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* scroll aqui */
}

/* Berry: workspace sem cinza pesado e sem oscilação de scrollbar */
.pf-mark-stage-host {
  background: #fff;                 /* card/workspace branco */
  scrollbar-gutter: stable both-edges; /* evita loop de largura por scrollbar */
  overflow-y: scroll; /* Evita "pisca" por aparecer/desaparecer scrollbar em resize extremo */
}

/* =========================
   Marcar — Split do Preview
   ========================= */

#pfMarkTool .pf-lab-split{
  display:flex;
  gap:12px;
  align-items:flex-start;
  width:100%;
}

#pfMarkTool .pf-lab-side{
  flex:0 0 56px; /* mínimo para caber ícones */
}

#pfMarkTool .pf-lab-main{
  flex:1 1 auto;
  min-width:0;          /* evita overflow horizontal no body */
  overflow:hidden;      /* scroll deve ficar no host do preview */
}

#pfMarkTool .pf-lab-side-group .btn{
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Host real do preview: scroll interno e estabilidade de scrollbar */
#pfMarkTool #pfLabCanvasWrap.pf-mark-stage-host{
  overflow:auto;
  scrollbar-gutter: stable both-edges;
  padding:24px;         /* devolve "margens" visuais em telas grandes */
  box-sizing:border-box;
}


/* Host do preview: "mesa" com margens 4 lados + centralização real */
.pf-mark-stage-host{
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: .75rem;
  background: rgba(0,0,0,.02);
  overflow: auto; /* scroll aqui, sincronizado com a coluna lateral */
  padding: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  scrollbar-gutter: stable both-edges;
  width: 100%;
  height: 100%; /* preenche o host */
  min-height: 0;
}

/* ============================
   LATERAL (Berry-style) — tools
   ============================ */

#pfLabSideTools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#pfLabSideTools .pf-mark-row--side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tamanho fixo e consistente (corrige desalinhamento entre botões) */
#pfLabSideTools .btn-group-vertical {
  width: 48px; /* coluna mínima */
}

#pfLabSideTools .btn-group-vertical > .btn {
  width: 48px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Normaliza ícones (corrige "primeiro ícone não bate com o segundo") */
#pfLabSideTools .btn i {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
}

/* Botão do label de zoom (texto centralizado) */
#pfLabSideTools #pfMarkZoomReset {
  font-weight: 700;
}
#pfLabSideTools #pfMarkZoomLabel {
  display: inline-block;
  min-width: 38px;
  text-align: center;
}

/* Responsivo: no mobile a lateral vira faixa horizontal para não esmagar a página */
@media (max-width: 575.98px) {
  #pfLabSideTools .pf-mark-row--side {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #pfLabSideTools .btn-group-vertical {
    width: auto;
  }
  #pfLabSideTools .btn-group-vertical > .btn {
    width: 44px;
    height: 40px;
  }
}

/* =========================
   COLUNA LATERAL: Área de Encadernação (Binding Column)
   ========================= */

/* Coluna lateral: pequena, acompanha altura da página */
.pf-lab-binding-column {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  gap: 8px;
}

#pfLabBindingColumn.pf-lab-binding-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* alinha do topo (top) */
  width: 72px; /* largura fixa (área de encadernação) */
  min-width: 72px;
  padding: 0;
  margin: 0;
  position: relative;
  height: 100%; /* estica para preencher a coluna */
  min-height: 0;
}

/* Row vertical: empilha grupos de botões */
.pf-mark-row--top.pf-mark-row--vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; /* alinha do topo (cima para baixo) */
  gap: 8px;
  width: 100%;
}

/* Grupos de botões verticais na coluna de encadernação */
#pfLabBindingColumn .btn-group-vertical {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px; /* separação mínima entre botões */
}

#pfLabBindingColumn .btn-group-vertical > .btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Ícones centralizados */
#pfLabBindingColumn .btn i {
  display: inline-flex !important;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
  color: inherit !important; /* herda a cor do botão para garantir visibilidade */
  opacity: 1 !important;
}

/* Label de zoom centralizado */
#pfLabBindingColumn #pfMarkZoomLabel {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

/* Espaçamento entre grupos */
#pfLabBindingColumn .btn-group-vertical + .btn-group-vertical {
  margin-top: 8px;
}

/* A coluna acompanha a altura do paper via align-self: stretch na .pf-lab-binding-column */

/* Stage: container flex que estica ambas as colunas (moto + garupa) */
#pfLabStage {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: stretch !important; /* CRÍTICO: estica ambas as colunas à mesma altura */
  gap: 12px;
  min-height: 0; /* permite encolher */
}

/* Coluna principal pode encolher e expandir */
#pfLabStage > .col {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* permite scroll interno */
}

/* Coluna lateral: estica para acompanhar a altura da página (consolidado) */
.pf-lab-binding-column {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* alinha ao final (bottom) */
  align-items: center; /* centraliza horizontalmente */
  align-self: stretch !important; /* CRÍTICO: estica para mesma altura da coluna principal */
  min-width: 72px;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  gap: 8px;
  min-height: 0;
}

/* Responsivo: em mobile, coluna pode ficar ainda mais compacta */
@media (max-width: 575.98px) {
  #pfLabBindingColumn.pf-lab-binding-toolbar {
    width: 52px;
    min-width: 52px;
  }
  
  #pfLabBindingColumn .btn-group-vertical > .btn {
    height: 40px;
    min-height: 40px;
  }
}

/* DEFENSIVO: containers grandes nunca devem virar "faixa" por acento */
#pfLabBindingColumn.pf-lab-binding-toolbar,
.pf-mark-row--options.pf-mark-options--always-visible {
  background: transparent !important;
}

/* Cursor para ferramenta eraser */
body[data-me-tool="eraser"] #pfLabKonvaHost,
#pfLabKonvaHost[data-me-tool="eraser"] {
  cursor: crosshair;
}