/* ==========================================================================
   NAMINA Business Suite — Enterprise Login (Split Layout)
   Matching Reference: Precision manufacturing enterprise theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ── 1. GLOBAL BASE ON LOGIN ─────────────────────────────────────────── */
body[data-path="login"] {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	background: #f1f5f9 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100vh !important;
	overflow-x: hidden !important;
	color: #0f172a !important;
}

/* Hide Frappe default nav, footer, splashes on login */
body[data-path="login"] header,
body[data-path="login"] footer,
body[data-path="login"] .web-footer,
body[data-path="login"] .navbar,
body[data-path="login"] .splash {
	display: none !important;
}

/* ── 2. DESKTOP SPLIT LAYOUT (>= 992px) ──────────────────────────────── */
@media (min-width: 992px) {
	body[data-path="login"] {
		height: 100vh !important;
		overflow: hidden !important;
	}

	/* Fallback hero background via ::before */
	body[data-path="login"]::before {
		content: '' !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 52% !important;
		height: 100vh !important;
		background-image:
			linear-gradient(180deg, rgba(13, 23, 50, 0.78) 0%, rgba(8, 15, 35, 0.90) 100%),
			url('/assets/namina/images/namina_factory_bg.jpg') !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		z-index: 1 !important;
		pointer-events: none !important;
	}

	/* Left Hero Container (Injected by JS) */
	#namina-hero-panel {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 52% !important;
		height: 100vh !important;
		background-image:
			linear-gradient(180deg, rgba(13, 23, 50, 0.78) 0%, rgba(8, 15, 35, 0.90) 100%),
			url('/assets/namina/images/namina_factory_bg.jpg') !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		padding: 44px 52px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
		z-index: 10 !important;
		pointer-events: auto !important;
	}

	/* Right Panel containing Login form */
	body[data-path="login"] #page-login {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		width: 48% !important;
		height: 100vh !important;
		margin: 0 !important;
		padding: 24px !important;
		display: flex !important;
		flex-direction: column !important;
		overflow-y: auto !important;
		background: #f1f5f9 !important;
		z-index: 20 !important;
		box-sizing: border-box !important;
	}

	/* margin: auto inside flex allows proper centering without clipping on small heights */
	body[data-path="login"] #page-login > .container {
		margin: auto !important;
		padding: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}
}

/* ── 3. MOBILE & TABLET LAYOUT (< 992px) ─────────────────────────────── */
@media (max-width: 991.98px) {
	#namina-hero-panel {
		display: none !important;
	}
	body[data-path="login"]::before {
		display: none !important;
	}
	body[data-path="login"] #page-login {
		position: relative !important;
		width: 100% !important;
		min-height: 100vh !important;
		padding: 24px 16px !important;
		display: flex !important;
		flex-direction: column !important;
		background: #f1f5f9 !important;
		box-sizing: border-box !important;
	}
	body[data-path="login"] #page-login > .container {
		width: 100% !important;
		max-width: 440px !important;
		margin: auto !important;
		padding: 0 !important;
	}
}

