/* ==========================================================================
   LLI - account pages (login, register, forgot password)
   ==========================================================================
   Every rule for those three screens lives here. The pages themselves carry
   NO <style> block and no style="" attribute, so a change of look is a change
   to this one file and never a hunt through PHP.

   WHERE IT IS LOADED
   layout/_head.php, last of the local stylesheets - AFTER nassets/css/ied.css
   and ied-responsive.css. That ordering is what lets these rules win on equal
   specificity instead of reaching for !important. Note the three pages reach
   the head through layout/_layout.php and do NOT read the root _css.php, which
   serves a different set of pages.

   WHY THE .lli-auth- PREFIX
   The pages already load the LUMS Drupal theme from lums.edu.pk, bootstrap
   3.4.1 and ied.css. Those define .form-control, .row, h1 and more, so an
   unprefixed rule here would either be overridden by them or would leak into
   the rest of the site. Every selector below is scoped under .lli-auth-card
   or .lli-auth-stage, which keeps this file from touching any other page.

   THE ONE !important
   Bootstrap sets a fixed height on input.form-control with enough specificity
   that a taller field cannot be expressed otherwise. It is deliberate and it
   is the only one.

   COLOURS
   Declared once as custom properties on .lli-auth-stage. Re-brand by editing
   those four lines; nothing below hard-codes the navy again. Browsers without
   custom-property support fall back to the literal value beside each var().
   ========================================================================== */

.lli-auth-stage {
	--lli-ink:      #1a2340;   /* headings and typed text */
	--lli-muted:    #8a93a8;   /* sub-copy and footer text */
	--lli-brand:    #0b1f66;   /* buttons, links, focus ring */
	--lli-brand-hi: #0a2a8a;   /* button hover */
	--lli-field:    #f3f6fb;   /* input fill at rest */
	--lli-line:     #e3e8f0;   /* card border */
	--lli-error:    #c0392b;

	padding: 48px 16px 72px;
	display: flex;
	justify-content: center;
}

/* --------------------------------------------------------------- the card --
   max-width, not width: the card is free to be narrower than 440px on a small
   screen, so no horizontal scrollbar can appear on a phone. Register overrides
   the width only - everything else it inherits. */
.lli-auth-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border: 1px solid #e3e8f0;
	border: 1px solid var(--lli-line);
	border-radius: 16px;
	box-shadow: 0 12px 34px -18px rgba(11, 31, 102, .35);
	padding: 40px 40px 34px;
}

.lli-auth-card--wide { max-width: 720px; padding: 40px 44px 34px; }

.lli-auth-card h1 {
	margin: 0 0 28px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
	color: #1a2340;
	color: var(--lli-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Sits under the heading, so it pulls up into the heading's bottom margin
   rather than adding a second gap. */
.lli-auth-card .lli-sub {
	margin: -16px 0 24px;
	text-align: center;
	color: #8a93a8;
	color: var(--lli-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* ------------------------------------------------------------- the fields -- */
.lli-field { margin-bottom: 20px; position: relative; }

.lli-field label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #1a2340;
	color: var(--lli-ink);
}

.lli-field label .required { color: #c0392b; color: var(--lli-error); }

.lli-auth-card input.form-control {
	width: 100%;
	height: 52px !important;          /* see THE ONE !important above */
	border: 1px solid transparent;
	background: #f3f6fb;
	background: var(--lli-field);
	border-radius: 10px;
	padding: 0 16px;
	font-size: 15px;
	color: #1a2340;
	color: var(--lli-ink);
	box-shadow: none;
	transition: background .15s, border-color .15s, box-shadow .15s;
}

.lli-auth-card input.form-control:focus {
	background: #fff;
	border-color: #0b1f66;
	border-color: var(--lli-brand);
	box-shadow: 0 0 0 3px rgba(11, 31, 102, .12);
	outline: 0;
}

.lli-auth-card .has-error input.form-control {
	border-color: #c0392b;
	border-color: var(--lli-error);
	background: #fff;
}

.lli-auth-card .help-block {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #c0392b;
	color: var(--lli-error);
}

/* Two fields per row on the register form; one per row once there is no room
   for two - see the media query. */
.lli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

/* ------------------------------------------------- password reveal toggle --
   The markup and the click handler already exist site-wide (layout/_js.php),
   so only placement is defined here. Offset from the top accounts for the
   label above the input; the icon is not focusable and sits above the field
   without covering the text cursor's landing area. */
.lli-field .field-icon {
	position: absolute;
	top: 48px;
	right: 16px;
	color: #8a93a8;
	color: var(--lli-muted);
	cursor: pointer;
	z-index: 2;
}

.lli-field .field-icon:hover { color: #0b1f66; color: var(--lli-brand); }

/* A revealed password must not run under the icon.
   Keyed on a modifier class, NOT on input[type=password]: the toggle in
   layout/_js.php swaps the type attribute to text, so a type-based rule would
   drop the padding at the exact moment the text becomes visible. (:has() would
   also work and needs no class, but it is unsupported in the older browsers
   this site still serves.) */
.lli-field--pw input.form-control { padding-right: 44px; }

/* ------------------------------------------------------------- the button -- */
.lli-btn {
	display: block;
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	background: #0b1f66;
	background: var(--lli-brand);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	margin-top: 6px;
	transition: background .15s;
}

.lli-btn:hover,
.lli-btn:focus {
	background: #0a2a8a;
	background: var(--lli-brand-hi);
	color: #fff;
}

/* ------------------------------------------------------------- the captcha --
   reCAPTCHA renders a fixed 304px iframe that cannot be made fluid, so below
   that width it is scaled down rather than allowed to push the card wide and
   produce a horizontal scrollbar. transform-origin keeps it centred. */
.lli-captcha { display: flex; justify-content: center; margin: 4px 0 18px; }

/* ------------------------------------------------------------- the footer -- */
.lli-foot {
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: #8a93a8;
	color: var(--lli-muted);
}

.lli-foot .lli-foot-row { margin-top: 12px; }

.lli-foot a {
	color: #0b1f66;
	color: var(--lli-brand);
	font-weight: 700;
	text-decoration: none;
}

.lli-foot a:hover,
.lli-foot a:focus { text-decoration: underline; }

/* The theme's notification block sits inside the card; give it the card's
   own rhythm instead of the page's. */
.lli-auth-card .alert { border-radius: 10px; }

/* ========================================================================== */
/* RESPONSIVE                                                                 */
/* Two breakpoints only, each for a reason that can be stated:                */
/*   600px - two fields no longer fit side by side on the register form       */
/*   400px - the reCAPTCHA iframe (304px fixed) stops fitting the padded card */
/* ========================================================================== */

@media (max-width: 600px) {
	.lli-auth-stage { padding: 28px 12px 48px; }

	.lli-auth-card,
	.lli-auth-card--wide { padding: 30px 22px 26px; }

	.lli-auth-card h1 { font-size: 21px; margin-bottom: 24px; }

	.lli-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 400px) {
	.lli-auth-card,
	.lli-auth-card--wide { padding: 26px 16px 22px; }

	.lli-captcha {
		transform: scale(.88);
		transform-origin: center top;
	}
}

/* Coarse pointers (phones, tablets) get a taller tap target on the reveal
   icon without changing how it looks on a mouse-driven browser. */
@media (pointer: coarse) {
	.lli-field .field-icon { padding: 6px; top: 42px; right: 10px; }
}