/* ==========================================================================
   noc.giovanni.tec.br — variante da folha unica do portal com a PALETA DO NOC
   (mesmos tokens de ui.css: netmap, Sentinela, painel de logs e login carregam
   sem mudanca de codigo). Servida como /assets/ui.css SO no vhost noc.conf.
   Fonte de verdade: Projetos/noc-portal-casa/core/ui-noc.css (vault).
   ========================================================================== */
@font-face{
  font-family:"Inter";
  src:url("/assets/InterVariable.woff2?v=2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/JetBrainsMono-Regular.woff2?v=2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/JetBrainsMono-Bold.woff2?v=2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  color-scheme:dark;

  /* fontes — self-hosted, para renderizar igual em Windows, Linux e celular.
     O search-noc usa a stack do sistema; aqui as familias sao fixas. */
  --ui:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* superficies */
  --bg:#0b0d10;      /* fundo da pagina           */
  --panel:#1a1e25;   /* card, topbar, painel      */
  --panel2:#20252d;  /* fundo de codigo / hover   */
  --sur2:#262b33;    /* superficie elevada        */
  --bor:#262b33;     /* borda padrao              */
  --bor2:#3a4049;    /* borda forte               */

  /* texto */
  --ink:#f1f3f6;     /* texto principal           */
  --ink2:#9aa4b2;    /* secundario                */
  --dim:#9aa4b2;     /* rotulo / meta             */
  --faint:#6b7482;   /* rodape                    */

  /* acento — ciano do Ops Console */
  --acc:#3b82f6;     /* fundo de item ativo/botao */
  --acc-hov:#2563eb;
  --acc-ink:#60a5fa; /* titulo e link             */
  --acc-soft:rgba(59,130,246,.16);

  /* severidade */
  --ok:#22c55e; --warn:#f59e0b; --crit:#ef4444; --info:#22d3ee;

  --tb-h:0px;   /* topbar escondida: a navegacao e o menu lateral do NOC */      /* altura da topbar: 9px*2 padding + 22px do link + 1px borda */
  --r:14px;          /* raio de card   */
  --r-sm:8px;        /* raio de botao  */
}

*{box-sizing:border-box}

html,body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--acc-ink);text-decoration:none}
a:hover{text-decoration:underline}

code,pre,kbd,samp,.mono{font-family:var(--mono)}

h1{font-size:1.15rem;margin:0 0 4px;font-weight:600}
h2{font-size:1.02rem;color:var(--acc-ink);margin:24px 0 10px;font-weight:600}
h3{font-size:.94rem;color:var(--acc-ink);font-weight:600}
h4,h5{font-size:.9rem;color:var(--ink2);font-weight:600}

.muted{color:var(--dim);font-size:.8rem}

/* --- topbar unica ------------------------------------------------------- */
/* mono e 12px, igual a do search-noc — e o que da a cara de console */
.tb{
  display:flex;gap:2px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--bor);
  padding:9px 16px;font-family:var(--mono);font-size:12px;
}
.tb a{
  color:var(--ink2);text-decoration:none;padding:5px 10px;
  border-radius:var(--r-sm);line-height:1;
}
.tb a:hover{background:var(--panel2);color:var(--ink);text-decoration:none}
.tb a.on{color:var(--acc);background:var(--acc-soft)}
.tb .sp{flex:1}
.tb .badge{color:var(--faint);padding-right:4px}

/* modal da topbar: item com data-modal abre a pagina num <dialog> + iframe
   (hoje so o 2FA). Fecha por Esc, pelo X ou clicando no backdrop. */
dialog.tbm{
  background:var(--bg);color:var(--ink);border:1px solid var(--bor2);
  border-radius:12px;padding:0;overflow:hidden;
  width:min(94vw,620px);max-width:none;max-height:90vh;
}
dialog.tbm::backdrop{background:rgba(0,0,0,.72)}
/* altura vem do JS (scrollHeight do documento no load); 90vh e o teto */
dialog.tbm iframe{display:block;border:0;width:100%;height:320px;max-height:90vh;background:var(--bg)}
dialog.tbm form{position:absolute;top:8px;right:8px;margin:0}
dialog.tbm .tbm-x{padding:2px 9px;font-size:1.1rem;line-height:1.3}

/* --- layout ------------------------------------------------------------- */
main{max-width:1100px;margin:0 auto;padding:22px 16px 40px}
main.wide{max-width:none}
footer{color:var(--faint);font-size:.75rem;margin-top:30px;text-align:center}

