/**
 * Mobile form bottom-sheet.
 * Non-modal <dialog open> + fixed overlay — never showModal() on mobile
 * (top-layer mis-positions on Chrome + Safari).
 */

@media (max-width: 47.999rem) {
	html.jms-dialog-open,
	html.jms-dialog-open body {
		overflow: hidden !important;
		overscroll-behavior: none;
		/* Do NOT set touch-action:none — it blocks scrolling inside the sheet. */
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode,
	.jms-dialog.jms-dialog--form.jms-sheet-mode[open] {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 10050 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: rgb(5 10 24 / 0) !important;
		box-shadow: none !important;
		color: var(--jms-color-text);
		opacity: 1 !important;
		transform: none !important;
		display: block !important;
		overflow: hidden !important;
		transition: background-color 0.28s ease !important;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode.is-dialog-shown {
		background: rgb(5 10 24 / 0.62) !important;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-dialog__panel {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		z-index: 10051 !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 88svh !important;
		margin: 0 !important;
		padding: 0 !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		border-radius: 1rem 1rem 0 0 !important;
		background: var(--jms-color-surface) !important;
		box-shadow: 0 -8px 32px rgb(5 10 24 / 0.22);
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		transform: translate3d(0, 105%, 0);
		transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode.is-dialog-shown .jms-dialog__panel {
		transform: translate3d(0, 0, 0);
	}

	/* Grabber — makes bottom-sheet affordance obvious. */
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-dialog__panel::before {
		content: "";
		display: block;
		width: 2.25rem;
		height: 0.25rem;
		margin: 0.55rem auto 0.15rem;
		border-radius: 999px;
		background: rgb(5 10 24 / 0.18);
		flex-shrink: 0;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-dialog__header {
		flex-shrink: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-dialog__body {
		flex: 1 1 auto;
		min-height: 0;
		min-width: 0;
		max-width: 100%;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
		box-sizing: border-box;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__scroll,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__row,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__footer,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field--half,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field--third,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field--forty,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field--sixty {
		min-width: 0 !important;
		flex: 1 1 calc(50% - 0.5rem);
		max-width: 100%;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__field--third {
		flex: 1 1 calc(33.333% - 0.55rem);
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__row--datetime {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.65rem !important;
		width: 100%;
		max-width: 100%;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__row--datetime .jms-form__field,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__row--datetime .jms-form__field--half {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__control {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form input:not([type="checkbox"]):not([type="radio"]),
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form select,
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form textarea {
		max-width: 100%;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form input[type="date"],
	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form input[type="time"] {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__check {
		width: 100%;
		max-width: 100%;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__check input[type="checkbox"] {
		width: 1.125rem !important;
		max-width: 1.125rem !important;
		flex: 0 0 1.125rem !important;
	}

	.jms-dialog.jms-dialog--form.jms-sheet-mode .jms-form__row[hidden],
	.jms-dialog.jms-dialog--form.jms-sheet-mode [hidden] {
		display: none !important;
	}
}