/**
 * Mobile UI layer — shared client storefront + admin backend.
 * Loaded after mobile-shared.css. Active when html has .pc-mobile-ui-active (set by JS).
 */

:root {
	--pc-mobile-gutter: max(0.75rem, env(safe-area-inset-left));
	--pc-mobile-gutter-r: max(0.75rem, env(safe-area-inset-right));
	--pc-mobile-touch: 44px;
	--pc-mobile-icon-nav-h: 2.75rem;
	--pc-mobile-subnav-z: 12;
	--pc-mobile-toolbar-gap: 0.35rem;
}

/* ------------------------------------------------------------------ tokens */
html.pc-mobile-ui-active {
	--pc-content-pad-x: var(--pc-mobile-gutter);
}

/* ------------------------------------------------------------------ shell */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active,
	html.pc-mobile-ui-active body {
		overflow-x: hidden;
	}

	html.pc-mobile-ui-active .pc-mobile-shell {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	html.pc-mobile-ui-active .pc-mobile-safe-bottom {
		padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
	}

	/* Client content gutter */
	html.pc-mobile-ui-active.pc-storefront-html .content-wrapper,
	html.pc-mobile-ui-active .pc-storefront-body .content-wrapper {
		padding-left: var(--pc-mobile-gutter);
		padding-right: var(--pc-mobile-gutter-r);
	}

	/* Admin main pane */
	html.pc-mobile-ui-active[data-admin-ui="lite"] .pc-container,
	html.pc-mobile-ui-active[data-admin-ui="lite"] .pc-content,
	html.pc-mobile-ui-active[data-admin-ui="lite"] #main-dom-content,
	html[data-pc-mobile="1"][data-admin-ui="lite"] .pc-container,
	html[data-pc-mobile="1"][data-admin-ui="lite"] .pc-content,
	html[data-pc-mobile="1"][data-admin-ui="lite"] #main-dom-content {
		padding-left: var(--pc-mobile-gutter);
		padding-right: var(--pc-mobile-gutter-r);
		box-sizing: border-box;
	}

	html.pc-mobile-ui-active[data-admin-ui="lite"] #main-dom-content > .p-2,
	html.pc-mobile-ui-active[data-admin-ui="lite"] #main-dom-content > .p-3,
	html.pc-mobile-ui-active[data-admin-ui="lite"] #main-dom-content > .p-4,
	html[data-pc-mobile="1"][data-admin-ui="lite"] #main-dom-content > .p-2,
	html[data-pc-mobile="1"][data-admin-ui="lite"] #main-dom-content > .p-3,
	html[data-pc-mobile="1"][data-admin-ui="lite"] #main-dom-content > .p-4 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ------------------------------------------------------------------ horizontal toolbar scroll (shared utility) */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active .pc-mobile-toolbar-scroll,
	html.pc-mobile-ui-active .card-header .d-flex.flex-nowrap,
	html.pc-mobile-ui-active .admin-toolbar-grid,
	html.pc-mobile-ui-active .service-card-header .d-flex.flex-nowrap {
		flex-wrap: nowrap !important;
		align-items: center !important;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		gap: var(--pc-mobile-toolbar-gap);
		padding-bottom: 2px;
		box-sizing: border-box;
	}

	html.pc-mobile-ui-active .pc-mobile-toolbar-scroll > .btn,
	html.pc-mobile-ui-active .pc-mobile-toolbar-scroll > .flex-shrink-0,
	html.pc-mobile-ui-active .card-header .d-flex.flex-nowrap > .btn,
	html.pc-mobile-ui-active .card-header .d-flex.flex-nowrap > .flex-shrink-0 {
		flex-shrink: 0 !important;
	}
}

