/* ASASI360 admin login — split auth layout (16px rem base = ASASI360 scale) */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

:root {
  --asasi-brand: #0b3d4a;
  --asasi-brand-hover: #0f4f5f;
  --asasi-brand-deep: #072a33;
  --asasi-mist: #e7f3f4;
  --asasi-soft: #f4f7f8;
}

/* CRITICAL: login.min.css sets html{font-size:10px} which shrinks all rem units.
   ASASI360 / Tailwind assume 16px. Force correct root size. */
html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
}

* { box-sizing: border-box; }

html,
body.asasi-auth-body,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  zoom: normal !important;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  background: var(--asasi-soft) !important;
}

.asasi-auth-shell {
  display: grid !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .asasi-auth-shell {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Brand panel */
.asasi-auth-brand {
  position: relative;
  display: none;
  overflow: hidden;
  color: #fff;
  background: var(--asasi-brand);
  min-height: 100vh;
}

@media (min-width: 992px) {
  .asasi-auth-brand {
    display: flex !important;
    flex-direction: column;
  }
}

.asasi-auth-brand-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(45, 212, 191, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(56, 189, 248, 0.28), transparent 50%),
    radial-gradient(ellipse 60% 50% at 70% 90%, rgba(251, 146, 60, 0.22), transparent 55%),
    linear-gradient(160deg, #072a33 0%, #0b3d4a 42%, #115e59 100%);
}

.asasi-auth-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.asasi-auth-orb-1 {
  left: -4rem; top: 6rem;
  width: 14rem; height: 14rem;
  border: 1px solid rgba(204, 251, 241, 0.2);
  background: rgba(94, 234, 212, 0.1);
  animation: asasi-drift 9s ease-in-out infinite;
}
.asasi-auth-orb-2 {
  right: 2.5rem; top: 7rem;
  width: 7rem; height: 7rem;
  border-radius: 2rem;
  background: rgba(125, 211, 252, 0.15);
  animation: asasi-float 7s ease-in-out infinite;
}
.asasi-auth-orb-3 {
  left: 33%; bottom: 9rem;
  width: 5rem; height: 5rem;
  background: rgba(253, 186, 116, 0.2);
  animation: asasi-float 8.5s ease-in-out 0.8s infinite;
}

@keyframes asasi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes asasi-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -10px) scale(1.04); }
}
@keyframes asasi-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.asasi-auth-brand-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.5rem;
}

.asasi-auth-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  letter-spacing: -0.02em;
  animation: asasi-rise 0.7s ease-out both;
}
.asasi-auth-brand-link.is-dark { color: var(--asasi-brand) !important; }
.asasi-auth-mark {
  width: 2.75rem !important;
  height: 2.75rem !important;
}

.asasi-auth-brand-copy {
  max-width: 28rem;
  margin: 2.5rem auto;
  animation: asasi-rise 0.7s ease-out 0.12s both;
}
.asasi-auth-illo {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto 2.5rem;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.25));
  animation: asasi-float 7s ease-in-out infinite;
}
.asasi-auth-headline {
  margin: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 3rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-transform: none !important;
}
@media (max-width: 1199px) {
  .asasi-auth-headline { font-size: 2.5rem !important; }
}
.asasi-auth-tagline {
  margin: 0.85rem 0 0 !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: rgba(204, 251, 241, 0.95) !important;
  text-transform: none !important;
}
.asasi-auth-lead {
  margin: 1rem 0 0 !important;
  max-width: 24rem;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: rgba(240, 253, 250, 0.85) !important;
}
.asasi-auth-brand-foot {
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: rgba(204, 251, 241, 0.6) !important;
  animation: asasi-rise 0.7s ease-out 0.24s both;
}

/* Form panel */
.asasi-auth-main {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 3rem 1.5rem !important;
  background:
    radial-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
    var(--asasi-soft) !important;
  background-size: 22px 22px, auto !important;
}

@media (min-width: 640px) {
  .asasi-auth-main { padding: 3.5rem 2.5rem !important; }
}
@media (min-width: 1200px) {
  .asasi-auth-main { padding-left: 5rem !important; padding-right: 5rem !important; }
}

.asasi-auth-mobile-brand {
  margin: 0 auto 2rem !important;
  width: 100%;
  max-width: 26rem;
}
@media (min-width: 992px) {
  .asasi-auth-mobile-brand { display: none !important; }
}

