/* Invoix Theme — Apple-inspired (restrained palette, generous whitespace, big type)
 *
 * Loaded on every web page via hooks.py.
 * Pages that want the Invoix look add class `invoix-page` to <body> via a small
 * inline <script> (templates do this in the page_content block).
 */

:root {
	/* Surfaces — very lightly tinted near-whites */
	--ix-bg:           #fbfbfe;  /* base page bg — barely tinted */
	--ix-bg-soft:      #f4f4fa;  /* alternating sections — gentle */
	--ix-bg-tint:      #eeeefa;  /* hero/CTA tint — subtle */
	--ix-bg-deep:      #1a1a2e;  /* dark sections — near-black with indigo cast */
	--ix-card:         #ffffff;
	--ix-text:         #1d1d1f;
	--ix-text-light:   #424245;
	--ix-muted:        #6e6e73;
	--ix-border:       #d8d6f5;
	--ix-border-soft:  #e8e6ff;

	/* Brand — deep indigo, used liberally as accent + section tints */
	--ix-brand:        #5e5ce6;
	--ix-brand-hover:  #4f46e5;
	--ix-brand-50:     rgba(94,92,230,0.05);
	--ix-brand-100:    rgba(94,92,230,0.10);
	--ix-brand-200:    rgba(94,92,230,0.20);
	--ix-brand-300:    rgba(94,92,230,0.30);
	--ix-link:         #4f46e5;

	/* Type scale */
	--ix-radius:       20px;
	--ix-radius-sm:    14px;
	--ix-radius-pill:  980px;

	/* Multi-layer premium shadows with brand tint */
	--ix-shadow-sm:    0 1px 3px rgba(94,92,230,.05), 0 1px 2px rgba(0,0,0,.04);
	--ix-shadow:       0 4px 12px rgba(94,92,230,.08),
	                   0 12px 32px rgba(94,92,230,.10),
	                   0 1px 3px rgba(15,15,40,.06);
	--ix-shadow-lg:    0 10px 30px rgba(94,92,230,.14),
	                   0 30px 60px rgba(94,92,230,.18),
	                   0 1px 3px rgba(15,15,40,.10);
	--ix-shadow-card:  0 1px 0 0 rgba(255,255,255,.6) inset,
	                   0 1px 2px rgba(94,92,230,.06),
	                   0 8px 24px rgba(94,92,230,.10);
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ---------- Reset & base type ---------- */

body.invoix-page,
body.invoix-page .web-page,
body.invoix-page .container {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
	             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ix-text);
	background: var(--ix-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.invoix-page h1,
body.invoix-page h2,
body.invoix-page h3,
body.invoix-page h4 {
	letter-spacing: -0.025em;
	color: var(--ix-text);
	font-weight: 700;
	margin: 0;
}

body.invoix-page h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
body.invoix-page h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
body.invoix-page h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; font-weight: 600; }
body.invoix-page h4 { font-size: 1.05rem; font-weight: 600; }

body.invoix-page p { color: var(--ix-text-light); line-height: 1.5; margin: 0; }
body.invoix-page a { color: var(--ix-link); text-decoration: none; }
body.invoix-page a:hover { text-decoration: underline; }

/* Full-width override: strip Bootstrap container max-widths on Invoix pages */
body.invoix-page .container,
body.invoix-page .web-page-content,
body.invoix-page .page_content,
body.invoix-page .web-page,
body.invoix-page main {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Hide Frappe defaults that don't belong on customer-facing pages */
body.invoix-page .footer-powered,
body.invoix-page .web-footer-section .footer-subscribe,
body.invoix-page .web-footer-menu,
body.invoix-page .web-footer,
body.invoix-page .breadcrumb-container,
body.invoix-page .navbar,
body.invoix-page #navbar { display: none !important; }

/* ---------- Shared components ---------- */

.ix-brand-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ix-text);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.ix-brand-mark:hover { text-decoration: none; color: var(--ix-text); }
.ix-brand-mark .ix-logo {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--ix-text);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: -0.02em;
}

/* Real logo image (icon + invoix wordmark) — used in nav and footer */
.ix-brand-img {
	height: 32px;
	width: auto;
	display: block;
}
.ix-footer .ix-brand-img { height: 26px; }
@media (max-width: 480px) { .ix-brand-img { height: 28px; } }

.ix-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ix-brand);
	letter-spacing: 0.01em;
	margin-bottom: 0.9rem;
}

