/* ======================================================================
   Prompt 12 / P5: OneERP Custom Login Page Styles
   One Group / OneERP — branded, touch-friendly (48px), bilingual.
   Token-driven (design.md §3) — requires oneerp-tokens.css (linked first).
   ====================================================================== */

/* Full-bleed page shell */
body.oneerp-login-page {
	background: var(--oerp-grad-aurora);
	min-block-size: 100vh;
}

body.oneerp-login-page .page-content-wrapper,
body.oneerp-login-page .page-breadcrumbs,
body.oneerp-login-page .page-header-wrapper,
body.oneerp-login-page .page-footer,
body.oneerp-login-page main.container {
	all: unset;
}

body.oneerp-login-page .page_content {
	padding: 0 !important;
	margin: 0 !important;
}

.oneerp-login-wrap {
	position: relative;
	min-block-size: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 16px;
	overflow: hidden;
	font-family: var(--oerp-font-family);
}

/* Decorative aurora blobs */
.oneerp-login-aurora {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.oneerp-login-aurora::before,
.oneerp-login-aurora::after {
	content: "";
	position: absolute;
	inline-size: 640px;
	block-size: 640px;
	border-radius: var(--oerp-radius-pill);
	filter: blur(120px);
	opacity: 0.28;
}

.oneerp-login-aurora::before {
	background: var(--oerp-indigo-500);
	inset-block-start: -280px;
	inset-inline-start: -180px;
}

.oneerp-login-aurora::after {
	background: var(--oerp-fixed-emerald);
	inset-block-end: -320px;
	inset-inline-end: -220px;
	opacity: 0.18;
}

/* Card */
.oneerp-login-card {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: 440px;
	background: rgb(255 255 255 / 0.97);
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--oerp-radius-lg);
	box-shadow: 0 32px 64px -18px rgb(2 6 23 / 0.55), 0 4px 14px rgb(2 6 23 / 0.25);
	padding: 26px 28px 22px;
	backdrop-filter: blur(14px);
}

/* Language toggle */
.oneerp-lang-toggle {
	position: absolute;
	inset-block-start: var(--oerp-space-lg);
	inset-inline-end: 18px;
	display: inline-flex;
	align-items: center;
	gap: var(--oerp-space-xs);
	background: var(--oerp-primary-soft);
	border: 1px solid var(--oerp-indigo-200);
	border-radius: var(--oerp-radius-pill);
	padding: 3px var(--oerp-space-md);
	font-size: var(--oerp-text-xs);
	font-weight: 600;
	color: var(--oerp-indigo-700);
}

.oneerp-lang-toggle .lang-btn {
	border: 0;
	background: transparent;
	color: var(--oerp-slate-500);
	font-size: var(--oerp-text-xs);
	font-weight: 600;
	padding: 2px 6px;
	border-radius: var(--oerp-radius-sm);
	cursor: pointer;
}

.oneerp-lang-toggle .lang-btn.active {
	background: var(--oerp-primary-hover);
	color: var(--oerp-on-primary);
	box-shadow: 0 2px 6px rgb(79 70 229 / 0.4);
}

.oneerp-lang-toggle .lang-sep {
	color: var(--oerp-indigo-200);
}

/* Brand header */
.oneerp-brand-head {
	text-align: center;
	padding: 18px 6px 6px;
}

.one-group-badge {
	display: inline-block;
	background: var(--oerp-grad-brand);
	color: var(--oerp-on-primary);
	font-size: var(--oerp-text-2xs);
	font-weight: 800;
	letter-spacing: 0.22em;
	padding: 4px 14px 4px 16px;
	border-radius: var(--oerp-radius-pill);
	box-shadow: 0 3px 10px rgb(245 158 11 / 0.45);
}

.oneerp-logo-line {
	margin-block-start: var(--oerp-space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--oerp-space-sm);
}

.oneerp-diamond {
	color: var(--oerp-indigo-600);
	font-size: 26px;
	line-height: 1;
	text-shadow: 0 2px 8px rgb(79 70 229 / 0.35);
}

.oneerp-wordmark {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--oerp-slate-800);
}

.oneerp-subtitle {
	margin: var(--oerp-space-sm) auto 2px;
	max-inline-size: 330px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--oerp-text-muted);
}

/* Form */
.oneerp-form {
	padding-block-start: var(--oerp-space-lg);
}

.oneerp-field {
	margin-block-end: var(--oerp-space-lg);
}

.oneerp-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--oerp-slate-700);
	margin-block-end: var(--oerp-space-xs);
	letter-spacing: 0.01em;
}

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

.oneerp-input-icon {
	position: absolute;
	inset-inline-start: 14px;
	font-size: 17px;
	opacity: 0.85;
	pointer-events: none;
}

