/* Fibre CLM (Fibre Solutions Centralized Log Management): identidade visual do Graylog
   Aplicada pelo proxy NGINX; o Graylog não é alterado. */
@font-face{font-family:"Fibre Heros";src:url(/fibre-marca/heros-bold.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --fb-ink:#111111;--fb-deep:#0C0C0C;--fb-panel:#191918;--fb-panel-2:#1F1F1E;--fb-line:#2E2D2C;--fb-line-2:#3B3A38;
  --fb-carbon:#211915;--fb-fg:#ECECEB;--fb-muted:#A3A2A0;--fb-blue:#3DA5CF;--fb-blue-hi:#7CC4E2;
  --fb-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;--fb-display:"Helvetica Neue","Fibre Heros",Helvetica,Arial,sans-serif;
}

/* ===================== Tela de entrada ===================== */
#app-root > div:has(> .container #password){
  color-scheme:dark;
  background:var(--fb-ink) url(/fibre-marca/textura-carbono.jpg) repeat !important;
  font-family:var(--fb-sans) !important;
}
/* coluna do formulário */
#app-root > div:has(> .container #password) > .container{
  background:rgba(25,25,24,.94) !important;border-right:1px solid var(--fb-line) !important;
  position:relative;overflow:hidden;
}
#app-root > div:has(> .container #password) > .container > div{position:relative;z-index:1}
/* logo da Fibre acima do título: só quando o painel da direita (com o logo grande) não aparece */
#app-root > div:has(> .container #password) > .container > div::before{
  content:"";display:none;width:170px;height:60px;margin:0 0 40px;
  background:url(/fibre-marca/fibre-logo-claro.png) no-repeat left center/contain;
}
/* rótulo espaçado + título */
#app-root > div:has(> .container #password) strong{
  display:block;font-size:0 !important;line-height:1;margin:0 0 30px !important;color:var(--fb-fg) !important;
}
#app-root > div:has(> .container #password) strong::before{
  content:"Fibre CLM";display:block;margin:0 0 12px;
  font:400 11px/1.4 var(--fb-sans);letter-spacing:.2em;white-space:nowrap;text-transform:uppercase;color:var(--fb-blue);
}
#app-root > div:has(> .container #password) strong::after{
  content:"Centralized Log Management";display:block;font:700 30px/1.12 var(--fb-display);letter-spacing:-.02em;color:var(--fb-fg);
}
/* rótulos dos campos em português */
#app-root > div:has(> .container #password) label{font-size:0 !important;margin-bottom:8px !important}
#app-root > div:has(> .container #password) label::before{font:500 13px/1.3 var(--fb-sans);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) .form-group{margin-bottom:18px !important}
/* campos */
#app-root > div:has(> .container #password) input.form-control{
  background:var(--fb-panel-2) !important;color:var(--fb-fg) !important;border:1px solid var(--fb-line-2) !important;
  border-radius:2px !important;height:42px !important;box-shadow:none !important;font:400 15px var(--fb-sans) !important;
}
#app-root > div:has(> .container #password) input.form-control:focus{border-color:var(--fb-blue) !important;outline:none !important;box-shadow:0 0 0 1px 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-panel-2) inset !important}
/* botão principal: azul, texto grafite, canto superior direito a 45° */
#app-root > div:has(> .container #password) button[type="submit"]{
  background:var(--fb-blue) !important;border:0 !important;border-radius:2px !important;height:44px !important;min-width:150px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
#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:700 15px var(--fb-sans);color:var(--fb-carbon);letter-spacing:.01em;
}
/* painel da direita: textura de carbono e blocos azuis a 45° no lugar da arte do Graylog */
#app-root > div:has(> .container #password) > div:last-child{
  background:transparent !important;position:relative;overflow:hidden;
}
#app-root > div:has(> .container #password) > div:last-child > *{display:none !important}
#app-root > div:has(> .container #password) > div:last-child::before{
  content:"";position:absolute;right:-130px;top:-130px;width:260px;height:260px;background:var(--fb-blue);transform:rotate(45deg);
}
#app-root > div:has(> .container #password) > div:last-child::after{
  content:"";position:absolute;left:50%;top:50%;width:min(46%,520px);aspect-ratio:720/255;transform:translate(-50%,-50%);
  background:url(/fibre-marca/fibre-logo-claro.png) no-repeat center/contain;opacity:.92;
}
#app-root > div:has(> .container #password) > .container::after{
  content:"";position:absolute;left:-90px;bottom:-90px;width:180px;height:180px;background:var(--fb-blue);transform:rotate(45deg);
  box-shadow:22px -22px 0 0 var(--fb-line-2);
}

@media (max-width:767px){
  #app-root > div:has(> .container #password) > .container{width:100% !important;max-width:none !important;flex:1 1 auto !important;border-right:0 !important}
  #app-root > div:has(> .container #password) > .container > div::before{display:block}
  #app-root > div:has(> .container #password) > div:last-child{display:none !important}
}

/* ===================== Dentro do sistema ===================== */
/* barra superior grafite com o logo da Fibre */
#app-root nav.navbar-fixed-top{
  background:var(--fb-ink) url(/fibre-marca/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-marca/fibre-logo-claro.png) no-repeat left center/contain !important;margin-right:18px;
}
#app-root nav.navbar-fixed-top .navbar-brand > *{visibility:hidden !important}
/* nome do produto ao lado do logo, como o "Network Operations Center" do NOC */
#app-root nav.navbar-fixed-top .navbar-brand{position:relative}
#app-root nav.navbar-fixed-top .navbar-brand::after{
  content:"Centralized Log Management";position:absolute;left:132px;top:50%;transform:translateY(-50%);
  padding-left:14px;border-left:1px solid var(--fb-line-2);white-space:nowrap;
  font:400 10px/1.3 var(--fb-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--fb-blue);display:none;
}
/* 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{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}
/* 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: não exibir */
#app-root footer{display:none !important}