/* Mobile modal overflow fix — v1.0.11
   Prevents Add/Edit Financial Report popup fields from overflowing horizontally
   on mobile, especially the Reporting Month input.
*/

@media (max-width: 700px) {
	html,
	body.ep-portal-page {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	body.ep-portal-page.ep-modal-open {
		overflow-x: hidden !important;
	}

	body.ep-portal-page .ep-app,
	body.ep-portal-page .ep-app-wrap,
	body.ep-portal-page .ep-app-main {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Keep modal overlay and panel inside viewport. */
	body.ep-portal-page .ep-modal,
	body.ep-portal-page .ep-modal-overlay,
	body.ep-portal-page .ep-financial-modal {
		width: 100vw !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal-panel,
	body.ep-portal-page .ep-modal-card,
	body.ep-portal-page .ep-modal-content,
	body.ep-portal-page .ep-financial-modal-card {
		width: calc(100vw - 28px) !important;
		max-width: calc(100vw - 28px) !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Form grid must collapse to one safe column on mobile. */
	body.ep-portal-page .ep-modal .ep-form-grid,
	body.ep-portal-page .ep-financial-modal .ep-form-grid,
	body.ep-portal-page .ep-modal form,
	body.ep-portal-page .ep-financial-modal form {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal .ep-field,
	body.ep-portal-page .ep-financial-modal .ep-field,
	body.ep-portal-page .ep-modal .ep-form-row,
	body.ep-portal-page .ep-financial-modal .ep-form-row {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* Fix the Reporting Month field and other mobile inputs. */
	body.ep-portal-page .ep-modal input,
	body.ep-portal-page .ep-modal select,
	body.ep-portal-page .ep-modal textarea,
	body.ep-portal-page .ep-financial-modal input,
	body.ep-portal-page .ep-financial-modal select,
	body.ep-portal-page .ep-financial-modal textarea,
	body.ep-portal-page .ep-modal input[type="month"],
	body.ep-portal-page .ep-financial-modal input[type="month"],
	body.ep-portal-page .ep-modal input[type="date"],
	body.ep-portal-page .ep-financial-modal input[type="date"],
	body.ep-portal-page .ep-modal input[type="number"],
	body.ep-portal-page .ep-financial-modal input[type="number"],
	body.ep-portal-page .ep-modal input[name*="month"],
	body.ep-portal-page .ep-financial-modal input[name*="month"] {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	/* Safari/Chrome date/month picker can force an intrinsic width. */
	body.ep-portal-page .ep-modal input[type="month"],
	body.ep-portal-page .ep-financial-modal input[type="month"],
	body.ep-portal-page .ep-modal input[type="date"],
	body.ep-portal-page .ep-financial-modal input[type="date"] {
		-webkit-appearance: none !important;
		appearance: none !important;
		padding-right: 12px !important;
	}

	/* Prevent action buttons from forcing horizontal scroll. */
	body.ep-portal-page .ep-modal .ep-modal-actions,
	body.ep-portal-page .ep-financial-modal .ep-modal-actions,
	body.ep-portal-page .ep-modal .ep-form-actions,
	body.ep-portal-page .ep-financial-modal .ep-form-actions {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		gap: 10px !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal .ep-modal-actions .ep-button,
	body.ep-portal-page .ep-financial-modal .ep-modal-actions .ep-button,
	body.ep-portal-page .ep-modal .ep-form-actions .ep-button,
	body.ep-portal-page .ep-financial-modal .ep-form-actions .ep-button {
		flex: 1 1 140px !important;
		max-width: 100% !important;
		min-width: 0 !important;
		white-space: normal !important;
	}

	/* Avoid generic elements inside popup forcing the page width. */
	body.ep-portal-page .ep-modal *,
	body.ep-portal-page .ep-financial-modal * {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}
}

@media (max-width: 420px) {
	body.ep-portal-page .ep-modal-panel,
	body.ep-portal-page .ep-modal-card,
	body.ep-portal-page .ep-modal-content,
	body.ep-portal-page .ep-financial-modal-card {
		width: calc(100vw - 18px) !important;
		max-width: calc(100vw - 18px) !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	body.ep-portal-page .ep-modal .ep-modal-title,
	body.ep-portal-page .ep-financial-modal .ep-modal-title {
		max-width: calc(100vw - 74px) !important;
	}
}