/* ==================================================================================================
   Identidade visual do AgroPec.
   --------------------------------------------------------------------------------------------------
   Carregado DEPOIS de bootstrap.min.css e do tema do Syncfusion, e e por isso que as sobrescritas
   abaixo vencem sem precisar de !important.

   A tecnica de shell, de componente e de estado e a mesma do MaxEquipa; a paleta nao. Verde de folha
   escura, nao os tons de vermelho daquele app — sao produtos diferentes e o usuario precisa saber em
   qual esta so de olhar.

   Prefixo `ag-`, como ja usavam as telas de autenticacao da Fase 2.
   ================================================================================================== */

:root {
    /* ---- Paleta ---- */
    /* Verde folha escura. `--ag-brand` sobre branco da 6,4:1 de contraste, e branco sobre ela o
       mesmo — passa AA para texto normal, entao serve tanto para texto quanto para botao preenchido. */
    --ag-brand: #2F6B3F;
    --ag-brand-2: #24522F; /* hover/active: um degrau mais escuro, nunca mais claro */
    --ag-brand-soft: #E9F1EA; /* tinta clara para fundo de destaque */
    --ag-leaf-mid: #3E7D50;
    --ag-leaf-dark: #16321E; /* folha no escuro: fundo da sidebar */
    --ag-leaf-border: #BBD5C2;

    /* ---- Destrutivo ----
       O MaxEquipa usa para "Excluir" um tom mais escuro da propria marca, o que funciona la porque a
       marca dele e vermelha. Aqui a marca e verde: reaproveitar a familia faria o botao de excluir
       dizer "siga em frente". Entao o destrutivo tem hue proprio — tijolo, 6,5:1 sobre branco —,
       distinto da marca e reconhecivel como perigo. */
    --ag-danger: #B3261E;
    --ag-danger-2: #8C1D18;
    --ag-danger-soft: #FBEAE9;
    --ag-danger-border: #E8B4B0;

    /* ---- Neutros ---- */
    --ag-ink: #1F2429;
    --ag-ink-2: #49524C;
    --ag-muted: #6C7671;
    --ag-border: #D3DBD6;
    --ag-page-bg: #F6F8F6;
    --ag-surface: #FFFFFF;

    /* ---- Sidebar ---- */
    --ag-sidebar-bg: var(--ag-leaf-dark);
    --ag-sidebar-text: #CBD6CE; /* 9,4:1 sobre o fundo da sidebar */
    --ag-sidebar-muted: #8FA096;

    /* ---- Medidas ---- */
    --ag-topbar-height: 56px;
    --ag-sidebar-width: 248px;
    --ag-radius: .5rem;

    /* Declarada uma vez: a stack estava repetida caractere a caractere em dois blocos, e duas copias
       divergem na primeira vez que alguem acrescentar uma fonte a uma delas. */
    --ag-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Bootstrap ---- */
    --bs-primary: var(--ag-brand);
    --bs-primary-rgb: 47, 107, 63;
    --bs-link-color: var(--ag-brand);
    --bs-link-color-rgb: 47, 107, 63;
    --bs-link-hover-color: var(--ag-brand-2);
    --bs-link-hover-color-rgb: 36, 82, 47;
    --bs-focus-ring-color: rgba(47, 107, 63, .25);
    --bs-body-color: var(--ag-ink);
    --bs-body-bg: var(--ag-page-bg);
    --bs-border-color: var(--ag-border);
    --bs-danger: var(--ag-danger);
    --bs-danger-rgb: 179, 38, 30;

    /* ---- Syncfusion ----
       O tema bootstrap5.3 do Syncfusion e parametrizado por estas variaveis; redefini-las recolore
       grid, botao, dropdown e paginacao de uma vez, sem perseguir seletor por seletor. */
    --color-sf-primary: var(--ag-brand);
    --color-sf-primary-text-color: #fff;
    --color-sf-primary-light: #7BA98A;
    --color-sf-primary-lighter: var(--ag-brand-soft);
    --color-sf-primary-dark: var(--ag-brand-2);
    --color-sf-primary-darker: #16321E;
    --color-sf-primary-shadow: 47, 107, 63;
    --color-sf-primary-bg-color-hover: var(--ag-brand-2);
    --color-sf-primary-border-color-hover: var(--ag-brand-2);
    --color-sf-primary-bg-color-pressed: var(--ag-brand-2);
    --color-sf-primary-border-color-pressed: var(--ag-brand-2);
    --color-sf-primary-bg-color-disabled: rgba(47, 107, 63, .5);
    --color-sf-content-bg-color-selected: var(--ag-brand-soft);
    --color-sf-flyout-bg-color-pressed: var(--ag-brand-soft);
}