/* Card — ASASI: max-w-[26rem], p-7 / sm:p-9, rounded-[1.75rem] */
.asasi-auth-card {
  width: 100% !important;
  max-width: 26rem !important;
  margin: 0 auto !important;
  padding: 2.25rem !important;
  border-radius: 1.75rem !important;
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.35) !important;
  animation: asasi-rise 0.7s ease-out both;
}
@media (min-width: 640px) {
  .asasi-auth-card { padding: 2.5rem !important; }
}

.asasi-auth-card-head { margin-bottom: 1.75rem !important; }
.asasi-auth-eyebrow {
  margin: 0 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(15, 118, 110, 0.7) !important;
}

/* ASASI title: text-3xl = 1.875rem / 30px */
.asasi-auth-card-head h1,
.asasi-auth-card-head h2,
.asasi-auth-card h1,
.asasi-auth-card h2 {
  margin: 0.5rem 0 0 !important;
  padding: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
  text-align: left !important;
  text-transform: none !important;
}

.asasi-auth-subtitle {
  margin: 0.5rem 0 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

.asasi-auth-alert {
  margin: 0 0 1.1rem !important;
  padding: 0.9rem 1.1rem !important;
  border-radius: 1rem !important;
  font-size: 0.9375rem !important;
}
.asasi-auth-alert.is-info { background: var(--asasi-mist); color: var(--asasi-brand-deep); }
.asasi-auth-alert.is-success { background: #ecfdf5; color: #14532d; }
.asasi-auth-alert.is-danger { background: #fef2f2; color: #991b1b; }

.asasi-auth-form .asasi-field,
.asasi-auth-form .form-group {
  margin-bottom: 1.25rem !important;
}
.asasi-field label,
.asasi-auth-form label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
  color: #334155 !important;
  text-transform: none !important;
}

/* Base field chrome (ASASI min-h-12 / rounded-2xl) */
.asasi-auth-form .form-control,
.asasi-auth-form-wrap .form-control,
.asasi-auth-card input.form-control,
.asasi-auth-card input.asasi-input,
.asasi-auth-card input[type="text"],
.asasi-auth-card input[type="password"],
.asasi-auth-card input[type="email"] {
  width: 100% !important;
  height: auto !important;
  min-height: 3rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #0f172a !important;
}

/* Icon fields: never let icons overlap typed text (ASASI pl-11+ clearance) */
.asasi-input-wrap {
  position: relative !important;
}
.asasi-input-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: auto !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.asasi-input-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Full padding shorthand so theme rules cannot wipe left inset */
.asasi-input-wrap .form-control,
.asasi-input-wrap input.form-control,
.asasi-input-wrap input.asasi-input,
.asasi-input-wrap input[type="text"],
.asasi-input-wrap input[type="password"],
.asasi-input-wrap input[type="email"] {
  padding: 0.75rem 1rem 0.75rem 3.25rem !important; /* 52px left — icon ends ~36px */
  text-indent: 0 !important;
}

.asasi-input-wrap--password .form-control,
.asasi-input-wrap--password input {
  padding: 0.75rem 3rem 0.75rem 3.25rem !important;
}
.asasi-auth-form .form-control:focus,
.asasi-auth-card input:focus {
  border-color: #0f766e !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18) !important;
  outline: none !important;
}

.asasi-auth-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin: 0.35rem 0 1.35rem !important;
  flex-wrap: wrap !important;
}
.asasi-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
.asasi-check input { width: 1rem; height: 1rem; }
.asasi-link {
  color: #0f766e !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}
.asasi-link:hover { color: var(--asasi-brand) !important; }

.asasi-auth-submit,
.asasi-auth-card .btn-primary,
.asasi-auth-card input[type="submit"].btn,
.asasi-auth-card button[type="submit"],
.asasi-auth-card .btn.btn-primary,
.asasi-auth-card input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 3rem !important;
  height: auto !important;
  margin-top: 0.35rem !important;
  padding: 0.85rem 1.1rem !important;
  border: 0 !important;
  border-radius: 1rem !important;
  background: #0b3d4a !important;
  color: #fff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.65) !important;
  cursor: pointer !important;
}
.asasi-auth-submit svg { width: 1rem !important; height: 1rem !important; flex-shrink: 0; }
.asasi-auth-submit:hover,
.asasi-auth-card .btn-primary:hover,
.asasi-auth-card input[type="submit"]:hover {
  background: #0f4f5f !important;
}

.asasi-auth-alt {
  margin: 1.25rem 0 0 !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: #64748b !important;
}
.asasi-auth-meta {
  width: 100% !important;
  max-width: 26rem !important;
  margin: 2rem auto 0 !important;
  text-align: center !important;
}
.asasi-auth-copy {
  margin: 1rem 0 0 !important;
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
}
.asasi-lang-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--asasi-brand) !important;
  border-radius: 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.85rem !important;
}

