/**
 * Login page polish — especially dark mode.
 * Loaded on website/login via web_include_css (farm_management_system).
 *
 * Fixes:
 *  - Chrome/Safari autofill yellow/olive fields on dark theme
 *  - Low-contrast right panel + muddy navy card
 *  - Input / focus / logo presentation in dark mode
 */

/* ── Dark mode tokens (override techsavanna_theme inline vars) ── */
html[data-theme="dark"],
[data-theme="dark"] {
	--page-bg: #0b1220;
	--card-bg: #111827;
	--login-panel-bg: #0f172a;
	--text-color: #f8fafc;
	--sub-text-color: #94a3b8;
	--border-color: #1e293b;
	--input-bg: #1e293b;
	--input-border: #334155;
	--input-text: #f1f5f9;
	--input-placeholder: #64748b;
	--input-focus-ring: rgba(59, 130, 246, 0.45);
	--btn-bg: var(--brand-primary, #0f62ae);
	--btn-text: #ffffff;
	--btn-hover: var(--brand-primary-hover, #0c5393);
	--blob-1: #1e3a5f;
	--blob-2: #1e293b;
	--ring-color: rgba(148, 163, 184, 0.12);
	--icon-color: #94a3b8;
	--icon-active: #e2e8f0;
	--action-btn-bg: #1e293b;
	--action-btn-color: #e2e8f0;
	--action-btn-border: #334155;
	--action-btn-hover-bg: #334155;
}

/* Page backdrop */
[data-theme="dark"] body {
	background-color: var(--page-bg) !important;
	color: var(--text-color);
}

[data-theme="dark"] .bg-blobs .blob {
	opacity: 0.35;
}

/* Card: clear separation from page, soft border */
[data-theme="dark"] .login-card {
	background-color: var(--card-bg) !important;
	border: 1px solid rgba(148, 163, 184, 0.14) !important;
	box-shadow:
		0 25px 50px -12px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

/* Left form panel — slightly elevated slate, not flat black */
[data-theme="dark"] .left-panel {
	background: linear-gradient(165deg, #132033 0%, #0f172a 55%, #0c1424 100%) !important;
}

/* Logo: keep mark readable on dark */
[data-theme="dark"] .logo-branding img {
	background: #ffffff;
	border-radius: 12px;
	padding: 6px 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	max-height: 72px;
	height: auto;
	width: auto;
	object-fit: contain;
}

[data-theme="dark"] .welcome-header h2 {
	color: #f8fafc !important;
}

[data-theme="dark"] .welcome-header p,
[data-theme="dark"] .form-label,
[data-theme="dark"] .remember-me label,
[data-theme="dark"] .footer-text p {
	color: #94a3b8 !important;
}

[data-theme="dark"] .forgot-link {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .forgot-link:hover {
	color: #ffffff !important;
}

/* ── Inputs (normal state) ── */
[data-theme="dark"] .form-control-custom,
[data-theme="dark"] input.form-control-custom,
[data-theme="dark"] #login_email,
[data-theme="dark"] #login_password,
[data-theme="dark"] #forgot_email,
[data-theme="dark"] #login_with_email_link_email {
	background-color: #1e293b !important;
	background-image: none !important;
	border: 1px solid #334155 !important;
	color: #f1f5f9 !important;
	caret-color: #f8fafc;
	box-shadow: none !important;
}

[data-theme="dark"] .form-control-custom::placeholder {
	color: #64748b !important;
	opacity: 1;
}

[data-theme="dark"] .form-control-custom:hover {
	border-color: #475569 !important;
}

[data-theme="dark"] .form-control-custom:focus,
[data-theme="dark"] .form-control-custom:focus-visible {
	background-color: #1e293b !important;
	border-color: var(--brand-primary, #3b82f6) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28) !important;
	outline: none !important;
}

[data-theme="dark"] .input-icon {
	color: #94a3b8 !important;
}

[data-theme="dark"] .input-wrapper:focus-within .input-icon {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .password-toggle {
	color: #94a3b8 !important;
}

[data-theme="dark"] .password-toggle:hover {
	color: #f1f5f9 !important;
}

/*
 * Kill browser autofill yellow/olive/blue fills in dark mode.
 * The long transition trick prevents Chrome from flashing the system color.
 */
[data-theme="dark"] .form-control-custom:-webkit-autofill,
[data-theme="dark"] .form-control-custom:-webkit-autofill:hover,
[data-theme="dark"] .form-control-custom:-webkit-autofill:focus,
[data-theme="dark"] .form-control-custom:-webkit-autofill:active,
[data-theme="dark"] input.form-control-custom:-webkit-autofill,
[data-theme="dark"] #login_email:-webkit-autofill,
[data-theme="dark"] #login_password:-webkit-autofill {
	-webkit-text-fill-color: #f1f5f9 !important;
	caret-color: #f8fafc !important;
	/* inset box-shadow paints over the autofill background */
	-webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
	box-shadow: 0 0 0 1000px #1e293b inset !important;
	border: 1px solid #334155 !important;
	transition: background-color 99999s ease-out 0s !important;
	filter: none !important;
}

/* Firefox autofill */
[data-theme="dark"] .form-control-custom:autofill,
[data-theme="dark"] .form-control-custom:-moz-autofill {
	background-color: #1e293b !important;
	color: #f1f5f9 !important;
	box-shadow: 0 0 0 1000px #1e293b inset !important;
}

/* Checkbox */
[data-theme="dark"] .remember-me input[type="checkbox"] {
	accent-color: var(--brand-primary, #3b82f6);
	background-color: #1e293b;
	border-color: #475569;
}

/* Primary button — keep brand blue, cleaner shadow on dark */
[data-theme="dark"] .btn-submit,
[data-theme="dark"] .btn-login,
[data-theme="dark"] #btn-login-custom {
	background-color: var(--brand-primary, #0f62ae) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 8px 20px rgba(15, 98, 174, 0.35) !important;
}

[data-theme="dark"] .btn-submit:hover,
[data-theme="dark"] .btn-login:hover {
	background-color: var(--brand-primary-hover, #0c5393) !important;
	filter: brightness(1.05);
}

[data-theme="dark"] .btn-submit:disabled {
	opacity: 0.75;
	box-shadow: none !important;
}

/* Right hero panel — don't crush the photo; keep text readable */
[data-theme="dark"] .right-panel {
	background: #0b1220;
}

[data-theme="dark"] .bg-overlay {
	background: linear-gradient(
		to top,
		rgba(2, 6, 23, 0.75) 0%,
		rgba(2, 6, 23, 0.35) 45%,
		rgba(2, 6, 23, 0.2) 100%
	) !important;
}

[data-theme="dark"] .image-content {
	background: linear-gradient(
		to top,
		rgba(2, 6, 23, 0.92) 0%,
		rgba(2, 6, 23, 0.55) 55%,
		transparent 100%
	) !important;
}

[data-theme="dark"] .image-content h3 {
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .image-content p {
	color: rgba(226, 232, 240, 0.92) !important;
}

/* Theme toggle buttons stay visible */
[data-theme="dark"] .action-btn {
	background-color: rgba(30, 41, 59, 0.9) !important;
	border-color: #334155 !important;
	color: #e2e8f0 !important;
	backdrop-filter: blur(8px);
}

[data-theme="dark"] .action-btn:hover {
	background-color: #334155 !important;
}

/* Standard Frappe login fallbacks (if theme not fully active) */
[data-theme="dark"] .for-login .page-card,
[data-theme="dark"] .for-forgot .page-card,
[data-theme="dark"] .for-signup .page-card {
	background: #111827 !important;
	border-color: #1e293b !important;
}

[data-theme="dark"] .for-login .form-control {
	background-color: #1e293b !important;
	border-color: #334155 !important;
	color: #f1f5f9 !important;
}

[data-theme="dark"] .for-login .form-control:-webkit-autofill {
	-webkit-text-fill-color: #f1f5f9 !important;
	box-shadow: 0 0 0 1000px #1e293b inset !important;
}