/*
 * Identidade visual iDBA / TSysmon para a tela de login do Centreon
 * Arquivo: /usr/share/centreon/www/idba/idba-login.css
 *
 * Todas as regras usam :has(#loginHeader). Esse id existe só na
 * página de login, então o resto do Centreon não é afetado.
 */

:root {
  --idba-azul: #025991;
  --idba-azul-medio: #117095;
  --idba-teal: #229d9a;
  --idba-card: #0a1e2d;
  --idba-card-borda: rgba(148, 163, 184, 0.14);
  --idba-input: #0a101d;
  --idba-input-borda: #242c47;
  --idba-texto: #e2e8f0;
  --idba-texto-suave: #94a3b8;
  --idba-icone: #5c6b84;
  --idba-rodape: #9fbec7;
  --idba-erro: #f87171;
  --idba-raio-card: 22px;
  --idba-raio: 12px;
}

/* ---------- Fundo ----------
   Só na página de login: tem #loginHeader e não tem o cabeçalho/menu
   do Centreon (assim a prévia em Administração não é afetada). */
html:has(#loginHeader):not(:has(header, nav)),
html:has(#loginHeader):not(:has(header, nav)) body {
  min-height: 100%;
  background:
    radial-gradient(ellipse 60% 55% at 86% 18%, rgba(255, 255, 255, 0.09), transparent 70%),
    linear-gradient(120deg, var(--idba-azul) 0%, var(--idba-azul-medio) 45%, var(--idba-teal) 100%) fixed !important;
}

/* todos os contêineres entre o body e o card ficam transparentes */
html:has(#loginHeader):not(:has(header, nav)) #root,
html:has(#loginHeader):not(:has(header, nav)) #root *:has(.MuiPaper-root > #loginHeader) {
  background: transparent !important;
}

/* esconde o wallpaper configurado no Centreon (qualquer imagem fora do card) */
html:has(#loginHeader):not(:has(header, nav)) #root img:not(.MuiPaper-root img),
html:has(#loginHeader):not(:has(header, nav)) #root .MuiSkeleton-root:not(.MuiPaper-root .MuiSkeleton-root) {
  display: none !important;
}

/* ---------- Card ---------- */
.MuiPaper-root:has(> #loginHeader) {
  position: relative;
  overflow: visible;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-top: 96px;
  padding: 40px 40px 28px;
  row-gap: 28px;
  background: var(--idba-card) !important;
  background-image: none !important;
  color: var(--idba-texto);
  border: 1px solid var(--idba-card-borda);
  border-radius: var(--idba-raio-card);
  box-shadow: 0 32px 64px -24px rgba(1, 22, 40, 0.65), 0 2px 6px rgba(1, 22, 40, 0.25);
}

/* rodapé abaixo do card */
.MuiPaper-root:has(> #loginHeader)::after {
  content: "iDBA · Monitoramento especialista";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--idba-rodape);
}

/* ---------- Cabeçalho: logo fora do card, título e subtítulo ---------- */
#loginHeader {
  text-align: center;
  width: 100%;
}

/* logo iDBA branco acima do card (arquivo idba-logo.png, o mesmo da
   Central de Alertas); o logo da personalização do Centreon fica oculto */
#loginHeader img {
  display: none !important;
}

.MuiPaper-root:has(> #loginHeader)::before {
  content: "";
  position: absolute;
  top: -82px;
  left: 50%;
  transform: translateX(-50%);
  width: 132px;
  height: 60px;
  background: url("/centreon/idba/idba-logo.png") center / contain no-repeat;
}

/* nome da plataforma (Administração > personalização do login) */
#loginHeader .MuiTypography-h4 {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffffff 0%, #c9f4ef 55%, #9fe8de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#loginHeader::after {
  content: "TACTICS SYSTEM MONITOR";
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--idba-texto-suave);
}

/* título "Login" do Centreon: não existe na identidade */
.MuiPaper-root:has(> #loginHeader) > .MuiTypography-h5 {
  display: none;
}

/* texto personalizado (se usado) */
.MuiPaper-root:has(> #loginHeader) [contenteditable],
.MuiPaper-root:has(> #loginHeader) [contenteditable] * {
  color: var(--idba-texto-suave) !important;
}

/* ---------- Formulário ---------- */
.MuiPaper-root:has(> #loginHeader) > div:has(form) {
  width: 100%;
}

.MuiPaper-root:has(> #loginHeader) form {
  row-gap: 22px !important;
}

/* rótulos fixos acima do campo, em caixa alta */
.MuiPaper-root:has(> #loginHeader) .MuiFormControl-root {
  margin-top: 22px;
}

.MuiPaper-root:has(> #loginHeader) .MuiInputLabel-root {
  transform: translate(2px, -24px) scale(1) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--idba-texto-suave) !important;
  max-width: 100% !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiInputLabel-asterisk {
  display: none;
}

/* campo */
.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-root {
  min-height: 48px;
  border-radius: var(--idba-raio) !important;
  background: var(--idba-input) !important;
  color: var(--idba-texto) !important;
  padding-left: 14px;
}

.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-input {
  color: var(--idba-texto) !important;
  caret-color: var(--idba-teal);
  font-size: 15px;
}

.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--idba-input-borda) !important;
  border-radius: var(--idba-raio) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* sem o recorte do rótulo na borda */
