/* =====================================================================
   AutomataCRM — Auth Pages Theme (Login / Register / Forgot / Reset)
   Scheme: Brand Blue (#3b65ea) with gradients. Professional / modern.
   Cosmetics only — never changes form IDs, names, routes, or JS.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
	--theme-font: 'Inter';

	/* ---- Brand blue palette (built around #3b65ea) ---- */
	--brand:       #3b65ea;
	--brand-light: #5d84f6;
	--brand-dark:  #2347c5;
	--brand-deep:  #16224f;   /* panel depth */

	--accent-gradient: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 50%, var(--brand-dark) 100%);

	/* ---- Form side neutrals ---- */
	--text-strong: #0b1324;
	--text:        #1e293b;
	--text-muted:  #64748b;
	--border:      #e3e8f0;
	--radius:      14px;
}

/* =========================================================
   PAGE / BACKGROUND
   ========================================================= */
body {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36px 16px;
	overflow-x: hidden;
	color: var(--text);
	font-family: var(--theme-font), 'Inter', sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #e9eef7;
	/* base wash + faint dot grid */
	background-image:
		radial-gradient(rgba(59, 101, 234, .10) 1.2px, transparent 1.2px),
		radial-gradient(1100px circle at 8% -5%, rgba(93, 132, 246, .16), transparent 42%),
		radial-gradient(1100px circle at 95% 105%, rgba(35, 71, 197, .16), transparent 45%),
		linear-gradient(180deg, #eef2fb 0%, #e6ecf7 100%);
	background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
}

/* Drifting aurora blobs behind the card (decorative, non-interactive) */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 0;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .55;
	pointer-events: none;
}
body::before {
	width: 460px; height: 460px;
	top: -140px; left: -120px;
	background: radial-gradient(circle, rgba(93, 132, 246, .75), transparent 70%);
	animation: authFloatA 16s ease-in-out infinite;
}
body::after {
	width: 520px; height: 520px;
	bottom: -180px; right: -140px;
	background: radial-gradient(circle, rgba(59, 101, 234, .65), transparent 70%);
	animation: authFloatB 20s ease-in-out infinite;
}

@keyframes authFloatA {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes authFloatB {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-50px, -45px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	body::before, body::after { animation: none; }
}

/* Keep the card above the decorative layers */
.container { position: relative; z-index: 1; }

/* =========================================================
   CARD SHELL
   ========================================================= */
.login-wrapper {
	background: #fff;
	border: 1px solid rgba(11, 17, 32, .06);
	border-radius: 26px;
	box-shadow:
		0 30px 70px -18px rgba(22, 34, 79, .40),
		0 10px 24px -10px rgba(22, 34, 79, .22);
	overflow: hidden;
}

/* =========================================================
   LEFT BRAND PANEL — rich blue gradient
   ========================================================= */
.ai-panel {
	position: relative;
	overflow: hidden;
	padding: 58px 48px;
	color: #eaf0ff;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(520px circle at 80% 12%, rgba(93, 132, 246, .45), transparent 60%),
		radial-gradient(560px circle at 12% 100%, rgba(35, 71, 197, .55), transparent 62%),
		linear-gradient(155deg, var(--brand-deep) 0%, var(--brand-dark) 52%, var(--brand) 100%);
}

/* Faint tech grid overlay */
.ai-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
	pointer-events: none;
}

/* Glowing accent orb */
.ai-panel::after {
	content: "";
	position: absolute;
	width: 280px; height: 280px;
	bottom: -110px; left: -90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 132, 246, .55), transparent 68%);
	filter: blur(6px);
	pointer-events: none;
}

.ai-panel > * { position: relative; z-index: 1; }

.ai-panel h2 {
	font-weight: 800;
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	color: #fff;
}

.ai-panel p { color: rgba(234, 240, 255, .74); }

/* Feature list rows */
.ai-panel .mt-4 p {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	margin-bottom: 16px;
	color: rgba(234, 240, 255, .92);
}

/* AI highlight pill */
.ai-highlight {
	color: #fff;
	background: rgba(255, 255, 255, .16);
	padding: 2px 12px;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
}

