/* =====================================================================================
   Network Watchdog — design system do portal
   Tokens, layout com menu retrátil, componentes (cabeçalho, indicadores, cartões,
   tabelas, pills de status) e telas de conta. Sem fontes/recursos externos (CSP estrita).
   ===================================================================================== */

:root {
    --nw-fundo: #f3f5fb;
    --nw-superficie: #ffffff;
    --nw-superficie-2: #f8fafc;
    --nw-borda: #e5e8f1;
    --nw-texto: #0f172a;
    --nw-suave: #64748b;
    --nw-primaria: #4f46e5;
    --nw-primaria-escura: #3730a3;
    --nw-destaque: #0ea5e9;

    --nw-grad-primaria: linear-gradient(135deg, #4338ca 0%, #6366f1 48%, #0ea5e9 100%);
    --nw-grad-lateral: linear-gradient(180deg, #0a0f24 0%, #111a3e 55%, #1e1b4b 100%);
    --nw-grad-sucesso: linear-gradient(135deg, #059669, #34d399);
    --nw-grad-perigo: linear-gradient(135deg, #dc2626, #fb923c);
    --nw-grad-alerta: linear-gradient(135deg, #d97706, #fbbf24);
    --nw-grad-neutro: linear-gradient(135deg, #475569, #94a3b8);

    --nw-raio: 14px;
    --nw-raio-sm: 10px;
    --nw-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --nw-sombra-forte: 0 18px 40px rgba(30, 27, 75, .18);

    --nw-menu-recolhido: 76px;
    --nw-menu-expandido: 264px;
}

html, body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: var(--nw-fundo);
    color: var(--nw-texto);
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }
a { color: var(--nw-primaria); }
a:hover { color: var(--nw-primaria-escura); }

/* ---------- Layout e menu retrátil ---------- */
.menu-estado { position: absolute; opacity: 0; pointer-events: none; }

.barra-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 1030;
    width: var(--nw-menu-recolhido);
    display: flex; flex-direction: column;
    background: var(--nw-grad-lateral);
    color: #cbd5e1;
    overflow: hidden;
    transition: width .22s ease, box-shadow .22s ease, transform .22s ease;
}
.barra-lateral::before {
    content: ""; position: absolute; inset: -40% -60% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 65%);
    pointer-events: none;
}
.barra-lateral:hover { width: var(--nw-menu-expandido); box-shadow: var(--nw-sombra-forte); }
#menu-fixo:checked ~ .barra-lateral { width: var(--nw-menu-expandido); box-shadow: none; }

.rotulo { white-space: nowrap; opacity: 0; transition: opacity .15s ease; }
.barra-lateral:hover .rotulo, #menu-fixo:checked ~ .barra-lateral .rotulo { opacity: 1; }

.menu-marca { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; position: relative; }
.menu-logo {
    flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--nw-grad-primaria); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, .45);
}
.menu-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.menu-marca-texto strong { color: #fff; font-size: .98rem; }
.menu-marca-texto small { color: #94a3b8; font-size: .72rem; }

.menu-itens { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; flex: 1; position: relative; }
.menu-secao { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; padding: 14px 10px 4px; }
.menu-link {
    display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; border-radius: 12px;
    color: #cbd5e1; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.menu-link .icone { flex: 0 0 22px; }
.menu-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(99, 102, 241, .55), rgba(14, 165, 233, .25));
    box-shadow: inset 3px 0 0 #818cf8;
}

.menu-fixar {
    display: flex; align-items: center; gap: 14px; margin: 10px 14px 16px; height: 40px; padding: 0 13px;
    border-radius: 12px; color: #94a3b8; cursor: pointer; position: relative;
}
.menu-fixar:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#menu-fixo:checked ~ .barra-lateral .menu-fixar { color: #a5b4fc; }

.area-principal { margin-left: var(--nw-menu-recolhido); min-height: 100vh; transition: margin-left .22s ease; }
#menu-fixo:checked ~ .area-principal { margin-left: var(--nw-menu-expandido); }

.barra-topo {
    position: sticky; top: 0; z-index: 1020; height: 64px;
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 28px;
    background: rgba(243, 245, 251, .82); backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(229, 232, 241, .8);
}
.barra-topo-marca { display: none; font-weight: 700; margin-right: auto; }
.botao-icone {
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--nw-borda); background: var(--nw-superficie);
    display: inline-grid; place-items: center; color: var(--nw-suave); cursor: pointer; transition: all .15s ease;
}
.botao-icone:hover { color: var(--nw-primaria); border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(79, 70, 229, .15); }
.botao-menu-movel { display: none; margin-right: 4px; }

.usuario-chip { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--nw-superficie); border: 1px solid var(--nw-borda); }
.usuario-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--nw-grad-primaria); color: #fff; font-weight: 700; font-size: .8rem;
}
.usuario-dados { display: flex; flex-direction: column; line-height: 1.1; }
.usuario-nome { font-weight: 600; font-size: .85rem; }
.usuario-papel { color: var(--nw-suave); font-size: .72rem; }

