/* SisÁgua Controle — estilos da aplicação sobre os tokens da marca (tokens.css).
   Identidade: institucional + ambiental + moderna. Ver design_handoff_identidade_visual/README.md. */

html, body {
    font-family: var(--sac-font-body);
    background: var(--sac-slate-50);
    color: var(--sac-ink);
}

/* O Fluent lê a fonte do corpo por esta variável */
:root {
    --body-font: var(--sac-font-body);
}

h1, h2, h3, h4, h5 {
    font-family: var(--sac-font-display);
    letter-spacing: -0.02em;
}

a, .btn-link {
    color: var(--sac-blue-700);
}

    a:hover, .btn-link:hover {
        color: var(--sac-green-700);
    }

/* ==================================================== splash de arranque */

/* O app roda sem prerender (ver App.razor), então a página chega vazia e nada
   pinta até o circuito interativo subir. Este bloco cobre esse intervalo e é
   retirado pelo MainLayout no primeiro render, via window.sacOcultarSplash.

   As medidas repetem as do chrome real para o app entrar no lugar em vez de
   saltar: 58px de topo (.sac-header) e 263px de lateral — os 246 do
   FluentNavMenu mais os 8 de padding de cada lado e 1 de borda (.sac-nav). */
#sac-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: var(--sac-slate-50);
    transition: opacity .25s ease;
}

.sac-splash--saindo {
    opacity: 0;
    pointer-events: none;
}

.sac-splash-topo {
    flex: none;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: var(--sac-gradient-ui);
}

.sac-splash-corpo {
    flex: 1;
    min-height: 0;
    display: flex;
}

.sac-splash-nav {
    flex: none;
    width: 263px;
    background: #fff;
    border-right: 1px solid var(--sac-border);
}

.sac-splash-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 24px;
}

/* Barra indeterminada: não há progresso real a informar, só sinal de vida. */
.sac-splash-pista {
    width: 168px;
    height: 3px;
    border-radius: var(--sac-radius-pill);
    background: var(--sac-slate-100);
    overflow: hidden;
    animation: sac-splash-some 1ms linear 15s forwards;
}

    .sac-splash-pista span {
        display: block;
        width: 40%;
        height: 100%;
        border-radius: inherit;
        background: var(--sac-gradient-ui);
        animation: sac-splash-desliza 1.15s ease-in-out infinite;
    }

/* Falha de arranque: sem prerender não há conteúdo por baixo, então um circuito que
   nunca sobe deixaria a tela parada para sempre. Passados 15s o splash assume o erro
   e oferece a recarga. Em CSS, e não em timer de JS, para valer também quando o splash
   entra por navegação aprimorada (login → "/"), caso em que os <script> do corpo do
   documento não são reexecutados. */
.sac-splash-falha {
    margin: 0;
    font-size: 14px;
    color: var(--sac-slate-500);
    text-align: center;
    opacity: 0;
    animation: sac-splash-revela 1ms linear 15s forwards;
}

