/**
 * Authentication Module Styles
 *
 * WCAG 2.2 AA compliant styles for authentication forms:
 * - Password reset
 * - MFA setup
 * - Login enhancements
 *
 * @package Allotment\Core\Modules\Auth
 * @since 1.0.0
 */

:root {
	/* Dark mode tokens */
}
/* ==========================================================================
	Hide WordPress Page Title on Auth Pages
	========================================================================== */

/* Auth pages provide their own H1 in the shortcode */
.page-login .entry-header,
.page-forgot-password .entry-header,
.page-reset-password .entry-header,
.page-mfa-setup .entry-header {
	display: none;
}

/* ==========================================================================
	Container & Card
	========================================================================== */

.am-auth-container {
	max-width: 600px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.am-auth-card {
	background: var(--background-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-md);
}

.am-auth-title {
	margin: 0 0 0.5rem 0;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--text-primary);
}

.am-auth-description {
	margin: 0 0 1.5rem 0;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ==========================================================================
	Notices & Alerts
	========================================================================== */

.am-auth-notice {
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: var(--radius-sm);
	border-left: 4px solid;
}

.am-auth-notice p {
	margin: 0;
	line-height: 1.5;
}

.am-auth-notice--success {
	background-color: var(--color-alert-success-bg);
	border-left-color: var(--success-color);
	color: var(--color-alert-success-text);
}

.am-auth-notice--error {
	background-color: var(--error-light);
	border-left-color: var(--error-dark);
	color: var(--error-darker);
}

.am-auth-notice--warning {
	background-color: var(--warning-light);
	border-left-color: var(--accent-dark);
	color: var(--color-alert-warning-text);
}

.am-auth-notice--info {
	background-color: var(--info-light);
	border-left-color: var(--color-accent-blue);
	color: var(--color-accent-blue-dark);
}

.am-auth-notice-actions {
	margin-top: 0.5rem;
}

.am-auth-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-green);
	color: white;
	border-radius: 50%;
	font-size: 2rem;
	font-weight: bold;
}

/* ==========================================================================
	Forms
	========================================================================== */

.am-auth-form {
	margin-top: 1.5rem;
}

.am-form-group {
	margin-bottom: 1.5rem;
}

.am-form-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: var(--text-primary);
	font-size: 0.95rem;
}

.am-form-label .required {
	color: var(--error-dark);
	margin-left: 0.25rem;
}

.am-form-input {
	width: 100%;
	padding: 0.75rem;
	font-size: 1rem;
	border: 2px solid var(--border-field);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s ease;
	font-family: inherit;
}

.am-form-input:focus {
	border-color: var(--color-accent-blue);
}

.am-form-input:invalid:not(:placeholder-shown) {
	border-color: var(--error-dark);
}

.am-form-input--code {
	max-width: 200px;
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 0.5em;
	font-family: monospace;
}

/* Password Toggle */
.am-password-wrapper {
	position: relative;
}

.am-password-wrapper .am-form-input {
	padding-right: 3rem;
}

.am-password-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	/*
	 * 44x44px, not the 36px this was.
	 *
	 * A 20px icon with 0.5rem of padding gave a 36px target: past WCAG 2.2's
	 * 24px floor, but short of spec 02 §7.6, which sets 44px for this project
	 * precisely because the members are elderly and may have an unsteady hand.
	 * Sized explicitly rather than by padding, so the icon can stay 20px
	 * without the button shrinking with it.
	 */
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	cursor: pointer;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	transition: color 0.2s, background-color 0.2s;
}

/*
 * No focus ring is drawn here, deliberately.
 *
 * A reviewer asked for one on the grounds that this is an icon-only button
 * with no text to fall back on, and the static suite was right to refuse it:
 * the themes already draw a 3px white outline inside a dark halo, which
 * clears 3:1 on light, on dark AND on the brand green. Drawing our own would
 * replace that with one colour chosen by this module, tested against nothing.
 */

.am-password-toggle:hover {
	color: var(--color-accent-blue);
	background-color: var(--color-alert-info-bg);
}

