/* ==============================================================
   Soft Toast — componente global de notificação
   Markup em Views/Shared/SoftToast/_SoftToast.cshtml (renderizado pelo _Layout; incluído
   localmente nas 16 telas standalone de autenticação, que não passam pelo _Layout).
   Comportamento em Content/custom/js/soft-toast/soft-toast.js.

   Paleta inteiramente em custom properties — nenhuma cor fora deste bloco :root (critério de
   aceite "identidade visual em tokens"). Os tokens --esg-* abaixo são os nomes já
   documentados em skills/frontend-legacy-design/SKILL.md ("Sistema de cores"); nenhum outro CSS
   do repositório os define hoje — este arquivo é a primeira definição real, para não inventar um
   segundo vocabulário de cor. Os tokens --st-* são específicos deste componente (superfície,
   faixa por severidade, texto).
   ============================================================== */

:root {
    /* Tokens de marca já documentados na skill de design (frontend-legacy-design/SKILL.md). */
    --esg-navy: #2F2951;
    --esg-blue: #009FFA;
    --esg-cyan: #00E7F7;
    --esg-mint: #00E9CF;
    --esg-surface: #F4F6FA;
    --esg-gradient-accent: linear-gradient(135deg, #009FFA 0%, #00E7F7 50%, #00E9CF 100%);

    /* Tokens semânticos do componente — saturação máxima (S=100%) nos quatro.
       Não reaproveitam --esg-mint/--esg-blue: aqueles tokens existem para gráfico e badge, são
       luminosos demais para servir de indicador (davam 1.55:1 e 2.86:1 sobre o cartão, contra os
       3:1 que o WCAG 1.4.11 pede para elemento gráfico não textual) e o mint ficava a 1.02 do
       --esg-cyan, deixando sucesso indistinguível do destaque. Sucesso é verde, não turquesa,
       justamente para não disputar com o ciano da marca.
       Decisão do usuário: cores claras e vivas. São o ponto mais claro que ainda cumpre os 3:1
       sobre o cartão branco (ficam entre 3.01:1 e 3.11:1, sem folga). Sobre a navbar navy — onde
       o vidro deixa o fundo do cartão em ~#DAD8E0 — caem para ~2.1:1 e passam a não cumprir o
       mínimo; foi a troca aceita em favor da vivacidade. Não clarear mais: acima disto a faixa
       deixa de se distinguir do próprio cartão em qualquer fundo.
       A cor nunca é o único sinal: cada tipo tem ícone próprio, que é o que serve a quem não
       distingue as matizes. */
    --st-success: #00A85A;
    --st-info: #1A98FF;
    --st-warning: #E07800;
    --st-danger: #FF5E4D;

    /* Tons translúcidos (mesmas cores acima, alpha .16) para o ícone em círculo tonal. */
    --st-success-tint: rgba(0, 168, 90, 0.16);
    --st-info-tint: rgba(26, 152, 255, 0.16);
    --st-warning-tint: rgba(224, 120, 0, 0.16);
    --st-danger-tint: rgba(255, 94, 77, 0.16);

    --st-text: var(--esg-navy);
    /* Conteúdo do cartão (título e mensagem) em preto suave: o navy da marca puxava para o azul
       e deixava o texto com aparência de link. O navy segue no chrome (ícone de fechar, sombra,
       trilha de progresso), onde o tom de marca é desejado. */
    --st-text-body: #22242A;
    --st-text-muted: #9EA5BD;
    --st-surface: rgba(255, 255, 255, 0.82);
    --st-surface-solid: #ffffff;
    --st-shadow: rgba(47, 41, 81, 0.22);
    --st-shadow-near: rgba(47, 41, 81, 0.10);
    --st-edge: rgba(47, 41, 81, 0.12);
    --st-track: rgba(47, 41, 81, 0.08);
    --st-hover-bg: rgba(47, 41, 81, 0.08);
    --st-radius: 12px;
    --st-gap: 12px;
    --st-width: 380px;
}

/* Container — instância única na página, fixo sobre o conteúdo. Acima do progress-overlay
   (z-index 10500): as duas camadas podem coexistir (ex.: erro durante uma operação em lote). */
.soft-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10600;
    display: flex;
    flex-direction: column;
    gap: var(--st-gap);
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

    /* O container deixa o clique passar para a página; quem interage recupera a captura. O
       indicador de fila entra aqui porque virou botão — sem isto o clique nele nunca chega. */
    .soft-toast > .soft-toast__item,
    .soft-toast > .soft-toast__queue {
        pointer-events: auto;
    }

/* Indicador de fila — "+N", role="status"; renderizado por último no container
   (soft-toast.js → renderQueueIndicator()/insert()), então aparece sempre abaixo da pilha visível
   independente de newestOnTop. */
/* Botão: clicar revela de uma vez tudo o que está na fila. O affordance vem da forma (pílula
   elevada), do cursor e do realce no hover — e não de um rótulo do tipo "ver todas", que exigiria
   um texto novo em todos os idiomas; o leitor de tela já anuncia "botão" pelo elemento. */
.soft-toast__queue {
    align-self: center;
    padding: 5px 14px;
    border: 1px solid var(--st-edge);
    border-radius: 999px;
    background: var(--st-surface-solid);
    box-shadow: 0 4px 12px var(--st-shadow);
    color: var(--st-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

    .soft-toast__queue:hover {
        color: var(--st-text);
        box-shadow: 0 6px 16px var(--st-shadow);
        transform: translateY(-1px);
    }

    .soft-toast__queue:active {
        transform: translateY(0);
    }

    .soft-toast__queue:focus {
        outline: none;
    }

    .soft-toast__queue:focus-visible {
        outline: 2px solid var(--st-info);
        outline-offset: 2px;
        color: var(--st-text);
    }

@media (prefers-reduced-motion: reduce) {
    .soft-toast__queue,
    .soft-toast__queue:hover {
        transition: none;
        transform: none;
    }
}

.soft-toast--top-left {
    top: 20px;
    right: auto;
    left: 20px;
}

.soft-toast--bottom-right {
    top: auto;
    right: 20px;
    bottom: 20px;
}

.soft-toast--bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
}

/* Cartão — superfície de vidro (fundo translúcido + desfoque), com fallback sólido para
   navegador sem suporte a backdrop-filter. */
.soft-toast__item {
    position: relative;
    display: flex;
    /* Centralizado: o ícone tem 32px contra ~18px de uma linha de texto, e a maior parte das
       notificações da plataforma é de uma linha só (mensagem sem título) — alinhar ao topo
       deixava o texto colado no alto com o ícone sobrando embaixo. */
    align-items: center;
    gap: 12px;
    width: var(--st-width);
    max-width: 100%;
    /* Simétrico em cima e embaixo: o par de pixels a mais na base existia para o texto não
       encostar na antiga barra de tempo, que agora virou o anel em volta do fechar. */
    padding: 14px 40px 14px 16px;
    border-radius: var(--st-radius);
    background: var(--st-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* O cartão flutua sobre uma plataforma clara, e branco sobre branco se dissolve. O contorno
       hairline é o que fecha a silhueta contra um card branco — ali a sombra não aparece. A
       sombra rasa assenta a borda; a profunda dá a altura. */
    border: 1px solid var(--st-edge);
    box-shadow: 0 2px 6px var(--st-shadow-near), 0 14px 34px var(--st-shadow);
    overflow: hidden;
    animation: softToastIn 0.25s ease-out;
}

@supports not (backdrop-filter: blur(1px)) {
    .soft-toast__item {
        background: var(--st-surface-solid);
    }
}

/* Cartão alto — com botões de ação ou várias linhas, o ícone centralizado flutuaria no meio,
   longe da primeira linha que ele qualifica; nesses casos ele volta para o topo. Navegador sem
   :has() apenas mantém tudo centralizado, que continua legível. */
.soft-toast__item:has(.soft-toast__actions) {
    align-items: flex-start;
}

/* Saída mais longa que a entrada: expirar é passivo — o cartão some sem o usuário pedir, e um
   corte rápido dá a impressão de que a mensagem "piscou". A entrada continua em 0.25s. */
.soft-toast__item--closing {
    animation: softToastOut 0.26s ease-in forwards;
}

/* Faixa de severidade, ícone tonal e barra de tempo restante herdam a mesma cor de acento —
   só a atribuição abaixo muda por tipo. */
.soft-toast__item--success {
    --st-accent: var(--st-success);
    --st-accent-tint: var(--st-success-tint);
}

.soft-toast__item--error {
    --st-accent: var(--st-danger);
    --st-accent-tint: var(--st-danger-tint);
}

.soft-toast__item--warning {
    --st-accent: var(--st-warning);
    --st-accent-tint: var(--st-warning-tint);
}

.soft-toast__item--info {
    --st-accent: var(--st-info);
    --st-accent-tint: var(--st-info-tint);
}

/* Estado "em andamento" — sem severidade própria: usa o azul de marca (mesmas cores do anel
   duplo global), sem tinta de fundo no círculo para o anel ficar visível sobre transparência. */
.soft-toast__item--loading {
    --st-accent: var(--esg-blue);
    --st-accent-tint: transparent;
}

.soft-toast__stripe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--st-accent);
    /* resolve() troca a classe --tipo no mesmo nó (sem recriar o cartão); a cor desliza em vez
       de saltar entre o azul do "em andamento" e a cor do desfecho final. */
    transition: background-color 0.2s ease;
}

.soft-toast__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* Quadrado arredondado, não círculo: acompanha o raio do próprio cartão (12px) e o dos
       botões de ação, em vez de introduzir uma terceira forma no mesmo componente. */
    border-radius: 9px;
    background: var(--st-accent-tint);
    color: var(--st-accent);
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Anel duplo do estado "em andamento" — mesmo vocabulário visual de .esg-loading__spin
   (Content/custom/css/app-custom.css): dois arcos girando em sentidos opostos, cores de marca.
   Variante própria e escopada aqui porque aquela classe tem 48px fixos e é consumida por
   App.blockUI, pelo modal do GED e pelo preview de anexo — redimensioná-la quebraria os três.
   Dimensionada para caber no círculo de 32px de .soft-toast__icon. */
.soft-toast__spin {
    display: block;
    width: 22px;
    height: 22px;
    position: relative;
}

.soft-toast__spin::before,
.soft-toast__spin::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.soft-toast__spin::before {
    inset: 0;
    border-top-color: var(--esg-blue);
    border-right-color: var(--esg-blue);
    animation: soft-toast-spin 0.9s linear infinite;
}

.soft-toast__spin::after {
    inset: 4px;
    border-top-color: var(--esg-cyan);
    border-right-color: var(--esg-cyan);
    animation: soft-toast-spin 1.3s linear infinite reverse;
}

@keyframes soft-toast-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .soft-toast__spin::before,
    .soft-toast__spin::after {
        animation-duration: 5s;
    }
}