body {
    background-color: var(--ag-page-bg);
    color: var(--ag-ink);
}

/* O Bootstrap fixa border-color E box-shadow de :focus num azul hardcoded (#86b7fe e
   rgba(13,110,253,.25)) — nenhum dos dois le `--bs-*`, e `--bs-focus-ring-color` so e consumida
   pelas utilitarias `.focus-ring`, nao por este seletor. Sem esta regra, TODO input e select nativo
   do app mostra borda e anel de foco azuis, por mais verde que o resto do tema seja. */
.form-control:focus,
.form-select:focus {
    border-color: var(--ag-brand);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* ==================================================================================================
   Shell
   --------------------------------------------------------------------------------------------------
   A rolagem e da PAGINA, com a topbar `sticky`. Um shell de altura fixa com o `<main>` rolando por
   dentro parece equivalente, mas nao e: `position: sticky` do cabecalho da grade se resolve contra o
   contexto de rolagem, e num `<main>` com overflow proprio ele gruda no main, nao abaixo da topbar.
   A tecnica de cabecalho de grade fixo (`.ag-card-sticky`, mais abaixo) depende deste modelo.
   ================================================================================================== */

.ag-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ag-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.ag-content {
    flex: 1 1 auto;
    min-width: 0; /* deixa a grade encolher em vez de empurrar o layout */
    padding: 1.75rem 2rem 3rem;
}

/* ---- Topbar ---- */
.ag-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--ag-topbar-height);
    flex: 0 0 auto;
    padding: 0 1.125rem;
    background: var(--ag-brand);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ag-topbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.ag-topbar-mark {
    font-size: 1.25rem;
    line-height: 1;
}

.ag-topbar a {
    color: #fff;
    text-decoration: none;
}

.ag-topbar a:hover {
    text-decoration: underline;
}

.ag-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--ag-radius);
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.ag-icon-btn:hover,
.ag-icon-btn:focus-visible {
    background: rgba(255, 255, 255, .18);
}

/* ---- Sidebar ---- */
.ag-sidebar {
    flex: 0 0 var(--ag-sidebar-width);
    width: var(--ag-sidebar-width);
    background: var(--ag-sidebar-bg);
    color: var(--ag-sidebar-text);
}

/* O recolhimento e uma classe no shell, alternada por JS (ver site.js e Topbar.razor). Nao ha estado
   de Blazor aqui de proposito: MainLayout e SSR estatico e nao pode receber EventCallback (R-38). */
.ag-shell.ag-sidebar-collapsed .ag-sidebar {
    display: none;
}

.ag-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    color: var(--ag-sidebar-text);
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
}

.ag-nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.ag-nav-link.active {
    background: rgba(255, 255, 255, .1);
    border-left-color: var(--ag-leaf-mid);
    color: #fff;
    font-weight: 600;
}

.ag-nav-link i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    flex: 0 0 auto;
}

/* ==================================================================================================
   PageHeader
   ================================================================================================== */

