/* SMART + Sicher Mattermost Login Design v9 clean */

html,
body,
#root {
  min-height: 100% !important;
  background: #050b14 !important;
}

.header-footer-route-container {
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(0, 255, 136, 0.22), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(33, 212, 253, 0.17), transparent 32%),
    radial-gradient(circle at 50% 96%, rgba(0, 255, 136, 0.08), transparent 40%),
    linear-gradient(135deg, #050b14 0%, #07111f 44%, #0b1f2a 100%) !important;
}

.header-footer-route-container,
.header-footer-route-container *,
.login-body,
.login-body-content,
.login-body-message,
.login-body-action {
  background-image: none !important;
}

.header-footer-route-container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}

.login-body,
.hfroute-footer {
  position: relative !important;
  z-index: 2 !important;
}

.hfroute-header,
.header-main,
.header-logo-link,
.freeBadge {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.login-body {
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px 92px !important;
  background: transparent !important;
}

.login-body-content {
  width: min(1180px, calc(100vw - 96px)) !important;
  max-width: 1180px !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 520px) minmax(420px, 520px) !important;
  gap: 72px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.login-body-message.custom-branding,
.login-body-action,
.login-body-card.custom-branding,
.login-body-card {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.login-body-message.custom-branding {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 500px !important;
  padding: 42px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(0, 255, 136, 0.22) !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(7, 17, 31, 0.97)) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.login-body-action {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
}

.login-body-card.custom-branding,
.login-body-card {
  position: relative !important;
  z-index: 4 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(0, 255, 136, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(7, 17, 31, 0.98)) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  overflow: hidden !important;
}

.login-body-card-content {
  padding: 44px !important;
  background: transparent !important;
}

.login-body-custom-branding-image {
  width: min(240px, 70%) !important;
  max-height: 240px !important;
  object-fit: contain !important;
  margin: 0 auto 28px !important;
  border-radius: 30px !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 136, 0.30),
    0 28px 76px rgba(0, 0, 0, 0.48),
    0 0 56px rgba(0, 255, 136, 0.14) !important;
}

.login-body-custom-branding-markdown,
.login-body-custom-branding-markdown p {
  color: #cbd5e1 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.login-body-custom-branding-markdown strong {
  color: #ffffff !important;
  font-size: 20px !important;
}

.login-body-card .login-body-custom-branding-markdown {
  display: none !important;
}

.login-body-card-title {
  margin: 0 0 28px !important;
  color: #f8fafc !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.login-body-alternate-link,
.alternate-link {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 0 18px 0 !important;
  text-align: right !important;
  color: #94a3b8 !important;
}

.alternate-link__link {
  color: #21d4fd !important;
  font-weight: 700 !important;
}

.login-body-card-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.Input_container,
.login-body-card-form-input {
  margin: 0 !important;
}

.Input_fieldset {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.Input_legend,
.Input_legend___focus,
label.Input_legend {
  display: block !important;
  position: static !important;
  transform: none !important;
  margin: 0 0 8px 2px !important;
  padding: 0 !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.Input_wrapper {
  position: relative !important;
  background: transparent !important;
}

.Input.form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.50) !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 252, 0.97) !important;
  color: #0f172a !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

.Input.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.24) !important;
  outline: none !important;
}

.password-input {
  position: relative !important;
}

.password-input-with-toggle input {
  padding-right: 56px !important;
}

.password-input-toggle {
  position: absolute !important;
  right: 8px !important;
  bottom: 6px !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #334155 !important;
}

.login-body-card-form-link {
  margin-top: -4px !important;
  text-align: right !important;
}

.login-body-card-form-link a {
  color: #21d4fd !important;
  font-weight: 700 !important;
}

.login-body-card-form-button-submit,
button[type="submit"],
.btn.btn-primary {
  min-height: 52px !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #00ff88 0%, #21d4fd 100%) !important;
  color: #03120a !important;
  font-weight: 900 !important;
  box-shadow:
    0 16px 40px rgba(0, 255, 136, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.login-body-card-form-button-submit:hover,
button[type="submit"]:hover,
.btn.btn-primary:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

.hfroute-footer {
  min-height: 44px !important;
  padding: 0 24px 18px !important;
  background: transparent !important;
  color: rgba(203, 213, 225, 0.62) !important;
  border: 0 !important;
}

.hfroute-footer,
.hfroute-footer a,
.footer-link,
.footer-copyright {
  color: rgba(203, 213, 225, 0.70) !important;
  font-size: 13px !important;
}

a,
a:visited {
  color: #21d4fd !important;
  text-decoration: none !important;
}

a:hover {
  color: #00ff88 !important;
  text-decoration: underline !important;
}

@media (max-width: 1150px) {
  .login-body-content {
    width: min(560px, calc(100vw - 40px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .login-body-message.custom-branding,
  .login-body-action,
  .login-body-card.custom-branding,
  .login-body-card {
    max-width: 560px !important;
  }

  .login-body-message.custom-branding {
    min-height: auto !important;
  }
}

@media (max-width: 900px) {
  .login-body {
    align-items: flex-start !important;
    padding: 24px 16px 92px !important;
  }

  .login-body-card-content {
    padding: 28px !important;
  }

  .login-body-card-title {
    font-size: 24px !important;
  }
}