/* ── 4. LEFT HERO ELEMENTS STYLING ───────────────────────────────────── */
.hero-brand {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.hero-logo-box {
	width: 34px !important;
	height: 34px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 7px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: blur(4px) !important;
	flex-shrink: 0 !important;
}

.hero-logo-box svg {
	width: 20px !important;
	height: 20px !important;
	color: #ffffff !important;
}

.hero-brand-name {
	font-family: 'Inter', sans-serif !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}

.hero-bottom {
	margin-bottom: 20px !important;
}

.hero-heading {
	font-family: 'Playfair Display', Georgia, serif !important;
	color: #ffffff !important;
	font-size: clamp(24px, 2.5vw, 35px) !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	margin: 0 0 16px 0 !important;
	letter-spacing: -0.2px !important;
}

.hero-subtext {
	font-family: 'Inter', sans-serif !important;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	max-width: 440px !important;
	margin: 0 !important;
}

/* ── 5. LOGIN CARD STYLING ───────────────────────────────────────────── */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .page-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
	padding: 28px 32px 24px !important;
	max-width: 420px !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Hide default frappe logo */
body[data-path="login"] .page-card-head img.app-logo {
	display: none !important;
}

/* Card Header Section */
body[data-path="login"] .page-card-head {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.namina-card-brand-icon {
	width: 40px !important;
	height: 40px !important;
	background: #14213d !important;
	border-radius: 9px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 12px !important;
	flex-shrink: 0 !important;
}

.namina-card-brand-icon svg {
	width: 20px !important;
	height: 20px !important;
	color: #ffffff !important;
}

body[data-path="login"] .page-card-head h4 {
	font-family: 'Inter', sans-serif !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	letter-spacing: -0.3px !important;
	margin: 0 0 4px 0 !important;
	line-height: 1.2 !important;
}

body[data-path="login"] .page-card-head .page-card-subtitle {
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	color: #64748b !important;
	margin: 0 !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

/* ── 6. FORM FIELDS & INPUTS ─────────────────────────────────────────── */
body[data-path="login"] .page-card-body {
	padding: 0 !important;
	margin-top: 10px !important;
}

body[data-path="login"] .form-group {
	margin-bottom: 13px !important;
}

body[data-path="login"] .form-label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #334155 !important;
	margin-bottom: 5px !important;
	display: block !important;
}

body[data-path="login"] .page-card-body input.form-control,
body[data-path="login"] .page-card-body input[type="text"],
body[data-path="login"] .page-card-body input[type="password"] {
	height: 40px !important;
	border-radius: 8px !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 14px !important;
	padding-left: 14px !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body[data-path="login"] .page-card-body input.form-control:focus,
body[data-path="login"] .page-card-body input[type="text"]:focus,
body[data-path="login"] .page-card-body input[type="password"]:focus {
	border-color: #1e3a8a !important;
	box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12) !important;
}

/* Hide default icons inside inputs */
body[data-path="login"] .page-card-body .field-icon {
	display: none !important;
}

body[data-path="login"] .page-card-body .email-field input,
body[data-path="login"] .page-card-body .password-field input {
	padding-left: 14px !important;
}

body[data-path="login"] .page-card-body .password-field .toggle-password {
	right: 12px !important;
	fill: #94a3b8 !important;
	cursor: pointer !important;
}

/* Remember me and Forgot password row */
.namina-remember-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	margin-top: 10px !important;
	margin-bottom: 16px !important;
	font-size: 13px !important;
	box-sizing: border-box !important;
}

.namina-remember-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #475569 !important;
	cursor: pointer !important;
	user-select: none !important;
	margin: 0 !important;
}

.namina-remember-checkbox input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	border-radius: 4px !important;
	border: 1px solid #cbd5e1 !important;
	cursor: pointer !important;
	accent-color: #1e293b !important;
	margin: 0 !important;
}

body[data-path="login"] .forgot-password-message {
	margin: 0 !important;
	padding: 0 !important;
	margin-left: auto !important;
}

body[data-path="login"] .forgot-password-message a {
	color: #1d4ed8 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

body[data-path="login"] .forgot-password-message a:hover {
	text-decoration: underline !important;
}

/* ── 7. PRIMARY & SECONDARY BUTTONS ──────────────────────────────────── */
body[data-path="login"] .page-card-actions {
	padding: 0 !important;
	margin-top: 2px !important;
}

body[data-path="login"] .page-card-actions .btn-login,
body[data-path="login"] .page-card-actions .btn-primary {
	background: #1e293b !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 42px !important;
	border-radius: 8px !important;
	border: none !important;
	cursor: pointer !important;
	transition: background 0.15s ease, transform 0.1s ease !important;
	width: 100% !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body[data-path="login"] .page-card-actions .btn-login:hover,
body[data-path="login"] .page-card-actions .btn-primary:hover {
	background: #0f172a !important;
}

body[data-path="login"] .page-card-actions .btn-login:active,
body[data-path="login"] .page-card-actions .btn-primary:active {
	transform: scale(0.99) !important;
}

/* Divider "or continue with" */
.namina-divider {
	display: flex !important;
	align-items: center !important;
	margin: 16px 0 12px 0 !important;
	color: #94a3b8 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

.namina-divider::before,
.namina-divider::after {
	content: '' !important;
	flex: 1 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.namina-divider:not(:empty)::before {
	margin-right: 0.75em !important;
}

.namina-divider:not(:empty)::after {
	margin-left: 0.75em !important;
}

/* Social & alternative buttons */
body[data-path="login"] .btn-login-option {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	color: #334155 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	margin-top: 8px !important;
	transition: all 0.15s ease !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
	text-decoration: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body[data-path="login"] .btn-login-option:hover {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	color: #0f172a !important;
}

/* Error messages and shakes */
body[data-path="login"] .login-error-banner {
	border-radius: 8px !important;
	font-size: 13px !important;
	margin-bottom: 12px !important;
}

@keyframes naminaShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-5px); }
	40%, 80% { transform: translateX(5px); }
}

body[data-path="login"] .invalid-login {
	animation: naminaShake 0.38s ease !important;
}