/* =====================================================================
   Qriib auth screens — sign in, sign up, password reset.

   Loaded by mjara_brand/www/login.html, which shadows Frappe's own login
   template. It is deliberately the only stylesheet that owns these
   screens: frappe's login.bundle.css is still loaded first for the shared
   form/field plumbing, everything visual below overrides it.

   Light and dark come out of one token block:
     :root                                       -> light
     prefers-color-scheme: dark, unless pinned   -> dark
     [data-theme="dark"]                         -> dark, explicit
   data-theme is stamped on <html> by mjara_spa.js from the desk theme and,
   before first paint, by the inline script in the template head.
   ===================================================================== */

:root {
	--qriib-auth-bg: #f7f7fb;
	--qriib-auth-card: #ffffff;
	--qriib-auth-card-border: #ebe8f1;
	--qriib-auth-card-border-accent: rgba(157, 72, 231, 0.68);
	--qriib-auth-card-border-soft: rgba(157, 72, 231, 0.18);
	--qriib-auth-card-shadow: none;
	--qriib-auth-title: #17171c;
	--qriib-auth-muted: #6c6c7a;
	--qriib-auth-label: #35353f;
	--qriib-auth-input-bg: #ffffff;
	--qriib-auth-input-border: #e1e1e8;
	--qriib-auth-input-text: #17171c;
	--qriib-auth-placeholder: #a7a7b3;
	--qriib-auth-brand: var(--primary, #9d48e7);
	--qriib-auth-brand-hover: #8933d4;
	--qriib-auth-brand-text: #ffffff;
	--qriib-auth-focus-ring: rgba(157, 72, 231, 0.18);
	--qriib-auth-danger: #c0392b;
	--qriib-auth-danger-bg: rgba(192, 57, 43, 0.08);
	--qriib-auth-success: #1a7f5a;
	--qriib-auth-success-bg: rgba(26, 127, 90, 0.08);
	--qriib-auth-subtle-bg: #f2f2f5;
	--qriib-auth-subtle-hover: #e9e9ef;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--qriib-auth-bg: #0f0e11;
		--qriib-auth-card: #17161a;
		--qriib-auth-card-border: rgba(255, 255, 255, 0.09);
		--qriib-auth-card-border-accent: rgba(172, 99, 238, 0.68);
		--qriib-auth-card-border-soft: rgba(172, 99, 238, 0.18);
		--qriib-auth-card-shadow: none;
		--qriib-auth-title: #f4f4f6;
		--qriib-auth-muted: #9c9ca8;
		--qriib-auth-label: #c9c9d2;
		--qriib-auth-input-bg: #201f24;
		--qriib-auth-input-border: rgba(255, 255, 255, 0.11);
		--qriib-auth-input-text: #f4f4f6;
		--qriib-auth-placeholder: #74747f;
		--qriib-auth-brand: var(--primary, #9d48e7);
		--qriib-auth-brand-hover: #ac63ee;
		--qriib-auth-brand-text: #ffffff;
		--qriib-auth-focus-ring: rgba(157, 72, 231, 0.32);
		--qriib-auth-danger: #ff8080;
		--qriib-auth-danger-bg: rgba(255, 128, 128, 0.12);
		--qriib-auth-success: #5fd4a5;
		--qriib-auth-success-bg: rgba(95, 212, 165, 0.12);
		--qriib-auth-subtle-bg: #242329;
		--qriib-auth-subtle-hover: #2d2c33;
	}
}

:root[data-theme="dark"] {
	--qriib-auth-bg: #0f0e11;
	--qriib-auth-card: #17161a;
	--qriib-auth-card-border: rgba(255, 255, 255, 0.09);
	--qriib-auth-card-border-accent: rgba(172, 99, 238, 0.68);
	--qriib-auth-card-border-soft: rgba(172, 99, 238, 0.18);
	--qriib-auth-card-shadow: none;
	--qriib-auth-title: #f4f4f6;
	--qriib-auth-muted: #9c9ca8;
	--qriib-auth-label: #c9c9d2;
	--qriib-auth-input-bg: #201f24;
	--qriib-auth-input-border: rgba(255, 255, 255, 0.11);
	--qriib-auth-input-text: #f4f4f6;
	--qriib-auth-placeholder: #74747f;
	--qriib-auth-brand: var(--primary, #9d48e7);
	--qriib-auth-brand-hover: #ac63ee;
	--qriib-auth-brand-text: #ffffff;
	--qriib-auth-focus-ring: rgba(157, 72, 231, 0.32);
	--qriib-auth-danger: #ff8080;
	--qriib-auth-danger-bg: rgba(255, 128, 128, 0.12);
	--qriib-auth-success: #5fd4a5;
	--qriib-auth-success-bg: rgba(95, 212, 165, 0.12);
	--qriib-auth-subtle-bg: #242329;
	--qriib-auth-subtle-hover: #2d2c33;
}

/* ---------------------------------------------------------------------
   Section visibility. login.js routes between these on the URL hash and
   shows one with jQuery .toggle(), which writes an inline display — so the
   starting state has to come from here, not from frappe's login bundle.
   --------------------------------------------------------------------- */
.qriib-auth .for-forgot,
.qriib-auth .for-login-with-email-link,
.qriib-auth .for-signup,
.qriib-auth .for-email-login {
	display: none;
}

/* ---------------------------------------------------------------------
   Page shell. The tab bar is 42px and mjara_tabs.css pads the body by it,
   so the card centres in what is left rather than in the whole viewport.
   --------------------------------------------------------------------- */
body.qriib-auth-page {
	background-color: var(--qriib-auth-bg);
	color: var(--qriib-auth-title);
}

body.qriib-auth-page .page-content-wrapper {
	min-height: 0;
	padding-top: 0;
}

body.qriib-auth-page .page-breadcrumbs,
body.qriib-auth-page .page-header-wrapper,
body.qriib-auth-page .page-footer,
body.qriib-auth-page .web-footer {
	display: none;
}

body.qriib-auth-page main.container {
	max-width: none;
	padding: 0;
}

body.qriib-auth-page .page_content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 42px - var(--navbar-height, 50px));
	padding: 24px 16px;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Card
   --------------------------------------------------------------------- */
.qriib-auth .login-content.page-card {
	width: 100%;
	/* Wide enough that the two role chips per row read as full words rather
	   than wrapping mid-label; the form itself is unchanged. */
	max-width: 420px;
	margin: 0 auto;
	padding: 32px;
	gap: 24px;
	box-sizing: border-box;
	background:
		linear-gradient(var(--qriib-auth-card), var(--qriib-auth-card)) padding-box,
		linear-gradient(
			180deg,
			var(--qriib-auth-card-border-accent) 0%,
			var(--qriib-auth-card-border-soft) 46%,
			var(--qriib-auth-card-border) 100%
		) border-box;
	border: 1px solid transparent;
	border-radius: 12px;
	box-shadow: var(--qriib-auth-card-shadow);
}

.qriib-auth .login-content.page-card.invalid-login {
	animation: qriib-auth-shake 0.4s ease;
}

@keyframes qriib-auth-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.qriib-auth .page-card-head {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}

.qriib-auth .page-card-head h4 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--qriib-auth-title);
}

