/**
 * Portal Website — Embedded overrides.
 *
 * Reuses the original portal runtime/markup while reframing it for a desktop
 * and responsive website context.
 *
 * @package Acro_Manager
 */

.acro-portal-website {
	width: 100%;
	max-width: 1240px;
	margin: var( --sp-4 ) auto var( --sp-6 );
	padding: 0 var( --sp-4 );
}

.acro-portal-website .acro-portal {
	width: 100%;
	background: transparent;
}

.acro-portal-website .acro-portal__app {
	min-height: 760px;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	background: transparent;
}

/* Default spacing for non app-area screens (login, choice, onboarding). */
.acro-portal-website .acro-portal__screen {
	padding: 0;
}

.acro-portal-website .acro-portal__content {
	padding-bottom: var( --sp-6 );
}

/* Login card framed inside page layout. */
.acro-portal-website .acro-login {
	max-width: 620px;
	margin: var( --sp-3 ) auto;
	padding: 0px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.acro-portal-website .acro-login__actions {
	gap: var( --sp-3 );
}

.acro-portal-website .acro-login__apk-download {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	border-radius: var( --r-md );
	border: 1px solid rgba( 15, 118, 110, .62 );
	background: linear-gradient( 135deg, color-mix( in srgb, var( --portal-primary ) 92%, #0f766e ) 0%, color-mix( in srgb, var( --portal-primary ) 72%, #14b8a6 ) 100% );
	box-shadow: 0 8px 16px rgba( 15, 118, 110, .22 );
	color: #ffffff;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.acro-portal-website .acro-login__apk-download:hover,
.acro-portal-website .acro-login__apk-download:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 10px 20px rgba( 15, 118, 110, .28 );
	filter: saturate( 1.03 );
	text-decoration: none;
	outline: none;
}

.acro-portal-website .acro-login__apk-download:active {
	transform: translateY( 0 );
}

.acro-portal-website .acro-login__apk-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, .2 );
	color: #ffffff;
	flex-shrink: 0;
}

.acro-portal-website .acro-login__apk-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.acro-portal-website .acro-login__apk-title {
	font-size: var( --portal-fs-md );
	font-weight: 700;
	color: #ffffff;
}

.acro-portal-website .acro-login__apk-meta {
	font-size: var( --portal-fs-xs );
	margin-top: 3px;
	color: rgba( 255, 255, 255, .86 );
}

/* Portal choice in independent stacked rows. */
.acro-portal-website .acro-portal-choice {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --sp-4 );
	max-width: 520px;
	margin: 0 auto;
}

/* Desktop/tablet app layout: sidebar nav + content panel. */
@media ( min-width: 769px ) {
	.acro-portal-website .acro-portal__screen[data-area].is-active {
		display: grid;
		grid-template-columns: 200px minmax( 0, 1fr );
		grid-template-rows: var( --portal-top-bar-h ) minmax( 0, 1fr );
		min-height: 760px;
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__topbar {
		grid-column: 1 / -1;
		grid-row: 1;
		position: sticky;
		top: 0;
		z-index: 20;
		border-bottom: 1px solid rgba( 255, 255, 255, .12 );
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__bottom-nav {
		grid-column: 1;
		grid-row: 2;
		position: static;
		left: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: none;
		height: auto;
		padding: var( --sp-4 ) var( --sp-3 );
		display: flex;
		flex-direction: column;
		align-items: stretch;
		border-top: 0;
		border-left: 0;
		border-right: 0;
		background: transparent;
		gap: var( --sp-2 );
		border-radius: 0;
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__bottom-nav .acro-portal__bottom-nav-btn {
		flex: 0 0 auto;
		height: 46px;
		min-height: 46px;
		border-radius: 0;
		padding: 0 var( --sp-3 );
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: var( --sp-2 );
		font-size: var( --portal-fs-sm );
		font-weight: 600;
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__bottom-nav .acro-portal__bottom-nav-btn .nav-icon {
		width: 20px;
		height: 20px;
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__bottom-nav .acro-portal__bottom-nav-btn.is-active {
		background: var( --portal-surface );
	}

	.acro-portal-website .acro-portal__screen[data-area].is-active > .acro-portal__content {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: var( --sp-5 );
		overflow-y: auto;
		background: transparent;
	}

	.acro-portal-website .acro-athlete-form-section {
		padding: var( --sp-3 );
		border: 1px solid var( --portal-border );
		border-radius: var( --r-lg );
		background: rgba( 255, 255, 255, .72 );
		-webkit-backdrop-filter: blur( 10px );
		backdrop-filter: blur( 10px );
		box-shadow: 0 12px 28px rgba( 15, 23, 42, .06 );
	}

	.acro-portal-website .acro-athlete-form-section__header {
		margin-bottom: var( --sp-3 );
	}

	.acro-portal-website .acro-inline-edit-list--grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --sp-3 );
	}

	.acro-portal-website .acro-inline-edit-list--grid .acro-inline-edit {
		margin-bottom: 0;
	}

	.acro-portal-website .acro-sheet-meta-grid--compact {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		margin-bottom: 0;
	}

	/* Rebalance dashboard cards for website layout. */
	.acro-portal-website .acro-kpi-strip {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		align-items: stretch;
	}

	.acro-portal-website .acro-dashboard-kpi-scroll {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		gap: var( --sp-3 );
	}

	.acro-portal-website .acro-kpi {
		padding: var( --sp-3 );
		min-height: 0;
	}

	.acro-portal-website .acro-dashboard-kpi {
		min-height: 112px;
	}

	/* Improve desktop readability inside data panels/cards. */
	.acro-portal-website .acro-card__title,
	.acro-portal-website .acro-section-title {
		font-size: calc( var( --portal-fs-lg ) * 1.02 );
	}

	.acro-portal-website .acro-kpi__value,
	.acro-portal-website .acro-dashboard-kpi__value {
		font-size: calc( var( --portal-fs-xl ) * 0.8 );
	}

	.acro-portal-website .acro-kpi__value--method,
	.acro-portal-website .acro-dashboard-kpi__value--method {
		font-size: var( --portal-fs-lg );
	}

	.acro-portal-website .acro-login__apk-download {
		margin-top: var( --sp-4 );
	}
}

@media ( min-width: 769px ) and ( max-width: 1100px ) {
	.acro-portal-website .acro-sheet-meta-grid--compact {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Keep sticky topbar clear of WP admin bar when logged in. */
body.admin-bar .acro-portal-website .acro-portal__topbar {
	top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .acro-portal-website .acro-portal__topbar {
		top: 46px;
	}
}

@media ( max-width: 768px ) {
	.acro-portal-website {
		max-width: 100%;
		padding: 0;
		margin: var( --sp-4 ) 0;
	}

	.acro-portal-website .acro-portal__app {
		min-height: 78dvh;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
	}

	.acro-portal-website .acro-login {
		max-width: 100%;
		margin: 0;
		padding: var( --sp-5 ) var( --sp-4 );
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.acro-portal-website .acro-portal-choice {
		grid-template-columns: 1fr;
	}

	.acro-portal-website .acro-dashboard-kpi-scroll,
	.acro-portal-website .acro-kpi-strip {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.acro-portal-website .acro-login__apk-download {
		padding: 10px 12px;
	}

	.acro-portal-website .acro-login__apk-title {
		font-size: var( --portal-fs-sm );
	}

	/* On mobile, preserve native portal fixed bottom nav UX. */
	.acro-portal-website .acro-portal__bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
	}

	.acro-portal-website .acro-portal__content {
		padding-bottom: calc( var( --portal-bottom-nav-h ) + var( --sp-4 ) );
	}
}