/* Contador de repetições — badge sobre o canto do ícone, mesma cor de acento do
   tipo; só existe a partir da 2ª ocorrência (ver updateCountBadge() em soft-toast.js). Anexado à
   raiz do cartão (.soft-toast__item, já position: relative) — e não a .soft-toast__icon, que é
   aria-hidden — para o contador entrar na árvore de acessibilidade dentro da região
   aria-atomic do cartão. padding do item (14px topo, 40px/16px laterais) posiciona o badge sobre
   o canto superior direito do ícone de 32px, que começa a 16px da borda esquerda. */
.soft-toast__count {
    position: absolute;
    top: 6px;
    left: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--st-accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--st-surface-solid);
}

.soft-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.soft-toast__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--st-text-body);
    margin-bottom: 2px;
}

.soft-toast__message {
    font-size: 13px;
    line-height: 1.45;
    color: var(--st-text-body);
    /* Texto longo, URL ou identificador extenso quebram dentro do cartão — nunca estouram a
       largura da página (critério "texto longo"). white-space preserva quebras
       de linha reais vindas do servidor (mensagem multi-linha). */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-line;
}

/* Mensagem sem título (title é opcional, e boa parte do repositório chama só com a mensagem)
   assume a tipografia do título: sozinha, ela É o texto principal do cartão, e mantê-la no
   corpo secundário deixaria a notificação inteira sem hierarquia. Regra estrutural em vez de
   classe modificadora para acompanhar sozinha o resolve(), que insere e remove o título no
   mesmo cartão. */
