/* The Dashboard and Analytics pages (/dashboard, /analytics) on top of Vuexy's core.css
   (public/vuexy, the owner's html-version template v10.11.1).

   The colour pattern is the owner's brschool /school pages': the Vuexy purple deepened
   so white text on it clears 4.5:1, figure cards as deep jewel gradients (purple, blue,
   violet, rose, green) whose every text colour clears 4.5:1 against the darkest stop it
   sits on, paper chart cards, and in the dark a midnight indigo canvas with the brand's
   light behind it. Figures stay crisp: no glow or blur on any digit. */

:root {
	--bd-ink-on-fill: #fbfaff;
	--bd-on-soft: rgba(251, 250, 255, 0.88);
	--bd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--bd-edge: rgba(255, 255, 255, 0.28);
	--bd-ring: rgba(255, 255, 255, 0.08);
	--bd-lift: 0 1rem 2rem -1rem;
	--bd-halo: 0 0 0 0;
	--bd-lift-hover: 0 1.5rem 2.75rem -1.25rem;
	--bd-halo-hover: 0 0 2rem -1rem;
}

:root:not([data-bs-theme="dark"]) {
	--bs-paper-bg: #fdfcff;
	/* a primary deep enough for white button text (4.5:1); muted text, links and badge
	   text that clear 4.5:1 (Vuexy's own sit at 2 to 3.5:1) */
	--bs-primary: #6a5fdf;
	--bs-primary-rgb: 106, 95, 223;
	--bs-secondary-color: #706d80;
	--bs-link-color: #6157e0;
	--bs-link-hover-color: #4f45cc;
	--bd-label-primary: #5a4fd6;
	--bd-label-success: #157a43;
	--bd-label-info: #0a7585;
	--bd-label-warning: #a3560c;
	--bd-label-danger: #c4262b;
	--bd-label-secondary: #5f5b6e;
	--bd-hover: color-mix(in srgb, var(--bs-primary) 6%, transparent);
	/* chart series: the brand, then a teal apart from it in lightness as well as hue */
	--bd-chart-1: #7367f0;
	--bd-chart-2: #0a9fb3;
	--bd-chart-3: #d97706;
	--bd-chart-loss: #e11d48;
	--bd-cat-1: #7367f0;
	--bd-cat-2: #0a9fb3;
	--bd-cat-3: #d97706;
	--bd-cat-4: #e11d48;
	--bd-cat-5: #059669;
	--bd-cat-6: #6b7280;
	--bd-glow: 0 0.5rem 1.25rem -0.5rem rgba(115, 103, 240, 0.45);
	/* soft brand light behind the page, barely there in daylight */
	--bd-aurora-1: rgba(115, 103, 240, 0.12);
	--bd-aurora-2: rgba(37, 99, 235, 0.08);
	--bd-aurora-3: rgba(124, 58, 237, 0.06);
}

/* Dark: a near-black indigo canvas with the brand's light behind it, surfaces lighter
   the higher they sit, an edge of light on each surface instead of a shadow */
