/* ==========================================================================
   AUTH PAGES (Login / Register / Recover / Access Gate)
   Bootstrap-first styling layer
   ----------------------------------------------------------------------------
   HOW THIS FILE WORKS
   - Bootstrap handles structure first:
     container, text alignment, widths, form controls, buttons
   - This stylesheet adds IGTD branding, surface styling, shadows, spacing,
     and page atmosphere
   - Keep this file for auth pages only
   ========================================================================== */

/* ==========================================================================
   1) THEME TOKENS
   ----------------------------------------------------------------------------
   SAFE TO EDIT:
   - Main page background colors
   - Card colors
   - Accent green
   - Border / shadow strength
   - Radius values
   ========================================================================== */
:root {
	--auth-bg: #0f1117;
	--auth-bg-2: #171a22;

	--auth-surface: #ffffff;
	--auth-surface-2: #fbfbfc;

	--auth-text: #0f172a;
	--auth-text-2: #475569;
	--auth-muted: #6b7280;

	--auth-border: rgba(15, 23, 42, .10);
	--auth-border-strong: rgba(125, 167, 72, .28);

	--auth-accent: #7da748;
	--auth-accent-2: #6b933d;
	--auth-accent-soft: rgba(125, 167, 72, .10);

	--auth-danger: #dc2626;
	--auth-danger-bg: rgba(220, 38, 38, .08);
	--auth-danger-border: rgba(220, 38, 38, .16);

	--auth-shadow-lg: 0 28px 70px rgba(0, 0, 0, .20);
	--auth-shadow-md: 0 16px 40px rgba(0, 0, 0, .14);
	--auth-shadow-sm: 0 8px 18px rgba(0, 0, 0, .08);

	--auth-radius-xl: 24px;
	--auth-radius-lg: 18px;
	--auth-radius-md: 14px;
	--auth-radius-pill: 999px;

	--auth-max: 520px;
}

/* ==========================================================================
   2) BASE / RESET
   ----------------------------------------------------------------------------
   Purpose:
   - predictable box model
   - full-height page support
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

/* ==========================================================================
   3) PAGE BACKGROUND
   ----------------------------------------------------------------------------
   Purpose:
   - creates the login page atmosphere
   - dark vault-like base
   - soft IGTD green glow near the top
   NOTE:
   - the stripe texture is optional; can be removed later if you want a more
     minimal / more controlled IGTD look
   ========================================================================== */
body.auth-page {
	margin: 0;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--auth-text);
	background:
		radial-gradient(circle at top, rgba(125, 167, 72, .14), transparent 32%),
		linear-gradient(180deg, var(--auth-bg) 0%, var(--auth-bg-2) 100%);
	position: relative;
	overflow-x: hidden;
}

body.auth-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, .025)),
		repeating-linear-gradient(135deg,
			transparent 0 42px,
			rgba(255, 255, 255, .018) 42px 84px);
	pointer-events: none;
	opacity: .45;
}

/* ==========================================================================
   4) MAIN PAGE LAYOUT
   ----------------------------------------------------------------------------
   Bootstrap already helps with container behavior.
   These classes handle vertical centering and auth-page spacing.
   ========================================================================== */
.auth-shell {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 20px 40px;
}

/* ==========================================================================
   5) BRAND / LOGO AREA
   ----------------------------------------------------------------------------
   Purpose:
   - keeps the logo outside the card
   - creates stronger portal branding before the user reaches the form
   SAFE TO EDIT:
   - logo width
   - spacing below logo
   ========================================================================== */
.auth-brand {
	width: 100%;
	max-width: var(--auth-max);
	margin-bottom: 22px;
}

.auth-logo {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .28));
}

/* ==========================================================================
   6) CARD WRAPPER + CARD
   ----------------------------------------------------------------------------
   Bootstrap handles width utilities in HTML when needed.
   These classes handle auth card appearance only.
   ========================================================================== */
.auth-card-wrap {
	width: 100%;
	max-width: var(--auth-max);
}

