html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/*.header-logo {
    flex-shrink: 0;*/
/*background-color: yellow;*/
/*-webkit-mask: url('../images/LogoPequenoIACartorioBrasil.png');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 115px;
    height: 30px;
}*/

.header-logo {
    flex-shrink: 0;
    width: 115px;
    height: 30px;
    background-image: url('../images/LogoPequenoTopoBranco.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; /* Faz a imagem caber dentro do espaço */
}


.loading-image {
    width: 100px;
    height: 100px;
}


#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ============================================
   CUSTOMIZAÇÃO DE POPUPS MODAIS - 90% DA TELA
   ============================================
   🔴 SESS-176 — limpeza: saíram os seletores com prefixo `dxbs-`. Esse prefixo é da geração
   ANTERIOR do DevExpress Blazor; o produto instalado aqui (v26.1) emite tudo como `dxbl-`, e não
   há uma única ocorrência de `dxbs-` nos CSS dele. Eram regras que não podiam funcionar.
   Os seletores `dxbl-` e os do Bootstrap (`modal-dialog`, `modal-body`) FORAM MANTIDOS — ver a
   nota de limpeza no fim deste arquivo para saber por que não fui além disso. */

/* Popup modal ocupando 90% da tela */
.dxbl-popup-window.dxbl-modal,
.modal-dialog.modal-xl {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: 90vw !important;
    height: 90vh !important;
}

/* Conteúdo do popup com altura total */
.dxbl-popup-window .dxbl-popup-content,
.modal-body {
    max-height: calc(90vh - 80px) !important;
    height: calc(90vh - 80px) !important;
    overflow-y: auto;
}

/* ListView dentro do popup com altura total */

/* ============================================
   FOTO DO COLABORADOR / USUARIO
   - ListView: miniatura 50x50 (cover, recorta sem distorcer)
   - DetailView: caixa 3cm x 4cm (contain, reduz proporcionalmente)
   ============================================ */

/* 🔴 SESS-176 — POR QUE ESTE BLOCO INTEIRO FOI REESCRITO, E A LIÇÃO QUE FICA.
   ═══════════════════════════════════════════════════════════════════════════════════════════
   O dono pediu a foto redonda na listagem; troquei o `border-radius` e nada mudou na tela dele.
   Ao investigar, o defeito era MUITO maior e mais antigo do que a cor da borda:

   **Todo este bloco apontava para uma classe que não existe mais.** Os seletores usavam
   `.dxbl-grid-table-data-row`, e na v26.1 do DevExpress essa classe tem ZERO ocorrências —
   conferido contando as ocorrências no tema publicado (`blazing-berry.bs5.min.css`), não por
   suposição. Ou seja: a miniatura de 50x50, a altura de 60px da linha, o recorte centralizado —
   nada disso valia. O que se via na tela era o comportamento padrão do componente. É provável que
   tenha parado de funcionar no upgrade para a v26.1 (SESS-129) e ninguém tenha notado, porque CSS
   que não aplica não quebra nada: só não faz efeito.

   **O seletor certo na v26.1:** a linha de dados NÃO tem classe própria. É `tr` dentro de
   `.dxbl-grid-table > tbody`. As classes de linha existem apenas para os casos especiais
   (`dxbl-grid-group-row`, `dxbl-grid-edit-row`, `dxbl-grid-footer-row`, `dxbl-grid-empty-row`),
   e por isso elas são EXCLUÍDAS abaixo — arrastar a altura de uma linha de edição inline ou de
   totalização estragaria essas telas.

   **A lição:** seletor CSS de componente de terceiro é contrato que quebra em silêncio no
   upgrade. Se uma regra visual "não faz efeito", conferir se a classe ainda existe no tema da
   versão instalada vem ANTES de mexer no valor da regra.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ListView: trava a altura das linhas do grid para nao crescerem com a imagem */
.dxbl-grid-table > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-footer-row):not(.dxbl-grid-empty-row) > td {
    max-height: 60px !important;
    height: 60px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

/* ============================================
   RESPIRO NA LINHA QUE TEM FOTO (pedido do dono, SESS-176)
   ============================================
   A foto tem 50px e a linha, 60px: sobravam 5px de cada lado, e as miniaturas ficavam
   praticamente encostadas uma na outra.

   🔴 Por que `:has(img)` e não simplesmente aumentar a altura de todas as linhas: a regra acima
   vale para TODA célula de grade do sistema. Subir a altura no geral deixaria as listagens densas
   — Orçamentos, Emolumentos, Clientes — mais altas sem motivo, mostrando menos registros por tela
   para resolver um problema que só existe onde há retrato. Assim o respiro vai exatamente na linha
   que precisa dele, e a densidade das demais fica intacta.

   `:has()` já é usado neste mesmo arquivo (no container do spinner de busca) e pelo PRÓPRIO tema
   do DevExpress na v26.1, então não é novidade de compatibilidade aqui. Se um navegador antigo
   não suportar, a regra é ignorada e a linha volta aos 60px — degradação limpa, nada quebra. */
.dxbl-grid-table > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-footer-row):has(img) > td {
    /* 68px para uma foto de 50px = 9px de folga em cima e embaixo. Passou por 78 (14 de folga), e
       o dono achou demais: a linha ficava alta e a listagem perdia densidade sem necessidade.
       60 era o valor sem respiro nenhum, com as miniaturas encostadas — 68 é o meio-termo. */
    height: 68px !important;
    max-height: 68px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* ListView: a imagem dentro da celula, limitada a 50x50 e REDONDA */
.dxbl-grid-table > tbody > tr > td img,
.dxbl-grid-table > tbody > tr > td .dxbl-image,
.dxbl-grid-table > tbody > tr > td [class*="image-property-editor"] img {
    max-width: 50px !important;
    max-height: 50px !important;
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    object-position: center !important;
    /* 🔴 Pedido do dono: REDONDA, igual à do cadastro e à do topo da página — a listagem era a
       única peça fora do padrão. O `object-fit: cover` acima é o que torna o círculo possível sem
       distorcer: a foto é recortada ao centro, não achatada. */
    border-radius: 50% !important;
    display: inline-block;
}

/* ============================================
   ESCAPE: imagem em grade que NÃO é foto de pessoa
   ============================================
   ⚠️ Os seletores acima alcançam QUALQUER imagem dentro de uma célula de grade, porque a versão
   26.1 do componente não expõe classe CSS por coluna (conferido pelo compilador: o modelo de
   coluna não tem `CssClass`). Hoje isso é seguro — a única coluna de imagem em ListView do
   sistema é a "Foto" do colaborador, e ela deve mesmo ser redonda.

   No dia em que entrar uma miniatura que não é rosto (documento digitalizado, logotipo, planta),
   arredondá-la ficaria errado. Marque a coluna com esta classe em vez de afrouxar a regra acima —
   assim o padrão continua valendo para o caso comum. */
.dxbl-grid-table > tbody > tr > td .iacb-img-quadrada,
.dxbl-grid-table > tbody > tr > td .iacb-img-quadrada img {
    border-radius: 4px !important;
}

/* DetailView: caixa fixa 3cm x 4cm (≈113px x 151px @ 96dpi)
   object-fit:contain garante reducao proporcional, sem distorcer. */
.dxbl-detail-view .dxbl-image-property-editor img,
.dxbl-detail-view [class*="image-property-editor"] img,
.xaf-detail-view .dxbl-image-property-editor img,
.dxbl-detail-view .dxbl-image,
.dxbl-detail-view [id*="_Foto_"] img,
.dxbl-detail-view [id*="_Foto"] .dxbl-image-property-editor {
    max-width: 3cm !important;
    max-height: 4cm !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 2px;
}

/* DetailView: limitar tambem o WRAPPER do editor (XAF gera div com largura herdada do
   container que pode esticar). Forca o wrapper a no maximo 3cm para o Foto. */
.dxbl-detail-view [id*="_Foto_"] {
    max-width: 3cm !important;
    display: inline-block !important;
}
.xaf-listview-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Grid dentro do popup ocupa todo o espaço disponível */
.dxbl-grid-main-container {
    flex: 1;
    min-height: 0;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   NOTA DE LIMPEZA — SESS-176 (24/08/2026): o que foi removido, e o que NÃO foi, e por quê
   ════════════════════════════════════════════════════════════════════════════════════════════
   REMOVIDO: todos os seletores com prefixo `dxbs-` (e o `.dxgv` do grid WebForms). O `dxbs-` é a
   geração ANTERIOR do DevExpress Blazor — a versão instalada (v26.1) emite tudo como `dxbl-`, e
   não há uma única ocorrência de `dxbs-` nos CSS do produto. Não podiam funcionar.

   🔴 NÃO REMOVIDO, apesar de eu ter suspeitado que estivessem mortos: `dxbl-detail-view`,
   `dxbl-image-property-editor`, `dxbl-popup-window`, `dxbl-popup-content`,
   `dxbl-grid-main-container`. Nenhum deles aparece nos CSS do DevExpress nem do XAF — o que me
   fez achar que eram lixo, como o `dxbl-grid-table-data-row` que quebrou a foto.

   **A contraprova que me impediu de removê-los:** `xaf-layout-item`, `xaf-listview-container` e
   `campo-com-spinner-wrapper` também NÃO aparecem em nenhum CSS do fornecedor — e funcionam (o
   spinner de CPF/CEP está correto na tela). Ou seja: ausência no CSS do fornecedor prova apenas
   que o TEMA não estiliza a classe, e não que o componente deixou de emiti-la no HTML.

   O caso da foto foi diferente: ali havia prova EMPÍRICA de que a regra não valia — a miniatura
   não tinha os 50px e a linha não tinha os 60px na tela do dono. Para estes seletores não existe
   prova equivalente, e remover regra de popup e de DetailView "por suspeita" quebraria telas que
   hoje estão certas.

   Para concluir a limpeza é preciso inspecionar o HTML renderizado (F12 → Elements) numa tela com
   popup e numa DetailView com foto, e confirmar se as classes aparecem. Enquanto isso não for
   feito, a regra inerte não custa nada; remover a errada custa uma tela quebrada.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Campo com Spinner (CPF / CEP) ─────────────────────────────────── */
.campo-com-spinner-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.campo-com-spinner-input {
    flex: 1;
}

.campo-com-spinner-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--dx-color-primary, #337ab7);
}

/* ── Spinner ícone compacto (StatusBuscaCPF / StatusBuscaCEP) ─────────── */
/* O PropertyEditor SpinnerIcone ocupa apenas o espaço do ícone animado,  */
/* sem textbox nem label, posicionado como célula inline no grid XAF.     */
.spinner-icone-busca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* alinha verticalmente com o input ao lado */
    align-self: flex-end;
    margin-bottom: 2px;
}

/* Quando ATIVO: ocupa espaço visível (28x28) */
.spinner-icone-busca--ativo {
    width: 28px;
    height: 28px;
    overflow: visible;
}

/* Quando INATIVO: colapsa completamente, sem reservar espaço no layout */
.spinner-icone-busca--inativo {
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.spinner-icone-busca__indicator {
    width: 22px !important;
    height: 22px !important;
}

/* Remove borda/fundo/padding do container XAF do PropertyEditor do spinner */
.xaf-layout-item:has(.spinner-icone-busca) {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    /* Quando inativo colapsa; quando ativo abre para o ícone */
    min-width: 0;
    overflow: visible;
}

.xaf-layout-item:has(.spinner-icone-busca--ativo) {
    min-width: 32px;
}