/* Sticky desktop sidebar — v0.2.8 */
@media (min-width: 901px) {
	.ep-app {
		align-items: start;
		overflow: visible;
	}

	.ep-app-sidebar {
		position: sticky;
		top: 16px;
		align-self: start;
		width: 100%;
		height: calc(100vh - 32px);
		min-height: 640px;
		max-height: calc(100vh - 32px);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 24px 0 0 24px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .24) transparent;
	}

	.ep-app-sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.ep-app-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}

	.ep-app-sidebar::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: rgba(255, 255, 255, .24);
	}

	.ep-app-main {
		min-height: 850px;
		border-radius: 0 24px 24px 0;
	}

	body.admin-bar .ep-app-sidebar {
		top: 48px;
		height: calc(100vh - 64px);
		max-height: calc(100vh - 64px);
	}
}

@media (min-width: 901px) and (max-height: 720px) {
	.ep-app-sidebar {
		min-height: 0;
	}
}

/* Full-width container and mobile burger menu — v0.2.11 */

/* Keep the original outer and inner spacing; only remove the desktop width cap. */
.ep-app-wrap {
	max-width: none !important;
}

/* The mobile toolbar and drawer controls are hidden on desktop. */
.ep-mobile-toolbar,
.ep-mobile-menu-toggle,
.ep-mobile-menu-close,
.ep-mobile-menu-backdrop {
	display: none;
}

