/* ===== Terra design tokens (Manual de Identidade Visual ESTERRA v2.1) =====
   Escalas terra-azul-N e terra-verde-N abaixo sao extensao tonal das duas cores do manual
   (azul-profundo e verde-estrutural) - os degraus 500/900 de cada escala SAO as cores oficiais
   (--terra-cinza-institucional = azul-500, --terra-verde-claro = verde-500), os demais degraus
   preenchem fundo/borda/estado que o manual não definia. Coincidem com as escalas Slate/Green do
   Tailwind, de onde essas duas cores derivam. */
:root {
    --terra-azul-50: #F8FAFC;
    --terra-azul-100: #F1F5F9;
    --terra-azul-300: #CBD5E1;
    --terra-azul-500: #64748B;
    --terra-azul-600: #475569;
    --terra-azul-700: #334155;
    --terra-azul-900: #0F172A;
    --terra-azul-950: #020617;

    --terra-verde-50: #F0FDF4;
    --terra-verde-100: #DCFCE7;
    --terra-verde-300: #86EFAC;
    --terra-verde-500: #22C55E;
    --terra-verde-700: #15803D;
    --terra-verde-900: #14532D;
    --terra-verde-950: #052E16;

    --terra-azul-profundo: var(--terra-azul-900);
    --terra-verde-estrutural: var(--terra-verde-900);
    --terra-verde-claro: var(--terra-verde-500);
    --terra-cinza-institucional: var(--terra-azul-500);
    --terra-branco: #FFFFFF;

    --terra-cor-marca-terra: var(--terra-azul-profundo);
    --terra-cor-marca-modulo: var(--terra-verde-estrutural);
    --terra-cor-destaque: var(--terra-verde-estrutural);
    --terra-cor-texto: var(--terra-azul-profundo);
    --terra-cor-texto-apoio: var(--terra-azul-600);
    --terra-cor-fundo: var(--terra-azul-100);
    --terra-cor-fundo-elevado: var(--terra-branco);
    --terra-cor-borda: rgba(15, 23, 42, 0.12);
    --terra-raio: 10px;
    --terra-sombra: 0 4px 16px rgba(15, 23, 42, 0.08);

    --terra-cor-sucesso: var(--terra-verde-700);
    --terra-cor-sucesso-fundo: var(--terra-verde-50);
    --terra-cor-aviso: #92400E;
    --terra-cor-aviso-fundo: #FFFBEB;
    --terra-cor-erro: #B91C1C;
    --terra-cor-erro-fundo: #FEF2F2;
    /* Fixo nos dois temas (não redefinido no bloco [data-theme="dark"] abaixo) - --terra-cor-erro
       no escuro é clara demais pra servir de FUNDO de botão sólido com texto branco (~2.8:1,
       falha WCAG AA); esse tom escuro funciona nos dois casos, é o mesmo valor que --terra-cor-erro
       já usa no claro. Ver .acao-perigosa-solida. */
    --terra-cor-erro-solido: #B91C1C;

    --terra-font: "Inter", Helvetica, Arial, sans-serif;
}

    /* Fundo escuro institucional (o próprio azul profundo do manual). Verde claro no lugar do
       verde estrutural aqui é regra explícita do manual: contraste insuficiente sobre esse fundo. */
    :root[data-theme="dark"] {
        --terra-cor-marca-terra: var(--terra-branco);
        --terra-cor-marca-modulo: var(--terra-verde-claro);
        --terra-cor-destaque: var(--terra-verde-claro);
        --terra-cor-texto: var(--terra-azul-100);
        --terra-cor-texto-apoio: #94A3B8;
        --terra-cor-fundo: var(--terra-azul-profundo);
        --terra-cor-fundo-elevado: #16213A;
        --terra-cor-borda: rgba(255, 255, 255, 0.14);
        --terra-sombra: 0 4px 16px rgba(0, 0, 0, 0.4);

        --terra-cor-sucesso: #4ADE80;
        --terra-cor-sucesso-fundo: rgba(34, 197, 94, 0.16);
        --terra-cor-aviso: #FBBF24;
        --terra-cor-aviso-fundo: rgba(217, 119, 6, 0.18);
        --terra-cor-erro: #F87171;
        --terra-cor-erro-fundo: rgba(185, 28, 28, 0.16);
    }

/* ===== Pill de estado - linguagem única pra "ativo/inativo/principal/vencido" etc.
   Antes eram 3 estilos diferentes (fundo sólido, texto+bullet sem fundo, hex solto) espalhados
   em subitens-tag, resumo-card-selo e menu-admin-tag-inativo - consolidado aqui. */
.pill {
    display: inline-block;
    font-family: var(--terra-font);
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.pill-sucesso {
    background: var(--terra-cor-sucesso-fundo);
    color: var(--terra-cor-sucesso);
}

.pill-aviso {
    background: var(--terra-cor-aviso-fundo);
    color: var(--terra-cor-aviso);
}

.pill-erro {
    background: var(--terra-cor-erro-fundo);
    color: var(--terra-cor-erro);
}

/* Card canônico - qualquer superfície "flutuante" nova (menu, formulário, diálogo, toast) parte
   daqui, em vez de reinventar a combinação raio+sombra com nome próprio. .dropdown-menu/
   .form-card/.confirm-dialog/.toast (abaixo) compõem deste seletor em vez de duplicar as quatro
   propriedades - cada um mantém só o que é próprio dele (posição, padding, largura, z-index). */
.terra-card,
.dropdown-menu,
.dropdown-menu-submenu,
.form-card,
.confirm-dialog,
.toast {
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("_content/TerraCore.Web/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("_content/TerraCore.Web/fonts/Inter-Bold.woff2") format("woff2");
}

body {
    font-family: var(--terra-font);
    color: var(--terra-cor-texto);
    background-color: var(--terra-cor-fundo);
}

/* ===== Lockup de marca (símbolo + "terra-<módulo>") ===== */
.terra-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--terra-font);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
}

