/* =========================================================
   ASANI AUTH CSS — isolated login/setup page design
   Purpose: keep login pages independent from dashboard app.css.
   Loaded after app.css from src/views/layouts/auth.php.
   ========================================================= */

body.asani-auth-modern-body {
  min-height: 100vh !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 10% 25%, rgba(15, 127, 116, .12), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(32, 166, 106, .10), transparent 30%),
    linear-gradient(135deg, #f8fbfa 0%, #eff7f5 45%, #fbfcfd 100%) !important;
  color: #061d1a !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.asani-auth-modern-body::before,
body.asani-auth-modern-body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: .58;
}

body.asani-auth-modern-body::before {
  left: -70px;
  bottom: -90px;
  width: 560px;
  height: 470px;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(15,127,116,.08) 18% 19%, transparent 19% 36%, rgba(15,127,116,.07) 36% 37%, transparent 37%),
    linear-gradient(68deg, transparent 0 34%, rgba(15,127,116,.08) 34% 35%, transparent 35%),
    radial-gradient(ellipse at 35% 88%, rgba(15,127,116,.16), transparent 56%);
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
}

body.asani-auth-modern-body::after {
  left: 270px;
  bottom: -60px;
  width: 490px;
  height: 200px;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(15,127,116,.10) 45%, transparent 46%),
    linear-gradient(35deg, transparent 0 58%, rgba(15,127,116,.08) 59%, transparent 60%);
  clip-path: polygon(0 100%, 22% 42%, 38% 68%, 54% 18%, 73% 62%, 100% 30%, 100% 100%);
}

body.asani-auth-modern-body a {
  color: #0f7f74;
  text-decoration: none;
}

body.asani-auth-modern-body .mobile-auth-alert {
  position: fixed !important;
  z-index: 50 !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(460px, calc(100vw - 34px)) !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, .12) !important;
}

body.asani-auth-modern-body .mobile-auth-alert.error {
  background: #fff0f0 !important;
  color: #b42318 !important;
  border: 1px solid rgba(180, 35, 24, .20) !important;
}

body.asani-auth-modern-body .mobile-auth-alert.success {
  background: #ecfdf3 !important;
  color: #067647 !important;
  border: 1px solid rgba(6, 118, 71, .20) !important;
}

body.asani-auth-modern-body .asani-auth-modern,
body.asani-auth-modern-body .asani-auth-modern *,
body.asani-auth-modern-body .asani-auth-modern *::before,
body.asani-auth-modern-body .asani-auth-modern *::after {
  box-sizing: border-box !important;
}

.asani-auth-modern {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: clamp(18px, 3vw, 42px) clamp(20px, 6vw, 112px) !important;
  background: transparent !important;
}

