/*
  4Cloud custom login background
  Aplicar em:
  /usr/share/cloudstack-management/webapp/assets/custom/4cloud-login.css
*/

/* Fundo somente na área de login */
.user-layout {
  min-height: 100vh !important;
  background-image: url("/client/assets/custom/login-bg.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
}

/* Mantém a estrutura original do CloudStack */
.user-layout-container {
  position: relative !important;
  z-index: 2 !important;
}

/* Corrige alinhamento dos campos */
.user-layout-login .ant-input-affix-wrapper {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
  background: #ffffff !important;
  border-radius: 6px !important;
}

/* Corrige texto dentro dos inputs */
.user-layout-login .ant-input {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 !important;
  font-size: 16px !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Corrige ícones prefix/suffix */
.user-layout-login .ant-input-prefix,
.user-layout-login .ant-input-suffix {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: normal !important;
}

/* Corrige botão sem alterar largura original */
.user-layout-login button.login-button {
  height: 48px !important;
  line-height: 48px !important;
  font-size: 18px !important;
}

/* Remove qualquer interferência genérica anterior */
.user-layout-login form,
.user-layout-login .ant-form,
.user-layout-login .ant-form-item,
.user-layout-login .ant-form-item-control,
.user-layout-login .ant-form-item-control-input,
.user-layout-login .ant-form-item-control-input-content {
  line-height: normal !important;
}

/* ==========================================================
   4Cloud - Trocar abas do login por título "Console 4Cloud"
   ========================================================== */

/* Esconde a navegação original: Portal login | Single sign-on | ... */
.user-layout-login .ant-tabs-nav {
  display: none !important;
}

/* Remove espaçamento/padding gerado pelas tabs */
.user-layout-login .ant-tabs,
.user-layout-login .ant-tabs-content,
.user-layout-login .ant-tabs-tabpane {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cria o título customizado no topo do autenticador */
/*.user-layout-login::before {
  content: "Console";
  display: block;
  width: 100%;
  margin: 0 0 22px 0;
  padding: 0 0 14px 0;

  color: #1689e8;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;

  border-bottom: 3px solid #1689e8;
}

/* Garante que o card permita o pseudo-elemento */
.user-layout-login {
  position: relative !important;
}

/* ==========================================================
   4Cloud - Padronização da tela de 2FA / verify2FA
   ========================================================== */

/* Garante que o fundo apareça também na tela de 2FA */
#app,
.user-layout,
.user-layout-container {
  background-image: url("/client/assets/custom/login-bg.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
}

/* Remove aparência solta da tela 2FA e cria o mesmo card visual */
.user-layout-container:has(input[placeholder="xxxxxx"]) {
  max-width: 560px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 34px 42px 42px 42px !important;

  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(190, 215, 245, 0.9) !important;
  border-radius: 24px !important;

  box-shadow:
    0 24px 60px rgba(20, 70, 130, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Esconde a logo grande do Apache CloudStack na tela de 2FA */
.user-layout-container:has(input[placeholder="xxxxxx"]) .user-layout-logo {
  display: none !important;
}

/* Troca o título da tela 2FA para o padrão 4Cloud */
.user-layout-container:has(input[placeholder="xxxxxx"]) h1,
.user-layout-container:has(input[placeholder="xxxxxx"]) h2,
.user-layout-container:has(input[placeholder="xxxxxx"]) .title {
  font-size: 0 !important;
  margin: 0 0 18px 0 !important;
  text-align: left !important;
}

/* Título customizado */
.user-layout-container:has(input[placeholder="xxxxxx"]) h1::before,
.user-layout-container:has(input[placeholder="xxxxxx"]) h2::before,
.user-layout-container:has(input[placeholder="xxxxxx"]) .title::before {
  content: "Console 4Cloud";
  display: block;
  color: #087ee8;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

/* Subtítulo customizado */
.user-layout-container:has(input[placeholder="xxxxxx"]) h1::after,
.user-layout-container:has(input[placeholder="xxxxxx"]) h2::after,
.user-layout-container:has(input[placeholder="xxxxxx"]) .title::after {
  content: "Autenticação em duas etapas";
  display: block;
  margin-top: 6px;
  padding-bottom: 16px;
  color: rgba(60, 80, 110, 0.68);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid #1689e8;
}

/* Texto explicativo do 2FA */
.user-layout-container:has(input[placeholder="xxxxxx"]) p {
  color: rgba(35, 45, 60, 0.72) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* Campo do código 2FA */
.user-layout-container:has(input[placeholder="xxxxxx"]) .ant-input-affix-wrapper {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

/* Texto dentro do campo 2FA */
.user-layout-container:has(input[placeholder="xxxxxx"]) .ant-input {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  background: transparent !important;
}

/* Botão Verify */
.user-layout-container:has(input[placeholder="xxxxxx"]) button,
.user-layout-container:has(input[placeholder="xxxxxx"]) .ant-btn-primary {
  height: 44px !important;
  min-width: 140px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;

  background: linear-gradient(90deg, #129cf3 0%, #0870d6 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(8, 112, 214, 0.22) !important;
}/*
  ==========================================================
  4Cloud - Patch visual exclusivo para tela verify2FA
  Arquivo destino:
  /usr/share/cloudstack-management/webapp/assets/custom/4cloud-login.css

  Requer:
  /usr/share/cloudstack-management/webapp/assets/custom/4cloud-auth-route.js

  Este bloco depende da classe:
  body.cs-4cloud-verify2fa
  ==========================================================
*/

/* Fundo também na tela 2FA */
body.cs-4cloud-verify2fa,
body.cs-4cloud-verify2fa #app,
body.cs-4cloud-verify2fa .user-layout {
  min-height: 100vh !important;
  background-image: url("/client/assets/custom/login-bg.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
}

/* Centraliza a área da autenticação 2FA */
body.cs-4cloud-verify2fa .user-layout-container {
  width: 100% !important;
  max-width: 560px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 34px 42px 42px 42px !important;
  position: relative !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(190, 215, 245, 0.95) !important;
  border-radius: 24px !important;

  box-shadow:
    0 24px 60px rgba(20, 70, 130, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Remove logo grande Apache CloudStack somente no 2FA */
body.cs-4cloud-verify2fa .user-layout-logo {
  display: none !important;
}

/* Título próprio */
body.cs-4cloud-verify2fa .user-layout-container::before {
  content: "Console 4Cloud";
  display: block;
  width: 100%;
  margin: 0 0 6px 0;

  color: #087ee8;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

/* Subtítulo próprio */
body.cs-4cloud-verify2fa .user-layout-container::after {
  content: "Autenticação em duas etapas";
  display: block;
  width: 100%;
  margin: 0 0 22px 0;
  padding: 0 0 16px 0;

  color: rgba(60, 80, 110, 0.68);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;

  border-bottom: 3px solid #1689e8;
}

/* Esconde o título original "Two Factor Authentication" */
body.cs-4cloud-verify2fa .user-layout-container h1,
body.cs-4cloud-verify2fa .user-layout-container h2,
body.cs-4cloud-verify2fa .user-layout-container h3 {
  display: none !important;
}

/* Ajusta textos explicativos */
body.cs-4cloud-verify2fa .user-layout-container p,
body.cs-4cloud-verify2fa .user-layout-container div {
  color: rgba(35, 45, 60, 0.72);
}

/* Evita que textos internos fiquem enormes ou desalinhados */
body.cs-4cloud-verify2fa .user-layout-container p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 0 8px 0 !important;
}

/* Campo 2FA */
body.cs-4cloud-verify2fa .user-layout-container .ant-input-affix-wrapper {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Input real do código */
body.cs-4cloud-verify2fa .user-layout-container .ant-input {
  height: 42px !important;
  min-height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Ícone do olho */
body.cs-4cloud-verify2fa .user-layout-container .ant-input-suffix,
body.cs-4cloud-verify2fa .user-layout-container .ant-input-prefix {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}

/* Botão Verify */
body.cs-4cloud-verify2fa .user-layout-container .ant-btn,
body.cs-4cloud-verify2fa .user-layout-container button {
  height: 44px !important;
  min-width: 140px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 44px !important;
}

/* Botão primário */
body.cs-4cloud-verify2fa .user-layout-container .ant-btn-primary {
  background: linear-gradient(90deg, #129cf3 0%, #0870d6 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(8, 112, 214, 0.22) !important;
}

/* Ajuste para altura baixa */
@media (max-height: 720px) {
  body.cs-4cloud-verify2fa .user-layout-container {
    top: auto !important;
    transform: none !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* Ajuste mobile */
@media (max-width: 700px) {
  body.cs-4cloud-verify2fa .user-layout-container {
    width: 92% !important;
    max-width: 420px !important;
    padding: 28px 24px 34px 24px !important;
  }
}