/* Ajustes do gateway sobre o dashboard.css do N4STiAgent.
   Carregado DEPOIS dele, entao vence nos pontos em que diverge. */

/* Nenhum link sublinhado no painel — nem no hover. */
.n4-shell a,
.n4-shell a:hover,
.n4-shell a:focus,
.n4-shell .breadcrumb a,
.n4-shell .breadcrumb a:hover,
.n4-shell .btn-link,
.n4-shell .btn-link:hover {
    text-decoration: none;
}

/* Alinhamento de formulario em linha: o texto de ajuda de um campo empurrava
   o botao para baixo quando ocupava duas linhas e o vizinho, uma. Reservar a
   altura do form-text mantem a base dos controles na mesma linha. */
.n4-form-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 20px;
    align-items: start;
}

.n4-form-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

/* Preview do logo atual. */
.n4-logo-preview {
    background: #0c1622;
    border: 1px solid var(--n4-border);
    border-radius: 8px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
}

.n4-logo-preview img {
    max-height: 40px;
    max-width: 180px;
    display: block;
}

/* --------------------------------------------------------------------------
   Toasts — substituem a faixa de alerta, que empurrava o conteudo para baixo
   e fazia a tela "pular" a cada acao.
   -------------------------------------------------------------------------- */
.n4-toasts {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 36px));
    pointer-events: none;
}

.n4-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid var(--n4-border);
    border-left-width: 4px;
    background: rgba(12, 22, 34, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    color: var(--n4-text);
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .2s ease, transform .2s ease;
}

.n4-toast.is-open {
    opacity: 1;
    transform: translateX(0);
}

.n4-toast > .bi { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.n4-toast-msg { flex: 1; word-break: break-word; }

.n4-toast-fechar {
    background: none;
    border: 0;
    color: var(--n4-text-muted);
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    flex-shrink: 0;
}

.n4-toast-fechar:hover { color: var(--n4-text); }

.n4-toast-ok     { border-left-color: #10b981; }
.n4-toast-ok     > .bi { color: #10b981; }
.n4-toast-erro   { border-left-color: #ef4444; }
.n4-toast-erro   > .bi { color: #ef4444; }
.n4-toast-alerta { border-left-color: #f59e0b; }
.n4-toast-alerta > .bi { color: #f59e0b; }
.n4-toast-info   { border-left-color: var(--n4-blue-bright); }
.n4-toast-info   > .bi { color: var(--n4-blue-bright); }

@media (max-width: 480px) {
    .n4-toasts { top: 10px; right: 10px; left: 10px; max-width: none; }
}

/* KPI que acabou de mudar: um piscar curto para o olho perceber sozinho. */
.n4-piscou {
    animation: n4Piscou .9s ease;
}

@keyframes n4Piscou {
    0%   { color: var(--n4-blue-bright); transform: scale(1.12); }
    100% { color: inherit; transform: scale(1); }
}

/* Navegacao parcial: um respiro visual enquanto o conteudo troca. */
.n4-carregando .n4-content { opacity: .55; transition: opacity .12s ease; }

/* Spinner de carregamento.
   So escurecer a tela nao diz NADA: quem clicou fica sem saber se o clique
   pegou, se travou ou se ja acabou. O giro responde essa pergunta.

   Aparece com 250ms de atraso (n4-surgir) de proposito: navegacao entre telas
   costuma terminar antes disso, e um spinner piscando a cada clique polui mais
   do que informa. Ele so aparece quando a espera de fato existe. */
.n4-carregando .n4-content::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--n4-border);
    border-top-color: var(--n4-blue-bright);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--n4-blue-glow);
    animation: n4-girar .7s linear infinite, n4-surgir .18s ease .25s both;
    pointer-events: none;
    z-index: 1090;
}

@keyframes n4-girar { to { transform: rotate(360deg); } }
@keyframes n4-surgir { from { opacity: 0; } to { opacity: 1; } }

/* Quem pediu menos animacao no sistema nao ganha um disco girando na cara. */
@media (prefers-reduced-motion: reduce) {
    .n4-carregando .n4-content::after {
        animation: n4-surgir .18s ease .25s both;
        border-top-color: var(--n4-blue-bright);
    }
}

/* Botao de mostrar senha dentro do campo. */
.n4-senha-olho {
    border: 1px solid var(--n4-border);
    border-left: 0;
    background: rgba(0, 0, 0, .25);
    color: var(--n4-text-muted);
}

.n4-senha-olho:hover { color: var(--n4-text); }

/* Segredo revelado: mesma cara do bloco de chave nova. */
.segredo {
    background: #060a10;
    border: 1px solid var(--n4-border);
    color: #7ee7c7;
    padding: .75rem;
    border-radius: .375rem;
    word-break: break-all;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .8125rem;
}