.am-password-icon {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.am-form-help {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

.am-form-help ul {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.am-form-help li {
	margin-bottom: 0.25rem;
}

/* ==========================================================================
	Buttons
	========================================================================== */

.am-form-actions {
	margin-top: 1.5rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ==========================================================================
	Footer Links
	========================================================================== */

.am-auth-footer {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
	text-align: center;
}

.am-auth-footer p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.am-auth-footer a {
	color: var(--color-accent-blue);
	text-decoration: none;
}

.am-auth-footer a:hover,
.am-auth-footer a:focus {
	text-decoration: underline;
}

/* ==========================================================================
	Security Tip
	========================================================================== */

.am-auth-security-tip {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background-color: var(--info-light);
	border-left: 4px solid var(--color-accent-blue);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	color: var(--color-accent-blue-dark);
	line-height: 1.6;
}

.am-auth-security-tip p {
	margin: 0 0 0.5rem 0;
}

.am-auth-security-tip p:last-child {
	margin-bottom: 0;
}

.am-auth-security-tip__heading {
	font-weight: 600;
	font-size: 0.925rem;
	color: var(--color-accent-blue-dark);
}

.am-auth-security-tip a {
	color: var(--color-accent-blue-dark);
	font-weight: 600;
	text-decoration: underline;
}

.am-auth-security-tip a:hover,
.am-auth-security-tip a:focus {
	color: var(--color-accent-blue-dark);
}

/* ==========================================================================
	MFA Specific Styles
	========================================================================== */

.am-mfa-info,
.am-mfa-benefits,
.am-mfa-requirements {
	margin-bottom: 1.5rem;
}

.am-mfa-benefits h3,
.am-mfa-requirements h3 {
	margin: 0 0 0.75rem 0;
	font-size: 1.1rem;
	color: var(--text-primary);
}

.am-mfa-benefits ul,
.am-mfa-requirements ul {
	margin: 0;
	padding-left: 1.5rem;
	color: var(--text-secondary);
}

.am-mfa-benefits li,
.am-mfa-requirements li {
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

.am-mfa-qr-section {
	text-align: center;
	margin: 2rem 0;
	padding: 2rem;
	background: var(--color-surface-pale);
	border-radius: var(--radius-lg);
}

.am-mfa-qr-code {
	margin: 1.5rem 0;
}

.am-mfa-qr-code img {
	max-width: 200px;
	height: auto;
	border: 4px solid white;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.am-mfa-manual-setup {
	margin-top: 1.5rem;
	text-align: left;
}

.am-mfa-manual-setup summary {
	cursor: pointer;
	color: var(--color-accent-blue);
	font-size: 0.9rem;
	padding: 0.5rem;
}

.am-mfa-manual-setup summary:hover,
.am-mfa-manual-setup summary:focus {
	text-decoration: underline;
}

.am-mfa-manual-content {
	margin-top: 1rem;
	padding: 1rem;
	background: white;
	border-radius: var(--radius-sm);
}

.am-mfa-secret {
	display: block;
	padding: 1rem;
	background: var(--color-surface-inverse);
	color: var(--success-color);
	font-family: monospace;
	font-size: 1rem;
	letter-spacing: 0.1em;
	word-break: break-all;
	border-radius: var(--radius-sm);
	margin-top: 0.5rem;
}

.am-mfa-backup-codes {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--color-surface-pale);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
}

.am-mfa-backup-codes h3 {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	color: var(--text-primary);
}

.am-backup-codes-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.75rem;
	margin: 1rem 0;
}

.am-backup-codes-list code {
	display: block;
	padding: 0.75rem;
	background: white;
	border: 1px solid var(--border-mid);
	border-radius: var(--radius-sm);
	text-align: center;
	font-family: monospace;
	font-size: 0.9rem;
	color: var(--text-primary);
	letter-spacing: 0.05em;
}

.am-mfa-disable {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
}

.am-mfa-disable h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	color: var(--text-primary);
}

/* ==========================================================================
	Responsive Design
	========================================================================== */

@media (max-width: 640px) {
	.am-auth-card {
		padding: 1.5rem;
	}

	.am-auth-title {
		font-size: 1.5rem;
	}

	.am-form-actions {
		flex-direction: column;
	}

	.am-backup-codes-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
	Print Styles (for backup codes)
	========================================================================== */

@media print {
	.am-auth-container {
		max-width: 100%;
	}

	.am-form-actions,
	.am-mfa-disable,
	.am-auth-footer {
		display: none;
	}

	.am-backup-codes-list {
		grid-template-columns: repeat(2, 1fr);
		page-break-inside: avoid;
	}
}

/* ==========================================================================
	High Contrast Mode Support
	========================================================================== */

@media (prefers-contrast: high) {
	.am-auth-card {
		border-width: 2px;
	}

	.am-form-input {
		border-width: 2px;
	}
}

/* ==========================================================================
	Reduced Motion Support
	========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.am-form-input {
		transition: none;
	}
}

.am-login-tab-panel {
	display: none;
}

.am-login-tab-panel.active {
	display: block;
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
	SSO Login Styles
	========================================================================== */

.am-sso-login-container {
	padding: 1rem 0;
}

.am-sso-providers {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.am-sso-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border: 2px solid;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.am-sso-btn--primary {
	background: var(--color-accent-blue);
	color: white;
	border-color: var(--color-accent-blue);
}

.am-sso-btn--primary:hover,
.am-sso-btn--primary:focus {
	background: var(--color-accent-blue);
	border-color: var(--color-accent-blue);
	color: white;
	transform: translateY(-1px);
}

.am-sso-btn--secondary {
	background: white;
	color: var(--text-primary);
	border-color: var(--border-mid);
}

.am-sso-btn--secondary:hover,
.am-sso-btn--secondary:focus {
	background: var(--color-surface-pale);
	border-color: var(--border-mid);
	color: var(--text-primary);
	transform: translateY(-1px);
}

.am-sso-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.am-sso-info {
	margin-top: 1.5rem;
	padding: 1rem;
	background: var(--color-surface-pale);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--color-accent-blue);
}

.am-sso-info .am-form-help {
	margin-top: 0;
}

/* ==========================================================================
	Checkbox Styles
	========================================================================== */

.am-form-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--text-secondary);
	cursor: pointer;
}

.am-form-checkbox input[type="checkbox"] {
	cursor: pointer;
	accent-color: var(--color-accent-blue);
}

/* ==========================================================================
	Passkey Management
	========================================================================== */

.am-passkey-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.am-passkey-table thead {
	background: var(--color-surface-pale);
	border-bottom: 2px solid var(--border-color);
}

.am-passkey-table th {
	font-weight: 600;
	letter-spacing: 0.025em;
}

.am-passkey-table td {
	vertical-align: middle;
	color: var(--text-primary);
}

.am-passkey-table tbody tr:last-child td {
	border-bottom: none;
}

.am-passkey-table-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.am-passkey-empty-state {
	text-align: center;
	padding: 2rem 1rem;
	margin: 1.5rem 0;
	background: var(--color-surface-pale);
	border: 2px dashed var(--border-mid);
	border-radius: var(--radius-lg);
	color: var(--text-secondary);
}

.am-passkey-empty-state p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.am-passkey-actions {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Gap between the Login button and the passkey box below it. ID + class so
   it outranks the vendor sheet and the shortcode's `margin: 0` override. */
#wp-passkeys-section.am-passkey-section {
	margin-top: 1.5rem;
}

#wp-passkeys-status {
	font-size: 0.9rem;
	line-height: 1.5;
}

#wp-passkeys-status.success {
	color: var(--color-alert-success-text);
}

