/* ==========================================================================
   borda.giovanni.tec.br — folha de estilo unica do portal.
   Servida em /assets/ui.css (sem auth_request, o login precisa dela).
   Fonte de verdade de fonte, paleta e componentes. Consumida por:
     core .230  : login.php portal.php sec.php link.php
                  /dados/netmap/mapa.php  (tambem servido na :8098 do core,
                                           que carrega esta folha por URL
                                           absoluta — dai o CORS no location)
                  /dados/sec-status/dashboard.html + report*.html (gen-sec-dashboard.py)
     CT 140     : /opt/loki-web/loki_web.py  (painel de logs, servido em /logs/)
   Mexer aqui muda todas. Nao duplicar paleta nem topbar nos consumidores.

   PALETA "Ops Console" (petroleo/ciano) — os valores vem do search-noc
   (CT 240, /opt/search-noc-chat/public/index.html), que e a referencia visual
   adotada em 2026-08-07. O search ainda declara os proprios tokens; se mudar
   um valor aqui, espelhar la.
   ========================================================================== */

@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:#0b1016;      /* fundo da pagina           */
  --panel:#0e141b;   /* card, topbar, painel      */
  --panel2:#151d27;  /* fundo de codigo / hover   */
  --sur2:#1b2531;    /* superficie elevada        */
  --bor:#232f3d;     /* borda padrao              */
  --bor2:#2c3b4c;    /* borda forte               */

  /* texto */
  --ink:#cdd8e4;     /* texto principal           */
  --ink2:#7d8b9c;    /* secundario                */
  --dim:#7d8b9c;     /* rotulo / meta             */
  --faint:#5a6879;   /* rodape                    */

  /* acento — ciano do Ops Console */
  --acc:#43b6c4;     /* fundo de item ativo/botao */
  --acc-hov:#2c7f8a;
  --acc-ink:#43b6c4; /* titulo e link             */
  --acc-soft:rgba(67,182,196,.1);

  /* severidade */
  --ok:#3ecf8e; --warn:#e0a458; --crit:#e5484d; --info:#43b6c4;

  --tb-h:41px;      /* altura da topbar: 9px*2 padding + 22px do link + 1px borda */
  --r:10px;          /* raio de card   */
  --r-sm:6px;        /* 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}

/* --- 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}