/* Fibre CLM (Fibre Solutions Centralized Log Management): identidade visual do Graylog.
   Servido pela camada web do próprio mglog; o Graylog não é alterado.
   Segue a tela de entrada e o cabeçalho do Fibre NOC. Build 1.0.9 */
@font-face{font-family:"Fibre Heros";src:url(/fibre-clm/heros-bold.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --fb-ink:#111111;--fb-panel:#191918;--fb-panel-2:#1F1F1E;--fb-line:#2E2D2C;--fb-line-2:#3B3A38;
  --fb-carbon:#211915;--fb-fg:#ECECEB;--fb-muted:#A3A2A0;--fb-dim:#77756F;--fb-blue:#3DA5CF;--fb-blue-hi:#7CC4E2;--fb-crit:#FF3030;
  --fb-body:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --fb-title:"Helvetica Neue","Fibre Heros",Helvetica,Arial,sans-serif;
  --fb-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --fb-pad:clamp(16px,2.4vw,32px);--fb-logo-h:56px;--fb-logo-w:158px;--fb-bar-h:81px;
}

/* ===================== Tela de entrada (padrão do Fibre NOC) ===================== */
#app-root > div:has(> .container #password){
  color-scheme:dark;position:relative;
  display:grid !important;place-items:center !important;min-height:100vh !important;height:auto !important;
  padding:calc(var(--fb-bar-h) + 32px) 16px 32px !important;box-sizing:border-box;
  background:var(--fb-ink) url(/fibre-clm/textura-carbono.jpg) repeat fixed !important;
  font:400 14px/1.5 var(--fb-body);color:var(--fb-fg);
}
/* barra do topo: logo, nome do produto e build */
#app-root > div:has(> .container #password)::before{
  content:"Centralized Log Management";position:fixed;z-index:10;top:0;left:0;right:0;height:var(--fb-bar-h);box-sizing:border-box;
  padding:0 var(--fb-pad) 0 calc(var(--fb-pad) + var(--fb-logo-w) + 18px + 16px);
  display:flex;align-items:center;padding-bottom:16px;
  font:500 11.8px/1 var(--fb-body);letter-spacing:.3em;text-transform:uppercase;color:var(--fb-blue);white-space:nowrap;
  background:
    url(/fibre-clm/fibre-logo-claro.png) no-repeat left var(--fb-pad) center/auto var(--fb-logo-h),
    linear-gradient(var(--fb-line),var(--fb-line)) no-repeat left calc(var(--fb-pad) + var(--fb-logo-w) + 18px) center/1px 34px,
    #111111eb;
  border-bottom:1px solid var(--fb-line);
}
#app-root > div:has(> .container #password)::after{
  content:"Build 1.0.9";position:fixed;z-index:11;top:calc(var(--fb-bar-h) / 2 + 3px);
  left:calc(var(--fb-pad) + var(--fb-logo-w) + 18px + 16px);
  font:500 10.5px/1 var(--fb-mono);letter-spacing:.06em;color:var(--fb-dim);white-space:nowrap;
}
/* cartão */
#app-root > div:has(> .container #password) > .container{
  width:min(400px,100%) !important;max-width:none !important;height:auto !important;min-height:0 !important;flex:none !important;margin:0 !important;
  background:var(--fb-panel) !important;border:1px solid var(--fb-line) !important;border-radius:3px !important;
  padding:28px 26px !important;box-sizing:border-box;position:relative;z-index:1;box-shadow:none !important;
}
#app-root > div:has(> .container #password) > .container > div{
  width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;display:grid;gap:16px;
}
/* rótulo e título */
#app-root > div:has(> .container #password) strong{display:block;font-size:0 !important;line-height:1;margin:0 !important;color:var(--fb-fg) !important}
#app-root > div:has(> .container #password) strong::before{
  content:"Fibre Solutions";display:block;margin:0 0 8px;
  font:500 11.8px/1 var(--fb-body);letter-spacing:.28em;text-transform:uppercase;color:var(--fb-blue);
}
#app-root > div:has(> .container #password) strong::after{
  content:"Centralized Log Management";display:block;
  font:700 24px/1.2 var(--fb-title);letter-spacing:-.02em;color:var(--fb-fg);
}
/* campos */
#app-root > div:has(> .container #password) form{display:grid;gap:16px;margin:0 !important}
#app-root > div:has(> .container #password) .form-group{margin:0 !important;display:grid;gap:6px}
#app-root > div:has(> .container #password) label{font-size:0 !important;margin:0 !important;line-height:1}
#app-root > div:has(> .container #password) label::before{font:500 12.8px/1.2 var(--fb-body);color:var(--fb-muted)}
#app-root > div:has(> .container #password) label[for="username"]::before{content:"Usuário"}
#app-root > div:has(> .container #password) label[for="password"]::before{content:"Senha"}
#app-root > div:has(> .container #password) input.form-control{
  font:400 15.2px var(--fb-body) !important;color:var(--fb-fg) !important;background:var(--fb-ink) !important;
  border:1px solid var(--fb-line-2) !important;border-radius:3px !important;padding:10px 12px !important;height:auto !important;box-shadow:none !important;
}
#app-root > div:has(> .container #password) input.form-control:focus{outline:2px solid var(--fb-blue) !important;outline-offset:1px;border-color:var(--fb-blue) !important}
#app-root > div:has(> .container #password) input:-webkit-autofill{-webkit-text-fill-color:var(--fb-fg);-webkit-box-shadow:0 0 0 40px var(--fb-ink) inset !important;caret-color:var(--fb-fg)}
/* botão Entrar: largura total, azul, texto grafite */
#app-root > div:has(> .container #password) form > div:has(button[type="submit"]){display:block !important;margin:0 !important}
#app-root > div:has(> .container #password) button[type="submit"]{
  width:100% !important;height:auto !important;min-height:0 !important;background:var(--fb-blue) !important;border:0 !important;border-radius:3px !important;
  padding:11px !important;cursor:pointer;
}
#app-root > div:has(> .container #password) button[type="submit"]:hover{background:var(--fb-blue-hi) !important}
#app-root > div:has(> .container #password) button[type="submit"] .mantine-Button-label{font-size:0 !important}
#app-root > div:has(> .container #password) button[type="submit"] .mantine-Button-label::after{content:"Entrar";font:600 15.2px/1 var(--fb-body);color:var(--fb-carbon)}
/* aviso de credencial inválida do Graylog */
#app-root > div:has(> .container #password) [role="alert"],
#app-root > div:has(> .container #password) .alert{
  background:rgba(255,48,48,.08) !important;border:1px solid rgba(255,48,48,.45) !important;border-radius:3px !important;color:var(--fb-fg) !important;
}
#app-root > div:has(> .container #password) [role="alert"] *{color:var(--fb-fg) !important}
/* rodapé do cartão */
#app-root > div:has(> .container #password) form::after{
  content:"Em caso de dificuldade, contate o suporte da Fibre.";display:block;margin-top:14px;
  font:400 12.2px/1.4 var(--fb-body);color:var(--fb-dim);text-align:center;
}
/* painel da direita do Graylog vira o canto da marca (azul a 45° com faixa grafite) */
#app-root > div:has(> .container #password) > div:last-child{
  position:fixed !important;right:0;bottom:0;left:auto !important;top:auto !important;z-index:0;width:190px !important;height:190px !important;
  min-width:0 !important;min-height:0 !important;flex:none !important;padding:0 !important;margin:0 !important;pointer-events:none;
  background:linear-gradient(135deg,transparent calc(50% - 1px),#1B1B1A calc(50% - 1px)) !important;
}
#app-root > div:has(> .container #password) > div:last-child > *{display:none !important}
#app-root > div:has(> .container #password) > div:last-child::after{
  content:"";position:absolute;right:0;bottom:0;width:120px;height:120px;background:linear-gradient(135deg,transparent 50%,var(--fb-blue) 50%);
}
/* celular: logo menor e nome do produto embaixo do logo */
@media (max-width:600px){
  :root{--fb-logo-h:46px;--fb-logo-w:130px;--fb-bar-h:112px}
  #app-root > div:has(> .container #password)::before{
    padding:0 var(--fb-pad) 30px var(--fb-pad);align-items:flex-end;font-size:10.5px;letter-spacing:.24em;
    background:url(/fibre-clm/fibre-logo-claro.png) no-repeat left var(--fb-pad) top 12px/auto var(--fb-logo-h),#111111eb;
  }
  #app-root > div:has(> .container #password)::after{top:auto;bottom:auto;top:calc(var(--fb-bar-h) - 22px);left:var(--fb-pad)}
  #app-root > div:has(> .container #password) > div:last-child{width:120px !important;height:120px !important}
  #app-root > div:has(> .container #password) > div:last-child::after{width:76px;height:76px}
}

