html, body {
    height: 100%;
}

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

.header-logo {
    flex-shrink: 0;
    /*background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.png');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;*/
    background: url('../images/colecta-logo.png');
    background-size: cover;
    width: 245px;
    height: 90px;
    margin: 0 !important;
}

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

.dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table {
    min-width: 100%;
    width: max-content;
}

.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-header-content > span {
    width: max-content;
}

#loadingBackground > img {
    width: 100%;
    height: auto !important;
}

#loadingBackground.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

/* ============================================================
   Tema Colecta — piloto de UX/UI (CompanyPartner)
   Regra: redefinir variáveis do tema (Bootstrap/DevExpress),
   evitando sobrescritas "na marra". Confirmar nomes de classe
   contra a versão do DevExpress em uso antes de expandir.
   ============================================================ */
:root {
    /* Marca (ponte com o tema Purple atual) */
    --colecta-brand: #5a45e0;
    --colecta-brand-2: #4633c2; /* hover/pressed */
    --colecta-brand-weak: #ede9fd;
    --colecta-brand-weak-2: #ddd5fb;

    /* Semânticos */
    --colecta-ok: #0f7a4d;
    --colecta-ok-bg: #e2f3ea;
    --colecta-warn: #a76a12;
    --colecta-warn-bg: #fbf0dd;
    --colecta-danger: #cf3b3b;
    --colecta-danger-bg: #fbe7e7;
    --colecta-info: #2563c9;
    --colecta-info-bg: #e5eefb;

    /* Ponte com o Bootstrap que alimenta o tema DevExpress Blazor */
    --bs-primary: var(--colecta-brand);
    --bs-primary-rgb: 90, 69, 224;
    --bs-link-color: var(--colecta-brand);
    --bs-link-hover-color: var(--colecta-brand-2);
}

/* Densidade compacta na DxGrid (linha ~30px) */
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Numéricos/IDs/CNPJ com tabular para alinhar colunas */
.dxbl-grid .dxbl-grid-table > tbody > tr > td .dxbl-text {
    font-variant-numeric: tabular-nums;
}

/* Foco de teclado visível (acessibilidade) */
.dxbl-text-edit input:focus-visible,
.dxbl-btn:focus-visible {
    outline: 2px solid var(--colecta-brand);
    outline-offset: 1px;
}

/* ============================================================
   Popup "Criar Usuários" — layout em 2 colunas (formulário + editor
   de e-mail de boas-vindas). O popup padrão do XAF é fixo em 800px, o
   que mantém o form-layout no breakpoint "sm" e empilha as colunas
   col-md-*. Alargamos SOMENTE o popup que contém o editor HTML
   customizado (:has(.colecta-html-editor-pe)) para entrar no breakpoint
   "md" e as colunas ficarem lado a lado. Requer :has() (Chrome/Edge/
   Firefox/Safari modernos), disponível no ambiente-alvo.
   ============================================================ */
.xafPopup:has(.colecta-html-editor-pe) {
    width: 1400px !important;
    max-width: 96vw !important;
}

/* A linha que contém as duas colunas (formulário col-md-5 + e-mail col-md-7):
   não quebrar (o form-layout fica no breakpoint "sm" e empilharia) e manter
   a ordem formulário à esquerda / e-mail à direita. */