/* Buttons — Apple's pill style with subtle weight */
.ix-btn,
body.invoix-page .ix-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--ix-text);
	color: #fff;
	padding: 0.7rem 1.3rem;
	border-radius: var(--ix-radius-pill);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s, transform .15s;
	line-height: 1;
}
.ix-btn:hover, body.invoix-page .ix-btn:hover { background: #000; color: #fff; text-decoration: none; }
.ix-btn:disabled { background: #c7c7cc; cursor: not-allowed; }

.ix-btn-primary,
body.invoix-page .ix-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--ix-brand);
	color: #fff;
	padding: 0.85rem 1.6rem;
	border-radius: var(--ix-radius-pill);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s, transform .15s;
	line-height: 1;
}
.ix-btn-primary:hover, body.invoix-page .ix-btn-primary:hover {
	background: var(--ix-brand-hover);
	color: #fff;
	text-decoration: none;
}
.ix-btn-primary:disabled { background: #c7c7cc; cursor: not-allowed; }

.ix-btn-ghost,
body.invoix-page .ix-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	color: var(--ix-text);
	padding: 0.7rem 1.3rem;
	border-radius: var(--ix-radius-pill);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid var(--ix-border);
	line-height: 1;
}
.ix-btn-ghost:hover, body.invoix-page .ix-btn-ghost:hover {
	background: var(--ix-bg-soft);
	color: var(--ix-text);
	text-decoration: none;
}

.ix-link-arrow {
	color: var(--ix-link);
	text-decoration: none;
	font-weight: 500;
}
.ix-link-arrow:hover { text-decoration: underline; }
.ix-link-arrow::after { content: " ›"; }

/* Card */
.ix-card {
	background: var(--ix-card);
	border: 1px solid var(--ix-border-soft);
	border-radius: var(--ix-radius);
	padding: 2rem;
}

/* ---------- Top nav — sticky, frosted ---------- */

.ix-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251,251,253,.82);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.ix-nav .ix-nav-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.5rem;
}
.ix-nav nav { display: flex; gap: 2rem; }
.ix-nav nav a {
	color: var(--ix-text);
	font-weight: 400;
	text-decoration: none;
	font-size: 0.88rem;
	opacity: .8;
}
.ix-nav nav a:hover { opacity: 1; text-decoration: none; }

/* ---------- Footer ---------- */

.ix-footer {
	background: var(--ix-bg-soft);
	border-top: 1px solid var(--ix-border-soft);
	padding: 3rem 1.5rem 2rem;
	color: var(--ix-muted);
	font-size: 0.82rem;
	margin-top: 0;
}
.ix-footer .ix-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}
.ix-footer a { color: var(--ix-muted); }

/* ---------- Global loading overlay ---------- */

.ix-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background:
		linear-gradient(145deg, rgba(94,92,230,.14), rgba(255,255,255,.86) 38%, rgba(17,181,216,.10)),
		rgba(251,251,254,.78);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

body.ix-loading .ix-loading-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ix-loading-card {
	display: grid;
	justify-items: center;
	gap: 1rem;
	color: var(--ix-text);
}

.ix-loading-ring {
	width: 88px;
	height: 88px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg, var(--ix-brand), rgba(94,92,230,.18), #11b5d8, var(--ix-brand));
	box-shadow: 0 24px 60px rgba(94,92,230,.24);
	animation: ix-spin 1s linear infinite;
}

.ix-loading-ring::before {
	content: "";
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	box-shadow: inset 0 0 0 1px rgba(94,92,230,.12);
}

.ix-loading-logo {
	position: absolute;
	width: 42px;
	height: auto;
}

.ix-loading-text {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ix-brand);
	letter-spacing: .01em;
}

@keyframes ix-spin {
	to { transform: rotate(360deg); }
}

/* ---------- LOGIN page Apple-style override ----------
 * Login is rendered by frappe/templates/pages/login.html (we don't own it).
 * Structure: each `.for-login`, `.for-signup`, `.for-forgot`, `.for-email-login`
 * section contains:
 *   <div class="page-card-head"> ... logo + h4 ...
 *   <div class="login-content page-card"> ... form ... </div>
 * These two are SIBLINGS, not nested. We restyle so they read as ONE card.
 */

body[data-path="login"],
body[data-path="signup"],
body[data-path="update-password"] {
	background: var(--ix-bg);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
	             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ix-text);
}

:root div#page-login
{
	min-height: auto !important;
	padding: 20px !important;
	height: auto !important;
}

body.ix-auth-page {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

body.ix-auth-page .ix-nav,
body.ix-auth-page .ix-footer {
	flex: 0 0 auto;
}

/* Strip Frappe scaffolding on these pages */
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .footer-powered,
body[data-path="login"] .breadcrumb-container,
body[data-path="login"] .web-footer-section,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="update-password"] .navbar,
body[data-path="update-password"] .web-footer,
body[data-path="update-password"] .footer-powered,
body[data-path="update-password"] .breadcrumb-container,
body[data-path="update-password"] .web-footer-section,
body[data-path="update-password"] .page-breadcrumbs,
body[data-path="update-password"] .page-header-wrapper {
	display: none !important;
}