.qriib-auth .page-card-subtitle {
	margin: 0 auto;
	font-size: 12px;
	line-height: 1.55;
	color: var(--qriib-auth-muted);
	/* Spread the tagline evenly instead of filling each line and dropping a
	   single orphaned word onto the last one. `balance` is ignored by browsers
	   that do not support it, which leaves the previous behaviour. */
	text-wrap: balance;
	max-width: 32ch;
	/* A line may not break inside a word: Arabic has no hyphenation here and a
	   split word reads as a typo. */
	overflow-wrap: normal;
	word-break: keep-all;
}

/* ---------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------- */
.qriib-auth form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.qriib-auth .page-card-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.qriib-auth .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	align-items: stretch;
}

.qriib-auth .form-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.qriib-auth .form-label {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--qriib-auth-label);
}

.qriib-auth .form-control {
	width: 100%;
	height: 36px;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--qriib-auth-input-text);
	background-color: var(--qriib-auth-input-bg);
	border: 1px solid var(--qriib-auth-input-border);
	border-radius: 6px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qriib-auth .form-control::placeholder {
	color: var(--qriib-auth-placeholder);
	opacity: 1;
}

.qriib-auth .form-control:focus {
	outline: none;
	border-color: var(--qriib-auth-brand);
	box-shadow: 0 0 0 2px var(--qriib-auth-focus-ring);
}

