/* ==========================================================================
   Smartfyn — authentication pages (sign in, staff sign in, password reset)
   Shared stylesheet. Layered on top of the Metronic bundles; every selector
   is namespaced with `auth-` so nothing collides with the theme.
   ========================================================================== */

/* These pages intentionally skip the Metronic theme bundle, so they carry their own
   reset. Without this, width:100% + padding overflows on elements the browser does
   not box-size for us (anchors styled as buttons, most notably). */
.auth-body,
.auth-body *,
.auth-body *::before,
.auth-body *::after {
	box-sizing: border-box;
}

.auth-body {
	--auth-brand-from: #0b3fb0;
	--auth-brand-to: #2f8bff;
	--auth-accent: #1a6ff5;
	--auth-accent-hover: #1560db;
	--auth-accent-soft: #eef4ff;
	--auth-ink: #16181d;
	--auth-muted: #6b7280;
	--auth-line: #e3e6ed;
	--auth-surface: #ffffff;
	--auth-canvas: #f6f8fc;

	margin: 0;
	background: var(--auth-canvas);
	color: var(--auth-ink);
	font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Staff / admin portal — deliberately darker so it reads as an internal system */
.auth-body.auth--admin {
	--auth-brand-from: #0b1220;
	--auth-brand-to: #1e293b;
	--auth-accent: #0ea5e9;
	--auth-accent-hover: #0284c7;
	--auth-accent-soft: #eff8ff;
	--auth-canvas: #eef1f6;
}

/* ---------- Shell ---------- */
.auth {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: 100vh;
}

/* ---------- Brand panel ---------- */
.auth-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3.5rem 3.25rem;
	overflow: hidden;
	background: linear-gradient(150deg, var(--auth-brand-from) 0%, var(--auth-brand-to) 100%);
	color: #fff;
}

/* soft light blooms */
.auth-brand::before,
.auth-brand::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.auth-brand::before {
	width: 460px;
	height: 460px;
	top: -170px;
	right: -140px;
	background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 68%);
}

.auth-brand::after {
	width: 560px;
	height: 560px;
	bottom: -260px;
	left: -180px;
	background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%);
}

.auth-brand-inner,
.auth-brand-foot {
	position: relative;
	z-index: 1;
}

.auth-brand-logo {
	display: block;
	height: 34px;
	width: auto;
	margin-bottom: 3rem;
}

.auth-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .85rem;
	margin-bottom: 1.5rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .12);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.auth-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

.auth-brand-title {
	margin: 0 0 1rem;
	font-size: 1.8rem;
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
}

/* the brand panel is always light-on-dark, whatever the base stylesheet says */
.auth-brand h1,
.auth-brand h2,
.auth-brand p,
.auth-brand span,
.auth-brand li {
	color: inherit;
}

.auth-brand-sub {
	margin: 0 0 2.5rem;
	max-width: 30rem;
	font-size: .76rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}

.auth-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.15rem;
	max-width: 30rem;
}

.auth-point {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
}

.auth-point-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .2);
}

.auth-point-title {
	display: block;
	font-weight: 600;
	font-size: .72rem;
	margin-bottom: .15rem;
}

.auth-point-text {
	display: block;
	font-size: .66rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

.auth-brand-foot {
	font-size: .64rem;
	color: rgba(255, 255, 255, .65);
}

.auth-brand-foot a {
	color: rgba(255, 255, 255, .9);
	text-decoration: underline;
}

/* ---------- Form side ---------- */
.auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	background: var(--auth-canvas);
}

.auth-card {
	width: 100%;
	max-width: 27rem;
}

.auth-card-logo {
	display: none;
	height: 32px;
	width: auto;
	margin: 0 auto 2rem;
}

.auth-title {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--auth-ink);
}

.auth-notice-title,
.auth-title {
	color: var(--auth-ink);
}

.auth-sub {
	margin: 0 0 2rem;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--auth-muted);
}

.auth-sub a {
	color: var(--auth-accent);
	font-weight: 600;
	text-decoration: none;
}

.auth-sub a:hover {
	text-decoration: underline;
}

