/*
 * Small, deliberate final UI fixes.
 *
 * Keep this file for cross-page corrections that are easy to understand and
 * test.  Component design belongs with its component; do not duplicate old
 * rules here just to win a specificity contest.
 */

/* Dialogs must remain above the opened mobile navigation drawer. */
md-sidenav {
	z-index: 10000;
}

/* The profile statistic cards are a single centred group on every phone.
 * Older responsive rules moved them a few percent to the right. */
@media (max-width: 768px) {
	.profile-page .user-profile-page .user-top-information {
		left: auto;
		right: auto;
	}
}

@media (max-width: 380px) {
	.profile-page .user-profile-page .user-top-information {
		transform: none;
	}
}

/* A wide page must never push the permanent header actions off-screen.
 * Let only the flexible title shrink; notification and profile controls keep
 * their natural size at the right edge. */
.lup-top-bar .md-toolbar-tools {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.lup-top-bar .md-toolbar-tools > h2[flex] {
	min-width: 0;
	overflow: hidden;
}

.lup-top-bar .md-toolbar-tools > .md-button,
.lup-top-bar .md-toolbar-tools > lup-avatar {
	flex: 0 0 auto;
}

/* Flex children otherwise keep their intrinsic width and can widen the whole
 * desktop view beyond the viewport. */
.nearby > md-content {
	min-width: 0;
}

/* The register view uses standalone Angular Material input containers rather
 * than the login credentials wrapper.  Earlier generic auth styling leaves
 * those containers at height 0, so their labels overlap and the TOS control
 * is visually detached.  Give the public form its own normal flow. */
.register-page .auth-panel md-input-container {
	min-height: 62px;
	height: 62px;
	margin: 0 0 11px;
}

.register-page .auth-panel md-input-container > label {
	display: none;
}

.register-page .auth-panel md-input-container .md-input {
	float: none;
	margin-top: 13px;
}

/* Discovery cards: route and room QR belong to the identity header.  The
 * presence count begins below its bright divider, leaving a true two-row
 * surface for the people currently at the place. */
.nearby .placeboard .room-category-hero {
	position: relative;
	padding-right: 122px;
}

.nearby .placeboard .room-top-actions {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	gap: 7px;
	z-index: 3;
}

.nearby .placeboard .room-top-action {
	position: relative;
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	padding: 0;
	border: 1px solid rgba(190,225,252,.28);
	border-radius: 11px;
	background: rgba(11,21,40,.68);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 7px 14px rgba(0,0,0,.19);
	color: #c8edff;
	text-decoration: none;
	cursor: pointer;
}

.nearby .placeboard .room-top-action--qr { color: #d9ccff; }
.nearby .placeboard .room-top-action .material-icons { font-size: 23px; }
.nearby .placeboard .room-top-action--maps small {
	position: static;
	margin-top: -4px;
	color: #e6f6ff;
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
.nearby .placeboard .room-top-action--maps { grid-template-rows: 24px 10px; }
.nearby .placeboard .room-top-action--maps > * { transform: translateY(2px); }

.nearby .placeboard > .room-presence-count {
	display: inline-flex;
	margin: 10px 17px 6px;
}

.nearby .placeboard .room-user-preview {
	position: static;
	display: grid;
	grid-template-columns: repeat(5, 36px);
	grid-auto-rows: 36px;
	gap: 7px;
	width: max-content;
	height: auto;
	min-height: 79px;
	margin: 0 17px 14px;
	padding: 0;
}

.nearby .placeboard .room-user-preview .lup-avatar,
.nearby .placeboard .room-user-preview .more-users {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
}

.nearby .placeboard .room-user-preview .more-users {
	position: static;
	border-color: rgba(183,199,239,.42);
	background: rgba(61,72,99,.72);
}

@media (max-width: 360px) {
	.nearby .placeboard .room-category-hero { padding-right: 104px; }
	.nearby .placeboard .room-top-actions { top: 12px; right: 11px; gap: 5px; }
	.nearby .placeboard .room-top-action { width: 37px; height: 37px; }
	.nearby .placeboard .room-user-preview {
		grid-template-columns: repeat(5, 32px);
		grid-auto-rows: 32px;
		gap: 6px;
		min-height: 70px;
		margin-right: 12px;
		margin-left: 12px;
	}
	.nearby .placeboard .room-user-preview .lup-avatar,
	.nearby .placeboard .room-user-preview .more-users { width: 32px; height: 32px; }
}