/* ============================================================================
   TEMA APIBRASIL — CONSOLES (conta + administração)

   Este arquivo veste as DUAS telas de console do Keycloak com o mesmo desenho
   da tela de login: mesma paleta, mesmos raios, mesma tipografia, mesma
   geometria de campo e botão, mesmo fundo.

   O CSS do login mora em `login/resources/css/` e o nome dele carrega a data
   (rotaciona a cada mudança, por cache-busting) — por isso não está citado
   aqui por nome: a citação envelheceria na primeira troca.

   ─── O ARQUIVO É O MESMO NOS DOIS TEMAS, E ISSO É DE PROPÓSITO ──────────────

   Ele existe duas vezes, byte a byte:

       account/resources/css/apibrasil-console-20260825.css
       admin/resources/css/apibrasil-console-20260825.css

   O Keycloak resolve `styles=` DENTRO do tipo de tema (`account`, `admin`,
   `login`): não existe caminho de um para o outro, e `import=` traz o tema
   pai, não um irmão. Ou se duplica o arquivo, ou se serve o CSS de um host
   externo — o que ataria o console de administração a um terceiro no ar.
   Duplicar ganha.

   >>> MEXEU NUM, MEXA NO OUTRO. `diff` entre os dois é o teste, e ele está no
   >>> `themes/verificar-consoles.sh`: saída diferente de vazio é a duplicação
   >>> começando a divergir.

   ─── ESCURO, COMO A PORTA ──────────────────────────────────────────────────

   A versão anterior deste arquivo era clara "e só clara", com o motivo escrito
   no topo: eram ~1.800 linhas pintando por cima do PatternFly e não existe
   preview estático do console para conferir. O motivo era legítimo e agora
   está pago de outro jeito — não pintando por cima, mas TROCANDO A FONTE das
   cores. Aqui quase nada é hex: as regras leem variáveis do PatternFly, e as
   variáveis leem os tokens do painel logo abaixo. Uma cor errada erra num
   lugar só.

   O que sobra de risco é honesto e vale dizer: **isto não foi visto rodando**.
   Não há preview do console (as duas telas são SPAs React servidas pelo
   Keycloak), então a verificação real é abrir `/realms/<realm>/account` e
   `/admin/<realm>/console` num Keycloak com o tema montado. O README lista o
   que olhar, tela por tela.

   ─── VERSÃO DO PATTERNFLY ──────────────────────────────────────────────────

   Alvo: **PatternFly v5** (prefixo `--pf-v5-`), que é o que o Keycloak 26.x
   serve nos dois consoles. O PatternFly v6 renomeou o sistema inteiro de
   tokens (`--pf-t--global--…`): numa subida de major este arquivo não
   "degrada", ele para de valer de uma vez e a tela volta ao PatternFly cru. É
   o modo certo de falhar — feio, não quebrado.

   ─── SOBRE O `!important` ──────────────────────────────────────────────────

   Mesma regra do tema de login, e aqui com mais motivo: o CSS do PatternFly
   entra depois do nosso na cascata e traz especificidade alta por componente.
   Valor visual leva `!important`; o que o PatternFly precisa calcular sozinho
   (grid da página, `position: sticky`, `z-index`) fica sem — sequestrar essas
   três é como se quebra o layout de um SPA sem perceber.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS — os mesmos tripletos HSL de `styles/globals.css`.

   A fonte da verdade é o painel; isto é cópia manual, como no tema de login. A
   lista é curta de propósito: só o que estas telas pintam.
   -------------------------------------------------------------------------- */
:root {
    --background: 231 42% 6%;
    --foreground: 220 40% 98%;

    --card: 231 36% 9%;
    --card-foreground: 220 40% 98%;

    --primary: 238 88% 74%;
    --primary-foreground: 231 47% 6%;
    --primary-hover: 238 88% 80%;

    --muted: 231 26% 14%;
    --muted-foreground: 230 14% 72%;

    --accent: 231 28% 15%;
    --accent-foreground: 220 40% 98%;

    --success: 152 70% 45%;
    --success-foreground: 231 47% 6%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 231 47% 6%;
    --warning: 38 92% 62%;
    --warning-foreground: 231 47% 6%;
    --info: 199 90% 66%;
    --info-foreground: 231 47% 6%;

    /* `--border` é divisória (1,4:1 basta); `--input` é a borda do CAMPO, e
       essa precisa de 3:1 contra o entorno pela 1.4.11 do WCAG. */
    --border: 231 26% 18%;
    --input: 231 26% 45%;
    --ring: 238 88% 74%;

    /* 14px/10px — mesmo alvo do tema de login (rounded-xl/rounded-md do
       painel). Ficam em rem, e não em px: a raiz deste tema é fixa em 16px
       (o console não adota a régua fluida de 13-18px do login, que reescalaria
       todo o PatternFly junto — ver a nota da tipografia mais abaixo), então
       0.875rem/0.625rem aqui PINTAM 14px/10px sempre, sem depender de breakpoint. */
    --radius: 0.875rem;
    --radius-control: 0.625rem;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

/*
   A INTER ENTRA POR `@import`, E SÓ AQUI.

   No tema de login ela vem por `<link>` no `<head>`, porque `@import` serializa
   o download da fonte ATRÁS do CSS. Nos consoles o `index.ftl` é do tema pai e
   nós só entregamos `styles=` — não há onde pôr o `<link>`. O custo aqui é bem
   menor que no login: o console só abre depois de autenticado, com o CSS já em
   cache, e a pilha de reserva (`-apple-system`, `Segoe UI`) desenha a tela
   inteira enquanto a Inter vem.
*/
/* `wght@400..700`, COM DOIS PONTOS — igual ao `<link>` do tema de login.
   Era `400;500;600;700` (quatro instâncias ESTÁTICAS): sem o eixo variável,
   um `font-weight: 450` (rótulo de campo, mais abaixo) não existe como
   arquivo, e o navegador arredondava para a instância carregada mais
   próxima (450→500) — o mesmo defeito que o tema de login já documentou e
   corrigiu antes deste. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap");

/* ----------------------------------------------------------------------------
   2. O MAPA — nossos tokens preenchendo as variáveis do PatternFly.

   Esta é a seção que faz o trabalho. Cada componente do console lê essas
   variáveis; preenchidas daqui, a tela inteira muda de tema sem que a gente
   precise conhecer o seletor de cada peça.

   O bloco vale para `:root` E para as classes de tema escuro do PatternFly: se
   o realm ligar o modo escuro dele, os valores são OS MESMOS e não há segunda
   inversão por cima — que era o defeito que o arquivo anterior gastava dezenas
   de linhas caçando.
   -------------------------------------------------------------------------- */
:root,
html.pf-v5-theme-dark,
.pf-v5-theme-dark,
[data-pf-theme="dark"] {
    /* Diz ao NAVEGADOR que a página é escura. É o que pinta barra de rolagem,
       seletor de data, autopreenchimento e campo nativo do lado certo — coisas
       que nenhum seletor nosso alcança. */
    color-scheme: dark;

    /* --- marca ----------------------------------------------------------- */
    --pf-v5-global--primary-color--100: hsl(var(--primary));
    --pf-v5-global--primary-color--200: hsl(var(--primary-hover));
    --pf-v5-global--primary-color--300: hsl(var(--primary));
    --pf-v5-global--active-color--100: hsl(var(--primary));
    --pf-v5-global--active-color--300: hsl(var(--primary) / 0.16);
    --pf-v5-global--active-color--400: hsl(var(--primary) / 0.1);
    --pf-v5-global--link--Color: hsl(var(--primary));
    --pf-v5-global--link--Color--hover: hsl(var(--primary-hover));
    --pf-v5-global--link--Color--light: hsl(var(--primary));
    --pf-v5-global--link--Color--light--hover: hsl(var(--primary-hover));
    --pf-v5-global--link--Color--visited: hsl(var(--primary));
    --pf-v5-global--link--TextDecoration: none;
    --pf-v5-global--link--TextDecoration--hover: underline;

    /* --- superfícies ------------------------------------------------------ */
    --pf-v5-global--BackgroundColor--100: hsl(var(--card));
    --pf-v5-global--BackgroundColor--150: hsl(var(--muted));
    --pf-v5-global--BackgroundColor--200: hsl(var(--background));
    --pf-v5-global--BackgroundColor--300: hsl(var(--card));
    --pf-v5-global--BackgroundColor--400: hsl(var(--muted));
    --pf-v5-global--BackgroundColor--dark-100: hsl(var(--background));
    --pf-v5-global--BackgroundColor--dark-200: hsl(var(--card));
    --pf-v5-global--BackgroundColor--dark-300: hsl(var(--muted));
    --pf-v5-global--BackgroundColor--dark-400: hsl(var(--accent));
    --pf-v5-global--BackgroundColor--light-100: hsl(var(--card));
    --pf-v5-global--BackgroundColor--light-200: hsl(var(--background));
    --pf-v5-global--BackgroundColor--light-300: hsl(var(--muted));

    /* --- texto ------------------------------------------------------------
       `Color--dark-*` no PatternFly quer dizer "texto escuro, para superfície
       clara". Nossas superfícies são escuras: os dois extremos apontam para o
       mesmo texto claro. Não é descuido — é o que impede texto preto num
       cartão preto quando um componente escolhe a variável "errada". */
    --pf-v5-global--Color--100: hsl(var(--foreground));
    --pf-v5-global--Color--200: hsl(var(--muted-foreground));
    --pf-v5-global--Color--300: hsl(var(--muted-foreground));
    --pf-v5-global--Color--400: hsl(var(--muted-foreground));
    --pf-v5-global--Color--dark-100: hsl(var(--foreground));
    --pf-v5-global--Color--dark-200: hsl(var(--muted-foreground));
    --pf-v5-global--Color--light-100: hsl(var(--foreground));
    --pf-v5-global--Color--light-200: hsl(var(--muted-foreground));
    --pf-v5-global--Color--light-300: hsl(var(--muted-foreground));

    /* --- bordas ------------------------------------------------------------ */
    --pf-v5-global--BorderColor--100: hsl(var(--border));
    --pf-v5-global--BorderColor--200: hsl(var(--border));
    --pf-v5-global--BorderColor--300: hsl(var(--border));
    --pf-v5-global--BorderColor--dark-100: hsl(var(--border));
    --pf-v5-global--BorderColor--light-100: hsl(var(--border));
    --pf-v5-global--BorderWidth--sm: 1px;
    --pf-v5-global--BorderRadius--sm: var(--radius-control);
    --pf-v5-global--BorderRadius--md: var(--radius);
    --pf-v5-global--BorderRadius--lg: var(--radius);

    /* --- estado ------------------------------------------------------------ */
    --pf-v5-global--success-color--100: hsl(var(--success));
    --pf-v5-global--success-color--200: hsl(var(--success));
    --pf-v5-global--danger-color--100: hsl(var(--destructive));
    --pf-v5-global--danger-color--200: hsl(var(--destructive));
    --pf-v5-global--warning-color--100: hsl(var(--warning));
    --pf-v5-global--warning-color--200: hsl(var(--warning));
    --pf-v5-global--info-color--100: hsl(var(--info));
    --pf-v5-global--info-color--200: hsl(var(--info));
    --pf-v5-global--default-color--200: hsl(var(--muted-foreground));
    --pf-v5-global--disabled-color--100: hsl(var(--muted-foreground) / 0.45);
    --pf-v5-global--disabled-color--200: hsl(var(--muted));
    --pf-v5-global--disabled-color--300: hsl(var(--muted));

    /*
       --- A RAMPA `black-*` INVERTIDA -------------------------------------

       No PatternFly, `black-100` é quase branco e `black-1000` quase preto: a
       rampa serve de FUNDO na ponta baixa e de TEXTO na ponta alta. Num tema
       escuro os dois papéis trocam de lado. Invertê-la aqui é o que apaga a
       maioria dos "retângulos brancos" que sobrariam em componente que não lê
       `BackgroundColor--100` — tarja de tabela, campo desabilitado, cabeçalho
       fixo, esqueleto de carregamento.
    */
    --pf-v5-global--palette--black-100: hsl(var(--card));
    --pf-v5-global--palette--black-150: hsl(var(--card));
    --pf-v5-global--palette--black-200: hsl(var(--muted));
    --pf-v5-global--palette--black-300: hsl(var(--border));
    --pf-v5-global--palette--black-400: hsl(var(--input));
    --pf-v5-global--palette--black-500: hsl(var(--muted-foreground) / 0.85);
    --pf-v5-global--palette--black-600: hsl(var(--muted-foreground));
    --pf-v5-global--palette--black-700: hsl(var(--muted-foreground));
    --pf-v5-global--palette--black-800: hsl(var(--foreground) / 0.88);
    --pf-v5-global--palette--black-850: hsl(var(--foreground) / 0.94);
    --pf-v5-global--palette--black-900: hsl(var(--foreground));
    --pf-v5-global--palette--black-1000: hsl(var(--foreground));

    /* O azul do PatternFly é a cor de marca DELE. Aqui ele é o nosso índigo —
       inclusive nos tons baixos, que são fundo de linha selecionada e de chip,
       e por isso saem translúcidos em vez de sólidos: sobre fundo escuro, um
       azul-claro sólido vira uma mancha e leva o texto junto. */
    --pf-v5-global--palette--blue-50: hsl(var(--primary) / 0.08);
    --pf-v5-global--palette--blue-100: hsl(var(--primary) / 0.14);
    --pf-v5-global--palette--blue-200: hsl(var(--primary) / 0.22);
    --pf-v5-global--palette--blue-300: hsl(var(--primary) / 0.55);
    --pf-v5-global--palette--blue-400: hsl(var(--primary));
    --pf-v5-global--palette--blue-500: hsl(var(--primary));
    --pf-v5-global--palette--blue-600: hsl(var(--primary-hover));
    --pf-v5-global--palette--red-50: hsl(var(--destructive) / 0.12);
    --pf-v5-global--palette--red-100: hsl(var(--destructive));
    --pf-v5-global--palette--red-200: hsl(var(--destructive));
    --pf-v5-global--palette--green-50: hsl(var(--success) / 0.12);
    --pf-v5-global--palette--green-500: hsl(var(--success));
    --pf-v5-global--palette--green-600: hsl(var(--success));
    --pf-v5-global--palette--gold-50: hsl(var(--warning) / 0.12);
    --pf-v5-global--palette--gold-400: hsl(var(--warning));
    --pf-v5-global--palette--gold-500: hsl(var(--warning));
    --pf-v5-global--palette--white: hsl(var(--card));

    /* --- tipografia -------------------------------------------------------- */
    --pf-v5-global--FontFamily--text: var(--font-sans);
    --pf-v5-global--FontFamily--heading: var(--font-sans);
    --pf-v5-global--FontFamily--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhatVF--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhatVF--heading: var(--font-sans);

    /*
       DENSIDADE — e por que o console NÃO copia a raiz de 65,625% do painel.

       O tema de login põe `html { font-size: 81.25% }` (13px) porque lá TODA
       medida é nossa. Aqui não: o PatternFly mede tudo em `rem` a partir da
       raiz, então mexer nela mexeria junto em ícone, altura de linha,
       espaçamento de tabela e alvo de toque — a tela inteira andaria atrás de um
       número só, e a correção seria caçar centenas de valores do PatternFly um a
       um.

       A densidade do painel chega pelo outro lado: fixando os TAMANHOS DE FONTE
       do PatternFly nos valores que o painel usa de fato. Mesmo resultado
       visual, sem mexer na régua que o console usa para calcular layout.
    */
    --pf-v5-global--FontSize--xs: 0.75rem;
    --pf-v5-global--FontSize--sm: 0.8125rem;
    --pf-v5-global--FontSize--md: 0.875rem;
    --pf-v5-global--FontSize--lg: 1rem;
    --pf-v5-global--FontSize--xl: 1.125rem;
    --pf-v5-global--FontSize--2xl: 1.375rem;
    --pf-v5-global--FontSize--3xl: 1.625rem;
    --pf-v5-global--FontSize--4xl: 2rem;
    --pf-v5-global--FontWeight--normal: 400;
    --pf-v5-global--FontWeight--semi-bold: 600;
    --pf-v5-global--FontWeight--bold: 700;
    --pf-v5-global--LineHeight--sm: 1.35;
    --pf-v5-global--LineHeight--md: 1.55;

    /*
       SOMBRA PRETA, E NÃO CINZA. A sombra do PatternFly é feita para superfície
       clara: sobre fundo escuro ela CLAREIA a borda do cartão em vez de afastá-lo
       do fundo, e o resultado é um halo leitoso em volta de tudo. Preto com alfa
       alto é o que dá profundidade no escuro.
    */
    --pf-v5-global--BoxShadow--sm: 0 1px 2px hsl(231 60% 2% / 0.5);
    --pf-v5-global--BoxShadow--md: 0 6px 16px hsl(231 60% 2% / 0.55);
    --pf-v5-global--BoxShadow--lg: 0 16px 40px hsl(231 60% 2% / 0.6);
    --pf-v5-global--BoxShadow--xl: 0 24px 60px hsl(231 60% 2% / 0.65);
    --pf-v5-global--BoxShadow--sm--top: 0 -1px 2px hsl(231 60% 2% / 0.5);
    --pf-v5-global--BoxShadow--sm--bottom: 0 1px 2px hsl(231 60% 2% / 0.5);
    --pf-v5-global--BoxShadow--md--top: 0 -6px 16px hsl(231 60% 2% / 0.55);
    --pf-v5-global--BoxShadow--md--bottom: 0 6px 16px hsl(231 60% 2% / 0.55);

    /* Foco: o MESMO anel do login — 3px a 28% da primária. Cor sozinha não é
       sinal acessível; o anel muda a forma e sobrevive ao `forced-colors`. */
    --pf-v5-global--primary-color--light-100: hsl(var(--primary) / 0.28);
    --pf-v5-global--BoxShadow--sm--focus: 0 0 0 3px hsl(var(--ring) / 0.28);
}

/* ----------------------------------------------------------------------------
   3. A PÁGINA — o mesmo fundo da porta de entrada.

   O painel esquerdo do login tem duas grades sobrepostas (a pontilhada do
   construtor de fluxos e os "quarteirões" por cima) e um clarão da primária no
   canto. O console herda as três camadas, mais paradas: aqui a pessoa vem
   trabalhar, não conferir se o site é o verdadeiro. A grade não anda, e o
   clarão fica preso ao alto — longe do texto que se lê por minutos.
   -------------------------------------------------------------------------- */
html,
body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    font-family: var(--font-sans) !important;
}

