/* Mobile final responsive fix — v1.0.12
   Fixes:
   1. Burger icon rendering as a white square.
   2. Add/Edit Financial Report modal field overflow on mobile.
   3. Reporting Month field forcing horizontal scroll.
*/

@media (max-width: 900px) {
	/* Burger icon: force real 3-line hamburger, not a filled square. */
	body.ep-portal-page .ep-mobile-menu-toggle .ep-burger-lines,
	body.ep-portal-page button.ep-mobile-menu-toggle .ep-burger-lines {
		position: relative !important;
		display: block !important;
		width: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		height: 16px !important;
		min-height: 16px !important;
		max-height: 16px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
		color: #ffffff !important;
	}

	body.ep-portal-page .ep-mobile-menu-toggle .ep-burger-lines > span,
	body.ep-portal-page button.ep-mobile-menu-toggle .ep-burger-lines > span {
		position: absolute !important;
		left: 0 !important;
		display: block !important;
		width: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		height: 2px !important;
		min-height: 2px !important;
		max-height: 2px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	body.ep-portal-page .ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(1),
	body.ep-portal-page button.ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(1) {
		top: 1px !important;
	}

	body.ep-portal-page .ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(2),
	body.ep-portal-page button.ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(2) {
		top: 7px !important;
	}

	body.ep-portal-page .ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(3),
	body.ep-portal-page button.ep-mobile-menu-toggle .ep-burger-lines > span:nth-child(3) {
		top: 13px !important;
	}
}

@media (max-width: 700px) {
	/* Prevent page-level horizontal scroll caused by fixed modal/input widths. */
	html,
	body,
	body.ep-portal-page,
	body.ep-portal-page .site,
	body.ep-portal-page #page,
	body.ep-portal-page #content,
	body.ep-portal-page .site-content,
	body.ep-portal-page .content-area,
	body.ep-portal-page .entry-content,
	body.ep-portal-page .elementor,
	body.ep-portal-page .elementor-section,
	body.ep-portal-page .elementor-container,
	body.ep-portal-page .elementor-column,
	body.ep-portal-page .elementor-widget-wrap,
	body.ep-portal-page .elementor-widget-container,
	body.ep-portal-page .elementor-shortcode,
	body.ep-portal-page .ep-app-wrap,
	body.ep-portal-page .ep-app,
	body.ep-portal-page .ep-app-main {
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Modal should use the real viewport width, not wider. */
	body.ep-portal-page .ep-modal {
		position: fixed !important;
		inset: 0 !important;
		display: flex !important;
		align-items: flex-end !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal-backdrop {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		border-radius: 0 !important;
		overflow: hidden !important;
	}

	body.ep-portal-page .ep-modal-dialog {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		max-height: 92dvh !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 20px 20px 0 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		box-sizing: border-box !important;
		transform: translateY(18px) scale(.985);
	}

	body.ep-portal-page .ep-modal.is-open .ep-modal-dialog {
		transform: translateY(0) scale(1) !important;
	}

	body.ep-portal-page .ep-modal-header,
	body.ep-portal-page .ep-modal-form {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	body.ep-portal-page .ep-modal-header {
		gap: 12px !important;
	}

	body.ep-portal-page .ep-modal-header > div {
		width: auto !important;
		max-width: calc(100% - 54px) !important;
		min-width: 0 !important;
		overflow-wrap: anywhere !important;
	}

	body.ep-portal-page .ep-modal-form,
	body.ep-portal-page .ep-modal-form.ep-form {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	body.ep-portal-page .ep-modal-form .ep-form-grid,
	body.ep-portal-page .ep-modal .ep-form-grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 15px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal .ep-field,
	body.ep-portal-page .ep-modal .ep-field-full {
		grid-column: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal .ep-field label {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Strong input lock inside modal. */
	body.ep-portal-page .ep-modal .ep-field input,
	body.ep-portal-page .ep-modal .ep-field select,
	body.ep-portal-page .ep-modal .ep-field textarea,
	body.ep-portal-page .ep-modal-form input,
	body.ep-portal-page .ep-modal-form select,
	body.ep-portal-page .ep-modal-form textarea {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 12px 14px !important;
		border: 1px solid #d0d8e6 !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		box-shadow: none !important;
		color: #101a33 !important;
		font-family: Inter, system-ui, sans-serif !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		text-align: left !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		outline: none !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	/* Reporting Month / native month inputs need extra control on iPhone. */
	body.ep-portal-page .ep-modal input#ep_reporting_month,
	body.ep-portal-page .ep-modal input[name="reporting_month"],
	body.ep-portal-page .ep-modal input[type="month"] {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
		padding: 12px 14px !important;
		border: 1px solid #d0d8e6 !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		box-shadow: none !important;
		color: #101a33 !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		text-align: left !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-modal input#ep_reporting_month::-webkit-date-and-time-value,
	body.ep-portal-page .ep-modal input[name="reporting_month"]::-webkit-date-and-time-value,
	body.ep-portal-page .ep-modal input[type="month"]::-webkit-date-and-time-value {
		text-align: left !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ep-portal-page .ep-modal input#ep_reporting_month::-webkit-calendar-picker-indicator,
	body.ep-portal-page .ep-modal input[name="reporting_month"]::-webkit-calendar-picker-indicator,
	body.ep-portal-page .ep-modal input[type="month"]::-webkit-calendar-picker-indicator {
		margin-left: auto !important;
		max-width: 22px !important;
	}

	body.ep-portal-page .ep-modal .ep-calculation-preview,
	body.ep-portal-page .ep-modal .ep-modal-note,
	body.ep-portal-page .ep-modal .ep-modal-actions {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	body.ep-portal-page .ep-modal .ep-modal-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 10px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.ep-portal-page .ep-modal .ep-modal-actions .ep-button {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		white-space: normal !important;
	}
}

@media (max-width: 390px) {
	body.ep-portal-page .ep-modal-header,
	body.ep-portal-page .ep-modal-form {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	body.ep-portal-page .ep-modal-header h2,
	body.ep-portal-page .ep-modal-title {
		font-size: 31px !important;
		line-height: 1.05 !important;
	}

	body.ep-portal-page .ep-modal-header p {
		font-size: 14px !important;
	}
}