/* =============================================================
   CRM Agilidata — complementa o MudBlazor.
   Tokens espelham .claude/skills/agilidata-design/colors_and_type.css.
   Só o que os componentes não cobrem: fontes, login (SSR) e o Kanban.
   ============================================================= */

/* ---------- Fontes ---------- */

/* Bahnschrift/Calibri (self-hosted) saíram de vez — ver comentário completo em agilidata.css.
   Mesmo com peso fixo e font-display: optional, a troca da fonte reserva pra fonte da marca
   no meio do carregamento continuava corrompendo glifos em produção. Fonte do sistema abaixo
   não baixa nada e não troca depois de carregada: sem @font-face, sem o gatilho do bug. */

/* ---------- Tokens da marca ---------- */

:root {
    --ag-primary: #006CB5;
    --ag-primary-hover: #005A97;
    --ag-accent: #00AFEF;
    --ag-ink-950: #0A1A2F;
    --ag-ink-900: #0F2340;
    --ag-ink-600: #425774;
    --ag-ink-400: #8695A8;
    --ag-ink-150: #E4EBF2;
    --ag-ink-050: #F5F8FC;

    --ag-radius-control: 4px;
    --ag-radius-card: 8px;

    --ag-shadow-sm: 0 1px 2px rgba(10, 26, 47, .06);
    --ag-shadow-md: 0 4px 12px rgba(10, 26, 47, .08);

    --ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ag-dur-micro: 150ms;
}

html, body {
    font-family: 'Segoe UI', Aptos, Calibri, system-ui, sans-serif;
}

h1:focus {
    outline: none;
}

/* Cards a 8px; o raio global do MudBlazor (4px) atende os controles. */
.mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border-radius: var(--ag-radius-card);
}

/* Foco em ciano com offset — é onde o acento da marca aparece.
   Só em botões: em campos de formulário o destaque já vem da borda do
   input (agilidata.css), sem envolver o mud-input-control inteiro (que
   inclui o label). */
.mud-button-root:focus-visible {
    outline: 2px solid var(--ag-accent);
    outline-offset: 2px;
}

/* ---------- Overlay de carregamento (conexão inicial + navegação entre páginas) ----------
   Base compartilhada pelos dois overlays de MainLayout (ver comentário lá): conectar o circuito
   pela 1ª vez depois do HTML pré-renderizado, e trocar de página dentro do circuito já conectado.
   Nos dois casos há conteúdo de verdade por baixo (pré-renderizado ou da página anterior) — por
   isso blur, não opaco: comunica "carregando", não "vazio". */
.overlay-navegacao,
.overlay-conexao {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 26, 47, .25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Conexão inicial: sem controle do C# (ver comentário em MainLayout.razor) — CSS puro decide
   quando sumir, então nunca fica preso na tela por mais que o circuito demore/falhe pra
   confirmar interatividade. ~600ms de piso (acima do mínimo de 300ms pedido) e desliga
   pointer-events junto com a opacidade, pra não deixar uma camada invisível bloqueando clique. */
.overlay-conexao {
    opacity: 1;
    pointer-events: auto;
    animation: overlay-conexao-sumir 300ms ease 600ms forwards;
}

@keyframes overlay-conexao-sumir {
    to {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

/* Navegação entre páginas: elemento sempre presente no DOM (ver MainLayout.razor), escondido por
   padrão — mostrar/esconder é só a classe abaixo, alternada via JS no instante do clique (ver
   script em App.razor). Nada de @if do Blazor aqui: precisa aparecer antes de qualquer round-trip
   com o circuito, e um elemento condicional do Blazor só existiria depois de um. */
.overlay-navegacao {
    display: none;
}

.overlay-navegacao.overlay-navegacao-visivel {
    display: flex;
}

.carregamento-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ag-ink-150);
    border-top-color: var(--ag-primary);
    border-radius: 50%;
    animation: carregamento-girar 0.8s linear infinite;
}

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

/* ---------- Marca ---------- */

.appbar-marca {
    height: 26px;
    width: auto;
    display: block;
}

.login-marca {
    max-width: 240px;
    width: 100%;
    height: auto;
}

/* ---------- Login (static SSR, sem componentes interativos) ----------
   Padrão alinhado ao login do MonitorAI Management
   (management.agilidata.com.br/login): mesmo fundo ink-950, cartão claro
   elevado com login-shadow-md, título + subtítulo, botão com ícone da
   Microsoft, linha de suporte e rodapé de copyright fora do cartão. */

/* Bloco chapado de ink profundo: a marca não usa gradiente como recurso de fundo. */
.login-fundo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: var(--ag-ink-950);
}

/* Cartão: sombra md — nunca soma com a elevation do MudPaper (Elevation="0" no componente). */
.login-cartao {
    width: 100%;
    max-width: 480px;
    padding: 40px 60px;
    border-radius: var(--ag-radius-card);
    box-shadow: var(--ag-shadow-md);
}

.login-titulo {
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: var(--ag-ink-950);
    text-align: center;
    margin: 12px 0 4px;
}