.terra-brand-symbol {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

.terra-brand-symbol .fil0 {
    fill: none;
}

.terra-brand-symbol .fil1 {
    fill: var(--terra-cor-marca-modulo);
}

.terra-brand-symbol .fil2 {
    fill: var(--terra-cor-marca-terra);
}

.terra-brand-terra {
    color: var(--terra-cor-marca-terra);
}

.terra-brand-modulo {
    color: var(--terra-cor-marca-modulo);
}

/* Reskin do tema Fluent2 do Syncfusion (azul padrão) para a cor de destaque da marca -
   só CSS, sem tocar em componente Syncfusion cru (wrapper strategy do projeto). Cobre os
   elementos visíveis no chrome atual (botão primário, foco de campo); componentes mais
   complexos (grid, dropdown) ficam para quando entrarem em uso real. */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--terra-cor-destaque) !important;
    border-color: var(--terra-cor-destaque) !important;
}

/* --terra-cor-destaque no escuro é o verde-claro (bom como texto/ícone sobre fundo escuro), mas
   usado como FUNDO de botão sólido com texto branco em cima o contraste cai pra ~2.3:1 (falha
   WCAG AA, mínimo 4.5:1) - achado revisando o diálogo de confirmação. Fundo do botão primário no
   escuro usa verde-700 à parte (~5:1 com texto branco), sem mexer em --terra-cor-destaque (que
   continua servindo texto/ícone/indicador normalmente). */
:root[data-theme="dark"] .e-btn.e-primary,
:root[data-theme="dark"] .e-css.e-btn.e-primary {
    background-color: var(--terra-verde-700) !important;
    border-color: var(--terra-verde-700) !important;
}

.e-input-group:not(.e-disabled).e-input-focus::before,
.e-input-group:not(.e-disabled).e-input-focus::after,
.e-float-input:not(.e-disabled).e-input-focus::before,
.e-float-input:not(.e-disabled).e-input-focus::after {
    background: var(--terra-cor-destaque) !important;
}

/* AppCheckBox (SfCheckBox) nunca tinha sido pego por este reskin - ficava com o azul padrão do
   Fluent2 mesmo com todo o resto da marca em verde (achado revisando EmpresaForm). */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--terra-cor-destaque) !important;
    border-color: var(--terra-cor-destaque) !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--terra-cor-sucesso);
}

.invalid {
    outline: 1px solid var(--terra-cor-erro);
}

.validation-message {
    color: var(--terra-cor-erro);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.2s ease;
    border-right: 1px solid var(--terra-cor-borda);
    background: var(--terra-cor-fundo);
}

/* Rail de área de negócio (padrão de navegação de dois níveis, ver AppShellRail) - fundo
   sempre escuro de propósito (âncora de marca), independente do tema claro/escuro do resto do
   app, por isso as cores do símbolo abaixo são fixadas em vez de herdar os tokens de tema. */
.app-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 56px;
    padding: 1rem 0;
    gap: 0.5rem;
    background: var(--terra-azul-profundo);
}

/* Marca da Esterra - única e fixa (não é item selecionável, não repete por módulo). Caixa maior
   que os ícones de módulo abaixo (52px, não 40px) - pedido explícito do usuário pra dar mais
   destaque ao hexágono, mas sem alargar o rail (52px é o maior que ainda cabe dentro dos 56px de
   largura do rail com uma margem pequena, sem precisar alargar o rail inteiro). Sem
   cursor:pointer/estado "ativo" (não tem ação própria). Margem embaixo separa visualmente da
   lista de módulos abaixo. */
.app-rail-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--terra-raio);
    margin-bottom: 5rem;
}

/* Ícone de cada aplicação (módulo) já visível no rail estreito, não só dentro do flyout - mesmo
   ícone nos dois estados (ver IconePara em AppShellRail.razor), o flyout só acrescenta o rótulo
   de texto ao lado. */
.app-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--terra-raio);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
}

.app-rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-rail-item.ativo {
    background: rgba(255, 255, 255, 0.12);
    color: var(--terra-branco);
}

/* Flyout do rail (ver comentário em AppShellRail.razor) - COBRE o próprio rail estreito
   (left:0, não 100%) em vez de abrir do lado, senão os mesmos ícones apareciam duas vezes lado a
   lado (um no rail, outro no flyout). Absolute (não fixed) porque .app-rail não fica dentro de
   nenhum ancestral com overflow:hidden (diferente do mega-menu/submenus, que precisam do truque
   fixed+JS pra escapar do overflow do .app-sidebar). z-index abaixo do mega-menu (40) mas acima
   do conteúdo normal do sidebar, que é o que ele cobre.

   Largura é medida de verdade em JS a partir do retângulo real de .app-sidebar (ver
   terraRailFlyoutLargura em app.js) - width aqui é só o valor antes da primeira medição.

   Sem box-shadow de propósito - a sombra padrão (--terra-sombra) tem blur de 16px, que
   visualmente vaza pra além da borda direita real (mancha escura sobre o conteúdo principal
   claro logo depois do sidebar), dando a impressão de "passar da linha" mesmo com a largura
   medida certinho. Fazia sentido num popup pequeno flutuando por cima do conteúdo (ver
   .dropdown-menu), não faz aqui que cobre a coluna inteira lado a lado com o conteúdo principal. */
.app-rail-flyout {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 296px;
    /* border-box de propósito - projeto não usa isso globalmente (default é content-box), então
       o "width" setado em JS (terraRailFlyoutLargura) vale só pra área de conteúdo, e o padding
       horizontal (0.75rem × 2 = 24px) somava por fora, alargando o painel além da largura medida
       (é exatamente esse tipo de discrepância caixa/padding/borda que já pegou a largura duas
       vezes nessa mesma feature - achado só com número real via diagnóstico em tela). */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    background: var(--terra-azul-profundo);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    pointer-events: none;
}

