@charset "UTF-8";
/*
 * Donato Login — tema "Tecnológico" com vidro líquido
 * Tudo fica dentro de body.dn-login: se o JS não rodar, o GLPI
 * mostra a tela padrão, sem nada quebrado.
 */

body.dn-login {
  --dn-blue: #0076C0;
  --dn-blue-hover: #0A84D1;
  --dn-blue-light: #5DB4EC;
  --dn-bg: #050B14;
  --dn-text: #F2F6FA;
  --dn-text-2: #DCE5EE;
  --dn-muted: #A7B6C8;
  --dn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dn-sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  background: var(--dn-bg) !important;
  color: var(--dn-text) !important;
  font-family: var(--dn-sans) !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Camadas de fundo */
body.dn-login .dn-mesh,
body.dn-login .dn-vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
body.dn-login .dn-mesh { display: block; }
body.dn-login .dn-vignette {
  background: radial-gradient(ellipse at center, rgba(5,11,20,0) 40%, rgba(5,11,20,0.85) 100%);
}

/* Remove os fundos claros do Tabler/GLPI */
body.dn-login .page,
body.dn-login .page-anonymous,
body.dn-login .container,
body.dn-login .container-fluid,
body.dn-login .container-tight,
body.dn-login .page-wrapper,
body.dn-login main,
body.dn-login .flex-fill {
  background: transparent !important;
}
body.dn-login .page-anonymous,
body.dn-login > *:not(.dn-mesh):not(.dn-vignette):not(script):not(style) {
  position: relative;
  z-index: 1;
}

/* Logo original do GLPI: escondido (o Donato vai para dentro do cartão) */
body.dn-login .glpi-logo,
body.dn-login .dn-wrap > .text-center:has(.glpi-logo),
body.dn-login [title="GLPI"]:not(a) { display: none !important; }

/* Coluna central */
body.dn-login .dn-wrap {
  max-width: 440px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Selo "SUPORTE TI" */
body.dn-login .dn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(14,26,44,0.55);
  border: 1px solid rgba(143,203,242,0.2);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--dn-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #C9D6E3;
}
body.dn-login .dn-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #32D583;
  box-shadow: 0 0 10px rgba(50,213,131,0.8);
}

/* Cartão de vidro */
body.dn-login .dn-card {
  width: 100%;
  border-radius: 28px !important;
  background: rgba(12,22,38,0.55) !important;
  border: 1px solid rgba(143,203,242,0.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,118,192,0.12),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04) !important;
  color: var(--dn-text) !important;
}
body.dn-login .dn-card .card-body { padding: 40px 40px 36px !important; }
body.dn-login .dn-card .row { margin: 0 !important; }
body.dn-login .dn-card .row > [class*="col"] {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cabeçalho novo (logo + título) e título antigo escondido */
body.dn-login .dn-card .card-header { display: none !important; }
body.dn-login .dn-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  margin-bottom: 28px;
}
body.dn-login .dn-logo {
  width: 112px;
  height: auto;
  display: block;
}
body.dn-login .dn-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dn-text);
}
body.dn-login .dn-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dn-muted);
}