[data-bs-theme="dark"] {
	--bs-primary: #6a5fdf;
	--bs-primary-rgb: 106, 95, 223;
	--bs-body-bg: #14172a;
	--bs-body-bg-rgb: 20, 23, 42;
	--bs-paper-bg: #1c2036;
	--bs-paper-bg-rgb: 28, 32, 54;
	--bs-menu-bg: #1c2036;
	--bs-heading-color: #ecebf8;
	--bs-body-color: #bdbdd4;
	--bs-body-color-rgb: 189, 189, 212;
	--bs-border-color: #2f3450;
	--bs-gray-200: #2a2f49;
	--bs-gray-300: #3f4566;
	--bs-gray-400: #626889;
	--bs-box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0.75rem 2rem -1rem rgba(5, 7, 20, 0.8);
	--bs-box-shadow-sm:
		inset 0 0 0 1px rgba(255, 255, 255, 0.07),
		0 0.25rem 0.75rem -0.25rem rgba(5, 7, 20, 0.7);
	--bs-secondary-color: #9c9db6;
	--bs-link-color: #9a92f5;
	--bs-link-hover-color: #b1abf8;
	--bd-label-primary: #b1abf8;
	--bd-label-success: #5fd99a;
	--bd-label-info: #4fd3e4;
	--bd-label-warning: #ffb672;
	--bd-label-danger: #ff8a8d;
	--bd-label-secondary: #b7b8cf;
	--bd-hover: color-mix(in srgb, var(--bs-primary) 14%, transparent);
	--bd-chart-1: #877ef2;
	--bd-chart-2: #16a5b8;
	--bd-chart-3: #f59e0b;
	--bd-chart-loss: #fb7185;
	--bd-cat-1: #877ef2;
	--bd-cat-2: #16a5b8;
	--bd-cat-3: #f59e0b;
	--bd-cat-4: #fb7185;
	--bd-cat-5: #34d399;
	--bd-cat-6: #9ca3af;
	--bd-glow: 0 0.5rem 1.5rem -0.5rem rgba(115, 103, 240, 0.6);
	--bd-aurora-1: rgba(115, 103, 240, 0.3);
	--bd-aurora-2: rgba(37, 99, 235, 0.22);
	--bd-aurora-3: rgba(124, 58, 237, 0.18);
	--bd-edge: rgba(255, 255, 255, 0.22);
	--bd-ring: rgba(255, 255, 255, 0.07);
	--bd-lift: 0 1.25rem 3rem -1rem;
	--bd-halo: 0 0 3.5rem -1rem;
	--bd-lift-hover: 0 1.75rem 3.5rem -1rem;
	--bd-halo-hover: 0 0 4.5rem -0.75rem;
}

/* The brand's light behind the whole page; the floating top bar frosts what scrolls under it */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 45% at 10% -5%, var(--bd-aurora-1), transparent 70%),
		radial-gradient(45% 40% at 95% 5%, var(--bd-aurora-2), transparent 70%),
		radial-gradient(50% 45% at 55% 105%, var(--bd-aurora-3), transparent 70%);
}

.layout-navbar,
.layout-page,
.content-wrapper {
	background-color: transparent;
}

.layout-navbar.navbar-detached {
	background-color: color-mix(in srgb, var(--bs-paper-bg) 82%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: var(--bs-box-shadow);
}

/* Vuexy sizes .avatar for a block element; as an inline span its circle collapsed */
span.avatar {
	display: inline-block;
	vertical-align: middle;
}

.card {
	--bs-card-box-shadow: var(--bs-box-shadow);
}

[data-bs-theme="dark"] .layout-menu {
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Vuexy's label badges, with text that clears 4.5:1 on their tint */
.bg-label-primary { color: var(--bd-label-primary) !important; }
.bg-label-success { color: var(--bd-label-success) !important; }
.bg-label-info { color: var(--bd-label-info) !important; }
.bg-label-warning { color: var(--bd-label-warning) !important; }
.bg-label-danger { color: var(--bd-label-danger) !important; }
.bg-label-secondary { color: var(--bd-label-secondary) !important; }

.bd-skip:focus {
	position: fixed;
	z-index: 2000;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	background: var(--bs-paper-bg);
	box-shadow: var(--bs-box-shadow);
}

/* Brand: the Black Rock mark on a white tile, as on the desk */
.bd-mark {
	width: 34px;
	height: 34px;
	padding: 3px;
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
	box-shadow: 0 0 0 1px rgba(47, 43, 61, 0.08);
}

.app-brand-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 10.5rem;
	font-size: 1.0625rem !important;
}

.bd-navbar-title {
	font-weight: 600;
	color: var(--bs-heading-color);
}

/* The organisation: a picker for someone who keeps several, its name for anyone else */
.bd-org {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	max-width: min(22rem, 44vw);
	margin: 0 0.25rem 0 0;
	padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
	border-radius: 999px;
	background: var(--bs-paper-bg);
	box-shadow: var(--bs-box-shadow-sm);
	font-size: 0.8125rem;
	color: var(--bs-heading-color);
}

.bd-org select {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-overflow: ellipsis;
	cursor: pointer;
}

.bd-org select:focus-visible {
	outline: 2px solid var(--bs-link-color);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.bd-org.is-one span {
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

[data-bs-theme="dark"] .bd-org select option {
	background: var(--bs-paper-bg);
}

/* Page header */
.bd-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-block: 0.5rem 1.75rem;
}

.bd-eyebrow {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--bs-secondary-color);
}

.bd-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--bs-heading-color);
}

