/* ============================================================
   Parking BOXX Auth — main.css
   ------------------------------------------------------------
   Centered sign-in card on a white page.
   Design source: Figma node 11:647 (tokens), layout simplified 2026-08.
   Tokens: css/tokens.css (CloudEASE --ce-* subset). :root aliases the
   names the page design renamed (--pb-*); rules reference --ce-*
   directly where the CE name already fits.
   Font: Tahoma (system) — matches CloudEASE.
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
	/* ---------------------------------------------------------
	   Page-scoped aliases over the CloudEASE design tokens
	   (css/tokens.css — loaded before this file). Values live in
	   --ce-*; this block only maps them onto the names the page
	   rules use. Raw values are FORBIDDEN here except where CE
	   has no equivalent token (each exception documented).
	   Spacing note: the pb scale was shifted one name from CE's
	   (pb-md = 1rem = ce-base) — the aliases absorb that shift,
	   every numeric value stays identical.
	   --------------------------------------------------------- */

	/* Colors */
	--pb-color-primary:          var(--ce-color-primary);
	--pb-color-primary-hover:    var(--ce-color-primary-hover);
	--pb-color-primary-active:   var(--ce-color-primary-active);

	--pb-color-heading:          var(--ce-color-primary-active);

	--pb-color-text:             var(--ce-color-text);
	--pb-color-text-secondary:   var(--ce-color-text-secondary);
	--pb-color-text-label:       var(--ce-color-text-secondary);
	--pb-color-text-placeholder: var(--ce-color-text-muted);
	--pb-color-text-on-primary:  var(--ce-color-text-on-primary);

	--pb-color-bg:               var(--ce-color-bg-white);
	--pb-color-border:           var(--ce-color-border);
	--pb-color-border-light:     var(--ce-color-border-light);

	--pb-color-error:            var(--ce-color-error);
	--pb-color-error-light:      var(--ce-color-error-light);

	/* CE has no disabled-primary-button token — page-specific value. */
	--pb-color-primary-disabled: #B8C9DD;

	/* Typography */
	--pb-font-family:            var(--ce-font-family);

	/* Radii */
	--pb-radius-sm:              var(--ce-radius-base);   /* 6px — alert, icon button */
	--pb-radius-md:              var(--ce-radius-lg);     /* 8px — inputs, buttons, card */

	/* Spacing (numeric values identical to the old pb scale) */
	--pb-space-2xs:              var(--ce-space-xs);      /* 0.25rem */
	--pb-space-xs:               var(--ce-space-sm);      /* 0.5rem */
	--pb-space-sm:               var(--ce-space-md);      /* 0.75rem */
	--pb-space-md:               var(--ce-space-base);    /* 1rem */
	--pb-space-lg:               var(--ce-space-lg);      /* 1.5rem */
	--pb-space-xl:               var(--ce-space-xl);      /* 2rem */
	--pb-space-2xl:              var(--ce-space-2xl);     /* 3rem */

	/* Focus */
	--pb-focus-ring:             var(--ce-focus-ring);
	--pb-focus-offset:           var(--ce-focus-ring-offset);

	/* Motion (reduced-motion handling comes from tokens.css) */
	--pb-transition:             var(--ce-transition-fast);

	/* Card shadow — CE's standard panel shadow (auth card on
	   forgot-password uses the same one). */
	--pb-shadow-card:            var(--ce-shadow-lg);
}


/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--pb-font-family);
	font-size: var(--ce-font-size-base);
	line-height: 1.5;
	color: var(--pb-color-text);
	background: var(--pb-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, li, a, span, label {
	font-family: var(--pb-font-family);
	margin: 0;
}
img { max-width: 100%; height: auto; display: block; }
button,
input,
select,
textarea {
	font-family: var(--pb-font-family);
	color: inherit;
}
button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
a {
	color: var(--pb-color-primary);
	text-decoration: none;
	transition: color var(--pb-transition);
}
a:hover { color: var(--pb-color-primary-hover); text-decoration: underline; }
[hidden] { display: none !important; }
ul { margin: 0; padding: 0; list-style: none; }


/* ============================================================
   PAGE SHELL
   ============================================================ */

.pb-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--pb-color-bg);
}

.pb-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	padding: var(--pb-space-xs) var(--pb-space-md);
	background: var(--pb-color-primary);
	color: var(--pb-color-text-on-primary);
	z-index: 1000;
}
.pb-skip-link:focus {
	top: 0;
	outline: none;
	text-decoration: none;
}