.ag-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ag-page-head-main {
    display: flex;
    align-items: center;
    gap: .875rem;
    /* Forca o bloco de titulo a ocupar a linha inteira, empurrando `.actions` para a linha de baixo
       SEMPRE. Sem isto, `.ag-page-head` (que tem flex-wrap) so quebra quando titulo, subtitulo e
       botoes juntos nao cabem — e a mesma tela vira uma linha ou duas dependendo do comprimento do
       subtitulo e da largura da janela, ficando inconsistente entre telas irmas. */
    flex: 1 1 100%;
}

.ag-page-head .title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    flex: 0 0 auto;
    border-radius: .625rem;
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
    font-size: 1.125rem;
}

.ag-page-head .eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ag-leaf-mid);
    margin-bottom: .1875rem;
}

.ag-page-head h1 {
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--ag-leaf-dark);
    letter-spacing: -.1px;
}

.ag-page-head .sub {
    margin-top: .1875rem;
    font-size: .78125rem;
    color: var(--ag-muted);
    max-width: 80ch;
}

/* O par CSV/PDF e a acao primaria vivem aqui, nesta ordem, em todas as telas da classe. */
.ag-page-head .actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ==================================================================================================
   Filtros, comandos auxiliares e acoes de linha
   ================================================================================================== */

/* Bloco de filtros: grid explicito, e nao `row g-3` remontado por tela. Com o grid do Bootstrap cada
   tela escolhia as proprias larguras e o "Limpar filtros" acabava em posicao diferente em cada uma —
   o mesmo comando mudando de lugar entre telas irmas obriga o usuario a procura-lo toda vez.
   A tela declara as colunas em `grid-template-columns`; o ultimo item e sempre o limpar. */
.ag-filters-row {
    display: grid;
    gap: .875rem;
    align-items: end;
}

@media (max-width: 768px) {
    .ag-filters-row {
        grid-template-columns: 1fr !important;
    }
}

.ag-icon-input-wrap {
    position: relative;
}

.ag-icon-input-wrap i {
    position: absolute;
    left: .625rem;
    top: 2.375rem;
    color: var(--ag-muted);
    font-size: .8125rem;
}

.ag-icon-input-wrap input {
    padding-left: 2rem;
}

/* "Limpar filtros" e afins: comando secundario que nao disputa peso com a acao primaria. Um so
   desenho no app inteiro — o mesmo comando com duas aparencias na mesma tela obriga a reaprender. */
.ag-link-btn {
    background: none;
    border: none;
    color: var(--ag-ink-2);
    font-size: .8125rem;
    height: 2.125rem;
    cursor: pointer;
    padding: 0 .25rem;
}

.ag-link-btn:hover {
    color: var(--ag-brand);
    text-decoration: underline;
}

.ag-row-actions {
    display: flex;
    gap: .375rem;
    justify-content: flex-end;
}

.ag-icon-btn-sm {
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: .375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    cursor: pointer;
    background: #fff;
    font-size: .78125rem;
}

.ag-icon-btn-edit {
    border-color: var(--ag-border);
    color: var(--ag-ink-2);
}

.ag-icon-btn-edit:hover {
    border-color: var(--ag-brand);
    color: var(--ag-brand);
}

.ag-icon-btn-del {
    border-color: var(--ag-danger-border);
    color: var(--ag-danger);
}

.ag-icon-btn-del:hover {
    background: var(--ag-danger-soft);
}

.ag-icon-btn-sm:disabled {
    opacity: .35;
    cursor: default;
}

/* ==================================================================================================
   Cartao
   ================================================================================================== */

