/* Always-on detached layout look (floating rounded sidebar/topbar/content panels).
   Kept in its own file; imported here so no <link> or template markup is needed. */
@import url('detached.override.css?v=09072026-6');

.card-side-img {
	background-image: url('../images/background-manage.webp');
}

.logo-lg img {
	height: 40px;
}

.btn-xs {
	padding: .2rem .6rem;
	font-size: .75rem;
	border-radius: .15rem;
}

td.datatable-action-cell {
	width: 1.875rem;
	padding: .75rem .3rem;
}

.tooltip-label {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
}

.tooltip-in-form {
	color: inherit;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	margin-inline-start: auto;
}

.filterContainer .labelForFilter {
	margin-top: .75rem;
}

#sidenav-menu hr {
	border-top-color: var(--theme-sidenav-item-color);
	opacity: 0.15;
}

.topbar-alert {
	position: sticky;
	top: 0;
	z-index: 1010;
}

body.has-topbar-alert .app-topbar {
	top: var(--topbar-alert-height, 0px);
}

/* The detached layout already parks the sidebar a gap below the header, so the alert's height adds
   to that offset instead of replacing it — sharing a rule with .app-topbar would drop the offset
   and pull the sidebar up against the header. */
body.has-topbar-alert .sidenav-menu {
	top: calc(var(--theme-topbar-height) + var(--detached-gap) + var(--topbar-alert-height, 0px));
}

/* The "Snel schakelen" rows carry a toggle button, not a link, so the row itself must not react to
   hover the way a real .side-nav-link does (colour shift + pointer cursor). */
#sidenav-menu .side-nav-link-static,
#sidenav-menu .side-nav-link-static:hover,
#sidenav-menu .side-nav-link-static:focus,
#sidenav-menu .side-nav-link-static:active {
	color: var(--theme-sidenav-item-color);
	cursor: default;
}

.gap-1-5 {
	gap: 0.5625rem !important;
}

/* A switch that opens its form-group has no group label above it, so its own label
   carries the field name and has to match the weight of a .form-label. Switches that
   sit underneath a group label are not :first-child, so they keep the normal body
   weight and the group label stays the only bold text in the block. */
.form-group > .form-check:first-child .form-check-label {
	font-weight: var(--theme-font-weight-semibold);
}