.xafPopup:has(.colecta-html-editor-pe) .dxbl-row:has(> .dxbl-col-md-5):has(> .dxbl-col-md-7) {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.xafPopup:has(.colecta-html-editor-pe) .dxbl-row:has(> .dxbl-col-md-5):has(> .dxbl-col-md-7) > .dxbl-col-md-5 {
    flex: 0 0 41% !important;
    max-width: 41% !important;
    order: 1 !important;
}

.xafPopup:has(.colecta-html-editor-pe) .dxbl-row:has(> .dxbl-col-md-5):has(> .dxbl-col-md-7) > .dxbl-col-md-7 {
    flex: 0 0 59% !important;
    max-width: 59% !important;
    order: 2 !important;
}

/* O e-mail padrão tem 620px de largura fixa; garante rolagem interna
   em vez de estourar o layout. */
.colecta-html-editor-pe {
    overflow: auto;
}

/* O conteúdo editável do Quill tem cor de texto #333 fixa e fundo transparente — no tema
   ESCURO ficava texto escuro sobre fundo escuro (invisível). Fazemos o editor USAR as cores
   do tema (variáveis Bootstrap do DevExpress): assim respeita o tema escolhido pelo usuário —
   escuro → fundo escuro/texto claro; claro → fundo claro/texto escuro — e sempre legível. */
.colecta-html-editor-pe .ql-container,
.colecta-html-editor-pe .ql-editor {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #333333) !important;
}

.colecta-html-editor-pe .ql-editor.ql-blank::before {
    color: #9aa0b3 !important;
}

/* Popup "Resultado da importação" (ImportFinalReport / DxPdfViewer). O popup padrão do XAF (800px)
   é estreito demais para ler o A4 retrato confortavelmente — largura alvo do design ~1140px. */
.xafPopup:has(.colecta-pdf-preview-pe) {
    width: 1140px !important;
    max-width: 96vw !important;
    height: 90vh !important;
}

.colecta-pdf-preview-pe {
    display: flex;
    flex-direction: column;
    height: 78vh;
    gap: 6px;
}

.colecta-pdf-preview-pe .colecta-pdf-viewer {
    flex: 1 1 auto;
    min-height: 0;
}

/* "Abrir em nova guia"/"Baixar PDF" via Blob URL + JS interop (ver colectaBulkEditOpenPdf/
   colectaBulkEditDownload em _Host.cshtml) — data: URI direto em <a target="_blank"> é bloqueado
   pelo Chrome como navegação de nível superior (fica em about:blank, achado ao testar ao vivo);
   Blob URL não sofre essa restrição. Par fantasma + sólido (README 1.4), numa faixa própria acima
   do viewer — o componente não expõe slot para injetar botões na toolbar dele. */
.colecta-pdf-fallback {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    padding: 8px 0;
}

.colecta-pdf-fallback a,
.colecta-pdf-fallback button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    /* <button> traz aparência padrão do navegador que os antigos <a> não tinham. NÃO definir
       "background" aqui: a especificidade deste seletor (classe+tag) é maior que a de
       .colecta-btn-solid (só classe) e sobrescreveria o fundo roxo sólido, deixando o botão
       "Baixar PDF" invisível (achado ao testar ao vivo). O fundo de cada variante fica só nas
       regras .colecta-btn-ghost/.colecta-btn-solid abaixo. */
    appearance: none;
    -webkit-appearance: none;
}

.colecta-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
    color: #D7D7E0;
}

.colecta-btn-ghost:hover {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
}

.colecta-btn-solid {
    border: 1px solid transparent;
    background: #5A45E0;
    color: #FFFFFF;
}

.colecta-btn-solid:hover {
    background: #6A55F0;
}

/* Moldura do PDF embutido (README 1.5, Opção A) — escurece o entorno do papel branco para não
   "colar" na borda escura do popup, com respiro + anel + sombra difusa. */
.colecta-pdf-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 22px;
    background: linear-gradient(to bottom, #1B1B23, #141419);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0 0 6px 6px;
}

/* O DxPdfViewer não tem rolagem interna própria — renderiza a altura total do documento e espera
   que o CONTAINER role (achado ao testar ao vivo: nenhum descendente tinha overflow scrollável,
   e o elemento raiz do viewer ficava com scrollHeight > clientHeight sem jeito de alcançar o
   resto). overflow:hidden no wrapper do "papel" cortava esse excedente e travava a rolagem;
   overflow-y:auto mantém o corte de canto arredondado (raio) e ainda adiciona a barra de rolagem
   que faltava. */