/* ============================================================
   CENTERED CARD LAYOUT
   ============================================================ */

.pb-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pb-space-lg);
	padding: var(--pb-space-xl) var(--pb-space-md);
}

.pb-card {
	width: 100%;
	max-width: 28rem;
	background: var(--pb-color-bg);
	border: 1px solid var(--pb-color-border-light);
	border-radius: var(--pb-radius-md);
	box-shadow: var(--pb-shadow-card);
	padding: var(--pb-space-2xl) var(--pb-space-xl);
}

.pb-card-logo {
	display: flex;
	justify-content: flex-start;
	margin-bottom: var(--pb-space-xl);
}
.pb-card-logo img {
	/* 223px = the old 240px minus the transparent PNG margins that were
	   cropped so the logo's visible edge sits flush with the text line. */
	width: min(223px, 75%);
	height: auto;
}

.pb-form-header {
	margin-bottom: var(--pb-space-xl);
}

.pb-form-title {
	font-size: 1.875rem;              /* 30px — page-specific, larger than --ce-font-size-2xl by design */
	line-height: 2.25rem;             /* 36px */
	font-weight: 400;                 /* Tahoma has a real bold; keep the light look */
	color: var(--pb-color-heading);
	letter-spacing: 0.025rem;
	margin-bottom: var(--pb-space-xs);
}

.pb-form-subtitle {
	font-size: var(--ce-font-size-base); /* 16px */
	color: var(--pb-color-text-secondary);
	line-height: 1.5rem;
}

.pb-form {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-lg);
}

.pb-field {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-xs);
}

.pb-field__label {
	font-size: var(--ce-font-size-sm); /* 14px */
	color: var(--pb-color-text-label);
	line-height: 1;
}

.pb-field__wrap {
	position: relative;
}

.pb-field__input {
	width: 100%;
	height: 3rem;                     /* 48px */
	padding: 0.25rem var(--pb-space-sm);
	font-size: var(--ce-font-size-sm);
	line-height: 1.25rem;
	color: var(--pb-color-text);
	background: var(--pb-color-bg);
	border: 1px solid var(--pb-color-border);
	border-radius: var(--pb-radius-md);
	transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}

.pb-field__input--with-icon { padding-right: 3rem; }

.pb-field__input::placeholder { color: var(--pb-color-text-placeholder); }

.pb-field__input:focus-visible {
	outline: var(--pb-focus-ring);
	outline-offset: 0;                 /* flush with the border — no white gap */
	border-color: var(--pb-color-primary);
}

.pb-field__input:disabled {
	background: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
}

/* Invalid field (e.g. malformed email) — red border + inline message below. */
.pb-field__input--error,
.pb-field__input--error:focus-visible {
	border-color: var(--pb-color-error);
}

.pb-field__error {
	margin-top: var(--pb-space-xs);
	font-size: 0.8125rem;             /* 13px — between --ce-font-size-xs and -sm; kept for density */
	line-height: 1.3;
	color: var(--pb-color-error);
}

.pb-field__icon-btn {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--pb-color-text-placeholder);
	border-radius: var(--pb-radius-sm);
	cursor: pointer;
	transition: color var(--pb-transition), background-color var(--pb-transition);
}

.pb-field__icon-btn:hover { color: var(--pb-color-primary); }
.pb-field__icon-btn:focus-visible {
	outline: var(--pb-focus-ring);
	outline-offset: var(--pb-focus-offset);
}

.pb-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--ce-font-size-sm);
}

.pb-link {
	color: var(--pb-color-primary);
	font-size: var(--ce-font-size-sm);
}
.pb-link:hover { color: var(--pb-color-primary-hover); }

.pb-form-footer {
	text-align: center;
	font-size: var(--ce-font-size-sm);
	color: var(--pb-color-text-secondary);
	margin-top: var(--pb-space-lg);
}
.pb-form-footer .pb-link { margin-left: var(--pb-space-2xs); }


/* ============================================================
   BUTTONS
   ============================================================ */

.pb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pb-space-xs);
	height: 3rem;                     /* 48px */
	padding: 0 var(--pb-space-md);
	font-size: var(--ce-font-size-md); /* 18px */
	line-height: 1.25rem;
	border: none;
	border-radius: var(--pb-radius-md);
	cursor: pointer;
	transition: background-color var(--pb-transition), color var(--pb-transition);
	text-decoration: none;
}
.pb-btn:focus-visible {
	outline: var(--pb-focus-ring);
	outline-offset: var(--pb-focus-offset);
}

