/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-mgwqiz5g03] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main[b-mgwqiz5g03] {
    flex: 1;
    min-width: 0; /* let wide tables scroll instead of pushing the layout */
}

/* Below the breakpoint the sidebar is an overlay, so it reserves no space.
   At and above it, this element holds the gutter the fixed panel sits in.
   The 700px here must match NavMenu.razor.css - both read --sidebar-w. */
@media (min-width: 700px) {
    .page[b-mgwqiz5g03] {
        flex-direction: row;
    }

    .sidebar[b-mgwqiz5g03] {
        width: var(--sidebar-w);
        flex: 0 0 var(--sidebar-w);
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    article[b-mgwqiz5g03] {
        padding-left: 2.5rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 699.98px) {
    /* Clear the fixed hamburger */
    article[b-mgwqiz5g03] {
        padding-top: 3.5rem;
    }
}

#blazor-error-ui[b-mgwqiz5g03] {
    color-scheme: dark only;
    background: #2a1620;
    color: #fecdd3;
    border-top: 1px solid rgba(248, 113, 113, 0.5);
    bottom: 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.92rem;
}

    #blazor-error-ui .dismiss[b-mgwqiz5g03] {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.55rem;
    }

    #blazor-error-ui .reload[b-mgwqiz5g03] {
        color: #fda4af;
        text-decoration: underline;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar. Structure is unchanged - a hidden checkbox drives the mobile
   slide-in, the panel is fixed at var(--sidebar-w), and the submenu still
   animates on max-height. Everything below is presentation only. */

