/*
 * Global responsive modal foundation.
 *
 * Blocking overlays cover the viewport, while visible dialogs keep their
 * module-owned centered card dimensions on phones, tablets, and desktops.
 * Order product and payment workflows are the explicit phone full-screen
 * exceptions owned by order_workspace.css. Dialog content may scroll
 * vertically, but a modal must never create page-level or surface-level
 * horizontal scrolling. Dropdowns, tooltips, select lists, and non-blocking
 * popovers are intentionally outside this contract.
 */

html.ui-v2-enabled {
	--app-modal-viewport-height: 100vh;
	--app-global-message-backdrop-z: 100000;
	--app-global-message-z: 100001;
}

@supports (height: 100dvh) {
	html.ui-v2-enabled {
		--app-modal-viewport-height: 100dvh;
	}
}

html.ui-v2-enabled body.modal-open,
html.ui-v2-enabled body:has(dialog[open]),
html.ui-v2-enabled body.customer-dialog-open {
	overflow: hidden !important;
}

/* A flatpickr appended to a native dialog must remain inside the top layer without being clipped. */
html.ui-v2-enabled body dialog[open]:has(.flatpickr-calendar.open) {
	overflow: visible !important;
}

/*
 * ShowModal is the shared validation/server-feedback surface. Its native dialog
 * layer hosts the existing Bootstrap message after it opens and therefore
 * enters the browser top layer after any existing popup. The z-index pair is
 * the fallback for older browsers; the dedicated backdrop class prevents
 * unrelated Bootstrap dialogs from being promoted.
 */
html.ui-v2-enabled body > #app_modal.app-global-message-modal,
html.ui-v2-enabled body > #app_modal_layer.app-global-message-layer > #app_modal.app-global-message-modal {
	z-index: var(--app-global-message-z) !important;
	pointer-events: auto !important;
}

html.ui-v2-enabled body > .modal-backdrop.app-global-message-modal-backdrop {
	z-index: var(--app-global-message-backdrop-z) !important;
}

html.ui-v2-enabled body > #app_modal_layer.app-global-message-layer[open] {
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box !important;
	width: 100vw !important;
	max-width: 100vw !important;
	height: var(--app-modal-viewport-height) !important;
	max-height: var(--app-modal-viewport-height) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

html.ui-v2-enabled body > #app_modal_layer.app-global-message-layer[open]::backdrop {
	background: var(--v2-overlay-bg, rgba(4, 10, 20, .68));
}

html.ui-v2-enabled body:has(> #app_modal_layer.app-global-message-layer[open]) > .modal-backdrop.app-global-message-modal-backdrop {
	opacity: 0 !important;
	pointer-events: none !important;
}

/*
 * Shared ShowModal paint belongs beside its geometry and top-layer behavior.
 * Authenticated pages provide these semantic tokens through theme_v2.css; slim
 * standalone surfaces such as Login provide the same token contract without
 * loading the complete authenticated-shell bundle.
 */