body[data-path="login"] .page_content,
body[data-path="login"] main.container,
body[data-path="update-password"] .page_content,
body[data-path="update-password"] main.container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body[data-path="login"] #page-login,
body[data-path="update-password"] #page-update-password {
	flex: 1 0 auto;
	min-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3rem, 7vh, 5.5rem) 1.5rem;
	background:
		linear-gradient(140deg, rgba(94,92,230,.18) 0%, rgba(255,255,255,0) 44%),
		linear-gradient(32deg, rgba(17,181,216,.12) 0%, rgba(255,255,255,0) 48%),
		var(--ix-bg);
}

/* Each auth section (login/signup/forgot/email-link) becomes a single visual card */
body[data-path="login"] .for-login,
body[data-path="login"] .for-signup,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-email-login {
	width: 100% !important;
	min-width: 400px !important;
	margin: 0 auto !important;
	background: var(--ix-card);
	border: 1px solid var(--ix-border-soft);
	border-radius: var(--ix-radius);
	padding: 1em !important;
	box-shadow: var(--ix-shadow-lg);
}

/* Header (logo + title) — sits on top of the card without its own background */
body[data-path="login"] .page-card-head {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 1.25rem !important;
	text-align: center !important;
}
/* The original Frappe img (ERPNext logo) is hidden; our JS injects an
   <img class="ix-auth-mark"> with the Invoix favicon. */
body[data-path="login"] .page-card-head .app-logo {
	display: none !important;
}
body[data-path="login"] .page-card-head .ix-auth-mark {
	display: block !important;
	width: 48px !important;
	height: 48px !important;
	margin: 0 auto 0.75rem !important;
	border-radius: 0 !important;
	object-fit: contain !important;
}
body[data-path="login"] .page-card-head h4 {
	font-size: 1.4rem !important;
	font-weight: 600 !important;
	color: var(--ix-text) !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Inner content area — drop the inner card styling, we're already one card */
body[data-path="login"] .login-content,
body[data-path="login"] .login-content.page-card {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	max-width: none !important;
	margin: 0 !important;
	width: 100% !important;
}

body[data-path="login"] .login-content form,
body[data-path="login"] .form-signin {
	max-width: none !important;
	width: 100% !important;
}

body[data-path="login"] .page-card-body { padding: 0 !important; margin: 0 !important; }

/* Inputs (incl. the email + password fields, with their wrapping divs) */
body[data-path="login"] .form-group { margin-bottom: 0.8rem !important; }
body[data-path="login"] .email-field,
body[data-path="login"] .password-field { position: relative; }
body[data-path="login"] input[type="text"],
body[data-path="login"] input[type="email"],
body[data-path="login"] input[type="password"],
body[data-path="update-password"] input[type="password"],
body[data-path="update-password"] input[type="text"] {
	border: 1px solid var(--ix-border) !important;
	border-radius: 14px !important;
	padding: 1rem 1.15rem 1rem 2.75rem !important;  /* room for left icon */
	font-size: 1rem !important;
	color: var(--ix-text) !important;
	background: #fff !important;
	font-family: inherit !important;
	min-height: 56px !important;
	height: auto !important;
	width: 100% !important;
	box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s !important;
}
body[data-path="login"] input:focus,
body[data-path="update-password"] input:focus {
	border-color: var(--ix-brand) !important;
	box-shadow: 0 0 0 3px rgba(94,92,230,.15) !important;
	outline: 0 !important;
}

/* Field-icon SVGs (envelope + lock) */
body[data-path="login"] .field-icon {
	position: absolute !important;
	left: 1rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--ix-muted) !important;
	pointer-events: none;
}

/* "Show" toggle inside the password field */
body[data-path="login"] .toggle-password {
	position: absolute !important;
	right: 1.15rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: pointer;
	font-size: 0.8rem !important;
	color: var(--ix-muted) !important;
	font-weight: 500 !important;
	background: transparent !important;
}

/* Forgot Password link — right-aligned, small, brand-tinted */
body[data-path="login"] .forgot-password-message {
	margin: 0.55rem 0 1.8rem !important;
	text-align: right !important;
}
body[data-path="login"] .forgot-password-message a {
	color: var(--ix-brand) !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}
body[data-path="login"] .forgot-password-message a:hover { text-decoration: underline !important; }