.app-rail:hover .app-rail-flyout {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease;
    pointer-events: auto;
}

/* Replica o hexágono + "TERRA" (o hexágono fixo do rail estreito fica escondido atrás, coberto
   pelo fundo opaco do flyout) - mesma altura de ".app-rail-marca" (56px) pra continuar alinhado
   verticalmente com onde ele estaria. Tamanho do ícone em si vem só de ".app-rail .terra-brand-
   symbol" (mais abaixo) - não repetir a regra aqui de propósito, senão as duas regras empatam em
   especificidade e a que vier depois no arquivo silenciosamente ganha (já mordeu essa antes). */
.app-rail-flyout-marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 52px;
    color: var(--terra-branco);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Respiro entre a marca fixa e a lista de módulos selecionável abaixo dela - mesmo valor do
   margin-bottom de ".app-rail-marca" no rail estreito, pra manter consistência entre os dois
   estados. */
.app-rail-flyout-lista {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 5rem;
}

.app-rail-flyout-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--terra-raio);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.app-rail-flyout-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-rail-flyout-item.ativo {
    background: rgba(255, 255, 255, 0.12);
    color: var(--terra-branco);
}

/* 3.25em - o maior que ainda cabe nos 56px de largura do rail sem cortar nem precisar alargá-lo
   (usuário pediu 4em, mas isso ultrapassava a largura do próprio rail). Único lugar que define o
   tamanho - vale tanto pro rail estreito quanto pro replicado no flyout
   (".app-rail-flyout-marca .terra-brand-symbol", ver comentário lá em cima). */
.app-rail .terra-brand-symbol {
    width: 3.25em;
    height: 3.25em;
    flex-shrink: 0;
}

.app-rail .terra-brand-symbol .fil1 {
    fill: var(--terra-verde-claro);
}

.app-rail .terra-brand-symbol .fil2 {
    fill: var(--terra-branco);
}

.app-main-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem;
}

/* Colapsada (64px), símbolo + botão não cabem lado a lado - empilha pra nenhum dos dois
   ficar cortado por trás do overflow:hidden do .app-sidebar (era o botão "reabrir" some). */
.app-brand.collapsed {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.25rem;
}

.sidebar-toggle {
    min-width: 2rem;
}

.app-nav {
    display: flex;
    flex-direction: column;
}

.app-nav-item {
    padding: 0.6rem 1rem;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.85rem;
}

.app-nav-item.active {
    font-weight: 600;
    color: var(--terra-cor-destaque);
    background: rgba(0, 0, 0, 0.06);
}

.app-nav-item .app-icon {
    flex-shrink: 0;
}

/* Busca saiu daqui pra barra superior (.app-topbar-busca) - linha hoje só tem o hambúrguer do
   mega-menu, alinhado à direita (mesma posição visual de antes, quando ficava depois da busca). */
.sidebar-busca-linha {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem 0.35rem;
}

/* Mega-menu (árvore completa de categorias, ver botão de hambúrguer em SidebarChrome) -
   mesmo painel flutuante do AppActionsMenu (dropdown-menu-wrap/dropdown-menu), só mais largo e
   com scroll próprio, já que a árvore inteira não cabe na largura estreita da sidebar. */
/* Seletor composto (.dropdown-menu.dropdown-menu-mega) de propósito - mesma especificidade que
   ".dropdown-menu" sozinho perderia a briga de empate por ordem no arquivo (quem vem depois
   vence), e ".dropdown-menu" está declarado bem mais abaixo. Composto garante prioridade
   independente de onde cada regra fica no arquivo. */
.dropdown-menu.dropdown-menu-mega {
    position: fixed;
    top: var(--terra-dropdown-top, calc(100% + 0.4rem));
    left: var(--terra-dropdown-left, 0);
    right: auto;
    width: max-content;
    min-width: 240px;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Linha de pasta do mega-menu - hover revela ".dropdown-menu-submenu" em cascata (ver
   MenuNoRenderer.razor). position:relative aqui não posiciona o submenu (que é fixed, calculado
   em JS puro no mouseover - ver terraSubmenu em app.js) - é só pro conteúdo da própria linha. */
.dropdown-menu-item-pasta {
    position: relative;
}

.dropdown-menu-item-seta {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--terra-cor-texto-apoio);
}

/* position:fixed (não absolute) de propósito - escapa o overflow-x:hidden/overflow-y:auto do
   ".dropdown-menu-mega" que contém essa linha, mesmo truque já usado pro próprio mega-menu
   escapar do overflow:hidden do .app-sidebar. Visibilidade é puro CSS :hover (fica visível
   enquanto o mouse estiver sobre a linha OU sobre o submenu, já que ele é filho dela no DOM -
   :hover do ancestral não desliga por o descendente estar fora do fluxo visual). */
.dropdown-menu-submenu {
    position: fixed;
    top: var(--terra-submenu-top, 0);
    left: var(--terra-submenu-left, 0);
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.4rem;
    z-index: 40;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

/* Classe (não :hover) de propósito - ver terraSubmenu em app.js. :hover puro fechava o submenu
   sempre que o mouse cruzava uma linha irmã (ex: "Localização" embaixo de "Domínio") a caminho
   de um item mais abaixo dentro do próprio submenu, mesmo sem gap real entre os painéis -
   problema clássico do "triângulo seguro" de menu em cascata, que exige um pequeno atraso de
   intenção antes de trocar/fechar, algo que :hover sozinho não tem como expressar. */
.dropdown-menu-item-pasta.submenu-aberto > .dropdown-menu-submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* min-width:0 é o que permite o texto quebrar linha em vez de forçar o item (e o menu inteiro)
   a crescer além do max-width - item flex sem isso assume o tamanho do conteúdo "sem quebra"
   por padrão (min-width:auto), foi o que causava a barra de rolagem horizontal. */
.dropdown-menu-item-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 0.85rem;
}

