/**
 * @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));
	display: flex;
	flex-direction: column;
}

/* Two-Column Layout (Sidebar + Main) */
.layout-twocol {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	height: calc(100vh - var(--header-height));

	& .layout-twocol__sidebar {
		position: sticky;
		top: var(--header-height);
		height: calc(100vh - var(--header-height));
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow: hidden;
		border-inline-end: var(--border-width) solid var(--color-border);
		padding: var(--space-5);
		background-color: var(--color-surface);
	}

	& .layout-twocol__main {
		padding: var(--space-6) var(--container-padding);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.layout-twocol {
		grid-template-columns: 1fr;
		height: auto;

		& .layout-twocol__sidebar {
			position: static;
			height: auto;
			max-height: min(300px, 50vh);
			overflow-y: auto;
		}

		& .layout-twocol__main {
			padding: var(--space-4);
		}
	}
}

/* Modal Layout - No shadow, border-only */
.layout-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	opacity: 0.95;
	z-index: 1000;

	& .modal {
		width: 100%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		padding: var(--space-6);
		background-color: var(--color-surface);
		border: var(--border-width-thick) solid var(--color-primary);
		border-radius: var(--radius);
	}
}

/* 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-header);
	}

	& .layout-auth__logo {
		display: block;
		height: 20px;
		width: auto;
	}

	& .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);
		border-radius: var(--radius);
	}

	& .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);
	}
}