#wp-passkeys-status.error {
	color: var(--error-darker);
}

#wp-passkeys-status.loading {
	color: var(--color-accent-blue-dark);
}

@media (max-width: 640px) {
	.am-passkey-table thead {
		display: none;
	}

	.am-passkey-table,
	.am-passkey-table tbody,
	.am-passkey-table tr,
	.am-passkey-table td {
		display: block;
		width: 100%;
	}

	.am-passkey-table tr {
		padding: 1rem 0;
		border-bottom: 1px solid var(--border-color);
	}

	.am-passkey-table td {
		padding: 0.25rem 0;
		border-bottom: none;
	}

	.am-passkey-table td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 0.8rem;
		color: var(--text-secondary);
		text-transform: uppercase;
		display: block;
	}

	.am-passkey-table-actions {
		margin-top: 0.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Security-tip icon (C3-001)
   Was style="vertical-align: text-bottom;" inline on the SVG in login.php.
   Same appearance.

   NOTE: this file was NEVER SCANNED by the C3 test. AuthFindingsTest extracts a
   render() method from each shortcode file, but login.php is a procedural
   template with no methods at all — extractMethodSource() returned '' and the
   file was silently skipped. Fixed by making the helper fail loudly instead.
   --------------------------------------------------------------------------- */

.am-auth-security-tip__heading svg {
	vertical-align: text-bottom;
}

/* ---------------------------------------------------------------------------
   Passkey management help text (C3-001)
   Was style="margin-top: 1.5rem;" inline in class-passkey-management-shortcode.php.

   NOTE: this one hid inside render_page(), not render(). The old test extracted
   only the render() method, so it never saw it.
   --------------------------------------------------------------------------- */

.am-passkey-management .am-form-help {
	margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * The box an eye button sits in.
 *
 * .am-password-toggle is absolutely positioned, so it needs a positioned
 * parent or it lands in the corner of whatever ancestor happens to have one.
 * The input keeps room on the right so the text never runs under the icon.
 * ------------------------------------------------------------------------- */
.am-password-input-wrap {
	position: relative;
	display: block;
}

.am-password-input-wrap input {
	width: 100%;
	padding-right: 3rem;
}