/* Logo — glass tile with light ring */
.crm-logo {
	width: 86px !important;
	height: 86px !important;
	border-radius: 20px !important;
	object-fit: cover;
	padding: 6px;
	background: rgba(255, 255, 255, .12);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .30),
		0 10px 26px rgba(0, 0, 0, .35);
}

/* Ghost "Login" button inside register panel */
.ai-panel .login-btn.btn-outline-light {
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #eaf0ff;
	font-weight: 600;
	border-radius: 12px;
	transition: all .2s ease;
}
.ai-panel .login-btn.btn-outline-light:hover {
	background: #fff;
	border-color: transparent;
	color: var(--brand-dark);
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
}

/* =========================================================
   RIGHT FORM SECTION
   ========================================================= */
.form-section {
	padding: 58px 54px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
}

.form-section h3 {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text-strong);
}

.form-section > p.text-muted,
.form-section p.text-muted { color: var(--text-muted) !important; }

.form-section label,
.form-section .form-label {
	font-weight: 600;
	font-size: .85rem;
	color: var(--text);
	margin-bottom: .4rem;
}

/* =========================================================
   INPUTS
   ========================================================= */
.form-control,
.form-section .form-control {
	border-radius: 12px !important;
	border: 1px solid var(--border) !important;
	padding: 12px 14px !important;
	color: var(--text);
	background: #fbfcfe;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder { color: #9aa6b8; }
.form-control:focus,
.form-section .form-control:focus {
	background: #fff;
	border-color: var(--brand) !important;
	box-shadow: 0 0 0 4px rgba(59, 101, 234, .15) !important;
	outline: none;
}
textarea.form-control { min-height: 92px; }

/* Select2 — match input height/rounding */
.select2-container--default .select2-selection--single {
	border: 1px solid var(--border) !important;
	border-radius: 12px !important;
	height: 48px !important;
	display: flex;
	align-items: center;
	padding: 0 6px;
	background: #fbfcfe;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal !important;
	margin-top: 0 !important;
	color: var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; }
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--brand) !important;
	box-shadow: 0 0 0 4px rgba(59, 101, 234, .15) !important;
}

/* =========================================================
   BUTTONS — brand blue gradient
   ========================================================= */
