/*
 * The form surface of the authentication pages: sign in, registration, recovery, verification and
 * email confirmation.
 *
 * The shell these sit in - the centred column, the brand mark, the card face and the legend pills -
 * is not here. It moved to yeti-scene-shell.css when the error pages wanted the same shell without
 * a form, the same way the landscape behind it moved to yeti-scene.css when the contact page wanted
 * the artwork without the card. So what remains is only what a page with fields uses.
 *
 * Scoped to .auth-page, which AuthTemplate appends to the .scene-shell class SceneShellTemplate
 * writes. The card surface reads --yeti-shell-* tokens declared in that sheet; the --yeti-auth-*
 * tokens below are the ones only a form needs.
 *
 * Contributed by AuthTemplate alone. Its dependency chain is Tabler, then the application's shared
 * corrections, then the public marketing shell, then the scene shell, then this.
 */

.auth-page {
	--yeti-auth-field: rgba(255, 255, 255, .72);
	--yeti-auth-field-edge: rgba(26, 36, 52, .16);
	/* Terra-cotta for focus, icons and links; the primary action stays on the brand blue. */
	--yeti-auth-accent: #a9542f;
	--yeti-auth-accent-ring: rgba(169, 84, 47, .26);
}

/*
 * CreateAccountPanel is shared with the admin create-user page, where its own row / column grid is
 * what keeps the form off the full width of a wide content area. Inside a 27rem card that same grid
 * narrows every field to 83% and leaves dead gutters either side, so the columns are flattened here
 * rather than changed in the shared panel - the admin page keeps the centring it was written for.
 */
.auth-card .row > [class*="col-"] {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
}

/* Fields ---------------------------------------------------------------- */

/*
 * Nothing here sets type on the form.
 *
 * Labels, help text, validation messages and the button all keep Tabler's own metrics - .875rem at
 * medium weight with a .5rem gap under the label - so a field here reads exactly as it does in
 * Tabler's own sign-in example. The earlier smaller, semibold label was a local invention that made
 * these pages subtly not-Tabler for no reason. What is ours below is surface only: the translucent
 * field, the terracotta focus, and the states.
 */

/*
 * One continuous field: the icon shares the control's surface rather than sitting in a separate
 * grey chip, so the input group reads as a single rounded input with a glyph inside it.
 */
.auth-card .input-group > .form-control,
.auth-card .input-group > .form-select {
	border-left: 0;
	padding-left: 0;
}

.auth-card .input-group > .input-group-text:first-child {
	border-right: 0;
	padding-right: .5rem;
	background-color: transparent;
	color: var(--yeti-auth-accent);
}

.auth-card .form-control,
.auth-card .form-select,
.auth-card .input-group > .input-group-text {
	border-color: var(--yeti-auth-field-edge);
	background-color: var(--yeti-auth-field);
	color: var(--yeti-shell-ink);
}

.auth-card .form-control::placeholder {
	color: rgba(92, 107, 126, .75);
}

/*
 * What wicket-tabler's password-reveal correction reads, so this card's palette reaches it.
 *
 * That sheet is contributed by the theme and therefore lands after this one, and its focus rules
 * are (0,3,0) - the same as the ones below. The two tied and it won on source order, so the
 * password field alone came up in Tabler's primary blue while every other field on the card was
 * accent. Rather than out-specify it with a :has(.bs5-reveal) selector here, which is what this
 * sheet did for a while, the values are handed to it: it reads each as var(--x, default), so a
 * declaration anywhere above the group wins outright.
 *
 * On .auth-card rather than on the group, because it is the card that owns the palette and there is
 * nothing reveal-specific about wanting the field to match the four beside it.
 */
.auth-card {
	--bs5-reveal-ring: 0 0 0 .25rem var(--yeti-auth-accent-ring);
	--bs5-reveal-focus-border: var(--yeti-auth-accent);
	--bs5-reveal-addon-bg: var(--yeti-auth-field);
}

/*
 * Focus lights the whole group, not just the half of it the caret is in. Without :focus-within on
 * the group the icon chip keeps its resting border and the field visibly splits in two.
 */
.auth-card .input-group:focus-within > .form-control,
.auth-card .input-group:focus-within > .input-group-text,
.auth-card .form-control:focus,
.auth-card .form-select:focus {
	border-color: var(--yeti-auth-accent);
	background-color: rgba(255, 255, 255, .92);
	box-shadow: none;
}

.auth-card .input-group:focus-within {
	border-radius: var(--tblr-border-radius);
	box-shadow: 0 0 0 .25rem var(--yeti-auth-accent-ring);
}

.auth-card .form-control:not(.is-invalid):focus,
.auth-card .form-select:not(.is-invalid):focus {
	box-shadow: 0 0 0 .25rem var(--yeti-auth-accent-ring);
}

.auth-card .input-group:focus-within > .form-control:focus {
	box-shadow: none;
}


/*
 * Validation state is the library's; only the surface underneath it is ours. Tabler paints its own
 * status glyph into the control's background, which lands on top of the field's trailing edge and
 * fights the password toggle - the border colour and the message carry the state here.
 */
