/*! public/css/root/ui-bar.css */

nav .brand {
	font-size: 1.3rem;
}

.navbar-brand {
	display: inline-flex;
	align-items: center;
}

.navbar-brand-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

.navbar-brand-actions .navbar-brand {
	margin: 0;
}

.navbar-install-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ui-bar-text);
}

.navbar-install-button:hover,
.navbar-install-button:focus-visible {
	background: var(--color-primary-hover);
}

.navbar-install-button[hidden] {
	display: none !important;
}

.nav-icon {
	position: relative;
	display: inline-block;
}

.nav-badge {
	position: absolute;
	inset-block-start: -0.55rem;
	inset-inline-end: -0.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.3rem;
	border: 1px solid var(--ui-bar-bg);
	border-radius: 999px;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.nav-notifications-menu {
	width: min(22rem, calc(100vw - 2rem));
	padding: 0.5rem;
	box-shadow: var(--shadow-card);
}

.nav-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0.5rem 0.65rem;
	border-bottom: 1px solid var(--border-soft);
}

.nav-notifications-header strong {
	color: var(--color-text-heading);
}

.nav-notifications-header span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.4rem;
	border-radius: var(--radius-pill);
	color: var(--color-text-inverse);
	background: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 700;
}

.nav-notifications-list {
	display: grid;
	gap: 0.35rem;
	padding-block: 0.5rem;
}

.nav-notifications-item {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.5rem;
	border-radius: var(--radius-sm);
	color: var(--color-text-body);
	text-decoration: none;
}

.nav-notifications-item:hover,
.nav-notifications-item:focus-visible,
.nav-notifications-all:hover,
.nav-notifications-all:focus-visible {
	background: var(--bg-pill-hover);
	color: var(--color-text-body);
	outline: none;
}

.nav-notifications-item.is-unread .nav-notifications-item-icon {
	background: var(--color-primary);
}

.nav-notifications-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
	color: var(--color-text-inverse);
	background: var(--color-secondary);
}

.nav-notifications-item-content {
	display: grid;
	gap: 0.05rem;
	min-width: 0;
}

.nav-notifications-item-content strong,
.nav-notifications-item-content small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-notifications-item-content strong {
	color: var(--color-text-heading);
	font-size: 0.9rem;
}

.nav-notifications-item-content small,
.nav-notifications-empty {
	color: var(--color-text-muted);
	font-size: 0.8rem;
}

.nav-notifications-empty {
	margin: 0;
	padding: 1rem 0.5rem;
	text-align: center;
}

.nav-notifications-all {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.5rem;
	border-top: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	color: var(--color-text-body);
}

[dir='rtl'] .nav-notifications-all .bi {
	transform: scaleX(-1);
}

.brand {
	display: inline-flex;
	align-items: baseline;
}

.brand-logo {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 1.25em;
	block-size: 1.25em;
	vertical-align: -0.22em;
	transform: translateY(2px);
}

.brand-logo-img {
	display: none;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.brand-logo-img-light {
	display: block;
}

[data-theme='dark'] .brand-logo-img-light {
	display: none;
}

[data-theme='dark'] .brand-logo-img-dark {
	display: block;
}

.footer-brand {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	vertical-align: middle;
}

.footer-brand .brand-logo {
	inline-size: 1.15em;
	block-size: 1.15em;
}

.footer-brand .brand {
	font-size: inherit;
}

.nav-item {
	margin-inline-end: 10px;
}

.nav-text {
	display: none;
}

.presence-trigger {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.presence-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #6c757d;
}

.presence-dot[data-status="online"] { background-color: #198754; }
.presence-dot[data-status="away"] { background-color: #ffc107; }
.presence-dot[data-status="busy"] { background-color: #dc3545; }

.ui-bar {
	background-color: var(--ui-bar-bg);
	color: var(--ui-bar-text);
}

.ui-bar a,
.ui-bar .nav-link,
.ui-bar .btn {
	color: inherit;
	transition: color var(--transition-time-method);
}

.ui-bar .text-muted,
.ui-bar .nav-link-muted {
	color: var(--ui-bar-muted);
}

.ui-bar .nav-link {
	border-radius: var(--radius-sm);
}

.navbar.ui-bar {
	border-bottom: 1px solid var(--ui-bar-border);
}

footer.ui-bar {
	border-top: 1px solid var(--ui-bar-border);
}

.ui-bar .dropdown-menu {
	background-color: var(--bg-section);
	color: var(--ui-bar-text);
	border: 1px solid var(--ui-bar-border);
}

.ui-bar .dropdown-item {
	color: var(--ui-bar-text);
	transition:
		background-color var(--transition-time-method),
		color var(--transition-time-method);
}

.ui-bar .dropdown-item.active {
	background-color: var(--color-primary);
	color: #ffffff;
}

.ui-bar .dropdown-item:hover {
	background-color: var(--color-primary-hover);
}

.ui-bar .nav-link:hover {
	background-color: var(--color-primary-hover);
	color: var(--ui-bar-text);
}

.ui-bar .nav-link.show {
	color: var(--color-primary);
	background-color: transparent;
}

.ui-bar .nav-link.active {
	color: var(--color-secondary);
}

#langDropdown img {
	margin-inline-end: 4px;
}

footer p {
	margin-top: 4px;
}

.footer-legal {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	font-size: 0.85rem;
}

footer a {
	text-decoration: none;
	transition: color var(--transition-time-method);
}

footer a:hover {
	color: var(--color-primary);
}

#back-to-top .text {
	margin-inline-start: 0.5rem;
}

#back-to-top[hidden] {
	display: none !important;
}

@media (max-width: 991.98px) {
	nav .nav-link {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	nav .dropdown-item,
	.has-tooltip {
		display: flex;
		gap: 1rem;
	}

	.nav-icon {
		width: 50px;
		text-align: start;
	}

	.nav-text {
		display: inline-block;
	}

	#back-to-top .bi {
		position: absolute;
		inset-inline-end: 0.5rem;
		bottom: 2.25rem;
		font-size: 2rem;
	}

	#back-to-top .text {
		display: none;
	}
}

@media (max-width: 497.98px) {
	#rights {
		font-size: 0.8rem;
	}
}

@media (max-width: 399.98px) {
	.navbar-brand .brand {
		font-size: 1.1rem;
	}
	#rights {
		font-size: 0.7rem;
	}
}