/*
    Camada de aspeto ("skin") por cima do tema Fluent do XAF/DevExpress. Só CSS: não muda
    comportamento nem vistas, e desliga-se tirando o <link> em Pages/_Host.cshtml.

    A COR. Toda a cor de marca desta folha sai de UMA família, a rampa de acento do próprio tema
    (--dxds-primary-10 ... 170, cujo passo 90 é a cor de base). Nada aqui escreve um azul à mão:
      --i9-accent         o passo 90   botões cheios, ligações, traço do que está ativo
      --i9-accent-strong  o passo 100  o mesmo ao passar o rato
      --i9-bar            o passo 110  a barra de topo (branco por cima: 7,5:1 no azul de origem)
      --i9-accent-soft / -softer       a mesma cor a 12% e 6% por cima do fundo (fundos suaves, no claro e no escuro)
    Como a rampa é a do tema, a skin acompanha o acento que cada pessoa escolhe no seletor de temas
    (Blue, Mint, Rust, ...) e a cor própria do cliente (Sistema › Configuração › Aparência), que
    redefine a rampa e estas variáveis em /aparencia/estilo.css, carregado a seguir a esta folha.
    O branco por cima do passo 90 e do 110 é o que o tema já garante; para uma cor do cliente é a
    «Aparência» que o exige (contraste de pelo menos 4,5:1 com branco) antes de gravar.

    Os neutros (texto, fundos, linhas) vêm dos tokens --dxds-color-*-neutral-*, que o tema troca no
    modo escuro; por isso esta folha serve o claro e o escuro sem regras duplicadas. Os verdes,
    violetas e âmbares dos cartões são as cores das famílias dos ícones (Module\Images\LEIAME-icones.md)
    e ficam iguais em todos os clientes: a cor do cliente é só a da marca.

    As regras que apanham classes internas (.dxbl-*) estão marcadas com "interno" e são as que
    podem precisar de revisão quando a DevExpress subir de versão.
*/

