/* ==========================================================================
   mraaliEMI auth screen — faithful port of the real mraaliERP React/Tailwind
   login page (G:\Dev\NodeProjects\mraalierp\frontend\src\components\Auth\
   LoginPage.jsx) to plain EJS + CSS + vanilla JS. Colors, spacing, radii and
   animation timings are matched 1:1 to that source; only the marquee content
   differs (icon-based product cards instead of invoice screenshots, per the
   client's request) and interactions use CSS transitions instead of Framer
   Motion. Self-contained stylesheet, loaded only by layouts/auth.ejs.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
	--parrot: #00B712;
	--parrot-dark: #008C0E;
	--gold: #F2C01C;
	--ink: #0f172a;
	--slate-400: #94a3b8;
	--slate-600: #475569;
	--slate-700: #334155;
	--border: #e2e8f0;
}

body.auth-page {
	margin: 0;
	background: #fff;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.auth-shell {
	display: flex;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

/* ---------------------------------------------------------------- form side */

.auth-shell__form {
	flex: 0 0 48%;
	max-width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 64px;
	position: relative;
	background: #fff;
	margin: 12px;
	border-radius: 40px;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.3);
	z-index: 10;
}

.auth-form-inner { width: 100%; max-width: 384px; margin: 0 auto; }

@media (max-width: 991px) {
	.auth-shell__form { flex: 1 1 100%; max-width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
	.auth-shell__hero { display: none; }
}

.auth-brand { position: absolute; top: 32px; left: 32px; }
.auth-brand img { width: 200px; height: auto; display: block; }

.auth-heading h1 { font-size: 30px; font-weight: 900; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.02em; }
.auth-heading p { color: var(--slate-400); font-size: 14px; margin: 0 0 32px; }

.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; font-size: 14px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.auth-field .field-row { position: relative; }
.auth-field input {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
	transition: border-color .15s, box-shadow .15s;
	outline: none;
}
.auth-field input::placeholder { color: var(--slate-400); }
.auth-field input:focus {
	border-color: var(--parrot);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(0, 183, 18, 0.1);
}
.auth-field .toggle-password {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--slate-400);
	font-size: 17px;
}
.auth-field .toggle-password:hover { color: var(--parrot); }
.auth-field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-field-label-row label { margin-bottom: 0; }
.auth-field-label-row a { font-size: 12px; font-weight: 700; color: var(--parrot); text-decoration: none; }
.auth-field-label-row a:hover { color: var(--parrot-dark); }

.auth-remember { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; cursor: pointer; }
.auth-remember input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.auth-remember .checkmark {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .15s;
	flex-shrink: 0;
}
.auth-remember input:checked ~ .checkmark { background: var(--parrot); border-color: var(--parrot); }
.auth-remember .checkmark svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .1s; }
.auth-remember input:checked ~ .checkmark svg { opacity: 1; }
.auth-remember span.label-text { font-size: 14px; font-weight: 500; color: var(--slate-600); }

.auth-submit {
	width: 100%;
	border: 0;
	border-radius: 12px;
	padding: 14px;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .02em;
	color: #fff;
	background: var(--parrot);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 183, 18, 0.35);
	transition: background .15s, transform .1s;
}
.auth-submit:hover { background: var(--parrot-dark); }
.auth-submit:active { transform: scale(0.98); }

.auth-footnote { text-align: center; font-size: 12px; color: var(--slate-400); margin-top: 24px; }
.auth-footnote a { color: var(--parrot); font-weight: 700; text-decoration: none; }
.auth-footnote a:hover { text-decoration: underline; }

.auth-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fef2f2;
	border: 1px solid #fee2e2;
	color: #dc2626;
	font-size: 14px;
	font-weight: 600;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 20px;
}
.auth-alert i { font-size: 16px; flex-shrink: 0; }

/* ---------------------------------------------------------------- hero side */

.auth-shell__hero {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 48px 0;
}

/* horizontal marquee strips (top/bottom) - no fade mask in the source design,
   they simply run edge-to-edge and get clipped by overflow:hidden. */