/* ===================== Dentro do sistema ===================== */
/* barra superior grafite com o logo, o nome do produto e o build, como no Fibre NOC */
#app-root nav.navbar-fixed-top{
  background:var(--fb-ink) url(/fibre-clm/textura-carbono.jpg) repeat !important;border-bottom:1px solid var(--fb-line) !important;
}
#app-root nav.navbar-fixed-top .navbar-brand{
  width:120px;background:url(/fibre-clm/fibre-logo-claro.png) no-repeat left center/contain !important;margin-right:18px;position:relative;
}
#app-root nav.navbar-fixed-top .navbar-brand > *{visibility:hidden !important}
#app-root nav.navbar-fixed-top .navbar-brand::after,
#app-root nav.navbar-fixed-top .navbar-brand::before{position:absolute;left:132px;padding-left:14px;border-left:1px solid var(--fb-line);white-space:nowrap;display:none}
#app-root nav.navbar-fixed-top .navbar-brand::after{
  content:"Centralized Log Management";top:calc(50% - 13px);height:14px;padding-top:2px;
  font:500 10px/1 var(--fb-body);letter-spacing:.24em;text-transform:uppercase;color:var(--fb-blue);
}
#app-root nav.navbar-fixed-top .navbar-brand::before{
  content:"Build 1.0.9";top:calc(50% + 3px);height:12px;
  font:500 9.5px/1 var(--fb-mono);letter-spacing:.06em;color:var(--fb-dim);
}
/* o nome só cabe sem empurrar o menu para uma segunda linha a partir de 1340 px
   e com o menu recolhido entre 600 e 991 px */