:root {
    --i9-accent: var(--dxds-primary-90, #0f6cbd);
    --i9-accent-strong: var(--dxds-primary-100, #0d64b0);
    --i9-bar: var(--dxds-primary-110, #0b5699);
    --i9-bar-deep: var(--dxds-primary-130, #053b6c); /* a ponta escura dos fundos em gradiente (página de entrada) */
    /* a cor da marca quando é texto ou traço sobre o fundo da página (e sobre os fundos suaves): o passo do tema para texto
       (mais claro no escuro) puxado 18% para a cor da tinta, para dar sempre 4,5:1 mesmo sobre o fundo suave */
    --i9-accent-text: color-mix(in srgb, var(--dxds-color-content-primary-default-rest, var(--i9-accent)) 82%, var(--i9-ink, #161616));
    --i9-accent-soft: color-mix(in srgb, var(--i9-accent) 12%, transparent);
    --i9-accent-softer: color-mix(in srgb, var(--i9-accent) 6%, transparent);
    /* a mesma cor sem transparência, para o que é fixo e não pode deixar ver o que passa por baixo (cabeçalhos) */
    --i9-accent-tint: color-mix(in srgb, var(--i9-accent) 12%, var(--dxds-color-surface-neutral-default-rest, #fffffe));

    --i9-ink: var(--dxds-color-content-neutral-default-rest, #161616);
    --i9-muted: var(--dxds-color-content-neutral-subdued-rest, #5c5c5a);
    --i9-bg: var(--dxds-color-surface-neutral-subdued-rest, #f4f4f3);
    --i9-card: var(--dxds-color-surface-neutral-default-rest, #fffffe);
    --i9-line: color-mix(in srgb, var(--i9-ink) 14%, transparent);
    --i9-line-soft: color-mix(in srgb, var(--i9-ink) 7%, transparent);
    --i9-danger: var(--dxds-color-content-danger-default-rest, #c62828);
    --i9-radius: 16px;
    --i9-radius-sm: 10px;

    /* as famílias dos ícones: cada área tem a sua (os cartões da página inicial usam-nas) */
    --i9-area-processos: #7c3aed;
    --i9-area-pessoas: #0d9488;
    --i9-area-comercial: #059669;
    --i9-area-documentos: #2563eb;
    --i9-area-servicos: #0891b2;
    --i9-area-marketing: #d97706;
    --i9-area-contabilidade: #4f46e5;

    /*
        Os estados das listas (etiquetas «pill»): uma cor por significado, e só cinco significados — neutro, em curso,
        ok, erro, aviso (EstadosEmEtiquetas, no módulo). São cores de significado, não da marca: ficam iguais com
        qualquer «Aparência». O texto da etiqueta é a cor misturada a 50% com a tinta do tema (escura no claro, clara no
        escuro) e o fundo é a mesma cor a 16% sobre o cartão: dá mais de 4,5:1 nos dois temas (há um teste que o confere).
    */
    --i9-estado-neutro: var(--i9-muted);
    --i9-estado-curso: #2563eb;
    --i9-estado-ok: #16a34a;
    --i9-estado-erro: #dc2626;
    --i9-estado-aviso: #d97706;

    /* o texto do vermelho de perigo (os botões de apagar e rejeitar, os avisos de erro): o vermelho do tema misturado com a
       tinta, para dar leitura sobre o cartão claro e sobre o escuro (o vermelho do tema sozinho dá 4,4:1 no escuro) */
    --i9-danger-text: color-mix(in srgb, var(--i9-danger) 78%, var(--i9-ink));

    /*
        As variáveis que as outras folhas e o explorador das bibliotecas pedem com um valor de reserva fixo («var(--i9-surface,
        #fff)»): sem elas a reserva, clara, ficava fixa no tema escuro e o texto do tema (claro) ficava sobre branco.
        Definem-se aqui a partir dos neutros do tema, que mudam com o claro e o escuro.
    */
    --i9-surface: var(--i9-card);
    --i9-surface-2: color-mix(in srgb, var(--i9-ink) 5%, var(--i9-card));
    --i9-surface-alt: color-mix(in srgb, var(--i9-ink) 3%, transparent);
    --i9-realce: color-mix(in srgb, var(--i9-ink) 9%, transparent);
    --i9-realce-forte: color-mix(in srgb, var(--i9-ink) 16%, transparent);
    --i9-text-soft: var(--i9-muted);
}

/*
    As cores de significado que o explorador e os fluxos pedem (ok, não, aviso, erro, roxo): no tema claro ficam as de reserva
    (as que já tinham); no escuro, os verdes e vermelhos escuros dessas reservas davam 2:1 sobre o fundo escuro, e
    passam a misturar-se com a tinta clara do tema.
*/
.dxbl-theme-dark {
    --i9-ok: color-mix(in srgb, var(--i9-estado-ok) 70%, var(--i9-ink));
    --i9-nao: color-mix(in srgb, var(--i9-estado-erro) 70%, var(--i9-ink));
    --i9-erro: color-mix(in srgb, var(--i9-estado-erro) 70%, var(--i9-ink));
    --i9-roxo: color-mix(in srgb, var(--i9-area-processos) 70%, var(--i9-ink));
}

.app,
.app .dxbl-grid,
.app .dxbl-fl {
    color: var(--i9-ink);
}

/* ---- ligações e foco -------------------------------------------------- */

/* Um anel de foco que se vê no teclado, na cor da marca, em tudo o que se pode focar. Os campos de texto e de lista
   (.dxbl-text-edit) ficam de fora: o contentor já mostra o contorno de foco do tema, e o anel no <input> de dentro
   desenhava um segundo contorno arredondado à volta do texto. */
.app :is(a, button, input, select, textarea, [tabindex]):not(.dxbl-text-edit *):focus-visible {
    outline: 2px solid var(--i9-accent-text);
    outline-offset: 2px;
}

/* No texto corrente as ligações levam a cor da marca; na navegação e nas grelhas herdam a do contexto. */
.app .xaf-tabbed-mdi a:not(.dxbl-btn):not([role="menuitem"]):not(.dxbl-tab) {
    color: var(--i9-accent-text);
}

/* ---- moldura ---------------------------------------------------------- */

/* A barra de topo: a cor da marca, e o que está por cima (logótipo, título, ícones) a claro. */
/* interno: o tema pinta a barra com .dxbl-theme-fluent .app .header, daí o prefixo (mais específico) */
.dxbl-theme-fluent .app .header {
    background: var(--i9-bar);
    color: #fff;
    border-bottom: 0;
    box-shadow: none;
}

.app .header [role="heading"],
.app .header .xaf-view-caption-lg,
.app .header .dxbl-btn,
.app .header .dxbl-btn span {
    color: #fff;
}
/* (o painel das definições, mais abaixo, repõe as cores normais) */

/* Os ícones do Fluent são SVG de uma cor só servidos como imagem: passam a branco por filtro. */
.app .header img.dxbl-image,
.app .header .header-logo {
    filter: brightness(0) invert(1);
}

/* O ícone do título fica a cores, no círculo branco que o próprio tema lhe põe na barra escura. */
.app .header .xaf-caption-icon-container img.dxbl-image {
    filter: none;
}

.app .header svg.dxbl-image {
    color: #fff;
    fill: currentColor;
}

/* interno: a conta e as definições são botões só com ícone (um <div class="xaf-image"> desenhado pelo tema) */
.app .header .xaf-image {
    filter: brightness(0) invert(1);
}

.app .header .dxbl-btn:hover,
.app .header .dxbl-btn:focus-visible {
    background: rgba(255, 255, 255, .16);
}

/*
    A troca de organização (a ação «Trocar de organização», com o nome da organização em que se está): é um botão
    «secundário» do tema, de fundo claro, e com o texto a branco da regra acima ficava branco sobre branco até passar
    o rato. Na barra lê-se sempre: fundo transparente, texto claro e um contorno suave.
*/
.app .header .dxbl-btn.xaf-action.dxbl-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--i9-radius-sm);
}

.app .header .dxbl-btn.xaf-action.dxbl-btn-secondary:hover,
.app .header .dxbl-btn.xaf-action.dxbl-btn-secondary:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
}

.app .header .dxbl-btn.xaf-action.dxbl-btn-secondary .xaf-toolbar-item-icon {
    filter: brightness(0) invert(1);
}

/*
    O painel das definições (a roda dentada: tamanho, idioma, tema e cores) abre a partir da barra, dentro de
    .header, e herdava dela o texto e os ícones brancos, e o fundo suave dos botões: legendas invisíveis sobre o
    cartão claro. Dentro do painel valem as cores normais do tema (claro e escuro), que vêm dos neutros.
*/
.app .header .settings-bar {
    color: var(--i9-ink);
    background: var(--i9-card);
}

.app .header .settings-bar :is(.dxbl-btn, .dxbl-btn span, .theme-group, .nav-item, label, span) {
    color: inherit;
}

.app .header .settings-bar .dxbl-btn:hover,
.app .header .settings-bar .dxbl-btn:focus-visible {
    background: var(--i9-accent-softer);
}

.app .header .settings-bar :is(img.dxbl-image, .xaf-image) {
    filter: none;
}

.app .header .settings-bar svg.dxbl-image,
.app .header .settings-bar .dxbl-btn svg {
    color: var(--i9-ink);
    fill: currentColor;
}

.app .header .settings-bar :is(a, button, [tabindex]):focus-visible {
    outline-color: var(--i9-accent-text);
}

.app .header :is(a, button, [tabindex]):focus-visible {
    outline-color: #fff;
}

.app .main-ribbon {
    background: var(--i9-bg);
    border-bottom: 0;
}

/* interno: contentores do ribbon, para a barra de ações assentar no fundo */
.app .main-ribbon dxbl-ribbon,
.app .main-ribbon .dxbl-ribbon-toolbar,
.app .main-ribbon .dxbl-tabs-content,
.app .main-ribbon .dxbl-tabs-content-panel,
.app .main-ribbon .dxbl-ribbon__root {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app .main-ribbon .dxbl-tabs-tablist {
    background: transparent;
    border-bottom: 1px solid var(--i9-line);
}

.app .dxbl-ribbon-button,
.app .main-ribbon .dxbl-btn,
.app .dxbl-btn {
    border-radius: var(--i9-radius-sm);
}

/* interno: o separador ativo (ribbon, vistas abertas e separadores das fichas) é um <dxbl-tab-item class="dxbl-active">:
   a cor da marca no texto e um traço grosso por baixo */
.app dxbl-tab-item.dxbl-active,
.app dxbl-tab-item.dxbl-active .dxbl-tabs-item-text,
.app dxbl-tab-item.dxbl-active span {
    color: var(--i9-accent-text);
    font-weight: 600;
}

.app dxbl-tab-item.dxbl-active {
    box-shadow: inset 0 -3px 0 var(--i9-accent);
}

/* ---- botões ----------------------------------------------------------- */

/*
    A ação principal de cada ecrã em cor cheia, as secundárias em contorno, as destrutivas em vermelho sóbrio.
    Os botões da barra de ações do XAF só se distinguem pela legenda (data-action-name), que é a da língua do
    portal; por isso estão aqui o português e o inglês. Uma ação com outra legenda fica como secundária.
    Uma ação simples é um <button>; uma com seta ao lado («Novo ▾») é um <div class="dxbl-btn-split"> com dois
    botões dentro, e é o contentor que se pinta.
*/
.app .main-ribbon :is(button.xaf-action.ribbon-button, .dxbl-btn-split.dxbl-ribbon-button) {
    border: 1px solid var(--i9-line);
    background: var(--i9-card);
    border-radius: var(--i9-radius-sm);
}

.app .main-ribbon :is(button.xaf-action.ribbon-button, .dxbl-btn-split.dxbl-ribbon-button):hover:not(:disabled) {
    background: var(--i9-accent-softer);
    border-color: var(--i9-accent);
}

/* principal */
.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Gravar"], [data-action-name="Save"], [data-action-name="Novo"], [data-action-name="New"],
                 [data-action-name="Aprovar"], [data-action-name="Approve"], [data-action-name="Submeter"], [data-action-name="Submit"],
                 [data-action-name="Gravar e Fechar"], [data-action-name="Save and Close"]) {
    background: var(--i9-accent);
    border-color: var(--i9-accent);
    color: #fff;
    font-weight: 600;
}

.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Gravar"], [data-action-name="Save"], [data-action-name="Novo"], [data-action-name="New"],
                 [data-action-name="Aprovar"], [data-action-name="Approve"], [data-action-name="Submeter"], [data-action-name="Submit"],
                 [data-action-name="Gravar e Fechar"], [data-action-name="Save and Close"]) :is(span, .dxbl-btn, svg) {
    color: #fff;
}

.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Gravar"], [data-action-name="Save"], [data-action-name="Novo"], [data-action-name="New"],
                 [data-action-name="Aprovar"], [data-action-name="Approve"], [data-action-name="Submeter"], [data-action-name="Submit"],
                 [data-action-name="Gravar e Fechar"], [data-action-name="Save and Close"]) img {
    filter: brightness(0) invert(1);
}

.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Gravar"], [data-action-name="Save"], [data-action-name="Novo"], [data-action-name="New"],
                 [data-action-name="Aprovar"], [data-action-name="Approve"], [data-action-name="Submeter"], [data-action-name="Submit"],
                 [data-action-name="Gravar e Fechar"], [data-action-name="Save and Close"]):hover {
    background: var(--i9-accent-strong);
    border-color: var(--i9-accent-strong);
}

/* destrutiva */
.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Apagar"], [data-action-name="Delete"], [data-action-name="Rejeitar"], [data-action-name="Reject"],
                 [data-action-name="Anular"], [data-action-name="Cancelar pedido"]) {
    border-color: color-mix(in srgb, var(--i9-danger) 45%, transparent);
}

.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Apagar"], [data-action-name="Delete"], [data-action-name="Rejeitar"], [data-action-name="Reject"],
                 [data-action-name="Anular"], [data-action-name="Cancelar pedido"]) :is(span, .dxbl-btn, svg) {
    color: var(--i9-danger-text);
}

.app :is(button:not(:disabled), .dxbl-btn-split:has(> button:not(:disabled))):is(
                 [data-action-name="Apagar"], [data-action-name="Delete"], [data-action-name="Rejeitar"], [data-action-name="Reject"],
                 [data-action-name="Anular"], [data-action-name="Cancelar pedido"]):hover {
    background: color-mix(in srgb, var(--i9-danger) 10%, transparent);
    border-color: var(--i9-danger);
}

/*
    Os botões das notícias («Só as não lidas», «Marcar todas como lidas», «Todas as notícias»): são uma barra de
    ferramentas do tema, em que cada grupo é um bloco só de botões colados e sem contorno próprio. Têm o aspeto dos
    botões secundários do resto do portal (os da barra de ações): contorno, fundo do cartão, cantos arredondados,
    fundo suave e traço da marca ao passar o rato, e espaço entre eles.
*/
.app .i9-noticias__barra .dxbl-btn-group {
    gap: .5rem;
}

.app .i9-noticias__barra .dxbl-btn.dxbl-toolbar-btn:not(.dxbl-btn-tool) {
    border: 1px solid var(--i9-line);
    background: var(--i9-card);
    color: var(--i9-ink);
    border-radius: var(--i9-radius-sm);
    padding: .3rem .75rem;
}

.app .i9-noticias__barra .dxbl-btn.dxbl-toolbar-btn:hover:not(:disabled) {
    background: var(--i9-accent-softer);
    border-color: var(--i9-accent);
}

/* ---- navegação -------------------------------------------------------- */

.app .xaf-sidebar {
    background: var(--i9-card);
    border-right: 1px solid var(--i9-line);
}

.app .xaf-navmenu .dxbl-accordion-group-header {
    border-radius: var(--i9-radius-sm);
    margin: 1px 8px;
    border: 0;
    font-weight: 600;
}

.app .xaf-navmenu .dxbl-accordion-group-header:hover {
    background: var(--i9-accent-softer);
}

/*
    Os três estados do menu, sem traço à esquerda: um traço inset num cartão arredondado desenha uma meia-lua que sai do
    alinhamento do fundo (era o «rasto» à esquerda). Distinguem-se pelo fundo e pelo peso do texto:
      - área aberta: fundo muito suave e a cor da marca;
      - área com o item ativo: fundo suave (o do item ativo) e a cor da marca;
      - item ativo: o fundo suave, a cor da marca e o texto a negrito.
    O ícone mantém a cor da família.
*/
/* A área aberta: o cabeçalho ganha o fundo suave e a cor da marca; o ícone mantém a cor da família. */
.app .xaf-navmenu .dxbl-accordion-group-header[aria-expanded="true"] {
    background: var(--i9-accent-softer);
    color: var(--i9-accent-text);
}

/* A área que tem o item ativo leva o fundo um pouco mais carregado (o :has não existe em navegadores antigos: fica só o da área aberta). */
.app .xaf-navmenu dxbl-group-control:has(a.dxbl-accordion-item-content.dxbl-active) > .dxbl-accordion-group-header {
    background: var(--i9-accent-soft);
    color: var(--i9-accent-text);
}

/* o item selecionado passa a pílula clara na cor da marca, em vez da barra cinzenta */
.app .xaf-navmenu .xaf-nav-item,
.app .xaf-navmenu .dxbl-accordion-item,
.app .xaf-navmenu .xaf-nav-link {
    border-radius: var(--i9-radius-sm);
}

.app .xaf-navmenu .xaf-nav-item,
.app .xaf-navmenu .dxbl-accordion-item {
    margin-left: 8px;
    margin-right: 8px;
}

/* interno: o item aberto é o <a class="dxbl-accordion-item-content dxbl-active">.
   Leva !important porque o tema pinta-o com regras mais específicas. */
.app .xaf-sidebar .xaf-navmenu a.dxbl-accordion-item-content.dxbl-active,
.app .xaf-navmenu .dxbl-accordion-item-content.dxbl-active {
    background: var(--i9-accent-soft) !important;
    color: var(--i9-accent-text) !important;
    font-weight: 600;
    border-radius: var(--i9-radius-sm);
    box-shadow: none;
}

.app .xaf-navmenu .dxbl-accordion-item-content.dxbl-active a,
.app .xaf-navmenu .dxbl-accordion-item-content.dxbl-active .xaf-nav-link {
    color: inherit;
}

.app .xaf-navmenu .dxbl-accordion-item-content:hover {
    background: var(--i9-accent-softer);
    border-radius: var(--i9-radius-sm);
}

/* ---- conteúdo em cartão ---------------------------------------------- */

.app .xaf-tabbed-mdi > .dxbl-tabs-content-panel {
    background: var(--i9-bg);
    padding: 0 12px 12px;
}

.app .xaf-tabbed-mdi > .dxbl-tabs-content-panel > .dxbl-tabs-content {
    background: var(--i9-card);
    border: 1px solid var(--i9-line);
    border-radius: var(--i9-radius);
    box-shadow: none;
    overflow: hidden;
}

.app .xaf-tabbed-mdi > .dxbl-tabs-tablist {
    background: var(--i9-bg);
    border-bottom: 0;
    padding: 4px 12px 0;
}

/* ---- grelhas ---------------------------------------------------------- */

.app .dxbl-grid {
    border: 0;
    font-size: .875rem;
}

/* cabeçalho com o fundo suave da cor da marca e um traço por baixo. O fundo vai pela variável do tema
   (o cabeçalho é fixo: opaco, para as linhas não se verem por baixo) e a regra repete a especificidade da do tema. */
.app .dxbl-grid {
    --dxbl-grid-header-bg: var(--i9-accent-tint);
}

.app .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background: var(--i9-accent-tint);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 2px solid var(--i9-accent);
    color: var(--i9-ink);
    font-weight: 600;
    font-size: .78rem;
}

/* linhas sem grade: separa-as o espaço e o realce do hover */
.app .dxbl-grid-table > tbody > tr > td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--i9-line-soft);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.app .dxbl-grid-table > tbody > tr:hover > td {
    background: var(--i9-accent-softer);
}

/* a linha selecionada: fundo mais carregado e um traço na primeira célula, que não depende só da cor */
.app .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td,
.app .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td {
    background: var(--i9-accent-soft);
}

.app .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:first-child,
.app .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--i9-accent);
}

/* interno: o cabeçalho dos grupos da grelha («Tipo: Atividade ...») */
.app .dxbl-grid-table > tbody > tr.dxbl-grid-group-row > td {
    background: var(--i9-accent-tint);
    font-weight: 600;
}

/* interno: o funil de filtro de cada coluna só aparece ao passar o rato pelo cabeçalho.
   Tira o ruído de uma fila de ícones sem tirar a função. */
.app .dxbl-grid-table > thead .dxbl-grid-filter-menu-funnel-btn {
    opacity: 0;
    transition: opacity .12s ease-in-out;
    border-color: transparent;
}

.app .dxbl-grid-table > thead > tr > th:hover .dxbl-grid-filter-menu-funnel-btn,
.app .dxbl-grid-table > thead .dxbl-grid-filter-menu-funnel-btn:focus-visible,
.app .dxbl-grid-table > thead .dxbl-grid-filter-menu-funnel-btn.dxbl-active {
    opacity: 1;
}

/* ---- estados em etiquetas e cor do texto condicional ------------------ */

/*
    Os estados das listas (o estado da atividade, do pedido, do envio, do correio, da verificação do arquivo…) vêm como
    etiquetas «pill» com a cor do significado. A classe da célula (i9-estado i9-estado--ok) é posta pelo
    AspetoDasCelulasController, a partir do tipo da coluna, pelo gancho CustomizeElement da grelha do XAF Blazor; aqui só
    se desenha. A cor de cada significado são as variáveis --i9-estado-* (no :root): o texto é essa cor misturada a 50% com a
    tinta do tema (escura no claro, clara no escuro) e o fundo a mesma cor a 16% sobre o cartão, o que dá mais de 4,5:1
    nos dois temas. Não é só a cor que diz o estado: a etiqueta tem sempre o texto do estado.
*/
.app .i9-estado,
.app .i9-estado--neutro { --i9-e: var(--i9-estado-neutro); }
.app .i9-estado--em-curso { --i9-e: var(--i9-estado-curso); }
.app .i9-estado--ok { --i9-e: var(--i9-estado-ok); }
.app .i9-estado--erro { --i9-e: var(--i9-estado-erro); }
.app .i9-estado--aviso { --i9-e: var(--i9-estado-aviso); }

/* interno: o conteúdo de uma célula de enumerado é um <div class="xaf-combobox-item"> (ícone opcional e texto) */
.app td.i9-estado > .xaf-combobox-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .1rem .65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--i9-e) 40%, transparent);
    background: color-mix(in srgb, var(--i9-e) 16%, var(--i9-card));
    color: color-mix(in srgb, var(--i9-e) 50%, var(--i9-ink));
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.app td.i9-estado > .xaf-combobox-item > .xaf-wrap-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app td.i9-estado > .xaf-combobox-item > img {
    flex: none;
    width: 14px;
    height: 14px;
}

