/* ── AppWorkspaceTopBar — global (component-level CSS) ── */

.app-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-400);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
	display: flex;
	align-items: center;
}

body.dark .app-topbar {
	background-color: var(--color-gray-900);
	border-bottom-color: var(--color-gray-700);
	box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
}

.topbar-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.topbar-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.topbar-logo img {
	height: 48px;
	width: auto;
}

.topbar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
}

.topbar-condo-name {
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--color-gray-900);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: var(--letter-spacing-slight);
}

body.dark .topbar-condo-name {
	color: var(--mud-palette-text-primary, var(--color-dark-text-primary));
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* ── Responsive ────────────────────────────────────────── */