/* Keep page height behavior consistent */
html, body {
	height: 100%;
}

/* Ensure content area fills viewport height so footer stays at bottom */
.nxl-content {
	min-height: 100vh;
}

/* Login page brand logo circle container */
.brand-logo-circle {
	width: 72px;
	height: 72px;
	overflow: hidden;
}

/* Ensure image stays inside the circle, preserving aspect ratio */
.brand-logo-image {
	object-fit: contain;
	border-radius: 50%;
}

/* Header brand large logo size */
.b-brand .logo-lg {
	width: 140px;
	height: auto;
}

/* Add space between breadcrumb header and first content block */
.nxl-content .page-header {
	margin-bottom: 24px;
}

/* Add horizontal breathing room like the HTML demo (not on breadcrumb) */
.nxl-content > :not(.page-header) {
	padding-left: 24px;
	padding-right: 24px;
}

/* Ensure top-level cards have outside spacing from container edges */
.nxl-content > .card {
	margin-left: 24px;
	margin-right: 24px;
}

/* When using grid rows directly under content, add inner padding instead */
.nxl-content > .row {
	padding-left: 24px;
	padding-right: 24px;
}

/* Make primary page cards fill viewport height (minus header/breadcrumb area) */
.nxl-content > .card {
	min-height: calc(100vh - 160px);
}

/* Make tables fill viewport height inside cards with scroll */
.nxl-content .card .table-responsive {
	height: calc(100vh - 160px);
	overflow: auto;
}

/* Avatar upload overlay should cover whole area */
#avatarUpload .upload-button,
#avatarUploadEdit .upload-button,
#accountAvatarUpload .upload-button {
	background: rgba(255, 255, 255, 0.6);
}

/* Small remove button for avatar */
.avatar-remove-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	border: 0;
	background: rgba(0,0,0,.5);
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}