.auth-card {
	position: relative;
	background: linear-gradient(to bottom, var(--auth-surface), var(--auth-surface-2));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--auth-radius-xl);
	box-shadow: var(--auth-shadow-lg);
	padding: 32px 32px 26px;
	overflow: hidden;
}

/* subtle IGTD accent line at the top of the card */
.auth-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(to right, transparent, rgba(125, 167, 72, .72), transparent);
	opacity: .95;
	pointer-events: none;
}

/* ==========================================================================
   7) CARD HEADER / COPY
   ----------------------------------------------------------------------------
   Purpose:
   - clear visual hierarchy
   - small portal kicker
   - strong main title
   - lighter subtitle
   SAFE TO EDIT:
   - text sizing
   - spacing
   ========================================================================== */
.auth-card-head {
	margin-bottom: 22px;
}

.auth-kicker {
	display: inline-block;
	margin-bottom: .7rem;
	padding: .48rem .9rem;
	border-radius: var(--auth-radius-pill);
	background: var(--auth-accent-soft);
	border: 1px solid rgba(125, 167, 72, .24);
	color: var(--auth-accent-2);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

.auth-title {
	margin: 0 0 .45rem;
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 750;
	letter-spacing: -.02em;
	color: var(--auth-text);
	line-height: 1.08;
}

.auth-subtitle {
	color: var(--auth-text-2);
	font-size: 1.03rem;
	line-height: 1.65;
}

/* ==========================================================================
   8) ALERTS / ERROR BOXES
   ----------------------------------------------------------------------------
   Used for general form errors like invalid login or CSRF problems.
   ========================================================================== */
.auth-alert {
	margin-bottom: 18px;
	padding: .95rem 1rem;
	border-radius: var(--auth-radius-md);
	border: 1px solid transparent;
	font-size: .95rem;
	line-height: 1.55;
}

.auth-alert-danger {
	background: var(--auth-danger-bg);
	border-color: var(--auth-danger-border);
	color: var(--auth-danger);
}

/* ==========================================================================
   9) FORM BLOCK
   ----------------------------------------------------------------------------
   Bootstrap already provides:
   - .form-control
   - .form-label
   - .w-100
   This section only refines their appearance for auth pages.
   ========================================================================== */
.auth-form {
	margin-top: .2rem;
}

.auth-field {
	margin-bottom: 18px;
}

.auth-label {
	margin-bottom: .55rem;
	color: var(--auth-text);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: -.01em;
}

.auth-input {
	height: 54px;
	padding: 0 1rem;
	border-radius: var(--auth-radius-md);
	border: 1px solid var(--auth-border);
	background: #fff;
	color: var(--auth-text);
	font-size: 1rem;
	box-shadow: none;
}

.auth-input::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.auth-input:hover {
	border-color: rgba(125, 167, 72, .28);
}

.auth-input:focus {
	border-color: rgba(125, 167, 72, .48) !important;
	box-shadow: 0 0 0 .22rem rgba(125, 167, 72, .14) !important;
	outline: none !important;
}

/* field-level error under a specific input */
.auth-error {
	margin-top: .5rem;
	color: var(--auth-danger);
	font-size: .9rem;
	line-height: 1.45;
	text-align: left;
}

/* ==========================================================================
   10) PRIMARY SUBMIT BUTTON
   ----------------------------------------------------------------------------
   Bootstrap gives the button base.
   This class applies IGTD styling.
   SAFE TO EDIT:
   - height
   - shadow strength
   - uppercase / letter spacing
   ========================================================================== */
.auth-submit-wrap {
	margin-top: 8px;
}

.auth-submit-btn {
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border-radius: var(--auth-radius-pill);
	border: 1px solid rgba(0, 0, 0, .06) !important;
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)),
		var(--auth-accent) !important;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-submit-btn:hover {
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)),
		var(--auth-accent-2) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
}

.auth-submit-btn:focus,
.auth-submit-btn:focus-visible,
.auth-submit-btn:active {
	outline: none !important;
	box-shadow: 0 0 0 .22rem rgba(125, 167, 72, .18) !important;
}

/* ==========================================================================
   11) FOOTER LINK
   ----------------------------------------------------------------------------
   Used for "Forgot password?"
   ========================================================================== */