.qriib-auth .form-group.invalid .form-control {
	border-color: var(--qriib-auth-danger);
}

.qriib-auth .form-group.invalid .form-control:focus {
	box-shadow: 0 0 0 2px var(--qriib-auth-danger-bg);
}

/* Password reveal. Logical inset so RTL flips it with the text. */
.qriib-auth .password-field {
	position: relative;
	display: block;
}

.qriib-auth .password-field .form-control {
	padding-inline-end: 38px;
}

.qriib-auth .password-field .form-control::-ms-reveal {
	display: none;
}

.qriib-auth .toggle-password {
	position: absolute;
	fill: currentColor;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--qriib-auth-muted);
	cursor: pointer;
}

.qriib-auth .toggle-password:hover {
	color: var(--qriib-auth-title);
}

.qriib-auth .field-error {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--qriib-auth-danger);
}

.qriib-auth .field-error:empty {
	display: none;
}

.qriib-auth .form-group.invalid .field-error {
	display: block;
}

.qriib-auth .forgot-password-message {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--qriib-auth-brand);
	text-decoration: none;
}

.qriib-auth .forgot-password-message:hover,
.qriib-auth .forgot-password-message:focus {
	color: var(--qriib-auth-brand-hover);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Banners
   --------------------------------------------------------------------- */
.qriib-auth .login-error-banner {
	display: none;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 9px;
	font-size: 9px;
	line-height: 1.45;
	color: var(--qriib-auth-danger);
	background-color: var(--qriib-auth-danger-bg);
	border-radius: 6px;
}

.qriib-auth .login-success-banner {
	display: none;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 9px;
	font-size: 9px;
	line-height: 1.45;
	color: var(--qriib-auth-success);
	background-color: var(--qriib-auth-success-bg);
	border-radius: 6px;
}

.qriib-auth .login-error-banner svg,
.qriib-auth .login-success-banner svg {
	flex: 0 0 auto;
	margin-top: 1px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------- */
.qriib-auth .page-card-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.qriib-auth .btn-login,
.qriib-auth .btn-signup,
.qriib-auth .btn-ldap-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	border-radius: 6px;
}


.qriib-auth .btn-login:focus-visible,
.qriib-auth .btn-signup:focus-visible,
.qriib-auth .btn-ldap-login:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--qriib-auth-focus-ring);
}

.qriib-auth .btn-signup:disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Secondary actions — email-link sign in, social providers. */
.qriib-auth .btn-login-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 36px;
	padding: 9px 12px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--qriib-auth-label);
	background: var(--qriib-auth-subtle-bg);
	border: 1px solid var(--qriib-auth-card-border);
	border-radius: 6px;
	box-shadow: none;
}

.qriib-auth .btn-login-option:hover,
.qriib-auth .btn-login-option:focus {
	color: var(--qriib-auth-title);
	background: var(--qriib-auth-subtle-hover);
	border-color: var(--qriib-auth-card-border);
}

.qriib-auth .btn-login-option img,
.qriib-auth .btn-login-option svg {
	margin: 0;
}

