/**
 * @fileoverview
 * Layout-specific styles for GearTrain.
 * Neo-Brutalist: No shadows, visible borders, color blocking.
 */

/* Centered Layout */
.layout-centered {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding: var(--space-6) var(--container-padding);
	min-height: calc(100vh - var(--header-height));
}

/* Auth Layout */
.layout-auth {
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	& .layout-auth__header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: var(--header-height);
		border-block-end: var(--border-width-thick) solid var(--color-border);
		background-color: var(--color-primary);
	}

	& .layout-auth__logo {
		font-size: var(--font-size-xl);
		font-weight: 600;
		color: var(--color-text);
	}

	& .layout-auth__main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-6);
		background-color: var(--color-bg);
	}

	& .layout-auth__content {
		width: 100%;
		max-width: 400px;
		padding: var(--space-6);
		background-color: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
	}

	& .layout-auth__footer {
		display: flex;
		justify-content: center;
		gap: var(--space-6);
		padding: var(--space-5);
		border-block-start: var(--border-width) solid var(--color-border);
		background-color: var(--color-surface);
	}

	& .layout-auth__footer a {
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);

		&:hover {
			color: var(--color-text);
		}
	}
}

/* Auth form styles */
.auth-form {
	& .form-group {
		margin-block-end: var(--space-4);

		& label {
			display: block;
			margin-block-end: var(--space-2);
			font-size: var(--font-size-sm);
			font-weight: 500;
			color: var(--color-text);
		}

		& input {
			width: 100%;
		}
	}

	& .form-actions {
		margin-block-start: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	& .form-footer {
		margin-block-start: var(--space-4);
		text-align: center;
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}
}