/* Quick-access module bar in the page header (agileclix_quickbar.js). Module colours via --ac-mod. */

/* The bar replaces the rail; its logo and user menu move into the module sidebar. */
body.ac-has-quickbar #desk-dock {
	display: none !important;
}

/* ---- Sidebar brand header and user footer (agileclix_quickbar.js) ---- */
.ac-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.4rem 0.5rem 0.6rem;
	padding: 0.55rem 0.6rem;
	color: var(--ac-text);
	font-weight: 650;
	font-size: 0.95rem;
	text-decoration: none !important;
	border-bottom: 1px solid var(--ac-border);
	border-radius: 0;
}

.ac-sidebar-brand img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.ac-sidebar-brand:hover {
	color: var(--ac-primary);
}

.ac-sidebar-user {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: calc(100% - 1rem);
	margin: auto 0.5rem 0.5rem;
	padding: 0.55rem 0.6rem;
	text-align: left;
	background: var(--ac-surface);
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius);
	box-shadow: 0 -4px 12px color-mix(in srgb, var(--ac-sidebar) 6%, transparent);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ac-sidebar-user:hover {
	border-color: color-mix(in srgb, var(--ac-primary) 40%, var(--ac-border));
}

.ac-sidebar-user:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-primary) 25%, transparent);
}

.ac-sidebar-user-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ac-sidebar-user-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ac-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ac-sidebar-user-email {
	font-size: 0.72rem;
	color: var(--ac-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-head .page-head-content {
	gap: 1rem;
}

.ac-quickbar {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
	margin: 0 auto;
	padding: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	background: color-mix(in srgb, var(--ac-surface) 85%, transparent);
	border: 1px solid var(--ac-border);
	border-radius: 999px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ac-sidebar) 5%, transparent);
}

.ac-quickbar::-webkit-scrollbar {
	display: none;
}

.ac-quickbar-item {
	--ac-mod: var(--ac-primary);
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.4rem;
	height: 34px;
	padding: 0 0.3rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ac-text);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}

.ac-quickbar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	color: var(--ac-mod);
	background: color-mix(in srgb, var(--ac-mod) 12%, transparent);
	--icon-stroke: currentColor;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ac-quickbar-icon svg,
.ac-quickbar-icon .icon {
	width: 16px;
	height: 16px;
}

/* Labels only on the active module, so the bar stays compact. */
.ac-quickbar-label {
	display: none;
	white-space: nowrap;
}

.ac-quickbar-item:hover .ac-quickbar-icon {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--ac-mod) 20%, transparent);
}

.ac-quickbar-item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-mod) 30%, transparent);
}

.ac-quickbar-item.is-active {
	padding-right: 0.85rem;
	background: color-mix(in srgb, var(--ac-mod) 12%, transparent);
	color: color-mix(in srgb, var(--ac-mod) 80%, var(--ac-text));
}

.ac-quickbar-item.is-active .ac-quickbar-icon {
	color: #fff;
	--icon-stroke: #fff;
	background: linear-gradient(135deg, var(--ac-mod), color-mix(in srgb, var(--ac-mod) 70%, #000));
	box-shadow: 0 4px 10px color-mix(in srgb, var(--ac-mod) 35%, transparent);
}

.ac-quickbar-item.is-active .ac-quickbar-label {
	display: inline;
}

.ac-quickbar-home .ac-quickbar-icon {
	color: var(--ac-text);
	background: color-mix(in srgb, var(--ac-muted) 12%, transparent);
}

.ac-quickbar-divider {
	flex-shrink: 0;
	width: 1px;
	height: 20px;
	margin: 0 0.2rem;
	background: var(--ac-border);
}

/* Below laptop width the sidebar and title leave no room beside the bar. */
@media (max-width: 1199.98px) {
	.ac-quickbar {
		order: 3;
		width: 100%;
		margin-top: 0.4rem;
	}

	/* Bootstrap's .flex-nowrap is !important; the bar needs its own row on phones. */
	body.ac-has-quickbar .page-head .page-head-content {
		flex-wrap: wrap !important;
		height: auto !important;
		padding-bottom: 0.5rem;
	}

	/* Let the header grow to fit the second row instead of overlapping the page. */
	body.ac-has-quickbar .page-head {
		height: auto !important;
		min-height: var(--page-head-height, 56px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-quickbar-item,
	.ac-quickbar-icon {
		transition: none;
	}

	.ac-quickbar-item:hover .ac-quickbar-icon {
		transform: none;
	}
}