.asani-auth-modern-header {
  width: min(1480px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-logo,
.asani-auth-modern-logo:hover {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: auto !important;
  padding: 0 !important;
  color: #071f1d !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-logo-mark,
.asani-auth-card-logo {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #0f7f74 0%, #0a665e 100%) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 34px rgba(15,127,116,.22) !important;
}

.asani-auth-modern-logo-text strong {
  display: block !important;
  margin: 0 !important;
  color: #071f1d !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
}

.asani-auth-modern-logo-text small {
  display: block !important;
  margin-top: 5px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.asani-auth-modern-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

.asani-env-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #334155 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.asani-env-badge i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: currentColor !important;
  display: inline-block !important;
}

.asani-env-badge.env-live { background: #ecfdf3 !important; color: #067647 !important; border-color: #bbf7d0 !important; }
.asani-env-badge.env-test { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.asani-env-badge.env-demo { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }

.asani-auth-modern .auth-lang-switch,
.asani-auth-modern-lang {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 42px !important;
  padding: 4px !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.asani-auth-modern .auth-lang-switch a,
.asani-auth-modern-lang a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #667085 !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.asani-auth-modern .auth-lang-switch a.active,
.asani-auth-modern-lang a.active {
  background: #0f7f74 !important;
  color: #fff !important;
}

.asani-auth-modern-main {
  width: min(1280px, 100%) !important;
  margin: auto !important;
  padding: clamp(28px, 4vw, 70px) 0 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 490px) !important;
  align-items: center !important;
  gap: clamp(36px, 7vw, 112px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-hero {
  max-width: 620px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  min-height: 0 !important;
  padding: 9px 12px !important;
  margin: 0 0 28px !important;
  border: 1px solid rgba(15,127,116,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.62) !important;
  color: #0f7f74 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.asani-auth-modern-hero h1 {
  max-width: 650px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #041b18 !important;
  font-size: clamp(48px, 5.4vw, 76px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -.075em !important;
}

.asani-auth-modern-subtitle {
  max-width: 480px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  color: #536273 !important;
  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.38 !important;
  font-weight: 650 !important;
}

.asani-auth-modern-features {
  display: grid !important;
  gap: 18px !important;
  max-width: 520px !important;
  margin: 42px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-feature {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-feature .feature-icon {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #e6f7f3 !important;
  color: #0f7f74 !important;
  border: 1px solid rgba(15,127,116,.13) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.asani-auth-modern-feature strong {
  display: block !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

.asani-auth-modern-feature small {
  display: block !important;
  margin-top: 4px !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
}

.asani-auth-modern-card {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 36px) !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  border-radius: 34px !important;
  box-shadow: 0 30px 90px rgba(16,24,40,.12) !important;
  backdrop-filter: blur(14px) !important;
}

.asani-auth-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
}

.asani-auth-card-head strong {
  display: block !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.05em !important;
}

.asani-auth-card-head span {
  display: block !important;
  margin-top: 5px !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.asani-auth-demo-panel {
  margin: 0 0 24px !important;
  padding: 0 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e9edf2 !important;
  box-shadow: none !important;
}

.asani-auth-demo-title {
  margin: 0 0 13px !important;
  color: #344054 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.asani-auth-demo-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.asani-auth-demo-grid a {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 17px !important;
  background: #fff !important;
  border: 1px solid #dfe7ee !important;
  color: #0f7f74 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(16,24,40,.04) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.asani-auth-demo-grid a span {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  background: #e9f8f4 !important;
  color: #0f7f74 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.asani-auth-demo-grid a b {
  color: #0f7f74 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

.asani-auth-demo-grid a:hover,
.asani-auth-demo-grid a:focus {
  transform: translateY(-1px) !important;
  border-color: rgba(15,127,116,.34) !important;
  box-shadow: 0 14px 26px rgba(15,127,116,.10) !important;
  background: #fbfffd !important;
}

.asani-auth-modern-form {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.asani-auth-modern-form label {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

.asani-auth-modern-form label > span {
  color: #344054 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.asani-auth-input-wrap {
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid #dce3eb !important;
  border-radius: 17px !important;
  padding: 0 16px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

.asani-auth-input-wrap:focus-within {
  border-color: #0f7f74 !important;
  box-shadow: 0 0 0 4px rgba(15,127,116,.10) !important;
}

.asani-auth-input-wrap i {
  width: 18px !important;
  color: #667085 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.asani-auth-input-wrap input {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #101828 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.asani-auth-input-wrap input:focus {
  box-shadow: none !important;
  border: 0 !important;
}

.asani-auth-input-wrap input::placeholder {
  color: #98a2b3 !important;
  opacity: 1 !important;
}

.asani-auth-modern-form button {
  height: 60px !important;
  min-height: 60px !important;
  width: 100% !important;
  margin-top: 8px !important;
  border: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: linear-gradient(135deg, #0f8c80 0%, #08766b 100%) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 18px 32px rgba(8,118,107,.22) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}

.asani-auth-modern-form button span {
  font-size: 22px !important;
  line-height: 1 !important;
}

.asani-auth-modern-form button:hover,
.asani-auth-modern-form button:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 24px 38px rgba(8,118,107,.25) !important;
}

.asani-auth-setup-link {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

.asani-auth-setup-link a {
  color: #0f7f74 !important;
  font-weight: 950 !important;
}

.asani-auth-secure-note {
  margin: 26px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #98a2b3 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 750 !important;
}

@media (max-width: 980px) {
  .asani-auth-modern {
    padding: 16px !important;
  }

  .asani-auth-modern-main {
    width: min(560px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding-top: 28px !important;
  }

  .asani-auth-modern-hero {
    max-width: 560px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .asani-auth-modern-kicker {
    margin-bottom: 16px !important;
  }

  .asani-auth-modern-hero h1 {
    font-size: clamp(38px, 9vw, 58px) !important;
    margin: 0 auto !important;
  }

  .asani-auth-modern-subtitle {
    margin: 16px auto 0 !important;
    font-size: 17px !important;
  }

  .asani-auth-modern-features {
    display: none !important;
  }

  .asani-auth-modern-card {
    border-radius: 28px !important;
  }
}

@media (max-width: 620px) {
  .asani-auth-modern-header {
    align-items: flex-start !important;
  }

  .asani-auth-modern-logo-mark {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }

  .asani-auth-modern-logo-text small {
    display: none !important;
  }

  .asani-auth-modern-logo-text strong {
    font-size: 22px !important;
  }

  .asani-auth-modern-header-actions {
    gap: 8px !important;
  }

  .asani-env-badge {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .asani-auth-modern-lang a {
    min-width: 34px !important;
  }

  .asani-auth-modern-main {
    padding-top: 22px !important;
  }

  .asani-auth-modern-hero {
    width: 100% !important;
    text-align: left !important;
  }

  .asani-auth-modern-subtitle {
    margin-left: 0 !important;
  }

  .asani-auth-demo-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .asani-auth-modern-card {
    padding: 20px !important;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .asani-auth-modern-main {
    padding-top: 26px !important;
  }

  .asani-auth-modern-hero h1 {
    font-size: 58px !important;
  }

  .asani-auth-modern-features {
    margin-top: 28px !important;
    gap: 14px !important;
  }

  .asani-auth-modern-card {
    padding: 26px !important;
  }
}