.btn-login,
.btn-primary,
.form-section .btn-primary {
	background: var(--accent-gradient) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 13px 20px !important;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 12px 26px -8px rgba(59, 101, 234, .65);
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-login:hover,
.btn-primary:hover,
.form-section .btn-primary:hover {
	filter: brightness(1.06);
	color: #fff !important;
	box-shadow: 0 16px 34px -8px rgba(59, 101, 234, .8);
	transform: translateY(-1px);
}
.btn-login:active,
.btn-primary:active { transform: translateY(0); }

/* Disabled */
.btn-login:disabled,
.btn-primary:disabled,
button:disabled {
	background: #e9edf3 !important;
	color: #9aa6b8 !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	cursor: not-allowed;
}

/* Social buttons (login) */
.btn-social {
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 11px;
	width: 100%;
	background: #fff;
	font-weight: 500;
	transition: background .15s ease, border-color .15s ease;
}
.btn-social:hover { background: #f6f8fc; border-color: #d3dae6; }

/* =========================================================
   LINKS
   ========================================================= */
.form-section a,
.text-primary,
a.text-primary {
	color: var(--brand) !important;
	font-weight: 600;
	text-decoration: none;
}
.form-section a:hover,
a.text-primary:hover { color: var(--brand-dark) !important; text-decoration: underline; }

/* =========================================================
   REGISTER — TABS
   ========================================================= */
.nav-tabs {
	border: none;
	gap: 8px;
	background: #eef2f8;
	padding: 6px;
	border-radius: 14px;
}
.nav-tabs .nav-item { flex: 1; }
.nav-tabs .nav-link {
	width: 100%;
	border: none !important;
	border-radius: 10px !important;
	color: var(--text-muted);
	font-weight: 600;
	padding: 9px 14px;
	transition: all .2s ease;
}
.nav-tabs .nav-link.active {
	background: #fff !important;
	color: var(--brand) !important;
	box-shadow: 0 2px 8px rgba(22, 34, 79, .12);
}

.form-section h4 { font-size: 1rem; font-weight: 700; color: var(--text-strong); }

/* =========================================================
   PASSWORD STRENGTH + TOGGLE
   ========================================================= */
.progress { background: #eef1f6; border-radius: 999px; overflow: hidden; }
.progress-bar { transition: width .25s ease, background .25s ease; border-radius: 999px; }

#passwordHint { font-size: 12px; }
#passwordStrengthText,
#passwordMatchText { font-size: 12px; }

.toggle-icon,
.toggle-password,
.toggle-password1 {
	color: #9aa6b8;
	transition: color .15s ease;
}
.toggle-icon:hover,
.toggle-password:hover,
.toggle-password1:hover { color: var(--brand); }

/* =========================================================
   ALERTS
   ========================================================= */
.alert { border: none; border-radius: 12px; font-weight: 500; }
.alert-success { background: #d1f5ee; color: #0f766e; }
.alert-danger  { background: #fee2e2; color: #b91c1c; }

/* =========================================================
   PRO COMPONENTS — eyebrow, brand badge, feature chips,
   stat strip, trust row, testimonial, icon-in-field inputs
   ========================================================= */

/* Small uppercase label above headings */
.form-eyebrow,
.panel-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.form-eyebrow { color: var(--brand); }
.panel-eyebrow {
	color: rgba(234, 240, 255, .85);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	padding: 5px 12px;
	border-radius: 999px;
}
.panel-eyebrow .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

/* Brand panel headline */
.ai-panel .panel-headline {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 6px 0 12px;
}
.ai-panel .panel-sub {
	color: rgba(234, 240, 255, .72);
	font-size: .96rem;
	line-height: 1.6;
	max-width: 34ch;
}

/* Feature list with icon chips */
.feature-list { margin: 26px 0 0; padding: 0; list-style: none; }
.feature-list li,
.feature {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
	font-weight: 500;
	color: rgba(234, 240, 255, .94);
}
.feature-ico {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	font-size: .82rem;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Stat strip */
.panel-stats {
	display: flex;
	gap: 22px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.panel-stats .stat-item .num {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
}
.panel-stats .stat-item .lbl {
	font-size: .74rem;
	color: rgba(234, 240, 255, .62);
	font-weight: 500;
}

/* Trust row at bottom of panel */
.panel-foot {
	margin-top: auto;
	padding-top: 28px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .78rem;
	color: rgba(234, 240, 255, .6);
}
.panel-foot i { color: #4ade80; }

/* Testimonial card (optional) */
.panel-quote {
	margin-top: 26px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	padding: 18px 20px;
	backdrop-filter: blur(4px);
}
.panel-quote p { color: rgba(234, 240, 255, .92); font-size: .9rem; line-height: 1.55; margin: 0 0 12px; }
.panel-quote .who { display: flex; align-items: center; gap: 10px; }
.panel-quote .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.panel-quote .who .name { font-size: .82rem; font-weight: 700; color: #fff; }
.panel-quote .who .role { font-size: .72rem; color: rgba(234, 240, 255, .6); }

/* Icon-in-field inputs */
.field { position: relative; }
.field-ico {
	position: absolute;
	left: 15px; top: 50%;
	transform: translateY(-50%);
	color: #9aa6b8;
	font-size: .92rem;
	pointer-events: none;
	z-index: 2;
}
.field:focus-within .field-ico { color: var(--brand); }
.form-control.has-ico { padding-left: 44px !important; }
/* toggle eye sits inside .field, vertically centered */
.field .toggle-icon,
.field .toggle-password,
.field .toggle-password1 {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

/* Custom remember-me */
.remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	color: var(--text-muted);
	cursor: pointer;
	user-select: none;
	margin: 0;
}
.remember input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* Divider with text */
.auth-divider {
	display: flex; align-items: center; gap: 14px;
	color: #9aa6b8; font-size: .78rem; font-weight: 500;
	margin: 22px 0;
}
.auth-divider::before, .auth-divider::after {
	content: ""; flex: 1; height: 1px; background: var(--border);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767.98px) {
	.form-section { padding: 38px 28px; }
	.ai-panel { padding: 44px 32px; }
	.login-wrapper { border-radius: 20px; }
	.panel-stats { gap: 16px; }
}