.nav-scrollable[b-4ugafxuqdk] {
	background: linear-gradient(180deg, #101a2b 0%, var(--surface-1) 45%, #0c1424 100%);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 100dvh;
	width: var(--sidebar-w);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	overflow-y: auto;
	transition: transform var(--slow) var(--ease);
	transform: translateX(-100%);
	box-shadow: var(--shadow-3);
}

/* ================================
   Mobile toggler
================================ */
.navbar-toggler[b-4ugafxuqdk] {
	appearance: none;
	cursor: pointer;
	width: 2.75rem;
	height: 2.75rem;
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 212, 191, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem, var(--surface-raised);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow-2);
	transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

	.navbar-toggler:hover[b-4ugafxuqdk] {
		border-color: var(--accent);
	}

	.navbar-toggler:checked[b-4ugafxuqdk] {
		border-color: var(--accent);
	}

/* Open state. !important because the always-open desktop rule below is also
   !important - without it the two sit at different specificities and the
   off-canvas default silently wins on mobile. */
.navbar-toggler:checked ~ .nav-scrollable[b-4ugafxuqdk] {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	height: 100dvh;
	width: var(--sidebar-w);
	z-index: 1000;
	overflow-y: auto;
	transform: translateX(0) !important;
}

/* ================================
   Brand
================================ */
.nav-title[b-4ugafxuqdk] {
	border-bottom: 1px solid var(--border) !important;
	position: relative;
}

	/* Teal hairline that fades out at both ends - reads more considered
	   than a flat 1px rule across the full width. */
	.nav-title[b-4ugafxuqdk]::after {
		content: "";
		position: absolute;
		left: 12%;
		right: 12%;
		bottom: -1px;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--accent), transparent);
		opacity: 0.55;
	}

	.nav-title[b-4ugafxuqdk]  span {
		letter-spacing: 0.14em;
		background: linear-gradient(92deg, var(--brand), #5ee0d0);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

/* ================================
   Nav items
================================ */
.nav-item[b-4ugafxuqdk] {
	font-size: 0.925rem;
	padding-bottom: 0.15rem;
}

	.nav-item:first-of-type[b-4ugafxuqdk] {
		padding-top: 0.35rem;
	}

	.nav-item:last-of-type[b-4ugafxuqdk] {
		padding-bottom: 0.5rem;
	}

	.nav-item[b-4ugafxuqdk]  .nav-link {
		color: var(--text-muted);
		background: none;
		border: none;
		border-radius: var(--r-sm);
		height: 2.85rem;
		display: flex;
		align-items: center;
		line-height: 1.2;
		width: 100%;
		padding-inline: 0.7rem;
		position: relative;
		font-weight: 500;
		transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
	}

	/* Accent bar on the active item, grown from the left edge */
	.nav-item[b-4ugafxuqdk]  .nav-link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 0;
		border-radius: 0 3px 3px 0;
		background: var(--accent);
		transform: translateY(-50%);
		transition: height var(--fast) var(--ease);
	}

	.nav-item[b-4ugafxuqdk]  .nav-link:hover {
		background-color: rgba(148, 163, 184, 0.08);
		color: var(--text);
	}

	.nav-item[b-4ugafxuqdk]  a.active {
		background-color: var(--accent-wash);
		color: var(--accent);
		font-weight: 600;
	}

		.nav-item[b-4ugafxuqdk]  a.active::before {
			height: 55%;
		}

	/* Icons sit at a lower weight until their row is hovered or active */
	.nav-item[b-4ugafxuqdk]  .nav-link img {
		opacity: 0.72;
		transition: opacity var(--fast) var(--ease);
	}

	.nav-item[b-4ugafxuqdk]  .nav-link:hover img,
	.nav-item[b-4ugafxuqdk]  a.active img {
		opacity: 1;
	}

/* Submenu parent chevron */
.nav-item[b-4ugafxuqdk]  .parent-dose span:last-child {
	font-size: 0.7rem;
	color: var(--text-faint);
	transition: color var(--fast) var(--ease);
}

.nav-item[b-4ugafxuqdk]  .parent-dose:hover span:last-child {
	color: var(--accent);
}

/* ================================
   Submenu + connector tree

   The trunk and branches are pseudo-elements on the links, not absolutely
   positioned spans with hand-tuned offsets. Each row draws its own vertical
   segment across its full margin box, so consecutive rows join seamlessly and
   nothing drifts when row heights change.

   --tree-indent : link offset from the submenu's left edge
   --tree-run    : horizontal branch length (also the trunk's distance back)
   Trunk lands at (nav-item padding 1rem) + --tree-indent - --tree-run
   = 16 + 42 - 23 = 35px, centring the 2px line on the parent icon at 36px.
================================ */
.submenu[b-4ugafxuqdk] {
	--tree-indent: 42px;
	--tree-run: 23px;
	--tree-line: 2px;
	--sub-row-h: 2.35rem;
	--sub-row-gap: 4px;
	max-height: 0;
	overflow-y: hidden;
	overflow-x: visible;
	transition: max-height var(--slow) var(--ease), opacity var(--slow) var(--ease);
	opacity: 0;
	position: relative;
}

	.submenu.open[b-4ugafxuqdk] {
		max-height: 165px;
		opacity: 1;
	}

	.submenu[b-4ugafxuqdk]  .nav-link {
		position: relative;
		height: 2.35rem;
		font-size: 0.88rem;
		width: auto;
		margin-left: var(--tree-indent);
		margin-block: 4px;
		padding-left: 0.6rem;
		white-space: nowrap;
	}

	/* Vertical trunk. A real element, not a pseudo, and one per submenu rather
	   than one per row: a pseudo stretched between top and bottom resolves to
	   zero height here, and per-row segments can only ever meet at a seam.
	   Runs from the parent row's bottom edge down to the last row's centre. */
	.tree-trunk[b-4ugafxuqdk] {
		position: absolute;
		left: calc(var(--tree-indent) - var(--tree-run));
		top: 0;
		bottom: calc(var(--sub-row-h) / 2 + var(--sub-row-gap));
		width: var(--tree-line);
		background: var(--border-strong);
		pointer-events: none;
	}

	/* Horizontal branch, meeting the trunk on the left and the link box on the right. */
	.submenu[b-4ugafxuqdk]  .nav-link::after {
		content: "";
		position: absolute;
		left: calc(-1 * var(--tree-run));
		top: 50%;
		width: var(--tree-run);
		height: var(--tree-line);
		background: var(--border-strong);
		transform: translateY(-50%);
		border-radius: 0 var(--tree-line) var(--tree-line) 0;
	}

	/* The active row lights its own connector so the branch reads as selected. */
	.submenu[b-4ugafxuqdk]  a.active::after {
		background: var(--accent);
	}

/* Images inside menu */
.nav-scrollable img[b-4ugafxuqdk] {
	width: 24px;
	height: auto;
	margin-right: 10px;
	vertical-align: middle;
}

/* ================================
   Responsive - both breakpoints derive from the same token as MainLayout
================================ */
@media (max-width: 699.98px) {
	.navbar-toggler[b-4ugafxuqdk] {
		display: block;
		position: fixed;
		top: 0.75rem;
		right: 1rem;
		z-index: 1000;
	}

	/* No transform here on purpose - the base rule already parks the panel
	   off-canvas, and re-declaring it competes with the :checked rule. */
	.nav-scrollable[b-4ugafxuqdk] {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--sidebar-w);
		height: 100dvh;
		overflow-y: auto;
		z-index: 1000;
	}
}

@media (min-width: 700px) {
	.navbar-toggler[b-4ugafxuqdk] {
		display: none;
	}

	.nav-scrollable[b-4ugafxuqdk] {
		display: flex !important;
		position: fixed;
		top: 0;
		left: 0;
		width: var(--sidebar-w);
		height: 100dvh;
		overflow-y: auto;
		transform: translateX(0) !important;
		z-index: 1000;
	}
}

/* ================================
   Footer / donate block
================================ */
.nav-scrollable[b-4ugafxuqdk]  .nav-item + div p {
	color: var(--text-faint);
}

/* ================================
   "New post" indicator
================================ */
.new-post-dot[b-4ugafxuqdk] {
	margin-left: auto;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--accent);
	box-shadow: 0 0 0 0 var(--accent-ring);
	animation: new-post-pulse-b-4ugafxuqdk 2.4s infinite;
}

@keyframes new-post-pulse-b-4ugafxuqdk {
	0% {
		box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(45, 212, 191, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.new-post-dot[b-4ugafxuqdk] {
		animation: none;
	}
}