/* the name in the greeting, in the brand colour */
.bd-name {
	color: var(--bd-label-primary);
}

.bd-lead {
	margin: 0.5rem 0 0;
	color: var(--bs-secondary-color);
}

.bd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* The period buttons (Analytics) */
.bd-segment {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.875rem;
	padding: 0.25rem;
	border-radius: 0.625rem;
	background: var(--bs-paper-bg);
	box-shadow: var(--bs-box-shadow-sm);
}

.bd-segment a {
	padding: 0.375rem 0.875rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--bs-secondary-color);
	text-decoration: none;
	transition: background-color 0.2s var(--bd-ease), color 0.2s var(--bd-ease);
}

.bd-segment a:hover {
	color: var(--bs-heading-color);
}

.bd-segment a.is-active {
	background: linear-gradient(135deg, #6a5fdf, #5b4fd6);
	color: var(--bd-ink-on-fill);
	box-shadow: 0 0.25rem 0.75rem -0.25rem color-mix(in srgb, #7367f0 60%, transparent);
}

.bd-segment a:focus-visible {
	outline: 2px solid var(--bs-link-color);
	outline-offset: 2px;
}

.bd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bd-actions .btn,
.bd-card-head .btn,
.bd-table-toggle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.375rem;
}

/* a long note beside it must not squeeze a button's icon out */
.bd-actions .btn .ti,
.bd-card-head .btn .ti {
	flex-shrink: 0;
}

/* The main action: a brand gradient (its lightest stop clears 4.5:1 under white text) and a glow */
.bd-actions .btn-primary {
	--bs-btn-bg: #6a5fdf;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-border-color: transparent;
	background-image: linear-gradient(135deg, #6a5fdf, #5b4fd6);
	box-shadow: var(--bd-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bd-actions .btn-primary:hover,
.bd-actions .btn-primary:active {
	background-image: linear-gradient(135deg, #6157e0, #5247c9);
}

.bd-actions .btn-outline-primary {
	--bs-btn-color: var(--bd-label-primary);
	--bs-btn-bg: var(--bs-paper-bg);
	--bs-btn-active-shadow: none;
	--bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
	--bs-btn-hover-color: var(--bd-label-primary);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-paper-bg));
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-active-color: var(--bd-label-primary);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 16%, var(--bs-paper-bg));
	--bs-btn-active-border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .bd-actions .btn-outline-primary {
	--bs-btn-bg: rgba(255, 255, 255, 0.04);
	--bs-btn-border-color: rgba(154, 146, 245, 0.45);
	--bs-btn-hover-bg: rgba(154, 146, 245, 0.14);
	--bs-btn-active-bg: rgba(154, 146, 245, 0.2);
}

.bd-eye {
	background: var(--bs-paper-bg);
	box-shadow: var(--bs-box-shadow-sm);
	color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .bd-eye {
	background: rgba(255, 255, 255, 0.04);
}

.bd-eye:hover,
.bd-eye[aria-pressed="true"] {
	color: var(--bd-label-primary);
}

.bd-row {
	margin-bottom: 1.5rem;
}

/* Notices: no access to the books, no entries yet */
.bd-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 0.875rem 1.125rem;
	border: 1px solid color-mix(in srgb, var(--bd-notice, var(--bd-label-info)) 40%, transparent);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--bd-notice, var(--bd-label-info)) 9%, var(--bs-paper-bg));
	color: var(--bs-heading-color);
}

.bd-notice.is-warning { --bd-notice: var(--bd-label-warning); }
.bd-notice > .ti { flex: none; margin-top: 0.125rem; color: var(--bd-notice, var(--bd-label-info)); }
.bd-notice-title { margin: 0; font-weight: 600; }
.bd-notice-text { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--bs-secondary-color); }

/* ---- Figure cards: one large, the rest two by two ------------------------------------ */

.bd-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-auto-rows: minmax(10.5rem, auto);
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.bd-grid .is-hero {
	grid-row: span 2;
}

