/* ═══════════════════════════════════════════════════════════════════════════
   Bridge: tokens Lepton (--lp-*) → design tokens do Fluent UI (FAST).

   POR QUE `:root:root` E NÃO `:root`
   O Fluent emite os ~158 design tokens numa regra `:root{}` dentro de uma
   constructed stylesheet adicionada a `document.adoptedStyleSheets` (em tempo
   de avaliação do módulo, e reemitida a cada mudança de Mode/CustomColor).
   Adopted stylesheets entram no fim da lista de folhas do documento, logo
   vencem qualquer <link> em empate de especificidade. `:root:root` tem
   especificidade (0,2,0) contra (0,1,0) da regra do Fluent — vence sem
   precisar de `!important`.

   NÃO USAR `!important` PARA BRIGAR COM `:host`
   Entre árvores (documento vs shadow), declarações normais do documento vencem
   o `:host`. Mas se AMBAS forem `!important`, o shadow passa a vencer — ou
   seja, `!important` inverte a precedência contra nós.

   ALTURA É OPT-IN, NÃO GLOBAL
   O default de --base-height-multiplier nesta versão é 8 (→ 32px), não 10.
   Subir para 12 globalmente afetaria progress-ring, checkbox, radio, switch,
   tab, nav-link, textarea e option — todos usados na aplicação. Por isso o
   token é elevado apenas nos seletores que precisam de 48px.

   Este arquivo é o ÚLTIMO a carregar, para vencer o que app.css declara.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. Accent — família completa
   O CustomColor do FluentDesignTheme deriva a paleta por receita e não
   reproduz os tons do guia. Sobrescrevemos a família inteira: trocar só
   --accent-fill-* deixaria a cor do TEXTO sobre o accent vindo da receita
   (branco), e branco sobre o hover #DCAADE dá ~1.7:1 de contraste.
   ══════════════════════════════════════════════════════════════════════════ */