@media (max-width: 900px) {
	/* Replace the previous hidden sidebar with an off-canvas drawer. */
	.ep-app-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 100002;
		display: flex;
		width: min(84vw, 310px);
		height: 100dvh;
		max-height: 100dvh;
		padding-top: 22px;
		overflow-x: hidden;
		overflow-y: auto;
		border-radius: 0 20px 20px 0;
		box-shadow: 24px 0 55px rgba(5, 12, 28, .28);
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform .24s ease, visibility .24s ease;
	}

	body.admin-bar .ep-app-sidebar {
		top: var(--wp-admin--admin-bar--height, 46px);
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
	}

	.ep-mobile-toolbar {
		position: sticky;
		top: 0;
		z-index: 80;
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 18px;
		padding: 0;
		background: transparent;
	}

	body.admin-bar .ep-mobile-toolbar {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	.ep-mobile-toolbar > strong {
		min-width: 0;
		overflow: hidden;
		color: var(--ep-text);
		font-size: 16px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ep-mobile-menu-toggle {
		display: inline-grid;
		place-items: center;
		width: 42px;
		height: 42px;
		flex: 0 0 42px;
		padding: 0;
		border: 0;
		border-radius: 11px;
		background: var(--ep-sidebar);
		color: #fff;
		cursor: pointer;
		box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
	}

	.ep-burger-lines {
		display: grid;
		gap: 4px;
		width: 19px;
	}

	.ep-burger-lines > span {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
	}

	.ep-mobile-menu-close {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 10px;
		background: rgba(255, 255, 255, .07);
		color: #fff;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}

	.ep-mobile-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: rgba(6, 12, 26, .58);
		opacity: 0;
		visibility: hidden;
		cursor: pointer;
		transition: opacity .24s ease, visibility .24s ease;
	}

	body.ep-mobile-menu-open {
		overflow: hidden !important;
	}

	body.ep-mobile-menu-open .ep-app-sidebar {
		transform: translateX(0);
		visibility: visible;
	}

	body.ep-mobile-menu-open .ep-mobile-menu-backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* Avoid showing the old mobile business-name label twice. */
	.ep-mobile-brand {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ep-app-sidebar,
	.ep-mobile-menu-backdrop {
		transition: none !important;
	}
}

/* True edge-to-edge outer portal — v0.2.12 */
/* Only the OUTSIDE wrapper is reset. Internal dashboard padding remains unchanged. */
body.ep-dashboard-page {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ep-bg) !important;
}

body.ep-dashboard-page .ep-app-wrap {
	width: 100vw !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	padding: 0 !important;
}

body.ep-dashboard-page .ep-app {
	width: 100%;
	min-height: 100vh;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

@media (min-width: 901px) {
	body.ep-dashboard-page .ep-app-sidebar {
		top: 0;
		height: 100vh;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	body.ep-dashboard-page .ep-app-main {
		min-height: 100vh;
		border-radius: 0;
	}

	body.ep-dashboard-page.admin-bar .ep-app {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	body.ep-dashboard-page.admin-bar .ep-app-sidebar {
		top: var(--wp-admin--admin-bar--height, 32px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	body.ep-dashboard-page.admin-bar .ep-app-main {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}
}

@media (max-width: 900px) {
	body.ep-dashboard-page .ep-app-wrap {
		width: 100vw !important;
		margin: 0 !important;
	}

	body.ep-dashboard-page .ep-app,
	body.ep-dashboard-page .ep-app-main {
		min-height: 100vh;
		border-radius: 0;
	}

	body.ep-dashboard-page.admin-bar .ep-app,
	body.ep-dashboard-page.admin-bar .ep-app-main {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
	}

	/* The menu remains a rounded slide-out drawer; only the page wrapper is edge-to-edge. */
	body.ep-dashboard-page .ep-app-sidebar {
		border-radius: 0 20px 20px 0;
	}
}

/* Remove WordPress theme wrapper spacing only — v0.2.13 */
body.ep-dashboard-page #page,
body.ep-dashboard-page .site,
body.ep-dashboard-page .site-content,
body.ep-dashboard-page .content-area,
body.ep-dashboard-page main:not(.ep-app-main),
body.ep-dashboard-page .site-main:not(.ep-app-main),
body.ep-dashboard-page article,
body.ep-dashboard-page .entry-content,
body.ep-dashboard-page .wp-site-blocks,
body.ep-dashboard-page .wp-block-post-content,
body.ep-dashboard-page .elementor,
body.ep-dashboard-page .elementor-section-wrap,
body.ep-dashboard-page .elementor-section,
body.ep-dashboard-page .elementor-container,
body.ep-dashboard-page .elementor-column,
body.ep-dashboard-page .elementor-column-wrap,
body.ep-dashboard-page .elementor-widget-wrap,
body.ep-dashboard-page .elementor-widget-shortcode,
body.ep-dashboard-page .elementor-widget-shortcode > .elementor-widget-container,
body.ep-dashboard-page .e-con,
body.ep-dashboard-page .e-con-inner {
	width: 100% !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}

/* Remove block-theme flow spacing before the shortcode wrapper. */
body.ep-dashboard-page .wp-site-blocks > *,
body.ep-dashboard-page .entry-content > *,
body.ep-dashboard-page .wp-block-post-content > *,
body.ep-dashboard-page :where(.is-layout-flow) > *,
body.ep-dashboard-page :where(.is-layout-constrained) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Keep the portal's own internal content padding. */
body.ep-dashboard-page .ep-app-main {
	padding: 30px;
}

@media (max-width: 1180px) {
	body.ep-dashboard-page .ep-app-main {
		padding: 24px;
	}
}

@media (max-width: 650px) {
	body.ep-dashboard-page .ep-app-main {
		padding: 18px 13px 24px;
	}
}

/* Fixed sidebar without content overflow — v0.2.14 */
:root {
	--ep-fixed-sidebar-width: 210px;
}

html {
	overflow-x: hidden;
}

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

@media (min-width: 901px) {
	body.ep-portal-page .ep-app-wrap {
		width: 100% !important;
		max-width: none !important;
		overflow: visible !important;
	}

	body.ep-portal-page .ep-app {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		overflow: visible !important;
	}

	body.ep-portal-page .ep-app-sidebar {
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 9999;
		width: var(--ep-fixed-sidebar-width) !important;
		height: 100vh;
		min-height: 0;
		max-height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		border-radius: 0;
	}

	body.admin-bar.ep-portal-page .ep-app-sidebar {
		top: var(--wp-admin--admin-bar--height, 32px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	/*
	 * Use the left margin to reserve sidebar space.
	 * Do not use width: calc(...), because padding and parent widths
	 * can make the content wider than the viewport.
	 */
	body.ep-portal-page .ep-app-main {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		min-height: 100vh;
		margin-left: var(--ep-fixed-sidebar-width) !important;
		overflow-x: hidden;
		box-sizing: border-box;
		border-radius: 0;
	}

	body.admin-bar.ep-portal-page .ep-app-main {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	/* Allow every dashboard grid item to shrink inside the remaining width. */
	body.ep-portal-page .ep-kpi-grid,
	body.ep-portal-page .ep-primary-grid,
	body.ep-portal-page .ep-secondary-grid,
	body.ep-portal-page .ep-month-tabs,
	body.ep-portal-page .ep-card,
	body.ep-portal-page .ep-table-wrap,
	body.ep-portal-page .ep-chart-large,
	body.ep-portal-page .ep-chart-medium,
	body.ep-portal-page .ep-donut-layout {
		min-width: 0;
		max-width: 100%;
	}

	body.ep-portal-page canvas,
	body.ep-portal-page img,
	body.ep-portal-page svg {
		max-width: 100%;
	}

	/* Improve the card layout before it becomes too narrow. */
	@media (max-width: 1180px) {
		body.ep-portal-page .ep-kpi-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		body.ep-portal-page .ep-primary-grid,
		body.ep-portal-page .ep-secondary-grid {
			grid-template-columns: 1fr;
		}
	}
}

/* Mobile continues to use the existing burger-menu drawer. */
@media (max-width: 900px) {
	body.ep-portal-page .ep-app-main {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		overflow-x: hidden;
	}

	body.ep-portal-page .ep-kpi-grid,
	body.ep-portal-page .ep-primary-grid,
	body.ep-portal-page .ep-secondary-grid {
		min-width: 0;
		max-width: 100%;
	}
}

/* Definitive fixed-sidebar width containment — v0.2.16 */
:root {
	--ep-fixed-sidebar-width: 210px;
}

html,
body.ep-portal-page {
	max-width: 100%;
	overflow-x: clip !important;
}

@media (min-width: 901px) {
	body.ep-portal-page .ep-app-wrap {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/*
	 * Reserve sidebar space inside the application container.
	 * Because box-sizing is border-box, the padding is included
	 * within the viewport width and cannot create right overflow.
	 */
	body.ep-portal-page .ep-app {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 100vh;
		margin: 0 !important;
		padding-left: var(--ep-fixed-sidebar-width) !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	body.ep-portal-page .ep-app-sidebar {
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 9999;
		width: var(--ep-fixed-sidebar-width) !important;
		height: 100vh;
		min-height: 0 !important;
		max-height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		border-radius: 0;
	}

	body.admin-bar.ep-portal-page .ep-app-sidebar {
		top: var(--wp-admin--admin-bar--height, 32px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	/*
	 * The main content now fills only the app content box,
	 * which already excludes the sidebar width.
	 */
	body.ep-portal-page .ep-app-main {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 100vh;
		margin: 0 !important;
		overflow-x: hidden;
		box-sizing: border-box !important;
		border-radius: 0;
	}

	body.admin-bar.ep-portal-page .ep-app-main {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	body.ep-portal-page .ep-app-main > *,
	body.ep-portal-page .ep-app-header,
	body.ep-portal-page .ep-month-tabs,
	body.ep-portal-page .ep-kpi-grid,
	body.ep-portal-page .ep-primary-grid,
	body.ep-portal-page .ep-secondary-grid,
	body.ep-portal-page .ep-card,
	body.ep-portal-page .ep-table-wrap,
	body.ep-portal-page .ep-form,
	body.ep-portal-page .ep-section-heading {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.ep-portal-page .ep-primary-grid,
	body.ep-portal-page .ep-secondary-grid {
		grid-template-columns: minmax(0, 1.85fr) minmax(260px, .95fr);
	}

	body.ep-portal-page canvas,
	body.ep-portal-page img,
	body.ep-portal-page svg {
		max-width: 100%;
	}

	@media (max-width: 1180px) {
		body.ep-portal-page .ep-kpi-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		body.ep-portal-page .ep-primary-grid,
		body.ep-portal-page .ep-secondary-grid {
			grid-template-columns: 1fr;
		}
	}
}

@media (max-width: 900px) {
	body.ep-portal-page .ep-app {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
	}

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

/* Restore portal card padding after theme overrides — v0.2.17 */
body.ep-portal-page .ep-kpi-card {
	padding: 18px 18px 17px !important;
}

body.ep-portal-page .ep-cashflow-card,
body.ep-portal-page .ep-expense-card,
body.ep-portal-page .ep-profit-card,
body.ep-portal-page .ep-recent-card {
	padding: 20px !important;
}

body.ep-portal-page .ep-panel-heading {
	margin-bottom: 14px !important;
}

body.ep-portal-page .ep-chart-large,
body.ep-portal-page .ep-chart-medium,
body.ep-portal-page .ep-donut-layout {
	box-sizing: border-box;
}

body.ep-portal-page .ep-recent-row {
	padding: 14px 0 !important;
}

@media (max-width: 650px) {
	body.ep-portal-page .ep-kpi-card {
		padding: 16px !important;
	}

	body.ep-portal-page .ep-cashflow-card,
	body.ep-portal-page .ep-expense-card,
	body.ep-portal-page .ep-profit-card,
	body.ep-portal-page .ep-recent-card {
		padding: 17px !important;
	}
}

/* Complete portal responsive layer — v0.2.18 */

/* Prevent any component from forcing the viewport wider. */
body.ep-portal-page,
body.ep-portal-page .ep-app-wrap,
body.ep-portal-page .ep-app,
body.ep-portal-page .ep-app-main {
	max-width: 100%;
}

body.ep-portal-page .ep-app-main > *,
body.ep-portal-page .ep-card,
body.ep-portal-page .ep-form,
body.ep-portal-page .ep-table-wrap,
body.ep-portal-page .ep-month-tabs {
	min-width: 0;
}

body.ep-portal-page button,
body.ep-portal-page a,
body.ep-portal-page input,
body.ep-portal-page select,
body.ep-portal-page textarea {
	touch-action: manipulation;
}

/* Tablet and mobile navigation drawer. */
@media (max-width: 900px) {
	html,
	body.ep-portal-page {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden !important;
	}

	body.ep-portal-page .ep-app-wrap {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ep-portal-page .ep-app {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 100dvh;
		padding-left: 0 !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible !important;
	}

	body.ep-portal-page .ep-app-main {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 100dvh;
		margin: 0 !important;
		padding: 20px !important;
		overflow-x: hidden !important;
		border-radius: 0;
	}

	/* Off-canvas sidebar controlled by the existing burger-menu JavaScript. */
	body.ep-portal-page .ep-app-sidebar {
		position: fixed !important;
		inset: 0 auto 0 0;
		z-index: 100002;
		display: flex !important;
		width: min(86vw, 320px) !important;
		height: 100dvh;
		max-height: 100dvh;
		padding: 22px 16px 18px;
		overflow-x: hidden;
		overflow-y: auto;
		border-radius: 0 20px 20px 0;
		box-shadow: 24px 0 55px rgba(5, 12, 28, .30);
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform .24s ease, visibility .24s ease;
	}

	body.admin-bar.ep-portal-page .ep-app-sidebar {
		top: var(--wp-admin--admin-bar--height, 46px);
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
	}

	body.ep-mobile-menu-open .ep-app-sidebar {
		transform: translateX(0);
		visibility: visible;
	}

	body.ep-portal-page .ep-mobile-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: rgba(6, 12, 26, .58);
		opacity: 0;
		visibility: hidden;
		transition: opacity .24s ease, visibility .24s ease;
	}

	body.ep-mobile-menu-open .ep-mobile-menu-backdrop {
		opacity: 1;
		visibility: visible;
	}

	body.ep-mobile-menu-open {
		overflow: hidden !important;
	}

	body.ep-portal-page .ep-mobile-toolbar {
		position: sticky;
		top: 0;
		z-index: 80;
		display: flex;
		align-items: center;
		gap: 12px;
		margin: -20px -20px 18px;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(21, 32, 55, .08);
		background: rgba(238, 243, 251, .95);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	body.admin-bar.ep-portal-page .ep-mobile-toolbar {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	body.ep-portal-page .ep-mobile-toolbar > strong {
		min-width: 0;
		overflow: hidden;
		color: var(--ep-text);
		font-size: 16px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.ep-portal-page .ep-mobile-menu-toggle {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		padding: 0;
		border: 0;
		border-radius: 11px;
		background: var(--ep-sidebar);
		color: #fff;
		box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
		cursor: pointer;
	}

	body.ep-portal-page .ep-mobile-menu-close {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 10px;
		background: rgba(255, 255, 255, .07);
		color: #fff;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}

	/* Header and actions. */
	body.ep-portal-page .ep-app-header {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 16px;
		margin-bottom: 18px;
	}

	body.ep-portal-page .ep-app-header h1 {
		font-size: clamp(27px, 6vw, 35px);
	}

	body.ep-portal-page .ep-header-actions {
		width: 100%;
	}

	body.ep-portal-page .ep-header-actions .ep-button,
	body.ep-portal-page .ep-header-actions .ep-export-button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 46px;
	}

	/* Horizontal month selector suitable for touch. */
	body.ep-portal-page .ep-month-tabs {
		display: flex !important;
		width: 100%;
		gap: 7px;
		padding: 7px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.ep-portal-page .ep-month-tabs::-webkit-scrollbar {
		display: none;
	}

	body.ep-portal-page .ep-month-tabs a {
		flex: 0 0 68px;
		min-height: 44px;
		scroll-snap-align: center;
	}

	/* Dashboard grid. */
	body.ep-portal-page .ep-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 13px;
	}

	body.ep-portal-page .ep-primary-grid,
	body.ep-portal-page .ep-secondary-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px;
	}

	body.ep-portal-page .ep-kpi-value {
		font-size: clamp(25px, 5vw, 32px);
		overflow-wrap: anywhere;
	}

	body.ep-portal-page .ep-cashflow-card,
	body.ep-portal-page .ep-expense-card,
	body.ep-portal-page .ep-profit-card,
	body.ep-portal-page .ep-recent-card {
		width: 100%;
		padding: 18px !important;
	}

	body.ep-portal-page .ep-chart-large {
		height: 270px;
	}

	body.ep-portal-page .ep-chart-medium {
		height: 210px;
	}

	body.ep-portal-page .ep-donut-layout {
		grid-template-columns: minmax(160px, 1fr) minmax(120px, .8fr);
		min-height: 250px;
	}

	body.ep-portal-page .ep-chart-donut {
		height: 185px;
	}

	/* Shared portal forms, history, and profile pages. */
	body.ep-portal-page .ep-section-heading,
	body.ep-portal-page .ep-heading-row {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 14px;
	}

	body.ep-portal-page .ep-section-heading .ep-button,
	body.ep-portal-page .ep-heading-row .ep-button,
	body.ep-portal-page .ep-heading-row .ep-export-button {
		min-height: 46px;
	}

	body.ep-portal-page .ep-form {
		padding: 20px !important;
	}

	body.ep-portal-page .ep-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	body.ep-portal-page .ep-logo-uploader {
		align-items: flex-start;
	}

	body.ep-portal-page .ep-table-wrap {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Modal becomes a safe, scrollable mobile panel. */
	body.ep-portal-page .ep-modal {
		padding: 16px;
	}

	body.ep-portal-page .ep-modal-dialog {
		width: min(100%, 680px);
		max-height: calc(100dvh - 32px);
		overflow-y: auto;
		border-radius: 18px;
	}

	body.ep-portal-page .ep-modal-header,
	body.ep-portal-page .ep-modal-form {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Small phones. */
@media (max-width: 620px) {
	body.ep-portal-page .ep-app-main {
		padding: 16px 12px 22px !important;
	}

	body.ep-portal-page .ep-mobile-toolbar {
		margin: -16px -12px 16px;
		padding: 10px 12px;
	}

	body.ep-portal-page .ep-app-header {
		display: block;
	}

	body.ep-portal-page .ep-app-header h1 {
		font-size: clamp(25px, 8vw, 32px);
		line-height: 1.1;
	}

	body.ep-portal-page .ep-header-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 9px;
		margin-top: 15px;
	}

	body.ep-portal-page .ep-button,
	body.ep-portal-page .ep-export-button {
		padding: 11px 12px;
		font-size: 13px;
	}

	body.ep-portal-page .ep-kpi-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px;
	}

	body.ep-portal-page .ep-kpi-card {
		padding: 16px !important;
	}

	body.ep-portal-page .ep-kpi-top {
		margin-bottom: 11px;
	}

	body.ep-portal-page .ep-kpi-value {
		font-size: clamp(28px, 9vw, 35px);
	}

	body.ep-portal-page .ep-panel-heading {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 9px;
	}

	body.ep-portal-page .ep-chart-key {
		flex-wrap: wrap;
		gap: 10px;
	}

	body.ep-portal-page .ep-chart-large {
		height: 235px;
	}

	body.ep-portal-page .ep-chart-medium {
		height: 190px;
	}

	body.ep-portal-page .ep-donut-layout {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px;
		min-height: 0;
	}

	body.ep-portal-page .ep-chart-donut {
		height: 180px;
	}

	body.ep-portal-page .ep-expense-legend {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.ep-portal-page .ep-recent-entry {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	body.ep-portal-page .ep-recent-entry > strong {
		grid-column: 2;
		justify-self: start;
		white-space: normal;
	}

	body.ep-portal-page .ep-form {
		padding: 16px !important;
	}

	body.ep-portal-page .ep-form-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 15px;
	}

	body.ep-portal-page .ep-field-full {
		grid-column: auto;
	}

	body.ep-portal-page .ep-form-actions {
		display: grid;
		margin-top: 20px;
	}

	body.ep-portal-page .ep-form-actions .ep-button {
		width: 100%;
		min-height: 48px;
	}

	body.ep-portal-page .ep-logo-uploader {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 13px;
		padding: 14px;
	}

	body.ep-portal-page .ep-logo-preview {
		width: 72px;
		height: 72px;
	}

	body.ep-portal-page .ep-inline-empty {
		align-items: stretch;
		flex-direction: column;
	}

	/* Convert history tables into readable stacked cards. */
	body.ep-portal-page .ep-table,
	body.ep-portal-page .ep-table tbody,
	body.ep-portal-page .ep-table tr,
	body.ep-portal-page .ep-table td {
		display: block;
		width: 100%;
	}

	body.ep-portal-page .ep-table thead {
		display: none;
	}

	body.ep-portal-page .ep-table tr {
		margin-bottom: 12px;
		padding: 12px 14px;
		border: 1px solid var(--ep-border);
		border-radius: 13px;
		background: var(--ep-card);
		box-shadow: 0 8px 22px rgba(30, 45, 80, .05);
	}

	body.ep-portal-page .ep-table tr:last-child {
		margin-bottom: 0;
	}

	body.ep-portal-page .ep-table td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		padding: 8px 0 !important;
		border: 0;
		white-space: normal;
		text-align: right;
	}

	body.ep-portal-page .ep-table td::before {
		content: attr(data-label);
		flex: 0 0 42%;
		color: var(--ep-muted);
		font-weight: 800;
		text-align: left;
	}

	body.ep-portal-page .ep-modal {
		align-items: flex-end;
		padding: 0;
	}

	body.ep-portal-page .ep-modal-dialog {
		width: 100%;
		max-width: none;
		max-height: 92dvh;
		margin: 0;
		border-radius: 20px 20px 0 0;
	}

	body.ep-portal-page .ep-modal-header,
	body.ep-portal-page .ep-modal-form {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.ep-portal-page .ep-modal-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	body.ep-portal-page .ep-modal-actions .ep-button {
		width: 100%;
		min-height: 48px;
	}
}

/* Very narrow phones. */
@media (max-width: 390px) {
	body.ep-portal-page .ep-header-actions {
		grid-template-columns: 1fr;
	}

	body.ep-portal-page .ep-month-tabs a {
		flex-basis: 62px;
	}

	body.ep-portal-page .ep-expense-legend {
		grid-template-columns: 1fr;
	}

	body.ep-portal-page .ep-logo-uploader {
		grid-template-columns: 1fr;
	}

	body.ep-portal-page .ep-logo-preview {
		width: 78px;
		height: 78px;
	}

	body.ep-portal-page .ep-table td {
		display: grid;
		grid-template-columns: 1fr;
		gap: 4px;
		text-align: left;
	}

	body.ep-portal-page .ep-table td::before {
		flex-basis: auto;
	}
}

/* Respect devices that reduce animations. */
@media (prefers-reduced-motion: reduce) {
	body.ep-portal-page .ep-app-sidebar,
	body.ep-portal-page .ep-mobile-menu-backdrop {
		transition: none !important;
	}
}