.ag-card {
    background: #fff;
    border-radius: .5rem;
    border-top: 4px solid var(--ag-brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    overflow: hidden;
    margin-bottom: 1rem;
}

.ag-card-body {
    padding: 1rem 1.125rem;
}

/* Cartao de grade cuja rolagem e a da PAGINA. O `position: sticky` do cabecalho se resolve contra o
   scroll da pagina, e o `overflow: hidden` que arredonda os cantos do cartao quebra esse contexto —
   o cabecalho grudaria no cartao em vez da viewport. Este modificador troca para `visible` e
   arredonda so o primeiro e o ultimo filho, preservando a aparencia. */
.ag-card-sticky {
    overflow: visible;
}

.ag-card-sticky > :first-child {
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
}

.ag-card-sticky > :last-child {
    border-radius: 0 0 .5rem .5rem;
    overflow: hidden;
}

/* Nunca ligar o cabecalho fixo nativo do Syncfusion junto: o JS dele reescreve o `top` inline sem
   conhecer a altura da topbar e prende o cabecalho atras dela. O z-index fica abaixo do da topbar
   (10) para nunca sobrepo-la. */
.ag-card-sticky .e-gridheader {
    position: sticky !important;
    top: var(--ag-topbar-height) !important;
    z-index: 9;
    background: #fff;
}

/* ==================================================================================================
   ModalShell
   ================================================================================================== */

.ag-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(22, 50, 30, .45);
    outline: none; /* o overlay recebe foco so para o Esc funcionar; o anel seria ruido visual */
}

.ag-modal-card {
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--ag-surface);
    border-radius: var(--ag-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.ag-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ag-border);
}

.ag-modal-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ag-leaf-dark);
}

.ag-modal-head .modal-meta {
    margin-top: .15rem;
    font-size: .78125rem;
    color: var(--ag-muted);
}

.ag-modal-close {
    border: 0;
    background: transparent;
    color: var(--ag-muted);
    font-size: 1rem;
    line-height: 1;
    padding: .25rem;
    cursor: pointer;
}

.ag-modal-close:hover {
    color: var(--ag-ink);
}

.ag-modal-body {
    padding: 1.25rem 1.375rem;
    overflow-y: auto;
}

/* Campo dentro de dialogo e mais compacto que na pagina: o `form-control` padrao do Bootstrap e alto
   demais para caber varias linhas de campo sem rolagem dentro do cartao. */
.ag-modal-body .form-label {
    margin-bottom: .1875rem;
    font-size: .75rem;
}

.ag-modal-body .form-control,
.ag-modal-body .form-select {
    min-height: 2.125rem;
    padding: .3rem .65rem;
    font-size: .8125rem;
}

.ag-modal-body textarea.form-control {
    min-height: 0;
    resize: vertical;
}

.ag-modal-body .e-input-group,
.ag-modal-body .e-input-group.e-control-wrapper {
    min-height: 2.125rem;
    font-size: .8125rem;
}

/* `space-between`, nao `flex-end`: o page-standard fixa que o rodape de dialogo com grade leva o par
   CSV -> PDF a esquerda e fechar -> acao primaria a direita. Com `flex-end` os dois grupos colapsam
   num so e a composicao deixa de ser possivel. */
.ag-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: .5rem;
    gap: .5rem;
    padding: .875rem 1.375rem;
    border-top: 1px solid var(--ag-border);
    background: #FBFCFB;
    border-radius: 0 0 var(--ag-radius) var(--ag-radius);
}

/* O `.btn` do Bootstrap nao tem `white-space: nowrap`. Dentro de um container flex, um botao sem
   `flex-shrink: 0` pode ser espremido abaixo da largura do proprio icone mais texto, e o texto
   quebra em duas linhas DENTRO do botao em vez de o botao inteiro descer de linha. */
.ag-modal-foot .btn {
    flex-shrink: 0;
}

/* O grupo da direita e um `<div class="d-flex gap-2">` filho direto do rodape. `flex-wrap` nao se
   herda: sem esta regra, um rodape de tres ou mais botoes estoura a largura e vaza para fora do
   cartao arredondado, em vez de quebrar linha. */
