/* Designer de campos do certificado (Plano 02, Fase 3). HTML+CSS é justificado APENAS para o canvas
   posicionável por arraste — MudBlazor não tem equivalente (ver tiivo-web-mudblazor). Toolbar, colunas
   e painel de propriedades são MudStack/MudGrid no .razor: classe própria solta empata em
   especificidade com o MudBlazor e perde por ordem de origem (o MudBlazor.min.css carrega depois). */

/* Esta é a CAIXA DE COORDENADAS. Tudo que o designer grava é percentual sobre ela, e a proporção é a
   mesma folha A4 paisagem que o QuestPDF usa — é isso que faz preview e PDF concordarem (D2). */
.certdesigner-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 841.89 / 595.28; /* A4 paisagem em pontos — mesma referência do QuestPDF */
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    touch-action: none; /* pointer events cuidam do arraste; o navegador não deve rolar/dar zoom */
    user-select: none;
    /* Habilita a unidade cqw nos filhos: 1cqw = 1% da largura REAL deste container, então o
       font-size de cada campo (calculado em cqw no .razor) acompanha sozinho o redimensionamento —
       sem precisar medir o DOM via JS a cada render. */
    container-type: inline-size;
}

/* object-fit: contain (e não cover/fill) porque o QuestPDF desenha o fundo com .FitArea(), que tem
   exatamente essa semântica. Com cover, o preview cortaria uma faixa que o PDF mostra; com fill,
   distorceria o que o PDF não distorce. O upload valida proporção A4 ±2%, então a barra de
   letterbox é imperceptível — e, quando existe, o PDF tem a mesma. */
.certdesigner-preview-imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* O arraste é dos campos; a imagem de fundo nunca deve capturar pointer nem ser arrastada. */
    pointer-events: none;
    user-select: none;
}

.certdesigner-preview-vazio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 16px;
}

.certdesigner-campo {
    position: absolute;
    box-sizing: border-box;
    padding: 2px 4px;
    cursor: grab;
    border: 1px dashed transparent;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A assinatura do aluno NÃO é uma linha de texto: no PDF ela é uma imagem desenhada com
   Image().FitWidth(), ocupando uma caixa de largura x (440/1200) — a proporção do canvas de captura
   do DialogAssinaturaCertificado. Desenhar essa caixa tracejada aqui é o que mostra à empresa a área
   realmente reservada, evitando posicionar outro campo por cima da assinatura (e vice-versa).
   O aspect-ratio deixa o navegador derivar a altura da largura renderizada, então preview e papel
   reservam exatamente a mesma área sem nenhuma conta no C#. */
.certdesigner-campo.assinatura {
    aspect-ratio: 1200 / 440;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    border-color: rgba(0, 0, 0, 0.45);
    background-color: rgba(0, 0, 0, 0.03);
}

.certdesigner-campo:hover {
    border-color: rgba(25, 118, 210, 0.5);
    background-color: rgba(25, 118, 210, 0.04);
}

.certdesigner-campo.selecionado {
    border-color: #1976d2;
    background-color: rgba(25, 118, 210, 0.08);
}

.certdesigner-campo:active {
    cursor: grabbing;
}