.text-right {
	text-align: right;
}

/* Mobile optimization. 768px is the shell/density/table/interaction boundary.
   Rules targeting a MudBlazor component's rendered root must be global — scoped
   .razor.css does not attach to child-component roots. */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Backstop only; not proof overflow is fixed. */
body {
	overflow-x: hidden;
}

a,
button,
[role="button"],
.mud-button-root,
.mud-icon-button,
.mud-nav-link,
.mud-chip {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* !important beats MudBlazor's own !important display utilities. */
@media (max-width: 767px) {
	.briefpe-desktop-only {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.briefpe-mobile-only {
		display: none !important;
	}
}

.briefpe-touch {
	min-width: 44px;
	min-height: 44px;
}

.briefpe-account-menu.mud-button-root,
.briefpe-account-menu .mud-button-root {
	min-width: 44px;
	min-height: 44px;
}

.briefpe-mobile-trial {
	min-height: 44px;
	align-items: center;
	white-space: nowrap;
	font-weight: 600;
}

/* >=16px text-entry font prevents iOS focus-zoom (a hard requirement, hence !important). */
@media (max-width: 767px) {
	.mud-input-slot,
	.mud-input-root input,
	.mud-input-root textarea,
	.mud-select .mud-input-slot {
		font-size: 16px !important;
	}
}

@media (max-width: 767px) {
	.mud-typography-h1 {
		font-size: 2rem;
		line-height: 1.2;
	}

	.mud-typography-h2 {
		font-size: 1.75rem;
		line-height: 1.25;
	}

	.mud-typography-h3 {
		font-size: 1.5rem;
		line-height: 1.25;
	}

	.mud-typography-h4 {
		font-size: 1.25rem;
		line-height: 1.3;
	}
}

/* ---- Shell: app bar, drawer, main content, safe-area insets ---- */

/* App bar keeps a 64px toolbar below the top inset; height grows by the inset. */
.briefpe-appbar.mud-appbar {
	height: calc(64px + env(safe-area-inset-top, 0px));
	padding-top: env(safe-area-inset-top, 0px);
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

/* Desktop toolbar gutters are 24px; mini-rail nav cards sit at 12px — nudge hamburger to match. */
@media (min-width: 768px) {
	.briefpe-appbar .briefpe-menu-toggle {
		margin-left: -12px;
	}
}

.briefpe-logo {
	height: 40px;
	margin-left: 4px;
}

@media (min-width: 768px) {
	.briefpe-logo {
		height: 64px;
		margin-left: 12px;
	}
}

/* Specificity matches MudBlazor's clipped-drawer rule so this wins; a no-op at inset 0. */
.mud-drawer.mud-drawer-fixed.mud-drawer-clipped-always.briefpe-drawer,
.mud-drawer.mud-drawer-fixed.mud-drawer-persistent.briefpe-drawer,
.mud-drawer.mud-drawer-fixed.mud-drawer-mini.briefpe-drawer {
	top: calc(64px + env(safe-area-inset-top, 0px));
	height: calc(100% - 64px - env(safe-area-inset-top, 0px));
}

.briefpe-drawer .mud-drawer-content {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mini closed: icon rail. MudBlazor's built-in text-hide needs navmenu as a direct
   drawer-content child; our nav-menu-scope wrapper breaks that, so we hide labels here. */
.mud-drawer--closed.mud-drawer-mini.briefpe-drawer .mud-nav-link-text {
	display: none;
}

.mud-drawer--closed.mud-drawer-mini.briefpe-drawer .mud-navmenu {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.mud-drawer--closed.mud-drawer-mini.briefpe-drawer .nav-card {
	width: 48px;
	margin-left: auto;
	margin-right: auto;
}

.mud-drawer--closed.mud-drawer-mini.briefpe-drawer .nav-card .mud-nav-link {
	justify-content: center;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
	.mud-drawer--closed.mud-drawer-mini.briefpe-drawer .nav-card:hover {
		transform: none;
	}
}

/* Header + 16px mobile / + 32px desktop keeps the committed 96px desktop top spacing. */
.briefpe-main-content.mud-main-content {
	padding-top: calc(64px + env(safe-area-inset-top, 0px) + 16px);
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
	.briefpe-main-content.mud-main-content {
		padding-top: calc(64px + env(safe-area-inset-top, 0px) + 32px);
		padding-left: max(24px, env(safe-area-inset-left, 0px));
		padding-right: max(24px, env(safe-area-inset-right, 0px));
	}
}

/* ---- Shared surfaces ---- */

.briefpe-elevated-card {
	padding: 16px;
}

@media (min-width: 768px) {
	.briefpe-elevated-card {
		padding: 24px;
	}
}

/* Match left-nav .nav-card: elevated white surface, 12px radius, active = primary text. */
.briefpe-chip-wrap {
	margin-bottom: 1.5rem;
}

/* Shared company chip row: Company Brief chipset + Compare available drop zone. */
.briefpe-chip-row,
.briefpe-chip-wrap .mud-chipset {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 100%;
}

/* MudChip ships with margin:4px; without it Compare's flex gap alone is 8px too tight
   and the row sits 4px too high vs Company Brief. */
.briefpe-chip-row .briefpe-company-chip,
.briefpe-chip-row .mud-chip {
	margin: 4px;
}

.briefpe-company-chip,
.briefpe-chip-wrap .mud-chip,
.briefpe-chip-row .mud-chip {
	min-height: 44px;
	max-width: 100%;
	height: 44px;
	border-radius: 12px !important;
	background-color: var(--mud-palette-surface) !important;
	color: var(--mud-palette-text-primary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.10);
	transition:
		transform 150ms ease,
		box-shadow 150ms ease;
}

/* Mirror MudChip chrome so Compare cards match Company Brief size/text placement. */
.briefpe-company-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 12px;
	overflow-wrap: anywhere;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Match .mud-chip-content so flag+label sit like Company Brief. */
.briefpe-company-chip > span {
	display: flex;
	align-items: center;
	height: 100%;
	line-height: normal;
}

.briefpe-chip-wrap .mud-chip.mud-chip-selected {
	color: var(--mud-palette-primary) !important;
	background-color: var(--mud-palette-surface) !important;
}

.briefpe-chip-wrap .mud-chip .mud-chip-content {
	white-space: normal;
	overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
	.briefpe-company-chip:hover,
	.briefpe-chip-wrap .mud-chip:hover,
	.briefpe-chip-row .mud-chip:hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 4px 8px rgba(0, 0, 0, 0.06),
			0 20px 48px rgba(0, 0, 0, 0.14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.briefpe-company-chip,
	.briefpe-chip-wrap .mud-chip,
	.briefpe-chip-row .mud-chip {
		transition: none !important;
	}

	.briefpe-company-chip:hover,
	.briefpe-chip-wrap .mud-chip:hover,
	.briefpe-chip-row .mud-chip:hover {
		transform: none;
	}
}

@media (max-width: 767px) {
	.briefpe-news-actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Full-width spacer breaks the row so references + primary drop below the metadata. */
	.briefpe-news-actions .mud-spacer {
		flex-basis: 100%;
		height: 0;
	}

	.briefpe-news-actions .mud-button-root {
		min-height: 44px;
		max-width: 100%;
		margin-right: 0;
	}

	.briefpe-news-actions .mud-button-label {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.briefpe-news-primary.mud-button-root {
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	/* !important overrides the desktop inline white-space:nowrap. */
	.briefpe-latest-title {
		white-space: normal !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-width: 0;
	}

	.briefpe-latest-chips .mud-chip {
		min-height: 44px;
		max-width: 100%;
		height: auto;
	}

	.briefpe-latest-chips .mud-chip-content {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 767px) {
	/* !important overrides the desktop inline min-width. */
	.briefpe-profile-select {
		width: 100%;
		min-width: 0 !important;
	}

	.briefpe-profile-select .mud-input-slot.mud-input-root {
		/* 23px content plus 21px block padding gives a 44px target. */
		min-height: 23px;
	}

	.briefpe-profile-save.mud-button-root {
		width: 100%;
	}
}

.briefpe-profile-save.mud-button-root {
	min-height: 44px;
}

@media (max-width: 767px) {
	/* !important beats MudStack Row's .flex-row utility, which is itself !important. */
	.briefpe-search-row {
		flex-direction: column !important;
	}

	.briefpe-search-btn.mud-button-root {
		width: 100%;
	}
}

.briefpe-search-btn.mud-button-root {
	min-height: 44px;
}

.briefpe-wrap-anywhere {
	overflow-wrap: anywhere;
}

/* ---- Tables: stack at exactly 767px (Breakpoint.None disables MudBlazor's
   600/960 stacking), reproducing its small-device presentation, keeping DataLabel. ---- */
@media (max-width: 767px) {
	.briefpe-stack-table .mud-table-root .mud-table-head .mud-table-row,
	.briefpe-stack-table .mud-table-root .mud-table-foot {
		display: none;
	}

	.briefpe-stack-table .mud-table-root colgroup {
		display: none;
	}

	.briefpe-stack-table .mud-table-body {
		border-top: 1px solid var(--mud-palette-table-lines);
	}

	.briefpe-stack-table .mud-table-row {
		display: revert;
	}

	.briefpe-stack-table .mud-table-row .mud-table-cell:last-child {
		border-bottom: 1px solid var(--mud-palette-table-lines);
	}

	.briefpe-stack-table .mud-table-cell {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 8px 16px;
		border: none;
		padding: 14px 16px;
		text-align: start;
		overflow-wrap: anywhere;
	}

	.briefpe-stack-table .mud-table-cell::before {
		content: attr(data-label);
		font-weight: 500;
		padding-right: 16px;
	}
}

/* Workforce expand dialog: ~20% larger than Mud MaxWidth.Large (1280px). */
.wf-expanded-dialog {
	max-width: min(96vw, 1536px) !important;
	width: min(96vw, 1536px);
}

/* Soft blur + slightly stronger dim; scoped via DialogOptions.BackgroundClass. */
.wf-expanded-overlay {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background-color: rgba(33, 33, 33, 0.55) !important;
}

/* Raw MarkupString labels do not receive Blazor's CSS-isolation attribute. */
.wf-label {
	transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.wf-label {
		transition: none;
	}
}