.oneerp-input {
	inline-size: 100%;
	block-size: 48px;
	border: 1.5px solid var(--oerp-border);
	border-radius: var(--oerp-radius-md);
	background: var(--oerp-surface-sunken);
	padding: 0 64px 0 44px;
	font-size: 15px;
	color: var(--oerp-text);
	font-family: var(--oerp-font-family);
	transition: border-color var(--oerp-dur-fast) ease, box-shadow var(--oerp-dur-fast) ease, background var(--oerp-dur-fast) ease;
	outline: none;
}

.oneerp-input:focus {
	border-color: var(--oerp-primary-hover);
	background: var(--oerp-surface);
	box-shadow: var(--oerp-focus-ring);
}

.oneerp-input::placeholder {
	color: var(--oerp-text-faint);
}

.oneerp-eye {
	position: absolute;
	inset-inline-end: var(--oerp-space-md);
	border: 0;
	background: transparent;
	color: var(--oerp-text-muted);
	font-size: var(--oerp-text-xs);
	font-weight: 700;
	padding: 6px var(--oerp-space-xs);
	border-radius: var(--oerp-radius-sm);
	cursor: pointer;
}

.oneerp-eye:hover {
	color: var(--oerp-primary-hover);
	background: var(--oerp-primary-soft);
}

/* Alert */
.oneerp-alert {
	margin: 0 0 var(--oerp-space-lg);
	padding: var(--oerp-space-sm) var(--oerp-space-md);
	border-radius: var(--oerp-radius-md);
	font-size: var(--oerp-text-sm);
	font-weight: 600;
	line-height: 1.45;
}

.oneerp-alert.error {
	background: var(--oerp-risk-bg);
	border: 1px solid var(--oerp-risk-fg);
	color: var(--oerp-risk-fg);
}

.oneerp-alert.success {
	background: var(--oerp-ok-bg);
	border: 1px solid var(--oerp-ok-fg);
	color: var(--oerp-ok-fg);
}

/* Buttons */
.oneerp-btn {
	inline-size: 100%;
	block-size: 48px;
	border: 0;
	border-radius: var(--oerp-radius-md);
	background: var(--oerp-grad-btn);
	color: var(--oerp-on-primary);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 10px 22px -6px rgb(79 70 229 / 0.55);
	transition: transform var(--oerp-dur-fast) ease, box-shadow var(--oerp-dur-fast) ease, opacity var(--oerp-dur-fast) ease;
}

.oneerp-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -6px rgb(79 70 229 / 0.6);
}

.oneerp-btn:active {
	transform: translateY(0);
}

.oneerp-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.oneerp-btn-amber {
	background: var(--oerp-grad-brand);
	box-shadow: 0 10px 22px -6px rgb(245 158 11 / 0.5);
}

/* Helper + links */
.oneerp-helper {
	margin: var(--oerp-space-md) 2px var(--oerp-space-xs);
	font-size: var(--oerp-text-xs);
	line-height: 1.55;
	color: var(--oerp-text-faint);
	text-align: center;
}

.oneerp-links {
	text-align: center;
	margin: var(--oerp-space-xs) 0 var(--oerp-space-xs);
}

.oneerp-links a {
	color: var(--oerp-primary-hover);
	font-size: var(--oerp-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.oneerp-links a:hover {
	text-decoration: underline;
}

/* Entity strip */
.oneerp-entity-strip {
	margin-block-start: var(--oerp-space-xl);
	padding-block-start: var(--oerp-space-md);
	border-block-start: 1px dashed var(--oerp-border);
	text-align: center;
}

.entity-caption {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--oerp-slate-300);
	margin-block-end: var(--oerp-space-sm);
}

.entity-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.entity-pill {
	background: rgb(241 245 249 / 0.85);
	border: 1px solid rgb(226 232 240 / 0.9);
	border-radius: var(--oerp-radius-pill);
	padding: 5px 11px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--oerp-slate-600);
	backdrop-filter: blur(6px);
	white-space: nowrap;
}

/* Footer */
.oneerp-login-footer {
	position: relative;
	z-index: 2;
	margin-block-start: var(--oerp-space-xl);
	color: rgb(226 232 240 / 0.75);
	font-size: var(--oerp-text-xs);
	text-align: center;
	letter-spacing: 0.02em;
}

/* Responsive: tablets & phones */
@media (max-width: 480px) {
	.oneerp-login-card {
		padding: 22px 18px 18px;
		border-radius: 18px;
	}

	.oneerp-wordmark {
		font-size: 29px;
	}

	.oneerp-lang-toggle {
		position: static;
		margin-block-end: var(--oerp-space-xs);
	}
}