/* Action area + primary button (the Login button) */
body[data-path="login"] .page-card-actions { padding: 0 !important; margin: 0 !important; }

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-signup,
body[data-path="login"] .btn-forgot,
body[data-path="login"] button.btn-primary,
body[data-path="update-password"] button.btn-primary {
	background: var(--ix-brand) !important;
	background-image: none !important;
	border: 0 !important;
	color: #fff !important;
	padding: 1.1rem 1.5rem !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	width: 100% !important;
	display: block !important;
	height: auto !important;
	line-height: 1 !important;
	box-shadow: 0 4px 12px rgba(94,92,230,.20) !important;
	transition: background .15s, transform .15s, box-shadow .15s !important;
	cursor: pointer !important;
}
body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-signup:hover,
body[data-path="login"] .btn-forgot:hover,
body[data-path="login"] button.btn-primary:hover,
body[data-path="update-password"] button.btn-primary:hover {
	background: var(--ix-brand-hover) !important;
	box-shadow: 0 6px 18px rgba(94,92,230,.30) !important;
	transform: translateY(-1px) !important;
}

/* Login with Email Link — secondary outlined button */
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] .btn-login-option {
	background: var(--ix-card) !important;
	background-image: none !important;
	border: 1px solid var(--ix-border) !important;
	color: var(--ix-text) !important;
	padding: 1rem 1.5rem !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
	font-size: 0.92rem !important;
	width: 100% !important;
	display: block !important;
	box-shadow: none !important;
	height: auto !important;
	line-height: 1 !important;
	transition: background .15s, border-color .15s !important;
	margin-top: 0 !important;
	text-decoration: none !important;
}
body[data-path="login"] .btn-login-with-email-link:hover,
body[data-path="login"] .btn-login-option:hover {
	background: var(--ix-bg-soft) !important;
	border-color: var(--ix-text) !important;
	text-decoration: none !important;
}

body[data-path="login"] .login-button-wrapper { width: 100% !important; }

/* "or" divider — clean line with text in the middle */
body[data-path="login"] .login-divider {
	text-align: center !important;
	color: var(--ix-muted) !important;
	font-size: 0.78rem !important;
	margin: 1.9rem 0 1.35rem !important;
	position: relative !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}
body[data-path="login"] .login-divider::before,
body[data-path="login"] .login-divider::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	width: 42% !important;
	height: 1px !important;
	background: var(--ix-border-soft) !important;
}
body[data-path="login"] .login-divider::before { left: 0 !important; }
body[data-path="login"] .login-divider::after { right: 0 !important; }

body[data-path="login"] .social-logins { margin-top: 0 !important; padding-top: 0 !important; }

body[data-path="login"] .login-language-selector { display: none !important; }

/* "Don't have an account?" footer — injected via JS (see invoix_web.js) */
body[data-path="login"] .ix-auth-footer-cta {
	text-align: center;
	margin-top: 2rem;
	color: var(--ix-muted);
	font-size: 0.88rem;
}
body[data-path="login"] .ix-auth-footer-cta a {
	color: var(--ix-brand);
	font-weight: 600;
	text-decoration: none;
}
body[data-path="login"] .ix-auth-footer-cta a:hover { text-decoration: underline; }

/* "Back to Login" links inside the for-signup / for-forgot stanzas */
body[data-path="login"] .for-signup a[href="#login"],
body[data-path="login"] .for-forgot a[href="#login"],
body[data-path="login"] .for-email-login a[href="#login"] {
	display: inline-block;
	margin-top: 1rem;
	color: var(--ix-muted) !important;
	font-size: 0.85rem !important;
	text-decoration: none !important;
}
body[data-path="login"] .for-signup a[href="#login"]:hover,
body[data-path="login"] .for-forgot a[href="#login"]:hover,
body[data-path="login"] .for-email-login a[href="#login"]:hover { color: var(--ix-text) !important; }

/* ---------- Small media tweaks ---------- */

@media (max-width: 720px) {
	.ix-nav nav { display: none; }

	body[data-path="login"] #page-login,
	body[data-path="update-password"] #page-update-password {
		padding: 2.25rem 1rem;
	}

	body[data-path="login"] .for-login,
	body[data-path="login"] .for-signup,
	body[data-path="login"] .for-forgot,
	body[data-path="login"] .for-email-login {
		max-width: 100% !important;
		padding: 1.5rem 1.25rem !important;
		border-radius: 18px;
	}

	body[data-path="login"] .ix-auth-footer-cta {
		margin-top: 1.5rem;
	}

	.ix-footer .ix-footer-inner {
		justify-content: center;
		text-align: center;
	}

	.ix-loading-ring {
		width: 76px;
		height: 76px;
	}

	.ix-loading-ring::before {
		width: 58px;
		height: 58px;
	}

	.ix-loading-logo {
		width: 34px;
	}
}