.bd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
	padding: 1.125rem 1.25rem;
	overflow: hidden;
	border-radius: 1rem;
	color: var(--bd-ink-on-fill);
	text-decoration: none;
	isolation: isolate;
	box-shadow:
		inset 0 1px 0 var(--bd-edge),
		inset 0 0 0 1px var(--bd-ring),
		var(--bd-lift) var(--bd-glow-tone, rgba(47, 43, 61, 0.45)),
		var(--bd-halo) var(--bd-glow-tone, rgba(47, 43, 61, 0.45));
	transition: transform 0.3s var(--bd-ease), box-shadow 0.3s var(--bd-ease);
}

/* light on the card: a soft highlight from the top left, a bright spot at the top right,
   a little shade at the foot, so the gradient reads as a lit surface */
.bd-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
		radial-gradient(36% 36% at 88% 12%, rgba(255, 255, 255, 0.28), transparent 70%),
		linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.14));
	pointer-events: none;
}

/* a sheen that sweeps across the card when the pointer rests on it */
.bd-card::after {
	content: "";
	position: absolute;
	inset: -60% -40%;
	z-index: -1;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 48%,
		rgba(255, 255, 255, 0.04) 52%, transparent 60%);
	transform: translateX(-70%);
	pointer-events: none;
}

a.bd-card:hover,
a.bd-card:focus-visible {
	color: var(--bd-ink-on-fill);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 var(--bd-edge),
		inset 0 0 0 1px var(--bd-ring),
		var(--bd-lift-hover) var(--bd-glow-tone, rgba(47, 43, 61, 0.55)),
		var(--bd-halo-hover) var(--bd-glow-tone, rgba(47, 43, 61, 0.55));
}

a.bd-card:focus-visible {
	outline: 2px solid var(--bd-ink-on-fill);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.bd-card::after {
		transition: transform 1.1s var(--bd-ease);
	}

	.bd-card:hover::after {
		transform: translateX(70%);
	}

	/* arrival: opacity and transform only, staggered across the cards */
	.bd-card {
		animation: bd-rise 0.6s var(--bd-ease) backwards;
		animation-delay: calc(var(--i, 0) * 60ms);
	}
}

@keyframes bd-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