.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__drawer,
.pf-v5-c-drawer__panel-main,
.pf-v5-c-drawer__content {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-page {
    position: relative;
    isolation: isolate;
    background-color: hsl(var(--background)) !important;
}

/*
   NADA MEDE MAIS QUE A PRÓPRIA COLUNA.

   Duas coisas empurravam a página para além da largura da tela, e as duas
   aparecem juntas: a barra de rolagem horizontal no rodapé e o conteúdo
   passando por baixo da coluna da direita.

   1. `box-sizing`. O respiro lateral da seção é calculado com `max()` sobre a
      largura disponível. Se a caixa não for `border-box`, esse respiro SOMA à
      largura em vez de caber dentro dela — e a seção fica mais larga que o pai
      por exatamente o tamanho do respiro.

   2. `min-width` do `<select>`. Um `select` nativo tem largura MÍNIMA
      intrínseca: a da opção mais longa da lista ("Português (Brasil)"). Dentro
      de uma grade, essa medida vira o piso da coluna e estoura o invólucro,
      por mais que ele diga `width: 100%`. `min-width: 0` é o que autoriza o
      navegador a encolher abaixo do conteúdo — sem isso, `width` não manda.

   A regra vale para a página inteira porque o problema não é do formulário: é
   de qualquer conteúdo largo (tabela, JSON, URL comprida) dentro de uma coluna
   com respiro calculado.
*/
.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-section > *,
.pf-v5-c-form__group-control,
.pf-v5-c-form-control {
    box-sizing: border-box !important;
    max-width: 100%;
    min-width: 0;
}

.pf-v5-c-form-control > select,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea {
    max-width: 100% !important;
    min-width: 0 !important;
}

/*
   ─── O CAMPO DE SELEÇÃO SAI DA GRADE ────────────────────────────────────────

   Este é o conserto do "select gigante", e a causa não estava no select: estava
   no invólucro.

   O `.pf-v5-c-form-control` é `display: grid` com `grid-template-columns:
   1fr auto`. A segunda coluna existe para os utilitários do campo — o olho da
   senha, o ícone de erro. A primeira, `1fr`, parece "ocupe o que sobrar", mas
   `1fr` tem piso: ele não encolhe abaixo do `max-content` do que está dentro.

   E um `<select>` tem `max-content` igual à largura da OPÇÃO MAIS LONGA da
   lista. Resultado: a coluna crescia até caber "Português (Brasil)" com folga,
   o invólucro ia junto, e `width: 100%` no select não adiantava nada — a coluna
   já tinha sido dimensionada antes de o `width` ser aplicado.

   Duas consequências, que pareciam problemas diferentes e eram o mesmo:

   1. A LISTA ABERTA vinha larga. O popup do `<select>` acompanha a largura do
      ELEMENTO, não a do invólucro que aparece na tela. Como o elemento media
      ~1300px atrás de um invólucro de 640px, a lista abria com 1300px.
   2. A PÁGINA ROLAVA DE LADO. Aqueles 2573px do `.pf-v5-c-page` eram esse
      excesso propagando para cima, elemento por elemento.

   Num campo de seleção a segunda coluna nunca é usada. Trocar a grade por
   `block` tira o piso do `max-content` da conta: o select passa a medir 100% do
   invólucro, e o invólucro mede o que a coluna do formulário mandar.
*/
/*
   O SELETOR DE ESTRUTURA FALHOU — e por isso agora a regra não depende dela.

   A versão anterior usava `:has(> select)`: "invólucro que tem um select como
   FILHO DIRETO". Subiu para produção e o defeito continuou igual, o que só
   deixa duas explicações — e as duas invalidam aquele seletor:

     a) o `<select>` está mais fundo, embrulhado em outro elemento; ou
     b) o `<select>` É o `.pf-v5-c-form-control` (a classe está nele mesmo),
        e aí `:has(> select)` nunca casa.

   Descobrir qual das duas exigiria o HTML da tela. Não exigir NENHUMA das duas
   é mais barato e mais duradouro: `display: block` em todo `<select>`, venha
   ele de onde vier, e no invólucro que contenha um em qualquer profundidade.

   `display: block` num campo de seleção não tem contraindicação: ele não tem
   filhos que precisem de grade, e a segunda coluna do PatternFly (utilitários)
   nunca é usada num select.
*/
.pf-v5-c-form-control:has(select),
.pf-v5-c-form-control:has(> .pf-v5-c-form-control__toggle-icon) {
    display: block !important;
    overflow: hidden;
}

/*
   E A REGRA QUE NÃO DEPENDE DE NADA: todo `<select>` da tela é bloco, mede a
   largura do pai e NUNCA cresce até a opção mais longa.

   `max-width: 100%` sozinho não resolvia: o piso vinha do `max-content` da
   coluna de grade, que é calculado antes. Com `display: block` o piso deixa de
   existir; com `width: 100%` ele passa a medir o pai; com `min-width: 0` fica
   autorizado a encolher abaixo do conteúdo.

   Os três juntos, e nesta ordem de raciocínio, são o conserto.
*/
select,
select.pf-v5-c-form-control,
.pf-v5-c-form-control select {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
}

.pf-v5-c-form-control > select {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
}

/* E o mesmo piso vale para o `select` solto, fora da marcação do PatternFly. */
select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/*
   A CONTENÇÃO — e ela é um curativo, não um diagnóstico.

   As duas causas acima (o `min-width` do select e o `box-sizing` da seção) eram
   reais, foram corrigidas, e a página CONTINUOU rolando de lado. Pelo tamanho
   do cursor da barra, o conteúdo mede várias vezes a largura da janela: é algo
   grande, e não sei o que é.

   `overflow-x: clip` impede a página inteira de rolar de lado sem criar um
   contexto de rolagem — que é a diferença para `hidden`, e o que mantém o
   cabeçalho fixo da tabela e os menus funcionando.

   Isto ESCONDE o sintoma. O elemento culpado continua largo demais e, quando
   ele for encontrado, esta regra deve ser reavaliada: conteúdo que precisa de
   largura (uma tabela de vinte colunas, um JSON) deve rolar DENTRO da própria
   caixa, e não ser cortado.

   Como achar o culpado, no console do navegador:

       [...document.querySelectorAll('*')]
         .filter(e => e.scrollWidth > document.documentElement.clientWidth)
         .slice(0, 5)
*/
.pf-v5-c-page__main {
    min-width: 0;
    /* `clip` ficou como CINTO DE SEGURANÇA, não como conserto: a causa da
       rolagem lateral era o menu em portal com `width: 100%`, e ela foi
       removida. Isto segue aqui porque conteúdo largo (tabela de vinte colunas,
       JSON de cliente) aparece de novo, e a página inteira deslizar de lado é
       sempre a pior forma de lidar com isso. `clip` não cria contexto de
       rolagem — é o que mantém cabeçalho fixo e menus funcionando. */
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .pf-v5-c-page__main { overflow-x: hidden; }
}

/* Grade em `px`, não em `rem`: é textura, não tipografia. Em `rem` o módulo
   acompanharia o zoom do texto e o pontilhado viraria ruído fino. */
.pf-v5-c-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(circle, hsl(var(--border) / 0.55) 1px, transparent 1px),
        linear-gradient(hsl(var(--border) / 0.22) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.22) 1px, transparent 1px);
    background-size: 26px 26px, 208px 208px, 208px 208px;
    opacity: 0.34;
    /* A textura MORRE ANTES DE CHEGAR NO CONTEÚDO. Sem máscara ela cobre a
       tela inteira com a mesma força, inclusive atrás de tabela e formulário —
       e aí deixa de ser profundidade para virar ruído embaixo do texto que a
       pessoa está lendo há dez minutos. */
    -webkit-mask-image: radial-gradient(ellipse at 22% 0%, #000, transparent 68%);
    mask-image: radial-gradient(ellipse at 22% 0%, #000, transparent 68%);
}

/* O clarão da primária, ancorado no alto à esquerda — onde ficam a marca e a
   navegação, e onde não há parágrafo para ele lavar. */
.pf-v5-c-page::after {
    content: "";
    position: fixed;
    top: -22rem;
    left: -16rem;
    width: 56rem;
    height: 56rem;
    z-index: -1;
    pointer-events: none;
    /* De 16% para 9%, mais largo e desmanchando mais cedo (68% -> 60%). No
       login o clarão tem um painel inteiro só para ele; aqui ele divide espaço
       com a barra lateral e a faixa do topo, que já são superfícies claras
       sobre o fundo. Três coisas se destacando no mesmo canto é nenhuma. */
    background: radial-gradient(circle, hsl(var(--primary) / 0.09), transparent 60%);
}

/* ----------------------------------------------------------------------------
   4. O TOPO (masthead) — a faixa da marca.

   Cópia exata do vidro do header real (classe `.vidro--desfoque` em
   components/layout/header/components/header-bar.tsx, receita em
   styles/globals.css `.dark`): desfoque de 14px COM saturação de 165% — não
   só `blur` —, o mesmo brilho de duas camadas no topo da peça, alfa 0,88 (não
   0,86: esse número era só deste tema) e borda a 50% de opacidade, não opaca.
   A sombra rasa também é real: "sombra suja a borda" era uma regra deste
   tema, não do painel — o header de lá tem `shadow-sm` de verdade.
   -------------------------------------------------------------------------- */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
    background-color: hsl(var(--card) / 0.88) !important;
    background-image:
        linear-gradient(180deg, hsl(220 60% 96% / 0.14) 0, hsl(220 60% 96% / 0) 1.5px),
        linear-gradient(180deg, hsl(220 60% 96% / 0.05) 0%, hsl(220 60% 96% / 0) 55%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(165%);
    backdrop-filter: blur(14px) saturate(165%);
    border-bottom: 1px solid hsl(var(--border) / 0.5) !important;
    box-shadow: 0 1px 2px 0 hsl(231 60% 2% / 0.05) !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-masthead__content,
.pf-v5-c-page__header-tools,
.pf-v5-c-page__header-brand {
    color: hsl(var(--foreground)) !important;
}

/*
   A MARCA NÃO ENCOLHE JUNTO COM O RESTO — mesma decisão do login, mesmo motivo:
   a conversão proporcional deixaria o logotipo do tamanho de uma etiqueta, e ele
   é a única peça da faixa que responde "onde eu estou".

   E O TAMANHO NÃO É ESCOLHIDO AQUI. A marca é a mesma da landing, do painel e
   da documentação, então o número vem da régua única: 31px de caixa na
   navegação — que é o que esta faixa é —, pintando ~28px de logotipo. É o
   mesmo 31px da barra da landing, e é comparável porque
   `logo-apibrasil-white-20260827.webp` tem o mesmo perfil de canvas do arquivo
   de lá: tinta ocupando 89% da altura. O arquivo antigo trazia 34px de
   transparência embutida (55% de tinta) e fazia estes 2rem pintarem 18px —
   a marca parecia menor aqui do que em qualquer outro lugar, sem que nenhum
   CSS dissesse isso.

   Em px, e não em rem, pelo mesmo motivo do login: marca não é tipografia, e
   um padrão de marca não pode variar com a régua da tela. Ver a tabela em
   `themes/README.md`.

   O arquivo é o `logo-apibrasil-white-20260827.webp`, o par monocromático. O PNG colorido
   tem o "API" em azul-escuro e sumia no fundo escuro — sobrava "🇧🇷 Brasil".
*/
.pf-v5-c-masthead__brand,
.pf-v5-c-page__header-brand-link {
    display: inline-flex !important;
    align-items: center !important;
}

.pf-v5-c-brand,
.pf-v5-c-masthead__brand img,
.pf-v5-c-page__header-brand img {
    height: 31px !important;
    width: auto !important;
    max-width: none !important;
}

/* Ícone da faixa (sino, ajuda, engrenagem): apagado em repouso, vivo no toque —
   e nunca um botão desenhado, que faria a faixa competir com o conteúdo. */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-page__header .pf-v5-c-button.pf-m-plain {
    color: hsl(var(--muted-foreground)) !important;
    background-color: transparent !important;
    border-radius: var(--radius-control) !important;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-c-page__header .pf-v5-c-button.pf-m-plain:hover {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--accent)) !important;
}

/* A barra de ferramentas DENTRO da faixa não é uma barra: ela é só o alinhador
   dos controles do topo, e não pode trazer fundo nem borda próprios. */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-page__header .pf-v5-c-toolbar,
.pf-v5-c-page__header .pf-v5-c-toolbar__content {
    background-color: transparent !important;
    border: 0 !important;
    padding-block: 0 !important;
    box-shadow: none !important;
}

/*
   O BOTÃO DE USUÁRIO É PLANO — cópia do botão real do painel
   (components/layout/header/components/user-menu-dropdown.tsx), que não tem
   borda nem fundo: só nome, avatar e seta, com feedback de toque por escala
   (`active:scale-95`), nunca por cor de fundo. A pílula (borda + `--muted`)
   era uma invenção deste tema; o painel nunca teve isso.
*/
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-page__header .pf-v5-c-dropdown__toggle {
    height: auto !important;
    /* `py-1 lg:py-1.5` / `pl-1 pr-0.5 lg:pl-2 lg:pr-1.5` na raiz de 13px:
       3,25px verticais e ~4,9px laterais. Não é preciosismo — é essa conta
       que fecha a faixa do celular nos 39px do painel: 32,5px de avatar mais
       3,25px de cada lado dão exatamente 39. Com os 4px de um `0.25rem` de
       raiz 16, sobravam 1,5px e o header não fechava. */
    padding-block: 3.25px !important;
    padding-inline: 4.875px !important;
    border: 0 !important;
    border-radius: 9.75px !important;
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    /* 11.4px, não 10.6px: o nome real é `text-xs lg:text-sm` — 0,875rem numa
       raiz de 13px é 11,375px. O console é tela de mesa por natureza, então o
       degrau `lg` (o maior) é o alvo fixo, não uma média entre os dois. */
    font-size: 11.4px !important;
    font-weight: 500 !important;
    /* `gap-2` do botão real: sem ele o nome encosta no avatar e os três
       pedaços (nome, avatar, seta) leem como uma peça só. 0,5rem na raiz de
       13px = 6,5px. */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6.5px !important;
    transition: transform 100ms ease;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:active,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle:active,
.pf-v5-c-page__header .pf-v5-c-dropdown__toggle:active {
    transform: scale(0.97);
}

/* O NOME é a única palavra da faixa com peso de identidade — mesmo
   `font-semibold` que o painel usa no span do nome —, truncado para não
   empurrar o avatar para fora da tela quando o nome é longo.

   ESCOPADO À FAIXA DO TOPO: `.pf-v5-c-menu-toggle__text` é a MESMA classe que
   um `Select` comum usa para o valor escolhido (idioma, paginação, seletor de
   realm) — sem o escopo, todo texto de toggle do console ficaria em negrito e
   truncado em 10rem, inclusive onde isso nunca foi pedido. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-page__header .pf-v5-c-menu-toggle__text {
    font-weight: 600 !important;
    max-width: 10rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*
   O PatternFly desenha o estado do `menu-toggle` com `::before` (borda) e
   `::after` (sublinhado de foco/aberto) — sem a pílula para escondê-los, as
   duas camadas apareceriam soltas atrás do texto. Anular as duas continua
   valendo mesmo com o botão plano.
*/
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after,
.pf-v5-c-dropdown__toggle::before,
.pf-v5-c-dropdown__toggle::after {
    display: none !important;
}

/* AVATAR: mesmo tamanho do `UserAvatar` `size="md"` do painel (2,5rem/40px),
   com borda de 1px e a mesma sombra rasa (`shadow-sm`) do componente real —
   sem o anel verde/vermelho de status de conexão, que não existe aqui (não há
   socket de tráfego no Keycloak). */
.pf-v5-c-masthead .pf-v5-c-avatar,
.pf-v5-c-page__header .pf-v5-c-avatar {
    flex: 0 0 auto;
    /* `UserAvatar size="md"` é `h-10 w-10` = 2,5rem — que na raiz de 13px do
       painel pinta 32,5px, não os 40px que o mesmo degrau valeria aqui. */
    width: 32.5px !important;
    height: 32.5px !important;
    /* `rounded-full` do componente real — e sem isto o avatar do console
       dependeria do PatternFly lembrar de arredondar por conta própria. */
    border-radius: 50% !important;
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--muted)) !important;
    box-shadow: 0 1px 2px 0 hsl(231 60% 2% / 0.05) !important;
}

/*
   NO CELULAR, SÓ O AVATAR — como no painel.

   O botão de usuário de lá esconde o bloco de nome/e-mail e a seta abaixo de
   768px (`hidden … md:flex` e `hidden … md:block` em user-menu-dropdown.tsx):
   num header de 48px, um nome inteiro ao lado do avatar não cabe sem empurrar
   a busca para fora. Aqui era o mesmo aperto com outro efeito — "Jonathan
   Henrique" por extenso fazia a faixa QUEBRAR em duas linhas e ir a 92px,
   quase o dobro do header do painel. O alvo de clique continua o mesmo: o
   avatar inteiro abre o menu.
*/
@media (max-width: 767px) {
    .pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
    .pf-v5-c-masthead .pf-v5-c-menu-toggle__controls,
    .pf-v5-c-page__header .pf-v5-c-menu-toggle__text,
    .pf-v5-c-page__header .pf-v5-c-menu-toggle__controls {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   5. A NAVEGAÇÃO LATERAL — o mesmo desenho da barra do painel.

   Item ativo com fundo de índigo translúcido e texto na primária; item em
   repouso apagado. Sem sublinhado NUNCA: sublinhado em lista de navegação é
   ruído, o alvo já é óbvio.
   -------------------------------------------------------------------------- */
/*
   A BARRA É OPACA, E TEM 304px.

   Duas correções vindas de `components/layout/sidebar/sidebar.tsx`:

   LARGURA — `w-[304px]`, e o comentário de lá explica por que está em px:
   `17.5rem` na raiz de 81,25% do painel resolvia para 227,5px, e a barra
   nascia 76px mais estreita que a da documentação com o mesmo texto dentro.
   Aqui o console entregava 290px, que também não é o número de ninguém.

   FUNDO — o painel usa `bg-sidebar` CHAPADO (`--sidebar`, que no escuro é o
   mesmo `--card`). O vidro com desfoque era invenção deste tema: a barra
   lateral não tem nada rolando por baixo dela para o desfoque revelar (ela é
   fixa e cobre a coluna inteira), então o efeito só custava GPU e rebaixava o
   contraste do texto contra o fundo da página.
*/
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body {
    background-color: hsl(var(--sidebar, var(--card))) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid hsl(var(--border)) !important;
    box-shadow: none !important;
}

.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--Width: 304px;
    width: 304px !important;
    flex: 0 0 304px !important;
}

.pf-v5-c-nav,
.pf-v5-c-nav__list,
.pf-v5-c-nav__subnav,
.pf-v5-c-nav__item {
    background-color: transparent !important;
}

/* `px-[10px] py-[12px]` do `<nav>` real — é essa folga de 10px que faz o
   bloco arredondado do item ativo existir sem encostar na divisória da barra. */
.pf-v5-c-nav {
    padding: 12px 10px !important;
}

.pf-v5-c-nav__list {
    padding-block: 0 !important;
}

/* `space-y-[4px]`: quatro pixels entre itens, e o comentário do componente
   explica por que não são dois — a linha tem 36px, e 2px de intervalo são 5%
   dela: os rótulos ficariam mais perto do vizinho do que da própria borda, e a
   coluna leria como um parágrafo em vez de uma lista de destinos. */
.pf-v5-c-nav__item + .pf-v5-c-nav__item {
    margin-top: 4px !important;
}

/*
   O ITEM É UM BLOCO DENTRO DA BARRA, e não uma faixa de ponta a ponta.

   O PatternFly pinta o item ativo na largura inteira da barra lateral, colado
   nas duas bordas. Sobre fundo escuro isso vira um tijolo atravessado na
   coluna: a barra deixa de parecer uma lista de atalhos e passa a parecer uma
   tabela com uma linha selecionada.

   O bloco arredondado com folga nas laterais é o desenho do painel — e é o que
   permite o marcador da esquerda existir sem encostar na divisória da barra.

   As regras valem para o ITEM e para o LINK porque as duas marcações aparecem:
   o console de administração pinta o fundo no link, o de conta pinta em alguns
   casos no item. Pintar nos dois e zerar o fundo do item resolve os dois sem
   depender de qual versão do componente está na tela.
*/
.pf-v5-c-nav__item,
.pf-v5-c-nav__item.pf-m-current {
    background-color: transparent !important;
}

/*
   A CAIXA DA LINHA, COPIADA DO `NavLink` REAL.

       h-[36px] gap-[10px] px-[12px] text-base rounded-lg

   Os três primeiros estão em px no componente de origem, e o comentário de lá
   diz por quê: com a raiz de 81,25%, `h-9` renderiza 29,25px em vez dos 36px
   autorados — "TEXTO na escala, ESPAÇO em px". Este arquivo entregava 30px de
   altura e 10,6px de texto, ou seja, herdou justamente o erro que o painel
   corrigiu.

   13px de texto é `text-base` na raiz do painel (1rem × 13). É MAIOR que o
   resto do console de propósito: no painel a barra é a única lista que se lê
   de relance, e ela tem o corpo de texto do produto, não o de um controle.
*/
.pf-v5-c-nav__link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    /* `rounded-lg` = `--radius` (0,75rem) na raiz de 13px = 9,75px. */
    border-radius: 9.75px !important;
    /* `text-sidebar-foreground/75`: o item em repouso é o TEXTO da barra com
       75% de opacidade, não `--muted-foreground`. A diferença importa — o
       apagado do painel ainda é branco, e este aqui era cinza-azulado: em
       lista longa, a cor errada faz a barra inteira parecer desabilitada. */
    color: hsl(var(--sidebar-foreground, var(--foreground)) / 0.75) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: background-color 140ms ease, color 140ms ease;
}