html.ui-v2-enabled body .app-global-message-modal .modal-content {
	background: var(--v2-dialog-bg, #ffffff);
	border: 1px solid var(--v2-dialog-border, #d9e1ea);
	color: var(--v2-dialog-text, #334155);
	box-shadow: var(--v2-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .18));
}

html.ui-v2-enabled body .app-global-message-modal :is(.modal-header, .modal-footer) {
	border-color: var(--v2-dialog-divider, #e2e8f0);
}

html.ui-v2-enabled body .app-global-message-modal .modal-title,
html.ui-v2-enabled body .app-global-message-modal .modal-header > .close {
	color: var(--v2-dialog-title, #16213d);
}

html.ui-v2-enabled body .app-global-message-modal .modal-header > .close {
	opacity: .82;
	text-shadow: none;
}

html.ui-v2-enabled body .app-global-message-modal .modal-header > .close:hover,
html.ui-v2-enabled body .app-global-message-modal .modal-header > .close:focus {
	color: var(--v2-dialog-title, #16213d);
	opacity: 1;
}

html.ui-v2-enabled body .app-global-message-modal .modal-body,
html.ui-v2-enabled body .app-global-message-modal .modal-body p {
	color: var(--v2-dialog-text, #334155);
}

html.ui-v2-enabled body .app-global-message-modal .modal-footer > .btn-default {
	background: var(--v2-action-secondary-bg, #ffffff) !important;
	border-color: var(--v2-action-secondary-border, #c8d4e6) !important;
	color: var(--v2-action-secondary-text, #16213d) !important;
}

html.ui-v2-enabled body .app-global-message-modal .modal-footer > .btn-default:hover,
html.ui-v2-enabled body .app-global-message-modal .modal-footer > .btn-default:focus {
	background: var(--v2-action-secondary-bg-hover, #edf4ff) !important;
	color: var(--v2-action-secondary-text, #16213d) !important;
}

html.ui-v2-enabled body .app-global-message-modal :is(.modal-header > .close, .modal-footer > .btn):focus-visible {
	outline: 3px solid var(--v2-focus-ring, rgba(37, 99, 235, .72));
	outline-offset: 2px;
}

/*
 * Phone geometry stays with each dialog owner. The shared layer deliberately
 * does not flatten cards into viewport sheets. The Order Workspace alone opts
 * its product and payment modes into full-screen phone layouts through
 * `.is-product-flow` and `.is-payment-flow` in order_workspace.css.
 */

/* The center region is the only area that may need scrolling. */
html.ui-v2-enabled body :is(
	.modal-body,
	.reservations-dialog-body,
	.order-dialog-body,
	.parameters-modal-body,
	.admin-deploy-body,
	.health-chart-wrap,
	#tables_container_box_list_container,
	.customer-order-cancel-list,
	.reservation-public-dialog [data-product-dialog-body],
	.guest-feedback-body,
	.customer-takeaway-install-sheet,
	.customer-dialog__panel,
	.customer_prepayment_notice_panel,
	#payment_method_box,
	.install-modal-panel
) {
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Select POS owns a contextual menu inside the shared ShowModal body. Promote
 * that opted-in body above the footer and release only its clipping boundary,
 * so the compact menu remains visible without changing any other modal's
 * vertical-scroll contract. The modal card still bounds the phone viewport.
 */
html.ui-v2-enabled body #app_modal.app-modal-pos-selector .modal-body {
	position: relative !important;
	z-index: 2;
	overflow: visible !important;
}

html.ui-v2-enabled body #app_modal.app-modal-pos-selector .modal-footer {
	position: relative !important;
	z-index: 1;
}

/* Headers and action areas never widen the modal beyond the viewport. */
html.ui-v2-enabled body :is(
	.modal-header,
	.modal-footer,
	.reservations-dialog-shell > header,
	.reservations-dialog-footer,
	.order-dialog-shell > header,
	.order-dialog-actions,
	.parameters-modal-head,
	.parameters-modal-footer,
	.admin-deploy-head,
	.health-modal-head,
	.tables_container_box_header,
	#tables_container_box_list_footer,
	.guest-feedback-head,
	.guest-feedback-footer,
	.customer-order-cancel-shell > header,
	.customer-order-cancel-shell > footer,
	.reservation-public-dialog form > header,
	.reservation-public-dialog form > footer
) {
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* Header content shrinks in place; the close control never wraps to the left. */
html.ui-v2-enabled body :is(
	.modal-header,
	.reservations-dialog-shell > header,
	.order-dialog-shell > header,
	.ui-v2-profile-header,
	.parameters-modal-head,
	.admin-deploy-head,
	.health-modal-head,
	#modal_custom_table_header,
	.tables_container_box_header,
	.guest-feedback-head,
	.customer-order-cancel-shell > header,
	.reservation-public-dialog form > header
) {
	position: relative !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	padding-right: max(64px, calc(16px + env(safe-area-inset-right))) !important;
	padding-top: max(14px, env(safe-area-inset-top)) !important;
}

html.ui-v2-enabled body :is(
	.modal-header,
	.reservations-dialog-shell > header,
	.order-dialog-shell > header,
	.ui-v2-profile-header,
	.parameters-modal-head,
	.admin-deploy-head,
	.health-modal-head,
	#modal_custom_table_header,
	.tables_container_box_header,
	.guest-feedback-head,
	.customer-order-cancel-shell > header,
	.reservation-public-dialog form > header
) > :not(button),
html.ui-v2-enabled body .tables_container_box_heading,
html.ui-v2-enabled body .tables_container_box_meta {
	min-width: 0 !important;
}

html.ui-v2-enabled body :is(
	.modal-header > .close,
	.reservations-dialog-shell > header > [data-reservations-dialog-close],
	.reservations-dialog-shell > header > button[value="cancel"],
	.order-dialog-shell > header > [data-order-dialog-close],
	.ui-v2-profile-close,
	.parameters-modal-close,
	.admin-deploy-close,
	.health-modal-close,
	#modal_custom_table_close,
	#tables_container_box_close,
	.guest-feedback-close,
	.customer-order-cancel-shell > header [data-customer-cancel-close],
	.reservation-public-dialog form > header [data-product-dialog-close]
) {
	position: absolute !important;
	top: 50% !important;
	right: max(12px, env(safe-area-inset-right)) !important;
	bottom: auto !important;
	left: auto !important;
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	transform: translateY(-50%) !important;
	z-index: 4;
}

html.ui-v2-enabled body :is(
	.customer-dialog__close,
	.customer-takeaway-install-close
) {
	right: max(12px, env(safe-area-inset-right)) !important;
	left: auto !important;
}

html.ui-v2-enabled body :is(
	.modal-footer,
	.reservations-dialog-footer,
	.order-dialog-actions,
	.parameters-modal-footer,
	#tables_container_box_list_footer,
	.guest-feedback-footer,
	.customer-order-cancel-shell > footer,
	.reservation-public-dialog form > footer
) {
	flex-wrap: wrap;
	padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* Long controls, text, media, and diagnostics must shrink or wrap in place. */
html.ui-v2-enabled body :is(
	dialog,
	.modal-dialog,
	[role="dialog"][aria-modal="true"]:not([aria-hidden="true"]):not([hidden]),
	.ui-v2-profile-dialog,
	.ui-v2-modal,
	.customer-dialog__panel,
	#payment_method_box
) :is(input, select, textarea, button, img, video, canvas, svg, iframe) {
	box-sizing: border-box;
	max-width: 100% !important;
}

/* Every modal field uses the full available inner width. */
html.ui-v2-enabled body :is(
	dialog,
	.modal-dialog,
	[role="dialog"][aria-modal="true"]:not([aria-hidden="true"]):not([hidden]),
	.ui-v2-profile-dialog,
	.ui-v2-modal,
	.customer-dialog__panel,
	#payment_method_box
) :is(
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
	select,
	textarea,
	.chosen-container,
	.flatpickr-wrapper
) {
	box-sizing: border-box !important;
	inline-size: 100% !important;
	width: 100% !important;
	min-inline-size: 0 !important;
	min-width: 0 !important;
	max-inline-size: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
}

/*
 * Shared native date/time control.
 *
 * iOS WebKit miscalculates a padded native temporal input at width:100% and
 * can also paint its own inner frame. The opt-in wrapper owns every visible
 * surface while the padding-free, appearance-free input keeps native picker
 * behavior. A dedicated class keeps this fix from overriding unrelated form
 * controls or legacy screens that have not adopted the component.
 */
html.ui-v2-enabled body .ui-v2-native-temporal-control {
	display: flex;
	box-sizing: border-box;
	inline-size: 100%;
	width: 100%;
	min-inline-size: 0;
	min-width: 0;
	max-inline-size: 100%;
	max-width: 100%;
	align-items: center;
	overflow: hidden;
	padding: 9px 10px;
	border: 1px solid var(--v2-form-border, #aebbd2);
	border-radius: 10px;
	background: var(--v2-form-bg, #ffffff);
	color: var(--v2-form-text, #172033);
}

html.ui-v2-enabled body:is(.ui-v2-theme,.ui-v2-shell-active) .ui-v2-native-temporal-control > input.ui-v2-native-temporal-input:is(
	[type="date"],
	[type="datetime-local"],
	[type="time"],
	[type="month"],
	[type="week"]
) {
	display: block !important;
	box-sizing: border-box !important;
	inline-size: 100% !important;
	width: 100% !important;
	min-inline-size: 0 !important;
	min-width: 0 !important;
	max-inline-size: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	text-align: start;
}

html.ui-v2-enabled body .ui-v2-native-temporal-control > input.ui-v2-native-temporal-input::-webkit-date-and-time-value {
	min-height: 1.2em;
	text-align: start;
}

html.ui-v2-enabled body .ui-v2-native-temporal-control:focus-within {
	border-color: var(--v2-ui-accent, var(--v2-primary, #3b67e8));
	box-shadow: 0 0 0 3px var(--v2-focus-ring, rgba(59, 103, 232, .2));
}

html.ui-v2-enabled body :is(
	dialog,
	.modal-dialog,
	[role="dialog"][aria-modal="true"]:not([aria-hidden="true"]):not([hidden]),
	.ui-v2-profile-dialog,
	.ui-v2-modal,
	.customer-dialog__panel,
	#payment_method_box
) :is(h1, h2, h3, h4, h5, h6, p, label, legend, button, td, th, pre, code) {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

html.ui-v2-enabled body :is(
	dialog,
	.modal-dialog,
	[role="dialog"][aria-modal="true"]:not([aria-hidden="true"]):not([hidden]),
	.ui-v2-profile-dialog,
	.ui-v2-modal,
	.customer-dialog__panel,
	#payment_method_box
) :is(pre, code) {
	white-space: pre-wrap;
}

/*
 * Shared feedback and customer phone popups use compact cards, not full-screen
 * workflow sheets.
 *
 * ShowModal() is the global feedback surface in every shell, so save results,
 * validation errors, and server messages always keep natural card height. The
 * lightweight customer shell extends the same compact-card contract to its
 * confirmations, payment choices, feedback, and small guided actions. The
 * blocking overlay still owns the complete visual viewport, while each visible
 * card keeps safe outer space and scrolls only inside when content is long.
 */
@media (max-width: 767px) {
html.ui-v2-enabled body .modal[role="dialog"].app-global-message-modal,
html.ui-v2-enabled body.customer-ui :is(
	.modal[role="dialog"]:not(.app-global-message-modal),
	.customer-dialog,
	#customer_prepayment_notice,
	.customer-takeaway-install-guide,
	.guest-feedback-prompt,
	#payment_method_container
) {
	box-sizing: border-box !important;
	inset: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	height: var(--app-modal-viewport-height) !important;
	max-height: var(--app-modal-viewport-height) !important;
	margin: 0 !important;
	padding:
		max(16px, env(safe-area-inset-top))
		max(14px, env(safe-area-inset-right))
		max(16px, env(safe-area-inset-bottom))
		max(14px, env(safe-area-inset-left)) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

html.ui-v2-enabled body .modal[role="dialog"].app-global-message-modal.in,
html.ui-v2-enabled body.customer-ui .modal[role="dialog"]:not(.app-global-message-modal).in {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

html.ui-v2-enabled body.customer-ui :is(
	#customer_prepayment_notice,
	.customer-takeaway-install-guide,
	.guest-feedback-prompt,
	#payment_method_container
) {
	align-items: center !important;
	justify-content: center !important;
}

html.ui-v2-enabled body .app-global-message-modal > .modal-dialog {
	--app-compact-popup-max-width: 520px;
}

html.ui-v2-enabled body.customer-ui :is(
	.customer-dialog__panel,
	.customer_prepayment_notice_panel
) {
	--app-compact-popup-max-width: 430px;
}

html.ui-v2-enabled body.customer-ui .customer-takeaway-install-sheet {
	--app-compact-popup-max-width: 480px;
}

html.ui-v2-enabled body.customer-ui .guest-feedback-card,
html.ui-v2-enabled body.customer-ui .customer-order-cancel-dialog {
	--app-compact-popup-max-width: 560px;
}

html.ui-v2-enabled body.customer-ui #payment_method_box {
	--app-compact-popup-max-width: 420px;
}

html.ui-v2-enabled body .app-global-message-modal > .modal-dialog,
html.ui-v2-enabled body.customer-ui :is(
	.modal[role="dialog"]:not(.app-global-message-modal) > .modal-dialog,
	.customer-dialog__panel,
	.customer_prepayment_notice_panel,
	.customer-takeaway-install-sheet,
	.guest-feedback-card,
	#payment_method_box
) {
	position: relative !important;
	inset: auto !important;
	box-sizing: border-box !important;
	inline-size: min(var(--app-compact-popup-max-width, 560px), 100%) !important;
	width: min(var(--app-compact-popup-max-width, 560px), 100%) !important;
	max-inline-size: var(--app-compact-popup-max-width, 560px) !important;
	max-width: var(--app-compact-popup-max-width, 560px) !important;
	block-size: auto !important;
	height: auto !important;
	max-block-size: calc(
		var(--app-modal-viewport-height)
		- 32px
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	) !important;
	max-height: calc(
		var(--app-modal-viewport-height)
		- 32px
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	) !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: auto !important;
	border-radius: 22px !important;
	transform: none !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Native customer dialogs are cards themselves rather than overlay wrappers. */
html.ui-v2-enabled body.customer-ui dialog:not(#app_modal_layer) {
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box !important;
	inline-size: min(var(--app-compact-popup-max-width, 560px), calc(100vw - 28px)) !important;
	width: min(var(--app-compact-popup-max-width, 560px), calc(100vw - 28px)) !important;
	max-inline-size: var(--app-compact-popup-max-width, 560px) !important;
	max-width: var(--app-compact-popup-max-width, 560px) !important;
	block-size: auto !important;
	height: auto !important;
	max-block-size: calc(
		var(--app-modal-viewport-height)
		- 32px
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	) !important;
	max-height: calc(
		var(--app-modal-viewport-height)
		- 32px
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	) !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: auto !important;
	border-radius: 22px !important;
	transform: none !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
}

html.ui-v2-enabled body.customer-ui dialog.customer-demo-cta-dialog {
	--app-compact-popup-max-width: 460px;
}

html.ui-v2-enabled body .app-global-message-modal .modal-content,
html.ui-v2-enabled body.customer-ui .customer-order-cancel-shell {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: calc(
		var(--app-modal-viewport-height)
		- 32px
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	border-radius: 22px !important;
	overflow: hidden !important;
}

html.ui-v2-enabled body .app-global-message-modal .modal-content {
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

html.ui-v2-enabled body.customer-ui .guest-feedback-card {
	overflow: hidden !important;
}

/* A centered card already sits inside the safe area; keep its chrome compact. */
html.ui-v2-enabled body .app-global-message-modal .modal-header,
html.ui-v2-enabled body.customer-ui :is(
	.customer-order-cancel-shell > header,
	.guest-feedback-head
) {
	padding-top: 16px !important;
	padding-right: 64px !important;
	padding-bottom: 16px !important;
}

html.ui-v2-enabled body .app-global-message-modal .modal-footer,
html.ui-v2-enabled body.customer-ui :is(
	.customer-order-cancel-shell > footer,
	.guest-feedback-footer
) {
	padding-bottom: 14px !important;
}

html.ui-v2-enabled body.customer-ui .customer-takeaway-install-close {
	right: 16px !important;
}
}