/**
 * mySencargo portal shell — Phase 1 foundation
 * Single spacing and layout system for desktop web, mobile browser, and PWA.
 * Component styling (cards, profile, forms) lives in sencargo-global.css.
 */

.sc-portal-shell {
	--sc-portal-max-width: 920px;
	--sc-portal-page-bg: #e8ecf1;
	--sc-portal-gutter-x: 16px;
	--sc-portal-gutter-bottom: 32px;
	--sc-portal-gutter-bottom-mobile: calc(78px + env(safe-area-inset-bottom, 0));
	--sc-portal-feed-bg: #ffffff;
	--sc-portal-feed-radius: 16px;
	--sc-portal-feed-padding-x: 28px;
	--sc-portal-feed-padding-y: 36px;
	--sc-portal-feed-overlap: 16px;
	--sc-portal-line: rgba(17, 24, 39, 0.08);
	--sc-portal-text: #1f2937;
	--sc-portal-muted: #6b7280;
	box-sizing: border-box;
}

.sc-portal-shell.sc-portal-page {
	max-width: var(--sc-portal-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sc-portal-gutter-x);
	padding-right: var(--sc-portal-gutter-x);
	padding-bottom: var(--sc-portal-gutter-bottom-mobile);
	background: var(--sc-portal-page-bg);
	min-height: 100vh;
}

@media (min-width: 901px) {
	.sc-portal-shell.sc-portal-page {
		padding-bottom: var(--sc-portal-gutter-bottom);
	}
}

.sc-portal-shell.sc-portal-page .sc-portal-hero {
	margin-left: calc(var(--sc-portal-gutter-x) * -1);
	margin-right: calc(var(--sc-portal-gutter-x) * -1);
}

/* One white content surface for every portal role and mode */
.sc-portal-shell .sc-tab-content.sc-portal-feed,
.sc-portal-shell .sc-native-main.sc-portal-feed {
	background: var(--sc-portal-feed-bg);
	border-radius: var(--sc-portal-feed-radius) var(--sc-portal-feed-radius) 0 0;
	margin-top: calc(var(--sc-portal-feed-overlap) * -1);
	position: relative;
	z-index: 2;
	border: 1px solid var(--sc-portal-line);
	border-bottom: none;
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04), 0 12px 40px rgba(17, 24, 39, 0.06);
	padding: 24px 20px 32px;
	min-height: 420px;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.sc-portal-shell .sc-tab-content.sc-portal-feed,
	.sc-portal-shell .sc-native-main.sc-portal-feed {
		padding: var(--sc-portal-feed-padding-y) var(--sc-portal-feed-padding-x);
		border-radius: var(--sc-portal-feed-radius);
		border-bottom: 1px solid var(--sc-portal-line);
	}
}

.sc-portal-shell .sc-portal-main-panel {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Alerts band — sits between hero and feed; must stay above overlapping feed panel */
.sc-portal-alerts-strip {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: var(--sc-portal-max-width);
	margin: 0 auto;
	padding: 0 var(--sc-portal-gutter-x) 12px;
	box-sizing: border-box;
}

.sc-portal-alerts-strip--centered {
	display: flex;
	justify-content: center;
}

.sc-portal-alerts-strip--centered .sc-portal-notices {
	width: 100%;
	max-width: min(560px, 100%);
	margin: 0 auto;
	text-align: center;
}

.sc-portal-alerts-strip .sc-portal-notices {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--sc-portal-line);
	border-radius: 12px;
	padding: 10px 16px 8px;
	box-shadow: 0 2px 10px rgba(17, 24, 39, 0.07);
}

.sc-portal-alerts-strip .sc-portal-notices__track {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 2.75em;
	text-align: center;
}

.sc-portal-alerts-strip .sc-portal-notices__item {
	width: 100%;
	text-align: center;
}

/* Feed tucks under hero only — not over the alerts band */
.sc-portal-alerts-strip + .sc-tab-content.sc-portal-feed,
.sc-portal-alerts-strip + .sc-driver-tab-panel.sc-tab-content.sc-portal-feed,
.sc-portal-alerts-strip + .sc-native-main.sc-portal-feed {
	margin-top: 0;
}

.sc-portal-flash + .sc-portal-alerts-strip {
	padding-top: 4px;
}

.sc-portal-hero + .sc-portal-alerts-strip {
	margin-top: calc(var(--sc-portal-feed-overlap) * -0.5);
}

/* Mobile — tighter rhythm, same structure */
@media (max-width: 767px) {
	.sc-portal-shell {
		--sc-portal-feed-padding-x: 16px;
		--sc-portal-feed-padding-y: 20px;
		--sc-portal-feed-overlap: 10px;
		--sc-portal-feed-radius: 12px;
	}
}

/* Native app modifier — app colors, same layout */
.sc-portal-shell.sc-native-app.sc-portal-page {
	--sc-portal-page-bg: #eef0f4;
}

body.sc-pwa-app-page .sc-portal-shell.sc-portal-page {
	max-width: none;
	width: 100%;
}

body.sc-pwa-app-page .sc-portal-shell.sc-native-app .sc-tab-content.sc-portal-feed,
body.sc-pwa-app-page .sc-portal-shell.sc-native-app .sc-native-main.sc-portal-feed {
	border-left: none;
	border-right: none;
	padding-bottom: calc(var(--sc-portal-feed-padding-y) + env(safe-area-inset-bottom, 0));
}

/* Legacy driver/staff tab panel — padding owned by portal feed tokens only */
.sc-portal-shell .sc-driver-tab-panel.sc-tab-content.sc-portal-feed {
	padding: 24px 20px 32px;
}

@media (min-width: 640px) {
	.sc-portal-shell .sc-driver-tab-panel.sc-tab-content.sc-portal-feed {
		padding: var(--sc-portal-feed-padding-y) var(--sc-portal-feed-padding-x);
	}
}

@media (max-width: 767px) {
	.sc-portal-shell .sc-driver-tab-panel.sc-tab-content.sc-portal-feed {
		padding: var(--sc-portal-feed-padding-y) var(--sc-portal-feed-padding-x);
	}
}