/* ═══════════════════════════════════════════════════════════════════════════
   ZUPRA TECH — FRAPPE LOGIN PAGE THEME  v4.0 (FINAL STABLE)
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
	--z-navy: #1a1f36;
	--z-accent: #4b7bf5;
	--z-accent-hov: #3a6ae3;
	--z-text-dim: #8892b0;
	--z-bg: #f0f4ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 — CRITICAL
═══════════════════════════════════════════════════════════════════════════ */
.hide {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 — BACKGROUND
═══════════════════════════════════════════════════════════════════════════ */
body,
html {
	background: var(--z-bg) !important;
	min-height: 100vh !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 — HEADER
═══════════════════════════════════════════════════════════════════════════ */
.page-card-head {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	margin-bottom: 20px !important;
	gap: 12px !important;
}

.page-card-head .app-logo {
	width: 56px !important;
	height: 56px !important;
	border-radius: 14px !important;
	background: var(--z-navy) !important;
	object-fit: contain !important;
	padding: 8px !important;
	box-sizing: border-box !important;
}

.page-card-head h4 {
	color: var(--z-navy) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 — CARD
═══════════════════════════════════════════════════════════════════════════ */
.login-content.page-card {
	background: #ffffff !important;
	border: 1px solid #dde3f5 !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 24px rgba(26, 31, 54, 0.09) !important;
	padding: 28px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 — INPUT WRAPPER (FINAL FIX)
═══════════════════════════════════════════════════════════════════════════ */
.input-with-icon {
	display: flex !important;
	align-items: center !important;

	height: 42px !important;
	padding: 0 12px !important;

	border: 1px solid #cdd5ee !important;
	border-radius: 8px !important;
	background: var(--z-bg) !important;

	box-sizing: border-box !important;
	gap: 10px !important;
}

/* INPUT (FIXED PROPERLY — NO OVERFLOW) */
.input-with-icon .form-control {
	border: none !important;
	background: transparent !important;

	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;

	line-height: normal !important;
	font-size: 14px !important;

	box-shadow: none !important;
	outline: none !important;

	display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 — ICONS
═══════════════════════════════════════════════════════════════════════════ */
.field-icon {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

/* PASSWORD TOGGLE */
.toggle-password {
	margin-left: auto !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--z-accent) !important;
	cursor: pointer !important;
}

.toggle-password:hover {
	color: var(--z-accent-hov) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 — FORM
═══════════════════════════════════════════════════════════════════════════ */
.login-content .form-group {
	margin-bottom: 14px !important;
}

.login-content .forgot-password-message {
	text-align: right !important;
	margin: 6px 0 12px !important;
}

.login-content .forgot-password-message a {
	font-size: 13px !important;
	color: var(--z-accent) !important;
	text-decoration: none !important;
}

.login-content .forgot-password-message a:hover {
	text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 — BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.login-content .btn-primary {
	background: var(--z-accent) !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 42px !important;
	width: 100% !important;
}

.login-content .btn-primary:hover {
	background: var(--z-accent-hov) !important;
}

.login-content .btn-default,
.login-content .btn-login-option {
	background: #ffffff !important;
	border: 1px solid #cdd5ee !important;
	color: var(--z-navy) !important;
	border-radius: 8px !important;
	height: 42px !important;
	width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 — DIVIDER
═══════════════════════════════════════════════════════════════════════════ */
.login-divider {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: var(--z-text-dim) !important;
}

.login-divider::before,
.login-divider::after {
	content: "" !important;
	flex: 1 !important;
	height: 1px !important;
	background: #e0e6f4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 — FOOTER LINKS
═══════════════════════════════════════════════════════════════════════════ */
.sign-up-message {
	margin-top: 16px !important;
	font-size: 13px !important;
	color: var(--z-text-dim) !important;
	text-align: center !important;
}

.sign-up-message a {
	color: var(--z-accent) !important;
	text-decoration: none !important;
}

.sign-up-message a:hover {
	text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 — MISC
═══════════════════════════════════════════════════════════════════════════ */
.login-content .page-card-body {
	padding: 0 !important;
}

.login-content .page-card-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}