.conteudo { padding: 24px 28px 40px; max-width: 1440px; }

.menu-sombra { display: none; }

@media (max-width: 767.98px) {
    .barra-lateral { width: var(--nw-menu-expandido); transform: translateX(-100%); }
    .barra-lateral .rotulo { opacity: 1; }
    #menu-movel:checked ~ .barra-lateral { transform: none; box-shadow: var(--nw-sombra-forte); }
    #menu-movel:checked ~ .menu-sombra { display: block; position: fixed; inset: 0; z-index: 1025; background: rgba(15, 23, 42, .45); }
    .area-principal, #menu-fixo:checked ~ .area-principal { margin-left: 0; }
    .menu-fixar { display: none; }
    .botao-menu-movel { display: inline-grid; }
    .barra-topo { padding: 0 16px; }
    .barra-topo-marca { display: block; }
    .usuario-dados { display: none; }
    .usuario-chip { padding: 4px; }
    .conteudo { padding: 16px; }
}

/* ---------- Cabeçalho de página ---------- */
.cabecalho-pagina {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px 26px; margin-bottom: 22px; border-radius: 18px; color: #fff;
    background: var(--nw-grad-primaria); box-shadow: var(--nw-sombra-forte);
}
.cabecalho-pagina::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none;
}
.cabecalho-pagina-texto { display: flex; align-items: center; gap: 16px; position: relative; }
.cabecalho-pagina-icone {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
}
.cabecalho-pagina h1 { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cabecalho-pagina p { margin: 2px 0 0; color: rgba(255, 255, 255, .82); font-size: .9rem; max-width: 720px; }
.cabecalho-pagina-acoes { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabecalho-pagina .form-select, .cabecalho-pagina .form-control { background-color: rgba(255, 255, 255, .95); border: 0; }
.cabecalho-pagina .texto-claro { color: rgba(255, 255, 255, .85); font-size: .8rem; }

/* ---------- Indicadores ---------- */
.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.indicador {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--nw-raio);
    background: var(--nw-superficie); border: 1px solid var(--nw-borda); box-shadow: var(--nw-sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.indicador:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .09); }
.indicador-icone { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: 0 0 46px; }
.indicador-primario .indicador-icone { background: var(--nw-grad-primaria); box-shadow: 0 6px 16px rgba(79, 70, 229, .3); }
.indicador-sucesso .indicador-icone { background: var(--nw-grad-sucesso); box-shadow: 0 6px 16px rgba(5, 150, 105, .28); }
.indicador-perigo .indicador-icone { background: var(--nw-grad-perigo); box-shadow: 0 6px 16px rgba(220, 38, 38, .28); }
.indicador-alerta .indicador-icone { background: var(--nw-grad-alerta); box-shadow: 0 6px 16px rgba(217, 119, 6, .28); }
.indicador-neutro .indicador-icone { background: var(--nw-grad-neutro); box-shadow: 0 6px 16px rgba(71, 85, 105, .25); }
.indicador-valor { font-size: 1.7rem; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.indicador-rotulo { color: var(--nw-suave); font-size: .8rem; margin-top: 4px; }

/* ---------- Cartões ---------- */
.cartao { background: var(--nw-superficie); border: 1px solid var(--nw-borda); border-radius: var(--nw-raio); box-shadow: var(--nw-sombra); margin-bottom: 18px; }
.cartao-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--nw-borda); }
.cartao-titulo { display: flex; align-items: center; gap: 10px; font-weight: 650; margin: 0; font-size: 1rem; }
.cartao-titulo .icone { color: var(--nw-primaria); }
.cartao-subtitulo { color: var(--nw-suave); font-size: .82rem; margin: 2px 0 0; }
.cartao-corpo { padding: 18px 20px; }