/* Cabeçalho colapsável de Histórico/Favoritos - substitui o antigo .nav-section-label estático
   só nessas duas seções (as demais categorias saíram do painel, foram pro mega-menu). */
.sidebar-secao-header {
    display: flex;
    align-items: center;
    padding: 0.3rem 1rem;
}

.sidebar-secao-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 0.85rem;
}

.sidebar-secao-chevron {
    display: inline-flex;
    transition: transform 0.15s ease;
}

.sidebar-secao-chevron.colapsado {
    transform: rotate(-90deg);
}

.sidebar-atalhos-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.5rem;
}

/* Estrela de favorito - some por padrão, some no hover da linha (branca) ou fica sempre
   visível quando já favoritado (dourada). @onclick:stopPropagation no botão evita que clicar
   na estrela também dispare a navegação da linha inteira. */
.nav-fav-estrela {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem;
    color: rgba(255, 255, 255, 0.65);
    opacity: 0;
}

:root:not([data-theme="dark"]) .nav-fav-estrela {
    color: rgba(15, 23, 42, 0.35);
}

/* Combinador direto (>), não descendente - a estrela da linha "Cadastros" e a de "Pessoas" (uma
   pasta dentro da outra) moram uma dentro da outra no DOM (submenu é filho da própria pasta, ver
   .dropdown-menu-submenu acima), então ":hover .nav-fav-estrela" sem o ">" acendia TODAS as
   estrelas do submenu inteiro ao passar o mouse só na pasta-mãe, não só a da linha de verdade sob
   o cursor (achado testando favoritar de verdade). */
.app-nav-item:hover > .nav-fav-estrela,
.dropdown-menu-item:hover > .nav-fav-estrela,
.nav-fav-estrela.ativo {
    opacity: 1;
}

/* !important necessário - :root:not([data-theme="dark"]) .nav-fav-estrela (cor cinza padrão,
   acima) tem especificidade maior (0,3,0) que .nav-fav-estrela.ativo sozinho (0,2,0), então sem
   isso o cinza vencia mesmo no item já favoritado (achado testando favoritar de verdade). */
.nav-fav-estrela.ativo {
    color: #f5c518 !important;
}

/* Estrela como ícone de identificação (não é botão de alternar) - usada na própria seção
   Favoritos, à esquerda igual o ícone de Histórico. Sem margin-left:auto (isso é só pro botão
   de alternar, que fica à direita do item no menu normal/mega-menu/busca) - com ele aqui, a
   linha inteira era empurrada pra direita em vez de ficar alinhada à esquerda como o Histórico. */
.nav-fav-icone {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
    color: #f5c518;
}

/* Item de dentro de uma sessão colapsável (Favoritos/Histórico) - mesmo tamanho de fonte do
   rótulo da sessão (.nav-section-label), recuo à esquerda indicando que são filhos do cabeçalho
   (não outra linha de nível igual a ele) e espaçamento vertical mais compacto entre itens do que
   o padrão de .app-nav-item. Pedido explícito do usuário, primeiro em Favoritos e depois
   replicado aqui em Histórico. */
.app-nav-item-secao {
    font-size: 0.7rem;
    padding-left: 2.25rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.app-nav.collapsed .nav-text,
.app-nav.collapsed .nav-section-label {
    display: none;
}

.nav-section-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--terra-cor-texto-apoio);
    padding: 0.9rem 1rem 0.3rem;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--terra-cor-borda);
}

/* Busca global da barra superior (substituiu o título fixo "Terra Core", ver AppBuscaGlobal.razor)
   - placeholder mostra dinamicamente a aplicação ativa. Wrap é o "position:relative" que ancora
   o dropdown de resultados abaixo; .app-topbar-busca é só o "pill" visual em si. */
.app-topbar-busca-wrap {
    position: relative;
    flex: 1 1 auto;
    max-width: 480px;
    margin-right: 1.5rem;
}

.app-topbar-busca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    color: var(--terra-cor-texto-apoio);
}

.app-topbar-busca .app-icon {
    flex-shrink: 0;
}

/* Input Syncfusion por dentro fica sem chrome próprio (borda/fundo/sublinhado de foco) - é o
   pill em volta que carrega a aparência, senão ficaria uma caixa dentro da outra. */
.app-topbar-busca-input {
    flex: 1 1 auto;
}

.app-topbar-busca-input.e-input-group {
    border: none !important;
    background: transparent !important;
}

.app-topbar-busca-input.e-input-group::before,
.app-topbar-busca-input.e-input-group::after {
    display: none;
}

/* Dropdown de resultados - absolute (não fixed) porque .app-topbar-busca-wrap não fica dentro de
   nenhum ancestral com overflow:hidden (diferente do mega-menu/rail, que precisam do truque
   fixed+JS). z-index acima do mega-menu (40)/rail (30), maior prioridade visual por ser busca
   ativa do usuário. */
.app-busca-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
    padding: 0.4rem;
    z-index: 50;
}

.app-busca-vazia {
    padding: 0.75rem 1rem;
    color: var(--terra-cor-texto-apoio);
    font-size: 0.85rem;
}

.app-busca-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--terra-cor-texto-apoio);
}

.app-busca-item:hover,
.app-busca-item.selecionado {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .app-busca-item:hover,
:root[data-theme="dark"] .app-busca-item.selecionado {
    background: rgba(255, 255, 255, 0.08);
}

.app-busca-item-texto {
    min-width: 0;
    overflow-wrap: break-word;
}

.app-busca-item-caminho {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--terra-cor-texto-apoio);
}

.app-busca-item-titulo {
    font-weight: 600;
    color: var(--terra-cor-destaque);
}

.app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Workspace (sistema de abas internas, guia de UX seção 05) ===== */
.workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.workspace-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.5rem 1rem 0;
    background: var(--terra-cor-fundo-elevado);
    border-bottom: 1px solid var(--terra-cor-borda);
    overflow-x: auto;
}

