:root {
	--sidebar-width: 240px;
	--app-focus-ring: #0a58ca;
	--app-body-bg: #f8f9fb;
	--app-surface-bg: #ffffff;
	--app-surface-muted-bg: #f8f9fa;
	--app-border-color: #d0d7de;
	--app-nav-text: #343a40;
	--app-nav-hover-bg: #e2ecff;
	--app-nav-hover-color: #084298;
	--app-topbar-bg: #ffffff;
	--app-link-color: #0b57d0;
	--app-link-hover-color: #084298;
	--app-brand-color: #1f2937;
	--app-brand-hover-bg: #eef4ff;
}

[data-bs-theme='dark'] {
	--app-focus-ring: #9ec5fe;
	--app-body-bg: #0f141b;
	--app-surface-bg: #151b23;
	--app-surface-muted-bg: #1f2733;
	--app-border-color: #344052;
	--app-nav-text: #d5deeb;
	--app-nav-hover-bg: #243247;
	--app-nav-hover-color: #c7ddff;
	--app-topbar-bg: #111826;
	--app-link-color: #9ec5fe;
	--app-link-hover-color: #c7ddff;
	--app-brand-color: #e2eaf8;
	--app-brand-hover-bg: #1f2b3d;
}

body {
	min-height: 100vh;
	background-color: var(--app-body-bg);
	color: var(--bs-body-color);
}

a {
	color: var(--app-link-color);
}

a:hover {
	color: var(--app-link-hover-color);
}

.skip-link {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #0a58ca;
	color: #ffffff;
	border-radius: 0.25rem;
	z-index: 2000;
	text-decoration: none;
	transform: translateY(-220%);
	transition: transform 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
}

.app-sidebar {
	width: var(--sidebar-width);
	flex: 0 0 var(--sidebar-width);
	max-width: var(--sidebar-width);
	background: var(--app-surface-bg);
	border-right: 1px solid var(--app-border-color);
}

@media (min-width: 992px) {
	.app-sidebar {
		position: sticky;
		top: 0;
		height: 100vh;
	}
}

.app-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
}

.app-nav-link {
	border-radius: 0.5rem;
	color: var(--app-nav-text);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
}

.app-nav-link:hover {
	background-color: var(--app-nav-hover-bg);
	color: var(--app-nav-hover-color);
}

.app-nav-link.active {
	background-color: #0d6efd;
	color: #ffffff;
}

:where(a, button, input, select, textarea, .btn, .nav-link, [tabindex]):focus-visible {
	outline: 3px solid var(--app-focus-ring);
	outline-offset: 2px;
	box-shadow: none !important;
}

.app-topbar {
	background-color: var(--app-topbar-bg);
	border-color: var(--app-border-color) !important;
	position: sticky;
	top: 0;
	z-index: 1030;
}

@media (min-width: 992px) {
	.app-topbar-brand-slot {
		flex: 0 0 auto;
		padding-right: 0.75rem;
	}
}

@media (min-width: 1200px) {
	.app-topbar-overlap {
		margin-left: calc(-1 * var(--sidebar-width));
		width: calc(100% + var(--sidebar-width));
	}

	.app-topbar-brand-slot {
		flex: 0 0 var(--sidebar-width);
		padding-right: 1rem;
	}

	.app-sidebar-nav {
		margin-top: 3.5rem;
	}
}

.app-sidebar-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	border-radius: 0.375rem;
	color: var(--app-brand-color);
	font-weight: 700;
	text-decoration: none;
}

.app-sidebar-brand:hover {
	color: var(--app-brand-color);
	background-color: var(--app-brand-hover-bg);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.table,
.list-group-item,
.form-control,
.form-select,
.input-group-text {
	border-color: var(--app-border-color);
}

.toast {
	border: 1px solid var(--app-border-color) !important;
}

.toast-container {
	z-index: 1085;
}

.app-icon {
	display: inline-block;
	line-height: 1;
	font-size: 1rem;
	vertical-align: -0.125em;
}

.app-empty-state {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--bs-secondary-color);
}

.app-empty-state .bi {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.app-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.app-help-sticky-card {
	top: 5rem;
}

.app-help-anchor-target {
	scroll-margin-top: 6rem;
}

.app-help-anchor-target-highlight {
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--bs-warning-bg-subtle) 72%, transparent);
	outline: 2px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
	outline-offset: 0.2rem;
	transition: background-color 0.25s ease-in-out, outline-color 0.25s ease-in-out;
}

.app-help-feedback-widget .badge {
	font-weight: 600;
}