/* Theme Tokens */
:root {
	--login-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Kannada", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Helvetica Neue", Arial, sans-serif;
	--login-bg: #f3f4f7;
	--login-surface: #ffffff;
	--login-surface-soft: #fafafb;
	--login-text: #1e1e2c;
	--login-muted: #737a86;
	--login-border: #e3e6eb;
	--login-brand-primary: #3b8ff3;
	--login-brand-strong: #2d7de0;
	--login-brand-accent: #34b1aa;
	--login-brand-soft: rgba(59,143,243,0.12);
	--login-focus: 0 0 0 3px var(--login-brand-soft);
}

body.brand-thuanki {
	--login-brand-primary: #34b1aa;
	--login-brand-strong: #269d96;
	--login-brand-accent: #f29f67;
	--login-brand-soft: rgba(52,177,170,0.14);
}

body.brand-group {
	--login-brand-primary: #f29f67;
	--login-brand-strong: #e98545;
	--login-brand-accent: #1e1e2c;
	--login-brand-soft: rgba(242,159,103,0.14);
}

/* Login */
body[data-path="login"],
body[data-path="/login"],
body:has(.for-login) {
	font-family: var(--login-font-sans);
	background:
		linear-gradient(135deg, var(--login-brand-soft), transparent 36%),
		linear-gradient(225deg, rgba(52,177,170,0.08), transparent 32%),
		var(--login-bg) !important;
	color: var(--login-text);
	line-height: 1.45;
}

.login-content,
.page-card,
.for-login .page-card,
.for-email-login .page-card,
.for-forgot .page-card,
.for-signup .page-card {
	border: 1px solid var(--login-border) !important;
	border-radius: 12px !important;
	background: color-mix(in srgb, var(--login-surface) 96%, transparent) !important;
	box-shadow: 0 18px 52px rgba(24, 24, 36, .11) !important;
}

.for-login .page-card::before,
.for-email-login .page-card::before,
.for-forgot .page-card::before,
.for-signup .page-card::before {
	content: attr(data-company-label);
	display: block;
	margin-bottom: 16px;
	color: var(--login-brand-primary);
	font-size: 12px;
	font-weight: 780;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.login-brand-label {
	margin: 0 auto 14px;
	text-align: center;
	color: var(--login-brand-primary);
	font-size: 13px;
	font-weight: 780;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.for-login h4,
.for-email-login h4,
.for-forgot h4,
.for-signup h4 {
	color: var(--login-text);
	font-weight: 760;
	letter-spacing: 0;
}

.for-login .form-control,
.for-email-login .form-control,
.for-forgot .form-control,
.for-signup .form-control {
	min-height: 42px;
	background: var(--login-surface-soft) !important;
	border-color: var(--login-border) !important;
	border-radius: 8px !important;
	color: var(--login-text);
	font-size: 15px;
}

.for-login .form-control:focus,
.for-email-login .form-control:focus,
.for-forgot .form-control:focus,
.for-signup .form-control:focus {
	background: var(--login-surface) !important;
	border-color: var(--login-brand-primary) !important;
	box-shadow: var(--login-focus) !important;
}

.for-login .btn-primary,
.for-email-login .btn-primary,
.for-forgot .btn-primary,
.for-signup .btn-primary,
.page-card .btn-primary {
	min-height: 42px;
	background: var(--login-brand-primary) !important;
	border-color: var(--login-brand-primary) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-weight: 730;
	box-shadow: 0 8px 18px var(--login-brand-soft);
}

.for-login .btn-primary:hover,
.for-email-login .btn-primary:hover,
.for-forgot .btn-primary:hover,
.for-signup .btn-primary:hover,
.page-card .btn-primary:hover {
	background: var(--login-brand-strong) !important;
	border-color: var(--login-brand-strong) !important;
}

.page-card a,
.login-content a {
	color: var(--login-brand-primary) !important;
	font-weight: 650;
}

.login-footer,
.web-footer,
.page-card .text-muted {
	color: var(--login-muted) !important;
}

/* Responsive */
@media (max-width: 768px) {
	.login-content,
	.page-card { margin-left: 12px !important; margin-right: 12px !important; }
}

@media (max-width: 576px) {
	body[data-path="login"],
	body[data-path="/login"],
	body:has(.for-login) { background: var(--login-bg) !important; }
	.for-login .form-control,
	.for-email-login .form-control,
	.for-forgot .form-control,
	.for-signup .form-control { font-size: 16px; }
}