/* Admin login page - CSP-safe (no inline styles) */

:root {
	--navy: #0b275d;
	--navy-dark: #071a40;
	--red: #e02a2a;
	--border: #d5dbe5;
	--muted: #6b7280;
}

html,
body.login-page {
	height: 100%;
}

body.login-page {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	background: linear-gradient(160deg, #f1f3f6 0%, #dfe3ea 55%, #cfd5df 100%);
}

.login-wrap {
	width: 100%;
	max-width: 540px;
	animation: fadeUp .5s ease-out both;
}

/* Brand */
.login-brand {
	text-align: center;
	margin-bottom: 18px;
}

.login-logo {
	width: 72px;
	height: auto;
	margin-bottom: 8px;
}

.login-title {
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: .2px;
}

.text-red { color: var(--red); }
.text-navy { color: var(--navy); }

/* Card */
.login-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(11, 39, 93, .15), 0 2px 6px rgba(11, 39, 93, .08);
}

.login-card-header {
	background: linear-gradient(90deg, var(--navy) 0%, #143a80 100%);
	color: #fff;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 500;
}

.login-card-header .fa {
	margin-right: 6px;
	opacity: .85;
}

.login-card-body {
	padding: 28px 30px 26px;
}

.login-alert {
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
}

/* Inputs */
.login-input .input-group-addon {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	min-width: 42px;
	border-radius: 6px 0 0 6px;
}

.login-input .form-control,
.login-control {
	height: 42px;
	border-color: var(--border);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.login-input .form-control:last-child {
	border-radius: 0 6px 6px 0;
}

.login-control {
	border-radius: 6px;
}

.login-input .form-control:focus,
.login-control:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(11, 39, 93, .12);
}

.login-input.has-error .form-control,
.has-error-input {
	border-color: var(--red);
}

.login-input.has-error .input-group-addon {
	background: var(--red);
	border-color: var(--red);
}

.login-input.has-error .btn-toggle-pass {
	border-color: var(--red);
}

/* Validation message below each field */
.field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--red);
	animation: fadeUp .2s ease-out both;
}

.field-error .fa {
	margin-right: 3px;
}

.btn-login.loading {
	opacity: .75;
	cursor: wait;
}

.btn-toggle-pass {
	height: 42px;
	background: #f5f7fa;
	border: 1px solid var(--border);
	border-left: 0;
	border-radius: 0 6px 6px 0;
	color: var(--muted);
}

.btn-toggle-pass:hover,
.btn-toggle-pass:focus {
	color: var(--navy);
	background: #eef1f6;
	outline: none;
}

/* Captcha */
.captcha-box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.captcha-img {
	height: 50px;
	max-width: calc(100% - 52px);
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #f0f8ff;
}

.btn-captcha-refresh {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--navy);
	font-size: 18px;
	transition: transform .4s ease, background .2s ease;
}

.btn-captcha-refresh:hover,
.btn-captcha-refresh:focus {
	background: #eef1f6;
	color: var(--navy);
	outline: none;
}

.btn-captcha-refresh.spinning {
	transform: rotate(360deg);
}

/* Actions */
.login-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

.remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	color: var(--muted);
	cursor: pointer;
}

.remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--navy);
}

.btn-login {
	min-width: 110px;
	height: 42px;
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-weight: 500;
	background: linear-gradient(180deg, #1a4fa0 0%, var(--navy) 100%);
	box-shadow: 0 4px 10px rgba(11, 39, 93, .25);
	transition: transform .15s ease, box-shadow .2s ease;
}

.btn-login:hover,
.btn-login:focus {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(11, 39, 93, .3);
	outline: none;
}

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

.login-footer {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--muted);
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 480px) {
	.login-title {
		font-size: 22px;
	}

	.login-card-body {
		padding: 18px 14px;
	}

	.login-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.btn-login {
		width: 100%;
	}
}