@media (min-width:1340px), (min-width:600px) and (max-width:991px){
  #app-root nav.navbar-fixed-top .navbar-brand{margin-right:290px !important}
  #app-root nav.navbar-fixed-top .navbar-brand::after,
  #app-root nav.navbar-fixed-top .navbar-brand::before{display:block}
}
#app-root nav.navbar-fixed-top .navbar-nav > li > a,
#app-root nav.navbar-fixed-top .navbar-nav > li > button,
#app-root nav.navbar-fixed-top .navbar-nav > li > a *,
#app-root nav.navbar-fixed-top .navbar-nav > li > button *{color:var(--fb-fg) !important}
#app-root nav.navbar-fixed-top .navbar-nav > li > a:hover,
#app-root nav.navbar-fixed-top .navbar-nav > li > button:hover{color:var(--fb-blue-hi) !important}
#app-root nav.navbar-fixed-top .navbar-nav > li.active > a .nav-item-state-indicator,
#app-root nav.navbar-fixed-top .navbar-nav > li > a[aria-current="page"] .nav-item-state-indicator{border-bottom-color:var(--fb-blue) !important;color:var(--fb-blue) !important}
#app-root nav.navbar-fixed-top svg, #app-root nav.navbar-fixed-top .material-symbols-rounded{color:var(--fb-fg) !important;fill:currentColor}
/* botão do menu recolhido */
#app-root nav.navbar-fixed-top .navbar-toggle{background:transparent !important;border:1px solid var(--fb-line-2) !important;border-radius:3px !important}
#app-root nav.navbar-fixed-top .navbar-toggle:hover{border-color:var(--fb-blue) !important}
#app-root nav.navbar-fixed-top .navbar-toggle .icon-bar{background:var(--fb-fg) !important}
/* menu de oferta da versão paga */
#app-root nav.navbar-fixed-top li:has(> a[href="/system/enterprise"]){display:none !important}
/* rodapé com versão do Graylog, Java e kernel (também desligado na personalização do Graylog) */
#app-root footer{display:none !important}