.pb-btn--primary {
	width: 100%;
	background: var(--pb-color-primary);
	color: var(--pb-color-text-on-primary);
}
.pb-btn--primary:hover { background: var(--pb-color-primary-hover); color: var(--pb-color-text-on-primary); text-decoration: none; }
.pb-btn--primary:active { background: var(--pb-color-primary-active); }
.pb-btn--primary:disabled {
	background: var(--pb-color-primary-disabled);
	color: var(--pb-color-text-on-primary);
	cursor: not-allowed;
	opacity: 0.85;
}

/* Loading state — spinner-free, disabled cue only. Matches existing auth.js hook. */
.pb-btn--loading { opacity: 0.75; cursor: progress; }


/* ============================================================
   ALERT
   ============================================================ */

.pb-alert {
	background: var(--pb-color-error-light);
	color: var(--pb-color-text);
	border-left: 4px solid var(--pb-color-error);
	padding: var(--pb-space-sm) var(--pb-space-md);
	border-radius: var(--pb-radius-sm);
	font-size: var(--ce-font-size-sm);
	line-height: 1.4;
	margin-bottom: var(--pb-space-md);
}


/* ============================================================
   PAGE FOOTER — below the card
   ============================================================ */

/* Centered single line flanked by two short rules. */
.pb-page-footer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pb-space-md);
	text-align: center;
}

.pb-page-footer__rule {
	flex: 0 1 6.6875rem;              /* 107px */
	height: 1px;
	background: var(--ce-color-border-light);
}

.pb-page-footer__text {
	flex: 0 0 auto;
	font-size: var(--ce-font-size-xs); /* 12px */
	line-height: 1rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-color-text-secondary);
	white-space: nowrap;
}

.pb-page-footer__sep { margin: 0 var(--pb-space-2xs); }

.pb-page-footer__link {
	color: var(--pb-color-text-secondary);
}
.pb-page-footer__link:hover { color: var(--pb-color-primary); text-decoration: underline; }


/* ============================================================
   RESPONSIVE — drop the card chrome on small screens
   ============================================================ */

@media (max-width: 30em) {
	.pb-card {
		border: none;
		box-shadow: none;
		border-radius: 0;
		padding: var(--pb-space-lg) var(--pb-space-xs);
	}
	.pb-form-title { font-size: 1.625rem; }   /* 26px — mobile companion to the 30px title */
	/* Drop the flanking rules and let the copyright line wrap. */
	.pb-page-footer__rule { display: none; }
	.pb-page-footer__text { white-space: normal; }
}

/* ------------ Stale sign-in notice ------------
   Swapped in for the form (auth.js markStale) when this tab's OAuth flow
   was superseded by a newer login tab or expired while parked. The button
   reuses .pb-btn--primary and restarts a fresh flow via the app entry. */
.pb-stale__msg {
	margin: 0 0 var(--pb-space-md);
	font-size: var(--ce-font-size-base);
	line-height: 1.5;
	color: var(--pb-color-text-secondary);
}

/* ------------ SSO divider + Microsoft button ------------ */
.pb-divider {
	display: flex;
	align-items: center;
	gap: var(--pb-space-sm);
	margin: var(--pb-space-md) 0 0;
	color: var(--pb-color-text-secondary);
	font-size: var(--ce-font-size-sm);
}
.pb-divider::before,
.pb-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ce-color-border);
}

.pb-btn--secondary {
	width: 100%;
	margin-top: var(--pb-space-md);
	background: var(--pb-color-bg);
	color: var(--pb-color-text);
	border: var(--ce-border);
}
/* Hover/active sit one step LIGHTER than CE's bg-hover/bg-active ladder —
   deliberate: preserves the original design values on this white page. */
.pb-btn--secondary:hover  { background: var(--ce-color-bg); color: var(--pb-color-text); text-decoration: none; }
.pb-btn--secondary:active { background: var(--ce-color-bg-hover); }

/* Step 2: locked email row with the "Change" escape back to step 1 */
.pb-email-ro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--ce-color-bg);
	border: 1px solid var(--pb-color-border-light);
	border-radius: var(--pb-radius-md);
	padding: 10px 12px;
	font-size: 0.9375rem;              /* 15px — no CE token between -sm and -base; matches design */
	color: var(--pb-color-text);
	margin-bottom: var(--pb-space-md);
	overflow-wrap: anywhere;
}
.pb-email-ro a {
	flex: 0 0 auto;
	font-size: 0.8125rem;             /* 13px — between --ce-font-size-xs and -sm; kept for density */
}