.workspace-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    color: var(--terra-cor-texto-apoio);
    white-space: nowrap;
    font-size: 0.85rem;
}

.workspace-tab:not(.ativa):hover {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .workspace-tab:not(.ativa):hover {
    background: rgba(255, 255, 255, 0.08);
}

.workspace-tab.ativa {
    color: var(--terra-cor-texto);
    background: var(--terra-cor-fundo);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--terra-cor-destaque);
}

.workspace-tab-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--terra-cor-destaque);
    flex-shrink: 0;
}

.workspace-tab-fechar {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
    opacity: 0.6;
}

.workspace-tab-fechar:hover {
    opacity: 1;
}

.workspace-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page-header-actions .app-icon {
    margin-right: 0.35rem;
    vertical-align: -3px;
}

/* ===== Legenda de ícones de papel (ver PessoaList) ===== */
.page-legenda {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--terra-cor-texto-apoio);
    font-size: 0.85rem;
}

.page-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.legenda-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--terra-cor-destaque);
}

/* ===== Busca de lista (AppBuscaLista) - só texto livre identificador, nunca coluna
   categórica/enum/booleano (essas já têm filtro dedicado ao lado - ver guia "Grid & Cards"). */
.app-lista-busca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    width: 280px;
    flex-shrink: 0;
}

.app-lista-busca-input {
    flex: 1 1 auto;
}

.app-lista-busca-input.e-input-group {
    border: none !important;
    background: transparent !important;
}

.app-lista-busca-input.e-input-group::before,
.app-lista-busca-input.e-input-group::after {
    display: none;
}

.legenda-separador {
    width: 1px;
    height: 20px;
    background: var(--terra-cor-borda);
    flex-shrink: 0;
}

.papel-icones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Card de resumo rápido (RowActions de PessoaList, ver AppActionsMenu) ===== */
.row-acoes {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Mesmo truque do mega-menu (.dropdown-menu-mega) - Flutuante="true" só calcula e grava as
   variáveis --terra-dropdown-top/left via JS (ver terraDropdown.ativar em app.js), quem
   efetivamente troca o painel pra position:fixed (escapando do overflow:hidden da linha da
   grid) é esta regra. Sem isso o painel usa o position:absolute padrão de .dropdown-menu, que
   fica cortado/invisível dentro da célula da grid. Seletor composto por especificidade, mesmo
   motivo do .dropdown-menu-mega. */
.dropdown-menu.resumo-card {
    position: fixed;
    top: var(--terra-dropdown-top, calc(100% + 0.4rem));
    left: auto;
    right: var(--terra-dropdown-right, 0);
    min-width: 290px;
    padding: 0.9rem 1rem;
}

.resumo-card-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.resumo-card-cabecalho h4 {
    margin: 0;
}

.resumo-card-linha {
    margin: 0.15rem 0 0.7rem;
    color: var(--terra-cor-texto-apoio);
    font-size: 0.85rem;
}

.resumo-card-papeis-matriz {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    text-align: center;
    padding: 0.5rem 0;
    border-top: 1px solid var(--terra-cor-borda);
    border-bottom: 1px solid var(--terra-cor-borda);
    margin-bottom: 0.6rem;
}

.resumo-card-papeis-matriz div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.resumo-card-papeis-matriz strong {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--terra-cor-texto-apoio);
}

.resumo-card-papeis-matriz span {
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-word;
}

.resumo-card-papel-vazio {
    font-weight: 400;
    color: var(--terra-cor-texto-apoio);
}

.resumo-card-secao {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--terra-cor-texto-apoio);
}

.resumo-card-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.resumo-card-rodape {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--terra-cor-texto-apoio);
}

/* ===== Barra de busca/filtros/exportação da grid (padrão, ver AppDataGrid) ===== */
.app-datagrid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* margin-left:auto no grupo de opções (em vez de justify-content:space-between no pai) empurra
   o "..." pra direita sem depender de Busca/Filtros existirem - com AppActionsMenu como único
   filho, o auto-margin ainda funciona (equivale ao antigo justify-content:flex-end). */
.app-datagrid-opcoes {
    margin-left: auto;
}

.app-datagrid-toolbar .app-icon {
    margin-right: 0.3rem;
    vertical-align: -3px;
}

.acao-perigosa {
    color: var(--terra-cor-erro);
}

/* ===== Diálogo de confirmação (substitui confirm() nativo do navegador) ===== */
.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.confirm-dialog {
    box-sizing: border-box; /* mesmo motivo já documentado em .app-rail-flyout/.dropdown-menu-item */
    width: 100%;
    max-width: 360px;
    margin: 1rem;
    padding: 1.5rem;
}

/* ClienteSeletorHost reaproveita .confirm-dialog (fundo/borda/raio/sombra já vêm do seletor
   compartilhado acima) mas precisa de mais largura pra caber a busca + tabela de resultados. */
.cliente-seletor-dialog {
    max-width: 560px;
}

.cliente-seletor-resultados {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 0.75rem;
}

.confirm-titulo {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--terra-cor-texto);
}

.confirm-mensagem {
    margin: 0 0 1.25rem;
    color: var(--terra-cor-texto-apoio);
    font-size: 0.85rem;
}

.confirm-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Segunda linha do seletor só pra igualar/vencer a especificidade do override de
   :root[data-theme="dark"] .e-btn.e-primary (verde-700, ver acima) em empate por ordem no
   arquivo - sem ela, o botão perigoso no escuro saía verde em vez de vermelho (achado ao
   reconferir o diálogo de confirmação depois de aplicar aquele fix). */
.e-btn.e-primary.acao-perigosa-solida,
:root[data-theme="dark"] .e-btn.e-primary.acao-perigosa-solida {
    background-color: var(--terra-cor-erro-solido) !important;
    border-color: var(--terra-cor-erro-solido) !important;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    max-width: 900px;
}

