/**
 * Shared shell responsive rules — sidebar hide, mobile drawer, content padding.
 * Apps keep sidebar theming in their own ds-shell.css.
 *
 * Breakpoints: this file uses 768px for padding/touch on legacy class names.
 * App-specific ds-shell.css files use 767px to match Trade Portal (1px gap at 768px is intentional).
 * Opt-in mobile utilities (.at-mobile-*) are defined at 767px below.
 */

@media (max-width: 768px) {
	.app-main,
	.main-content,
	.st-main,
	.forge-main,
	.tp-main,
	.pt-main {
		padding-left: env(safe-area-inset-left, 0);
		padding-right: env(safe-area-inset-right, 0);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.toolbar-menu-btn,
	.nav-mobile-menu-btn,
	.pt-mobile-menu-btn,
	.tp-mobile-menu-btn {
		min-width: var(--touch-min, 44px);
		min-height: var(--touch-min, 44px);
		width: var(--touch-min, 44px);
		height: var(--touch-min, 44px);
	}
}

@media (max-width: 480px) {
	.app-main,
	.main-content,
	.st-main,
	.forge-main,
	.tp-main,
	.pt-main,
	.pt-content,
	.tp-content {
		padding-left: max(var(--space-3, 12px), env(safe-area-inset-left, 0));
		padding-right: max(var(--space-3, 12px), env(safe-area-inset-right, 0));
	}
}

/* Scroll-to-top FAB — below modals/popovers; hide when overlays are open */
.at-scroll-fab,
.tp-back-top,
.tp-scroll-top {
	z-index: var(--z-sticky, 100);
}

body:has(.tp-modal:not([hidden])) .at-scroll-fab,
body:has(.tp-modal:not([hidden])) .tp-back-top,
body:has(.tp-modal:not([hidden])) .tp-scroll-top,
body:has(.tp-wt-modal:not([hidden])) .at-scroll-fab,
body:has(.tp-wt-modal:not([hidden])) .tp-back-top,
body:has(.tp-wt-modal:not([hidden])) .tp-scroll-top,
body:has(.tp-mobile-drawer.open) .at-scroll-fab,
body:has(.tp-mobile-drawer.open) .tp-back-top,
body:has(.tp-mobile-drawer.open) .tp-scroll-top,
body:has(.tp-disp-popover:not([hidden])) .at-scroll-fab,
body:has(.tp-disp-popover:not([hidden])) .tp-back-top,
body:has(.tp-disp-popover:not([hidden])) .tp-scroll-top,
body:has(.tp-filter-popover:not([hidden])) .at-scroll-fab,
body:has(.tp-filter-popover:not([hidden])) .tp-back-top,
body:has(.tp-filter-popover:not([hidden])) .tp-scroll-top,
body:has(.tp-cm-email-popover:not([hidden])) .at-scroll-fab,
body:has(.tp-cm-email-popover:not([hidden])) .tp-back-top,
body:has(.tp-cm-email-popover:not([hidden])) .tp-scroll-top,
body:has(.at-popover.is-open) .at-scroll-fab,
body:has(.at-popover.is-open) .tp-back-top,
body:has(.at-popover.is-open) .tp-scroll-top,
body:has(.at-modal:not([hidden])) .at-scroll-fab,
body:has(.at-modal:not([hidden])) .tp-back-top,
body:has(.at-modal:not([hidden])) .tp-scroll-top,
body:has(.at-drawer.is-open) .at-scroll-fab,
body:has(.at-drawer.is-open) .tp-back-top,
body:has(.at-drawer.is-open) .tp-scroll-top,
body.tp-modal-open .at-scroll-fab,
body.tp-modal-open .tp-back-top,
body.tp-modal-open .tp-scroll-top {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none !important;
}

/* Opt-in mobile utilities — apps map local class names in ds-shell.css */
@media (max-width: 767px) {
	.at-mobile-scroll-child {
		flex: none !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	.at-mobile-toolbar-left:empty {
		display: none !important;
	}

	.at-mobile-toolbar-left:not(:empty) {
		display: flex !important;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.5rem;
		width: 100%;
		justify-content: flex-start;
		text-align: left;
	}

	.at-mobile-page-title {
		text-align: left !important;
		width: 100%;
		margin: 0;
	}

	.at-mobile-toolbar-right {
		align-items: stretch !important;
		align-self: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
	}

	.at-mobile-action-btn {
		justify-content: flex-start;
		min-height: var(--touch-min, 44px);
		font-size: 16px;
	}
}