#firstboxlogin, #text-login, #logo_login { background-color: transparent;}html { height: 100%;}body { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("/plugins/trademark/front/picture.send.php?path=30/6a5e27ca9df30.jpg");}/* =========================================================
   GPL Incorporadora — tela de login do GLPI
   Plugin: trademark (Login › Custom CSS, tipo: CSS)
   Design System: Green Mineral v1.0
   Requer: Login › Theme = "original"

   Dependências externas deste CSS:
   - Google Fonts (Bricolage Grotesque, Cormorant Garamond)
   - plugin singlesignon: variáveis --sso-* e classes .singlesignon-*
     Se esse plugin renomear as variáveis, o azul #2563eb dele volta.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..700&family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');

/* ---------- 0. Tokens ---------- */
:root {
  --gpl-deep: #2B4A3D;   /* Verde Profundo — primária */
  --gpl-ink:  #1E382C;   /* Verde Tinta */
  --gpl-sage: #8FA48D;   /* Sálvia */
  --gpl-mist: #B5C6B0;   /* Bruma */
  --gpl-bone: #EFEDD7;   /* Osso */
  --gpl-line: rgba(43, 74, 61, .14);
  --gpl-soft: rgba(30, 56, 44, .62);
  --gpl-ease: cubic-bezier(.22, .61, .36, 1);
}

body { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }


/* ---------- 1. Estrutura: um card só ----------
   O GLPI envolve tudo num .card. Ele é dissolvido para que o card
   visível seja o painel interno (SSO ou formulário clássico).      */

body .card.card-md,
body .card.main-content-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* painel do SSO */
.singlesignon-login {
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--gpl-bone);
  border: 1px solid var(--gpl-line);
  border-radius: 4px;
  box-shadow: 0 24px 60px -20px rgba(30, 56, 44, .45);
}

/* painel do formulário clássico do GLPI */
section.singlesignon-auth-section--classic {
  background: var(--gpl-bone) !important;
  border: 1px solid var(--gpl-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 60px -20px rgba(30, 56, 44, .45) !important;
}


/* ---------- 2. Rebrand do plugin singlesignon ----------
   O plugin expõe as próprias variáveis. Redefini-las troca a cor de
   todo o bloco (ícones, bordas, botões) sem precisar de !important. */

.singlesignon-auth-stack,
.singlesignon-login {
  --sso-surface:       transparent;
  --sso-border:        rgba(43, 74, 61, .16);
  --sso-shadow:        none;
  --sso-title:         #1E382C;
  --sso-text:          #2B4A3D;
  --sso-muted:         rgba(30, 56, 44, .62);
  --sso-button-bg:     rgba(255, 255, 255, .55);
  --sso-button-border: rgba(43, 74, 61, .18);
  --sso-button-hover:  rgba(143, 164, 141, .18);
  --sso-button-focus:  rgba(43, 74, 61, .25);
  --sso-accent:        #2B4A3D;   /* era #2563eb */
}

.singlesignon-login-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
}

.singlesignon-login-remember-hint { color: var(--gpl-soft); }

/* link "usar formulário do GLPI": fica FORA do card, sobre o verde.
   Precisa ser neutralizado em todos os estados — o plugin aplica
   underline no hover e o Tabler injeta fundo de botão.             */
.singlesignon-login-classic .btn-link,
.singlesignon-login-classic .btn-link:hover,
.singlesignon-login-classic .btn-link:focus,
.singlesignon-login-classic .btn-link:focus-visible,
.singlesignon-login-classic .btn-link:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  --tblr-btn-bg: transparent;
  --tblr-btn-hover-bg: transparent;
  --tblr-btn-active-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
}
.singlesignon-login-classic .btn-link { color: rgba(239, 237, 215, .75) !important; }
.singlesignon-login-classic .btn-link:hover,
.singlesignon-login-classic .btn-link:focus-visible { color: var(--gpl-bone) !important; }


/* ---------- 3. Formulário ---------- */

h2.card-header,
div.card-header {
  background: transparent;
  border-bottom: 1px solid var(--gpl-line);
  color: var(--gpl-ink);
  font-weight: 400;
  letter-spacing: -.02em;
}

/* label = eyebrow do DS */
label.form-label {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gpl-soft);
}

/* input = .field do DS: só linha inferior */
body .form-control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(43, 74, 61, .32);
  border-radius: 0;
  padding: 12px 0;
  color: var(--gpl-ink);
  box-shadow: none;
  transition: border-color .3s var(--gpl-ease);
}
body .form-control:focus {
  border-bottom-color: var(--gpl-deep);
  box-shadow: none;
}

/* checkbox — mata o amarelo #FEC95C herdado do tema "original" */
.form-check-input:checked {
  background-color: var(--gpl-deep) !important;
  border-color: var(--gpl-deep) !important;
}
.form-check-input:focus {
  border-color: var(--gpl-sage);
  box-shadow: 0 0 0 .2rem rgba(43, 74, 61, .18);
}

/* botão = pílula uppercase do DS */
button.btn.btn-primary,
.btn-primary {
  background: var(--gpl-deep);
  border-color: var(--gpl-deep);
  color: var(--gpl-bone);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 14px 28px;
  transition: all .4s var(--gpl-ease);
}
button.btn.btn-primary:hover,
.btn-primary:hover {
  background: var(--gpl-ink);
  border-color: var(--gpl-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(30, 56, 44, .5);
}

.btn-outline-primary,
.btn-ghost-primary {
  color: var(--gpl-deep);
  border-color: var(--gpl-deep);
}

a       { color: var(--gpl-deep); }
a:hover { color: var(--gpl-ink); }

span.form-label-description,
span.form-description {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--gpl-soft);
}


/* ---------- 4. Rodapé ----------
   .text-muted aparece em dois contextos com fundos opostos:
   fora do card (sobre o verde) e dentro do card (sobre o Osso).   */

.container-tight > .text-center.text-muted,
.container-tight > .text-center.text-muted p,
.container-tight > .text-center.text-muted a {
  color: rgba(239, 237, 215, .7) !important;
}
.container-tight > .text-center.text-muted a:hover { color: var(--gpl-bone) !important; }

.singlesignon-login .text-muted,
body .card .text-muted { color: var(--gpl-soft) !important; }