/* ---------- Alert ---------- */
.auth-alert {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .85rem 1rem;
	margin-bottom: 1.5rem;
	border-radius: .75rem;
	border: 1px solid #f6c6d1;
	background: #fff5f8;
	color: #c0304f;
	font-size: .72rem;
	line-height: 1.5;
}

.auth-alert svg {
	flex: 0 0 auto;
	margin-top: .1rem;
}

/* ---------- Fields ---------- */
.auth-field {
	margin-bottom: 1.35rem;
}

.auth-label {
	display: block;
	margin-bottom: .5rem;
	font-size: .72rem;
	font-weight: 600;
	color: #374151;
}

.auth-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .5rem;
}

.auth-label-row .auth-label {
	margin-bottom: 0;
}

.auth-link {
	font-size: .72rem;
	font-weight: 600;
	color: var(--auth-accent);
	text-decoration: none;
}

.auth-link:hover {
	color: var(--auth-accent-hover);
	text-decoration: underline;
}

.auth-input {
	position: relative;
	display: flex;
	align-items: center;
}

.auth-input-icon {
	position: absolute;
	left: 1rem;
	display: inline-flex;
	color: #9aa3b2;
	pointer-events: none;
}

.auth-input input {
	width: 100%;
	height: 2.65rem;
	padding: 0 1rem 0 2.5rem;
	border: 1px solid var(--auth-line);
	border-radius: .8rem;
	background: var(--auth-surface);
	color: var(--auth-ink);
	font-size: .8rem;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input input::placeholder {
	color: #a8afbc;
}

.auth-input input:focus {
	outline: none;
	border-color: var(--auth-accent);
	box-shadow: 0 0 0 4px var(--auth-accent-soft);
}

.auth-input:focus-within .auth-input-icon {
	color: var(--auth-accent);
}

.auth-input.has-toggle input {
	padding-right: 2.6rem;
}

.auth-toggle {
	position: absolute;
	right: .55rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: .55rem;
	background: transparent;
	color: #9aa3b2;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.auth-toggle:hover {
	background: #f1f3f7;
	color: var(--auth-accent);
}

.auth-toggle .auth-eye-off {
	display: none;
}

.auth-toggle.is-visible .auth-eye-on {
	display: none;
}

.auth-toggle.is-visible .auth-eye-off {
	display: block;
}

.auth-hint {
	margin: .5rem 0 0;
	font-size: .68rem;
	line-height: 1.5;
	color: var(--auth-muted);
}

/* ---------- Buttons ---------- */
.auth-btn {
	display: flex;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	height: 2.65rem;
	padding: 0 1.25rem;
	border: 1px solid transparent;
	border-radius: .8rem;
	background: var(--auth-accent);
	color: #fff;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.auth-btn:hover {
	background: var(--auth-accent-hover);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 .55rem 1.4rem rgba(26, 111, 245, .28);
	transform: translateY(-1px);
}

.auth-btn:disabled {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.auth-btn-ghost {
	background: var(--auth-surface);
	border-color: var(--auth-line);
	color: #374151;
}

.auth-btn-ghost:hover {
	background: #fbfcfe;
	border-color: #cfd5e0;
	color: var(--auth-ink);
	box-shadow: 0 .4rem 1rem rgba(15, 23, 42, .07);
}

.auth-btn-google img {
	height: 20px;
	width: 20px;
}

.auth-spinner {
	width: 1.05rem;
	height: 1.05rem;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: auth-spin .6s linear infinite;
}

@keyframes auth-spin {
	to {
		transform: rotate(360deg);
	}
}

.auth-stack {
	display: grid;
	gap: .85rem;
	margin-top: 1.75rem;
}

/* ---------- Google (rendered by Google Identity Services) ---------- */
.auth-google {
	display: flex;
	justify-content: center;
	min-height: 44px;
}

.auth-google>div {
	max-width: 100%;
	min-width: 0;
}

/* ---------- Separator ---------- */
.auth-or {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
	color: #9aa3b2;
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.auth-or::before,
.auth-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--auth-line);
}

/* ---------- Back link / footer ---------- */
.auth-back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.5rem;
	font-size: .74rem;
	font-weight: 600;
	color: var(--auth-muted);
	text-decoration: none;
}

.auth-back:hover {
	color: var(--auth-accent);
}

