/**
 * Akel Tools Design System — Overlays (modal, drawer, popover, tooltip, toast)
 */

.at-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal-backdrop);
	background: var(--backdrop);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out);
}

.at-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Modal */
.at-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.at-modal.is-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.at-modal__dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100vh - var(--space-10));
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	box-shadow: var(--shadow-xl);
	animation: at-slide-up var(--duration-base) var(--ease-out);
	pointer-events: auto;
}

.at-modal--sm .at-modal__dialog { max-width: 400px; }
.at-modal--md .at-modal__dialog { max-width: 560px; }
.at-modal--lg .at-modal__dialog { max-width: 720px; }
.at-modal--xl .at-modal__dialog { max-width: 960px; }
.at-modal--full .at-modal__dialog { max-width: calc(100vw - var(--space-10)); max-height: calc(100vh - var(--space-10)); }

.at-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	border-bottom: 1px solid var(--border-default);
	flex-shrink: 0;
}

.at-modal__title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

.at-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--text-tertiary);
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.at-modal__close:hover {
	color: var(--text-primary);
	background: var(--surface-subtle);
}

/* Canonical dialog close — use on modals, drawers, popovers */
.at-dialog-close,
.at-modal__close {
	flex-shrink: 0;
}

.at-dialog-close svg {
	display: block;
	width: 20px;
	height: 20px;
}

@media (max-width: 768px) {
	.at-modal {
		padding: 0;
		align-items: stretch;
	}

	.at-modal__dialog {
		max-width: 100vw;
		max-height: 100dvh;
		width: 100%;
		height: 100%;
		border: none;
		box-shadow: none;
		animation: none;
	}

	.at-modal--sm .at-modal__dialog,
	.at-modal--md .at-modal__dialog,
	.at-modal--lg .at-modal__dialog,
	.at-modal--xl .at-modal__dialog,
	.at-modal--full .at-modal__dialog {
		max-width: 100vw;
		max-height: 100dvh;
	}

	.at-dialog-close,
	.at-modal__close {
		width: var(--touch-min);
		height: var(--touch-min);
		min-width: var(--touch-min);
		min-height: var(--touch-min);
	}

	.at-modal__header {
		padding-top: max(var(--space-5), env(safe-area-inset-top));
		padding-left: max(var(--space-5), env(safe-area-inset-left));
		padding-right: max(var(--space-5), env(safe-area-inset-right));
	}

	.at-modal__body {
		padding-left: max(var(--space-5), env(safe-area-inset-left));
		padding-right: max(var(--space-5), env(safe-area-inset-right));
		-webkit-overflow-scrolling: touch;
	}

	.at-modal__footer {
		padding-left: max(var(--space-4), env(safe-area-inset-left));
		padding-right: max(var(--space-4), env(safe-area-inset-right));
		padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
	}
}

.at-modal__body {
	flex: 1;
	overflow: auto;
	padding: var(--space-5);
}

.at-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border-default);
	flex-shrink: 0;
}

/* Drawer */
.at-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	pointer-events: none;
	visibility: hidden;
}

.at-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.at-drawer__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(480px, 100vw);
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	box-shadow: var(--shadow-xl);
	transition: transform var(--duration-slow) var(--ease-out);
}

.at-drawer--right .at-drawer__panel {
	right: 0;
	transform: translateX(100%);
}

.at-drawer--left .at-drawer__panel {
	left: 0;
	transform: translateX(-100%);
}

.at-drawer.is-open.at-drawer--right .at-drawer__panel,
.at-drawer.is-open.at-drawer--left .at-drawer__panel {
	transform: translateX(0);
}

.at-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5);
	border-bottom: 1px solid var(--border-default);
	flex-shrink: 0;
}

.at-drawer__body {
	flex: 1;
	overflow: auto;
	padding: var(--space-5);
}

/* Popover */
.at-popover {
	position: absolute;
	z-index: var(--z-popover);
	min-width: 180px;
	padding: var(--space-2);
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}

.at-popover.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.at-popover-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-default);
	margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-3);
}

.at-popover-dialog-title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

@media (max-width: 768px) {
	.tp-disp-popover:not([hidden]),
	.pt-disp-popover:not([hidden]),
	.sdn-disp-popover:not([hidden]) {
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--z-modal);
		width: 100%;
		max-width: 100vw;
		max-height: min(85dvh, 100%);
		overflow: auto;
		margin: 0;
		padding: var(--space-4);
		padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
		box-shadow: var(--shadow-xl);
	}
}

.at-popover__item {
	display: block;
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.at-popover__item:hover {
	background: var(--surface-subtle);
}

/* Tooltip */
.at-tooltip {
	position: absolute;
	z-index: var(--z-tooltip);
	max-width: 240px;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: #fff;
	background: var(--brand-navy);
	border-radius: 0;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}

.at-tooltip.is-open {
	opacity: 1;
	visibility: visible;
}

/* Toast */
.at-toast-region {
	position: fixed;
	top: var(--space-5);
	right: var(--space-5);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 380px;
	pointer-events: none;
}

.at-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	box-shadow: var(--shadow-lg);
	pointer-events: auto;
	animation: at-slide-up var(--duration-base) var(--ease-out);
}

.at-toast--success { border-left: 3px solid var(--brand-success); }
.at-toast--danger  { border-left: 3px solid var(--brand-danger); }
.at-toast--warning { border-left: 3px solid var(--brand-warning); }
.at-toast--info    { border-left: 3px solid var(--brand-accent); }

.at-toast__message {
	flex: 1;
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.at-toast__close {
	flex-shrink: 0;
	padding: 0;
	color: var(--text-tertiary);
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-lg);
	line-height: 1;
}