/* iframe que ocupa o resto da tela abaixo da topbar */
iframe.full{display:block;border:0;width:100%;height:calc(100vh - var(--tb-h));background:var(--bg)}

/* --- card / painel ------------------------------------------------------ */
.card,.painel{
  background:var(--panel);border:1px solid var(--bor);
  border-radius:var(--r);padding:14px 16px;
}
a.card{display:flex;gap:12px;align-items:flex-start;color:inherit;text-decoration:none;
  transition:border-color .12s,transform .12s,background .12s}
a.card:hover{border-color:var(--acc);background:var(--sur2);transform:translateY(-1px);text-decoration:none}

/* --- formulario / botao ------------------------------------------------- */
input,select,textarea{
  font-family:var(--ui);font-size:.95rem;color:var(--ink);
  background:var(--panel2);border:1px solid var(--bor);border-radius:var(--r-sm);padding:10px 12px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}

button,.btn{
  font-family:var(--mono);cursor:pointer;
  background:var(--panel2);color:var(--acc);border:1px solid var(--bor2);
  border-radius:var(--r-sm);padding:4px 11px;font-size:.78rem;
}
button:hover,.btn:hover{background:var(--sur2)}
button.primary{background:var(--acc);color:#06232a;border:0;font-weight:600;font-size:.95rem;padding:11px}
button.primary:hover{background:var(--acc-hov);color:#fff}

/* --- tabela ------------------------------------------------------------- */
table.list,table.md{border-collapse:collapse;width:100%;margin:8px 0;font-size:.85rem}
table.list th,table.md th{
  text-align:left;color:var(--ink2);font-weight:600;
  border-bottom:1px solid var(--bor);padding:6px 8px;
}
table.list td,table.md td{border-bottom:1px solid var(--bor);padding:6px 8px;vertical-align:top}
table.list tr:hover td{background:var(--panel2)}

/* --- pill de severidade ------------------------------------------------- */
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.75rem;font-weight:600;
  font-family:var(--mono)}
.p-crit{background:rgba(229,72,77,.16);color:var(--crit)}
.p-warn{background:rgba(224,164,88,.16);color:var(--warn)}
.p-ok{background:rgba(62,207,142,.16);color:var(--ok)}
.p-new{background:var(--acc-soft);color:var(--acc)}
.p-rec{background:var(--sur2);color:var(--ink2)}
.p-acc{background:var(--panel2);color:var(--faint)}

/* --- codigo ------------------------------------------------------------- */
pre.code,code{background:var(--panel2);border:1px solid var(--bor);border-radius:var(--r-sm)}
pre.code{padding:10px;overflow-x:auto;font-size:.8rem}
code{padding:0 4px;font-size:.85em}
blockquote{border-left:3px solid var(--bor2);margin:8px 0;padding:2px 12px;color:var(--ink2)}
hr{border:0;border-top:1px solid var(--bor);margin:18px 0}

/* --- NOC: paginas abrem em iframe dentro do portal; a topbar do portal antigo some --- */
nav.tb{display:none}
body{background-image:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.05),transparent 55%)}
h2,h3{color:var(--ink)}
button.primary{color:#fff}
.pill{font-weight:800;text-transform:uppercase;font-size:.7rem}

/* --- NOC: paginas embutidas (Sentinela, Logs, Netmap) parecem paineis do portal ---------------
   O titulo da pagina ja esta na barra do NOC: o h1 proprio some (o do login fica: esta dentro do .card). */
body>h1,header>h1,main>h1{display:none}
body>p.muted{margin:0 0 12px}
.card,.painel,.panel{background:#1a1e25;border:1px solid rgba(255,255,255,.07);border-radius:14px}
.painel>h2,.card>h2{color:#f1f3f6;font-weight:800;letter-spacing:.3px}
table.list th,table.md th{color:#9aa4b2;text-transform:uppercase;font-size:.72rem;letter-spacing:.3px}
button,.btn{font-family:var(--ui);font-weight:600;background:#20252d;color:#f1f3f6;border:1px solid #3a4049;border-radius:8px}
button:hover,.btn:hover{background:#262b33}
button.on{border-color:rgba(59,130,246,.5);color:#60a5fa;background:rgba(59,130,246,.12)}
input,select,textarea{background:#20252d;border-color:#3a4049;border-radius:8px}
header{background:transparent}
.badge{font-family:var(--mono)}