.ag-modal-foot > div {
    display: flex;
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* ==================================================================================================
   Validacao e avisos
   ================================================================================================== */

/* Erro de validacao e VERMELHO, nao ambar: ambar e aviso, e usar um pelo outro ensina o usuario a
   ignorar os dois.

   ---------------------------------------------------------------------------------------------------
   **Quando NAO usar estas classes, e por que a excecao e permanente.**

   O app usa dois vocabularios de alerta ao mesmo tempo, e a divisao nao e descuido:

     - `ag-alert-*` (aqui) — alerta FIXO, que fica na tela enquanto a condicao valer. E o caso do
       resumo de validacao de um formulario e do aviso de estado.
     - `alert alert-* alert-dismissible` do Bootstrap — alerta DISPENSAVEL, com o `btn-close` no canto.

   A conversao do segundo grupo foi tentada e revertida: o `btn-close` do Bootstrap se posiciona por
   regras de padding do proprio `.alert`, e sob `ag-alert-danger` ele cai sobre o texto. Reproduzir
   esse posicionamento aqui significaria copiar tres regras do Bootstrap para dentro do tema e passar a
   mante-las sincronizadas com a versao da biblioteca — custo permanente para resolver um detalhe que o
   Bootstrap ja resolve.

   O page-standard (secao 15) manda transformar em variacao nomeada a excecao que se repete em tres ou
   mais telas. E o que esta nota faz: a variacao chama-se **alerta dispensavel**, e a regra e
   "dispensavel fica no Bootstrap". Em 13/09/2026 sao 20 ocorrencias Bootstrap contra 19 tokenizadas —
   proporcao equivalente a do MaxEquipa (75 contra 96). */
.ag-alert-danger {
    background: var(--ag-danger-soft);
    border: 1px solid var(--ag-danger-border);
    color: var(--ag-danger-2);
    border-radius: .375rem;
    padding: .75rem .875rem;
    margin-bottom: 1.125rem;
    font-size: .8125rem;
}

.ag-alert-danger .ttl {
    display: flex;
    align-items: center;
    gap: .4375rem;
    font-weight: 700;
    margin-bottom: .375rem;
}

.ag-alert-danger ul {
    margin: 0;
    padding-left: 1.25rem;
}

.ag-err-text {
    color: var(--ag-danger);
    font-size: .71875rem;
    margin-top: .3125rem;
}

.ag-req-note {
    font-size: .75rem;
    color: var(--ag-muted);
}

/* Aviso: mais forte que texto cinza, que passa despercebido, e mais fraco que `.ag-alert-danger`, que
   e erro. Para consequencia que o usuario precisa conhecer ANTES de agir — nao para dizer que algo
   deu errado. Ambar proprio, sem relacao com a marca nem com o destrutivo. */
.ag-alert-aviso {
    background: #FEF6E7;
    border: 1px solid #E8CE95;
    color: #8A5A0B;
    border-radius: .375rem;
    padding: .5625rem .75rem;
    font-size: .78125rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.ag-alert-aviso i {
    color: #B45309;
    line-height: 1.45;
}

/* Nota contextual ao lado de um controle: mais fraca que um aviso, mais forte que nada. Para o que
   explica uma consequencia sem interromper — um aviso ambar aqui gastaria a cor a toa. */
.ag-hint-inline {
    font-size: .75rem;
    color: var(--ag-muted);
}

/* Estado em lista. **Texto, sempre** — nunca so cor: um estado que existe apenas visualmente nao se
   le em voz alta, nao se copia e nao se filtra. */
.ag-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .125rem .5rem;
    border-radius: 1rem;
    font-size: .6875rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.ag-status-badge.ok {
    background: var(--ag-brand-soft);
    border-color: var(--ag-leaf-border);
    color: var(--ag-leaf-dark);
}

.ag-status-badge.warn {
    background: #FEF6E7;
    border-color: #E8CE95;
    color: #8A5A0B;
}

.ag-status-badge.off {
    background: #F1F3F2;
    border-color: var(--ag-border);
    color: var(--ag-muted);
}

.ag-status-badge.danger {
    background: var(--ag-danger-soft);
    border-color: var(--ag-danger-border);
    color: var(--ag-danger-2);
}

/* Formulario de dialogo em duas colunas, com escape para campo que ocupa a linha inteira. */
.ag-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem 1rem;
}

.ag-span2 {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .ag-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Titulo de secao dentro de pagina ou cartao. Deliberadamente menor que o titulo de dialogo
   (`.ag-modal-head h2`), para nao competir com ele quando aparecer dentro de um. */
.ag-section-title {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ag-leaf-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}

/* ==================================================================================================
   Superficies e botoes
   ================================================================================================== */

.card {
    border-color: var(--ag-border);
}

.alert-secondary {
    background-color: var(--ag-brand-soft);
    border-color: var(--ag-leaf-border);
    color: var(--ag-leaf-dark);
}

.btn-primary {
    --bs-btn-bg: var(--ag-brand);
    --bs-btn-border-color: var(--ag-brand);
    --bs-btn-hover-bg: var(--ag-brand-2);
    --bs-btn-hover-border-color: var(--ag-brand-2);
    --bs-btn-active-bg: var(--ag-brand-2);
    --bs-btn-active-border-color: var(--ag-brand-2);
    --bs-btn-disabled-bg: var(--ag-brand);
    --bs-btn-disabled-border-color: var(--ag-brand);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ag-ink);
    --bs-btn-border-color: var(--ag-border);
    --bs-btn-hover-bg: var(--ag-brand-soft);
    --bs-btn-hover-border-color: var(--ag-leaf-border);
    --bs-btn-hover-color: var(--ag-leaf-dark);
}

.btn-danger {
    --bs-btn-bg: var(--ag-danger);
    --bs-btn-border-color: var(--ag-danger);
    --bs-btn-hover-bg: var(--ag-danger-2);
    --bs-btn-hover-border-color: var(--ag-danger-2);
    --bs-btn-active-bg: var(--ag-danger-2);
    --bs-btn-active-border-color: var(--ag-danger-2);
    --bs-btn-disabled-bg: var(--ag-danger);
    --bs-btn-disabled-border-color: var(--ag-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--ag-danger);
    --bs-btn-border-color: var(--ag-danger);
    --bs-btn-hover-bg: var(--ag-danger);
    --bs-btn-hover-border-color: var(--ag-danger);
    --bs-btn-active-bg: var(--ag-danger);
    --bs-btn-active-border-color: var(--ag-danger);
    --bs-btn-disabled-color: var(--ag-danger);
    --bs-btn-disabled-border-color: var(--ag-danger);
}

/* ==================================================================================================
   Telas de autenticacao
   --------------------------------------------------------------------------------------------------
   Vivem aqui, e nao no app.css, porque usam token de marca — e o app.css declara no proprio topo que
   nao carrega cor de marca. Estavam la por heranca da Fase 2, antes de existir tema.

   Nao usam o shell (sem topbar e sem menu): quem esta no login ainda nao tem para onde navegar.
   ================================================================================================== */

.ag-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--ag-page-bg);
}

