/*
 * Application styles layered on Tabler, for every page.
 *
 * The brand's primary in both schemes, the page-header tab strip, the content column's frame,
 * and a handful of one-off corrections. Everything else moved out: see the yeti-*.css beside
 * this one, each contributed by the component that needs it rather than by every page.
 */

/*
 * The brand primary, in two values because one cannot serve both schemes.
 *
 * #325d88 is chosen against a white page and measures 6.87:1 there. On Tabler's dark surfaces it
 * is 2.58:1 against the body and 2.14:1 against a card, so anything keyed on the primary went
 * nearly invisible in dark mode: a body link, an active page-header tab, a focus ring. It was set
 * for all three selectors at once on the reasoning that the brand color should survive a scheme
 * switch, which is true of the brand and false of a color chosen for one background.
 *
 * The dark value is the same hue and saturation with lightness raised from 0.36 to 0.60, so it
 * still reads as the brand rather than as a different blue. That lands at 5.92:1 on the body and
 * 4.90:1 on a card, both clear of WCAG AA. Tabler's own #066fd1 is 3.55:1 and would not have been
 * enough either, so following upstream was not an option.
 *
 * THE DARK RULE IS SCOPED TO :root, AND THAT IS THE WHOLE POINT. data-bs-theme is not a document
 * switch in Tabler - it can sit on any element, and this application puts data-bs-theme="dark" on
 * the public navbar to make it a dark island on a light page. A bare [data-bs-theme="dark"]
 * therefore matched that navbar and repainted the brand bar #6a99c8, a colour chosen to be legible
 * on a dark body and never intended as the brand mark itself. The public shell carried the wrong
 * brand colour from the moment the dark value was introduced.
 *
 * :root[data-bs-theme="dark"] means what was meant: the whole document is in dark mode. An element
 * that opts itself into dark keeps Tabler's own handling and the brand stays #325d88.
 *
 * YetiTablerCssReferenceTest pins both ratios; change either value and it recomputes.
 */
:root,
[data-bs-theme="light"] {
	--tblr-primary: #325d88;
	--tblr-primary-rgb: 50, 93, 136;
}

:root[data-bs-theme="dark"] {
	--tblr-primary: #6a99c8;
	--tblr-primary-rgb: 106, 153, 200;
}

.page-header-tabs .nav-bordered {
	border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

/*
 * The strip scrolls sideways and must not sprout a vertical scrollbar doing it.
 *
 * Putting overflow-x-auto on the same element that carries nav-bordered is what makes this rule
 * necessary. Tabler pulls the active link's 2px underline down onto the strip's 1px rule with
 * margin-bottom: -1px, so the content stands one pixel taller than the box - and CSS computes a
 * visible overflow-y to auto as soon as overflow-x is not visible. The result was a 15px vertical
 * scrollbar parked at the right end of the tabs, on a strip with nothing to scroll vertically.
 *
 * The Sandstone markup avoided this structurally: .subnav-scroller was an inner wrapper, so the
 * overflow and the negative margin never sat on the same element. Keeping them together is fine,
 * and this is what it costs.
 */
.page-header-tabs .nav-bordered.overflow-x-auto {
	overflow-y: hidden;
}

.nav-bordered .nav-link:hover {
	border-color: transparent transparent var(--tblr-primary);
}

@media (max-width: 767.98px) {
	.page-header nav[aria-label="breadcrumb"] {
		display: none !important;
	}
}

.header {
	flex: 0 1 auto;
	position: relative;
	display: flex;
	background-color: var(--tblr-primary);
}

.header-container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 1.5rem;
}

.header-title {
	margin: 0;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
}

.header-subtitle {
	margin: .5rem 0 0;
	color: rgba(255, 255, 255, .75);
	font-size: 1.25rem;
}

.content {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
}

.content:has(.status) {
	position: relative;
}

.content-container {
	position: relative;
	padding: 1.5rem !important;
}

.content-wrapper {
	max-width: 1440px;
}

.form-floating > label {
	left: revert;
}

  @media (max-width: 767.98px) {
    .navbar-user-item .navbar-user-meta {
      display: none; } }

/*
 * A light page that reads as layers rather than as one flat sheet.
 *
 * Tabler ships light mode with two surface values and almost no distance between them: the ground
 * at #f9fafb and every raised thing - the sidebar, the top header, each card - at #ffffff. In L*,
 * which is perceptually uniform, that is a step of 1.8. Dark mode's two, #111827 against #1f2937,
 * are 8.0 apart.
 *
 * So the light page has one surface and dark has two. Nothing recedes, chrome and content sit at
 * the same depth, and the eye gets no help chunking a dense screen - which reads as a busy page
 * even though the density is identical in both schemes. Dark is not calmer because it is dark; it
 * is calmer because its elevation model works.
 *
 * Deepening the ground rather than lightening the cards, because #ffffff is the ceiling and so the
 * only fixed point available. #eef1f5 puts the step at 5.0, keeping the cool grey of Tabler's own
 * ramp.
 *
 * BOTH TOKENS, OR IT HALF-APPLIES. Tabler carries the value twice, and the -rgb triplet is what
 * .bg-body and the toast header read. Setting only the first leaves those at #f9fafb against a
 * ground that has moved.
 *
 * --tblr-bg-surface-secondary IS DELIBERATELY LEFT ALONE, and that is the point of doing this here
 * rather than upstream. Tabler defines the ground *as* that token, which conflates two jobs: the
 * page ground, and the subtle off-white fill used inside a card. Its other fourteen readers are all
 * the second kind - --tblr-disabled-bg, --tblr-avatar-bg, table heads, the autofill inset - and
 * they should stay just off white, not follow the ground down.
 *
 * SCOPED TO :root FOR THE REASON THE BRAND BLOCK AT THE TOP OF THIS FILE DOCUMENTS. data-bs-theme
 * is not a document switch in Tabler and this application puts data-bs-theme="dark" on the public
 * navbar; a bare [data-bs-theme="light"] would match any element carrying it. :root also lifts this
 * to (0,2,0) against Tabler's (0,1,0), so it wins on specificity rather than on load order.
 */
:root[data-bs-theme="light"] {
	--tblr-body-bg: #eef1f5;
	--tblr-body-bg-rgb: 238, 241, 245;
}