.colecta-pdf-frame .colecta-pdf-paper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    border-radius: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 44px rgba(0, 0, 0, .65);
}

.colecta-pdf-frame .colecta-pdf-viewer {
    flex: 1 1 auto;
    min-height: 0;
}

/* Cabeçalho do popup "Resultado da importação" (ImportFinalReport.Header / ColectaImportHeader) —
   pílula de status + linha de metadados (README 1.1). Sem rótulo de campo, igual à faixa de KPIs. */
.xaf-item-header {
    display: none !important;
}

.colecta-import-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-bottom: 4px;
}

.colecta-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    flex: none;
}

.colecta-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.colecta-status-pill-success {
    background: rgba(46, 163, 106, .15);
    border: 1px solid rgba(46, 163, 106, .38);
    color: #62D39B;
}

.colecta-status-pill-success .colecta-status-dot {
    background: #2EA36A;
}

.colecta-status-pill-danger {
    background: rgba(207, 59, 59, .15);
    border: 1px solid rgba(207, 59, 59, .38);
    color: #FF8D88;
}

.colecta-status-pill-danger .colecta-status-dot {
    background: #CF3B3B;
}

.colecta-status-pill-warning {
    background: rgba(167, 106, 18, .18);
    border: 1px solid rgba(167, 106, 18, .4);
    color: #E5B45F;
}

.colecta-status-pill-warning .colecta-status-dot {
    background: #D99A2B;
}

.colecta-import-header-meta {
    font-size: 12.5px;
    color: #9A9AA8;
}

.colecta-import-header-meta b {
    color: #D7D7E0;
    font-weight: 600;
}

.colecta-import-header-file {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 11.5px;
    color: #B3B3C0;
}

.colecta-import-header-sep {
    color: #4A4A58;
    margin: 0 2px;
}

/* Abas do popup (README 1.3) — sublinhado roxo na aba ativa, contraste maior no rótulo. */
.xafPopup:has(.colecta-kpi-tiles) .dxbl-tabs-item {
    font-size: 13.5px;
    color: #9A9AA8;
}

.xafPopup:has(.colecta-kpi-tiles) .dxbl-tabs-item:hover {
    color: #D7D7E0;
}

.xafPopup:has(.colecta-kpi-tiles) .dxbl-tabs-item.dxbl-active {
    font-weight: 600;
    color: #FFFFFF;
}

.xafPopup:has(.colecta-kpi-tiles) .dxbl-tabs-item.dxbl-active::after {
    background: #7C68FF !important;
}

/* Rodapé (README 1.6) — um único botão "Fechar"; "Cancelar" não faz sentido pós-commit. */
.xafPopup:has(.colecta-kpi-tiles) .dxbl-btn-secondary.xaf-action {
    display: none !important;
}

.xafPopup:has(.colecta-kpi-tiles) .dxbl-btn-primary.xaf-action {
    margin-left: auto;
}

/* Grade "Detalhamento por linha" (README 2.3) — badge de Ação, coluna Linha monoespaçada/à
   direita, e diff estruturado na coluna Detalhe. Ver ImportRowGridStylingViewController (Blazor). */
.colecta-linha-mono {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: #B3B3C0;
}

.colecta-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.colecta-action-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
}

.colecta-action-inserted {
    background: rgba(15, 122, 77, .18);
    border: 1px solid rgba(46, 163, 106, .42);
    color: #8FD9B4;
}

.colecta-action-inserted .colecta-action-dot {
    background: #2EA36A;
}

.colecta-action-updated {
    background: rgba(37, 99, 201, .18);
    border: 1px solid rgba(37, 99, 201, .42);
    color: #9DC0FF;
}

.colecta-action-updated .colecta-action-dot {
    background: #4D86E8;
}

.colecta-action-unchanged {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #9A9AA8;
}

.colecta-action-unchanged .colecta-action-dot {
    background: #6D6D7C;
}