.ag-auth-brand {
    text-align: center;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--ag-brand);
    margin-bottom: 1rem;
}

.ag-auth-card {
    width: 100%;
    max-width: 26rem;
}

.ag-auth-card h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ag-leaf-dark);
    margin-bottom: .25rem;
}

.ag-auth-card .sub {
    font-size: .8125rem;
    color: var(--ag-muted);
    margin-bottom: 1.25rem;
}

/* Os links de apoio (esqueci a senha, voltar ao login) ficam num bloco proprio, sempre na mesma
   posicao — improvisar `text-center mt-3` por tela os faz variar de espacamento entre telas irmas. */
.ag-auth-links {
    margin-top: 1rem;
    text-align: center;
    font-size: .8125rem;
}

.ag-auth-qr {
    max-width: 12rem;
}

.ag-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
    font-family: var(--ag-font-mono);
    font-size: .9rem;
}

/* Grade: largura relativa ao contêiner e cabecalho legivel. O tamanho de pagina e unico no app
   inteiro (R-42) e fica declarado na propria tela, nao aqui. */
.e-grid {
    border-color: var(--ag-border);
}

.e-grid .e-headercell {
    background-color: #F1F5F2;
    color: var(--ag-ink);
    font-weight: 600;
}

/* ==================================================================================================
   Secao Modelos (/modelos) — vitrine de classes de pagina e de controles.
   --------------------------------------------------------------------------------------------------
   Estilo PROPRIO, e nao reaproveitado das telas de producao, num ponto so: a ficha que explica a
   classe. Ela nao existe em tela de producao nenhuma, entao nao ha token a reusar. Todo o resto das
   telas-modelo usa exatamente as mesmas classes das telas reais — se o modelo precisasse de CSS
   proprio para parecer com a tela que ele modela, ele nao seria modelo de nada.
   ================================================================================================== */