/* O PatternFly desenha o marcador do item ativo com um `::after` que é uma
   BORDA ESQUERDA na altura toda do link. Ele é zerado aqui e redesenhado mais
   abaixo, dentro do bloco. `::before` some: em algumas versões ele é um segundo
   fundo, e sobre o nosso vira uma mancha mais clara. */
.pf-v5-c-nav__link::before {
    display: none !important;
}

.pf-v5-c-nav__link::after {
    border: 0 !important;
    background: transparent !important;
}

/* `hover:bg-sidebar-accent/60` — 60%, e não o tom cheio. O fundo cheio é do
   item ATIVO; se o ponteiro pintar igual, passar o mouse por cima da lista
   acende um "ativo" falso a cada linha e o de verdade se perde. */
.pf-v5-c-nav__link:hover {
    background-color: hsl(var(--sidebar-accent, var(--accent)) / 0.6) !important;
    color: hsl(var(--sidebar-foreground, var(--foreground))) !important;
    text-decoration: none !important;
}

/*
   O ITEM ATIVO É `bg-sidebar-accent` + `text-sidebar-primary`.

   Era índigo translúcido (`--primary/0.14`) aqui: um segundo tom de marca no
   fundo, atrás de um texto que JÁ é da marca. O painel separa os dois papéis —
   o fundo é a superfície neutra de destaque (`--accent`), a cor da marca fica
   só no texto, no ícone e no traço da esquerda. Com os dois em índigo, o
   contraste entre rótulo e fundo cai justo na linha que precisa ser a mais
   legível da barra.
*/
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"],
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    background-color: hsl(var(--sidebar-accent, var(--accent))) !important;
    color: hsl(var(--sidebar-primary, var(--primary))) !important;
    font-weight: 600 !important;
}

/*
   O TRAÇO DO ITEM ATIVO — dentro do bloco arredondado e mais curto que a altura
   dele. Um traço que vai de ponta a ponta lê como divisória, não como marcador,
   e encostado na borda da barra lê como se a barra inteira estivesse selecionada.
*/
.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link[aria-current="page"]::after,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::after {
    content: "" !important;
    position: absolute !important;
    inset: auto auto auto 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    /* `h-4 w-[3px] rounded-r-full bg-sidebar-primary` — 13px de altura na raiz
       do painel, não 18px, e a ponta é REDONDA. Um traço de 18px numa linha de
       36px ocupa metade dela e começa a ler como borda do bloco; 13px lê como
       marcador. */
    width: 3px !important;
    height: 13px !important;
    border: 0 !important;
    border-radius: 0 999px 999px 0 !important;
    background-color: hsl(var(--sidebar-primary, var(--primary))) !important;
}

/*
   O SUBMENU — indentado por uma GUIA, e não por espaço em branco.

   "Entrando", "Atividade do dispositivo" e "Contas vinculadas" pendurados sob
   "Segurança da conta" precisam dizer visualmente que pertencem a ele. Só
   empurrar para a direita não diz: numa lista de três níveis, indentação
   sozinha vira ambiguidade. A linha vertical fininha é o vínculo, e ela é a
   mesma peça que o painel usa nos submenus da barra.
*/
.pf-v5-c-nav__subnav {
    position: relative;
    margin-left: 1.375rem !important;
    padding-left: 0.5rem !important;
    border-left: 1px solid hsl(var(--border)) !important;
}

/*
   O SUBMENU ENCOLHE UM DEGRAU, NÃO TRÊS.

   Estava em 10,2px contra os 13px do item de cima — 22% menor, a diferença
   que o painel usa entre CORPO e LEGENDA, não entre dois destinos irmãos. A
   barra do painel não tem submenu (as seções são planas), então não há número
   para copiar; o que dá para copiar é o princípio dela: todo destino é um
   destino, e o que conta a hierarquia é a guia à esquerda mais a indentação,
   não o tamanho da letra. 12px e 32px de caixa mantêm o degrau visível sem
   rebaixar o item a nota de rodapé.
*/
.pf-v5-c-nav__subnav .pf-v5-c-nav__link {
    height: 32px !important;
    margin-inline: 0 !important;
    padding-block: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* No submenu o marcador sai: a guia da esquerda já diz onde a pessoa está, e
   os dois juntos empilham duas linhas verticais a três pixels de distância. */
.pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link[aria-current="page"]::after {
    display: none !important;
}

/* O ITEM QUE ABRE (com a setinha): a seta fica na ponta direita, apagada, e
   gira ao abrir — o giro é o que informa o estado sem precisar de um segundo
   ícone. */
.pf-v5-c-nav__link .pf-v5-c-nav__toggle,
.pf-v5-c-nav__toggle {
    margin-left: auto !important;
    padding: 0 !important;
    color: hsl(var(--muted-foreground)) !important;
}

/*
   O ÍCONE E A SETA TÊM TAMANHO DE TEXTO, NÃO DE BOTÃO.

   No `NavLink` real o ícone do item é `h-4 w-4` e o chevron da seção é
   `h-3 w-3` — 13px e 9,75px na raiz de 13px. A seta ainda nasce apagada
   (`opacity-30` aberta, `opacity-60` fechada), porque ela informa estado e
   não convida ao clique: some do caminho quando a seção está aberta, que é o
   estado normal.
*/
.pf-v5-c-nav__link > svg,
.pf-v5-c-nav__link .pf-v5-c-nav__link-icon svg {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 auto;
}

.pf-v5-c-nav__toggle-icon {
    transition: transform 160ms ease;
    opacity: 0.6;
}

.pf-v5-c-nav__toggle-icon svg {
    width: 9.75px !important;
    height: 9.75px !important;
}

.pf-v5-c-nav__link[aria-expanded="true"] .pf-v5-c-nav__toggle-icon,
.pf-v5-c-nav__item.pf-m-expanded > .pf-v5-c-nav__link .pf-v5-c-nav__toggle-icon {
    opacity: 0.3;
}

.pf-v5-c-nav__link[aria-expanded="true"] .pf-v5-c-nav__toggle-icon,
.pf-v5-c-nav__item.pf-m-expanded > .pf-v5-c-nav__link .pf-v5-c-nav__toggle-icon {
    transform: rotate(90deg);
}

/* O pai de um submenu aberto NÃO fica com cara de item ativo. Ele é um título
   com filhos; quem está selecionado é o filho. Sem isto, duas linhas seguidas
   aparecem acesas e a barra passa a ter dois "você está aqui". */
.pf-v5-c-nav__item.pf-m-expanded > .pf-v5-c-nav__link:not(.pf-m-current):not([aria-current="page"]) {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
}

/*
   O RÓTULO DE SEÇÃO PERDEU A CAIXA ALTA — e essa decisão não é minha.

   O componente real (`sidebar.tsx`) carregava `uppercase tracking-caps` e
   TIROU, com o motivo escrito no lugar: caixa alta apaga a silhueta da palavra
   — que é o que o olho usa para ler sem soletrar —, alarga o texto e ainda
   obriga o `tracking` a devolver o ar que ela mesma tirou. O comentário de lá
   chama isso de "o vício mais comum do painel".

   Este arquivo não só mantinha a caixa alta como a defendia como "o ÚNICO
   lugar com caixa alta em toda a tela", o que era verdade e continuava sendo o
   problema: um tratamento que existe uma vez só não é sistema, é exceção.

   O que distingue o rótulo dos itens abaixo dele passa a ser o mesmo recurso
   que o resto do menu usa — `font-semibold` e uma cor mais apagada:

       text-xs font-semibold text-muted-foreground  →  9,75px / 600
       px-[12px]   (mesmo eixo dos itens, sem indentação própria)
       mb-[8px]    (rótulo → itens)
       mt-[20px]   (seção → seção)

   Os três intervalos são o ritmo de três níveis documentado no componente, e
   cada um precisa ser visivelmente maior que o de baixo: 20 / 8 / 4.
*/
.pf-v5-c-nav__section-title {
    padding: 0 12px !important;
    margin-bottom: 8px !important;
    /* O PatternFly ainda desenha um `border-bottom` no rótulo — um filete
       atravessando a barra ao lado da palavra. O rótulo do painel não tem
       linha nenhuma: quem separa as seções é o vão de 20px acima dele.
       Traço E vão fazem o mesmo trabalho duas vezes, e o traço ainda divide a
       coluna em caixas que não existem. */
    border: 0 !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 9.75px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.pf-v5-c-nav__section + .pf-v5-c-nav__section {
    margin-top: 20px !important;
}

.pf-v5-c-nav__separator,
.pf-v5-c-divider,
hr {
    background-color: hsl(var(--border)) !important;
    border-color: hsl(var(--border)) !important;
}

.pf-v5-c-nav__link svg,
.pf-v5-c-nav__toggle-icon {
    color: currentColor !important;
    opacity: 0.9;
    flex: 0 0 auto;
}

/*
   O SELETOR DE REALM (topo da barra, no console de administração).

   É um controle, não um item de navegação: ele TROCA o contexto de tudo que
   está à direita. Ganha caixa própria, largura cheia e o mesmo raio dos outros
   controles — e fica separado da lista por uma divisória, senão lê como o
   primeiro item do menu e alguém clica nele achando que vai para uma tela.
*/
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle,
.pf-v5-c-page__sidebar-body > .pf-v5-c-dropdown .pf-v5-c-dropdown__toggle {
    width: calc(100% - 1rem) !important;
    margin: 0.75rem 0.5rem !important;
    padding-inline: 0.75rem !important;
    min-height: 2.5rem !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    background-color: hsl(var(--muted) / 0.6) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 10.6px !important;
    font-weight: 600 !important;
    text-align: left;
}

.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle:hover {
    background-color: hsl(var(--accent)) !important;
    border-color: hsl(var(--input)) !important;
}

/* A etiqueta "REALM ATUAL" ao lado do nome: informação de apoio, peso de
   apoio. */
.pf-v5-c-page__sidebar .pf-v5-c-label {
    font-size: 8.1px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* A rolagem da barra não pode empurrar largura: em tela curta, com quinze
   itens, uma barra de rolagem larga rouba espaço do rótulo e as palavras
   quebram. */
.pf-v5-c-page__sidebar-body {
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ----------------------------------------------------------------------------
   6. O CONTEÚDO — largura, títulos, cartões.

   A coluna tem teto de largura. Uma linha de texto que atravessa um monitor de
   27" não se lê: o olho perde o começo da linha seguinte. 76rem é a mesma
   medida das telas internas do painel.
   -------------------------------------------------------------------------- */
/* O RESPIRO DA COLUNA, e a regra que impede ele de dobrar.

   O PatternFly emite VÁRIAS `page__main-section` empilhadas numa tela só
   (cabeçalho da página, corpo, rodapé de ações). Cada uma com respiro completo
   soma o de baixo com o de cima e abre um vão de 3rem entre blocos que são o
   mesmo assunto. A segunda em diante perde o respiro de cima. */
.pf-v5-c-page__main-section {
    padding: 1.5rem 2rem !important;
}

.pf-v5-c-page__main-section + .pf-v5-c-page__main-section {
    padding-top: 0 !important;
}

/* Cabeçalho de página (título + descrição) cola no conteúdo que ele nomeia,
   em vez de flutuar no meio do caminho entre a faixa e o cartão. */
.pf-v5-c-page__main-section.pf-m-light,
.pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
    padding-bottom: 0.75rem !important;
}

.pf-v5-c-card__body {
    padding: 1.25rem 1.5rem !important;
}

.pf-v5-c-card__title,
.pf-v5-c-card__header {
    padding: 1.25rem 1.5rem 0 !important;
}

.pf-v5-c-card__footer {
    padding: 0.75rem 1.5rem 1.25rem !important;
}

/* Um cartão depois do outro não pode encostar. */
.pf-v5-c-card + .pf-v5-c-card {
    margin-top: 1rem !important;
}

/*
   A COLUNA É DA SEÇÃO, E NÃO DE CADA BLOCO.

   A primeira versão desta regra punha `max-width: 76rem; margin-inline: auto`
   em cada filho da seção. Parece a mesma coisa e não é: `margin: auto`
   centraliza cada bloco pela LARGURA DELE. O título "Atividade do dispositivo"
   é estreito e era empurrado para o meio; o cabeçalho "Dispositivos
   autenticados", que ocupa a linha toda, ficava na esquerda. Dois blocos da
   mesma tela, dois pontos de partida diferentes — e a tela perde o eixo
   vertical que o olho usa para descer lendo.

   Agora quem tem a coluna é a seção, via `padding-inline`. Todo filho começa
   na mesma vertical, seja ele um título de três palavras ou uma tabela de dez
   colunas. O `max()` é o que faz a coluna centralizar em monitor largo sem
   nunca deixar o respiro cair abaixo de 2rem no monitor estreito.
*/
.pf-v5-c-page__main-section > * {
    max-width: 100%;
    margin-inline: 0;
}

/*
   E o desfazer vale em QUALQUER profundidade.

   O bloco de título ("Entrando", "Atividade do dispositivo") não é filho direto
   da seção — vem embrulhado. Uma regra de filho direto não o alcançava, e ele
   continuava centralizado pela própria largura, ~145px à direita de todo o
   resto. Estes são os invólucros que carregam conteúdo de largura livre; o
   respiro deles é o da seção, e a margem lateral é zero.
*/
.pf-v5-c-page__main .pf-v5-c-content,
.pf-v5-c-page__main .pf-v5-c-title,
.pf-v5-c-page__main .pf-v5-l-stack,
.pf-v5-c-page__main .pf-v5-l-split,
.pf-v5-c-page__main .pf-v5-c-card,
.pf-v5-c-page__main .pf-v5-c-form,
.pf-v5-c-page__main form {
    margin-inline: 0 !important;
    max-width: 100% !important;
}

/* O estado vazio continua centralizado: lá o centro é a mensagem inteira, com
   ícone e botão, e não um título solto no meio de uma tela com conteúdo. */
.pf-v5-c-page__main .pf-v5-c-empty-state,
.pf-v5-c-page__main .pf-v5-c-empty-state__content {
    margin-inline: auto !important;
}

@media (min-width: 1200px) {
    .pf-v5-c-page__main-section,
    .pf-v5-c-page__main-breadcrumb {
        padding-inline: max(2rem, calc((100% - 76rem) / 2)) !important;
    }
}

/*
   SEÇÃO DENTRO DE SEÇÃO NÃO ACRESCENTA RESPIRO.

   O console de conta aninha `page__main-section`: uma para a página inteira e
   outra para cada bloco dentro dela. A regra acima vale para as duas, e a de
   dentro somava os mesmos 2rem — os ~32px que empurravam "Autenticação Básica"
   para a direita de "Entrando".

   Não é um caso especial do "Entrando": é o que acontece em qualquer tela que
   aninhe seções, e por isso a regra é estrutural. Ela vem DEPOIS do bloco de
   mídia acima de propósito, para vencê-lo em qualquer largura.

   A largura máxima também sai: a coluna já foi decidida pela seção de fora, e
   uma segunda de 76rem dentro dela só teria efeito em monitor gigante — onde
   apertaria o conteúdo pela metade sem ninguém entender por quê.
*/
.pf-v5-c-page__main-section .pf-v5-c-page__main-section,
.pf-v5-c-page__main-section .pf-v5-c-page__main-body,
.pf-v5-c-page__main-section .pf-v5-c-page__main-breadcrumb {
    padding-inline: 0 !important;
    max-width: none !important;
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3,
.pf-v5-c-content h4 {
    color: hsl(var(--foreground)) !important;
    font-family: var(--font-sans) !important;
    letter-spacing: -0.01em;
}

.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl,
.pf-v5-c-content h1 {
    font-size: 21.1px !important;
    font-weight: 700 !important;
}

.pf-v5-c-content p,
.pf-v5-c-content li,
.pf-v5-c-content small,
.pf-v5-c-content .pf-v5-u-color-200 {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 11.4px !important;
}

/* O cartão é a mesma caixa do painel: superfície um degrau acima do fundo,
   borda de 1px, raio de container. A elevação vem da BORDA, não da sombra —
   sombra sobre fundo escuro some, borda não. */
.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-c-expandable-section {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

.pf-v5-c-card__title,
.pf-v5-c-card__header {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

.pf-v5-c-card__body,
.pf-v5-c-card__footer,
.pf-v5-c-panel__main,
.pf-v5-c-panel__header,
.pf-v5-c-panel__footer {
    background-color: transparent !important;
    color: inherit !important;
}

/* Rolagem: a barra segue a paleta. `color-scheme: dark` lá em cima já resolve
   no Firefox e no Safari; o WebKit precisa das duas regras abaixo. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--input));
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

/* ----------------------------------------------------------------------------
   7. CAMPOS — a MESMA geometria do login, e UMA caixa só.

   2,625rem de altura, raio de controle, borda `--input` (a que tem 3:1 contra
   o entorno), fundo levemente mais escuro que o cartão e anel de foco de 3px a
   28%. Quem sai do login e chega aqui digita no mesmo campo.

   ─── A BORDA DUPLA, E POR QUE ELA ACONTECEU ────────────────────────────────

   Em PatternFly v5, `.pf-v5-c-form-control` NÃO é o `<input>`: é um `<span>`
   que o embrulha.

       <span class="pf-v5-c-form-control"><input type="text"></span>

   A primeira versão desta seção desenhava a caixa nos dois — invólucro e campo
   —, e o resultado era um retângulo arredondado dentro do outro, separados por
   um fio. Na tela isso lia como campo em foco permanente, em TODOS os campos ao
   mesmo tempo, e era o que fazia o formulário do realm parecer "aceso".

   A regra que fica: **a caixa é do invólucro; o controle de dentro é
   transparente e sem borda.** Os seletores de `input[type=…]` soltos continuam
   ganhando a caixa porque nem toda tela do Keycloak usa a marcação do
   PatternFly — mas quando o invólucro existe, ele manda.
   -------------------------------------------------------------------------- */

/* A CAIXA — no invólucro do PatternFly e nos campos soltos. */
.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
    box-sizing: border-box !important;
    background-color: hsl(var(--background) / 0.6) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: var(--radius-control) !important;
    font-family: var(--font-sans) !important;
    font-size: 11.4px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* O CONTROLE DE DENTRO — sem caixa própria, ocupando o invólucro inteiro.
   `width/height: 100%` importa: sem eles sobra uma faixa clicável de invólucro
   em volta do campo que não recebe o cursor de texto, e a pessoa clica na
   borda achando que clicou no campo. */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    font: inherit !important;
    box-shadow: none !important;
    outline: none !important;
    min-width: 0;
}

/*
   A ALTURA E O RESPIRO — no invólucro, que agora é quem tem a caixa.

   O `display` FICA COMO O PATTERNFLY DEIXOU: `grid` com `1fr auto`. A primeira
   versão desta regra forçava `flex`, e isso quebra a segunda coluna — é nela
   que moram os utilitários do campo (o olho da senha, o ícone de erro, o
   "limpar"). Só o alinhamento vertical muda: o padrão é `start`, que com altura
   fixa deixa o texto colado no topo.
*/
.pf-v5-c-form-control {
    height: 34.1px !important;
    padding: 0 9.8px !important;
    align-items: center !important;
}

/* Tamanho do TEXTO do campo — inclusive `<select>`, que usa o mesmo
   invólucro (`.pf-v5-c-form-control > select`, logo acima). Não havia
   nenhuma regra de `font-size` aqui antes: o campo herdava o padrão do
   PatternFly (maior que o do tema de login) enquanto só a altura/padding
   tinham sido copiados. */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
    font-size: 11.4px !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"] {
    height: 34.1px !important;
    padding: 0 9.8px !important;
    font-size: 11.4px !important;
}

/* Invólucro de área de texto: altura livre, respiro em cima. */
.pf-v5-c-form-control.pf-m-textarea,
.pf-v5-c-form-control:has(> textarea) {
    height: auto !important;
    min-height: 7rem !important;
    padding: 0.625rem 0.75rem !important;
    align-items: stretch;
}

.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control textarea {
    min-height: 5.5rem !important;
    line-height: 1.55 !important;
    resize: vertical;
}

/* O PatternFly marca o estado do campo com `::before`/`::after` que desenham
   uma borda de baixo. Com a caixa completa acima, viram uma segunda linha por
   cima da nossa. */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before {
    display: none !important;
}

.pf-v5-c-form-control input::placeholder,
.pf-v5-c-form-control textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: hsl(var(--muted-foreground) / 0.6) !important;
}

/* O FOCO É UM ANEL, e não uma troca de cor de borda — cor sozinha não é sinal
   acessível para quem não distingue o matiz. Como o campo de verdade está
   DENTRO do invólucro, quem recebe o anel é o invólucro, via `:focus-within`. */
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
input:focus,
select:focus,
textarea:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
    outline: none !important;
}

/*
   ─── O ANEL TAMBÉM É DE QUEM ESTÁ MAIS DE FORA ──────────────────────────────

   Esta é a terceira metade da mesma regra, e a que faltava.

   A borda e o fundo dos elementos internos já eram zerados. O ANEL DE FOCO não
   era — e `input:focus` alcança o `<input>` que mora dentro do invólucro. O
   resultado é um anel desenhado no elemento interno, que está com
   `border-radius: 0`: um retângulo de canto RETO aceso por dentro de um campo
   de canto redondo. Foi o que apareceu no "Remetente" ao clicar.

   Nenhum elemento dentro de um controle acende anel. Quem acende é a moldura.
*/
.pf-v5-c-form-control *,
.pf-v5-c-input-group *,
.pf-v5-c-text-input-group *,
.pf-v5-c-menu-toggle *,
.pf-v5-c-select__toggle *,
.pf-v5-c-clipboard-copy__group *,
.pf-v5-c-number-input *,
.pf-v5-c-file-upload *,
.pf-v5-c-context-selector__toggle * {
    box-shadow: none !important;
}

/* E o `outline` do navegador segue a mesma lógica: o campo interno já está
   dentro de uma moldura que acende inteira, então um segundo contorno ali é
   ruído — mas ele CONTINUA para quem chega por teclado em controle solto, que
   é onde o contorno é a única pista. */
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus,
.pf-v5-c-input-group input:focus,
.pf-v5-c-text-input-group input:focus,
.pf-v5-c-menu-toggle input:focus {
    outline: none !important;
    border-color: transparent !important;
}

/*
   AUTOPREENCHIMENTO — o Chrome pinta o campo preenchido com um amarelo/branco
   fixo que nenhuma `background-color` sobrescreve. O truque que funciona é a
   sombra interna gigante (pinta o fundo) somada ao `-webkit-text-fill-color`
   (pinta o texto). Sem isto, o campo de e-mail do console volta branco sozinho
   quando o navegador o preenche.
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--muted)) inset !important;
    caret-color: hsl(var(--foreground)) !important;
    transition: background-color 100000s ease-in-out 0s;
}

/* TAMANHO EM PX, NÃO EM REM — igual em todo este arquivo a partir daqui.
   O tema de login mede rótulo/campo/botão em rem contra uma raiz que MUDA
   com a largura da tela (13px a 18px — ver `apibrasil-v16-20260910.css`,
   regra `html`); este console fica com a raiz padrão do navegador (16px),
   de propósito: o PatternFly usa rem para tudo — espaçamento interno,
   ícone, grade — e reescalar a raiz redimensionaria o console inteiro, não
   só o que a gente estilizou aqui. Os valores abaixo são o tamanho que cada
   peça PINTA no login na raiz de 13px (a mais comum, até 1279px de
   largura), escritos direto em px: mesmo resultado visual, sem tocar na
   raiz do PatternFly. */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
label {
    color: hsl(var(--foreground)) !important;
    font-size: 10.6px !important;
    font-weight: 450 !important;
}

.pf-v5-c-form__label-required {
    color: hsl(var(--destructive)) !important;
    margin-left: 0.25rem;
}

.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__group-label-help {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.2px !important;
}

.pf-v5-c-form__helper-text.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text {
    color: hsl(var(--destructive)) !important;
}

/*
   CAMPO SÓ-LEITURA vs. CAMPO DESABILITADO — visualmente diferentes, e de
   propósito. "Nome de usuário" no console de conta é só-leitura: o valor é
   informação e precisa continuar legível. Desabilitado é um controle que a
   pessoa não pode usar agora, e esse pode (deve) apagar.
*/
/*
   O ESTADO PINTA O INVÓLUCRO, E SÓ ELE.

   A primeira versão listava o invólucro E o `input` de dentro no mesmo
   seletor. Como as duas cores são translúcidas, elas SOMAVAM onde se
   sobrepunham: o miolo do campo ficava mais escuro que a faixa de respiro das
   laterais, e o resultado era uma listra vertical clara em cada ponta — algo
   que lê como sombra malfeita, e que só aparece em campo desabilitado ou
   só-leitura, porque é o único que tem cor de fundo própria.

   Com a caixa no invólucro (seção 7), o estado é dele também. O controle de
   dentro continua transparente, sempre.
*/
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control:has(> input[readonly]),
.pf-v5-c-form-control:has(> textarea[readonly]),
input[readonly]:not(.pf-v5-c-form-control input),
textarea[readonly]:not(.pf-v5-c-form-control textarea) {
    background-color: hsl(var(--muted) / 0.5) !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
    cursor: default;
}

.pf-v5-c-form-control.pf-m-disabled,
.pf-v5-c-form-control[disabled],
.pf-v5-c-form-control:has(> input:disabled),
.pf-v5-c-form-control:has(> select:disabled),
.pf-v5-c-form-control:has(> textarea:disabled),
input:disabled:not(.pf-v5-c-form-control input),
select:disabled:not(.pf-v5-c-form-control select),
textarea:disabled:not(.pf-v5-c-form-control textarea) {
    background-color: hsl(var(--muted) / 0.35) !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--muted-foreground) / 0.6) !important;
    cursor: not-allowed;
}