/*
    A cor condicional do texto (as regras de aparência com FontColor): a regra diz «vermelho», «azul», «cinzento» e o
    controlador lê o que isso quer dizer (CoresDoTexto) e dá à célula a classe do significado. Desenha-se com as
    mesmas cores dos estados misturadas com a tinta do tema, e por isso lê-se no claro e no escuro (60% da cor: sobre o
    cartão dá mais de 6:1 nos dois temas).
*/
.app td.i9-texto--erro { color: color-mix(in srgb, var(--i9-estado-erro) 60%, var(--i9-ink)); }
.app td.i9-texto--aviso { color: color-mix(in srgb, var(--i9-estado-aviso) 60%, var(--i9-ink)); }
.app td.i9-texto--ok { color: color-mix(in srgb, var(--i9-estado-ok) 60%, var(--i9-ink)); }
.app td.i9-texto--info { color: color-mix(in srgb, var(--i9-estado-curso) 60%, var(--i9-ink)); }
.app td.i9-texto--atenuado { color: var(--i9-muted); }

/*
    Os avisos (alert) do XAF no tema escuro: o tema escuro pinta o aviso de perigo com o vermelho de conteúdo como fundo e a
    letra clara por cima (3:1). Passam a ter o fundo da cor do significado a 18% sobre o cartão e a letra dessa cor
    misturada com a tinta, como as etiquetas dos estados.
*/
.dxbl-theme-dark .alert { --i9-e: var(--i9-estado-curso); }
.dxbl-theme-dark .alert-danger { --i9-e: var(--i9-estado-erro); }
.dxbl-theme-dark .alert-warning { --i9-e: var(--i9-estado-aviso); }
.dxbl-theme-dark .alert-success { --i9-e: var(--i9-estado-ok); }