.qriib-auth .social-logins {
	margin: 0;
}

.qriib-auth .social-login-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.qriib-auth .login-button-wrapper {
	min-width: 0;
	padding: 0;
	margin: 0;
}

.qriib-auth .resend-link {
	display: none;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 9px;
	color: var(--qriib-auth-muted);
}

.qriib-auth .resend-link a {
	color: var(--qriib-auth-brand);
}

/* ---------------------------------------------------------------------
   Footer line
   --------------------------------------------------------------------- */
.qriib-auth .sign-up-message {
	margin: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: var(--qriib-auth-muted);
}

.qriib-auth .sign-up-message a,
.qriib-auth .sign-up-message .contact-admin {
	color: var(--qriib-auth-brand);
	font-weight: 500;
	text-decoration: none;
}

.qriib-auth .sign-up-message a:hover,
.qriib-auth .sign-up-message a:focus {
	color: var(--qriib-auth-brand-hover);
	text-decoration: underline;
}

.qriib-auth .signup-disabled-message {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.qriib-auth .signup-disabled-message .text-muted {
	margin: 0;
	font-size: 12px;
	color: var(--qriib-auth-muted);
}

/* ---------------------------------------------------------------------
   Two-factor step. login.js empties .login-content and injects its own
   markup there, so it inherits the card but needs its own field rules.
   --------------------------------------------------------------------- */
.qriib-auth #twofactor_div .form-verify {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qriib-auth #twofactor_div .text-muted {
	padding-bottom: 0 !important;
	font-size: 12px;
	color: var(--qriib-auth-muted);
}

.qriib-auth #twofactor_div #login_token {
	width: 100%;
	height: 36px;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--qriib-auth-input-text);
	background-color: var(--qriib-auth-input-bg);
	border: 1px solid var(--qriib-auth-input-border);
	border-radius: 6px;
}

.qriib-auth #twofactor_div #verify_token {
	margin-top: 0 !important;
	height: 36px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Small screens — the card becomes the page.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	body.qriib-auth-page .page_content {
		padding: 0;
		align-items: stretch;
	}

	.qriib-auth .login-content.page-card {
		max-width: 100%;
		min-height: calc(100vh - 42px);
		justify-content: center;
		padding: 48px 28px;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------
   Demo role picker.

   Built entirely on the tokens above, so light and dark are the same rules
   with different values and there is no second palette to keep in step.
   --------------------------------------------------------------------- */
.qriib-auth .qriib-demo-personas {
	margin-top: 22px;
}

.qriib-auth .qriib-demo-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--qriib-auth-muted);
	font-size: 12px;
	white-space: nowrap;
}

.qriib-auth .qriib-demo-divider::before,
.qriib-auth .qriib-demo-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--qriib-auth-card-border);
}

.qriib-auth .qriib-demo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.qriib-auth .qriib-demo-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--qriib-auth-input-border);
	border-radius: 9px;
	background: var(--qriib-auth-card);
	color: var(--qriib-auth-input-text);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	/* A role name is one line. Arabic renders these longer than English, so
	   the label shrinks to fit rather than wrapping to a second line and
	   making the chips different heights. */
	white-space: nowrap;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.qriib-auth .qriib-demo-chip > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qriib-auth .qriib-demo-chip svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--qriib-auth-muted);
}

.qriib-auth .qriib-demo-chip:hover {
	border-color: var(--qriib-auth-card-border-accent);
	background: var(--qriib-auth-subtle-bg);
}

.qriib-auth .qriib-demo-chip:hover svg {
	color: var(--qriib-auth-brand);
}

.qriib-auth .qriib-demo-chip:active {
	transform: translateY(1px);
}

.qriib-auth .qriib-demo-chip:focus-visible {
	outline: 2px solid var(--qriib-auth-brand);
	outline-offset: 2px;
}