/* Campo que ocupa as duas colunas do .form-grid (ex: texto livre mais longo, JSON) */
.form-grid .campo-largo {
    grid-column: 1 / -1;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--terra-cor-texto-apoio);
}

.form-field.invalido label {
    color: var(--terra-cor-erro);
}

.form-field-erro {
    font-size: 0.8rem;
    color: var(--terra-cor-erro);
}

/* Campo que quebra o grid de 2 colunas e ocupa a linha inteira - Observações (textarea) não
   deveria dividir largura com um campo curto ao lado, ver PessoaForm. */
.form-field.full {
    grid-column: 1 / -1;
}

.form-field.full textarea {
    min-height: 100px;
}

/* AppDropDownComAtalho - dropdown + botão "..." de cadastro rápido (ver Components/UI). */
.app-dropdown-atalho {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.app-dropdown-atalho > *:first-child {
    flex: 1;
    min-width: 0;
}

/* Campo de texto + botão de ação ao lado (ex: consulta de CNPJ) - mesma estrutura de
   .app-dropdown-atalho, nome próprio porque não é um dropdown. */
.campo-com-botao-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.campo-com-botao-inline > *:first-child {
    flex: 1;
    min-width: 0;
}

/* Campo composto valor + unidade (ex: periodicidade de calibração) - diferente de
   .campo-com-botao-inline (input + botão, onde o botão já tem largura natural pequena): aqui o
   segundo elemento é um dropdown Syncfusion, que por padrão tenta ocupar width:100% do
   container flex e sufoca o campo numérico ao lado se não for contido explicitamente. */
.campo-valor-unidade {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.campo-valor-unidade > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.campo-valor-unidade > *:last-child {
    flex: 0 0 130px;
}

.form-card {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ===== Interruptor de ação imediata (AppToggle) - mesmo visual de .theme-switch (topbar),
   reaproveitado com nome genérico porque aqui não é sobre tema. ===== */
.app-toggle {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: 999px;
    border: none;
    background: var(--terra-cor-borda);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.app-toggle.on {
    background: var(--terra-cor-destaque);
}

.app-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.app-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--terra-branco);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.app-toggle.on .app-toggle-knob {
    transform: translateX(1.1rem);
}

.app-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-toggle-rotulo {
    font-size: 0.85rem;
    color: var(--terra-cor-texto);
    cursor: pointer;
    user-select: none;
}

/* ===== Papéis desta pessoa (PessoaForm) - linha com interruptor + painel que expande na hora,
   em vez de aba própria por papel (Cliente/Fornecedor/Transportador/Colaborador viravam 4 das
   11 abas da tela). O painel expandindo já é a confirmação visual de que o papel foi ativado
   (grava na hora, ver AoAlternarClienteAsync/etc.) - reforça o toast, que sozinho passa rápido
   demais. ===== */
.papel-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--terra-cor-borda);
}

.papel-linha:last-child {
    border-bottom: none;
}

.papel-esq {
    font-size: 0.9rem;
    font-weight: 500;
}

.papel-painel {
    margin: 0.7rem 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--terra-cor-sucesso-fundo);
    border: 1px solid var(--terra-cor-sucesso);
    border-radius: 8px;
}

/* ===== Aba Contatos consolidada (PessoaContatosTab) - um cartão por contato nomeado, com os
   telefones/emails DELE dentro, em vez de 3 abas isoladas (Contatos/Telefones/Emails) sem
   nenhuma ponte visual entre elas. ===== */
.contato-card {
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    padding: 1rem 1.1rem;
    margin-bottom: 0.9rem;
}

.contato-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.contato-nome {
    font-weight: 700;
    font-size: 0.95rem;
}

.contato-cargo {
    font-size: 0.8rem;
    color: var(--terra-cor-texto-apoio);
}

.contato-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.canal-linha {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    padding: 0.35rem 0;
}

.canal-linha .app-icon {
    color: var(--terra-cor-texto-apoio);
    flex-shrink: 0;
}

.canal-linha-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.canal-add {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
}

.canal-add button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--terra-cor-destaque);
    cursor: pointer;
}

.canais-soltos-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--terra-cor-texto-apoio);
    margin: 1.2rem 0 0.6rem;
}

.canal-solto {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--terra-cor-borda);
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Usuário com CONSULTAR mas sem ATUALIZAR - bloqueia interação em bloco (mais simples e mais
   fácil de manter do que desabilitar campo a campo em três formulários com abas dinâmicas). */
.form-card.form-readonly {
    pointer-events: none;
    opacity: 0.7;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form-errors {
    color: var(--terra-cor-erro);
    margin-bottom: 1rem;
}

.tab-placeholder {
    padding: 1rem 0;
    color: var(--terra-cor-texto-apoio);
}

/* Estado vazio "de verdade" (lista sem nenhum registro, não "aba ainda não implementada" -
   isso continua sendo .tab-placeholder). Ícone + título + descrição opcional, centralizado -
   usado no EmptyRecordTemplate do AppDataGrid e na tela de SelecionarEmpresa sem empresa
   vinculada. */
.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--terra-cor-texto-apoio);
}

.estado-vazio .app-icon {
    opacity: 0.45;
}

.estado-vazio-titulo {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--terra-cor-texto);
}

.estado-vazio-descricao {
    font-size: 0.85rem;
    max-width: 320px;
}

.workspace-aba-erro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--terra-cor-texto-apoio);
}

.workspace-aba-erro .app-icon {
    color: var(--terra-cor-erro);
}

.carregando {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--terra-cor-texto-apoio);
}

.carregando::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid var(--terra-cor-borda);
    border-top-color: var(--terra-cor-destaque);
    border-radius: 50%;
    animation: terra-girar 0.7s linear infinite;
}

@keyframes terra-girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .carregando::before {
        animation: none;
    }
}