.bd-card.tone-purple { background: linear-gradient(140deg, #3c2fb3 0%, #5b4fd6 48%, #7c3aed 100%); --bd-glow-tone: rgba(91, 79, 214, 0.65); }
.bd-card.tone-blue { background: linear-gradient(140deg, #173d9c 0%, #1d4ed8 65%, #2563eb 100%); --bd-glow-tone: rgba(29, 78, 216, 0.6); }
.bd-card.tone-violet { background: linear-gradient(140deg, #4c1d95 0%, #6d28d9 55%, #7c3aed 100%); --bd-glow-tone: rgba(109, 40, 217, 0.6); }
.bd-card.tone-rose { background: linear-gradient(140deg, #881337 0%, #be123c 65%, #e11d48 100%); --bd-glow-tone: rgba(190, 18, 60, 0.55); }
.bd-card.tone-green { background: linear-gradient(140deg, #064e3b 0%, #047857 68%, #059669 100%); --bd-glow-tone: rgba(4, 120, 87, 0.55); }

.bd-card-top {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.bd-chip {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
	font-size: 1.25rem;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.4);
}

.is-hero .bd-chip {
	width: 3.25rem;
	height: 3.25rem;
	font-size: 1.5rem;
}

.bd-label {
	min-width: 0;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bd-on-soft);
}

.bd-label.is-hero {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
}

.bd-pill {
	flex-shrink: 1;
	min-width: 0;
	margin-inline-start: auto;
	padding: 0.25rem 0.625rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--bd-ink-on-fill);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.bd-pill::before {
	content: "";
	display: inline-block;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-inline-end: 0.375rem;
	border-radius: 999px;
	background: currentColor;
	vertical-align: 0.0625rem;
}

/* status dots glow in their own colour (the dot, never the figure) */
.bd-pill.is-good::before { background: #86efac; box-shadow: 0 0 0.5rem #86efac; }
.bd-pill.is-warn::before { background: #fde68a; box-shadow: 0 0 0.5rem #fde68a; }
.bd-pill.is-bad::before { background: #fecdd3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0.5rem #fecdd3; }
.bd-pill.is-neutral::before { background: rgba(255, 255, 255, 0.7); }

.bd-value {
	margin: 0.125rem 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bd-ink-on-fill);
	overflow-wrap: anywhere;
	transition: filter 0.25s var(--bd-ease);
}

.is-hero .bd-value {
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
}

.bd-delta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.3125rem;
	margin: 0;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.75rem;
	color: var(--bd-ink-on-fill);
}

.bd-delta strong {
	font-weight: 700;
}

.bd-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--bd-on-soft);
}

/* sparkline: thin bars, the latest lit. ECharts draws it (v91) and starts its bars 8px
   down, room for the latest one's glow, so the padding is that much less; the .bd-bar
   rules are the fallback without the library */
.bd-spark {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	height: 3rem;
	margin-top: auto;
	padding-top: 0.25rem;
}

.bd-spark.is-hero {
	height: 5.5rem;
}

.bd-bar {
	flex: 1;
	max-width: 1.125rem;
	height: var(--h);
	border-radius: 0.375rem 0.375rem 0.125rem 0.125rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22));
}

.bd-bar.is-now {
	background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.85));
	box-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.75), 0 0 2rem rgba(255, 255, 255, 0.45);
}

/* ---- Cards ---------------------------------------------------------------------------- */

.bd-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.bd-card-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.bd-card-note {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--bs-secondary-color);
}

.bd-attention,
.bd-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-attention {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.bd-attention-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-inline: -0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.25s var(--bd-ease);
}

.bd-attention-item:hover,
.bd-attention-item:focus-visible {
	background-color: var(--bd-hover);
	color: inherit;
}

.bd-attention-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.bd-attention-title {
	font-weight: 500;
	color: var(--bs-heading-color);
}

.bd-attention-detail {
	overflow: hidden;
	font-size: 0.8125rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--bs-secondary-color);
}

.bd-attention-action {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.125rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--bs-link-color);
}

/* Charts */
.bd-chart {
	min-height: var(--bd-chart-height, 260px);
	margin-inline: -0.5rem;
}

.bd-chart-card.is-table .bd-chart {
	display: none;
}

/* Vuexy's text button is #808390 in both themes, under 4.5:1 on either paper */
.bd-page .btn-text-secondary,
.layout-navbar .btn-text-secondary {
	color: var(--bs-secondary-color);
}

.btn.bd-table-toggle[aria-pressed="true"] {
	background-color: var(--bd-hover);
	color: var(--bs-link-color);
}

.bd-chart-table {
	max-height: calc(var(--bd-chart-height, 260px) + 2rem);
	overflow: auto;
}

/* Tables */
.bd-table {
	margin: 0;
}

.bd-table > :not(caption) > * > * {
	padding: 0.75rem 1.5rem;
	vertical-align: middle;
}

.bd-table thead th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

/* breakdown tables fit five columns in half a page: a step smaller, closer set */
.bd-breakdown {
	font-size: 0.8125rem;
}

.bd-breakdown > :not(caption) > * > * {
	padding: 0.6875rem 0.75rem;
}

.bd-breakdown > :not(caption) > * > :first-child {
	padding-inline-start: 1.5rem;
}

.bd-breakdown > :not(caption) > * > :last-child {
	padding-inline-end: 1.5rem;
}

.bd-breakdown .bd-cell-bar {
	width: 2.5rem;
}

.bd-table tbody tr:last-child > * {
	border-bottom: 0;
}

.bd-table tbody th {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bs-body-color);
}

.bd-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bd-status {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

.bd-cell-bar {
	display: inline-block;
	width: 3.5rem;
	height: 0.375rem;
	margin-inline-start: 0.5rem;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
	vertical-align: middle;
}

.bd-cell-bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #6a5fdf, #8b80f3);
}

/* Lists */
.bd-list > li + li {
	border-top: 1px solid var(--bs-border-color);
}

.bd-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
}

.bd-list-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.bd-list-link {
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--bs-heading-color);
	text-decoration: none;
}

