/*
 * Fredoka — display font for public page headings (SIL OFL, see OFL-Fredoka.txt)
 */
@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/font/fredoka-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/font/fredoka-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Override some defaults */
:root {
	--tblr-primary: #4c8c4a;
	--tblr-primary-rgb: 76, 140, 74;
	--tblr-secondary: #2f4b34;
	--tblr-secondary-rgb: 47, 75, 52;
	--tblr-highlight-bg: #e8a13c;
	--tblr-purple-rgb: 232, 84, 228;
	--fc-bg-event-opacity: 1;
	--tblr-dark: #2b2f2e; /** Hover etc. **/
	--tblr-dark-rgb: 43, 47, 46;

	/* Body */
    --tblr-body-color: var(--tblr-dark);
    --tblr-body-color-rgb: 43, 47, 46;
    --tblr-body-bg: #f6f3ed;
    --tblr-body-bg-rgb: 246, 243, 237;
    --tblr-emphasis-color: var(--tblr-secondary);
    --tblr-emphasis-color-rgb: 47, 75, 52;
    --tblr-secondary-color: var(--tblr-dark);
    --tblr-secondary-color-rgb: 43, 47, 46;
    --tblr-secondary-bg: var(--tblr-light);
    --tblr-secondary-bg-rgb: var(--tblr-light-rgb);
    --tblr-tertiary-color: #b3ad9f;
    --tblr-tertiary-color-rgb: 179, 173, 159;
    --tblr-tertiary-bg: var(--tblr-light);
    --tblr-tertiary-bg-rgb: var(--tblr-light-rgb);
    --tblr-link-color: var(--tblr-primary);
    --tblr-link-color-rgb: var(--tblr-primary-rgb);
    --tblr-code-color: var(--tblr-gray-600);
    --tblr-border-color: var(--tblr-border-color-translucent);
	--tblr-box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
	--tblr-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --tblr-box-shadow-lg: 0 1rem 3rem rgba(246, 243, 237, 1.0);
    --tblr-focus-ring-color: rgba(var(--tblr-primary-rgb), 0.25);
    --tblr-form-valid-color:#4c8c4a;
    --tblr-form-valid-border-color: #4c8c4a;
    --tblr-form-invalid-color: #c0392b;
    --tblr-form-invalid-border-color: #c0392b;
	--tblr-icon-color: var(--tblr-light);
    --tblr-disabled-color: #b3ad9f;

	/* Warnings: */
	--tblr-success: #4c8c4a;
    --tblr-info: #2980b9;
    --tblr-warning:#e8a13c;
    --tblr-danger: #c0392b;
	--tblr-success-rgb: 76, 140, 74;
    --tblr-info-rgb: 41, 128, 185;
    --tblr-warning-rgb: 232, 161, 60;

	/* Cave theme: warm "headlamp" accent */
	--cave-amber: #e8a13c;
	--cave-amber-dark: #8a5a12;
	--cave-amber-rgb: 232, 161, 60;
	--cave-amber-tint: rgba(var(--cave-amber-rgb), 0.12);
	--tblr-font-display: 'Fredoka', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

:host, :root {
    margin-left: 0;
    margin-right: 0;
}

.badge  {
	--tblr-badge-color: var(--tblr-dark) !important;
}

.navbar {
	--tblr-navbar-bg: #2f4b34 !important;
	--tblr-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .nav-link,
.navbar .dropdown-toggle {
	color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
	color: #fff !important;
}

.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .dropdown-toggle.show {
	color: #e8a13c !important;
}

.navbar .navbar-toggler {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar .navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

.navbar .dropdown-menu {
	min-width: 14rem;
}

.navbar .dropdown-item {
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.navbar .dropdown-menu {
		background-color: #2f4b34 !important;
		border-color: rgba(255, 255, 255, 0.15) !important;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}

	.navbar .dropdown-menu .dropdown-item {
		color: rgba(255, 255, 255, 0.8) !important;
	}

	.navbar .dropdown-menu .dropdown-item:hover,
	.navbar .dropdown-menu .dropdown-item:focus {
		color: #fff !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
	}

	.navbar .dropdown-menu .dropdown-divider {
		border-color: rgba(255, 255, 255, 0.2) !important;
	}

	.navbar .dropdown-menu .dropdown-header {
		color: rgba(255, 255, 255, 0.6) !important;
	}
}

.page {
	min-height: 100vh;
}

/* Form icons: add spacing between icon and text */
.card-header .ti + .card-title,
.card-header .ti + h3 {
	margin-left: 0.5rem;
}

/* Invalid / valid feedback icon: position right */
.form-control.is-invalid,
.form-select.is-invalid {
	background-position: right 0.5rem center;
}

.form-control.is-valid,
.form-select.is-valid {
	background-position: right 0.5rem center;
}

/* Homepage hero */
.hero {
	position: relative;
	min-height: 360px;
	overflow: hidden;
}

/* Blurred background layer (activity pages) */
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Activity detail hero: branded "headlamp" banner */
.activity-hero {
	position: relative;
	min-height: 230px;
	overflow: hidden;
	background-color: #2f4b34;
	background-image:
		radial-gradient(ellipse at 100% 0%, rgba(232, 161, 60, 0.34) 0%, rgba(232, 161, 60, 0.07) 45%, rgba(0, 0, 0, 0) 72%),
		linear-gradient(180deg, #35543a 0%, #2f4b34 58%, #223a26 100%);
}

.activity-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.activity-hero-overlay {
	position: relative;
	z-index: 2;
	min-height: 230px;
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Activity detail hero date badge */
.activity-hero-date {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	line-height: 1;
	color: #2f4b34;
	background: #e8a13c;
	border-radius: var(--tblr-border-radius);
}

.activity-hero-date .day {
	font-size: 1.5rem;
	font-weight: 700;
}

.activity-hero-date .month {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}

.hero-overlay {
	position: relative;
	z-index: 2;
	min-height: 360px;
	padding: 2rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.hero-eyebrow {
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.12em;
}

@media (max-width: 767.98px) {
	.hero {
		min-height: 260px;
	}

	.hero-overlay {
		min-height: 260px;
		padding: 1.25rem;
	}

	.activity-hero,
	.activity-hero-overlay {
		min-height: 200px;
	}

	.activity-hero-overlay {
		padding: 1.25rem;
	}
}

/* Homepage date badge */
.date-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	line-height: 1;
	color: #fff;
	background: var(--tblr-primary);
	border-radius: var(--tblr-border-radius);
}

.date-badge-day {
	font-size: 1.5rem;
	font-weight: 700;
}

.date-badge-month {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}

/* Homepage feature icon */
.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	font-size: 1.35rem;
	color: var(--tblr-primary);
	background: rgba(var(--tblr-primary-rgb), 0.12);
	border-radius: var(--tblr-border-radius);
}

/* Activity cards */
.activity-card {
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.activity-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}

.activity-card-image {
	position: relative;
	display: block;
	height: 10rem;
	overflow: hidden;
	background: linear-gradient(135deg, #2f4b34 0%, #4c8c4a 100%);
}

.activity-card-img,
.activity-card-fallback {
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.activity-card-img {
	object-fit: cover;
}

.activity-card:hover .activity-card-img,
.activity-card:hover .activity-card-fallback {
	transform: scale(1.05);
}

.activity-card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.9);
	font-size: 3rem;
}

.activity-card-fallback--announcement {
	background: linear-gradient(135deg, #e8a13c 0%, #b76e1a 100%);
	color: rgba(255, 255, 255, 0.95);
}

.activity-card-date {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--tblr-border-radius);
}

.activity-card-date .day {
	font-size: 1.25rem;
	font-weight: 700;
}

.activity-card-date .month {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}

/* Accent bar on admin form cards, matching the activity card palette */
.card-accent {
	position: relative;
	overflow: hidden;
}

.card-accent::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #4c8c4a 0%, #e8a13c 100%);
}

/* Show the first 5 lines of a text, expand on demand */
.description-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.description-clamp-expanded {
	display: block;
	-webkit-line-clamp: unset;
}

/* Statistics: activity density heatmap */
.heatmap-tile {
	height: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: var(--tblr-border-radius);
}

.heatmap-tile-active {
	color: #fff;
}

.heatmap-tile-empty {
	background: var(--tblr-tertiary-bg);
	color: var(--tblr-secondary-color);
}

.heatmap-month {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.heatmap-count {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Statistics: stacked bar chart */
.bar-chart {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	flex: 1;
	min-height: 220px;
}

/* Statistics: stretch card bodies so chart and categories match height */
.row .col-lg-7 > .card > .card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.row .col-lg-5 > .card > .table-responsive {
	flex: 1;
}

.table-compact td.text-end {
	white-space: nowrap;
}

.bar-column {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bar-stack {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 1px;
}

.bar-segment {
	width: 55%;
	min-height: 2px;
	border-radius: 2px 2px 0 0;
}

.bar-paid {
	background: #27ae60;
}

.bar-pending {
	background: #e67e22;
}

.bar-cancelled {
	background: #bdc3c7;
}

.bar-incoming {
	background: #27ae60;
}

.bar-outgoing {
	background: #e74c3c;
}

.bar-label {
	margin-top: 0.5rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--tblr-secondary-color);
}

/* Statistics: donut chart */
.donut {
	width: 10rem;
	height: 10rem;
	flex-shrink: 0;
	border-radius: 50%;
}

/* Statistics: coverage ring around the category donut
 *
 * An extra circular border around the donut: the --frame-progress arc at
 * the top shows how much of the incoming money was covered by matched
 * registrations, the rest of the ring stays muted. The inner background is
 * repainted on the padding-box so the arc only shows as a border ring. */
.donut-coverage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10rem;
	height: 10rem;
	padding: 5px;
	border: 4px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(var(--tblr-card-bg, #fff), var(--tblr-card-bg, #fff)) padding-box,
		conic-gradient(
			var(--tblr-success, #2fb344) 0 var(--frame-progress, 0%),
			var(--tblr-border-color, #e2e5f2) var(--frame-progress, 0%) 100%
		) border-box;
}

.donut-coverage .donut {
	width: 100%;
	height: 100%;
}

/* Statistics: color-coded legends */
.dot {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.stats-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

.stats-legend-item {
		display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.stats-legend-swatch {
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 0.25rem;
	flex-shrink: 0;
}

.stats-legend-gradient {
	display: inline-block;
	width: 5rem;
	height: 0.9rem;
	border-radius: 0.25rem;
	flex-shrink: 0;
	background: linear-gradient(to right, rgba(84, 173, 233, 0.25), rgba(84, 173, 233, 1));
}

/* Statistics: load-in animations */
@keyframes stat-bar-grow {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@keyframes stat-fade-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bar-stack {
	transform-origin: bottom;
	animation: stat-bar-grow 0.6s ease-out both;
}

.heatmap-tile {
	animation: stat-fade-in 0.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.bar-stack,
	.heatmap-tile {
		animation: none;
	}
}

/* Statistics: amount distribution bars */
.bar-volume {
	background: #3498db;
}

/* Statistics: balance line chart */

/* The plot wrapper is a positioning context for the dots: the SVG
 * itself stretches with preserveAspectRatio="none", so circles drawn
 * inside it would be stretched ellipses. The dots are separate,
 * absolutely positioned elements that stay round at any card width. */
.balance-plot {
	position: relative;
}

.balance-chart {
	width: 100%;
	height: 9rem;
	display: block;
}

.balance-line {
	fill: none;
	stroke: #3498db;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.balance-area {
	fill: rgba(52, 152, 219, 0.15);
	stroke: none;
}

.balance-zero {
	stroke: var(--tblr-border-color);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	vector-effect: non-scaling-stroke;
}

.balance-dot {
	position: absolute;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: #3498db;
	transform: translate(-50%, -50%);
}

.balance-months {
	display: flex;
	gap: 0.5rem;
}

.balance-months > div {
	flex: 1;
	text-align: center;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--tblr-secondary-color);
}

/* Picture reordering: feedback while dragging */
.picture-grid-item-drop-target,
.drop-target {
	outline: 2px dashed var(--tblr-primary);
	outline-offset: 2px;
}

/* Table: smaller font for dense lists */
.table-compact {
	font-size: 0.8125rem;
}

/* Select2: smaller font in the field and the dropdown */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	font-size: 0.8125rem;
}

.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	font-size: 0.8125rem;
}

/* Select2: opt-in normal (default) size, add select2-md to the select */
.select2-md ~ .select2-container--bootstrap-5 .select2-selection,
.select2-md ~ .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
.select2-md ~ .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-md ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	font-size: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   Cave theme: display headings (public pages only)
   ───────────────────────────────────────────────────────────── */

.font-display,
.page-heading,
.hero-overlay h1,
.activity-card .card-title,
.feature-title {
	font-family: var(--tblr-font-display);
	font-weight: 700;
}

.hero-overlay h1 {
	font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
	letter-spacing: 0.01em;
}

.activity-card .card-title,
.feature-title {
	font-weight: 600;
}

.page-heading {
	font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
}

/* Warm accent colours */
.text-cave-amber {
	color: var(--cave-amber-dark);
}

.badge-amber {
	color: #fff;
	background: var(--cave-amber);
}

.badge-amber-lt {
	color: var(--cave-amber-dark);
	background: var(--cave-amber-tint);
}

/* ─────────────────────────────────────────────────────────────
   Cave theme: hero atmosphere
   ───────────────────────────────────────────────────────────── */

/* Headlamp glow next to the hero eyebrow */
.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hero-eyebrow::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--cave-amber);
	box-shadow: 0 0 8px 2px rgba(var(--cave-amber-rgb), 0.6);
}

/* Soft torch glow in the corner of the hero */
.hero-cave-light {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--cave-amber-rgb), 0.7) 0%, rgba(var(--cave-amber-rgb), 0) 70%);
	filter: blur(6px);
	pointer-events: none;
	z-index: 2;
}

/* Stalactites hanging from the top edge of the hero */
.hero-stalactites {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 32px;
	pointer-events: none;
	z-index: 2;
	opacity: 0.55;
}

/* Gently flapping bat, decorative only */
.bat-float {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 1em;
	animation: bat-flap 4s ease-in-out infinite;
	transform-origin: 50% 100%;
}

@keyframes bat-flap {
	0%, 100% {
		transform: translateY(0) rotate(-6deg);
	}
	50% {
		transform: translateY(-5px) rotate(6deg);
	}
}

/* Roaming bat: occasionally flies across the viewport */
.flying-bat {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	pointer-events: none;
	font-size: 2.75rem;
	line-height: 1;
	opacity: 0.9;
	will-change: transform;
}

.flying-bat--flipped {
	scale: -1 1;
}

.flying-bat--glyph {
	display: block;
	animation: flying-bat-flap 0.28s ease-in-out infinite;
	transform-origin: 50% 100%;
}

@keyframes flying-bat-flap {
	0%, 100% {
		transform: translateY(0) rotate(-8deg);
	}
	50% {
		transform: translateY(-3px) rotate(8deg);
	}
}

/* ─────────────────────────────────────────────────────────────
   Cave theme: empty states with a "headlamp" pulse
   ───────────────────────────────────────────────────────────── */

.empty-cave {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 0 auto;
	padding: 3rem 1rem;
	text-align: center;
}

.empty-cave-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	font-size: 2.5rem;
	margin-bottom: 0.25rem;
	border-radius: 50%;
	background: var(--cave-amber-tint);
	animation: torch-pulse 2.5s ease-in-out infinite;
}

.empty-cave-title {
	font-family: var(--tblr-font-display);
	font-weight: 700;
}

@keyframes torch-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(var(--cave-amber-rgb), 0.45);
	}
	50% {
		box-shadow: 0 0 0 14px rgba(var(--cave-amber-rgb), 0);
	}
}