.auth-foot {
	margin-top: 2.25rem;
	font-size: .66rem;
	color: #9aa3b2;
	text-align: center;
}

/* ---------- Notice (expired link, success) ---------- */
.auth-notice {
	padding: 2rem 1.5rem;
	border: 1px solid var(--auth-line);
	border-radius: 1rem;
	background: var(--auth-surface);
	text-align: center;
}

.auth-notice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: #fff5f8;
	color: #f1416c;
}

.auth-notice-title {
	margin: 0 0 .6rem;
	font-size: .98rem;
	font-weight: 700;
}

.auth-notice-text {
	margin: 0;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--auth-muted);
}

/* ---------- One-time code ---------- */
.auth-otp-input {
	padding-left: 1rem !important;
	text-align: center;
	font-size: 1.15rem !important;
	font-weight: 600;
	letter-spacing: .5em;
	text-indent: .5em;
}

.auth-otp-input::placeholder {
	letter-spacing: .4em;
	font-weight: 400;
}

.auth-linkbtn {
	display: inline-block;
	margin-top: 1rem;
	padding: .25rem .35rem;
	border: 0;
	background: none;
	color: var(--auth-accent);
	font-family: inherit;
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
}

.auth-linkbtn:hover:not(:disabled) {
	color: var(--auth-accent-hover);
	text-decoration: underline;
}

.auth-linkbtn:disabled {
	color: #9aa3b2;
	cursor: default;
}

/* Icon sizing lives here rather than in the markup, so the scale stays in one file. */
.auth-point-icon svg {
	width: 15px;
	height: 15px;
}

.auth-input-icon svg {
	width: 15px;
	height: 15px;
}

.auth-toggle svg {
	width: 16px;
	height: 16px;
}

.auth-back svg {
	width: 14px;
	height: 14px;
}

.auth-alert svg {
	width: 15px;
	height: 15px;
}

.auth-btn-google img {
	height: 18px;
	width: 18px;
}

/* ---------- SweetAlert2 dialogs ----------
   SweetAlert2 ships at a large default scale (32em popup, 1.875em title) that
   dwarfs this page's type. Its internals are sized in `em` relative to
   .swal2-popup, so one font-size here scales the whole dialog proportionally.
   Loaded after plugins.bundle.css, so these win on equal specificity. */
.swal2-popup {
	font-size: .72rem;
	border-radius: 1rem;
	font-family: inherit;
}

.swal2-popup .swal2-title {
	color: var(--auth-ink);
	font-weight: 700;
	font-size: 1rem;
	padding-top: .6em;
}

.swal2-popup .swal2-html-container {
	color: var(--auth-muted);
	font-weight: 400;
	font-size: .75rem;
	margin-top: 1em;
}

.swal2-popup .swal2-actions {
	margin: 1.6rem auto .6rem auto;
}

.swal2-popup .swal2-styled.swal2-confirm {
	min-width: 7.6rem;
	padding: .72rem 2.6rem;
	border-radius: .7rem;
	background-color: var(--auth-accent);
	font-size: .78rem;
	font-weight: 600;
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
	background-color: var(--auth-accent-hover);
}

.swal2-popup .swal2-styled.swal2-confirm:focus {
	box-shadow: 0 0 0 4px var(--auth-accent-soft) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	.auth-brand {
		padding: 3rem 2.5rem;
	}

	.auth-brand-title {
		font-size: 1.6rem;
	}
}

@media (max-width: 991.98px) {
	.auth {
		grid-template-columns: 1fr;
	}

	.auth-brand {
		display: none;
	}

	.auth-card-logo {
		display: block;
	}

	.auth-main {
		padding: 2.5rem 1.25rem;
		background: var(--auth-canvas);
	}

	.auth-card {
		max-width: 26rem;
		padding: 2rem 1.75rem 2.25rem;
		border-radius: 1.1rem;
		background: var(--auth-surface);
		box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, .08);
	}

	.auth-title,
	.auth-sub {
		text-align: center;
	}
}

@media (max-width: 575.98px) {
	.auth-main {
		padding: 1.5rem 1rem;
	}

	.auth-card {
		padding: 1.75rem 1.35rem 2rem;
	}

	.auth-title {
		font-size: 1.3rem;
	}
}