.bd-list-link:hover,
.bd-list-link:focus-visible {
	color: var(--bd-label-primary);
}

/* What stands out: observations under the figures, each lit in its tone */
.bd-insights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.bd-insight {
	--bd-insight: var(--bd-label-primary);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: 0.875rem;
	background: var(--bs-paper-bg);
	box-shadow: var(--bs-box-shadow);
}

.bd-insight.is-good { --bd-insight: var(--bd-label-success); }
.bd-insight.is-warn { --bd-insight: var(--bd-label-warning); }
.bd-insight.is-bad { --bd-insight: var(--bd-label-danger); }

.bd-insight-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.625rem;
	background: color-mix(in srgb, var(--bd-insight) 14%, transparent);
	color: var(--bd-insight);
	box-shadow: 0 0 0.75rem color-mix(in srgb, var(--bd-insight) 25%, transparent);
}

.bd-insight-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--bs-heading-color);
}

/* Empty states */
.bd-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 10rem;
	padding: 2rem 1rem;
	text-align: center;
}

.bd-empty-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-paper-bg));
	color: var(--bs-link-color);
}

.bd-empty-title {
	margin: 0;
	font-weight: 500;
	color: var(--bs-heading-color);
}

.bd-empty-text {
	max-width: 36ch;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--bs-secondary-color);
}

/* Hide figures (the eye button): amounts blur in place, so nothing moves */
.bd-private .bd-page .bd-value,
.bd-private .bd-page .bd-delta,
.bd-private .bd-page .bd-chart,
.bd-private .bd-page .bd-chart-table,
.bd-private .bd-page .bd-num,
.bd-private .bd-page .bd-attention-title,
.bd-private .bd-page .bd-attention-detail {
	filter: blur(0.6rem);
}

/* ---- Narrower screens: the large card on top, the rest two by two, then one column ---- */
@media (max-width: 1100px) {
	.bd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bd-grid .is-hero {
		grid-column: 1 / -1;
		grid-row: span 1;
	}
}

@media (max-width: 640px) {
	.bd-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.bd-label.is-hero {
		margin-top: 0.5rem;
	}

	.bd-spark.is-hero {
		height: 3.5rem;
	}

	.bd-header {
		align-items: stretch;
	}

	.bd-actions .btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.bd-org {
		max-width: 46vw;
	}

	.bd-table > :not(caption) > * > * {
		padding: 0.625rem 1rem;
	}

	.bd-list-item {
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}

	.bd-list-text {
		flex-basis: 100%;
	}
}

/* ---- The account pages (2026-11-01): /superadmin/dashboard, /admin/dashboard, /profile,
   /settings and /register (nepal_ird.account). The same tokens as above. ---- */

/* a long organisation or person name wraps in a breakdown table, so every column stays in view */
.bd-breakdown td:first-child { min-width: 9rem; }
.bd-breakdown td:first-child .bd-list-link { white-space: normal; overflow-wrap: anywhere; }

/* the setup checklist */
.bd-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bd-checklist li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.bd-checklist li + li { border-top: 1px solid var(--bs-border-color); }
.bd-checklist li > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bd-checklist strong { color: var(--bs-heading-color); font-weight: 500; }
.bd-checklist small { color: var(--bs-secondary-color); }
.bd-checklist .is-done > .ti { color: var(--bd-label-success); }
.bd-checklist .is-todo > .ti { color: var(--bd-label-warning); }

/* Settings: a heading per part, a card per setting */
.bd-settings { margin-bottom: 2rem; }
.bd-section-title {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
	margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 600; color: var(--bs-heading-color);
}
.bd-section-note { font-size: 0.8125rem; font-weight: 400; color: var(--bs-secondary-color); }
.bd-setting { text-decoration: none; transition: transform 0.25s var(--bd-ease), box-shadow 0.25s var(--bd-ease); }
.bd-setting .card-body { display: flex; align-items: flex-start; gap: 1rem; }
.bd-setting-text { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.bd-setting-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--bs-heading-color); font-weight: 600; }
.bd-setting-detail { color: var(--bs-secondary-color); font-size: 0.875rem; }
.bd-setting-go { flex: none; margin-top: 0.15rem; color: var(--bs-secondary-color); }
.bd-setting:hover, .bd-setting:focus-visible { transform: translateY(-2px); box-shadow: var(--bs-box-shadow-lg); }
.bd-setting:hover .bd-setting-go { color: var(--bs-primary); }