/* ─────────────────────────────────────────────────────────────
   Leaf shower on registration success
   ───────────────────────────────────────────────────────────── */

.leaf-fall {
	position: fixed;
	top: -3rem;
	pointer-events: none;
	z-index: 2000;
	animation-name: leaf-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.leaf-fall,
.leaf-sway {
	display: block;
}

.leaf-sway svg {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes leaf-fall {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(108vh);
	}
}

@keyframes leaf-sway {
	0% {
		transform: translateX(-24px) rotate(-30deg);
	}
	100% {
		transform: translateX(24px) rotate(30deg);
	}
}

/* ─────────────────────────────────────────────────────────────
   Admin + shared: subtle consistency polish (no jokes)
   ───────────────────────────────────────────────────────────── */

/* Unified page header for admin sections */
.admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.admin-header h1 {
	margin-bottom: 0;
}

.page-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Headings in admin cards follow the base font, slightly tightened */
.card .card-title {
	font-weight: 650;
}

/* Softer, consistent link focus ring */
a:focus-visible,
button:focus-visible {
	outline: 2px solid rgba(var(--tblr-primary-rgb), 0.7);
	outline-offset: 2px;
}

/* Table header + row polish */
.table thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tblr-secondary-color);
}

.table tbody tr:hover {
	background-color: rgba(var(--tblr-primary-rgb), 0.04);
}

/* Reduced motion: calm everything down */
@media (prefers-reduced-motion: reduce) {
	.bat-float,
	.empty-cave-icon {
		animation: none;
	}

	.leaf-fall,
	.flying-bat {
		display: none;
	}
}