.qriib-auth .qriib-demo-count {
	font-style: normal;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--qriib-auth-subtle-bg);
	color: var(--qriib-auth-muted);
}

/* ---- the full list -------------------------------------------------
   Anchored inside the card rather than over the page: the visitor keeps the
   email and password fields in view while choosing, which is the whole point
   of filling them in front of him. The card is the positioning context. */
.qriib-auth .login-content.page-card {
	position: relative;
}

.qriib-demo-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: inherit;
	background: color-mix(in srgb, var(--qriib-auth-card) 78%, transparent);
	backdrop-filter: blur(3px);
}

.qriib-demo-overlay[hidden] {
	display: none;
}

.qriib-demo-panel {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--qriib-auth-card-border);
	border-radius: 12px;
	background: var(--qriib-auth-card);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}

.qriib-demo-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	height: 46px;
	border-bottom: 1px solid var(--qriib-auth-card-border);
	flex-shrink: 0;
}

.qriib-demo-search svg {
	width: 16px;
	height: 16px;
	color: var(--qriib-auth-muted);
	flex-shrink: 0;
}

.qriib-demo-search input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--qriib-auth-input-text);
	font-size: 13px;
}

.qriib-demo-search input::placeholder {
	color: var(--qriib-auth-placeholder);
}

.qriib-demo-list {
	overflow-y: auto;
	padding: 6px;
	flex: 1;
}

.qriib-demo-group[hidden] {
	display: none;
}

.qriib-demo-group-title {
	padding: 10px 10px 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qriib-auth-muted);
}

.qriib-demo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--qriib-auth-input-text);
	font-size: 13px;
	text-align: start;
	cursor: pointer;
}

.qriib-demo-row[hidden] {
	display: none;
}

.qriib-demo-row:hover,
.qriib-demo-row:focus-visible {
	background: var(--qriib-auth-subtle-bg);
	outline: none;
}

.qriib-demo-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: 1px solid var(--qriib-auth-input-border);
	border-radius: 7px;
	color: var(--qriib-auth-muted);
}

.qriib-demo-row-icon svg {
	width: 14px;
	height: 14px;
}

.qriib-demo-row:hover .qriib-demo-row-icon {
	color: var(--qriib-auth-brand);
	border-color: var(--qriib-auth-card-border-accent);
}

.qriib-demo-empty {
	padding: 26px 10px;
	text-align: center;
	color: var(--qriib-auth-muted);
	font-size: 12.5px;
}

.qriib-demo-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px;
	border-top: 1px solid var(--qriib-auth-card-border);
	color: var(--qriib-auth-muted);
	font-size: 11.5px;
	flex-shrink: 0;
}

.qriib-demo-foot kbd {
	padding: 1px 6px;
	border: 1px solid var(--qriib-auth-input-border);
	border-radius: 5px;
	background: var(--qriib-auth-subtle-bg);
	font-size: 10.5px;
	font-family: inherit;
}

body.qriib-demo-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.qriib-auth .qriib-demo-grid {
		grid-template-columns: 1fr;
	}

	/* The card fills the screen here, so the panel inside it does too. */
	.qriib-demo-overlay {
		padding: 8px;
	}
}

/* The role that is currently loaded into the form. */
.qriib-auth .qriib-demo-chip.is-selected {
	border-color: var(--qriib-auth-brand);
	background: var(--qriib-auth-subtle-bg);
}

.qriib-auth .qriib-demo-chip.is-selected svg {
	color: var(--qriib-auth-brand);
}

.qriib-auth .qriib-demo-selected {
	margin: 10px 0 0;
	text-align: center;
	font-size: 11.5px;
	color: var(--qriib-auth-muted);
}

.qriib-auth .qriib-demo-selected[hidden] {
	display: none;
}

.qriib-auth .qriib-demo-selected::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-end: 6px;
	border-radius: 50%;
	background: var(--qriib-auth-brand);
	vertical-align: middle;
}