/* ==========================================================================
   VANGUARDCYBER — DESIGN SYSTEM "PERIMETRO"
   Tokens + shell + componentes, compartilhado por todas as telas.
   UI: Schibsted Grotesk · Dados: IBM Plex Mono · Marca: Michroma
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Michroma&display=swap');

:root {
  --bg:#0A0C0D; --surface:#101315; --surface-2:#14181B; --elevated:#1A1F22;
  --hover:#1E2427; --border:#232A2E; --border-strong:#313A3F;
  --text:#E7EBED; --text-2:#A0AAB0; --text-3:#6E787E; --text-inv:#071209;
  --brand:#46D486; --brand-hover:#5BE095; --brand-dim:rgba(70,212,134,.12); --brand-line:rgba(70,212,134,.38);
  --sev-critical:#EF4F6B; --sev-high:#F1813D; --sev-medium:#E3B341; --sev-low:#5C9CEB; --sev-info:#8A959B; --sev-ok:#46D486;
  --st-observed:#7E8B93; --st-validating:#E3B341; --st-confirmed:#EF4F6B;
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--brand-line);
  --shadow-pop:0 12px 32px rgba(0,0,0,.45),0 0 0 1px var(--border-strong);
  --r-sm:4px; --r-md:6px; --r-lg:8px;
  --font-ui:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-mark:'Michroma',var(--font-ui);
  --sidebar-w:260px; --topbar-h:54px; color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F5F6; --surface:#FFF; --surface-2:#F8FAFA; --elevated:#EEF1F2; --hover:#E8ECEE;
  --border:#DDE3E6; --border-strong:#C8D0D4; --text:#11171A; --text-2:#4A555B; --text-3:#76828A; --text-inv:#FFF;
  --brand:#138A4F; --brand-hover:#0F7A45; --brand-dim:rgba(19,138,79,.10); --brand-line:rgba(19,138,79,.40);
  --sev-critical:#CF2A4A; --sev-high:#C9601C; --sev-medium:#A97C0F; --sev-low:#2F6FC2; --sev-info:#6C777D; --sev-ok:#138A4F;
  --st-observed:#6C777D; --st-validating:#A97C0F; --st-confirmed:#CF2A4A;
  --shadow-pop:0 12px 32px rgba(17,23,26,.14),0 0 0 1px var(--border-strong); color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus)}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 12px}

/* MARCA / LOGO CORRIGIDA E ALINHADA NA VERTICAL */
.brand {
    display: flex;
    flex-direction: column; /* Coloca os elementos numa pilha vertical */
    align-items: center; /* Centra tudo no meio da barra lateral */
    text-align: center; /* Alinha o texto centrado */
    gap: 8px; /* Espaço entre o escudo e o texto */
    padding: 24px 10px 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.brand .mark {
    width: 44px; /* Aumentei um pouco o escudo para dar destaque isolado */
    height: 44px;
    flex: none;
    filter: drop-shadow(0 0 10px rgba(36,232,115,.4));
    margin-bottom: 4px;
}
.brand > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.brand .wordmark {
    font-family: var(--font-mark);
    font-size: .95rem; /* Um toque maior para presença */
    letter-spacing: .04em; /* Letras ligeiramente mais espaçadas para um look cinemático */
    color: var(--text);
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}
.brand .sub {
    font-family: var(--font-mono);
    font-size: .48rem;
    letter-spacing: .12em;
    color: var(--text-3);
    text-transform: uppercase;
    margin-top: 6px;
    line-height: 1.4;
    white-space: normal;
}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:14px 10px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);color:var(--text-2);font-size:.82rem;font-weight:500;cursor:pointer;position:relative;transition:background .12s,color .12s}
.nav-item svg{width:16px;height:16px;flex:none;stroke-width:1.75}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{background:var(--brand-dim);color:var(--brand)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);background:var(--elevated);padding:1px 6px;border-radius:20px}
.nav-item.danger:hover{color:var(--sev-critical)}
.side-foot{border-top:1px solid var(--border);padding-top:12px;margin-top:8px;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.64rem;color:var(--text-3);letter-spacing:.04em}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);display:flex;align-items:center;gap:16px;padding:0 24px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.page-id{display:flex;flex-direction:column;line-height:1.15}
.page-id b{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.page-id span{font-size:.68rem;color:var(--text-3)}
.topbar .spacer{flex:1}
.content{padding:22px 24px 48px;max-width:1560px;width:100%}

/* search & buttons */
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--text-3)}
.search input{width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 12px 8px 33px;font-size:.8rem;color:var(--text)}
.search input::placeholder{color:var(--text-3)}
.search input:focus{border-color:var(--border-strong)}

.btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:var(--r-md);border:1px solid transparent;font-size:.78rem;font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.btn svg{width:15px;height:15px;stroke-width:2}
.btn-primary{background:var(--brand);color:var(--text-inv)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--hover);border-color:var(--text-3)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--sev-critical) 55%,transparent);color:var(--sev-critical)}
.btn-danger:hover{background:color-mix(in srgb,var(--sev-critical) 12%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* cards & kpis */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-head h3{font-size:.82rem;font-weight:600;letter-spacing:.01em}
.card-head .hint{margin-left:auto;font-size:.7rem;color:var(--text-3);font-family:var(--font-mono)}
.card-body{padding:18px}

.kpi-row{display:grid;gap:14px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px 16px;position:relative;overflow:hidden}
.kpi .lbl{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);font-weight:600;display:flex;align-items:center;gap:7px}
.kpi .lbl svg{width:14px;height:14px;stroke-width:1.9}
.kpi .val{font-size:2rem;font-weight:600;letter-spacing:-.02em;margin-top:9px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .meta{font-size:.72rem;color:var(--text-3);margin-top:7px;display:flex;align-items:center;gap:6px}
.kpi .accent{position:absolute;left:0;top:0;bottom:0;width:3px}
.kpi.a-brand .accent{background:var(--brand)} .kpi.a-brand .val{color:var(--brand)}
.kpi.a-warn .accent{background:var(--sev-medium)} .kpi.a-warn .val{color:var(--sev-medium)}
.kpi.a-crit .accent{background:var(--sev-critical)} .kpi.a-crit .val{color:var(--sev-critical)}
.trend{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:.7rem;font-weight:500}
.trend.up{color:var(--sev-critical)} .trend.down{color:var(--sev-ok)} .trend.flat{color:var(--text-3)}

/* tables */
.tbl-wrap{width:100%;overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.82rem;vertical-align:middle}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .asset{font-weight:500}
.tbl .ip{font-family:var(--font-mono);font-size:.76rem;color:var(--text-2)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.sev.critical{--c:var(--sev-critical)} .sev.high{--c:var(--sev-high)} .sev.medium{--c:var(--sev-medium)} .sev.low{--c:var(--sev-low)} .sev.ok{--c:var(--sev-ok)}
.sev{color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:.66rem;background:var(--elevated);border:1px solid var(--border);color:var(--text-2)}
.chip.sig{color:var(--sev-low);border-color:color-mix(in srgb,var(--sev-low) 30%,transparent);background:color-mix(in srgb,var(--sev-low) 10%,transparent)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:500}
.status .dot{width:6px;height:6px;border-radius:50%}
.status.observed{color:var(--st-observed)} .status.observed .dot{background:var(--st-observed)}
.status.validating{color:var(--st-validating)} .status.validating .dot{background:var(--st-validating)}
.status.confirmed{color:var(--st-confirmed)} .status.confirmed .dot{background:var(--st-confirmed)}

/* meter & empty & live */
.meter{height:5px;border-radius:5px;background:var(--elevated);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:5px;background:var(--brand)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 20px;text-align:center;color:var(--text-3)}
.empty svg{width:34px;height:34px;stroke-width:1.5;opacity:.6}
.empty span{font-size:.82rem;font-family:var(--font-mono)}
.live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:500;color:var(--brand);font-family:var(--font-mono);letter-spacing:.03em}
.live .pip{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand-line);animation:pip 2s infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.theme-tgl{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer}
.theme-tgl:hover{color:var(--text);background:var(--hover)}
.theme-tgl svg{width:16px;height:16px;stroke-width:1.8}
:root:not([data-theme="light"]) .theme-tgl .sun{display:none}
:root[data-theme="light"] .theme-tgl .moon{display:none}

.metallic{background:linear-gradient(180deg,#EAF4EF 0%,#BFD9CC 38%,#9FCCB5 55%,#6E9682 78%,#9FCCB5 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ==========================================================================
   CSS DO WIDGET FLUTUANTE DA IA
   ========================================================================== */
.ai-float-btn{position:fixed;bottom:28px;right:28px;z-index:999;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#0CE06B);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(36,232,115,.4);transition:transform .2s,box-shadow .2s}
.ai-float-btn:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(36,232,115,.6)}
.ai-float-btn svg{color:#03170C;stroke-width:2}
.ai-chat-box{position:fixed;bottom:92px;right:28px;z-index:1000;width:360px;height:480px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ai-chat-box.active{display:flex}
.ai-chat-header{padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.78rem;font-weight:600}
.ai-chat-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1rem}
.ai-chat-close:hover{color:var(--text)}
.ai-chat-body{flex:1;padding:14px;overflow-y:auto;font-family:var(--font-mono);font-size:.74rem;display:flex;flex-direction:column;gap:10px}
.ai-msg{padding:8px 12px;border-radius:8px;max-width:85%;line-height:1.5}
.ai-msg.bot{background:var(--surface-2);color:var(--text-2);align-self:flex-start;border:1px solid var(--border)}
.ai-msg.user{background:var(--brand-dim);color:var(--brand);align-self:flex-end;border:1px solid var(--brand-line)}
.ai-msg.typing{opacity:0.6;font-style:italic}
.ai-chat-footer{padding:10px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:8px}
.ai-chat-footer input{flex:1;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:0 10px;font-family:var(--font-mono);font-size:.76rem;color:var(--text);outline:none}
.ai-chat-footer button{height:36px;padding:0 14px;background:var(--brand);color:#03170C;border:none;border-radius:var(--r-md);font-weight:600;cursor:pointer}