/* ============================================================
   THE ACTIVE PHARM — branded auth screens (login, forgot/reset/
   set password, sign up). Everything here is scoped under .ap-auth,
   a class only ever added to .auth-split-card when the resolved
   entity is The Active Pharm (entityId 2000) — every other tenant's
   login/forgot-password/reset-password/set-password screens render
   through the exact same shared template completely untouched.

   Reuses the entity's own --auth-accent-start/--auth-accent-end
   (already injected inline per-entity from loginGradientStart/End —
   #21436C -> #0f2942 for Active Pharm) rather than hardcoding brand
   color here, so this stays correct if that DB config ever changes.
   Montserrat, generous radius, pill buttons/badges — the same bubbly
   language as the customer shop redesign (active-pharm-shop.css),
   turned up louder for this one moment: the first thing a customer
   sees before they've even signed in.
   ============================================================ */

.ap-auth {
	--ap-auth-cyan: #27c8f6;
	--ap-auth-radius: 32px;
	--ap-auth-radius-md: 18px;
	--ap-auth-radius-sm: 12px;
	--ap-auth-radius-pill: 999px;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	border-radius: var(--ap-auth-radius) !important;
	box-shadow:
		0 2px 8px rgba(15, 23, 42, 0.06),
		0 24px 60px -12px rgba(15, 23, 42, 0.22),
		0 60px 120px -24px rgba(15, 41, 66, 0.28) !important;
}
.ap-auth * { box-sizing: border-box; }

/* ---------- Hero: gradient + texture + prominent logo ---------- */
.ap-auth .auth-split-hero {
	padding: 3.75rem 3.25rem !important;
	overflow: hidden;
}
/* Dot-grid texture — faint, so it reads as material rather than noise */
.ap-auth .auth-split-hero {
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,0.14) 1.5px, transparent 0);
	background-size: 22px 22px;
	background-blend-mode: overlay;
}
/* Bigger, brighter ambient orbs than the generic template — one navy,
   one cyan, so the tenant's secondary accent shows up even though the
   hero background itself is just the two brand gradient stops. */
.ap-auth.auth-split-card .auth-split-hero::before {
	width: 720px; height: 720px; top: -220px; right: -220px;
	background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
}
.ap-auth.auth-split-card .auth-split-hero::after {
	width: 620px; height: 620px; bottom: -180px; left: -160px;
	background: radial-gradient(circle, var(--ap-auth-cyan) 0%, transparent 70%);
	opacity: 0.28;
}
/* Oversized decorative capsule mark — the same "pill/peptide" glyph used
   throughout the shop, huge and faint, so the brand motif carries over
   into the one screen that isn't wrapped in .ap-shell. */
.ap-auth .auth-split-hero-inner { position: relative; z-index: 2; }
.ap-auth .auth-split-hero::before,
.ap-auth .auth-split-hero::after { z-index: 0; }
.ap-auth .auth-split-hero-decor {
	position: absolute; z-index: 1; pointer-events: none;
	font-size: 15rem; color: rgba(255,255,255,0.07);
	right: -2.5rem; bottom: -3rem; transform: rotate(18deg); line-height: 1;
}

/* Eyebrow — pill chip instead of a plain uppercase label */
.ap-auth .auth-split-eyebrow {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.22);
	color: #fff !important;
	padding: 0.4rem 0.9rem 0.4rem 0.7rem;
	border-radius: var(--ap-auth-radius-pill, 999px);
	backdrop-filter: blur(6px);
	font-weight: 700;
}
.ap-auth .auth-split-eyebrow::before {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ap-auth-cyan) !important;
}

/* Logo badge — floating white rounded card so the mark pops off any
   gradient, dark or light, instead of sitting bare on the background. */
.ap-auth .auth-split-logo-wrap {
	background: #fff;
	border-radius: 22px;
	padding: 1rem 1.4rem;
	box-shadow: 0 16px 40px -12px rgba(0,0,0,0.35);
	margin-bottom: 2.25rem;
}
.ap-auth .auth-split-logo-wrap img { max-width: 220px; max-height: 64px; }

.ap-auth .auth-split-headline {
	font-family: inherit;
	font-weight: 750;
	letter-spacing: -0.02em;
	font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem) !important;
}
.ap-auth .auth-split-sub { font-size: 0.92rem !important; line-height: 1.65 !important; }
.ap-auth .auth-split-divider {
	background: linear-gradient(90deg, var(--ap-auth-cyan), rgba(255,255,255,0.15)) !important;
	width: 56px !important; height: 3px !important; border-radius: 3px;
}

.ap-auth .auth-split-features li { font-size: 0.86rem !important; padding: 0.5rem 0 !important; }
.ap-auth .auth-split-features li i {
	width: 22px !important; height: 22px !important;
	background: rgba(39,200,246,0.18) !important;
	color: var(--ap-auth-cyan) !important;
	font-size: 0.62rem !important;
}

/* ---------- Form side ---------- */
.ap-auth .auth-split-form { padding: 3.5rem 3rem !important; }
.ap-auth .auth-form-heading h1,
.ap-auth .auth-form-heading h2 {
	font-family: inherit; font-weight: 750 !important; letter-spacing: -0.01em;
	font-size: 1.65rem !important;
}
.ap-auth .auth-form-heading p { font-size: 0.86rem !important; }

