/* 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; }


.wicket-tabbed-panel .nav-tabs .nav-link.active {
  background-color: var(--tblr-bg-surface);
  border-bottom-color: var(--tblr-bg-surface);
}



/* 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);
}

/* TablerNavbar utility bar next to the sidebar, from the sidebar's lg breakpoint up. tabler offsets a
   .navbar sibling of .navbar-vertical by the sidebar width (0,3,0), but its floating style
   (html[data-bs-navbar-style="floating"] .page > .navbar, (0,3,1)) resets all four margins of every
   navbar that is not navbar-expand-* — and the utility bar deliberately is not — so the bar would slide
   under the sidebar. The offset is restated at (0,6,0), and the bar gets the floating variables tabler
   sets on navbar-expand-* navbars only, so it floats along with the sidebar: 0.5rem from the viewport
   edges and from the sidebar (tabler sets --tblr-sidebar-gap to twice the margin there). */
@media (min-width: 992px) {
	.page > .navbar-vertical.navbar-expand-lg:not(.navbar-end) ~ .navbar.tabler-navbar-utility {
		margin-inline-start: calc(var(--tblr-sidebar-width) + var(--tblr-sidebar-gap, 0px));
	}

	html[data-bs-navbar-style="floating"] .page > .navbar.tabler-navbar-utility {
		--tblr-navbar-margin: 0.5rem;
		--tblr-navbar-border-radius: var(--tblr-border-radius-lg);
		--tblr-navbar-outline-width: var(--tblr-navbar-border-width);
	}

	/* sidebar at the end: tabler's end offset ((0,4,0)) zeroes the start margin, the floating bar keeps
	   its gap to the viewport edge */
	html[data-bs-navbar-style="floating"] .page > .navbar-vertical.navbar-expand-lg.navbar-end ~ .navbar.tabler-navbar-utility {
		margin-inline-start: var(--tblr-navbar-margin);
	}
}

/* TablerAjaxVerticalTabbedPanel — the active pill. Tabler tints it with --tblr-active-bg, 4% of the
   primary color in light mode (~#f5f9fd on white, near-invisible) and 12% 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.7.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 on sign-in-cover.html: whatever the full-bleed row leaves uncovered (overscroll,
   a classic scrollbar's track) shows the surface instead of the grey (dark mode: darker) page
   background. 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);
}