.auth-card .form-control.is-invalid,
.auth-card .form-select.is-invalid {
	background-image: none;
	padding-right: .75rem;
}

.auth-card .is-invalid,
.auth-card .input-group:has(.is-invalid) > .input-group-text {
	border-color: var(--tblr-danger);
}

.auth-card .input-group:has(.is-invalid):focus-within {
	box-shadow: 0 0 0 .25rem rgba(var(--tblr-danger-rgb), .22);
}

.auth-card .form-check-input:checked {
	border-color: var(--yeti-auth-accent);
	background-color: var(--yeti-auth-accent);
}

.auth-card .form-check-input:focus {
	border-color: var(--yeti-auth-accent);
	box-shadow: 0 0 0 .25rem var(--yeti-auth-accent-ring);
}

/*
 * Show / hide password.
 *
 * PasswordFormField.revealable() renders the toggle in the input group's own .input-group-text
 * span, so it needs no styling of its own here - the addon rules above already reach it. What they
 * assume is a *leading* addon, which is what the lock glyph is: border-right removed and the
 * padding weighted to the left. The reveal is trailing, so those two are mirrored for it.
 *
 * The library ships the glyph as an inline SVG rather than a webfont class, so nothing on these
 * pages depends on the icon font being loaded for the control to appear.
 */
.auth-card .input-group > .form-control:not(:last-child) {
	border-right: 0;
	padding-right: 0;
}

.auth-card .input-group > .input-group-text:last-child {
	border-left: 0;
	padding-right: .75rem;
	padding-left: .5rem;
}

/*
 * The addon's resting background, and the specificity is the whole content of this rule.
 *
 * wicket-tabler's reveal correction sets .input-group:has(.bs5-reveal) > .input-group-text to
 * --tblr-bg-forms, which ties the auth card's own addon rule at (0,3,0) and wins on source order.
 * The auth field is translucent over the backdrop and the theme's is opaque white, so that showed
 * as a seam between the input and the toggle: no border, a different panel.
 *
 * :not(:focus-within) rather than a blanket override, because the focus rule below is (0,4,0) too.
 * Stating this one unconditionally made it win there instead and inverted the same seam on focus -
 * measured both ways round before it was written like this.
 */
.auth-card .input-group:not(:focus-within) > .input-group-text {
	background-color: var(--yeti-auth-field);
}

.auth-card .bs5-reveal {
	color: var(--yeti-shell-muted);
}

.auth-card .bs5-reveal:hover,
.auth-card .bs5-reveal[aria-pressed="true"] {
	color: var(--yeti-auth-accent);
}

.auth-card .bs5-reveal:focus-visible {
	outline: 2px solid var(--yeti-auth-accent);
	outline-offset: 2px;
	box-shadow: none;
}

/* Actions ---------------------------------------------------------------- */

.auth-card .btn-primary {
	box-shadow: 0 6px 16px -6px rgba(var(--tblr-primary-rgb), .7);
}

/*
 * The secondary route out of a page is a link, not a second filled button: two equally weighted
 * buttons make the visitor choose before they have read either.
 */
.auth-card .btn-link {
	color: var(--yeti-auth-accent);
	text-decoration: none;
	font-weight: inherit;
}

.auth-card .btn-link:hover {
	color: #8b4326;
	text-decoration: underline;
}

/* Feedback -------------------------------------------------------------- */

.auth-card .alert {
	border-radius: .75rem;
	padding: .75rem 2.25rem .75rem .875rem;
	font-size: .875rem;
}

.auth-card .alert:last-child {
	margin-bottom: 0;
}

/*
 * NotificationPanel adds d-none itself when it has nothing to say, so this needs no :empty guard -
 * display:none wins over the margin either way.
 */
.auth-feedback {
	margin-bottom: 1rem;
}

/* Turnstile centres itself rather than hanging off the left edge of the card. */
.auth-card .cf-turnstile {
	display: flex;
	justify-content: center;
	min-height: 0;
}

/* Dark ------------------------------------------------------------------ */

:root[data-bs-theme="dark"] .auth-page {
	--yeti-auth-field: rgba(12, 20, 32, .55);
	--yeti-auth-field-edge: rgba(255, 255, 255, .16);
	--yeti-auth-accent: #e08a5c;
	--yeti-auth-accent-ring: rgba(224, 138, 92, .28);
}

:root[data-bs-theme="dark"] .auth-card .form-control:focus,
:root[data-bs-theme="dark"] .auth-card .input-group:focus-within > .form-control,
:root[data-bs-theme="dark"] .auth-card .input-group:focus-within > .input-group-text {
	background-color: rgba(12, 20, 32, .78);
}

:root[data-bs-theme="dark"] .auth-card .btn-link:hover {
	color: #f6b78c;
}

/*
 * The opaque-field fallback where backdrop-filter is unsupported. The card face it sits on is
 * handled by the same @supports block in yeti-scene-shell.css.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.auth-page {
		--yeti-auth-field: #fff;
	}

	:root[data-bs-theme="dark"] .auth-page {
		--yeti-auth-field: #0d1622;
	}
}