/* ------------------------------------------------------------------ icon strip nav (customer-m-menu, setting-m-menu, dash) */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active .customer-m-menu button[data-section]::before,
	html.pc-mobile-ui-active .setting-m-menu button[data-section]::before,
	html[data-pc-mobile="1"] .customer-m-menu button[data-section]::before,
	html[data-pc-mobile="1"] .setting-m-menu button[data-section]::before {
		content: none !important;
		display: none !important;
	}

	html.pc-mobile-ui-active .pc-mobile-icon-nav,
	html.pc-mobile-ui-active .customer-m-menu,
	html.pc-mobile-ui-active .setting-m-menu,
	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu,
	html[data-pc-mobile="1"] .pc-mobile-icon-nav,
	html[data-pc-mobile="1"] .customer-m-menu,
	html[data-pc-mobile="1"] .setting-m-menu,
	html[data-pc-mobile="1"] .dash-sidebar-nav.customer-m-menu {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: none !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		border-right: none !important;
		border-bottom: 1px solid rgba(148, 163, 184, 0.35);
		position: sticky;
		top: 0;
		z-index: var(--pc-mobile-subnav-z);
		background: var(--bs-body-bg, #fff);
		flex: 0 0 auto !important;
	}

	html.pc-mobile-ui-active .pc-mobile-icon-nav > button,
	html.pc-mobile-ui-active .customer-m-menu:not(.dash-sidebar-nav) > button,
	html.pc-mobile-ui-active .setting-m-menu > button,
	html[data-pc-mobile="1"] .pc-mobile-icon-nav > button,
	html[data-pc-mobile="1"] .customer-m-menu:not(.dash-sidebar-nav) > button,
	html[data-pc-mobile="1"] .setting-m-menu > button {
		flex: 0 0 auto !important;
		width: var(--pc-mobile-icon-nav-h) !important;
		min-width: var(--pc-mobile-icon-nav-h) !important;
		height: var(--pc-mobile-icon-nav-h) !important;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 0 !important;
		line-height: 0 !important;
		border-radius: 0 !important;
		border: none !important;
		border-right: 1px solid rgba(148, 163, 184, 0.2) !important;
	}

	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu > button .pc-mobile-icon-fa,
	html[data-pc-mobile="1"] .dash-sidebar-nav.customer-m-menu > button .pc-mobile-icon-fa {
		display: none !important;
	}

	/* Terms / rules link — desktop sidebar only */
	html.pc-mobile-ui-active .dash-sidebar-nav .dash-nav-item--desktop-only,
	html[data-pc-mobile="1"] .dash-sidebar-nav .dash-nav-item--desktop-only {
		display: none !important;
	}

	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu > button,
	html[data-pc-mobile="1"] .dash-sidebar-nav.customer-m-menu > button {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 2.75rem !important;
		max-width: 4.25rem !important;
		height: auto !important;
		min-height: var(--pc-mobile-icon-nav-h) !important;
		padding: 0.45rem 0.35rem !important;
		border-right: none !important;
		border-bottom: 2px solid transparent !important;
		font-size: inherit !important;
		line-height: 1 !important;
	}

	html.pc-mobile-ui-active .customer-m-menu > button > span.dash-nav-label,
	html.pc-mobile-ui-active .setting-m-menu > button > span.dash-nav-label,
	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu > button > span.dash-nav-label,
	html[data-pc-mobile="1"] .customer-m-menu > button > span.dash-nav-label,
	html[data-pc-mobile="1"] .setting-m-menu > button > span.dash-nav-label,
	html[data-pc-mobile="1"] .dash-sidebar-nav.customer-m-menu > button > span.dash-nav-label {
		display: none !important;
	}

	/* Keep icon container (.dash-nav-ic) visible as flex */
	html.pc-mobile-ui-active .customer-m-menu > button > span.dash-nav-ic,
	html.pc-mobile-ui-active .setting-m-menu > button > span.dash-nav-ic,
	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu > button > span.dash-nav-ic,
	html[data-pc-mobile="1"] .customer-m-menu > button > span.dash-nav-ic,
	html[data-pc-mobile="1"] .setting-m-menu > button > span.dash-nav-ic,
	html[data-pc-mobile="1"] .dash-sidebar-nav.customer-m-menu > button > span.dash-nav-ic {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	html.pc-mobile-ui-active .customer-m-menu:not(.dash-sidebar-nav) > button .pc-mobile-icon-fa,
	html.pc-mobile-ui-active .setting-m-menu > button .pc-mobile-icon-fa,
	html[data-pc-mobile="1"] .customer-m-menu:not(.dash-sidebar-nav) > button .pc-mobile-icon-fa,
	html[data-pc-mobile="1"] .setting-m-menu > button .pc-mobile-icon-fa {
		display: inline-block !important;
		font-size: 1rem;
		line-height: 1;
		color: var(--bs-body-color, #334155);
	}

	html.pc-mobile-ui-active .customer-m-menu > button.active,
	html.pc-mobile-ui-active .setting-m-menu > button.active,
	html.pc-mobile-ui-active .dash-sidebar-nav.customer-m-menu > button.active {
		background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12) !important;
		box-shadow: inset 0 -2px 0 var(--bs-primary, #0d6efd);
	}

	html.pc-mobile-ui-active .customer-m-menu-content,
	html.pc-mobile-ui-active .setting-m-menu + .customer-m-menu-content,
	html.pc-mobile-ui-active .dash-v2-shell .customer-m-menu-content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}
}

/* ------------------------------------------------------------------ tables */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active .pc-mobile-table-wrap {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	html.pc-mobile-ui-active .pc-mobile-table-wrap > table,
	html.pc-mobile-ui-active .pc-mobile-table-wrap .dataTables_wrapper {
		min-width: 0;
	}

	html.pc-mobile-ui-active .dataTables_wrapper .dataTables_length,
	html.pc-mobile-ui-active .dataTables_wrapper .dataTables_filter {
		text-align: left !important;
		margin-bottom: 0.5rem;
	}

	html.pc-mobile-ui-active .dataTables_wrapper .dataTables_filter input {
		max-width: 100%;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ forms & cards */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active .pc-mobile-form-stack .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	html.pc-mobile-ui-active .pc-mobile-card-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	html.pc-mobile-ui-active .btn,
	html.pc-mobile-ui-active .form-control,
	html.pc-mobile-ui-active .form-select {
		min-height: 40px;
	}

	html.pc-mobile-ui-active .modal-dialog {
		margin: 0.5rem auto;
		max-width: calc(100vw - 1rem);
	}
}

@media (max-width: 575.98px) {
	html.pc-mobile-ui-active .content-wrapper {
		margin-top: 0.35rem !important;
		margin-bottom: 0.35rem !important;
	}

	html.pc-mobile-ui-active header.customer-site-header .navbar {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	html.pc-mobile-ui-active header.customer-site-header .customer-header-user-text {
		max-width: 5.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	html.pc-mobile-ui-active header.customer-site-header .customer-header-wallet-amount {
		font-size: 0.78rem;
	}

	html.pc-mobile-ui-active[data-admin-ui="lite"] .admin-top-header .header-wrapper {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	html.pc-mobile-ui-active .sl-retail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.5rem !important;
	}
}

@media (max-width: 420px) {
	html.pc-mobile-ui-active .sl-retail-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ------------------------------------------------------------------ client offcanvas (complements mobile-shared) */
@media (max-width: 991.98px) {
	html.pc-mobile-ui-active #menuOffcanvas .offcanvas-body {
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}
}

/* ------------------------------------------------------------------ admin sidebar overlay */
@media (max-width: 1024px) {
	html.pc-mobile-ui-active[data-admin-ui="lite"] .pc-sidebar {
		z-index: 1050;
	}
}