.login-subtitulo {
    font-family: inherit;
    font-size: 15px;
    color: var(--ag-ink-600);
    text-align: center;
    margin: 0 0 24px;
}

.login-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--ag-radius-control);
    background: var(--ag-ink-950);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ag-dur-micro) var(--ag-ease);
}

.login-botao:hover {
    /* Ink-950 já é o tom mais escuro do sistema — no hover, clareia para ink-900 em vez de
       escurecer mais (não há tom mais escuro disponível). */
    background: var(--ag-ink-900);
}

.login-botao:active {
    transform: scale(0.98);
    box-shadow: inset 0 2px 4px rgba(10, 26, 47, .2);
}

.login-botao:focus-visible {
    outline: 2px solid var(--ag-accent);
    outline-offset: 2px;
}

.login-botao-icone {
    width: 18px;
    height: 18px;
    flex: none;
    fill: currentColor;
}

.login-suporte {
    font-family: inherit;
    text-align: center;
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--ag-ink-600);
}

.login-suporte a {
    color: var(--ag-primary);
    text-decoration: none;
    transition: color var(--ag-dur-micro) var(--ag-ease);
}

.login-suporte a:hover {
    color: var(--ag-primary-hover);
    text-decoration: underline;
}

.login-copyright {
    font-family: inherit;
    font-size: 12px;
    color: var(--ag-ink-400);
    text-align: center;
    margin: 0;
}

/* ---------- Menu do usuário ---------- */

.menu-sair {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
}

.menu-sair:hover {
    background: var(--mud-palette-action-default-hover);
}

/* ---------- Kanban do funil ---------- */

.funil-quadro {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
}

.funil-coluna {
    flex: 0 0 300px;
    min-height: 200px;
    background: var(--mud-palette-background-gray);
    border-radius: var(--ag-radius-card);
    padding: 12px;
}

.funil-coluna-cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 12px;
    border-bottom: 2px solid var(--cor-estagio, var(--ag-primary));
    margin-bottom: 12px;
}

/*
 * Sem faixa colorida na borda esquerda: o design system trata isso como vício de
 * template B2B. A cor do estágio entra num ponto de status no topo do card.
 */
.funil-card {
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid var(--ag-ink-150);
    border-radius: var(--ag-radius-card);
    padding: 12px 12px 12px 24px;
    margin-bottom: 8px;
    cursor: grab;
    transition: box-shadow var(--ag-dur-micro) var(--ag-ease),
                border-color var(--ag-dur-micro) var(--ag-ease);
}

.funil-card::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-estagio, var(--ag-primary));
}

.funil-card:hover {
    border-color: var(--ag-primary);
    box-shadow: var(--ag-shadow-md);
}

.funil-card-atrasado::before {
    background: var(--mud-palette-error);
}

.funil-card-parada::before {
    background: var(--mud-palette-warning);
}

/* ---------- Barra do funil (dashboard) ----------
   Barra própria em vez de MudProgressLinear: a cor vem do estágio, configurável em tela,
   e o componente pinta a barra por classe de paleta, não pela cor herdada. */

.barra-funil {
    height: 8px;
    border-radius: var(--ag-radius-control);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.barra-funil-preenchida {
    height: 100%;
    border-radius: var(--ag-radius-control);
    background: var(--cor-estagio, var(--ag-primary));
    transition: width 320ms var(--ag-ease);
}

/* ---------- Erro global ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: #FDF5E6;
    color: var(--ag-ink-950);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(10, 26, 47, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 10px 20px 11px 20px;
    position: fixed;
    width: 100%;
    z-index: 1500;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px;
}

/* Detalhe do contrato: cabeçalho da tabela de vigências fixo enquanto a lista rola. */
.vigencias-rolagem .mud-table-container { overflow: visible; }
.vigencias-rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); }

/* Página que ocupa a tela: cartões lado a lado com a mesma altura e rolagem própria quando o conteúdo passa.
   Uso: <div class="pagina-cheia"> título + MudGrid </div>; cada MudPaper leva .card-cheio e o conteúdo rolável vai em .card-rola.
   Em tela estreita os cartões empilham e cada um limita a própria altura. */
@media (min-width: 960px) {
    .pagina-cheia { display: flex; flex-direction: column; height: calc(100vh - 8rem); min-height: 420px; }
    .pagina-cheia > .mud-grid { flex: 1 1 auto; min-height: 0; align-content: stretch; }
    /* Altura definida (e não só "esticada"): sem isso o item cresce com o conteúdo em vez de deixar o cartão rolar. */
    .pagina-cheia > .mud-grid > .mud-grid-item { height: 100%; min-height: 0; }
    .card-cheio { height: 100%; display: flex; flex-direction: column; min-height: 0; }
    .card-cheio > .card-rola { flex: 1 1 auto; min-height: 0; overflow: auto; }
}

@media (max-width: 959.98px) {
    .card-cheio > .card-rola { max-height: 70vh; overflow: auto; }
}