.dxbl-theme-dark .alert,
.dxbl-theme-dark .alert .xaf-alert-message,
.dxbl-theme-dark .alert .xaf-alert-text-container {
    color: color-mix(in srgb, var(--i9-e) 50%, var(--i9-ink));
}

.dxbl-theme-dark .alert {
    background-color: color-mix(in srgb, var(--i9-e) 18%, var(--i9-card));
    border-color: color-mix(in srgb, var(--i9-e) 45%, transparent);
}

/* ---- fichas ----------------------------------------------------------- */

/* interno: os grupos do esquema deixam de ser molduras cinzentas e levam o filete da cor da marca */
.app .xaf-tabbed-mdi dxbl-group-control.dxbl-group {
    border-radius: var(--i9-radius-sm);
    border-color: var(--i9-line);
}

.app .xaf-tabbed-mdi dxbl-group-control.dxbl-group > .dxbl-group-header {
    background: var(--i9-accent-softer);
    border-bottom: 1px solid var(--i9-line-soft);
    box-shadow: inset 3px 0 0 var(--i9-accent);
    color: var(--i9-accent-text);
    font-weight: 600;
}

/* Pelas variáveis do tema e não com border-radius direto: o tema arredonda também os botões
   internos (calendário, lista, limpar) a partir destas variáveis; com border-radius só na
   moldura, o botão à direita ficava quadrado e o campo parecia cortado. */
