/* Empty Navigation page helpers */
.empty-nav-page{
	--en-bg: #f8fbff;
	--en-surface: rgba(255,255,255,.86);
	--en-border: rgba(15,23,42,.12);
	--en-shadow: 0 16px 40px -24px rgba(2,6,23,.38);
	background: var(--en-bg);
}

/* Ensure page background shows through the app shell */
.empty-nav-page .main-content{
	background: transparent;
}

/* Diagonal landing-style background with safe fallback color */
.empty-nav-page::before{
	content: "";
	position: fixed;
	/* Bigger diagonal slab similar to landing page */
	inset: -68% -30% auto -30%;
	height: 1420px;
	transform: rotate(-10deg);
	border-radius: 80px;
	overflow: hidden;
	pointer-events: none;
	background: var(--en-bg) url("../../images/landing_page/landing_page_diagonal_background.png") center/cover no-repeat;
	clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
	z-index: 0;
}

/* Subtle overlay so text stays readable on bright images */
.empty-nav-page::after{
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,.60), rgba(248,251,255,.94));
	z-index: 0;
}

.empty-navigation-container {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
	margin-top: 5rem;
	padding: 2.25rem 1.75rem;
	border-radius: 1.25rem;
	background: var(--en-surface);
	border: 1px solid var(--en-border);
	box-shadow: var(--en-shadow);
	backdrop-filter: blur(10px);
}

.empty-nav-illustration {
	max-width: 120px;
	height: auto;
	display: inline-block;
	filter: drop-shadow(0 14px 28px rgba(2,6,23,.18));
}

/* Ensure consistent button widths for CTAs */
.same-size-btn {
	min-width: 180px;
}

/* Optional: tighter gap on small screens, comfortable on md+ via Bootstrap gap-2 */
@media (max-width: 575.98px) {
	.empty-navigation-container{
		margin-top: 4rem;
		padding: 1.5rem 1.1rem;
		border-radius: 1rem;
	}
	.empty-navigation-container .btn { width: 100%; }
}

/* Improve tooltip contrast on dark mode if data-bs-theme switches */
[data-bs-theme="dark"] .tooltip-inner {
	background-color: #1f2937;
}
[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
	border-top-color: #1f2937;
}