.colecta-action-rejected {
    background: rgba(207, 59, 59, .18);
    border: 1px solid rgba(207, 59, 59, .44);
    color: #FF8D88;
}

.colecta-action-rejected .colecta-action-dot {
    background: #E5645F;
}

.colecta-diff-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 4px 0;
}

.colecta-diff-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.colecta-diff-chip {
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    font-weight: 600;
    color: #8A8A99;
    white-space: nowrap;
}

.colecta-diff-old {
    font-size: 13px;
    color: #7A7A89;
    text-decoration: line-through;
    text-decoration-color: #55555F;
}

.colecta-diff-arrow {
    font-size: 13px;
    color: #7C68FF;
}

.colecta-diff-new {
    font-size: 13px;
    font-weight: 600;
    color: #F2F2F6;
}

.colecta-diff-reason {
    font-size: 13px;
    font-weight: 500;
    color: #FF8D88;
}

.colecta-diff-muted {
    font-size: 13px;
    color: #6D6D7C;
}

/* Faixa de KPIs do popup "Resultado da importação" (ImportFinalReport.Kpis / ColectaImportKpis) —
   substitui os 4 contadores (Incluídos/Atualizados/SemAlteração/Rejeitados) por tiles read-only.
   Ver docs/design_handoff_resultado_importacao/README.md seção 1.2. O design não prevê rótulo de
   campo acima dos tiles ("Resumo:"), então escondemos o <label> que o form-layout gera para essa
   propriedade (classe derivada do nome do membro pelo próprio XAF). */
.xaf-item-kpis {
    display: none !important;
}

.colecta-kpi-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.colecta-kpi-tile {
    position: relative;
    overflow: hidden;
    background: #2B2B35;
    border: 1px solid var(--tile-border, rgba(255, 255, 255, .07));
    border-radius: 8px;
    padding: 14px 16px 13px;
    box-shadow: var(--tile-halo, none);
}

.colecta-kpi-tile-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tile-accent, #3D3D4A);
}

.colecta-kpi-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.colecta-kpi-tile-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--tile-circle-bg);
    color: var(--tile-glyph);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.colecta-kpi-tile-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tile-label);
}

.colecta-kpi-tile-number {
    font-size: 32px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tile-number);
    line-height: 1;
}

.colecta-kpi-tile-note {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--tile-note);
}

