/* Shared visual shell for the Arcadia auth pages (login, sign up, forgot password,
   confirm sign up). New, distinctly-named classes only - does not touch or override
   the existing .lockscreen-* classes in AdminLTE.css, which errorPage.lua also relies on. */

.arc-auth-page {
	position: relative;
	min-height: 100vh;
	background: #eef0f3;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	overflow: hidden;
}

/* Taken out of normal flow (absolute) so it acts as a background band behind the card,
   rather than pushing .arc-auth-body down and off-center - .arc-auth-body centers
   against the FULL page height, independent of however tall this ends up being. */
.arc-auth-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 45vh;
	min-height: 280px;
	overflow: hidden;
	background: #22252a;
	z-index: 0;
}
.arc-auth-hero video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .7;
}
.arc-auth-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,120,110,.28) 0%, rgba(238,240,243,0) 45%, rgba(238,240,243,1) 100%);
}

.arc-auth-body {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 34px;
	gap: 20px;
}

.arc-auth-card {
	width: 100%;
	max-width: 390px;
	padding: 26px 30px 24px;
	background: #fff;
	border: 1px solid #e2e5e9;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(30,40,60,.11);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* The card's gap only spaces its own direct children (logo/tabs/intro/form) - the form's
   own children (fields, forgot-password row, submit button, links) need the same
   treatment, otherwise they sit flush against each other with no breathing room. */
.arc-auth-card form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.arc-auth-logo {
	height: 44px;
	width: auto;
	align-self: center;
	mix-blend-mode: multiply;
}

.arc-auth-tabs {
	display: flex;
	border-bottom: 1px solid #e2e5e9;
}
.arc-auth-tab {
	flex: 1;
	padding: 10px 0;
	border: none;
	background: transparent;
	text-align: center;
	cursor: pointer;
	font: 600 13.5px 'IBM Plex Sans', sans-serif;
	color: #8b8d90;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.arc-auth-tab.active {
	color: #12a05a;
	border-bottom-color: #12a05a;
}

/* @MESSAGE (from login.lua) sometimes arrives as plain text and sometimes as its own
   <p class="info"|"warning">...</p> - style both the container and any nested <p> so
   centering/font apply either way, since a raw <p> couldn't be used as the wrapper here.
   Deliberately NOT setting color here: login.lua uses class="warning" (login errors,
   account lockouts) vs class="info" (plain instructions) to mean something - forcing one
   gray color on every message, regardless of class, would hide real login errors instead
   of flagging them red. Color is set below, keyed off the actual class. */
.arc-auth-intro,
.arc-auth-intro p {
	margin: 0;
	font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
	text-align: center;
}
.arc-auth-intro { color: #6B6966; } /* plain text with no nested <p> (no class to key off) */
.arc-auth-intro p.info { color: #1a9bcb; }
.arc-auth-intro p.warning { color: #a8161f; }

.arc-auth-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.arc-auth-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 13px;
	border: 1px solid #dfe2e6;
	border-radius: 7px;
	background: #fafbfc;
}
/* AdminLTE.css puts a global, !important red left-border on every :required field
   (input:required, select:required, textarea:required { border-left: 5px solid #F00 !important; }).
   That's a site-wide convention other forms may rely on, so it's not removed - just
   overridden back to "no border" within these auth-page input rows specifically. */
.arc-auth-input-row input:required,
.arc-auth-input-row select:required,
.arc-auth-input-row input:required:focus,
.arc-auth-input-row select:required:focus {
	border-left: none !important;
}
.arc-auth-input-row input,
.arc-auth-input-row select {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font: 400 14px 'IBM Plex Sans', sans-serif;
	color: #333230;
}
.arc-auth-input-row input:focus,
.arc-auth-input-row select:focus {
	outline: none;
}
.arc-auth-input-row .arc-auth-icon {
	flex: none;
	color: #2fbf71;
	display: flex;
}
.arc-auth-pw-toggle {
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	color: #8b8d90;
	flex: none;
}
.arc-auth-pw-toggle:hover { color: #12a05a; }

/* Signup grid: Title + Username on one row, everything else full-width */
.arc-auth-grid {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 10px;
	min-width: 0;
	width: 100%;
}
.arc-auth-grid .arc-auth-input-row {
	height: 44px;
	padding: 0 13px;
}
.arc-auth-grid select {
	/* appearance:none strips the native dropdown arrow with nothing to replace it -
	   add a matching chevron + right padding so it still reads as a dropdown and
	   doesn't look like a plain, mismatched box next to the other fields. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	padding-right: 26px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236B6966" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
}
/* Custom-themed replacement for the Title <select> - a native select's closed state can
   be restyled with CSS (see .arc-auth-grid select above), but its open option-list is
   rendered by the browser/OS and CSS has no real control over it. This trigger+list pair
   is the themed substitute; a visually-hidden native <select> alongside it (see signup.lp)
   keeps the actual form submission (edit_title) completely unchanged server-side. */
.arc-auth-select {
	position: relative;
	padding: 0 !important;
}
.arc-auth-select-trigger {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	padding: 0 26px 0 13px;
	font: 400 14px 'IBM Plex Sans', sans-serif;
	color: #333230;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236B6966" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.arc-auth-select-trigger[data-empty="true"] { color: #9a9c9f; }
.arc-auth-select-list {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	background: #fff;
	border: 1px solid #dfe2e6;
	border-radius: 7px;
	box-shadow: 0 6px 20px rgba(30,40,60,.15);
	z-index: 10;
	overflow: hidden;
}
.arc-auth-select-list.show { display: block; }
.arc-auth-select-option {
	padding: 10px 13px;
	font: 400 14px 'IBM Plex Sans', sans-serif;
	color: #333230;
	cursor: pointer;
	white-space: nowrap;
}
.arc-auth-select-option:hover,
.arc-auth-select-option.active {
	background: #f0f9f4;
	color: #0e8f4f;
}

.arc-auth-span2 { grid-column: span 2; }
.arc-auth-pw-wrap {
	grid-column: span 2;
	position: relative;
	display: flex;
}
.arc-auth-pw-wrap input {
	flex: 1;
	padding-right: 30px;
}
.arc-auth-pw-wrap .arc-auth-pw-toggle {
	position: absolute;
	right: 6px;
	top: 6px;
	width: 32px;
	height: 32px;
	justify-content: center;
}

.arc-auth-strength {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.arc-auth-strength-bars { display: flex; gap: 5px; }
.arc-auth-strength-bars span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #dfe2e6;
	transition: background .25s;
}
.arc-auth-strength-label-row {
	display: flex;
	align-items: center;
	gap: 7px;
	position: relative;
}
.arc-auth-strength-label {
	font: 400 11.5px 'IBM Plex Sans', sans-serif;
	color: #6B6966;
}
.arc-auth-tip-btn {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #c7cbd0;
	background: #fff;
	color: #6B6966;
	font: 600 10px 'IBM Plex Sans', sans-serif;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arc-auth-tip-btn:hover { border-color: #12a05a; color: #12a05a; }
/* Deliberately NOT position:absolute - this card is too cramped for a floating popover
   to fit anywhere without overlapping the password field above or the button below.
   Shown in normal document flow instead, so it pushes everything below it down rather
   than covering it. */
.arc-auth-tip {
	margin-top: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	background: #333230;
	color: #fff;
	border-radius: 8px;
	font: 400 11.5px/1.55 'IBM Plex Sans', sans-serif;
	display: none;
}
.arc-auth-tip.show { display: block; }
.arc-auth-tip code {
	/* Bootstrap's default <code> style (pale pink background + padding + its own text
	   color) otherwise bleeds through here, washing out the symbols against this dark
	   tooltip - override all of it, not just font/color. */
	font-family: 'IBM Plex Mono', monospace;
	color: #8ee0b4;
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

.arc-auth-alert {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	background: #fdecec;
	border: 1px solid #f3c9cb;
	border-radius: 7px;
	font: 400 12.5px 'IBM Plex Sans', sans-serif;
	color: #a8161f;
}
.arc-auth-alert .arc-auth-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #D81F2A;
	flex: none;
}

.arc-auth-forgot-row {
	display: flex;
	justify-content: flex-end;
	font: 400 12.5px 'IBM Plex Sans', sans-serif;
	color: #6B6966;
}
.arc-auth-forgot-row a { font-weight: 500; }

.arc-auth-links {
	text-align: center;
	font: 500 12.5px 'IBM Plex Sans', sans-serif;
}

.arc-auth-btn {
	height: 48px;
	border: none;
	border-radius: 7px;
	background: linear-gradient(140deg, #12a05a 0%, #0e8f4f 100%);
	color: #fff;
	font: 600 15px 'IBM Plex Sans', sans-serif;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(14,143,79,.3);
	width: 100%;
	box-sizing: border-box;
	/* also used on <a> links (e.g. "Back to login"), not just <button type="submit"> -
	   these make it render/center identically either way. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.arc-auth-btn:hover { filter: brightness(1.08); }
.arc-auth-btn:active { transform: translateY(1px); }

.arc-auth-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 6px 0 2px;
}
.arc-auth-message-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: linear-gradient(140deg, #00b3a4 0%, #2fbf71 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.arc-auth-message-icon.error {
	background: linear-gradient(140deg, #D81F2A 0%, #a8161f 100%);
}
.arc-auth-message h1 {
	margin: 0;
	font: 700 21px/1.2 'IBM Plex Sans', sans-serif;
	color: #333230;
}
.arc-auth-message p {
	margin: 0;
	font: 400 13px/1.6 'IBM Plex Sans', sans-serif;
	color: #6B6966;
	max-width: 320px;
}

.arc-auth-footer {
	font: 400 11.5px 'IBM Plex Sans', sans-serif;
	color: #8b8d90;
	text-decoration: none;
}
.arc-auth-footer:hover {
	color: #6B6966;
	text-decoration: underline;
}