.soft-toast__body > .soft-toast__message:first-child {
    font-size: 14px;
    font-weight: 700;
}

/* Ênfase inline vinda do servidor (os Services envolvem nome de tópico/usuário em <strong>).
   Peso declarado em vez do default do navegador porque a mensagem sem título já está em 700 —
   ali o negrito do navegador não se distinguiria do texto em volta. */
.soft-toast__title strong,
.soft-toast__title b,
.soft-toast__message strong,
.soft-toast__message b {
    font-weight: 700;
}

.soft-toast__body > .soft-toast__message:first-child strong,
.soft-toast__body > .soft-toast__message:first-child b {
    font-weight: 800;
}

/* Faixa de ações — até dois botões reais abaixo da mensagem, na ordem de Tab
   anterior ao botão de fechar. flex-wrap cobre o cartão estreito: os botões quebram para uma
   segunda linha em vez de estourar a largura. */
.soft-toast__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.soft-toast__action {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.soft-toast__action--primary {
    background: var(--esg-navy);
    color: #ffffff;
}

    .soft-toast__action--primary:hover {
        filter: brightness(1.15);
    }

.soft-toast__action--quiet {
    background: transparent;
    color: var(--st-text);
    box-shadow: inset 0 0 0 1px var(--st-track);
}

    .soft-toast__action--quiet:hover {
        background-color: var(--st-hover-bg);
    }

.soft-toast__action:focus {
    outline: none;
}

.soft-toast__action:focus-visible {
    outline: 2px solid var(--st-info);
    outline-offset: 1px;
}

.soft-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--st-text-muted);
    font-size: 12px;
    transition: color 0.15s ease;
}

    /* O realce do hover é pintado num pseudo-elemento circular menor que o botão, para caber
       dentro do anel de tempo em vez de encostar nele. O botão em si mantém os 24px de área
       clicável — encolher o alvo para caber no desenho pioraria o acerto do clique. */
    .soft-toast__close::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 50%;
        background-color: transparent;
        transition: background-color 0.15s ease;
    }

    /* Posicionado para pintar acima do ::before — sem isto o realce cobriria o ícone. */
    .soft-toast__close > i {
        position: relative;
    }

    .soft-toast__close:hover {
        color: var(--st-text);
    }

        .soft-toast__close:hover::before {
            background-color: var(--st-hover-bg);
        }

    .soft-toast__close:focus {
        outline: none;
    }

    /* Contorno para dentro (offset negativo): o anel ocupa exatamente o espaço em volta do
       botão, e um contorno para fora se sobreporia a ele. */
    .soft-toast__close:focus-visible {
        outline: 2px solid var(--st-info);
        outline-offset: -2px;
    }

/* Anel de tempo restante — desenhado em volta do botão de fechar, nas mesmas coordenadas dele
   (o botão tem 24px em top/right 8px; o anel tem 28px e recua 2px para envolvê-lo). Fica atrás
   e sem captura de clique: quem recebe o clique é sempre o botão. */
.soft-toast__ring {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    pointer-events: none;
    /* Começa às 12h e corre no sentido horário — sem isto o traço nasceria às 3h. */
    transform: rotate(-90deg);
}

.soft-toast__ring-track {
    fill: none;
    stroke: var(--st-track);
    stroke-width: 2;
}

.soft-toast__ring-bar {
    fill: none;
    /* O gradiente accent é reservado para barra de progresso/badge decorativo (nunca botão) —
       aqui o anel de tempo restante usa a cor de acento do próprio tipo, em opacidade reduzida,
       para não competir visualmente com a faixa de severidade. */
    stroke: var(--st-accent);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.55;
}

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

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

@keyframes softToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .soft-toast__item,
    .soft-toast__item--closing {
        animation: none;
    }

    .soft-toast__ring-bar {
        transition: none !important;
    }
}

@media (max-width: 480px) {
    .soft-toast {
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px);
    }

    .soft-toast__item {
        width: 100%;
    }
}