/* Rótulos e link "Esqueceu sua senha?" */
body.dn-login .dn-card .form-label {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dn-text-2) !important;
  margin-bottom: 8px !important;
}
body.dn-login .dn-card .form-label-description {
  margin-left: auto;
  font-weight: 500;
}
body.dn-login .dn-card a { color: var(--dn-blue-light) !important; text-decoration: none; }
body.dn-login .dn-card a:hover { color: #8FCBF2 !important; text-decoration: underline; }

/* Campos */
body.dn-login .dn-card .form-control,
body.dn-login .dn-card .form-select {
  height: 52px;
  padding: 0 16px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background-color: rgba(255,255,255,0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--dn-text) !important;
  font-family: var(--dn-sans);
  font-size: 16px !important;
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
body.dn-login .dn-card .form-select { padding-right: 40px; }
body.dn-login .dn-card .form-select option { background: #0C1626; color: var(--dn-text); }
body.dn-login .dn-card .form-control::placeholder { color: #7D8DA1; }
body.dn-login .dn-card .form-control:focus,
body.dn-login .dn-card .form-select:focus {
  outline: none;
  background-color: rgba(255,255,255,0.09) !important;
  border-color: rgba(93,180,236,0.7) !important;
  box-shadow: 0 0 0 4px rgba(0,118,192,0.28), 0 0 24px rgba(0,118,192,0.25) !important;
}
/* Autopreenchimento do navegador sem fundo amarelo/branco */
body.dn-login .dn-card .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--dn-text);
  -webkit-box-shadow: 0 0 0 1000px #121D2D inset !important;
  caret-color: var(--dn-text);
}

/* Botão mostrar/ocultar senha */
body.dn-login .dn-pass-wrap { position: relative; }
body.dn-login .dn-pass-wrap .form-control { padding-right: 56px; }
body.dn-login .dn-eye {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--dn-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
body.dn-login .dn-eye:hover { color: var(--dn-text); }

/* "Lembrar de mim" como switch */
body.dn-login .dn-card .form-check {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-left: 0 !important;
  margin: 0 !important;
  color: var(--dn-text-2) !important;
  font-size: 15px;
  cursor: pointer;
}
body.dn-login .dn-card .form-check-input {
  -webkit-appearance: none;
  appearance: none;
  float: none !important;
  flex: none;
  position: relative;
  width: 46px !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(167,182,200,0.3) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
  cursor: pointer;
  transition: background-color .2s ease;
}
body.dn-login .dn-card .form-check-input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: left .2s ease;
}
body.dn-login .dn-card .form-check-input:checked { background-color: var(--dn-blue) !important; }
body.dn-login .dn-card .form-check-input:checked::after { left: 21px; }
body.dn-login .dn-card .form-check-label { color: var(--dn-text-2) !important; }

/* Botão Entrar */
body.dn-login .dn-card .btn-primary,
body.dn-login .dn-card button[type="submit"] {
  height: 52px;
  margin-top: 4px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--dn-blue) !important;
  color: #FFFFFF !important;
  font-family: var(--dn-sans);
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 0 0 1px rgba(143,203,242,0.3),
    0 10px 30px rgba(0,118,192,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
body.dn-login .dn-card .btn-primary:hover,
body.dn-login .dn-card button[type="submit"]:hover {
  background: var(--dn-blue-hover) !important;
  box-shadow:
    0 0 0 1px rgba(143,203,242,0.5),
    0 12px 36px rgba(0,118,192,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
body.dn-login .dn-card .btn-primary:active { transform: scale(0.98); }

/* Foco visível para teclado */
body.dn-login .dn-card .btn:focus-visible,
body.dn-login .dn-eye:focus-visible,
body.dn-login .dn-card .form-check-input:focus-visible {
  outline: 3px solid rgba(93,180,236,0.6);
  outline-offset: 2px;
}

/* Textos gerais dentro do cartão (telas de erro e recuperar senha) */
body.dn-login .dn-card h1:not(.dn-title),
body.dn-login .dn-card h2,
body.dn-login .dn-card h3,
body.dn-login .dn-card h4,
body.dn-login .dn-card .card-title { color: var(--dn-text) !important; }
body.dn-login .dn-card p,
body.dn-login .dn-card .text-muted,
body.dn-login .dn-card .form-hint { color: var(--dn-muted) !important; }

/* Alertas (senha incorreta, cookie inválido etc.) */
body.dn-login .dn-card .alert {
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin-bottom: 20px;
  background: rgba(247,144,9,0.10) !important;
  border: 1px solid rgba(247,144,9,0.35) !important;
  box-shadow: none !important;
  color: var(--dn-text-2) !important;
}
body.dn-login .dn-card .alert-danger {
  background: rgba(240,68,56,0.12) !important;
  border-color: rgba(240,68,56,0.38) !important;
}
body.dn-login .dn-card .alert-success {
  background: rgba(18,183,106,0.12) !important;
  border-color: rgba(18,183,106,0.38) !important;
}
body.dn-login .dn-card .alert::before { display: none !important; }
body.dn-login .dn-card .alert .alert-title,
body.dn-login .dn-card .alert h4,
body.dn-login .dn-card .alert .text-warning,
body.dn-login .dn-card .alert .text-danger {
  color: #FDB022 !important;
  font-weight: 600;
}
body.dn-login .dn-card .alert-danger .alert-title,
body.dn-login .dn-card .alert-danger h4 { color: #FDA29B !important; }
body.dn-login .dn-card .alert .text-muted,
body.dn-login .dn-card .alert p { color: var(--dn-text-2) !important; }
body.dn-login .dn-card .alert .alert-icon,
body.dn-login .dn-card .alert > div > div > i,
body.dn-login .dn-card .alert .ti { color: #FDB022 !important; }
body.dn-login .dn-card .alert .btn {
  margin-top: 16px;
  width: 100%;
  text-decoration: none !important;
}

/* Botões em forma de link (ex.: "Faça login novamente") */
body.dn-login .dn-card a.btn {
  height: 52px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--dn-blue) !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 0 0 1px rgba(143,203,242,0.3),
    0 10px 30px rgba(0,118,192,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
body.dn-login .dn-card a.btn:hover {
  background: var(--dn-blue-hover) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* Telas sem título próprio: menos espaço sob o cabeçalho */
body.dn-page-error .dn-head { margin-bottom: 20px; }

/* Painel lateral (SSO), se existir */
body.dn-login .dn-card .row > .col-auto { margin-top: 24px !important; }

/* Rodapé */
body.dn-login .dn-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 28px;
  text-align: center;
  font-family: var(--dn-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dn-muted) !important;
}
body.dn-login .dn-footer a { color: var(--dn-muted) !important; }
body.dn-login .dn-footer a:hover { color: var(--dn-text) !important; }

/* Celular */
@media (max-width: 480px) {
  body.dn-login .dn-wrap { padding-left: 16px; padding-right: 16px; gap: 22px; }
  body.dn-login .dn-card .card-body { padding: 32px 24px 28px !important; }
  body.dn-login .dn-logo { width: 96px; }
  body.dn-login .dn-title { font-size: 22px; }
}

/* Sem suporte a vidro: cartão sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.dn-login .dn-card { background: rgba(12,22,38,0.94) !important; }
  body.dn-login .dn-pill { background: rgba(14,26,44,0.94); }
}