@keyframes sac-splash-desliza {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

@keyframes sac-splash-revela {
    to { opacity: 1; }
}

@keyframes sac-splash-some {
    to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .sac-splash-pista span {
        animation-duration: 2.4s;
    }
}

/* =========================================================== header do app */

/* FluentHeader renderiza como <header class="header"> — usamos classe própria.
   O degradê é o mesmo do topo do cartão de login: azul → verde-água → verde. */
.sac-header,
header.sac-header {
    background: var(--sac-gradient-ui) !important;
    color: #fff;
    height: 58px;
    padding: 0 20px;
}

.sac-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

    /* O símbolo é o próprio degradê da marca: sobre a barra colorida ele some.
       A plaquinha translúcida (mesma do topo do cartão de login) o destaca. */
    .sac-logo img {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: block;
        background: rgba(255, 255, 255, .18);
        padding: 3px;
        box-sizing: content-box;
    }

.sac-wordmark {
    font-family: var(--sac-font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
}

    .sac-wordmark .controle {
        color: var(--sac-green-300);
    }

/* Controles do canto direito: sobre o verde da barra o branco precisa de mais
   opacidade do que precisava sobre o fundo preto. */
.sac-header-user {
    color: rgba(255, 255, 255, .9);
    font-size: 13.5px;
    text-decoration: none;
}

/* Empresa do usuário logado (claim de login; super admin não exibe nada). */
.sac-header-empresa {
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

    .sac-header-user:hover {
        color: #fff;
    }

/* O menu lateral (sidebar) vive em Components/Layout/NavMenu.razor.css (scoped). */

/* =========================================================== contêiner de página */

/* Enquadra o conteúdo em monitores largos (1920+): largura máxima centralizada.
   Todos os blocos estruturais internos esticam até esta moldura. */
.sac-conteudo {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 1.25rem 1.75rem 2rem;
    box-sizing: border-box;
}

/* Filhos do FluentStack vertical alinham à esquerda com largura de conteúdo;
   os blocos estruturais do app devem sempre ocupar a largura da moldura. */
.sac-conteudo > .stack-vertical,
.sac-conteudo fluent-stack {
    width: 100%;
}

/* =========================================================== título e texto */

.sac-page-title {
    font-family: var(--sac-font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sac-ink);
    margin: 0;
}

.sac-mono {
    font-family: var(--sac-font-mono);
    font-size: 12.5px;
}

.sac-mono--verde {
    font-family: var(--sac-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sac-green-700);
}

.sac-mono--azul {
    font-family: var(--sac-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sac-blue-700);
}

fluent-breadcrumb {
    font-family: var(--sac-font-mono);
    font-size: 12px;
}

/* Um valor comprido não pode esticar o formulário que contém o select. O texto do
   fluent-select não quebra, então a largura mínima dele vira o texto inteiro; como
   item de flex (min-width: auto por padrão) ele se recusa a encolher e empurra o
   contêiner — era o que deformava o diálogo "Novo envio semestral" com razão social
   longa, mesmo com o Width="520px" declarado no DialogParameters. Pior com nomes sem
   espaço, em que min-content é a palavra inteira.
   min-width: 0 devolve o direito de encolher; o corte com reticências acontece no
   part do valor selecionado, dentro do shadow DOM do componente. */
fluent-select {
    min-width: 0;
    max-width: 100%;
}

    fluent-select::part(control) {
        overflow: hidden;
    }

    fluent-select::part(selected-value) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* =========================================================== cards e grades */

.sac-card {
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: 14px;
    box-shadow: var(--sac-shadow-sm);
    overflow: hidden;
    width: 100%;
    /* gancho do próprio DataGrid para a cor do hover das células */
    --datagrid-hover-color: var(--sac-slate-50);
}

/* Card de filtros: os listboxes dos selects precisam abrir POR CIMA do conteúdo abaixo,
   sem serem cortados pelo overflow do card nem empurrarem a altura do quadro. */
.sac-card--filtros {
    overflow: visible;
    position: relative;
    z-index: 20;
}

    .sac-card--filtros fluent-select::part(listbox) {
        position: absolute;
        z-index: 30;
    }

    .sac-card table {
        width: 100%;
        border-collapse: collapse;
    }

    /* Larguras estáveis via <colgroup>: sem o layout fixo, o auto-layout redistribui
       as colunas a cada mudança de conteúdo (troca de abrangência, pill que aparece,
       data que preenche) e o quadro "pula". Conteúdo maior que a coluna vira "…". */
    .sac-card table.sac-tab-fixa {
        table-layout: fixed;
    }

        .sac-card table.sac-tab-fixa th,
        .sac-card table.sac-tab-fixa td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .sac-card thead th {
        background: var(--sac-slate-50);
        font-family: var(--sac-font-mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--sac-slate-500);
        text-align: left;
        padding: 10px 20px;
        border-bottom: 1px solid var(--sac-slate-100);
        align-content: center;
    }

        /* O .col-title do DataGrid traz padding próprio (6px 16px) que somava ao do th:
           36px de recuo de cada lado comiam 32px de cada coluna — daí "LAU…" e "ANÁ…" —
           e ainda deixavam o cabeçalho 16px mais recuado que o corpo. */
        .sac-card thead th .col-title {
            padding: 0;
        }

        /* botão de ordenação do FluentDataGrid herda o estilo do cabeçalho */
        .sac-card thead th button,
        .sac-card thead th fluent-button,
        .sac-card thead th fluent-button::part(control) {
            font: inherit;
            font-family: inherit;
            text-transform: inherit;
            letter-spacing: inherit;
            color: inherit;
            background: transparent;
            border: none;
            padding: 0;
        }

    /* o DataGrid fixa altura de linha em 32px e esconde o excedente — libera para o
       conteúdo (pills têm ~24px + padding) e mantém elipse só no texto longo */
    .sac-card table tr,
    .sac-card table td,
    .sac-card table th {
        height: auto !important;
    }

    /* Com GridTemplateColumns o DataGrid vira display:grid e o <tr> passa a
       display:contents — a linha deixa de ter caixa, e fundo e borda passam a ser
       pintados célula a célula. Com o align-items:center do Fluent cada célula fica
       só com a altura do próprio conteúdo, então a faixa de hover saía escalonada
       (a do pill de status e a do botão de excluir sobravam para fora da linha).
       Esticando, toda célula assume a altura da linha e a faixa fica reta. */
    .sac-card table.fluent-data-grid {
        align-items: stretch;
    }

    .sac-card tbody td {
        padding: 13px 20px;
        border-bottom: 1px solid var(--sac-slate-100);
        font-size: 13.5px;
        color: var(--sac-slate-700);
        overflow: visible;
        vertical-align: middle;
        /* célula esticada é bloco, não table-cell: quem centraliza é o align-content */
        align-content: center;
        line-height: 1.35;
    }

    .sac-card tbody tr:last-child td {
        border-bottom: none;
    }

    /* o realce entra na célula: sem caixa no <tr>, pintar a linha não surte efeito */
    .sac-card tbody tr:hover td:not(.empty-content-cell) {
        background: var(--sac-slate-50);
    }

.sac-cel-titulo {
    font-weight: 600;
    color: var(--sac-ink);
}

/* card de conteúdo genérico (dados do cliente, integração etc.) */
fluent-card {
    border-radius: 14px !important;
    border: 1px solid var(--sac-border);
    box-shadow: var(--sac-shadow-sm);
}

/* =========================================================== pills de status */

.sac-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--sac-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.sac-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.sac-pill--ok {
    background: var(--sac-green-100);
    color: var(--sac-green-900);
}

    .sac-pill--ok .sac-pill-dot {
        background: var(--sac-green-500);
    }

.sac-pill--off {
    background: #F3E3D2;
    color: #8A5A17;
}

    .sac-pill--off .sac-pill-dot {
        background: var(--sac-warning);
    }

.sac-pill--info {
    background: var(--sac-blue-100);
    color: var(--sac-blue-900);
}

    .sac-pill--info .sac-pill-dot {
        background: var(--sac-blue-500);
    }

.sac-pill--neutro {
    background: var(--sac-slate-100);
    color: var(--sac-slate-700);
}

    .sac-pill--neutro .sac-pill-dot {
        background: var(--sac-slate-300);
    }

.sac-pill--danger {
    background: #F8DEE0;
    color: #7A1E26;
}

    .sac-pill--danger .sac-pill-dot {
        background: var(--sac-danger);
    }

/* =========================================================== botões e inputs */

/* Botão de ação principal do Fluent: mesmo degradê da barra superior.
   O ::part(control) do Fluent traz background e borda próprios — sobrescrevemos
   os três estados, senão o hover volta ao accent chapado. */
fluent-button[appearance="accent"]::part(control) {
    border-radius: 9px;
    box-shadow: var(--sac-shadow-brand);
    background: var(--sac-gradient-ui);
    border-color: transparent;
    color: #fff;
}

fluent-button[appearance="accent"]:hover::part(control) {
    background: var(--sac-gradient-ui-hover);
    border-color: transparent;
    color: #fff;
}

fluent-button[appearance="accent"]:active::part(control) {
    background: var(--sac-gradient-ui-hover);
    box-shadow: none;
}

fluent-button[appearance="accent"][disabled]::part(control) {
    background: var(--sac-slate-200);
    color: var(--sac-slate-500);
    box-shadow: none;
}

fluent-search::part(root),
fluent-text-field::part(root) {
    border-radius: 9px;
}

/* ================================================= login e conta (SSR) */

.sac-login-envelope {
    min-height: calc(100dvh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
}

.sac-login-card {
    width: 380px;
    max-width: 100%;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--sac-border);
    box-shadow: var(--sac-shadow-md);
    overflow: hidden;
}

.sac-login-topo {
    background: var(--sac-gradient);
    padding: 26px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sac-login-topo img {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: rgba(255, 255, 255, .16);
        padding: 4px;
        box-sizing: content-box;
    }

    .sac-login-topo .sac-wordmark {
        font-size: 19px;
    }

.sac-login-corpo {
    padding: 24px;
}

    .sac-login-corpo h1 {
        font-family: var(--sac-font-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin: 0 0 16px;
    }

    .sac-login-corpo label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--sac-slate-500);
    }

    .sac-login-corpo .form-control,
    .sac-login-corpo input[type="email"],
    .sac-login-corpo input[type="password"] {
        border-radius: 9px;
        background: var(--sac-slate-50);
        border: 1px solid var(--sac-slate-200);
        font-family: var(--sac-font-body);
        font-size: 14px;
        padding: 10px 12px;
        box-shadow: none;
    }

        .sac-login-corpo .form-control:focus,
        .sac-login-corpo input:focus {
            outline: none;
            border-color: var(--sac-teal-700);
            box-shadow: 0 0 0 1px var(--sac-teal-700);
            background: #fff;
        }

.sac-btn-primario {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--sac-gradient-ui);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 16px;
    font-family: var(--sac-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--sac-shadow-brand);
    transition: background .15s ease;
}

    .sac-btn-primario:hover {
        background: var(--sac-gradient-ui-hover);
        color: #fff;
        text-decoration: none;
    }

.sac-login-links {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

    .sac-login-links a {
        color: var(--sac-blue-700);
        text-decoration: none;
    }

        .sac-login-links a:hover {
            color: var(--sac-green-700);
            text-decoration: underline;
        }

/* Apoio das demais telas de conta (recuperação de senha e confirmações), que
   reaproveitam o cartão do login. */

.sac-login-corpo .sac-login-texto {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sac-slate-500);
    margin: -6px 0 16px;
}

.sac-login-corpo .sac-login-dica {
    font-size: 12px;
    line-height: 1.45;
    color: var(--sac-slate-500);
    margin: 6px 0 0;
}

/* Selo redondo das telas de estado (e-mail enviado, senha alterada, link inválido) */
.sac-login-selo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--sac-blue-700);
    background: var(--sac-blue-100);
}

    .sac-login-selo.is-sucesso {
        color: var(--sac-green-700);
        background: var(--sac-green-100);
    }

    .sac-login-selo.is-alerta {
        color: var(--sac-danger);
        background: #FBE4E6;
    }

    .sac-login-selo svg {
        width: 24px;
        height: 24px;
    }