.auth-links {
	margin-top: 18px;
}

.auth-link {
	color: var(--auth-accent-2);
	font-size: .96rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease;
}

.auth-link:hover {
	color: var(--auth-accent);
	text-decoration: none;
}

/* ==========================================================================
   12) LEGACY COMPATIBILITY
   ----------------------------------------------------------------------------
   These are kept only so older auth pages do not break immediately if they
   still reference older class names.
   Review later if all old auth pages are updated.
   ========================================================================== */
.page-wrapper,
.access-wrapper,
.form,
.logo,
.access-input,
.error-message,
button.btn-primary {
	all: unset;
}

.error-message {
	display: block;
}

/* AUTH PAGE VARIANTS Small helpers for shorter forms like recovery/reset pages */
.auth-card.auth-card-narrow {
	max-width: 100%;
}

/* small helper text under fields */
.auth-muted {
	display: block;
	margin-top: 6px;
	font-size: .85rem;
	color: var(--auth-muted);
}

/* success alert used by password reset / success states */
.auth-alert-success {
	background: rgba(25, 135, 84, .08);
	border-color: rgba(25, 135, 84, .16);
	color: #198754;
}

/* ==========================================================================
   AUTH SUCCESS / SUMMARY BLOCKS
   Used by registration_success.php
   ========================================================================== */

.auth-success-card .auth-card-head {
	margin-bottom: 1.4rem;
}

.auth-summary-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}

.auth-summary-item {
	padding: 14px 16px;
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius-md);
	background: linear-gradient(to bottom, #ffffff, #f8fafc);
	box-shadow: var(--auth-shadow-sm);
	text-align: left;
}

.auth-summary-item-sensitive {
	border-color: rgba(125, 167, 72, .26);
	background: linear-gradient(to bottom, rgba(125, 167, 72, .08), rgba(125, 167, 72, .03));
}

.auth-summary-label {
	margin-bottom: 4px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--auth-muted);
}

.auth-summary-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--auth-text);
	line-height: 1.5;
	word-break: break-word;
}

.auth-note {
	margin-top: 16px;
	color: var(--auth-text-2);
	font-size: .96rem;
	line-height: 1.6;
}

/* ==========================================================================
   PAUSED PAGE
   wider auth card because this page is informational, not a simple form
   ========================================================================== */

.auth-card-wrap.auth-card-wrap-wide {
	max-width: 980px;
}

/* small section title used on paused page */
.auth-section-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .4rem;
}

/* small footer under auth card */
.auth-footer {
	margin-top: 16px;
	color: #94a3b8;
	font-size: .85rem;
}

.auth-brand.auth-brand-compact {
	margin-bottom: 16px;
}

.auth-action-stack {
	display: grid;
	gap: 12px;
}

.auth-action-stack .auth-submit-btn,
.auth-action-stack .auth-secondary-btn {
	width: 100%;
	min-height: 54px;
	white-space: nowrap;
}

.auth-secondary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border-radius: var(--auth-radius-pill);
	border: 1px solid rgba(15, 23, 42, .12);
	background: #fff;
	color: var(--auth-text);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	box-shadow: var(--auth-shadow-sm);
	transition: all .18s ease;
}

.auth-secondary-btn:hover {
	border-color: rgba(125, 167, 72, .34);
	background: rgba(125, 167, 72, .06);
	color: var(--auth-text);
	text-decoration: none;
}

/* ==========================================================================
   14) RESPONSIVE
   ----------------------------------------------------------------------------
   Mobile-first refinements for smaller devices.
   ========================================================================== */
@media (max-width: 575.98px) {
	.auth-shell {
		padding: 34px 16px 24px;
	}

	.auth-brand {
		margin-bottom: 18px;
	}

	.auth-logo {
		max-width: 280px;
	}

	.auth-card {
		padding: 24px 18px 20px;
		border-radius: 20px;
	}

	.auth-title {
		font-size: 1.9rem;
	}

	.auth-subtitle {
		font-size: .98rem;
	}

	.auth-input,
	.auth-submit-btn {
		min-height: 50px;
		height: 50px;
	}
}