.hero-marquee { overflow: hidden; width: 100%; }
.hero-marquee__track { display: flex; width: max-content; gap: 14px; animation: hero-marquee-left 26s linear infinite; }
.hero-marquee--reverse .hero-marquee__track { animation-name: hero-marquee-right; }
@keyframes hero-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hero-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* smaller, flat (no shadow) cards - more of them fit on screen so the
   top/bottom strips read as a denser, faster-moving row of icons */
.product-card {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.product-card i { font-size: 24px; }
.product-card span { font-size: 9.5px; font-weight: 700; color: var(--slate-600); text-transform: uppercase; letter-spacing: .03em; }

/* centerpiece card - flex-grow:0 (matching the real mraaliERP page, which
   never grows this box past its 380px minHeight) keeps it a fixed size
   instead of stretching to fill the panel on tall screens - the extra
   space above/below just becomes breathing room via the parent's
   justify-content:space-between. Shadow is bottom-only (a grounding shadow
   under the card), not an all-around shade. */
.hero-center {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-height: 380px;
	margin: 0 16px;
	border-radius: 48px;
	border: 1px solid #fff;
	background-color: rgba(0, 183, 18, 0.07);
	transition: background-color .7s ease;
	box-shadow: 0 32px 40px -24px rgba(15, 23, 42, 0.28);
	overflow: hidden;
}

.hero-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	user-select: none;
	transition: opacity .6s ease, transform .6s ease;
}
.hero-watermark i { font-size: 130px; line-height: 1; opacity: 0.10; color: var(--parrot); }
.hero-watermark span {
	font-size: 34px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-top: 6px;
	opacity: 0.12;
	color: var(--parrot);
}

.hero-circle {
	position: relative;
	width: 208px;
	height: 208px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(to right, var(--parrot), var(--gold)) border-box;
	border: 3px solid transparent;
	animation: hero-circle-pulse 3.2s ease-in-out infinite;
}
.hero-circle img { width: 160px; height: 160px; object-fit: contain; animation: hero-circle-breathe 3.2s ease-in-out infinite; }

/* Gentle breathing glow, timed together so the ring and the mark inside it
   scale as one piece rather than fighting each other. */
@keyframes hero-circle-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 183, 18, 0.35); }
	50% { transform: scale(1.045); box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.32), 0 0 0 14px rgba(0, 183, 18, 0); }
}
@keyframes hero-circle-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-circle, .hero-circle img { animation: none; }
}

.hero-ticker-col {
	position: absolute;
	width: 136px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* both lanes get identical geometry (height/position) so the moving content
   reads as balanced left vs right - only the scroll direction differs */
.hero-ticker-col--left,
.hero-ticker-col--right { top: 50%; height: min(700px, 90%); transform: translateY(-50%); }
.hero-ticker-col--left { left: 10px; }
.hero-ticker-col--right { right: 10px; }
.hero-ticker-col__track { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.hero-ticker-col--left .hero-ticker-col__track { animation: hero-ticker-down 14s linear infinite; }
.hero-ticker-col--right .hero-ticker-col__track { animation: hero-ticker-up 14s linear infinite; }

@keyframes hero-ticker-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes hero-ticker-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.module-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-radius: 16px;
	padding: 8px 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border: 1px solid #f1f5f9;
	font-size: 12px;
	font-weight: 700;
	color: var(--slate-700);
	white-space: nowrap;
	width: 128px;
}
.module-pill .module-pill-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
}

.hero-active-pill {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 16px;
	border-radius: 16px;
	border: 1px solid transparent;
	backdrop-filter: blur(4px);
	font-size: 12px;
	font-weight: 900;
	z-index: 3;
	transition: background-color .4s ease, border-color .4s ease, opacity .3s ease;
}
.hero-active-pill i { font-size: 16px; }

@media (max-width: 1300px) {
	.hero-ticker-col--left { left: -4%; }
	.hero-ticker-col--right { right: -4%; }
}