.app .dxbl-text-edit {
    --dxbl-text-edit-border-radius-s: var(--i9-radius-sm);
    --dxbl-text-edit-border-radius-m: var(--i9-radius-sm);
    --dxbl-text-edit-border-radius-l: var(--i9-radius-sm);
    /* sem o sublinhado escuro do Fluent (fundo mais negro que o resto da moldura, que não
       acompanha os cantos redondos): moldura toda da mesma cor. A linha de cor do campo em
       edição e o vermelho/verde da validação mantêm-se (regras do tema mais específicas). */
    --dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color);
    --dxbl-text-edit-underline-hovered-color: var(--dxbl-text-edit-border-hovered-color);
    --dxbl-text-edit-underline-active-color: var(--dxbl-text-edit-border-active-color);
}

/* ---- etiquetas de valor (LabelPropertyEditor) ------------------------- */

/* O editor desenha o valor e, por baixo, a legenda, com espaçamentos generosos vindos de
   estilos inline — daí os !important. Aqui ficam compactos: legenda pequena em maiúsculas
   por cima do olhar, valor colado a ela. Serve o cabeçalho das fichas (conta, ticket...). */
.app .xaf-tabbed-mdi [data-preview_orientation="column"] {
    gap: 0;
    justify-content: center;
}

.app .xaf-tabbed-mdi [data-preview_orientation="column"] > div > div {
    padding-top: 0 !important;
    line-height: 1.25;
}

