/*
Ability Esports — Modal / Drawer system.
/docs/UI-PATTERN-LIBRARY.md §28. Implemented on the native <dialog> element
deliberately: <dialog>'s showModal() gives real, browser-native focus
trapping, Escape-to-close, and top-layer stacking for free, which is a
stronger and smaller-footprint implementation than a hand-rolled JS focus
trap — consistent with this project's own "prefer native HTML over JS"
discipline already used for the Accordion (native <details>).
*/

dialog.ae-modal {
	width: min(32rem, calc(100vw - var(--ae-space-xl)));
	max-height: min(85vh, 100%);
	margin: auto;
	padding: 0;
	border: none;
	border-radius: var(--ae-radius-lg);
	background: var(--ae-color-surface-3);
	color: var(--ae-color-text-primary);
	box-shadow: var(--ae-shadow-modal);
}

dialog.ae-modal::backdrop {
	background: rgba(10, 11, 15, 0.72);
}

dialog.ae-modal[open] {
	animation: ae-modal-in var(--ae-duration-normal) var(--ae-ease-emphasized);
}

@keyframes ae-modal-in {
	from {
		opacity: 0;
		transform: translateY(var(--ae-space-md));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog.ae-modal[open] {
		animation: none;
	}
}

.ae-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ae-space-md);
	padding: var(--ae-space-lg);
	border-bottom: var(--ae-border-subtle);
}

.ae-modal__title {
	margin: 0;
	font-size: var(--ae-text-h4);
}

.ae-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	margin: -0.5rem;
	border-radius: var(--ae-radius-sm);
	background: transparent;
	color: var(--ae-color-text-secondary);
	font-size: var(--ae-text-h4);
	line-height: 1;
}

.ae-modal__close:hover {
	background: var(--ae-color-interactive-hover);
	color: var(--ae-color-text-primary);
}

.ae-modal__body {
	padding: var(--ae-space-lg);
	overflow-y: auto;
}

.ae-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--ae-space-sm);
	padding: var(--ae-space-lg);
	border-top: var(--ae-border-subtle);
}

/* Confirmation modal — a single action + cancel, narrower. */
dialog.ae-modal--confirm {
	width: min(24rem, calc(100vw - var(--ae-space-xl)));
}

/* Mobile drawer — full-height slide-in panel, used for mobile nav/filters. */
dialog.ae-modal--drawer {
	width: min(20rem, 85vw);
	height: 100%;
	max-height: 100%;
	margin: 0 0 0 auto;
	border-radius: 0;
}

dialog.ae-modal--drawer[open] {
	animation: ae-drawer-in var(--ae-duration-normal) var(--ae-ease-emphasized);
}

@keyframes ae-drawer-in {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog.ae-modal--drawer[open] {
		animation: none;
	}
}