/* ===== Matriz de permissões (PerfilForm) ===== */
/* Categoria (pasta) -> Rotina (folha, com os checkboxes de tipo) via AppTreeView - mesmo padrão
   visual do Gerenciar Menu (ver .menu-admin-arvore), reaproveitado aqui em vez de reinventar
   outra hierarquia. */
.permissoes-matriz {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 900px;
}

.permissoes-aplicacao {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: var(--terra-cor-texto);
}

.permissoes-aplicacao:first-child {
    margin-top: 0;
}

.permissoes-arvore {
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.permissoes-linha-categoria {
    font-weight: 700;
}

.permissoes-linha-rotina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    width: 100%;
}

.permissoes-rotina-nome {
    font-weight: 500;
    min-width: 140px;
}

.permissoes-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-static-value {
    display: block;
    font-size: 0.95rem;
    padding: 0.4rem 0;
    color: var(--terra-cor-texto);
}

/* ===== Matriz perfil x empresa (UsuarioForm) ===== */
.perfis-matriz-wrap {
    overflow-x: auto;
}

.perfis-matriz {
    border-collapse: collapse;
    min-width: 100%;
}

.perfis-matriz th,
.perfis-matriz td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--terra-cor-borda);
    white-space: nowrap;
}

.perfis-matriz th {
    font-size: 0.8rem;
    color: var(--terra-cor-texto-apoio);
    font-weight: 600;
}

/* ===== Sub-registros de Empresa (endereços/telefones/emails/certificados) ===== */
.subitens-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.subitens-painel {
    background: var(--terra-cor-fundo);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    padding: 1rem;
    margin-bottom: 1rem;
}

.subitens-painel-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.subitens-tabela-wrap {
    overflow-x: auto;
}

.subitens-tabela {
    border-collapse: collapse;
    width: 100%;
}

.subitens-tabela th,
.subitens-tabela td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--terra-cor-borda);
}

.subitens-tabela th {
    font-size: 0.8rem;
    color: var(--terra-cor-texto-apoio);
    font-weight: 600;
}

.subitens-tabela td.acoes {
    white-space: nowrap;
    text-align: right;
}

.subitens-inativo {
    opacity: 0.55;
}

/* ===== Árvore de administração de menu (GerenciarMenuPage) ===== */
.menu-admin-aplicacao {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
    color: var(--terra-cor-texto-apoio);
}

.menu-admin-aplicacao .app-icon {
    color: var(--terra-cor-texto-apoio);
}

.menu-admin-aplicacao-rotulo {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.menu-admin-aplicacao-select {
    min-width: 280px;
}

.menu-admin-aplicacao-nota {
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

.app-icon-picker-wrap {
    position: relative;
}

.app-icon-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    background: var(--terra-cor-fundo);
    color: var(--terra-cor-texto);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.app-icon-picker-trigger:hover {
    border-color: var(--terra-cor-destaque);
}

.app-icon-picker-trigger-rotulo {
    flex: 1;
    text-align: left;
}

.app-icon-picker-trigger .app-icon:last-child {
    color: var(--terra-cor-texto-apoio);
    flex-shrink: 0;
}

.app-icon-picker-painel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: 420px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
}

.app-icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 64px;
    padding: 0.5rem 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--terra-cor-borda);
    background: var(--terra-cor-fundo);
    color: var(--terra-cor-texto-apoio);
    font-family: var(--terra-font);
    font-size: 0.65rem;
    cursor: pointer;
}

.app-icon-picker-item:hover {
    border-color: var(--terra-cor-destaque);
}

.app-icon-picker-item.selecionado {
    border: 2px solid var(--terra-cor-destaque);
    background: var(--terra-cor-sucesso-fundo);
    color: var(--terra-cor-sucesso);
    font-weight: 600;
}

.app-icon-picker-item.selecionado .app-icon {
    color: var(--terra-cor-sucesso);
}

.menu-admin-arvore {
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
    overflow: hidden;
}

.menu-admin-arvore .e-list-item > .e-fullrow {
    background: transparent;
}

.menu-admin-arvore .menu-admin-linha {
    border-bottom: none;
    padding: 0.4rem 0.25rem;
}

.menu-admin-linha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--terra-cor-borda);
}

.menu-admin-linha:last-child {
    border-bottom: none;
}

.menu-admin-inativo {
    opacity: 0.55;
}

.menu-admin-icone {
    display: flex;
    color: var(--terra-cor-texto-apoio);
}

.menu-admin-titulo {
    font-weight: 500;
}

.menu-admin-rotina {
    font-size: 0.8rem;
    color: var(--terra-cor-texto-apoio);
}


.menu-admin-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ===== Toast ===== */
.toast-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 100;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--terra-cor-texto);
    border-left: 4px solid var(--terra-cor-destaque);
    animation: toast-in 0.2s ease;
}

.toast-erro {
    border-left-color: var(--terra-cor-erro);
}

.toast-desfazer {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--terra-cor-destaque);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Reskin de Abas e Grid do Syncfusion (mesma lógica do botão/foco - só CSS,
   sem alterar componente cru). Ver wrapper strategy no CLAUDE.md raiz. ===== */
.e-tab .e-toolbar-item.e-active .e-tab-text {
    color: var(--terra-cor-destaque) !important;
}

.e-tab .e-indicator {
    background: var(--terra-cor-destaque) !important;
}

/* Grid como card - envolve o <SfGrid> nu do AppDataGrid.razor. Ver guia "Grid & Cards" pra
   o raciocínio completo (card visual já existia em 4 lugares diferentes, a grid era a exceção). */
.app-datagrid {
    border-radius: var(--terra-raio);
    box-shadow: var(--terra-sombra);
    overflow: hidden;
}

.app-datagrid .e-grid {
    border: none !important;
}

.app-datagrid .e-gridpager,
.app-datagrid .e-gridcontent,
.app-datagrid .e-content,
.app-datagrid .e-table {
    background: var(--terra-cor-fundo-elevado) !important;
    border-color: var(--terra-cor-borda) !important;
}