.app .xaf-tabbed-mdi [data-preview_orientation="column"] > div:last-child {
    padding-top: 0 !important;
    font-size: .7rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--i9-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* interno: no cabeçalho das fichas, uma barra fina separa cada indicador do anterior
   (o :has não é suportado em navegadores antigos; aí fica simplesmente sem a barra) */
.app .xaf-tabbed-mdi .dxbl-row > dxbl-form-layout-item:has([data-preview_orientation="column"]) + dxbl-form-layout-item:has([data-preview_orientation="column"]) {
    border-left: 1px solid var(--i9-line);
}

.app .xaf-tabbed-mdi .dxbl-row > dxbl-form-layout-item:has([data-preview_orientation="column"]) + dxbl-form-layout-item:has([data-preview_orientation="column"]) .dxbl-fl-ctrl {
    padding-left: 14px;
}

/* interno: na lista de um lookup (a caixa de escolha de um campo), as colunas que referem outro registo
   — o departamento, a equipa e a função de quem se escolhe como «Responsável» — vêm do XAF como ligações
   para a ficha desse registo. Ali um clique tem de escolher a linha: a ligação deixa de receber o clique
   (que passa para a linha) e de parecer uma ligação. As listas normais ficam como estão.
   Nas janelas de escolha (listas em grelha) é o LigacoesNosLookups que as tira, com ShowLink. */
.dxbl-edit-dropdown xaf-navigation-click-helper,
.dxbl-edit-dropdown a,
.dxbl-edit-dropdown a:hover {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* ---- janelas e calendário (acabamento 3) ------------------------------- */

/* A resposta que a janela de confirmação do XAF dá por omissão («Sim», «Yes», «OK») é um botão como os outros e não se
   distinguia do «Não». Ganha a cor de marca, como o «Gravar» e o «Novo»; o «Não» fica como botão de contorno. */
.xaf-popup-dialog .dxbl-modal-footer button:not(:disabled):is([data-action-name="Sim"], [data-action-name="Yes"], [data-action-name="OK"]) {
    background: var(--i9-accent);
    border-color: var(--i9-accent);
    color: #fff;
    font-weight: 600;
}

.xaf-popup-dialog .dxbl-modal-footer button:not(:disabled):is([data-action-name="Sim"], [data-action-name="Yes"], [data-action-name="OK"]):is(:hover, :focus-visible) {
    background: var(--i9-accent-strong);
    border-color: var(--i9-accent-strong);
}

.xaf-popup-dialog .dxbl-modal-footer button:not(:disabled):is([data-action-name="Sim"], [data-action-name="Yes"], [data-action-name="OK"]) span {
    color: #fff;
}

/* interno: no calendário dos campos de data (e no do agendador) os nomes dos dias da semana vêm por extenso (domingo,
   segunda, terça…) e não cabem nas colunas dos dias: sobrepunham-se numa linha só («domingosegunda terça quartaquinta»).
   Fica a inicial de cada um, como em qualquer calendário em português; o texto inteiro continua no DOM para quem o lê. */
.dxbl-calendar .dxbl-calendar-days-of-week th {
    font-size: 0 !important;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.dxbl-calendar .dxbl-calendar-days-of-week th::first-letter {
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
}