/* ---------- Tabelas ---------- */
.tabela-moderna { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.tabela-moderna thead th {
    background: var(--nw-superficie-2); color: var(--nw-suave); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; padding: 10px 16px; border-bottom: 1px solid var(--nw-borda); white-space: nowrap;
}
.tabela-moderna tbody td { padding: 12px 16px; border-bottom: 1px solid #eef1f6; vertical-align: middle; font-size: .9rem; }
.tabela-moderna tbody tr:last-child td { border-bottom: 0; }
.tabela-moderna tbody tr { transition: background .12s ease; }
.tabela-moderna tbody tr:hover { background: #f8f9ff; }
.tabela-moderna .secundario { color: var(--nw-suave); font-size: .78rem; }
.tabela-moderna tr.linha-inativa td { color: #94a3b8; }
/* Linha aberta pelo botão "Ver chave": a chave aparece logo abaixo da licença, não no topo da página */
.tabela-moderna tr.linha-chave td { background: #f8fafc; border-top: 0; }

/* ---------- Pills de status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-sucesso { color: #047857; background: #d1fae5; }
.pill-perigo { color: #b91c1c; background: #fee2e2; }
.pill-alerta { color: #b45309; background: #fef3c7; }
.pill-neutro { color: #475569; background: #e2e8f0; }
.pill-info { color: #4338ca; background: #e0e7ff; }
.pill-escuro { color: #e2e8f0; background: #334155; }
.pill-pulso::before { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: nw-pulso 1.8s infinite; }
@keyframes nw-pulso { 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .pill-pulso::before { animation: none; } .indicador:hover { transform: none; } }

/* ---------- Botões e formulários (Bootstrap refinado) ---------- */
.btn { border-radius: var(--nw-raio-sm); font-weight: 550; }
.btn-primary {
    color: #fff; border: 0; background: var(--nw-grad-primaria); background-size: 140% 140%;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .28); transition: background-position .3s ease, box-shadow .2s ease, transform .1s ease;
}
.btn-primary:hover, .btn-primary:focus { color: #fff; background-position: 100% 0; box-shadow: 0 10px 22px rgba(79, 70, 229, .36); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: #a5b4fc; box-shadow: none; }
.btn-claro { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); }
.btn-claro:hover { color: #fff; background: rgba(255, 255, 255, .26); }
.form-control, .form-select { border-radius: var(--nw-raio-sm); border-color: #dbe0ea; padding: .55rem .8rem; }
.form-control-sm, .form-select-sm { padding: .3rem .6rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #818cf8; box-shadow: 0 0 0 .22rem rgba(99, 102, 241, .18); }
.form-check-input:checked { background-color: var(--nw-primaria); border-color: var(--nw-primaria); }
.form-label { font-size: .82rem; font-weight: 600; color: #334155; margin-bottom: .3rem; }
.form-text { color: var(--nw-suave); }
.alert { border-radius: var(--nw-raio-sm); border: 0; }
.alert-success { background: #ecfdf5; color: #065f46; }
.alert-danger { background: #fef2f2; color: #991b1b; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-info { background: #eef2ff; color: #3730a3; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #10b981; }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: #dc2626; font-size: .8rem; }

.vazio { text-align: center; padding: 40px 20px; color: var(--nw-suave); }
.vazio .icone { color: #a5b4fc; margin-bottom: 8px; }

/* ---------- Configurações ---------- */
.segredo-configurado { display: inline-flex; align-items: center; gap: 6px; color: #047857; font-size: .78rem; font-weight: 600; }

/* ---------- Telas de conta (login, MFA, criação de senha) ---------- */
.conta-pagina {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background:
        radial-gradient(900px 500px at 10% 10%, rgba(99, 102, 241, .45), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgba(14, 165, 233, .35), transparent 60%),
        linear-gradient(160deg, #070b1d, #111a3e 55%, #1e1b4b);
}
.conta-cartao {
    width: 100%; max-width: 400px; padding: 32px; border-radius: 20px; color: var(--nw-texto);
    background: rgba(255, 255, 255, .96); box-shadow: 0 30px 60px rgba(2, 6, 23, .45); border: 1px solid rgba(255, 255, 255, .6);
}
.conta-marca { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; }
.conta-marca .menu-logo { flex-basis: 44px; height: 44px; }
.conta-sub { color: var(--nw-suave); font-size: .8rem; margin: 6px 0 22px; }
.conta-titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.conta-codigo { letter-spacing: 8px; text-align: center; font-size: 1.5rem; font-weight: 700; }
.conta-rodape { color: var(--nw-suave); font-size: .8rem; margin: 16px 0 0; text-align: center; }

#blazor-error-ui {
    color-scheme: light only; background: #fffbeb; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------- Incidentes e alertas ---------- */
.lista-alertas { display: flex; flex-direction: column; }
.alerta-item {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start;
    padding: 16px 20px; border-bottom: 1px solid #eef1f6; border-left: 4px solid transparent;
}
.alerta-item:last-child { border-bottom: 0; }
.alerta-aberto.alerta-critico { border-left-color: #dc2626; background: linear-gradient(90deg, rgba(254, 226, 226, .55), transparent 55%); }
.alerta-aberto.alerta-alto { border-left-color: #f59e0b; background: linear-gradient(90deg, rgba(254, 243, 199, .6), transparent 55%); }
.alerta-aberto.alerta-medio { border-left-color: #6366f1; background: linear-gradient(90deg, rgba(224, 231, 255, .6), transparent 55%); }
.alerta-resolvido { border-left-color: #a7f3d0; }
.alerta-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--nw-suave); font-size: .8rem; }
.alerta-meta span { display: inline-flex; align-items: center; gap: 5px; }
.alerta-incidentes { grid-column: 1 / -1; background: var(--nw-superficie-2); border: 1px solid var(--nw-borda); border-radius: var(--nw-raio-sm); padding: 10px 14px; font-size: .86rem; }
.linha-clicavel { cursor: pointer; }
.linha-detalhe td { background: #f8f9ff; font-size: .86rem; }
.rotulo-detalhe { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nw-suave); margin-bottom: 2px; }

/* ---------- Detalhe da máquina: gráfico e links ---------- */
.link-maquina { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(79, 70, 229, .45); }
.link-maquina:hover { color: #4f46e5; }
.link-evidencia { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.grafico { width: 100%; height: auto; display: block; }
.grafico-grade { stroke: #e2e8f0; stroke-width: 1; }
.grafico-eixo { fill: #94a3b8; font-size: 11px; }
.grafico-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha-gateway { stroke: #10b981; }
/* Gateway por interface: mesma cor da interface, tracejada, para distinguir da linha de internet */
.grafico-linha-gateway-interface { stroke-dasharray: 5 4; opacity: .75; }
.grafico-linha-internet { stroke: #6366f1; }
.grafico-barra-perda { fill: #f87171; opacity: .85; }
.grafico-alvo { fill: transparent; }
.grafico-alvo:hover { fill: rgba(99, 102, 241, .08); }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .82rem; margin-bottom: 8px; }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-cor { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.grafico-cor-gateway { background: #10b981; }
.grafico-cor-internet { background: #6366f1; }
.grafico-cor-perda { background: #f87171; height: 10px; width: 10px; }

/* ---------- Gestão: anéis e SLA ---------- */
.anel-cartao { border: 1px solid var(--nw-borda); border-radius: var(--nw-raio-sm); padding: 14px 16px; background: linear-gradient(135deg, #fbfbff, #f5f7ff); }
.barra-sla { flex: 1; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; min-width: 60px; }
.barra-sla > span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #10b981); border-radius: 3px; }

/* ---------- Zona de perigo ---------- */
.cartao-perigo { border: 1px solid #fecaca; background: linear-gradient(135deg, #fff, #fff5f5); }
.cartao-perigo .cartao-titulo { color: #b91c1c; }

/* Mapa da localização da estação (Leaflet) */
.mapa-localizacao { height: 320px; width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; }
.leaflet-container { font: inherit; }

/* Gráfico de uso de recursos (CPU e memória) */
.grafico-linha-cpu { stroke: #f97316; }
.grafico-linha-memoria { stroke: #6366f1; }
.grafico-cor-cpu { background: #f97316; }
.grafico-cor-memoria { background: #6366f1; }

/* Gráfico de disco: tempo ativo (painel de cima) e latência (painel de baixo) */
.grafico-linha-disco-ativo { stroke: #0ea5e9; }
.grafico-linha-disco-latencia { stroke: #e11d48; }
.grafico-cor-disco-ativo { background: #0ea5e9; }
.grafico-cor-disco-latencia { background: #e11d48; }
.grafico-referencia { stroke: #f59e0b; stroke-width: 1; stroke-dasharray: 4 4; }
.grafico-cor-referencia { background: repeating-linear-gradient(90deg, #f59e0b 0 4px, transparent 4px 7px); }
.grafico-titulo-painel { fill: #64748b; font-size: 11px; font-weight: 600; }

/* Seletor de período: largura fixa para o texto não ficar sob a seta do combo */
.select-periodo { width: auto; min-width: 11.5rem; }

/* Módulos de monitoramento: um por linha, com a descrição alinhada ao rótulo */
.lista-modulos { display: flex; flex-direction: column; gap: .65rem; }
.lista-modulos .item-modulo { padding-left: 1.85em; }
.lista-modulos .item-modulo .form-check-input { margin-left: -1.85em; margin-top: .2rem; }
.lista-modulos .item-modulo .secundario { margin-top: .1rem; }