/* Cartoes do hub (C6). Grade fluida: sem largura fixa por cartao, a mesma marcacao serve a um hub de
   tres destinos e a um de dez. */
.ag-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .875rem;
}

.ag-hub-card {
    display: block;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.ag-hub-card:hover {
    border-color: var(--ag-leaf-border);
    box-shadow: 0 2px 8px rgba(22, 50, 30, .08); /* --ag-leaf-dark com alfa: rgba() nao aceita var() de hex */
    color: inherit;
}

.ag-hub-card .title-icon {
    font-size: 1.25rem;
    color: var(--ag-brand);
}

.ag-hub-card .ttl {
    font-weight: 600;
    margin-top: .375rem;
}

.ag-hub-card .sub {
    font-size: .8125rem;
    color: var(--ag-muted);
    margin-top: .25rem;
}

/* Ficha da classe. Barra na cor da marca a esquerda para nao ser confundida com um alerta: alerta
   pede acao, ficha so informa. */
.ag-ficha {
    background: var(--ag-brand-soft);
    border: 1px solid var(--ag-leaf-border);
    border-left-width: 4px;
    border-radius: var(--ag-radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    color: var(--ag-ink-2);
}

.ag-ficha dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem .75rem;
    margin: 0;
}

.ag-ficha dt {
    font-weight: 600;
    color: var(--ag-leaf-dark);
    white-space: nowrap;
}

.ag-ficha dd {
    margin: 0;
}

.ag-ficha code {
    color: var(--ag-leaf-dark);
    background: rgba(255, 255, 255, .6);
    padding: .05rem .25rem;
    border-radius: .25rem;
}

@media (max-width: 576px) {
    .ag-ficha dl {
        grid-template-columns: 1fr;
    }

    .ag-ficha dd {
        margin-bottom: .35rem;
    }
}

/* Resumo rotulo/valor do topo de um documento (Classe D). O mesmo bloco do PDF, na tela — e de
   proposito: quem confere o documento na tela e quem assina o papel precisam ver a mesma coisa. */
.ag-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem 1.25rem;
}

.ag-kv-grid dt {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ag-muted);
    font-weight: 600;
}

.ag-kv-grid dd {
    margin: 0;
    font-weight: 600;
    color: var(--ag-ink);
}

/* Fecho de totais sob uma grade de itens. Alinhado a direita, sobre a mesma regua dos numeros. */
.ag-total-line {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: .625rem 0 0;
    border-top: 1px solid var(--ag-border);
    margin-top: .625rem;
    font-weight: 600;
}

/* Vitrine de controles: cada controle num bloco com rotulo e nota. */
.ag-controle-demo {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    padding: .875rem;
    margin-bottom: .875rem;
    background: var(--ag-surface);
}

.ag-controle-demo > .nome {
    font-family: var(--ag-font-mono);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ag-leaf-dark);
    margin-bottom: .25rem;
}