.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-notchedOutline legend {
  max-width: 0.01px !important;
  padding: 0 !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #33406a !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--idba-teal) !important;
  box-shadow: 0 0 0 3px rgba(34, 157, 154, 0.22);
}

.MuiPaper-root:has(> #loginHeader) .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--idba-erro) !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiInputAdornment-root,
.MuiPaper-root:has(> #loginHeader) .MuiInputAdornment-root svg {
  color: var(--idba-icone) !important;
  margin-top: 0 !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiInputAdornment-positionEnd .MuiIconButton-root:hover svg {
  color: var(--idba-texto-suave) !important;
}

.MuiPaper-root:has(> #loginHeader) .MuiFormHelperText-root {
  margin: 6px 2px 0;
  color: var(--idba-erro) !important;
  font-size: 12px;
}

/* preenchimento automático do navegador */
.MuiPaper-root:has(> #loginHeader) input:-webkit-autofill,
.MuiPaper-root:has(> #loginHeader) input:-webkit-autofill:hover,
.MuiPaper-root:has(> #loginHeader) input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--idba-input) inset !important;
  -webkit-text-fill-color: var(--idba-texto) !important;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- Botão ---------- */
.MuiPaper-root:has(> #loginHeader) form .MuiButton-root {
  min-height: 50px;
  margin-top: 6px;
  border-radius: var(--idba-raio) !important;
  background: linear-gradient(90deg, #045c91 0%, #137c96 50%, #229e9a 100%) !important;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 10px 24px -10px rgba(34, 157, 154, 0.55) !important;
  transition: filter 0.15s, transform 0.15s, opacity 0.15s;
}

.MuiPaper-root:has(> #loginHeader) form .MuiButton-root:hover {
  filter: brightness(1.08);
}

.MuiPaper-root:has(> #loginHeader) form .MuiButton-root:active {
  transform: translateY(1px);
}

.MuiPaper-root:has(> #loginHeader) form .MuiButton-root.Mui-disabled {
  opacity: 0.45;
  box-shadow: none !important;
}

/* provedores externos (SAML/OIDC), se houver */
.MuiPaper-root:has(> #loginHeader) .MuiButton-outlined {
  border-color: var(--idba-input-borda) !important;
  color: var(--idba-texto) !important;
  border-radius: var(--idba-raio) !important;
}

/* ---------- Telas pequenas ---------- */
@media (max-width: 480px) {
  .MuiPaper-root:has(> #loginHeader) {
    padding: 32px 22px 24px !important;
  }
  #loginHeader .MuiTypography-h4 {
    font-size: 34px;
  }
  #loginHeader::after {
    letter-spacing: 0.18em;
  }
}

/* ---------- Powered by / versão ---------- */
.MuiPaper-root:has(> #loginHeader) > div:last-child .MuiTypography-body2 {
  color: #64748b !important;
  font-size: 12px;
}

/* ---------- Tela de carregamento do Centreon ----------
   (logo "Centreon is loading..." que aparece antes do login e logo
   após entrar): troca pelo fundo e logo iDBA */
div[class$="-loader"]:has(> .MuiTypography-root) {
  background:
    radial-gradient(ellipse 60% 55% at 86% 18%, rgba(255, 255, 255, 0.09), transparent 70%),
    linear-gradient(120deg, var(--idba-azul) 0%, var(--idba-azul-medio) 45%, var(--idba-teal) 100%) !important;
}

div[class$="-loader"]:has(> .MuiTypography-root) > :not(.MuiTypography-root) {
  display: none !important;
}

div[class$="-loader"]:has(> .MuiTypography-root)::before {
  content: "";
  width: 150px;
  height: 68px;
  background: url("/centreon/idba/idba-logo.png") center / contain no-repeat;
}

/* troca "Centreon is loading..." por "Carregando..." */
div[class$="-loader"]:has(> .MuiTypography-root) > .MuiTypography-root {
  font-size: 0 !important;
}

div[class$="-loader"]:has(> .MuiTypography-root) > .MuiTypography-root::after {
  content: "Carregando...";
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}