@import 'colors.css';
@import 'typography.css';
@import 'dimensions.css';
@import 'motion.css';
@import 'reset.css';
@import 'icons.css';
@import 'reconnect-overlay.css';

html.scroll-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Used by both system-rendered Dialog footer (Info/Confirm/Destruct) and Custom
   bodies that opt into matching footer alignment. Hoisted out of Dialog.razor.css
   so it's reachable from caller-supplied content without :deep gymnastics. */
.dialog-footer {
	display: flex;
	justify-content: center;
	gap: var(--spacing-small);
}

/* Each footer child grows to fill but never exceeds 50% — for 2 buttons each
   takes ~50% (minus half-gap), for 1 button it caps at 50% and right-aligns
   via the parent's justify-content. No conditional markup needed. */
.dialog-footer > * {
	flex: 1 1 0;
	max-width: 50%;
}

/* Form layout utilities — mirror Tournament's .block / .fields / .actions
   pattern so consumers don't reinvent it per page. Pair with <Page Width="Narrow">
   for a centered form column. `.form-actions` switches to column-reverse on
   mobile so the secondary action (Cancel) drops below the primary action. */
.form-block {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	align-items: stretch;
	width: 100%;
}

.form-block.narrow {
	max-width: 400px;
	margin-inline: auto;
}

.form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
}

.form-actions {
	display: flex;
	gap: var(--spacing-small);
	margin-top: var(--spacing-medium);
	justify-content: center;
}

.form-actions > * {
	flex: 1 1 0;
}

@media (max-width: 640px) {
	.form-actions {
		flex-direction: column-reverse;
	}
}