/* Profile */
.bd-profile .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.bd-profile-avatar { width: 5.5rem; height: 5.5rem; }
.bd-profile-avatar .avatar-initial { font-size: 2rem; }
.bd-profile-name { margin: 0.5rem 0 0; font-size: 1.25rem; color: var(--bs-heading-color); }
.bd-profile-email { margin: 0; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.bd-facts { width: 100%; margin: 1.25rem 0 0; text-align: left; border-top: 1px solid var(--bs-border-color); }
.bd-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--bs-border-color); }
.bd-facts dt { font-weight: 400; color: var(--bs-secondary-color); }
.bd-facts dd { margin: 0; color: var(--bs-heading-color); text-align: right; }
.bd-subhead { margin: 1.5rem 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bs-secondary-color); }
.bd-list-item > .avatar { margin-right: -0.25rem; }
.bd-segment button {
	padding: 0.375rem 0.875rem; border: 0; border-radius: 0.5rem; background: none;
	font-size: 0.8125rem; font-weight: 500; color: var(--bs-secondary-color);
	transition: background-color 0.2s var(--bd-ease), color 0.2s var(--bd-ease);
}
.bd-segment button:hover { color: var(--bs-heading-color); }
.bd-segment button.is-active,
.bd-segment button.active {
	background: linear-gradient(135deg, #6a5fdf, #5b4fd6);
	color: var(--bd-ink-on-fill);
	box-shadow: 0 0.25rem 0.75rem -0.25rem color-mix(in srgb, #7367f0 60%, transparent);
}
.bd-segment button:focus-visible { outline: 2px solid var(--bs-link-color); outline-offset: 2px; }
.bd-telegram-code {
	padding: 0.85rem 1rem; border-radius: 0.625rem; border: 1px dashed var(--bs-border-color);
	font-size: 0.875rem; color: var(--bs-body-color);
}
.bd-telegram-code strong { font-size: 1.125rem; letter-spacing: 0.08em; color: var(--bs-heading-color); }

/* /register: the sign-in page's card, wider for the form */
.bd-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.bd-auth-inner { width: 100%; max-width: 40rem; }
.bd-auth-card .card-body { padding: clamp(1.25rem, 4vw, 2.5rem); }
.bd-auth-brand { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; text-decoration: none; color: var(--bs-heading-color); font-size: 1.125rem; font-weight: 700; }
.bd-auth-brand img { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
.bd-auth-title { margin: 0 0 0.5rem; font-size: 1.625rem; color: var(--bs-heading-color); }
.bd-auth-lead { margin: 0 0 1.25rem; color: var(--bs-secondary-color); }
.bd-auth-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.bd-auth-steps li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--bs-primary) 9%, transparent); color: var(--bs-heading-color); font-size: 0.8125rem; }
.bd-auth-steps span { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary); color: #fff; font-size: 0.75rem; font-weight: 600; }
@media (max-width: 575.98px) { .bd-auth-steps { grid-template-columns: 1fr; } }
.bd-auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--bs-secondary-color); font-size: 0.8125rem; }
.bd-auth-or::before, .bd-auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }
.bd-auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.5rem 0 0; color: var(--bs-secondary-color); }
.bd-auth-done { text-align: center; padding: 1rem 0 0.5rem; }
.bd-auth-tick {
	display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: 50%;
	background: color-mix(in srgb, var(--bd-label-success) 16%, transparent); color: var(--bd-label-success); font-size: 1.5rem; font-weight: 700;
}
.bd-auth-tick.is-warn { background: color-mix(in srgb, var(--bd-label-warning) 16%, transparent); color: var(--bd-label-warning); }
.bd-google-box { display: flex; justify-content: center; min-height: 44px; }
.bd-google-who { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.75rem; border-radius: 0.625rem; border: 1px solid var(--bs-border-color); }
.bd-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bd-setting { transition: none; } }