.ag-controle-demo > .nota {
    font-size: .75rem;
    color: var(--ag-muted);
    margin-bottom: .625rem;
}

.ag-controle-demo > .campo {
    max-width: 22rem;
}

/* ==================================================================================================
   Tokens que faltavam, apontados pela 4a rodada de comparacao com o MaxEquipa (13/09/2026).
   ================================================================================================== */

/* Indicadores numericos de tela de consulta (classe C4). Existiam montados com `ag-hub-grid` +
   `ag-kv-grid` — dois tokens que a folha documenta como sendo de OUTRA coisa (cartao de hub e resumo
   de documento). Reusar o nome errado nao quebra a tela, mas ensina o nome errado: o proximo a copiar
   leva junto o `ag-hub-grid` para uma tela que nao tem hub nenhum.

   Equivale ao par `.mx-kpi-row`/`.mx-kpi` do MaxEquipa (40 usos, 7 telas de consulta). */
.ag-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: .875rem;
}

.ag-kpi {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-top: 4px solid var(--ag-brand);
    border-radius: var(--ag-radius);
    padding: .875rem 1rem;
}

.ag-kpi .lbl {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ag-muted);
    font-weight: 600;
}

.ag-kpi .num {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ag-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Botao de linha NEUTRO — "abrir", "ver", "aprofundar". Existiam so `-edit` e `-del`, e um botao de
   leitura acabava com `ag-icon-btn-sm` sozinho; essa classe declara `border: 1px solid` sem
   `border-color`, entao a borda herdava `currentColor` do contexto e mudava de cor sem ninguem pedir.

   Equivale a `.mx-icon-btn-view` do MaxEquipa (26 arquivos). */
.ag-icon-btn-view {
    color: var(--ag-muted);
    border-color: var(--ag-border);
}

.ag-icon-btn-view:hover {
    color: var(--ag-leaf-dark);
    border-color: var(--ag-leaf-border);
    background: var(--ag-brand-soft);
}

/* Linha de inclusao de item num formulario de documento. Estava reusando `ag-filters-row`: os dois sao
   grids de uma linha, mas o nome mentia sobre a funcao — e um filtro e uma inclusao respondem a
   comandos diferentes no dia em que a linha precisar de altura ou alinhamento proprios. */
.ag-mini-add-row {
    display: grid;
    gap: .625rem;
    align-items: end;
    padding: .75rem;
    background: var(--ag-page-bg);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    margin-bottom: .875rem;
}

@media (max-width: 768px) {
    .ag-mini-add-row {
        grid-template-columns: 1fr !important;
    }
}

/* Arvore e cross-tab. O app ja tematiza `.e-grid`; sem estas regras a SfGrid de uma tela e a
   TreeGrid/PivotView da tela vizinha saem com tipografias diferentes.

   O recuo apertado vem do MaxEquipa e tem motivo: o tema do Syncfusion reserva um espaco por nivel de
   ancestral MAIS um icone para o proprio no, e numa arvore de tres niveis isso empilha quatro espacos
   antes do texto da folha. */
.e-treegrid {
    border-color: var(--ag-border);
}

.e-treegrid .e-headercell {
    background-color: #F1F5F2;
    color: var(--ag-ink);
    font-weight: 600;
}

.e-treegrid .e-treecolumn-container .e-treecell-child {
    width: 6px;
}

.e-treegrid .e-treecolumn-container .e-treecell-icon {
    width: 2px;
}

.e-treegrid .e-treegridexpand,
.e-treegrid .e-treegridcollapse {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.e-pivotview {
    font-size: .84rem;
}

.e-pivotview .e-columnsheader {
    background: #F1F5F2;
    font-weight: 600;
}

/* `tabular-nums` alinha os digitos em coluna. Num cross-tab e o que permite comparar dois meses de
   relance — sem isso, "111" ocupa menos largura que "999" e a coluna serrilha. */
.e-pivotview .e-cellvalue {
    font-variant-numeric: tabular-nums;
}