.card-loader-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	border-radius: inherit;
	background-color: color-mix(in srgb, var(--tblr-bg-surface, #fff), transparent 20%);

	/* Transition setup */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-bs-theme="dark"] .card-loader-overlay {
	background-color: color-mix(in srgb, var(--tblr-bg-surface, #1e293b), transparent 20%);
}

.card-loader-overlay .loader-wrapper {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.75rem;
}

.card-loader-overlay .loader-text {
	color: var(--tblr-body-color);
	font-size: 0.875rem;
	font-weight: 600;
}

.card-loader-overlay .loader-text:empty {
	display: none;
}

.card.is-loading .card-loader-overlay {
	opacity: 1;
	visibility: visible;
}

.navbar-rounded {
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
}

html {
	/* Reserves space for the scrollbar so the layout doesn't shift */
	scrollbar-gutter: stable;
}

/* When the parent has dark theme, turn the logo white */
/* 
[data-bs-theme="dark"] .navbar-brand img {
  filter: brightness(0) invert(1);
} */

.border-none {
	border: none !important;
}


/* 1. Hide all content inside the parent */
.big-is-parent>* {
	visibility: hidden;
}

/* 2. Style the parent container */
.big-is-parent {
	background-color: #fbfbfb;
	border: 2px solid #ddd;
	/* Prevents layout jumping on hover */
	transition: border 0.2s ease;
}

/* 3. Add the dotted border on hover */
.big-is-parent:hover {
	border: 2px dotted #555;
}

.custom-profile-logo {
	max-width: 250px;
	gap: 0.5rem;
	height: 50px;
}

/* Target the shape inside the anchor/group on hover */
svg a[xlink\:title]:hover polygon,
svg a[xlink\:title]:hover path,
svg a[xlink\:title]:hover rect,
svg g.node:hover polygon,
svg g.node:hover path,
svg g.node:hover rect {
	/* Change the background fill on hover */
	fill: var(--tblr-secondary) !important;
	stroke: var(--tblr-primary) !important;
	transition: fill 0.2s ease;
}

/* Ensure the anchor itself is treated as a block for the cursor */
svg a[xlink\:title] {
	cursor: pointer;
}


.chart-positioned {
	position: absolute;
	bottom: -100px;
	right: 120px;
	width: 80%;
	/* or any size you want */
	height: 100%;
	/* adjust to your preferred height */
}


#dbg-fast-api-gateway {
	/* Uses a semi-transparent neutral dark that works in light mode, and stays distinct in dark mode */
	/* High-contrast cyan for visibility */
	/* Makes it pop against any background */
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	cursor: pointer;
	transition: transform 0.2s ease;
}


.color-square {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	cursor: pointer;
}

.color-square::-webkit-color-swatch-wrapper {
	padding: 0;
}

.color-square::-webkit-color-swatch {
	border: none;
}