/* Cabeçalho com o tom da própria página (--terra-cor-fundo), não o branco/card das linhas - separa
   visualmente sem precisar de borda, como no protótipo original ("Grid & Cards"). .e-headercell é
   o <th> de verdade, tem fundo próprio no tema Fluent2 que sobrepõe o de .e-gridheader se não for
   pego também. */
.app-datagrid .e-gridheader,
.app-datagrid .e-headercell {
    background: var(--terra-cor-fundo) !important;
    border-color: var(--terra-cor-borda) !important;
}

.app-datagrid .e-columnheader .e-headercelldiv {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--terra-cor-texto-apoio) !important;
}

.app-datagrid .e-rowcell {
    font-size: 0.85rem;
    padding: 8px;
}

.e-grid .e-row:hover .e-rowcell {
    background: rgba(20, 83, 45, 0.06) !important;
}

:root[data-theme="dark"] .e-grid .e-row:hover .e-rowcell {
    background: rgba(34, 197, 94, 0.08) !important;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background: var(--terra-cor-destaque) !important;
    border-color: var(--terra-cor-destaque) !important;
}

:root[data-theme="dark"] .app-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .app-nav-item.active {
    background: rgba(255, 255, 255, 0.08);
}

.home-subtitle {
    color: var(--terra-cor-texto-apoio);
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

/* ===== Seleção de empresa pós-login (tela cheia, antecede o app-shell) ===== */
.app-gate-tela-cheia {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--terra-cor-fundo);
    padding: 2rem;
}

.app-gate-tela-cheia > * {
    width: 100%;
    max-width: 480px;
}

.selecionar-empresa-tela {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.selecionar-empresa-marca .terra-brand-lockup {
    font-size: 1.1rem;
}

.selecionar-empresa-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.selecionar-empresa-cabecalho h1 {
    margin: 0;
}

.selecionar-empresa-subtitulo {
    margin: 0;
    color: var(--terra-cor-texto-apoio);
}

.selecionar-empresa-lista {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.selecionar-empresa-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-align: left;
    padding: 0.9rem 1.1rem;
    background: var(--terra-cor-fundo-elevado);
    border: 1px solid var(--terra-cor-borda);
    border-radius: var(--terra-raio);
    font-family: var(--terra-font);
    cursor: pointer;
}

.selecionar-empresa-item:hover {
    border-color: var(--terra-cor-destaque);
}

.selecionar-empresa-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--terra-cor-fundo);
    color: var(--terra-cor-texto-apoio);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}

.selecionar-empresa-nome {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--terra-cor-texto);
}

.selecionar-empresa-seta {
    flex-shrink: 0;
    color: var(--terra-cor-texto-apoio);
}

.diagnostico {
    margin-top: 2rem;
}

.diagnostico summary {
    cursor: pointer;
    color: var(--terra-cor-texto-apoio);
    font-size: 0.85rem;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ===== Theme switch (troca o botão com emoji por um switch de verdade) ===== */
.theme-switch {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: 999px;
    border: none;
    background: var(--terra-cor-borda);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.theme-switch.on {
    background: var(--terra-cor-destaque);
}

.theme-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--terra-branco);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.theme-switch.on .theme-switch-knob {
    transform: translateX(1.1rem);
}

/* ===== Avatar (iniciais) - reaproveitado no menu de usuário e no cartão da sidebar ===== */
.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--terra-cor-destaque);
    color: var(--terra-branco);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Menu suspenso genérico (trigger + dropdown) - base compartilhada pelo menu de usuário
   (UserMenu) e pelo menu de "mais ações" de qualquer formulário (AppActionsMenu). Um lugar só
   pra essa aparência, em vez de duas versões que podem divergir com o tempo. ===== */
.dropdown-menu-wrap {
    position: relative;
}

.dropdown-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--terra-raio);
}

.dropdown-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .dropdown-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
}

.user-menu-nome {
    font-size: 0.85rem;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 180px;
    padding: 0.4rem;
    z-index: 20;
}

.dropdown-menu form {
    margin: 0;
}

.dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    /* border-box de propósito - mesmo motivo já documentado em .app-rail-flyout (projeto não usa
       isso globalmente, default é content-box). Sem isso, o padding somava por fora dos 100%,
       a linha ficava mais larga que o próprio ".dropdown-menu-mega" (overflow-x:hidden) e cortava
       a pontinha da seta ">" das linhas de pasta (achado revisando o mega-menu). */
    box-sizing: border-box;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
}

.dropdown-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .dropdown-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===== Empresa ativa, rodapé fixo da sidebar ===== */
/* Era um badge solto na tela Início antes, depois um bloco em cima do cartão de usuário - esse
   cartão saiu (redundante com o UserMenu, que já mostra usuário/tipo no topo à direita), então a
   empresa ficou sozinha aqui, ocupando o próprio lugar do rodapé. */
.app-sidebar-empresa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--terra-cor-borda);
}

.app-sidebar-empresa-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.25;
}

.app-sidebar-empresa-nome {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-empresa-detalhe {
    font-size: 0.75rem;
    color: var(--terra-cor-texto-apoio);
}

/* Ícone à direita do bloco - só aparece quando o usuário tem mais de uma empresa disponível (ver
   SidebarChrome). Volta pra tela de seleção de empresa (mesma tela do primeiro login), sem
   precisar deslogar. Tooltip nativo via title (mesmo padrão dos ícones do rail). */
.app-sidebar-empresa-trocar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--terra-raio);
    color: var(--terra-cor-texto-apoio);
    cursor: pointer;
}

.app-sidebar-empresa-trocar:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--terra-cor-destaque);
}

:root[data-theme="dark"] .app-sidebar-empresa-trocar:hover {
    background: rgba(255, 255, 255, 0.08);
}