.sac-btn-secundario {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    color: var(--sac-blue-700);
    border: 1px solid var(--sac-slate-200);
    border-radius: 9px;
    padding: 10px 16px;
    font-family: var(--sac-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .sac-btn-secundario:hover {
        background: var(--sac-slate-50);
        border-color: var(--sac-slate-300);
        color: var(--sac-blue-900);
        text-decoration: none;
    }

/* Alertas e validação do Identity dentro do cartão (o padrão do Bootstrap
   destoa da tipografia da marca) */
.sac-login-corpo .alert {
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.sac-login-corpo .alert-success {
    color: var(--sac-green-900);
    background: var(--sac-green-100);
    border-color: #BDE5D5;
}

.sac-login-corpo .alert-danger {
    color: #7E1F27;
    background: #FBE4E6;
    border-color: #F3C4C8;
}

.sac-login-corpo .validation-message {
    display: block;
    font-size: 12.5px;
    margin-top: 4px;
}

.sac-login-corpo .validation-errors {
    font-size: 12.5px;
    margin: 0 0 12px;
    padding-left: 18px;
}

/* =========================================================== herdados do template */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid var(--sac-danger);
}

.validation-message {
    color: var(--sac-danger);
    font-size: 12.5px;
}

.blazor-error-boundary {
    background: var(--sac-danger);
    padding: 1rem;
    color: white;
    border-radius: var(--sac-radius-sm);
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro.";
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--sac-slate-300);
}