/* O controle de dentro NUNCA tem fundo próprio — nem quando desabilitado. É
   esta regra que impede a soma de tintas voltar por outro caminho. */
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea,
.pf-v5-c-form-control input[readonly],
.pf-v5-c-form-control input:disabled,
.pf-v5-c-form-control select:disabled,
.pf-v5-c-form-control textarea:disabled {
    background-color: transparent !important;
}

/* Texto do campo desabilitado herda a cor do invólucro, senão o PatternFly o
   pinta com o cinza dele — que no escuro some. */
.pf-v5-c-form-control.pf-m-disabled input,
.pf-v5-c-form-control:has(> input:disabled) input,
.pf-v5-c-form-control.pf-m-readonly input {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

/*
   A CAIXA DE MARCAR É DESENHADA AQUI, e não deixada com o controle nativo.

   `accent-color` pinta o controle MARCADO e não faz nada com o desmarcado: ele
   continua sendo o quadrado do sistema operacional. Num tema escuro isso é um
   retângulo claro cravado no meio da linha da tabela — foi o que apareceu na
   coluna de seleção do "Gerenciar realms". E como o desenho nativo é do
   sistema, ele também não respeita altura: numa célula alta ele ESTICA, e o do
   cabeçalho saía deformado.

   Desenhar custa vinte linhas e entrega as três coisas que faltavam: cor
   própria no desmarcado, tamanho que não estica, e o mesmo raio e a mesma borda
   dos outros controles da tela. É o mesmo desenho do tema de login, onde ele já
   existia pelo mesmo motivo.
*/
input[type="checkbox"],
input[type="radio"],
.pf-v5-c-check__input,
.pf-v5-c-radio__input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    /* 13px/4px — o `Checkbox` real (`components/ui/checkbox.tsx`) é
       `size-4 rounded-[4px]`: 1rem numa raiz de 13px é 13px cravado, não
       14.6px (essa era uma aproximação de 9% a mais, sem fonte). O fundo
       desmarcado também é do componente real: `dark:bg-input/30`, um véu do
       PRÓPRIO `--input` — não `--background`, que é outra superfície e lia
       como um cinza estranho e sem relação com a borda que o embrulha. */
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    margin: 0;
    padding: 0 !important;
    /* SEM BORDA EM REPOUSO. `--input` a 45% de claridade sobre um fundo de
       6-9% é um contorno vivo, quase brilhante, num alvo de 13px — lê como
       halo cinza em volta da caixa, não como borda de campo. O preenchimento
       (`--input`/30%) já entrega o recorte contra a página sozinho; a borda
       volta só em `:hover` e o anel de foco só em `:focus-visible`, os dois
       já definidos abaixo — é ali que ela ganha função. */
    border: 1px solid transparent !important;
    border-radius: 4px;
    background-color: hsl(var(--input) / 0.3) !important;
    box-shadow: 0 1px 2px 0 hsl(231 60% 2% / 0.05);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

input[type="radio"],
.pf-v5-c-radio__input {
    border-radius: 50% !important;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: hsl(var(--primary) / 0.7) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
input[type="checkbox"]:indeterminate {
    background-color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

/* O "tique" é uma borda em L girada 45°: sem imagem, sem fonte de ícone, e
   acompanha a cor do texto sobre a primária. */
/* Geometria reescalada para a caixa de 13px (era 14.6px): mesma posição
   relativa, multiplicada pela razão 13/14.6 = 0,8904. */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4.1px;
    top: 0.8px;
    width: 3.3px;
    height: 6.5px;
    border: solid hsl(var(--primary-foreground));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Indeterminado (o do cabeçalho, quando só algumas linhas estão marcadas) é um
   traço — e é uma informação diferente de "marcado", não um meio-termo. */
input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    left: 2.4px;
    top: 5.25px;
    width: 6.5px;
    height: 1.6px;
    background-color: hsl(var(--primary-foreground));
    border-radius: 1px;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 2.4px;
    border-radius: 50%;
    background-color: hsl(var(--primary-foreground));
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: hsl(var(--muted)) !important;
    border-color: hsl(var(--border)) !important;
    cursor: not-allowed;
}

/* A caixa de marcar solta numa barra de ferramentas precisa de ar entre ela e
   o rótulo, e de não esticar a altura da fileira. */
.pf-v5-c-input-group .pf-v5-c-check,
.pf-v5-c-toolbar .pf-v5-c-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    /* Respiro vertical, não só o horizontal que já existia — uma caixa de
       marcar solta (sem moldura, de propósito) ao lado de campos com caixa
       visível fica fina demais sem nenhum espaço próprio acima/abaixo. */
    padding-block: 0.375rem;
    padding-inline: 0.25rem;
}

.pf-v5-c-check__label,
.pf-v5-c-radio__label {
    color: hsl(var(--foreground)) !important;
    font-size: 11.4px !important;
}

.pf-v5-c-check__description,
.pf-v5-c-radio__description {
    color: hsl(var(--muted-foreground)) !important;
}

/* Chave liga/desliga */
.pf-v5-c-switch__toggle {
    background-color: hsl(var(--muted)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
    background-color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

.pf-v5-c-switch__label {
    color: hsl(var(--foreground)) !important;
    font-size: 11.4px !important;
}

/* ----------------------------------------------------------------------------
   8. BOTÕES — os mesmos três pesos do login.

   Primário cheio (uma ação por tela), secundário de contorno, link sem caixa.
   Dois botões cheios lado a lado é a tela dizendo "tanto faz" sobre duas coisas
   que não se equivalem.
   -------------------------------------------------------------------------- */
/*
   A GEOMETRIA É UMA SÓ, E CADA VARIANTE REPETE — de propósito.

   `.pf-v5-c-button` sozinho já cobre altura/raio/padding para as três, mas
   "Primário" e "Excluir" nasceram lendo tamanhos diferentes na tela: a marca
   `.pf-m-danger` do PatternFly vendorizado tem `!important` própria em cor E
   em raio nalguma build, e como cor e raio nunca tinham sido separados aqui,
   a briga só aparecia na hora de olhar. Repetir altura/raio/padding em cada
   variante — em vez de confiar só na regra de fora — fecha essa brecha para
   sempre, e o preço é três linhas repetidas, não um bug intermitente.
*/
.pf-v5-c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34.1px !important;
    padding-inline: 14.6px !important;
    border-radius: var(--radius-control) !important;
    font-family: var(--font-sans) !important;
    font-size: 11.4px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.pf-v5-c-button.pf-m-primary {
    height: 34.1px !important;
    padding-inline: 14.6px !important;
    border-radius: var(--radius-control) !important;
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border: 0 !important;
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: hsl(var(--primary-hover)) !important;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary,
.pf-v5-c-button.pf-m-control {
    height: 34.1px !important;
    padding-inline: 14.6px !important;
    border-radius: var(--radius-control) !important;
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover,
.pf-v5-c-button.pf-m-control:hover {
    background-color: hsl(var(--accent)) !important;
    border-color: hsl(var(--input)) !important;
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-inline {
    background-color: transparent !important;
    color: hsl(var(--primary)) !important;
    border: 0 !important;
    padding-inline: 0.5rem !important;
}

.pf-v5-c-button.pf-m-link:hover {
    color: hsl(var(--primary-hover)) !important;
    background-color: transparent !important;
}

/*
   A AÇÃO DESTRUTIVA É DE CONTORNO, e não um retângulo vermelho cheio.

   "Excluir conta", "Revogar sessão", "Remover credencial" são as ações que mais
   pedem uma pausa antes do clique. Um botão vermelho sólido é o alvo mais
   chamativo da tela — o desenho puxa exatamente para onde não se quer puxar. O
   contorno mantém o vermelho como AVISO e tira o convite; o preenchimento
   aparece no `:hover`, quando a intenção já existe.
*/
.pf-v5-c-button.pf-m-danger {
    height: 34.1px !important;
    padding-inline: 14.6px !important;
    border-radius: var(--radius-control) !important;
    background-color: transparent !important;
    color: hsl(var(--destructive)) !important;
    border: 1px solid hsl(var(--destructive) / 0.55) !important;
}

.pf-v5-c-button.pf-m-danger:hover {
    background-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
    border-color: hsl(var(--destructive)) !important;
}

.pf-v5-c-button.pf-m-plain {
    background-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    border: 0 !important;
}

.pf-v5-c-button.pf-m-plain:hover {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--accent)) !important;
}

.pf-v5-c-button.pf-m-small {
    height: 26px !important;
    font-size: 10.6px !important;
}

.pf-v5-c-button:disabled,
.pf-v5-c-button.pf-m-disabled {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground) / 0.55) !important;
    border-color: transparent !important;
    cursor: not-allowed;
}

.pf-v5-c-button:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Espaço entre Salvar e Cancelar — o PatternFly usa margem em alguns lugares e
   nada em outros; `gap` resolve os dois. */
.pf-v5-c-form__actions,
.pf-v5-c-form__group.pf-m-action .pf-v5-c-form__group-control,
.pf-v5-c-action-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.625rem !important;
}

/* ----------------------------------------------------------------------------
   9. TABELAS E LISTAS — sessões, dispositivos, aplicativos, clientes, usuários.

   É onde o console de administração vive. Linha sem tarja: a tarja zebrada
   ajuda quem varre trinta colunas num relatório impresso e atrapalha quem lê
   cinco numa tela — dá textura de fundo a uma superfície que já tem grade.
   -------------------------------------------------------------------------- */
.pf-v5-c-table,
.pf-v5-c-table tbody,
.pf-v5-c-table tr,
.pf-v5-c-table td,
.pf-v5-c-table th {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

.pf-v5-c-table thead th,
.pf-v5-c-table .pf-v5-c-table__sort-indicator {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 9.8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf-v5-c-table tbody tr {
    border-bottom: 1px solid hsl(var(--border)) !important;
}

.pf-v5-c-table tbody tr:hover {
    background-color: hsl(var(--accent) / 0.6) !important;
}

.pf-v5-c-table tbody tr.pf-m-selected,
.pf-v5-c-table tbody tr[aria-selected="true"] {
    background-color: hsl(var(--primary) / 0.12) !important;
}

.pf-v5-c-table td a,
.pf-v5-c-table th a,
.pf-v5-c-data-list__cell a {
    color: hsl(var(--primary)) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.pf-v5-c-data-list,
.pf-v5-c-data-list__item {
    background-color: transparent !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-data-list__item:hover {
    background-color: hsl(var(--accent) / 0.6) !important;
}

.pf-v5-c-data-list__cell,
.pf-v5-c-description-list__description,
.pf-v5-c-description-list__text {
    color: hsl(var(--foreground)) !important;
    font-size: 11.4px !important;
}

.pf-v5-c-description-list__term,
.pf-v5-c-description-list__term-text {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.6px !important;
    font-weight: 500 !important;
}

/* Barra de filtro/busca acima da tabela. */
.pf-v5-c-toolbar,
.pf-v5-c-toolbar__content {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-text-input-group,
.pf-v5-c-text-input-group__main,
.pf-v5-c-input-group,
.pf-v5-c-input-group__item {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-text-input-group__icon,
.pf-v5-c-text-input-group__utilities {
    color: hsl(var(--muted-foreground)) !important;
}

.pf-v5-c-chip,
.pf-v5-c-label {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 999px !important;
    font-size: 9.8px !important;
}

.pf-v5-c-label.pf-m-blue { background-color: hsl(var(--primary) / 0.16) !important; color: hsl(var(--primary)) !important; border-color: hsl(var(--primary) / 0.35) !important; }
.pf-v5-c-label.pf-m-green { background-color: hsl(var(--success) / 0.16) !important; color: hsl(var(--success)) !important; border-color: hsl(var(--success) / 0.35) !important; }
.pf-v5-c-label.pf-m-red { background-color: hsl(var(--destructive) / 0.16) !important; color: hsl(var(--destructive)) !important; border-color: hsl(var(--destructive) / 0.35) !important; }
.pf-v5-c-label.pf-m-orange,
.pf-v5-c-label.pf-m-gold { background-color: hsl(var(--warning) / 0.16) !important; color: hsl(var(--warning)) !important; border-color: hsl(var(--warning) / 0.35) !important; }

.pf-v5-c-badge {
    background-color: hsl(var(--primary) / 0.18) !important;
    color: hsl(var(--primary)) !important;
    border-radius: 999px !important;
}

.pf-v5-c-pagination,
.pf-v5-c-pagination__nav {
    background-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* ----------------------------------------------------------------------------
   10. CAMADAS FLUTUANTES — menu, seletor, modal, dica, aviso.

   Toda superfície que abre POR CIMA precisa de fundo opaco e sombra preta. Uma
   camada translúcida sobre fundo escuro deixa o texto de baixo atravessar, e o
   resultado é ilegível de um jeito que não aparece em captura de tela clara.
   -------------------------------------------------------------------------- */
/*
   A CAIXA DO MENU É UMA SÓ — e é a de fora.

   `.pf-v5-c-menu__content` mora DENTRO de `.pf-v5-c-menu`. Estilizar os dois no
   mesmo seletor dava dois `border`, dois `padding` e duas sombras: um contorno
   arredondado dentro do outro, e um menu de um item só ocupando o dobro da
   altura que precisava. É o mesmo erro que a borda dupla dos campos — invólucro
   e conteúdo tratados como se fossem a mesma peça.

   O raio VOLTOU A SER O DE CONTROLE, e não o de container.

   Uma tentativa anterior deste arquivo trocou para 1rem (`rounded-2xl`), lendo
   só o menu do usuário do painel (`user-menu-dropdown.tsx`), que É um cartão
   rico — mas este seletor vale para TODO menu flutuante do console: seletor
   múltiplo, `<select>`, menu de opções. Um raio de cartão numa lista de
   sugestão de dois itens, colada embaixo de um campo de raio menor, lia como
   "redondo demais" e destacava a própria borda em vez de se misturar com o
   campo que a abriu. O menu é a extensão do controle, não do cartão — o raio
   volta a ser o mesmo 0,625rem do botão/campo.
*/
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu,
.pf-v5-c-options-menu__menu,
.pf-v5-c-panel.pf-m-raised {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    box-shadow:
        0 20px 25px -5px hsl(231 60% 2% / 0.45),
        0 8px 10px -6px hsl(231 60% 2% / 0.35) !important;
    /* `p-2` do painel = 0,5rem na raiz de 13px = 6,5px. */
    padding: 6.5px !important;
    overflow: hidden;
}

/* O conteúdo é só o recheio: sem caixa própria, sem respiro próprio. */
.pf-v5-c-menu__content,
.pf-v5-c-menu__list,
.pf-v5-c-dropdown__menu-wrapper {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pf-v5-c-menu__item,
.pf-v5-c-dropdown__menu-item,
.pf-v5-c-select__menu-item,
.pf-v5-c-options-menu__menu-item {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    /* 11.4px: mesmo `text-sm` do título de cada item do menu do usuário
       (`user-menu-dropdown.tsx`), na raiz de 13px do painel — não 10.6px,
       que não correspondia a nenhum tamanho real usado ali. */
    font-size: 11.4px !important;
    /* `rounded-lg` = `--radius` (0,75rem) na raiz de 13px = 9,75px. */
    border-radius: 9.75px !important;
    margin-inline: 3.25px !important;
    /* UM ITEM NÃO ENCOSTA NO OUTRO. Cada item tem fundo próprio quando está
       selecionado ou sob o ponteiro, e com margem zero os dois blocos ficavam
       colados: o de baixo parecia a continuação do de cima, não uma escolha
       separada. 3px de cada lado (6px entre vizinhos) é o mesmo respiro que
       separa o texto do "×" dentro de uma etiqueta — o menu passa a ter o
       mesmo ritmo do resto do componente. */
    margin-block: 0.1875rem !important;
    width: auto !important;
}

/* O INVÓLUCRO (`<li>`) NÃO PINTA NADA — só o item de dentro, que é quem tem
   o raio e o recuo. Sem isto, um `<li>` de ponta a ponta pode herdar ou
   ganhar fundo próprio do PatternFly vendorizado e aparecer como um retângulo
   quadrado atrás do item redondo — o mesmo item lendo como duas formas
   sobrepostas, uma quadrada e uma redonda. */
.pf-v5-c-menu__list-item,
.pf-v5-c-dropdown__menu-item-wrapper {
    background-color: transparent !important;
}

/* Divisória entre grupos do menu — mesmo respiro do `my-2` que
   user-menu-dropdown.tsx aplica sobre o `DropdownMenuSeparator`. */
.pf-v5-c-menu .pf-v5-c-divider,
.pf-v5-c-dropdown__menu .pf-v5-c-divider {
    margin-block: 0.5rem !important;
}

/* Raio e inset repetidos aqui — não só na regra de repouso — para o hover (e
   o selecionado, logo abaixo) nunca lerem como um retângulo cheio de ponta a
   ponta. Um item quadrado ao lado de um redondo é mais visível que dois
   quadrados: a inconsistência denuncia a si mesma. */
.pf-v5-c-menu__item:hover,
.pf-v5-c-dropdown__menu-item:hover,
.pf-v5-c-select__menu-item:hover,
.pf-v5-c-options-menu__menu-item:hover {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--foreground)) !important;
    border-radius: 0.5rem !important;
    margin-inline: 0.25rem !important;
}

.pf-v5-c-menu__item.pf-m-selected,
.pf-v5-c-select__menu-item.pf-m-selected {
    background-color: hsl(var(--primary) / 0.14) !important;
    color: hsl(var(--primary)) !important;
}

/* "Sair" é o único item vermelho do menu — e é a saída, não um erro. */
.pf-v5-c-dropdown__menu-item.pf-m-danger,
.pf-v5-c-menu__item.pf-m-danger,
.pf-v5-c-dropdown__menu-item[id*="logout" i],
.pf-v5-c-menu__item[id*="logout" i] {
    color: hsl(var(--destructive)) !important;
}

/* Hover do "Sair" é vermelho translúcido, igual ao `hover:bg-destructive/10`
   do item real — não o cinza (`--accent`) que os outros itens usam. */
.pf-v5-c-dropdown__menu-item.pf-m-danger:hover,
.pf-v5-c-menu__item.pf-m-danger:hover,
.pf-v5-c-dropdown__menu-item[id*="logout" i]:hover,
.pf-v5-c-menu__item[id*="logout" i]:hover {
    background-color: hsl(var(--destructive) / 0.1) !important;
}

.pf-v5-c-modal-box {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 24px 60px hsl(231 60% 2% / 0.65) !important;
}

.pf-v5-c-modal-box__header,
.pf-v5-c-modal-box__body,
.pf-v5-c-modal-box__footer {
    background-color: transparent !important;
    color: inherit !important;
}

.pf-v5-c-modal-box__title {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

.pf-v5-c-backdrop {
    background-color: hsl(231 60% 2% / 0.72) !important;
}

.pf-v5-c-tooltip__content,
.pf-v5-c-popover__content {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    font-size: 10.2px !important;
}

.pf-v5-c-tooltip__arrow,
.pf-v5-c-popover__arrow {
    background-color: hsl(var(--muted)) !important;
    border-color: hsl(var(--border)) !important;
}

/*
   AVISOS — a cor é a borda esquerda, não o fundo inteiro.

   O PatternFly pinta o alerta com fundo da cor do estado. Sobre fundo claro isso
   dá um tom pastel; sobre fundo escuro dá um bloco saturado que ofusca o texto
   dentro dele. Aqui o fundo é a superfície normal e o estado entra na borda de
   4px e no ícone — o mesmo desenho dos avisos do painel.
*/
.pf-v5-c-alert {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-left: 4px solid hsl(var(--muted-foreground)) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

.pf-v5-c-alert__title,
.pf-v5-c-alert__description {
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-alert__description {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 11.4px !important;
}

.pf-v5-c-alert.pf-m-success { border-left-color: hsl(var(--success)) !important; }
.pf-v5-c-alert.pf-m-danger { border-left-color: hsl(var(--destructive)) !important; }
.pf-v5-c-alert.pf-m-warning { border-left-color: hsl(var(--warning)) !important; }
.pf-v5-c-alert.pf-m-info { border-left-color: hsl(var(--info)) !important; }

.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon { color: hsl(var(--success)) !important; }
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon { color: hsl(var(--destructive)) !important; }
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon { color: hsl(var(--warning)) !important; }
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon { color: hsl(var(--info)) !important; }

/* O aviso flutuante (canto da tela) é uma camada por cima: leva sombra. */
.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert {
    box-shadow: 0 16px 40px hsl(231 60% 2% / 0.6) !important;
}

/* ----------------------------------------------------------------------------
   11. O RESTO — abas, sanfona, atalhos, vazio, carregando, código.
   -------------------------------------------------------------------------- */
/*
   A FILEIRA NÃO PODE DEPENDER SÓ DO PatternFly VENDORIZADO.

   Este arquivo nunca foi visto rodando dentro do Keycloak de verdade (ver
   nota no topo do arquivo) — as abas do console de administração ("Geral,
   Login, Email...") são um componente que só existe lá, e uma folha de
   PatternFly incompleta ou de outra build faz `.pf-v5-c-tabs__list` cair no
   `display` padrão de `<ul>`, uma pilha vertical de blocos cinza. O layout
   é visual, então é nosso de garantir — não dá para confiar que o vendor
   entrega sozinho algo que nunca foi conferido.
*/
.pf-v5-c-tabs {
    display: flex !important;
    align-items: stretch;
    background-color: transparent !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/*
   A ROLAGEM EXISTE, A BARRA DE ROLAGEM NÃO.

   As abas rolam de lado quando não cabem — é o que as setas dos dois cantos
   servem para fazer. A barra do sistema por baixo delas é a MESMA rolagem
   oferecida duas vezes, e no celular ela ainda come altura e cobre o
   sublinhado da aba ativa. `overflow-x: auto` continua (senão as setas não
   teriam o que rolar); só a barra some.
*/
.pf-v5-c-tabs__list {
    display: flex !important;
    flex: 1 1 auto;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: transparent !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pf-v5-c-tabs__list::-webkit-scrollbar {
    display: none;
}

.pf-v5-c-tabs__item {
    display: flex !important;
}

/*
   A ABA É TEXTO, NÃO BOTÃO CINZA.

   O PatternFly entrega `.pf-v5-c-tabs__link` com fundo `rgb(107,107,107)` —
   um cinza CRU, que não sai de variável nenhuma nossa — e uma borda BRANCA de
   2px. Sobre esse cinza ele ainda põe o texto em cinza-claro: o resultado é
   uma tira de blocos quadrados com o rótulo quase ilegível, que foi
   exatamente o que apareceu no celular. Aqui a aba não tem caixa: é rótulo
   apagado em repouso, primária quando ativa, e o sublinhado de 2px abaixo é
   quem conta qual está aberta.
*/
.pf-v5-c-tabs__link {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-control) !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 11.4px !important;
    font-weight: 500 !important;
}

.pf-v5-c-tabs__link:hover {
    background-color: hsl(var(--accent) / 0.6) !important;
    color: hsl(var(--foreground)) !important;
}

/* As setas são ícone, não botão desenhado — mesma regra dos ícones da faixa
   do topo. Com borda de 2px elas viravam duas caixas nos cantos da fileira,
   mais pesadas que as próprias abas. */
.pf-v5-c-tabs__scroll-button {
    border: 0 !important;
    background-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    flex: 0 0 auto;
}

.pf-v5-c-tabs__scroll-button:hover {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    position: relative;
    color: hsl(var(--primary)) !important;
    font-weight: 600 !important;
}

/*
   O SUBLINHADO DA ABA ABERTA É DESENHADO AQUI, e não herdado.

   O `::after` que o PatternFly reserva para isso nasce com `content: none`
   nesta marcação — ou seja, pintar `background-color` nele não produzia
   sublinhado nenhum: a aba ativa ficava marcada SÓ pela cor. Cor sozinha não
   é sinal acessível (é o mesmo princípio do anel de foco, lá em cima), e num
   tema escuro com a primária em índigo a diferença some para quem enxerga
   pouco contraste. O traço fica POR CIMA da divisória da fileira (`bottom:
   -1px`), que é o que faz ele ler como "esta aba está aberta" em vez de
   "esta aba tem uma linha embaixo".
*/
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background-color: hsl(var(--primary)) !important;
    border: 0 !important;
}

.pf-v5-c-accordion,
.pf-v5-c-accordion__toggle,
.pf-v5-c-accordion__expandable-content,
.pf-v5-c-expandable-section__toggle,
.pf-v5-c-expandable-section__content {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-accordion__toggle:hover,
.pf-v5-c-expandable-section__toggle:hover {
    background-color: hsl(var(--accent)) !important;
}

.pf-v5-c-expandable-section__toggle-text,
.pf-v5-c-accordion__toggle-text {
    color: hsl(var(--primary)) !important;
}

.pf-v5-c-jump-links,
.pf-v5-c-jump-links__list {
    background-color: transparent !important;
}

.pf-v5-c-jump-links__link {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.6px !important;
    text-decoration: none !important;
}

.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link {
    color: hsl(var(--primary)) !important;
}

.pf-v5-c-empty-state {
    background-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
}

/*
   O ÍCONE DO ESTADO VAZIO É APAGADO, E ISSO É A DECISÃO.

   Estado vazio não é erro nem conquista: é uma tela ainda sem conteúdo. Ícone
   grande e colorido transforma "você não tem nenhum dispositivo vinculado" num
   anúncio. O que precisa de cor ali é o BOTÃO, quando existe um próximo passo.
*/
.pf-v5-c-empty-state__icon {
    color: hsl(var(--muted-foreground) / 0.5) !important;
}

.pf-v5-c-empty-state__title-text,
.pf-v5-c-empty-state .pf-v5-c-title {
    color: hsl(var(--foreground)) !important;
}

.pf-v5-c-spinner {
    --pf-v5-c-spinner--Color: hsl(var(--primary));
    color: hsl(var(--primary)) !important;
}

.pf-v5-c-skeleton {
    background-color: hsl(var(--muted)) !important;
}

.pf-v5-c-progress__bar {
    background-color: hsl(var(--muted)) !important;
}

.pf-v5-c-progress__indicator {
    background-color: hsl(var(--primary)) !important;
}

/*
   BLOCO DE CÓDIGO — o único lugar com fonte monoespaçada nestas telas.

   É onde o console de administração mostra JSON de cliente, chave pública e
   comando de importação: texto em que a coluna importa. Fora daqui, número que
   precisa alinhar usa `font-variant-numeric: tabular-nums`, e não mono —
   monoespaçada decorativa deixa a tela com cara de terminal sem motivo.
*/
.pf-v5-c-code-block,
.pf-v5-c-code-block__content,
.pf-v5-c-code-editor__code,
.pf-v5-c-clipboard-copy__body,
pre,
code {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace !important;
    font-size: 10.6px !important;
}

.pf-v5-c-clipboard-copy,
.pf-v5-c-code-editor,
.pf-v5-c-code-editor__header,
.pf-v5-c-code-editor__main {
    background-color: hsl(var(--background)) !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Números que se comparam entre linhas (datas de sessão, contadores, IPs)
   alinham por tabular-nums — a coluna fica reta sem virar mono. */
.pf-v5-c-table td,
.pf-v5-c-description-list__description {
    font-variant-numeric: tabular-nums;
}

a {
    color: hsl(var(--primary));
    text-decoration: none;
}

a:hover {
    color: hsl(var(--primary-hover));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
   FOCO SÓ NO TECLADO — a mesma correção do tema de login.

   O contorno que aparecia ao CLICAR num link ou botão (a "caixa estranha" em
   volta) some; o de quem navega por Tab fica. `:focus-visible` é o seletor que
   separa os dois, e a regra abaixo só apaga o que o navegador já não
   consideraria foco visível.
*/
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.pf-v5-c-button:focus:not(:focus-visible),
.pf-v5-c-nav__link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

a:focus-visible,
.pf-v5-c-nav__link:focus-visible,
.pf-v5-c-menu__item:focus-visible,
.pf-v5-c-dropdown__menu-item:focus-visible,
.pf-v5-c-tabs__link:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   11.5. O PENTE FINO DOS CONTROLES

   A seção 7 acertou o campo de texto comum. Esta cuida do resto do formulário,
   que no console de administração é a maior parte da tela: área de texto,
   seletor, campo com botão colado, busca, número, arquivo — e o espaçamento
   entre rótulo, campo e texto de ajuda.

   O fio condutor é um só: **todo controle tem a mesma altura, o mesmo raio e o
   mesmo anel de foco**. Formulário em que o seletor é dois pixels mais baixo
   que o campo ao lado não parece "um detalhe" — parece software mal-acabado, e
   quem olha não sabe dizer por quê.
   -------------------------------------------------------------------------- */

/* O RITMO DO FORMULÁRIO. O PatternFly separa grupos por uma variável de grade,
   e o padrão dela é apertado para um formulário de dez campos como os do
   realm. */
.pf-v5-c-form {
    --pf-v5-c-form--GridGap: 1.25rem;
}

.pf-v5-c-form__group-label {
    margin-bottom: 0.375rem !important;
}

.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text {
    margin-top: 0.375rem !important;
}

/* A ÁREA DE TEXTO SOLTA (fora da marcação do PatternFly) leva a caixa inteira.
   A que vem embrulhada é tratada na seção 7, junto com o resto do modelo de
   caixa única — repetir aqui desfazia lá, porque esta seção vem depois. */
textarea:not(.pf-v5-c-form-control textarea) {
    min-height: 7rem !important;
    padding: 0.625rem 0.75rem !important;
    line-height: 1.55 !important;
    resize: vertical;
}

/*
   O SELETOR — nativo e o do PatternFly, na mesma altura do campo de texto.

   O `select` nativo desenha a setinha com a cor do sistema, que no escuro some.
   A seta abaixo é um SVG embutido em `data:` (não é requisição de rede, não é
   fonte de ícone) pintado com a cor de texto apagado, e o `padding-right` abre
   o lugar dela — sem isso o texto de uma opção longa passa por baixo da seta.
*/
select:not(.pf-v5-c-form-control select) {
    height: 2.625rem !important;
    padding: 0 2.25rem 0 0.75rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8adc4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem 1rem !important;
}

/*
   SELETOR EMBRULHADO — a seta vai no INVÓLUCRO.

   Com o modelo de caixa única, quem tem respiro interno é o `<span>` de fora; o
   `<select>` de dentro está com `padding: 0`. Desenhar a seta no `<select>`
   colaria ela no texto. Ela vira fundo do invólucro, e o `padding-right` de
   2,25rem abre o lugar — senão uma opção de nome longo passa por baixo dela.
*/
.pf-v5-c-form-control:has(> select) {
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8adc4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem 1rem !important;
}

.pf-v5-c-form-control > select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Os utilitários do campo (olho da senha, ícone de erro) vivem na segunda
   coluna da grade do PatternFly. Só precisam ficar centrados na altura nova e
   não empurrar o texto. */
.pf-v5-c-form-control__utilities {
    align-self: center !important;
    padding: 0 !important;
}

/* O seletor do PatternFly é um botão, não um `select`: alinha pela régua do
   CAMPO, e não pela do botão. */
.pf-v5-c-select__toggle,
.pf-v5-c-form-control.pf-m-expanded,
.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    min-height: 2.625rem !important;
    padding-inline: 0.75rem !important;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: var(--radius-control) !important;
    background-color: hsl(var(--background) / 0.6) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 11.4px !important;
    font-weight: 400 !important;
}

.pf-v5-c-select__toggle:focus-within,
.pf-v5-c-page__main .pf-v5-c-menu-toggle:focus-within {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

/* Aberto: a borda vira a primária. É o único lugar em que cor de borda sozinha
   comunica estado, e aqui pode — o menu aberto logo abaixo é o sinal de
   verdade, a borda só acompanha. */
.pf-v5-c-select__toggle[aria-expanded="true"],
.pf-v5-c-menu-toggle.pf-m-expanded {
    border-color: hsl(var(--primary)) !important;
}

/*
   CAMPO COM BOTÃO COLADO (busca, filtro, copiar) — uma peça, não duas.

   O PatternFly encosta um `input` num `button` e cada um traz a própria borda:
   no meio da junta ficam dois pixels de borda, e nos cantos internos sobra o
   arredondamento dos dois, formando aquele encaixe torto. Aqui o GRUPO vira a
   moldura, os filhos ficam sem borda, e só as pontas de fora arredondam.
*/
/*
   A MOLDURA DO GRUPO SÓ VALE QUANDO ELE EMBRULHA UM CAMPO DE TEXTO.

   O PatternFly usa `input-group` para qualquer fileira de controles — inclusive
   uma que só tem uma CAIXA DE MARCAR, como o "Exact search" da tela de Grupos.
   Ali a moldura não descreve nada: vira um retângulo de ponta a ponta em volta
   de uma frase de duas palavras, e a paginação logo abaixo parece ter caído
   dentro dele.

   O `:has()` faz a pergunta certa — "existe um campo de digitar aqui dentro?" —
   em vez de assumir que todo grupo é um campo com botão.
*/
.pf-v5-c-input-group {
    display: flex !important;
    align-items: stretch;
}

.pf-v5-c-input-group:has(input:not([type="checkbox"]):not([type="radio"])),
.pf-v5-c-input-group:has(.pf-v5-c-text-input-group),
.pf-v5-c-input-group:has(.pf-v5-c-form-control) {
    /* `--border`, não `--input` — este é o invólucro visível de verdade (o
       `.pf-v5-c-text-input-group`/`.pf-v5-c-form-control` de dentro tem a
       PRÓPRIA borda zerada pela regra "a caixa é de quem está mais de fora",
       mais abaixo neste arquivo). Mesma razão do seletor de etiquetas e da
       busca: caixa comprida, bastante vazio, `--input` acende demais em
       repouso. O anel de foco (logo abaixo) continua com `--ring`. */
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    overflow: hidden;
    background-color: hsl(var(--background) / 0.6) !important;
}

.pf-v5-c-input-group:focus-within {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

/*
   ─── A REGRA GERAL: A CAIXA É DE QUEM ESTÁ MAIS DE FORA ─────────────────────

   Este arquivo já consertou a mesma coisa quatro vezes — campo, menu, barra
   lateral, busca —, e sempre pelo mesmo motivo: o PatternFly aninha invólucro
   dentro de invólucro, e desenhar borda em mais de um nível empilha molduras.

       .pf-v5-c-input-group  >  .pf-v5-c-text-input-group  >  .pf-v5-c-form-control
       .pf-v5-c-menu-toggle  >  .pf-v5-c-text-input-group  >  input

   Cada um deles, sozinho, PRECISA saber desenhar a caixa: aparecem soltos em
   telas diferentes. O que não pode é desenhar quando já existe uma caixa por
   fora. Em vez de caçar combinação por combinação, a regra abaixo zera qualquer
   um deles quando ele está DENTRO de outro — e é a única forma de isso não
   voltar na próxima tela do console que ninguém abriu ainda.
*/
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-text-input-group,
.pf-v5-c-input-group .pf-v5-c-menu-toggle,
.pf-v5-c-input-group .pf-v5-c-select__toggle,
.pf-v5-c-input-group input,
.pf-v5-c-input-group .pf-v5-c-button,
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group,
.pf-v5-c-menu-toggle .pf-v5-c-form-control,
.pf-v5-c-menu-toggle input,
.pf-v5-c-select__toggle .pf-v5-c-text-input-group,
.pf-v5-c-select__toggle .pf-v5-c-form-control,
.pf-v5-c-text-input-group .pf-v5-c-form-control,
.pf-v5-c-text-input-group .pf-v5-c-text-input-group {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
}

/* O RESPIRO NÃO SOME — MUDA DE NÍVEL. A regra acima zera o padding do
   `.pf-v5-c-form-control` porque a caixa (borda) agora é do grupo; mas
   ninguém devolvia esse respiro, e o texto da URI ficava colado na borda
   esquerda do grupo inteiro. Só o `.pf-v5-c-form-control` puro precisa disso
   de volta — `.pf-v5-c-text-input-group` (busca com ícone) já resolve o
   próprio respiro em `__main`, e repetir aqui somaria os dois. */
.pf-v5-c-input-group .pf-v5-c-form-control {
    padding-inline: 9.8px !important;
}

/* O anel de foco também é do elemento de fora. Sem isto, o campo interno
   acende o próprio anel dentro da moldura do grupo e viram dois. */
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group .pf-v5-c-text-input-group:focus-within,
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group:focus-within,
.pf-v5-c-select__toggle .pf-v5-c-text-input-group:focus-within {
    box-shadow: none !important;
    border-color: transparent !important;
}

.pf-v5-c-input-group .pf-v5-c-button:hover {
    background-color: hsl(var(--accent)) !important;
}

/* A BUSCA da barra de ferramentas: mesma moldura, mais o ícone apagado à
   esquerda e o "limpar" à direita. */
.pf-v5-c-text-input-group {
    min-height: 2.625rem !important;
    padding-inline: 0.75rem !important;
    /* `--border`, não `--input`, em repouso — mesma razão do seletor de
       etiquetas: a busca é uma caixa comprida com bastante vazio (placeholder
       + ícone + botão), e o tom de campo (`--input`, mais claro) chama atenção
       de sobra parada. O foco (`:focus-within`, logo abaixo) continua com o
       anel de `--ring` — é ali que o destaque tem função. */
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-control) !important;
    background-color: hsl(var(--background) / 0.6) !important;
}

.pf-v5-c-text-input-group:focus-within {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

/*
   O RESPIRO DO CAMPO DE BUSCA SAI DA VARIÁVEL DO PATTERNFLY, e não de um valor
   cravado.

   Quando a busca tem ícone, o PatternFly põe a classe `pf-m-icon` no `__main` e
   ela alimenta `--pf-v5-c-text-input-group__text-input--PaddingLeft` com a
   largura da lupa mais o respiro. Cravar `padding-inline: 0.5rem` aqui apagava
   essa conta, e a lupa passava a ficar POR CIMA do texto digitado — que foi
   exatamente o que apareceu em "Contas vinculadas".

   Ler a variável com um valor de reserva resolve os dois casos com uma linha:
   com ícone, respeita a conta do componente; sem ícone, usa 0,5rem.
*/
/*
   O ÍCONE ENTRA NO FLUXO, e o campo deixa de precisar de respiro para ele.

   A tentativa anterior lia a variável que o PatternFly usa para reservar o
   espaço da lupa (`--…__text-input--PaddingLeft`). Ela só é definida quando a
   classe `pf-m-icon` está no `__main` — e há telas do console onde o ícone
   existe mas essa classe não. Ali a conta caía no valor de reserva, o ícone
   continuava posicionado POR CIMA e sobrava sobre as primeiras letras
   ("F🔍ar Por Nome"), que é o que aparecia em "Contas vinculadas".

   Depender de uma variável que às vezes existe é depender de sorte. Aqui o
   `__text` vira uma linha flex: ícone e campo lado a lado, cada um com o seu
   lugar. Não há sobreposição possível — e não importa se a classe está lá.
*/
.pf-v5-c-text-input-group__text {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem;
    min-width: 0;
}

/*
   O RESPIRO À ESQUERDA VOLTA — mas no `__main`, não na moldura.

   A regra geral ("a caixa é de quem está mais de fora") zera o respiro lateral
   de todo grupo aninhado, e é isso que impede a soma de respiros. Só que dentro
   de um `input-group` o campo de busca ficava sem NENHUM, e a lupa passava a
   encostar na borda — trocamos "ícone por cima do texto" por "ícone colado na
   moldura".

   O respiro volta uma camada mais para dentro: no `__main`, que é conteúdo e
   não moldura. A direita fica sem, porque lá quem termina a peça é o botão.
*/
.pf-v5-c-input-group .pf-v5-c-text-input-group__main,
.pf-v5-c-clipboard-copy__group .pf-v5-c-text-input-group__main {
    padding-left: 0.75rem !important;
}

.pf-v5-c-text-input-group__icon {
    position: static !important;
    flex: 0 0 auto !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
}

.pf-v5-c-text-input-group__text-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* A lupa não recebe clique: quem recebe é o campo inteiro, inclusive a área
   dela. Sem isto, clicar exatamente no ícone não põe o cursor no campo. */
.pf-v5-c-text-input-group__icon {
    pointer-events: none;
    color: hsl(var(--muted-foreground)) !important;
}

/*
   O BOTÃO COLADO NO CAMPO ocupa a altura inteira do grupo e ganha uma divisória
   à esquerda.

   Sem a divisória, campo e botão viram um bloco só e não se sabe onde termina o
   que se digita e começa o que se clica. Sem `align-self: stretch`, o botão
   fica menor que o grupo e sobra uma fresta do fundo em cima e embaixo dele —
   foi o que deixou a seta espremida contra a borda.
*/
.pf-v5-c-input-group {
    min-height: 2.625rem !important;
}

.pf-v5-c-input-group > * + .pf-v5-c-button,
.pf-v5-c-input-group > * + .pf-v5-c-input-group__item > .pf-v5-c-button {
    align-self: stretch !important;
    height: auto !important;
    min-width: 2.5rem !important;
    width: auto !important;
    padding-inline: 0.625rem !important;
    /* A divisória só existe entre o campo e o botão. Em botão que abre o grupo
       (o primeiro filho) ela viraria um risco solto na borda esquerda. */
    border-left: 1px solid hsl(var(--border)) !important;
}

/* Campo numérico: as setinhas do navegador ficam, mas só aparecem quando o
   ponteiro chega. Numa tela de configuração com vinte campos numéricos, elas
   acesas o tempo todo são vinte pontos de ruído que ninguém pediu. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    opacity: 0;
    transition: opacity 120ms ease;
}

input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
    opacity: 1;
}

/* Campo de arquivo: o botão nativo herda a cara dos nossos secundários. */
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-control);
    background: transparent;
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-size: 10.6px;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: hsl(var(--accent));
}

/*
   BOTÃO DE ÍCONE É QUADRADO, e não um retângulo de 2,6rem de altura com um
   ícone perdido no meio. A altura da seção 8 vale para botão com TEXTO; sem
   esta exceção, cada lixeira e cada lápis de linha de tabela vira um bloco
   largo, e a coluna de ações fica com o dobro do peso visual que merece.
*/
.pf-v5-c-button.pf-m-plain {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
}

/* Botão-link dentro de frase não pode ter altura de botão: ali ele é palavra. */
.pf-v5-c-button.pf-m-inline,
.pf-v5-c-button.pf-m-link.pf-m-inline {
    height: auto !important;
    padding: 0 !important;
    font-size: inherit !important;
    vertical-align: baseline;
}

/* ABAS — o respiro que o console de administração mais precisa. São doze abas
   numa linha só ("General, Login, Email, Themes, Keys, Events…"): apertadas,
   viram uma tira de palavras sem alvo claro, e a que está ativa se perde. */
.pf-v5-c-tabs__link {
    padding: 0.75rem 1rem !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    height: 2px !important;
}

/* TABELA: linha mais alta que o padrão. O do PatternFly é de relatório denso;
   aqui cada linha costuma terminar num botão de ação, e alvo de clique precisa
   de altura. */
.pf-v5-c-table {
    --pf-v5-c-table--cell--PaddingBlock: 0.75rem;
    --pf-v5-c-table--cell--PaddingInline: 1rem;
    width: 100% !important;
}

/*
   A TABELA MEIO-EMPILHADA — e por que ela encolhia no celular.

   Com `pf-m-grid-md`, o PatternFly troca a tabela por uma grade empilhada
   abaixo de 768px: cada linha vira um cartãozinho com rótulo. Só que ele faz
   isso em DUAS metades — `display: grid` na TABELA (seletor de classe simples,
   que casa sempre) e o resto do trabalho em `tr:where(.pf-v5-c-table__tr)`,
   `td:where(.pf-v5-c-table__td)`… (seletores que exigem a classe NA LINHA).

   Quando a marcação não traz essas classes de linha — o `<tr>` pelado deste
   preview, e qualquer tela do Keycloak que monte a tabela à mão —, só a
   primeira metade pega: a tabela vira `grid`, as linhas continuam
   `table-row`, e a caixa anônima de tabela que o navegador cria por baixo
   encolhe até o conteúdo. Resultado: 255px de colunas dentro de 358px de
   largura, com o vazio todo à direita.

   `:has()` faz a pergunta exata — "esta tabela participa mesmo do modo
   empilhado?". Se não participa, ela volta a ser tabela e ocupa a largura
   inteira. Onde o console de verdade emite as classes, nada aqui toca nele:
   o empilhamento do PatternFly segue valendo, que é o certo no celular para
   tabela de dez colunas.
*/
.pf-v5-c-table:not(:has(.pf-v5-c-table__tr)) {
    display: table !important;
    width: 100% !important;
}

.pf-v5-c-table thead th {
    padding-block: 0.625rem !important;
}

/* BARRA DE FERRAMENTAS: espaço ENTRE os itens, e nenhum nas pontas — ela já
   está dentro do respiro da coluna, e somar os dois desalinha a busca da
   tabela que vem logo abaixo. */
.pf-v5-c-toolbar__content {
    padding-inline: 0 !important;
}

.pf-v5-c-toolbar__content-section {
    gap: 0.625rem !important;
}

.pf-v5-c-toolbar__item + .pf-v5-c-toolbar__item {
    margin-left: 0 !important;
}

/*
   A BUSCA DA BARRA DE FERRAMENTAS OCUPA O QUE SOBRA.

   Todo `__item` do PatternFly nasce `flex: 0 1 auto`: cresce nada. Para o
   item que é botão ou paginação isso está certo — eles têm o tamanho do que
   carregam. Para o item que carrega o CAMPO DE BUSCA, não: ele ficava com a
   largura mínima do campo (~200px) e o resto da barra sobrava vazio à
   direita, com a paginação caindo para a linha de baixo assim mesmo.

   `:has()` separa os dois casos sem precisar de classe nova na marcação:
   item que contém campo cresce, item que não contém continua do tamanho do
   conteúdo. `min-width: 0` é o par obrigatório — sem ele o campo se recusa a
   encolher abaixo do conteúdo quando a barra aperta.
*/
.pf-v5-c-toolbar__item:has(.pf-v5-c-input-group),
.pf-v5-c-toolbar__item:has(.pf-v5-c-text-input-group),
.pf-v5-c-toolbar__item:has(.pf-v5-c-form-control),
.pf-v5-c-toolbar__item.pf-m-search-filter {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* ITEM DE MENU: mesmo respiro do `px-3 py-2.5` que os itens do menu do
   usuário usam no painel — 0,5rem verticais eram um número só deste tema. */
.pf-v5-c-menu__item,
.pf-v5-c-dropdown__menu-item,
.pf-v5-c-select__menu-item {
    /* `px-3 py-2.5` na raiz de 13px = 9,75px / 8,125px. */
    padding: 8.125px 9.75px !important;
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
    min-width: 10rem !important;
}

/*
   ALTURA E RESPIRO DA FAIXA — E A CONVERSÃO QUE FALTAVA.

   O header do painel é `h-12 sm:h-14` + `lg:pl-6 lg:pr-6`. A tentação é ler
   isso como 48/56px e 24px, que é o que esses degraus valem numa raiz de
   16px. Só que a raiz do PAINEL é 81,25% (13px), e o próprio
   `styles/globals.css` diz a frase inteira: "toda classe em `rem` — `h-9`,
   `h-5`, `text-sm` — pinta 19% MENOR aqui".

   Então o header real mede:

       h-12    3rem   × 13 =  39px   (celular)
       sm:h-14 3.5rem × 13 = 45,5px  (daí para cima)
       pl-6    1.5rem × 13 = 19,5px

   Este arquivo mantém a raiz de 16px de propósito (ver a nota da densidade na
   seção 2 — mexer nela reescalaria todo o PatternFly junto). A consequência é
   que NENHUM `rem` do painel pode ser copiado como está: ou vira px, ou vira
   `rem` multiplicado por 0,8125. Copiar o número cru deixava a faixa 23% mais
   alta que a de lá — foi o que aconteceu aqui até agora.
*/
.pf-v5-c-masthead {
    min-height: 45.5px !important;
    padding-inline: 19.5px !important;
}

/*
   O QUE DE FATO MANDAVA NA ALTURA NÃO ERA A REGRA ACIMA.

   `min-height` na faixa é um PISO — e os dois blocos de dentro
   (`__main`, que carrega a marca, e `__content`, que carrega a barra de
   controles) vêm do PatternFly com `min-height: 70px` PRÓPRIO. Era esse par
   que decidia a altura: 70px de conteúdo dentro de uma faixa que pedia 56,
   e o piso perdia da soma. Na tela estreita os dois ainda empilhavam, e a
   faixa ia a 115px — mais que o DOBRO do header do painel.

   Zerado o piso de dentro, quem decide volta a ser a faixa: 56px em tela
   larga (`sm:h-14`) e 48px no celular (`h-12`), os dois degraus que o
   header real usa.
*/
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-page__header-brand,
.pf-v5-c-page__header-tools {
    min-height: 0 !important;
    /* O padding vertical do `__main` é do layout EMPILHADO (ele afastava a
       faixa da marca da faixa dos controles). Numa fileira só ele vira 8px em
       cima e 8px embaixo da logo: com os 31px da marca, era ele que segurava
       o header do celular em 48px depois de todo o resto já estar convertido
       para a escala do painel. */
    padding-block: 0 !important;
}

/*
   UMA FILEIRA SÓ — inclusive no celular.

   Abaixo de 768px o PatternFly troca a faixa por uma GRADE DE DUAS LINHAS:
   a marca sozinha em cima, o menu-sanduíche e os controles embaixo
   (`grid-template-rows: 47px 48px`, visto no computed). São dois headers
   empilhados, e a faixa vai a ~96px.

   O header do painel não faz isso em largura nenhuma: marca, busca e ações
   dividem UMA linha de 48px, e o que encolhe é a busca no meio. Aqui a peça
   que encolhe é o `__content`; a marca e o menu-sanduíche ficam do tamanho
   que são. Vira `flex` para a fileira existir de fato — com `grid` herdado,
   qualquer alinhamento nosso brigaria com as áreas que o PatternFly define.
*/
.pf-v5-c-masthead {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
}

.pf-v5-c-masthead__main {
    flex: 0 0 auto !important;
    width: auto !important;
    /* O PatternFly põe `order: -1` na marca para jogá-la na linha de cima do
       layout de duas linhas. Sem a segunda linha, esse -1 só inverte a ordem
       da fileira: a marca passava na frente do menu-sanduíche. Zerado, vale a
       ordem da marcação — sanduíche, marca, controles —, que é a do painel. */
    order: 0 !important;
}

/* A DIVISÓRIA ENTRE AS DUAS LINHAS, SEM AS DUAS LINHAS. `__main::before` é o
   fio que separava a faixa da marca da faixa dos controles no layout
   empilhado do PatternFly (1px em `rgb(174,177,194)`, cinza dele). Numa
   fileira só ele fica atravessado no meio da faixa, sem separar nada. */
.pf-v5-c-masthead__main::before,
.pf-v5-c-masthead__main::after {
    display: none !important;
}

.pf-v5-c-masthead__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end;
}

@media (max-width: 639px) {
    .pf-v5-c-masthead {
        /* `h-12` na raiz de 13px = 39px, não 48. Mesma conversão da regra
           acima. */
        min-height: 39px !important;
    }

    /*
       OS BOTÕES DA FAIXA FICAM FORA DA REGRA DOS 44px.

       A seção 12 dá 44px de altura mínima a todo `.pf-v5-c-button` no celular
       — medida de dedo, e certa para o botão de um formulário. Dentro de uma
       faixa de 39px ela é maior que a própria faixa: era ela que mantinha o
       header em 48px, 23% acima do painel, depois de todo o resto já estar
       convertido.

       E o painel responde a isso sozinho: o botão de menu dele é `h-10 w-10`
       — 32,5px —, não 44. Some com os 44px aqui e o header fecha nos 39px
       exatos, com o alvo no mesmo tamanho do produto que estamos copiando.
       32,5px continua acima do mínimo de 24px da WCAG 2.5.8 (AA); os 44px são
       o alvo da 2.5.5, que é AAA e vale para o corpo da página, não para uma
       faixa de altura fixa.
    */
    .pf-v5-c-masthead .pf-v5-c-button,
    .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
    .pf-v5-c-masthead .pf-v5-c-menu-toggle {
        min-width: 32.5px !important;
        min-height: 32.5px !important;
        width: auto !important;
        height: auto !important;
    }

    .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
        width: 32.5px !important;
        height: 32.5px !important;
    }
}

/*
   O MENU-SANDUÍCHE SÓ EXISTE ENQUANTO A BARRA LATERAL SE ESCONDE.

   Com a lateral fixa na tela, o sanduíche não abre nada que já não esteja
   aberto: é um botão que não faz diferença nenhuma, no canto de maior peso
   da tela. O painel resolve igual — o botão de menu de lá só existe abaixo
   de `lg`, porque a partir dali a barra é permanente.

   1200px, e não os 1024 do painel, porque o número aqui não é nosso: é em
   `width >= 1200px` que o PatternFly para de recolher `.pf-v5-c-page__sidebar`.
   Esconder antes disso deixaria a navegação inalcançável numa faixa de
   larguras — o defeito seria pior que o botão sobrando.
*/
@media (min-width: 1200px) {
    .pf-v5-c-masthead__toggle,
    .pf-v5-c-page__header-brand-toggle {
        display: none !important;
    }
}

/* DESCRIÇÃO EM LISTA (Informações pessoais, Informações do realm): termo e
   valor precisam de ar entre os pares, senão a lista inteira lê como um
   parágrafo de duas colunas. */
.pf-v5-c-description-list {
    --pf-v5-c-description-list--RowGap: 1rem;
    --pf-v5-c-description-list--ColumnGap: 1.5rem;
}

/* ----------------------------------------------------------------------------
   13. A CAIXA É DE QUEM ESTÁ MAIS DE FORA — a regra, aplicada a tudo.

   A seção 11.5 resolveu isso para busca e seletor. Esta estende o mesmo
   princípio para TODOS os compostos que os dois consoles carregam de fato — a
   lista saiu dos próprios pacotes que o Keycloak serve:

       curl .../account/apibrasil/assets/main-*.css
       curl .../admin/apibrasil/assets/main-*.css

   Não é lista imaginada: é o que existe na tela. Cada composto abaixo embrulha
   um controle que já sabe se desenhar sozinho, e é dessa sobreposição que nasce
   a moldura dentro da moldura.
   -------------------------------------------------------------------------- */

/* Campo numérico com os botões +/−, campo de arquivo, edição em linha e o
   seletor de contexto: todos embrulham `form-control` ou `input-group`. */
.pf-v5-c-number-input .pf-v5-c-form-control,
.pf-v5-c-number-input .pf-v5-c-input-group,
.pf-v5-c-number-input input,
.pf-v5-c-file-upload .pf-v5-c-form-control,
.pf-v5-c-file-upload textarea,
.pf-v5-c-inline-edit .pf-v5-c-form-control,
.pf-v5-c-inline-edit input,
.pf-v5-c-context-selector .pf-v5-c-text-input-group,
.pf-v5-c-context-selector .pf-v5-c-form-control {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* ...e o composto passa a ser a moldura. */
/*
   O CAMPO DE NÚMERO COM "−" E "+".

   O composto é `number-input > input-group > [botão, campo, botão]`. Zerar a
   caixa dos filhos (a regra da seção 13) resolvia a moldura dupla e deixava os
   dois botões sem tamanho, sem respiro e sem nada que os separasse do número —
   três caracteres espremidos onde deveria haver um controle.

   Aqui eles voltam a ter largura de alvo de clique, altura cheia do campo e uma
   divisória de cada lado do número. O campo mede 4rem e centraliza: um valor de
   um ou dois dígitos alinhado à esquerda num campo largo parece perdido, e é
   um número que se compara com o de cima e o de baixo.
*/
.pf-v5-c-number-input {
    display: inline-flex !important;
    align-items: stretch;
    width: auto !important;
    min-height: 2.625rem !important;
}

.pf-v5-c-number-input .pf-v5-c-input-group {
    border: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.pf-v5-c-number-input .pf-v5-c-button {
    align-self: stretch !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: hsl(var(--foreground)) !important;
    background-color: transparent !important;
}

.pf-v5-c-number-input .pf-v5-c-button:hover {
    background-color: hsl(var(--accent)) !important;
}

.pf-v5-c-number-input .pf-v5-c-button:first-child {
    border-right: 1px solid hsl(var(--border)) !important;
}

.pf-v5-c-number-input .pf-v5-c-button:last-child {
    border-left: 1px solid hsl(var(--border)) !important;
}

.pf-v5-c-number-input input,
.pf-v5-c-number-input .pf-v5-c-form-control {
    width: 4rem !important;
    min-width: 4rem !important;
    text-align: center !important;
    padding-inline: 0.5rem !important;
    font-variant-numeric: tabular-nums;
}

.pf-v5-c-number-input,
.pf-v5-c-file-upload,
.pf-v5-c-context-selector__toggle {
    border: 1px solid hsl(var(--input)) !important;
    border-radius: var(--radius-control) !important;
    background-color: hsl(var(--background) / 0.6) !important;
    overflow: hidden;
}

.pf-v5-c-number-input:focus-within,
.pf-v5-c-file-upload:focus-within,
.pf-v5-c-context-selector__toggle:focus-within {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

/*
   GRUPO DE ETIQUETAS — o grupo não é uma caixa, é uma fileira.

   `chip-group` e `label-group` existem para alinhar e para agrupar o "mostrar
   mais". Se eles herdarem a moldura das etiquetas que carregam, cada linha de
   filtro vira uma caixa cheia de caixinhas.
*/
.pf-v5-c-chip-group,
.pf-v5-c-label-group,
.pf-v5-c-chip-group__main,
.pf-v5-c-label-group__main {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    /* 10px ENTRE UMA ETIQUETA E OUTRA. Com 6px as duas pílulas quase se
       encostavam: duas bordas curvas separadas por menos do que o respiro
       interno de cada uma leem como uma peça só rachada no meio, não como
       dois itens. O vão entre elas precisa ser maior que o vão de dentro
       delas (6px do texto ao "×"), senão o olho agrupa errado. */
    gap: 0.625rem;
}

/*
   CARTÃO DENTRO DE CARTÃO — o de dentro perde a moldura.

   O console de administração aninha cartões (um painel de configuração dentro
   do cartão da aba). Duas bordas concêntricas a 1rem de distância não leem como
   hierarquia: leem como erro de layout. O de dentro vira superfície apenas, com
   o fundo um degrau acima — que é como o painel separa blocos internos.
*/
.pf-v5-c-card .pf-v5-c-card,
.pf-v5-c-card .pf-v5-c-panel,
.pf-v5-c-modal-box .pf-v5-c-card,
.pf-v5-c-drawer__panel .pf-v5-c-card {
    border: 0 !important;
    box-shadow: none !important;
    background-color: hsl(var(--muted) / 0.4) !important;
}

/* O grupo de avisos alinha avisos; ele mesmo não é um aviso. */
.pf-v5-c-alert-group {
    background-color: transparent !important;
    border: 0 !important;
}

/*
   `<pre><code>` — a marcação canônica de bloco de código, e duas caixas se as
   duas forem estilizadas. O `<pre>` é o bloco; o `<code>` dentro dele é só o
   texto. `code` solto no meio de uma frase continua com a caixinha dele, que é
   o que o distingue da prosa em volta.
*/
pre code,
.pf-v5-c-code-block code,
.pf-v5-c-clipboard-copy code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
}

code:not(pre code) {
    padding: 0.0625rem 0.3125rem;
    background-color: hsl(var(--muted)) !important;
}

/* Copiar-para-a-área-de-transferência: o campo e o botão são uma peça só. É o
   controle do "ID" na tela de usuário do console de administração. */
.pf-v5-c-clipboard-copy__group {
    display: flex !important;
    align-items: stretch;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: var(--radius-control) !important;
    overflow: hidden;
    background-color: hsl(var(--background) / 0.6) !important;
}

.pf-v5-c-clipboard-copy__group:focus-within {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.28) !important;
}

.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control,
.pf-v5-c-clipboard-copy__group input,
.pf-v5-c-clipboard-copy__group .pf-v5-c-button {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* ----------------------------------------------------------------------------
   14. O QUE AINDA NÃO TINHA COR — componentes que os pacotes carregam e este
   arquivo nunca tocou.

   Sem estas regras eles caem no PatternFly cru: texto escuro sobre superfície
   escura, azul de outra marca, cantos retos no meio de uma tela arredondada.
   Nenhum deles aparece na primeira tela — aparecem na terceira, quando já não
   se está mais olhando.
   -------------------------------------------------------------------------- */

/* MIGALHAS (admin: Clientes › nome-do-cliente › aba). O separador é apagado; o
   último item é onde a pessoa está e não é link. */
.pf-v5-c-breadcrumb {
    margin-bottom: 0.75rem !important;
}

.pf-v5-c-breadcrumb__list {
    gap: 0.25rem;
}

.pf-v5-c-breadcrumb__item,
.pf-v5-c-breadcrumb__item-divider {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.6px !important;
}

.pf-v5-c-breadcrumb__link {
    color: hsl(var(--muted-foreground)) !important;
    text-decoration: none !important;
}

.pf-v5-c-breadcrumb__link:hover {
    color: hsl(var(--foreground)) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pf-v5-c-breadcrumb__link.pf-m-current,
.pf-v5-c-breadcrumb__item:last-child {
    color: hsl(var(--foreground)) !important;
}

/* FAIXA DE AVISO (banner) — largura total, no topo do conteúdo. A cor entra na
   borda de baixo e no texto, e não como fundo saturado: uma tarja colorida
   atravessando a tela inteira empurra tudo o que vem depois para segundo plano,
   inclusive o que a pessoa veio fazer. */
.pf-v5-c-banner {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-bottom: 2px solid hsl(var(--border)) !important;
    font-size: 10.6px !important;
}

.pf-v5-c-banner.pf-m-danger  { border-bottom-color: hsl(var(--destructive)) !important; }
.pf-v5-c-banner.pf-m-warning { border-bottom-color: hsl(var(--warning)) !important; }
.pf-v5-c-banner.pf-m-success { border-bottom-color: hsl(var(--success)) !important; }
.pf-v5-c-banner.pf-m-info    { border-bottom-color: hsl(var(--info)) !important; }

/* CONTADOR DE NOTIFICAÇÃO no sino da faixa do topo. */
.pf-v5-c-notification-badge {
    color: hsl(var(--muted-foreground)) !important;
    background-color: transparent !important;
}

.pf-v5-c-notification-badge.pf-m-unread,
.pf-v5-c-notification-badge.pf-m-attention {
    color: hsl(var(--primary)) !important;
}

.pf-v5-c-notification-badge__count {
    background-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
    border-radius: 999px !important;
    font-size: 8.9px !important;
    font-variant-numeric: tabular-nums;
}

/* GAVETA lateral (painéis de detalhe que abrem à direita). */
.pf-v5-c-drawer__panel {
    background-color: hsl(var(--card)) !important;
    border-left: 1px solid hsl(var(--border)) !important;
    box-shadow: -16px 0 40px hsl(231 60% 2% / 0.4) !important;
}

.pf-v5-c-drawer__splitter {
    background-color: hsl(var(--border)) !important;
}

/* POPOVER — a ajuda que abre no "?" ao lado do rótulo. Ele já tinha fundo;
   faltavam cabeçalho, corpo e o botão de fechar. */
.pf-v5-c-popover__title-text {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

.pf-v5-c-popover__body {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.6px !important;
    line-height: 1.55;
}

.pf-v5-c-popover__arrow {
    box-shadow: none !important;
}

/* ATALHOS DE SEÇÃO ("Ir para a seção", à direita em Informações pessoais).
   A guia vertical é a mesma peça do submenu da barra lateral: mesma cor, mesma
   espessura, mesma lógica de item ativo. */
.pf-v5-c-jump-links.pf-m-vertical .pf-v5-c-jump-links__list {
    border-left: 1px solid hsl(var(--border)) !important;
}

/*
   O ATALHO ATIVO É UM TRAÇO, NÃO UM BLOCO.

   Pintar os pseudo-elementos do PatternFly com a primária parecia dar o traço
   da esquerda — mas um deles cobre a área inteira do item, e o resultado foi um
   retângulo índigo sólido no lugar do nome da seção. O texto sumiu dentro dele.

   Os dois pseudo são neutralizados e o traço vira uma sombra interna de 2px, que
   não depende de qual deles o componente usa nesta versão.
*/
.pf-v5-c-jump-links__link::before,
.pf-v5-c-jump-links__link::after {
    background-color: transparent !important;
    border-color: transparent !important;
}

.pf-v5-c-jump-links__item.pf-m-current > .pf-v5-c-jump-links__link {
    box-shadow: inset 2px 0 0 hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 600 !important;
}

.pf-v5-c-jump-links__link:hover {
    color: hsl(var(--foreground)) !important;
}

/* AS SETAS DE ROLAGEM DAS ABAS. São elas que aparecem quando as doze abas do
   realm não cabem — e sem cor viravam dois retângulos claros nas pontas. */
.pf-v5-c-tabs__scroll-button,
.pf-v5-c-scroll-outer-wrapper,
.pf-v5-c-scroll-inner-wrapper {
    background-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

.pf-v5-c-tabs__scroll-button:hover {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--accent)) !important;
}

/* LISTAS de conteúdo (`.pf-v5-c-list`): o marcador acompanha o texto apagado,
   senão ele fica mais forte que a linha que introduz. */
.pf-v5-c-list {
    color: inherit !important;
}

.pf-v5-c-list > li::marker {
    color: hsl(var(--muted-foreground));
}

/* ÍCONE genérico do PatternFly — herda a cor de quem o contém em vez do azul
   da marca dele. */
.pf-v5-c-icon,
.pf-v5-c-icon__content {
    color: inherit !important;
}

.pf-v5-c-icon.pf-m-danger,
.pf-v5-c-icon__content.pf-m-danger { color: hsl(var(--destructive)) !important; }
.pf-v5-c-icon.pf-m-success,
.pf-v5-c-icon__content.pf-m-success { color: hsl(var(--success)) !important; }
.pf-v5-c-icon.pf-m-warning,
.pf-v5-c-icon__content.pf-m-warning { color: hsl(var(--warning)) !important; }
.pf-v5-c-icon.pf-m-info,
.pf-v5-c-icon__content.pf-m-info { color: hsl(var(--info)) !important; }

/* ----------------------------------------------------------------------------
   15. OS DETALHES QUE NINGUÉM PEDE E TODO MUNDO SENTE.
   -------------------------------------------------------------------------- */

/*
   FOCO NA CAIXA DE MARCAR E NO BOTÃO DE OPÇÃO.

   `accent-color` pinta o controle, mas NÃO desenha foco — e o contorno padrão
   do navegador sobre fundo escuro é um fio quase invisível. Quem navega por
   teclado ficava sem saber onde está justamente nos controles que mudam
   configuração de segurança.
*/
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.pf-v5-c-check__input:focus-visible,
.pf-v5-c-radio__input:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* O rótulo ao lado do controle alinha pelo TOPO, e não pelo centro: quando ele
   tem duas linhas (rótulo + descrição), centralizar joga a caixinha para o meio
   do parágrafo. */
.pf-v5-c-check,
.pf-v5-c-radio {
    align-items: start;
    gap: 6.5px;
}

.pf-v5-c-check__input,
.pf-v5-c-radio__input {
    margin-top: 1.6px;
}

/* SELEÇÃO DE TEXTO na cor da marca. É um detalhe de meio segundo, e é o tipo de
   coisa que faz uma tela parecer terminada. */
::selection {
    background-color: hsl(var(--primary) / 0.32);
    color: hsl(var(--foreground));
}

/* ORDENAÇÃO DE TABELA: a seta segue o texto do cabeçalho, e acende na coluna
   ordenada. Sem isto ela fica no cinza do PatternFly e some. */
.pf-v5-c-table__sort .pf-v5-c-button {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    height: auto !important;
}

.pf-v5-c-table__sort.pf-m-selected .pf-v5-c-button,
.pf-v5-c-table__sort.pf-m-selected .pf-v5-c-table__sort-indicator {
    color: hsl(var(--primary)) !important;
}

/* CABEÇALHO FIXO de tabela longa precisa de fundo opaco, senão as linhas
   passam por baixo dele e o cabeçalho vira uma sopa de texto sobreposto. */
.pf-v5-c-table.pf-m-sticky-header thead th,
.pf-v5-c-table thead.pf-m-sticky th {
    background-color: hsl(var(--card)) !important;
    box-shadow: 0 1px 0 hsl(var(--border)) !important;
}

/* A COLUNA DA CAIXA DE MARCAR não precisa da largura de uma coluna de dados. */
/*
   A COLUNA DE SELEÇÃO tem largura de coluna de seleção — e RESPIRO À DIREITA.

   Zerar o respiro (o que esta regra fazia) encostava a caixinha na primeira
   letra do nome do realm. Alvo de clique colado em texto clicável é troca de
   clique: a pessoa quer abrir o item e acaba marcando a linha.
*/
.pf-v5-c-table td.pf-v5-c-table__check,
.pf-v5-c-table th.pf-v5-c-table__check {
    width: 2.75rem !important;
    padding-right: 0.75rem !important;
    vertical-align: middle !important;
}

.pf-v5-c-table__check input {
    margin: 0 !important;
}

/* PAGINAÇÃO: o "1-2" é um seletor, e alinha com os outros controles da barra. */
.pf-v5-c-pagination .pf-v5-c-menu-toggle {
    min-height: 2.25rem !important;
    font-size: 10.6px !important;
}

.pf-v5-c-pagination__total-items,
.pf-v5-c-pagination__nav-page-select {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10.6px !important;
    font-variant-numeric: tabular-nums;
}

/* TEXTO QUE NÃO CABE: cortar com reticências é melhor que quebrar o layout da
   linha — mas só onde o valor é identificável pelo começo (ID, e-mail, URL). */
.pf-v5-c-table td .pf-v5-c-truncate,
.pf-v5-c-truncate__start,
.pf-v5-c-truncate__end {
    color: inherit !important;
}

/* DESABILITADO É UM SÓ CURSOR EM TODA A TELA. O PatternFly deixa alguns
   controles com o cursor padrão, e aí a pessoa clica achando que travou. */
[disabled],
[aria-disabled="true"],
.pf-v5-c-button.pf-m-disabled,
.pf-v5-c-nav__link.pf-m-disabled {
    cursor: not-allowed !important;
}

/* O BOTÃO EM ESPERA não pode encolher quando o rótulo vira spinner. */
.pf-v5-c-button.pf-m-progress,
.pf-v5-c-button.pf-m-in-progress {
    min-width: 6rem;
}

.pf-v5-c-button .pf-v5-c-spinner {
    --pf-v5-c-spinner--Color: currentColor;
}

/* A MARCA NA FAIXA não é clicável por acidente: o alvo é a imagem, e não a
   faixa inteira até o meio da tela. */
.pf-v5-c-masthead__brand {
    flex: 0 0 auto !important;
}

/* Barra de rolagem dentro de menu longo (lista de ações do usuário, lista de
   realms) segue a paleta como o resto. */
.pf-v5-c-menu__content {
    scrollbar-width: thin;
    max-height: 22rem;
    overflow-y: auto;
}

/* ----------------------------------------------------------------------------
   16. O SELETOR MÚLTIPLO — o componente mais composto do console.

   É o "Ouvintes de eventos", o "Ações necessárias do usuário", o seletor de
   papéis. Ele empilha quatro coisas dentro de um campo só: as etiquetas do que
   já foi escolhido, o campo de digitar, os botões de limpar/abrir, e o menu com
   marca de seleção. Cada uma dessas peças herdou uma regra pensada para outro
   contexto, e o resultado era um controle que não parecia do mesmo tema.
   -------------------------------------------------------------------------- */

/*
   O CAMPO CRESCE COM AS ETIQUETAS.

   Com altura fixa de 2,625rem, escolher o terceiro item empurra os anteriores
   para fora do campo. Aqui a altura vira mínimo, as etiquetas quebram linha, e
   o respiro vertical encolhe para elas não encostarem na borda.
*/
.pf-v5-c-menu-toggle.pf-m-typeahead,
.pf-v5-c-select__toggle.pf-m-typeahead,
.pf-v5-c-menu-toggle:has(.pf-v5-c-chip-group) {
    height: auto !important;
    min-height: 2.625rem !important;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 0.25rem !important;
    row-gap: 0.25rem;
}

/*
   O FILETE CINZA QUE ATRAVESSAVA AS ETIQUETAS.

   O PatternFly desenha a "linha do campo" num `::after` de
   `.pf-v5-c-text-input-group__text`, esticado em `inset: 0` e com
   `border-bottom: 1px` num cinza PRÓPRIO dele (`rgb(170,171,172)`) — o único
   tom do componente que não sai dos nossos tokens. Dentro do seletor múltiplo
   ele corre POR BAIXO das etiquetas, de ponta a ponta: lê como uma borda
   quadrada cinza cortando pílulas arredondadas, que é exatamente a coisa que
   mais destoava aqui. O invólucro já desenha a caixa; este filete não tem
   trabalho nenhum a fazer.
*/
.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after,
.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
    display: none !important;
}

/*
   A ETIQUETA É PÍLULA, E PÍLULA NÃO ESTICA.

   `.pf-v5-c-chip` é filho de uma fileira flex e, sem `align-self`, esticava
   para a altura inteira do campo (48px de caixa para 14px de texto). Com
   `border-radius: 999px` numa caixa dessa altura, o que aparece não é uma
   pílula: é um bloco de cantos redondos, do tamanho de um botão. A altura
   agora vem do conteúdo, e o raio volta a fazer o que promete.

   O `::before` do PatternFly desenha uma SEGUNDA borda por cima da nossa,
   deslocada de 1px — a moldura dupla de sempre, aqui em miniatura.
*/
.pf-v5-c-chip,
.pf-v5-c-label {
    align-self: center !important;
    height: auto !important;
}

.pf-v5-c-chip::before,
.pf-v5-c-label::before {
    display: none !important;
}

/*
   O MENU NÃO ENCOSTA NO CONTROLE QUE O ABRIU.

   Colado, o menu lê como continuação da caixa de cima e as duas bordas viram
   uma linha dupla no meio. Um respiro de 0,75rem separa as duas superfícies
   sem que o menu pareça solto de quem o abriu. Vale para o console de verdade
   também: lá o menu é posicionado por JS, e a margem entra por cima disso.
*/
.pf-v5-c-menu,
.pf-v5-c-select__menu {
    /* `sideOffset={8}` do `DropdownMenuContent` real — e esse 8 é px cravado
       na prop do Radix, não um degrau em `rem`: não passa pela conversão da
       raiz. Era 0,75rem (12px) aqui, escolhido no olho. */
    margin-top: 8px !important;
}

/* A BORDA DE REPOUSO NÃO É A DO CAMPO COMUM. `--input` foi calibrado para um
   retângulo estreito de 2,625rem (um campo de texto); numa caixa larga e em
   grande parte vazia — que é o que sobra em volta de dois ou três chips —, o
   mesmo tom lê como um contorno cinza-azulado chamativo demais para o quanto
   de conteúdo ele embrulha. `--border` é o tom que este arquivo já usa para
   toda divisória discreta; o anel de foco/aberto (`:focus-within`,
   `.pf-m-expanded`, seção 13 mais acima) continua intacto e continua sendo o
   sinal forte quando o campo importa.

   O SELETOR PRECISA DA MESMA ESPECIFICIDADE (3 classes) que
   `.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain)` — com menos
   classes, a regra de lá venceria mesmo vindo antes no arquivo, `!important`
   contra `!important` empata em especificidade primeiro, ordem depois. */
.pf-v5-c-page__main .pf-v5-c-menu-toggle.pf-m-typeahead,
.pf-v5-c-page__main .pf-v5-c-menu-toggle:has(.pf-v5-c-chip-group) {
    border-color: hsl(var(--border)) !important;
}

/*
   A ETIQUETA E O SEU "×" — o botão é do tamanho da etiqueta, não do tamanho de
   um botão de barra de ferramentas.

   A regra que deixa botão de ícone quadrado em 2,25rem existe para a coluna de
   ações da tabela. Aplicada aqui, ela inflava o "×" até ficar mais alto que a
   própria etiqueta, e era isso que deixava a fileira de chips com cara de
   inchada.
*/
.pf-v5-c-chip {
    display: inline-flex;
    align-items: center;
    /* O RESPIRO DA PÍLULA, agora que ela tem o tamanho certo.
       Com 4px à direita o "×" encostava na curva da borda — e numa pílula a
       curva come espaço que num retângulo não comeria, então o mesmo número
       que parece respiro num canto reto parece aperto aqui. 10px à esquerda
       (texto) e 6px à direita (o "×" é redondo e já traz folga ótica própria)
       deixam os dois lados LENDO iguais, que é o que importa — medir igual
       não é parecer igual. */
    gap: 0.375rem;
    padding: 0.125rem 0.375rem 0.125rem 0.625rem !important;
    font-size: 9.8px !important;
    line-height: 1.4;
}

.pf-v5-c-chip .pf-v5-c-button.pf-m-plain,
.pf-v5-c-label .pf-v5-c-button.pf-m-plain,
.pf-v5-c-chip__text + .pf-v5-c-button {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 0 !important;
    /* `min-height: 0` É O QUE CONSERTA A ETIQUETA NO CELULAR. A seção 12 dá
       44px de altura mínima a TODO `.pf-v5-c-button` — medida de dedo, e certa
       para um botão de verdade. O "×" da etiqueta também é um `.pf-v5-c-button`,
       e herdava esses 44px: a etiqueta inteira ia a 48px de altura e o
       `border-radius: 999px` deixava de ler como pílula e virava um bloco de
       cantos redondos. No desktop nunca apareceu, porque lá a regra dos 44px
       não vale — era exatamente o "no mobile está quadrado". */
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: hsl(var(--muted-foreground)) !important;
}

.pf-v5-c-chip .pf-v5-c-button:hover {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--accent)) !important;
}

.pf-v5-c-chip .pf-v5-c-button svg,
.pf-v5-c-label .pf-v5-c-button svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
}

/* Os utilitários da direita (limpar tudo, abrir) são um par: mesmo tamanho,
   mesma cor, e uma divisória fina antes do primeiro para separá-los do texto. */
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group__utilities,
.pf-v5-c-select__toggle .pf-v5-c-text-input-group__utilities {
    align-self: center !important;
    gap: 0.125rem;
    padding: 0 !important;
}

/* O "×" DE LIMPAR TUDO NÃO É BOTÃO DE COLUNA DE TABELA. A regra de botão de
   ícone quadrado (2,25rem/36px, seção 8) é para o kebab de linha; aplicada
   aqui ela inflava o "limpar" bem mais alto que a fileira de 2,625rem e bem
   mais quadrado que os "×" redondos dos chips ao lado — a mesma ação (fechar
   uma etiqueta) lendo como dois desenhos diferentes na mesma fileira. */
.pf-v5-c-text-input-group__utilities .pf-v5-c-button.pf-m-plain {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 0 !important;
    /* Mesmo motivo do "×" da etiqueta: sem isto, os 44px de alvo de toque do
       celular esticam o "limpar" e a fileira inteira cresce junto. */
    min-height: 0 !important;
    border-radius: 50% !important;
}

.pf-v5-c-text-input-group__utilities .pf-v5-c-button svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
}

.pf-v5-c-menu-toggle__controls,
.pf-v5-c-menu-toggle__toggle-icon {
    color: hsl(var(--muted-foreground)) !important;
}

/*
   O ITEM JÁ ESCOLHIDO — índigo translúcido e texto na primária, o MESMO
   desenho do item ativo da barra lateral.

   O PatternFly marca a escolha com um fundo cinza-claro e um tique à direita.
   Sobre superfície escura, esse fundo vira uma barra leitosa e o texto dentro
   dela perde contraste. Trocar por primária translúcida resolve os dois: a
   escolha fica óbvia e o texto continua legível.
*/
.pf-v5-c-menu__list-item .pf-v5-c-menu__item.pf-m-selected,
.pf-v5-c-menu__item[aria-selected="true"],
.pf-v5-c-menu__item.pf-m-selected {
    background-color: hsl(var(--primary) / 0.14) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    margin-inline: 0.25rem !important;
}

.pf-v5-c-menu__item-select-icon,
.pf-v5-c-menu__item-check,
.pf-v5-c-menu__item[aria-selected="true"] svg {
    color: hsl(var(--primary)) !important;
}

.pf-v5-c-menu__item-text,
.pf-v5-c-menu__item-description {
    color: inherit !important;
}

.pf-v5-c-menu__item-description {
    opacity: 0.75;
    font-size: 9.8px !important;
}

/* O item em foco por teclado precisa se distinguir do item já escolhido —
   senão, navegando com as setas, não dá para saber onde se está. */
.pf-v5-c-menu__item:focus,
.pf-v5-c-menu__item:focus-visible {
    background-color: hsl(var(--accent)) !important;
    outline: 1px solid hsl(var(--ring) / 0.6) !important;
    outline-offset: -1px !important;
}

/*
   ─── O MENU NÃO GANHA LARGURA NENHUMA DE NÓS ────────────────────────────────

   Esta regra foi a causa do "select gigante", e a lição é sobre PORTAL.

   O campo "Selecione um local" não é um `<select>`: os pacotes do console não
   têm um único `createElement("select")`. É um menu do PatternFly — um botão
   `menu-toggle` mais um `menu` com a lista.

   E esse `menu` é renderizado num PORTAL, no fim do `<body>`, não dentro do
   campo. Então `width: 100%` não significa "a largura do campo": significa a
   largura do BODY. A lista abria com o tamanho da janela, e o excesso empurrava
   a página para 2573px — a lista larga e a barra de rolagem horizontal eram o
   mesmo defeito, e os dois eram meus.

   Quem sabe a largura certa é o PatternFly, que a calcula a partir do botão e a
   escreve em estilo inline. O trabalho aqui é não atrapalhar: nenhuma largura
   nossa, e um teto para o caso de uma opção absurdamente longa.

   FICA REGISTRADO PARA A PRÓXIMA VEZ: antes de dimensionar qualquer camada
   flutuante (menu, popover, dica), confira se ela é filha de quem a abriu ou se
   vive num portal. Em portal, toda medida relativa muda de referência.
*/
.pf-v5-c-menu {
    max-width: min(90vw, 34rem) !important;
}

/*
   O RESPIRO LATERAL É DA SEÇÃO, e invólucro sem moldura não acrescenta o seu.

   No "Entrando" o título da página fica no nível da seção e as sub-seções
   ("Autenticação Básica", "Dois Fatores") vêm dentro de um cartão SEM borda —
   um agrupador, não uma superfície. Esse cartão trazia o respiro interno de um
   cartão de verdade, e empurrava tudo o que estava dentro dele ~30px à direita
   do título. Duas linhas de partida na mesma tela, de novo.

   Cartão com moldura mantém o respiro: ali ele separa o conteúdo da borda, e
   sem ele o texto encosta. Cartão sem moldura não tem de que se separar.
*/
.pf-v5-c-card.pf-m-plain > .pf-v5-c-card__body,
.pf-v5-c-card.pf-m-plain > .pf-v5-c-card__title,
.pf-v5-c-card.pf-m-plain > .pf-v5-c-card__header,
.pf-v5-c-card.pf-m-plain > .pf-v5-c-card__footer {
    padding-inline: 0 !important;
}

.pf-v5-c-card.pf-m-plain {
    background-color: transparent !important;
    border: 0 !important;
}

/* ----------------------------------------------------------------------------
   17. CARTÕES EM GRADE — a fileira de escolha (Provedores de identidade).

   São dezesseis blocos lado a lado, cada um com um ícone e um nome. O nome tem
   comprimento imprevisível: "Google" tem seis caracteres, "Keycloak OpenID
   Connect" tem vinte e quatro. Sem regra, o bloco cresce para caber o texto, e
   uma fileira de blocos de alturas diferentes desalinha a grade inteira — o
   olho perde a linha de base e a lista deixa de parecer uma lista.

   Três decisões, e elas valem para qualquer grade de escolha do console:

   1. ALTURA IGUAL. O bloco não se mede pelo próprio texto; ele se mede pela
      grade. O mais alto define, e todos acompanham.
   2. CONTEÚDO NO MEIO. Com altura fixa, alinhar no topo deixa um vão embaixo
      nos blocos de nome curto — e o vão é justamente o que denuncia que os
      blocos têm o mesmo tamanho "na marra".
   3. CORTE COM RETICÊNCIAS em duas linhas. Duas linhas cabem "Keycloak OpenID
      Connect" inteiro; o que passar disso vira "…". Um nome cortado ainda é
      reconhecível pelo começo; um bloco deformado quebra a grade para todos.
   -------------------------------------------------------------------------- */
.pf-v5-l-grid__item > .pf-v5-c-card,
.pf-v5-l-flex > .pf-v5-c-card,
.pf-v5-l-grid > .pf-v5-c-card,
.pf-v5-c-card.pf-m-selectable-raised,
.pf-v5-c-card.pf-m-selectable {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 4.25rem !important;
    /*
       A CAUSA DE VERDADE DO CARTÃO ESTOURANDO NO CELULAR: `.pf-v5-l-grid` É O
       SISTEMA DE 12 COLUNAS DO PATTERNFLY, e ele aplica a TODO FILHO DIRETO
       — não só ao que tem `.pf-v5-l-grid__item` — a regra
       `.pf-v5-l-grid > * { grid-column-end: var(--pf-v5-l-grid__item--GridColumnEnd) }`,
       cujo valor por padrão é `span 12`. O NOSSO `grid-template-columns` inline
       (`repeat(auto-fill,minmax(15rem,1fr))`) só cria a coluna que cabe — uma
       só, no celular —, mas o cartão pede para ocupar 12, e o grid CRIA 11
       colunas implícitas extras só para satisfazer esse pedido, esticando o
       cartão para além do container. `grid-column: auto` cancela esse span:
       o cartão volta a ocupar só a coluna que o `auto-fill` de fato criou.
       Achado rodando o diagnóstico do próprio autor (nota da seção 3, mais
       acima) com Playwright num viewport real de 390px — via CLI o Chrome
       tem um piso de ~500px em `--window-size` que escondia o defeito.
    */
    grid-column: auto !important;
    /* Item de grid tem `min-width: auto` por padrão — o tamanho mínimo do
       CONTEÚDO, não zero. Fica como segunda trava, redundante com a de cima. */
    min-width: 0 !important;
    max-width: 100% !important;
}

.pf-v5-l-grid__item > .pf-v5-c-card .pf-v5-c-card__header,
.pf-v5-l-grid > .pf-v5-c-card .pf-v5-c-card__header,
.pf-v5-c-card.pf-m-selectable-raised .pf-v5-c-card__header,
.pf-v5-c-card.pf-m-selectable .pf-v5-c-card__header,
.pf-v5-l-grid > .pf-v5-c-card .pf-v5-c-card__title,
.pf-v5-c-card.pf-m-selectable-raised .pf-v5-c-card__title {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* O ícone não encolhe e não estica: ele é a âncora do bloco. */
.pf-v5-l-grid > .pf-v5-c-card svg,
.pf-v5-c-card.pf-m-selectable-raised svg,
.pf-v5-c-card.pf-m-selectable svg {
    flex: 0 0 auto;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/*
   O CORTE COM RETICÊNCIAS.

   `-webkit-line-clamp` é a única forma de cortar em N LINHAS com "…" que
   funciona nos navegadores de hoje — o prefixo assusta, mas ele é suportado
   inclusive pelo Firefox há anos. `min-width: 0` acima é o par obrigatório
   dele: sem isso, um filho de flex se recusa a encolher abaixo do conteúdo e o
   corte nunca acontece.
*/
.pf-v5-l-grid > .pf-v5-c-card .pf-v5-c-card__title-text,
.pf-v5-c-card.pf-m-selectable-raised .pf-v5-c-card__title-text,
.pf-v5-c-card.pf-m-selectable .pf-v5-c-card__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    font-size: 11.4px !important;
    font-weight: 500 !important;
    word-break: break-word;
}

/* O bloco inteiro é o alvo de clique, e ele responde ao ponteiro — senão a
   pessoa não sabe que a fileira é clicável até acertar o texto. */
.pf-v5-c-card.pf-m-selectable-raised,
.pf-v5-c-card.pf-m-selectable {
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.pf-v5-c-card.pf-m-selectable-raised:hover,
.pf-v5-c-card.pf-m-selectable:hover {
    border-color: hsl(var(--primary) / 0.5) !important;
    background-color: hsl(var(--accent) / 0.6) !important;
}

.pf-v5-c-card.pf-m-selected-raised,
.pf-v5-c-card.pf-m-selected {
    border-color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary) / 0.1) !important;
}

/* ----------------------------------------------------------------------------
   18. CAMPO DE VÁRIOS VALORES — a lista de URIs do cliente.

   "URIs de redirecionamento válidas", "Origens Web", "Valid post logout": cada
   linha é um campo com um botão de remover colado, e embaixo um link para
   acrescentar mais uma. É o controle mais usado da tela de cliente, e era o que
   estava mais apertado: linhas sem espaço entre si, botão de remover encostado
   na borda do campo e o link de acrescentar grudado na última linha.

   Três medidas resolvem, e todas são de RESPIRO — nenhuma muda o desenho:
   -------------------------------------------------------------------------- */

/* 1. Uma linha não encosta na outra. Meia unidade é o bastante para o olho
      separar dois campos sem que a lista pareça esparramada. */
.pf-v5-c-form__group-control .pf-v5-c-input-group + .pf-v5-c-input-group,
.pf-v5-c-form__group-control > .pf-v5-l-split + .pf-v5-l-split,
.pf-v5-c-form__group-control > div + div {
    margin-top: 0.5rem !important;
}

/* 2. O botão de remover ocupa a altura do campo e tem uma divisória antes.
      Qualquer botão dentro do grupo, em qualquer nível — a marcação varia entre
      as telas, e o defeito aparecia justamente onde ele vinha embrulhado. */
.pf-v5-c-input-group .pf-v5-c-button {
    align-self: stretch !important;
    height: auto !important;
    width: auto !important;
    min-width: 2.5rem !important;
    padding-inline: 0.625rem !important;
    border-radius: 0 !important;
}

.pf-v5-c-input-group > :first-child .pf-v5-c-button,
.pf-v5-c-input-group > .pf-v5-c-button:first-child {
    border-left: 0 !important;
}

.pf-v5-c-input-group > * + * .pf-v5-c-button {
    border-left: 1px solid hsl(var(--border)) !important;
}

/* 3. O link "Adicionar…" se afasta da última linha e ganha alvo de clique
      próprio. Ele é uma AÇÃO, e estava lendo como legenda do campo de cima. */
.pf-v5-c-form__group-control .pf-v5-c-button.pf-m-link {
    margin-top: 0.5rem !important;
    padding-inline: 0 !important;
    gap: 0.375rem;
}

/* ----------------------------------------------------------------------------
   12. TELA PEQUENA E PREFERÊNCIAS DO SISTEMA.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pf-v5-c-page__main-section {
        padding: 1rem !important;
    }

    /*
       ALTURA DE CAMPO E BOTÃO EM `px` NO CELULAR — medida de DEDO, não de
       tipografia. Em `rem` acompanhariam o tamanho de fonte do aparelho, e um
       aparelho com fonte pequena cairia abaixo do mínimo de alvo de toque da
       WCAG 2.5.5. Mesma exceção documentada no tema de login.
    */
    .pf-v5-c-button,
    .pf-v5-c-form-control:not(textarea):not(select),
    .pf-v5-c-form-control > input,
    select,
    .pf-v5-c-select__toggle,
    .pf-v5-c-text-input-group {
        min-height: 44px !important;
    }

    /* O botão de ícone é quadrado; no celular ele cresce nos DOIS lados, senão
       vira um alvo alto e estreito — 44px é medida de polpa de dedo, que não
       tem forma de retângulo. */
    .pf-v5-c-button.pf-m-plain {
        min-width: 44px !important;
    }

    /*
       E A FONTE DO CAMPO VAI A 16px — abaixo disso o Safari do iPhone dá zoom
       na página inteira quando o campo recebe foco. Não é configurável, e no
       console (que tem barra lateral) o zoom deixa a pessoa presa fora da tela.
    */
    .pf-v5-c-form-control,
    .pf-v5-c-form-control > input,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* A textura de fundo sai no celular: numa tela pequena ela deixa de ser
       profundidade e vira ruído atrás do texto. */
    .pf-v5-c-page::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/*
   ALTO CONTRASTE DO SISTEMA — quando o SO força a própria paleta, o trabalho
   deste arquivo é SAIR DA FRENTE. O que não pode sumir é o foco: em
   `forced-colors` a cor é ignorada, então o anel vira contorno de sistema.
*/
@media (forced-colors: active) {
    .pf-v5-c-button:focus-visible,
    .pf-v5-c-form-control:focus,
    a:focus-visible {
        outline: 2px solid CanvasText !important;
        outline-offset: 2px !important;
    }

    .pf-v5-c-page::before,
    .pf-v5-c-page::after {
        display: none !important;
    }
}