.colecta-kpi-closing {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.colecta-kpi-closing-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

.colecta-kpi-closing-text {
    flex: none;
    font-size: 12px;
    color: #8A8A99;
}

/* O form-layout reserva um "gutter" de legenda de grupo VAZIO (col-md-2, ~233px)
   à esquerda do conteúdo, que desperdiçava espaço e empurrava a coluna do e-mail
   para fora (gerando scroll horizontal). Escondemos SÓ esse gutter vazio (col-md-2);
   as abas de coleções ficam noutro grupo (col-md-12) e permanecem visíveis. */
.xafPopup:has(.colecta-html-editor-pe) .dxbl-fl-gt.dxbl-col-md-2 {
    display: none !important;
}

/* Rótulo antes dos combos de filtro de Tipo de Empresa (grades de Empresa). A Action do XAF não expõe
   um label próprio para o combo; ele é marcado com uma classe (ver CompanyTypeSelectorController) e o
   rótulo é injetado via ::before no item da toolbar que o contém.

   A tela de Parceria tem DOIS combos e cada um precisa do seu rótulo ("Fornecedor" e "Cliente"): depois
   de escolhido um tipo o combo mostra apenas o valor, e sem rótulos distintos os dois ficam visualmente
   idênticos (comprovado ao vivo). Daí as três classes. */
.dxbl-toolbar-item:has(.colecta-company-type-combo),
.dxbl-toolbar-item:has(.colecta-company-type-combo-client) {
    display: inline-flex;
    align-items: center;
}

.dxbl-toolbar-item:has(.colecta-company-type-combo)::before,
.dxbl-toolbar-item:has(.colecta-company-type-combo-client)::before {
    margin: 0 6px 0 8px;
    white-space: nowrap;
    color: var(--bs-body-color);
    font-size: 0.8125rem;
}

.dxbl-toolbar-item:has(.colecta-company-type-combo)::before {
    content: "Tipo";
}

/* Tela de Parceria — a única com DOIS combos: quando o combo do cliente está na mesma toolbar, o
   primeiro combo é o do fornecedor. O rótulo sai do contexto porque a classe do combo é decidida por
   posição, sem acesso à view (ver CompanyTypeSelectorController.ComboCssClasses). */
.dxbl-btn-toolbar:has(.colecta-company-type-combo-client)
.dxbl-toolbar-item:has(.colecta-company-type-combo)::before {
    content: "Fornecedor";
}

.dxbl-toolbar-item:has(.colecta-company-type-combo-client)::before {
    content: "Cliente";
}

/* Botão "?" de ajuda à DIREITA do "Atualizar" (Refresh).

   Estrutura do DevExpress 24.2: .dxbl-btn-toolbar é um flex container cujos filhos são grupos de botões,
   e o template do XAF insere um .dxbl-toolbar-placeholder (flex: 1) antes do Refresh — é o espaçador que
   joga o Refresh para o canto direito. Como o placeholder é do template, nenhuma combinação de Category
   ou Index no Model coloca uma Action depois dele (documentado em ColectaHelpController).

   `order: 1` resolve sem tocar no template: todos os grupos ficam em order 0 (inclusive placeholder e
   Refresh) e o grupo do help vai para o fim da linha. A classe vem de CustomCSSClassName no Model
   (ver Model.DesignedDiffs.xafml); os seletores cobrem tanto o item da toolbar quanto o botão. */
.dxbl-btn-toolbar > .dxbl-btn-group:has(.colecta-help-action) {
    order: 1;
}

/* Rótulo do filtro ativo ("Filtro: 32 empresas, 2 parcerias") na toolbar das grades de Produto e de
   Empresa. A caption já é curta por contagem (ver FilterSelectionSummary), mas a contenção abaixo
   garante que nenhuma caption futura volte a estourar a toolbar — o sintoma original era o rótulo
   ficando com centenas de caracteres ao selecionar 30+ empresas.

   A classe vem de CustomCSSClassName no Model da Action (ver Model.DesignedDiffs.xafml); a
   documentação do DevExpress só garante que ela vai "no controle que visualiza a Action", então os
   seletores cobrem tanto o item da toolbar quanto o botão em si. Estrutura do DevExpress 24.2:
   .dxbl-toolbar > .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn */
.dxbl-toolbar-item.colecta-filter-summary,
.dxbl-toolbar-item:has(> .colecta-filter-summary) {
    max-width: 28rem;
    min-width: 0;
}

.dxbl-toolbar-item.colecta-filter-summary > .dxbl-btn,
.dxbl-toolbar-item:has(> .colecta-filter-summary) > .dxbl-btn,
.dxbl-btn.colecta-filter-summary {
    max-width: 100%;
    cursor: default;
}

.dxbl-toolbar-item.colecta-filter-summary > .dxbl-btn > span,
.dxbl-toolbar-item:has(> .colecta-filter-summary) > .dxbl-btn > span,
.dxbl-btn.colecta-filter-summary > span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.colecta-ft-raw-json textarea {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    white-space: pre;
}

/* Modo escuro — validar após o piloto (mesmas variáveis) */
[data-bs-theme="dark"] {
    --colecta-brand: #8b78ff;
    --colecta-brand-2: #a493ff;
    --bs-primary: var(--colecta-brand);
    --bs-primary-rgb: 139, 120, 255;
    --bs-link-color: var(--colecta-brand);
    --bs-link-hover-color: var(--colecta-brand-2);
}