:root:root {
    --accent-fill-rest: var(--lp-brand);
    /* O guia clareia o fundo no hover (#DCAADE), mas isso obrigaria o texto a
       escurecer junto — trocar a cor do texto no hover fica visualmente ruim, e
       manter branco daria ~1.7:1. Escurecemos o fundo: o texto segue branco e o
       contraste sobe. Divergência registrada na fase de QA. */
    --accent-fill-hover: color-mix(in srgb, var(--lp-brand) 78%, var(--lp-brand-darker));
    --accent-fill-active: var(--lp-brand-darker);

    --foreground-on-accent-rest: var(--lp-text-on-brand);
    --foreground-on-accent-hover: var(--lp-text-on-brand);
    --foreground-on-accent-active: var(--lp-text-on-brand);

    /* Borda do botão accent (border-box do gradiente) */
    --accent-stroke-control-rest: var(--lp-brand);
    --accent-stroke-control-hover: var(--lp-brand-lighter);
    --accent-stroke-control-active: var(--lp-brand-darker);

    /* Cor de link, `code`, FluentAnchor lightweight */
    --accent-foreground-rest: var(--lp-brand);
    --accent-foreground-hover: var(--lp-brand-darker);
    --accent-foreground-active: var(--lp-brand-darker);

    /* Anel interno de foco do botão accent */
    --focus-stroke-inner: var(--lp-brand-subtle);
    --focus-stroke-outer: var(--lp-brand-lighter);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Superfícies e neutros
   O FluentDesignTheme não expõe parâmetro para a base neutra, então os cinzas
   do tema claro seriam derivados de #808080. Enumeramos os que a aplicação usa.
   ══════════════════════════════════════════════════════════════════════════ */
:root:root {
    --neutral-layer-1: var(--lp-surface);
    --neutral-layer-2: var(--lp-surface-sunken);
    --neutral-layer-3: var(--lp-gray-5);
    --neutral-layer-4: var(--lp-gray-5);
    --neutral-layer-floating: var(--lp-surface);
    --neutral-layer-card-container: var(--lp-surface);
    --neutral-fill-layer-rest: var(--lp-surface);
    --neutral-fill-layer-alt-rest: var(--lp-surface-sunken);
    --fill-color: var(--lp-surface);

    /* Botão neutro / tertiary do guia */
    --neutral-fill-rest: var(--lp-gray-5);
    --neutral-fill-hover: var(--lp-gray-3);
    --neutral-fill-active: var(--lp-gray-2);
    --neutral-stroke-control-rest: var(--lp-border);
    --neutral-stroke-control-hover: var(--lp-gray-3);
    --neutral-stroke-control-active: var(--lp-gray-2);

    /* Campos */
    --neutral-fill-input-rest: var(--lp-surface);
    --neutral-fill-input-hover: var(--lp-surface);
    --neutral-fill-input-active: var(--lp-surface);
    --neutral-fill-input-alt-rest: var(--lp-gray-5);
    --neutral-fill-input-alt-hover: var(--lp-gray-3);
    --neutral-fill-input-alt-active: var(--lp-gray-2);
    --input-placeholder-rest: var(--lp-text-placeholder);
    --input-placeholder-hover: var(--lp-text-placeholder);
    --input-filled-placeholder-rest: var(--lp-text-placeholder);
    --input-filled-placeholder-hover: var(--lp-text-placeholder);

    /* Inputs `filled` e hover de navegação */
    --neutral-fill-secondary-rest: var(--lp-gray-5);
    --neutral-fill-secondary-hover: var(--lp-gray-3);
    --neutral-fill-secondary-active: var(--lp-gray-2);

    /* Ghost / stealth do guia */
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--lp-gray-3);
    --neutral-fill-stealth-active: var(--lp-gray-2);
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: transparent;
    --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: var(--lp-gray-3);
    --neutral-fill-stealth-active-on-neutral-fill-layer-rest: var(--lp-gray-2);

    /* Marca do checkbox e do switch */
    --neutral-fill-strong-rest: var(--lp-gray-2);
    --neutral-fill-strong-hover: var(--lp-gray-1);
    --neutral-fill-strong-active: var(--lp-dark-3);
    --neutral-stroke-strong-rest: var(--lp-gray-2);
    --neutral-stroke-strong-hover: var(--lp-gray-1);
    --neutral-stroke-strong-active: var(--lp-dark-3);

    /* Texto */
    --neutral-foreground-rest: var(--lp-text);
    --neutral-foreground-hover: var(--lp-text);
    --neutral-foreground-active: var(--lp-text);
    --neutral-foreground-hint: var(--lp-text-secondary);

    /* Bordas */
    --neutral-stroke-rest: var(--lp-border);
    --neutral-stroke-hover: var(--lp-gray-3);
    --neutral-stroke-active: var(--lp-gray-2);
    --neutral-stroke-divider-rest: var(--lp-border-subtle);
    --neutral-stroke-layer-rest: var(--lp-border-subtle);
    --neutral-stroke-input-rest: var(--lp-border);

    /* Botão de limpar do FluentSearch */
    --clear-button-hover: var(--lp-gray-3);
    --clear-button-active: var(--lp-gray-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Forma, traço e elevação
   --base-horizontal-spacing-multiplier existe mas é inerte nesta versão
   (nenhum estilo o lê; o padding do botão é literal), então não o declaramos.
   --accent-base-color e --base-layer-luminance também ficam de fora: são
   lidos por JS para decidir o modo, e declará-los em CSS dessincroniza os dois.
   ══════════════════════════════════════════════════════════════════════════ */
:root:root {
    --design-unit: 4;
    --control-corner-radius: 4;
    --layer-corner-radius: 8;
    --stroke-width: 1;
    --focus-stroke-width: 2;
    --disabled-opacity: 0.4;

    /* Sombras do dark mode ficam pesadas sobre fundo claro */
    --elevation-shadow-card-rest: 0 1px 2px rgb(0 0 0 / 8%);
    --elevation-shadow-card-hover: 0 2px 6px rgb(0 0 0 / 10%);
    --elevation-shadow-card-active: 0 1px 2px rgb(0 0 0 / 8%);
    --elevation-shadow-card-focus: 0 2px 6px rgb(0 0 0 / 10%);
    --elevation-shadow-tooltip: 0 2px 8px rgb(0 0 0 / 14%);
    --elevation-shadow-flyout: 0 4px 16px rgb(0 0 0 / 14%);
    --elevation-shadow-dialog: 0 8px 32px rgb(0 0 0 / 18%);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Escala tipográfica
   Encaixa na hierarquia do guia. As font-variations do FAST fixam "wght" 400,
   o que travaria o negrito caso um dia se use uma fonte variável de peso —
   neutralizamos agora.
   ══════════════════════════════════════════════════════════════════════════ */
:root:root {
    --body-font: var(--lp-font-family);

    --type-ramp-minus-2-font-size: var(--lp-overline-size);
    --type-ramp-minus-2-line-height: var(--lp-overline-lh);
    --type-ramp-minus-1-font-size: var(--lp-body-sm-size);
    --type-ramp-minus-1-line-height: var(--lp-body-sm-lh);
    --type-ramp-base-font-size: var(--lp-body-size);
    --type-ramp-base-line-height: var(--lp-body-lh);
    --type-ramp-plus-1-font-size: var(--lp-body-md-size);
    --type-ramp-plus-1-line-height: var(--lp-body-md-lh);
    --type-ramp-plus-2-font-size: var(--lp-h5-size);
    --type-ramp-plus-2-line-height: var(--lp-h5-lh);
    --type-ramp-plus-3-font-size: var(--lp-h4-size);
    --type-ramp-plus-3-line-height: var(--lp-h4-lh);
    --type-ramp-plus-4-font-size: var(--lp-h3-size);
    --type-ramp-plus-4-line-height: var(--lp-h3-lh);
    --type-ramp-plus-5-font-size: var(--lp-h2-size);
    --type-ramp-plus-5-line-height: var(--lp-h2-lh);
    --type-ramp-plus-6-font-size: var(--lp-h1-size);
    --type-ramp-plus-6-line-height: var(--lp-h1-lh);

    --type-ramp-minus-2-font-variations: normal;
    --type-ramp-minus-1-font-variations: normal;
    --type-ramp-base-font-variations: normal;
    --type-ramp-plus-1-font-variations: normal;
    --type-ramp-plus-2-font-variations: normal;
    --type-ramp-plus-3-font-variations: normal;
    --type-ramp-plus-4-font-variations: normal;
    --type-ramp-plus-5-font-variations: normal;
    --type-ramp-plus-6-font-variations: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. Semânticas
   Estas vêm de um segundo adopted stylesheet do pacote, com o mesmo problema
   de precedência — daí `:root:root`. Com isto o workaround --lepton-info
   deixa de ser necessário.
   ══════════════════════════════════════════════════════════════════════════ */
:root:root {
    --success: var(--lp-success);
    --warning: var(--lp-warning);
    --error: var(--lp-error);
    --info: var(--lp-info);
    --highlight-bg: var(--lp-warning-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. Altura de 48px — OPT-IN
   Só os controles que o guia especifica em 48px. Todo o resto (tab, nav-link,
   checkbox, radio, switch, progress-ring, breadcrumb, tree) permanece no
   default por construção — inclusive após atualização do pacote.
   ══════════════════════════════════════════════════════════════════════════ */
fluent-button,
fluent-text-field,
fluent-search,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-date-picker,
.loading-button {
    --base-height-multiplier: 12;
}

/* fluent-option é filho light-DOM do fluent-select e HERDA o token acima —
   sem este reset o dropdown fica com itens de 48px. */
fluent-option {
    --base-height-multiplier: 8;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. Ajustes por componente
   ══════════════════════════════════════════════════════════════════════════ */

/* Botão: raio 8px do guia (o campo continua em 4px) */
fluent-button {
    --control-corner-radius: 8;
}

/* "Secondary" do guia: contorno e texto na cor de marca. O appearance
   `outline` do Fluent usa os tokens neutros, que deixariam a borda cinza.
   A borda do outline lê `--neutral-stroke-rest` (e não
   `--neutral-stroke-control-rest`, que o botão neutro usa). */
fluent-button[appearance="outline"] {
    --neutral-stroke-rest: var(--lp-brand);
    --neutral-stroke-hover: var(--lp-brand-lighter);
    --neutral-stroke-active: var(--lp-brand-darker);
    --neutral-foreground-rest: var(--lp-brand);
    --neutral-foreground-hover: var(--lp-brand-lighter);
    --neutral-foreground-active: var(--lp-brand-darker);
}

/* Tamanhos Small (40px) e Large (56px) do guia */
fluent-button.lp-button--small {
    --base-height-multiplier: 10;
}

fluent-button.lp-button--large {
    --base-height-multiplier: 14;
}

/* Ghost / icon-only: quadrado com raio 4px */
fluent-button.lp-button--icon {
    --control-corner-radius: 4;
}

/* O breadcrumb das páginas de detalhe vem imediatamente antes do cabeçalho e
   sem margem própria, encostando no <h1>. */
fluent-breadcrumb {
    display: block;
    margin-bottom: var(--lp-space-4);
}

/* A zona de arrastar do FluentInputFile vem com um cinza pesado (#D3D3D3) e
   borda tracejada na cor de accent, virando um bloco chapado no meio da
   página. Aqui fica superfície clara, e o realce em cor de marca só no hover. */
div.fluent-inputfile-container {
    /* !important porque o cinza do componente vence por caminho que a folha
       normal não alcança — a borda obedece, o fundo não. */
    background-color: var(--lp-gray-6) !important;
    border-color: var(--lp-border);
    border-radius: var(--lp-radius-control);
}

div.fluent-inputfile-container:hover {
    background: var(--lp-brand-subtle);
    border-color: var(--lp-brand);
}

/* O FluentDataGrid escreve `height` e `overflow: auto` INLINE em cada célula —
   por isso o `!important`: nenhuma folha alcança estilo inline. Com `overflow:
   auto`, conteúdo maior que a altura calculada fazia a célula ganhar barra de
   rolagem própria, comendo 15px de cada linha em todas as listagens.

   Mexer só no overflow, e NÃO na altura: o grid usa `align-items: center`, então
   a célula não estica para a altura da faixa. Com `height: auto` cada uma fica na
   altura do próprio conteúdo e as divisas de baixo desalinham entre colunas,
   desenhando um degrau em volta da coluna mais alta. A altura inline do Fluent é
   igual para todas as células da linha, que é o que mantém a divisa reta. */
.fluent-data-grid td,
.fluent-data-grid th {
    overflow: visible !important;
}

/* Campo inválido: borda de erro. O Fluent marca o host quando o EditContext
   invalida o campo. */
fluent-text-field[aria-invalid="true"],
fluent-number-field[aria-invalid="true"],
fluent-select[aria-invalid="true"],
fluent-combobox[aria-invalid="true"],
fluent-text-area[aria-invalid="true"],
fluent-date-picker[aria-invalid="true"] {
    --neutral-stroke-input-rest: var(--lp-error);
    --neutral-stroke-rest: var(--lp-error);
    --neutral-stroke-hover: var(--lp-error);
}

/* Badge: 24px de altura e raio 7px não têm token — a altura vem da rampa
   tipográfica mais padding. O part `control` é exposto pelo componente.
   Sem `!important`: contra `:host` a regra externa já vence, e usar
   `!important` inverteria a precedência a favor do shadow. */
fluent-badge:not([circular])::part(control) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--lp-radius-badge);
    font-weight: var(--lp-weight-medium);
    /* A rampa `minus-1` tem line-height 24px, que somado à borda levaria o
       badge a 26px — `height` fixo com border-box mantém os 24px do guia. */
    line-height: 1;
}

/* Rótulo de campo em bold: as partials de tipografia do FAST fixam
   `font-weight: initial`, então herança não funciona — precisa do part. */
fluent-text-field::part(label),
fluent-number-field::part(label),
fluent-select::part(label),
fluent-combobox::part(label),
fluent-text-area::part(label),
fluent-date-picker::part(label) {
    font-weight: var(--lp-weight-bold);
    color: var(--lp-text);
}

/* Textarea: altura do guia. O componente calcula `height: multiplier * 2`,
   então mantemos o multiplier no default e ajustamos o part. */
fluent-text-area::part(control) {
    min-height: var(--lp-textarea-height);
}

/* Campos ocupam a largura do container.

   `min-width: 0` é obrigatório junto do `width: 100%`: o fluent-select traz
   `min-width: 250px` próprio, que vence o width e faz o componente VAZAR do
   container quando ele é menor que isso — o campo passa por cima do que vem
   depois. Apareceu no filtro de 210px do card de atividade recente, cobrindo
   o link "Ver logs", e afetaria toda grid de filtros com coluna estreita. */
fluent-text-field,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-search,
fluent-date-picker,
fluent-text-area {
    width: 100%;
    min-width: 0;
}

/* O select e o combobox pintam o interior com os tokens de fill NEUTRO (os
   mesmos do botão neutro, cinza), não com os de input — o que deixaria o campo
   cinza. O guia pede superfície branca em todos os campos. */
fluent-select,
fluent-combobox {
    --neutral-fill-rest: var(--lp-surface);
    --neutral-fill-hover: var(--lp-surface);
    --neutral-fill-active: var(--lp-surface);
}

/* A top bar é própria (AppTopBar), não mais o FluentHeader — por isso não há
   override de `header.header.header` aqui. */

/* ══════════════════════════════════════════════════════════════════════════
   8. Correções do reboot.css do pacote
   ══════════════════════════════════════════════════════════════════════════ */

/* reboot.css aplica `border: 1px solid black` em input/button/select/textarea
   nativos. Invisível no tema escuro, grotesco no claro. Só afeta controles
   NÃO-Fluent (ex.: os inputs HTML da tela de login). */
input:not([type="checkbox"]):not([type="radio"]),
select,
optgroup,
textarea {
    border: var(--lp-border-width) solid var(--lp-border);
}

button {
    border-radius: var(--lp-radius-button);
}