/* Neutralize WHMCS login.min.css wrappers */
.login-container,
.login-body,
body .login-container,
body .login-body {
  all: unset !important;
  display: contents !important;
}
.logo,
.poweredby,
.login-container > .footer {
  display: none !important;
}


/* =========================================================
   CLIENT LOGIN — match admin full-page auth (theme chrome off)
   ========================================================= */

body.asasi-auth-active,
body.asasi-auth-body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #f4f7f8 !important;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 16px !important;
}

html:has(body.asasi-auth-active),
html.asasi-auth-html {
  font-size: 16px !important;
}

/* Hide WHMCS chrome completely */
body.asasi-auth-active #header,
body.asasi-auth-active .master-breadcrumb,
body.asasi-auth-active #footer,
body.asasi-auth-active footer,
body.asasi-auth-active .asasi-sidebar-col,
body.asasi-auth-active .asasi-sidebar,
body.asasi-auth-active .asasi-sidebar-host,
body.asasi-auth-active .asasi-sidebar-backdrop,
body.asasi-auth-active .sidebar,
body.asasi-auth-active .btn-return-to-admin,
body.asasi-auth-active .network-status,
body.asasi-auth-active #asasiSidebarToggle,
body.asasi-auth-active .navbar,
body.asasi-auth-active .topbar {
  display: none !important;
}

/* Flatten theme wrappers so auth can fill viewport */
body.asasi-auth-active #main-body,
body.asasi-auth-active #main-body > .container,
body.asasi-auth-active #main-body .row,
body.asasi-auth-active #main-body .primary-content,
body.asasi-auth-active .primary-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
}

/* Full-viewport overlay identical to admin shell */
body.asasi-auth-active .asasi-auth-shell,
body.asasi-auth-active .asasi-auth-shell--client,
.asasi-auth-shell--client {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f4f7f8 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 992px) {
  body.asasi-auth-active .asasi-auth-shell--client,
  .asasi-auth-shell--client {
    grid-template-columns: 1fr 1fr !important;
  }
  body.asasi-auth-active .asasi-auth-shell--client .asasi-auth-brand,
  .asasi-auth-shell--client .asasi-auth-brand {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
}

body.asasi-auth-active .asasi-auth-shell--client .asasi-auth-brand {
  display: none;
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  background: #0b3d4a !important;
  min-height: 100vh !important;
}

body.asasi-auth-active .asasi-auth-main {
  min-height: 100vh !important;
}

body.asasi-auth-active .asasi-auth-form-wrap {
  width: 100% !important;
  max-width: 26rem !important;
  margin: 0 auto !important;
}

body.asasi-auth-active .asasi-auth-copy {
  width: 100%;
  max-width: 26rem;
  margin: 1.5rem auto 0 !important;
  text-align: center;
}

body.asasi-auth-active .providerLinkingFeedback,
body.asasi-auth-active .linked-accounts,
body.asasi-auth-active .social-signin {
  max-width: 26rem;
  margin: 1rem auto 0;
}

/* Password reveal control */
.asasi-input-wrap--password .asasi-reveal,
body.asasi-auth-active .asasi-reveal {
  position: absolute !important;
  right: 0.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  z-index: 3 !important;
  box-shadow: none !important;
  padding: 0.5rem !important;
}

/* Field labels inside client card */
.asasi-auth-card .form-control-label,
.asasi-auth-card label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
  color: #334155 !important;
  text-transform: none !important;
}

.asasi-auth-card .asasi-field,
.asasi-auth-card .form-group {
  margin-bottom: 1.25rem !important;
}

/* Back to website — client only */
.asasi-auth-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 3rem !important;
  margin-top: 0.75rem !important;
  padding: 0.85rem 1.1rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 1rem !important;
  background: #fff !important;
  color: #0b3d4a !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.asasi-auth-back svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
}
.asasi-auth-back:hover {
  background: #f8fafc !important;
  border-color: #0b3d4a !important;
  color: #0b3d4a !important;
  text-decoration: none !important;
}


/* Password reset extras */
.asasi-field-hint {
  margin: 0.5rem 0 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}
.asasi-auth-card .alert {
  border-radius: 1rem !important;
  border: 0 !important;
}