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


/* This was messing up with BootstrapFormRowBorder and rendered double asterisks since BootstrapFormRowBorder adds their own. */
.col-form-label.required::after, .form-label.required::after {
	margin-inline-start: 0 !important;
	color: transparent !important;
	content: "" !important;
}

/* This scopes asterisks to TablerFormGroup only */
tabler-form-input-group .col-form-label.required::after, tabler-form-input-group. .form-label.required::after {
	margin-inline-start: var(--tblr-form-label-required-gap);
	color: #d63939;
	content: "*";
}

.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);
}

/* TablerAuthIllustrationBorder and TablerAuthCoverBorder — both shells are at least as tall as the
   viewport. tabler's html has no height, so its body { height: 100% } and .page { min-height: 100% }
   resolve to the content height. A stylesheet rule, not a style attribute: Wicket's default content
   security policy (style-src with a nonce) blocks those. dvh instead of the vh of min-vh-100,
   because on phones 100vh is measured with the browser chrome retracted and overshoots the visible
   area. This file loads before tabler.min.css, so the (0,2,0) selectors win by specificity against
   tabler's .page. */
.page.tabler-auth-illustration,
.row.tabler-auth-cover {
	min-height: 100dvh;
}

/* TablerAuthCoverBorder inside a page shell's main.page-body (the Berries SetupPage pattern): the
   body's vertical page padding would frame the full-bleed cover with strips of the page background
   and scroll the page by that much. (0,2,0) beats tabler's .page-body margins despite the load
   order; :has() is within tabler 1.5.1's browser floor. */
.page-body:has(.tabler-auth-cover) {
	margin-block: 0;
}

/* TablerAuthCoverBorder — the page canvas in the form column's surface color, as upstream's
   body.bg-surface. tabler reserves a scrollbar gutter on html (scrollbar-gutter: stable), painted
   with the body background, which would otherwise run as a grey (dark mode: darker) strip along the
   edge of the full-bleed row wherever scrollbars take space. A :has() rule leaves the host's body
   classes alone; (0,1,1) beats tabler's body rule despite the load order. */
body:has(.tabler-auth-cover) {
	background-color: var(--tblr-bg-surface);
}