/* Login only; the shared theme script respects the site switch. */
html[data-salam-theme="modern"] {
	--salam-primary: #0f766e;
	--salam-primary-dark: #0b5d57;
	--salam-accent: #14b8a6;
	--salam-ink: #102a2a;
	--salam-surface: #ffffff;
	--salam-soft: #eaf7f5;
	--primary: var(--salam-primary);
	--primary-color: var(--salam-primary);
}

html[data-salam-theme="modern"] body[data-path="login"] {
	min-height: 100vh;
	color: var(--salam-ink);
	background:
		radial-gradient(circle at 12% 12%, rgb(20 184 166 / 14%), transparent 30rem),
		radial-gradient(circle at 88% 90%, rgb(15 118 110 / 10%), transparent 34rem),
		#f7faf9;
}

html[data-salam-theme="modern"] body[data-path="login"] main.container {
	display: grid;
	min-height: calc(100vh - 1px);
	place-items: center;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card {
	width: min(100%, 430px);
	padding: 38px;
	border: 1px solid rgb(15 118 110 / 12%);
	border-radius: 16px;
	background: rgb(255 255 255 / 94%);
	box-shadow: 0 24px 70px rgb(16 42 42 / 12%);
	backdrop-filter: blur(12px);
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card-head {
	gap: 24px;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card-head img.app-logo {
	width: 190px;
	max-width: 72vw;
	max-height: 48px;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card-head h4 {
	color: var(--salam-ink);
	font-size: 26px;
	letter-spacing: -0.02em;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card .page-card-body .form-control {
	height: 44px;
	border-color: #dce8e6;
	border-radius: 8px;
	background: #f8fbfa;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card .page-card-body .form-control:focus {
	border-color: var(--salam-accent);
	box-shadow: 0 0 0 3px rgb(20 184 166 / 14%);
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card .invalid .form-control {
	border-color: var(--outline-red-2);
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card .btn.btn-login,
html[data-salam-theme="modern"] body[data-path="login"] .page-card .btn.btn-primary {
	height: 44px;
	border-color: var(--salam-primary);
	border-radius: 8px;
	background: var(--salam-primary);
	box-shadow: 0 8px 22px rgb(15 118 110 / 20%);
	color: #fff;
	font-weight: 600;
}

html[data-salam-theme="modern"] body[data-path="login"] .page-card .btn.btn-login:hover,
html[data-salam-theme="modern"] body[data-path="login"] .page-card .btn.btn-primary:hover {
	border-color: var(--salam-primary-dark);
	background: var(--salam-primary-dark);
}

html[data-salam-theme="modern"] body[data-path="login"] a {
	color: var(--salam-primary);
}

@media (max-width: 575px) {
	html[data-salam-theme="modern"] body[data-path="login"] main.container {
		padding: 20px;
	}

	html[data-salam-theme="modern"] body[data-path="login"] .page-card {
		min-height: 0;
		padding: 28px 24px;
		border-radius: 14px;
	}
}