#sidebar-menu .badge {
	transform: none;
	position: relative;
	top: 0;
	right: 0;
}

.card-header > .d-flex { flex: 1; }

/* TablerBottomNav — mobile bottom tab bar (Tabler ships no bottom nav; kept brand-neutral via CSS
   variables). This file loads before tabler.min.css, so the selectors carry .navbar + .navbar-nav to
   beat Bootstrap's .navbar-nav .nav-link.active and tabler's .navbar .navbar-nav .nav-link (both
   0,3,0) by specificity; the icon follows the label color via tabler's --tblr-nav-link-icon-color. */
.navbar.tabler-bottom-nav {
	background: var(--tblr-bg-surface);
	border-top: 1px solid var(--tblr-border-color);
	padding-top: 0;
	padding-bottom: 0;
}

.navbar.tabler-bottom-nav .navbar-nav .nav-link {
	--tblr-nav-link-icon-color: currentColor;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	padding: 0.375rem 0.5rem;
	color: var(--tblr-secondary);
	font-size: 0.75rem;
}

.navbar.tabler-bottom-nav .navbar-nav .nav-link.active {
	color: var(--tblr-primary);
}

.navbar.tabler-bottom-nav .navbar-nav .nav-link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.125rem;
}

/* Centre the glyph in tabler's nav icon slot (sidebar, navbars, bottom nav), at any icon size. The
   slot is centred on the folded rail's axis — the same axis as the brand mark — but its content is
   not: an icon-font glyph is inline text at the slot's start, and its advance width differs per icon
   in Font Awesome, so no two icons line up. Centring happens on the child because the slot span
   carries the d-md-none d-lg-inline-block utilities, whose !important display would beat any display
   set on the slot. The child fills the slot (the percentages resolve against tabler's explicit
   width/height) and centres its glyph in both axes, so a glyph smaller or larger than the slot stays
   on the axis instead of hanging off its start. :not(svg) keeps the selector at (0,1,1), above Font
   Awesome's .fa (0,1,0) — this file's position relative to the app's font stylesheet is not fixed,
   so the display must not win on order alone. */
.nav-link-icon > :not(svg) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
}

/* A block-level svg ignores the above — auto margins centre it at whatever width it carries. */
.nav-link-icon > svg {
	margin-inline: auto;
}

/* TablerIconType glyphs drawn like upstream's inline SVG (.nav-link-icon svg { height: 100% }): the
   icon font's em box is the SVG's 24px box, so font-size = slot height draws the same icon. The
   sidebar sets the height variable; the navbars fall back to tabler's 1.25rem. Icons built with
   tabler's .icon class keep the .icon sizing. Sizing only — the rule above does the centring. */
.nav-link-icon > .ti:not(.icon) {
	font-size: var(--tblr-nav-link-icon-height, 1.25rem);
}

/* TablerOtpInputField — one square box per digit */
.tabler-otp-input input {
	width: 3rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* TablerSidebar — the brand on the folded rail. Same folded selectors as _navbar.scss (class route
   and [data-bs-sidebar] route; the hover variant counts as folded only while neither hovered nor
   holding visible keyboard focus — upstream unfolds on :has(:focus-visible) too):
   1) the brand title text collapses like .nav-link-title (upstream uses an icon-only mark; our
      brand may have text);
   2) TablerSidebar.setFoldedBrandImage — the brand image hides and the square mark shows. The
      min-width keeps an <img> mark from collapsing: Bootstrap's img { max-width: 100% } gives it a
      zero min-content size, and the pin button (an !important d-lg-inline-flex utility that stays in
      the flex row when folded) plus the 0.5rem gap would squeeze the brand link to 0px — upstream's
      inline <svg width="32"> has a firm size. */
.tabler-brand-mark {
	display: none;
	min-width: 2rem; /* = $navbar-brand-image-height */
}
@media (min-width: 992px) {
	:is(.navbar-vertical.navbar-folded,
		.navbar-vertical.navbar-folded-hover:not(:hover):not(:has(:focus-visible)),
		[data-bs-sidebar="folded"] .navbar-vertical,
		[data-bs-sidebar="folded-hover"] .navbar-vertical:not(:hover):not(:has(:focus-visible))) .navbar-brand-title {
		width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
	}
	.navbar-vertical .navbar-brand-title {
		transition: opacity .15s ease;
	}
	:is(.navbar-vertical.navbar-folded,
		.navbar-vertical.navbar-folded-hover:not(:hover):not(:has(:focus-visible)),
		[data-bs-sidebar="folded"] .navbar-vertical,
		[data-bs-sidebar="folded-hover"] .navbar-vertical:not(:hover):not(:has(:focus-visible))) .tabler-brand-has-mark .navbar-brand-image:not(.tabler-brand-mark) {
		display: none;
	}
	:is(.navbar-vertical.navbar-folded,
		.navbar-vertical.navbar-folded-hover:not(:hover):not(:has(:focus-visible)),
		[data-bs-sidebar="folded"] .navbar-vertical,
		[data-bs-sidebar="folded-hover"] .navbar-vertical:not(:hover):not(:has(:focus-visible))) .tabler-brand-has-mark .tabler-brand-mark {
		display: inline;
	}
}

/* TablerNavbar utility bar — Bootstrap gives horizontal nav-link padding and nowrap only to expanded
   navbars (.navbar-expand-*); restore both for the always-visible utility bar that intentionally
   drops that class. The padding variable is defined on .navbar itself (0.75rem). This file loads
   before tabler.min.css, so both rules win by specificity, not by order. */
.navbar.tabler-navbar-utility {
	flex-wrap: nowrap;
}
.tabler-navbar-utility .navbar-nav .nav-link {
	padding-inline: var(--tblr-navbar-nav-link-padding-x);
}

/* TablerAjaxVerticalTabbedPanel — the active pill. Tabler tints it with 4% of the primary color
   (~#f5f9fd on white, a near-invisible slate in dark mode); --tblr-primary-lt is the 10% tint that
   follows the theme's accent and stays readable in both modes. This file loads before
   tabler.min.css, so the rule wins by specificity ((0,2,0) against tabler's .nav-pills). */
.tabler-vertical-tabs .nav-pills {
	--tblr-nav-pills-link-active-bg: var(--tblr-primary-lt);
}