.ap-auth .auth-form .auth-field label { font-weight: 650 !important; font-size: 0.8rem !important; }
.ap-auth .auth-form .auth-field .form-control {
	border-radius: var(--ap-auth-radius-md) !important;
	height: 3rem !important;
	border: 1.5px solid var(--ap-border-strong, #cbd5e1) !important;
	background: #f8fafc !important;
	font-size: 0.9rem !important;
}
.ap-auth .auth-form .auth-field .form-control:focus {
	border-color: var(--auth-accent-start, #21436c) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent-start, #21436c) 12%, transparent) !important;
	background: #fff !important;
}
.ap-auth .auth-form .auth-actions .auth-forgot-link,
.ap-auth .auth-footer-link a {
	color: var(--auth-accent-start, #21436c) !important;
	font-weight: 700 !important;
}

/* Submit button — full pill, brand gradient, glow on hover */
.ap-auth .btn-auth-submit {
	border-radius: var(--ap-auth-radius-pill, 999px) !important;
	height: 3.25rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--auth-accent-start, #21436c) 65%, transparent);
}
.ap-auth .btn-auth-submit:hover:not(:disabled) {
	box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--auth-accent-start, #21436c) 75%, transparent) !important;
}

.ap-auth .auth-password-toggle { color: var(--ap-muted, #64748b) !important; }
.ap-auth .auth-password-toggle:hover { color: var(--auth-accent-start, #21436c) !important; }

/* User identity card (reset-password) */
.ap-auth .auth-user-identity {
	border-radius: var(--ap-auth-radius-md) !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
}
.ap-auth .auth-user-identity__avatar--initials {
	background: linear-gradient(135deg, var(--auth-accent-start, #21436c), var(--auth-accent-end, #0f2942)) !important;
}

/* Password checklist */
.ap-auth .auth-password-checklist .checklist-row.is-valid .checklist-icon { color: #15803d !important; }
.ap-auth .auth-password-success {
	border-radius: var(--ap-auth-radius-md) !important;
	background: #f0fdf4 !important; border-color: #bbf7d0 !important;
}

/* Inline alerts */
.ap-auth .auth-alert { border-radius: var(--ap-auth-radius-md) !important; }

/* Success panel (sign-up submitted, password set) */
.ap-auth .auth-success-panel__icon {
	width: 72px !important; height: 72px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--auth-accent-start, #21436c), var(--auth-accent-end, #0f2942)) !important;
	color: #fff !important;
	font-size: 1.9rem !important;
	box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--auth-accent-start, #21436c) 60%, transparent);
}
.ap-auth .auth-success-panel h2 { font-weight: 750 !important; }
.ap-auth .btn-auth-submit[href] { text-decoration: none; }

/* ---------- 2FA OTP ---------- */
.ap-auth .auth-2fa-shield {
	border-radius: 26px !important;
	width: 68px !important; height: 68px !important;
	background: linear-gradient(135deg, var(--auth-accent-start, #21436c), var(--auth-accent-end, #0f2942)) !important;
	box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--auth-accent-start, #21436c) 55%, transparent);
}
.ap-auth .auth-2fa-otp__box {
	border-radius: var(--ap-auth-radius-md) !important;
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	font-weight: 700;
}
.ap-auth .auth-2fa-otp__box:focus,
.ap-auth .auth-2fa-otp__box.is-filled {
	border-color: var(--auth-accent-start, #21436c) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent-start, #21436c) 12%, transparent) !important;
}
.ap-auth .auth-2fa-link { color: var(--auth-accent-start, #21436c) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	.ap-auth { border-radius: 26px !important; }
	.ap-auth .auth-split-hero { padding: 2rem 1.75rem !important; }
	.ap-auth .auth-split-hero-decor { display: none; }
	.ap-auth .auth-split-logo-wrap { padding: 0.75rem 1.1rem; margin-bottom: 1.25rem; border-radius: 16px; }
	.ap-auth .auth-split-logo-wrap img { max-width: 170px; max-height: 46px; }
	.ap-auth .auth-split-form { padding: 2rem 1.75rem !important; }
}
@media (max-width: 576px) {
	.ap-auth { border-radius: 20px !important; }
	.ap-auth .auth-split-eyebrow { padding: 0.3rem 0.7rem 0.3rem 0.55rem; }
}

/* ---------- Dark visitor theme (form side only — the hero is always
   on-brand-dark regardless of the visitor's OS/app preference) ---------- */
[data-theme-mode="dark"] .ap-auth .auth-split-form { background: #14181f !important; }
[data-theme-mode="dark"] .ap-auth .auth-form .auth-field .form-control {
	background: #1b212b !important; border-color: #2a3342 !important; color: #f1f5f9 !important;
}
[data-theme-mode="dark"] .ap-auth .auth-form .auth-field .form-control:focus { background: #1f2632 !important; }
[data-theme-mode="dark"] .ap-auth .auth-user-identity { background: #1b212b !important; border-color: #2a3342 !important; }
[data-theme-mode="dark"] .ap-auth .auth-2fa-otp__box { background: #1b212b !important; border-color: #2a3342 !important; color: #f1f5f9 !important; }