/* =============================================================
   Agilidata — tokens da marca aplicados ao CRM.
   Espelha .claude/skills/agilidata-design/colors_and_type.css — exceto tipografia: o CRM usa
   fonte do sistema, não Bahnschrift/Calibri self-hosted (ver comentário abaixo). O design
   system continua com as fontes da marca para protótipos/decks, onde este bug não se aplica.
   ============================================================= */

/* Bahnschrift/Calibri (self-hosted, @font-face) saíram de vez: mesmo com peso fixo e
   font-display: optional, a troca (swap) da fonte reserva pra fonte da marca no meio do
   carregamento continuava corrompendo glifos em produção (letras somem, dígitos cortados) —
   já com GPU/driver, extensão de navegador e cache descartados como causa. Fonte do sistema
   (abaixo) não baixa nada, não troca depois de carregada: sem @font-face, sem o carregamento
   assíncrono que disparava o bug, sem a mancha. Custo aceito: perde a tipografia própria da
   marca (Bahnschrift/Calibri) em troca de nunca mais corromper texto. */

:root {
    /* Marca */
    --ag-primary: #006CB5;
    --ag-primary-600: #005A97;
    --ag-primary-700: #00487A;
    --ag-primary-050: #EEF5FB;
    --ag-accent: #00AFEF;
    --ag-accent-050: #E6F7FD;

    /* Ink / neutros (slate frio) */
    --ag-ink-950: #0A1A2F;
    --ag-ink-900: #0F2340;
    --ag-ink-700: #2A4263;
    --ag-ink-600: #425774;
    --ag-ink-400: #8695A8;
    --ag-ink-200: #D1D9E2;
    --ag-ink-150: #E4EBF2;
    --ag-ink-050: #F5F8FC;

    /* Status */
    --ag-success: #1E9E5F;
    --ag-warn: #D98A09;
    --ag-danger: #D7373B;

    /* Tipografia — fonte do sistema, não mais self-hosted (ver comentário no topo do arquivo).
       'Segoe UI'/system-ui já foi tratada aqui como risco de fallback (podia resolver pra
       Segoe UI Variable no Windows 11 e reproduzir o mesmo bug) — mas aquele risco era sobre
       CAIR nela no meio de uma troca de fonte carregada por rede; como fonte primária, direto
       do sistema, não existe @font-face nem carregamento assíncrono, então não existe a troca
       que disparava a corrupção. Display e body convergem na mesma pilha: não há mais
       necessidade de duas fontes distintas. */
    --ag-font-display: 'Segoe UI', Aptos, Calibri, system-ui, sans-serif;
    --ag-font-body: 'Segoe UI', Aptos, Calibri, system-ui, sans-serif;

    /* Sombras — baixas, frias */
    --ag-shadow-sm: 0 1px 2px rgba(10, 26, 47, .06);
    --ag-shadow-md: 0 4px 12px rgba(10, 26, 47, .08);
    --ag-shadow-lg: 0 12px 32px rgba(10, 26, 47, .10);

    /* Motion — fades, nunca bounces */
    --ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ag-dur-micro: 150ms;
    --ag-dur-std: 220ms;
}

/* -------------------------------------------------------------
   Ajustes sobre o MudBlazor
   ------------------------------------------------------------- */

/* Mesma pilha de fonte de --ag-font-body hoje (ver acima) — o tracking negativo é o que ainda
   diferencia os títulos. */
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1 {
    font-family: var(--ag-font-display);
    letter-spacing: -0.01em;
}

/* Sentence case: o design system pede rótulos em caixa de sentença,
   e o MudBlazor sobe tudo para maiúsculas por padrão. */
.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--ag-font-body);
    font-weight: 600;
}

/* Foco: o ciano da marca é o destaque, só na borda do input — o anel de foco nativo do
   navegador desenha um retângulo ao redor do elemento inteiro (maior que a borda do campo),
   então é removido aqui: a borda já indica o foco visualmente. */
.mud-input-outlined-border {
    transition: border-color var(--ag-dur-micro) var(--ag-ease);
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--ag-accent) !important;
    border-width: 2px !important;
}

.mud-input-outlined :focus,
.mud-input-outlined :focus-visible {
    outline: none;
}

/* Cards: hairline OU sombra — nunca os dois. */
.mud-paper {
    border-radius: 8px;
}

/* Eyebrow / overline das seções */
.mud-typography-overline {
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--ag-ink-400);
}

/* No MudBlazor, Color.Secondary pinta com a cor secundária da marca — aqui, o ciano.
   No CRM esse parâmetro marca texto de apoio, e o design system reserva o ciano para
   destaque pontual. Texto e ícones secundários seguem o token de texto do tema, que
   já acompanha claro/escuro. Chips e avatares mantêm o ciano. */
.mud-typography.mud-secondary-text,
.mud-icon-root.mud-secondary-text {
    color: var(--mud-palette-text-secondary);
}

/* Menu de navegação (appbar + drawer): fundo ink profundo fixo, independente do
   toggle claro/escuro. Divisores e o item ativo do tema claro partem de tokens
   claros (feitos para fundo branco) e ficam quase invisíveis aqui — ajustados
   à parte, só dentro do drawer. */
.mud-drawer .mud-divider {
    background-color: rgba(255, 255, 255, .12);
}

.mud-drawer .mud-nav-link.active {
    color: var(--ag-accent);
    border-color: var(--ag-accent);
}

.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
}

/* Coluna "Ações" das tabelas: os MudIconButton nunca quebram para a linha de baixo —
   a coluna cresce (table-layout auto) em vez de cortar os botões. */
.mud-table td[data-label="Ações"] {
    white-space: nowrap;
    text-align: right;
}

/* Menu lateral sem rolagem própria: no desktop o drawer entra no fluxo da página (grid) e
   cresce com os itens. Se o menu for mais alto que a tela, a página inteira rola (menu junto).
   Abaixo de 960px o drawer segue o comportamento padrão do MudBlazor (sobreposto). */
@media (min-width: 960px) {
    .mud-layout {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .mud-layout > .mud-drawer {
        position: relative !important;
        grid-column: 1;
        grid-row: 1;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        overflow: visible !important;
        margin-top: var(--mud-appbar-height);
    }

    .mud-layout > .mud-drawer .mud-drawer-content {
        height: auto !important;
        max-height: none !important;
        flex: none;
        overflow: visible !important;
    }

    .mud-layout > .mud-drawer.mud-drawer--closed {
        display: none;
    }

    .mud-layout > .mud-main-content {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0 !important;
    }
}