/* ============================================================================
   rz-panelmenu.css  —  turns the sidebar section groups into Radzen-style
   expandable PanelMenu panels (click a section header to collapse/expand).
   Reuses your existing .rzl-group / .rzl-section / .rzl-link markup.
   Load AFTER rz-layout.css:
       <link rel="stylesheet" href="~/css/rz-panelmenu.css" asp-append-version="true" />
   ============================================================================ */

/* section header becomes a clickable panel row with a chevron */
.rzl-sidebar .rzl-section {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	border-radius: 8px;
	transition: background .15s, color .15s;
}

	.rzl-sidebar .rzl-section:hover {
		background: rgba(127, 127, 127, .10);
	}

	.rzl-sidebar .rzl-section .pm-chev {
		margin-left: auto;
		font-size: 10px;
		opacity: .55;
		transition: transform .2s ease;
	}
/* collapsed → chevron points right */
.rzl-sidebar .rzl-group.pm-collapsed .rzl-section .pm-chev {
	transform: rotate(-90deg);
}

/* Hide items of a collapsed panel in BOTH modes:
   - in the expanded sidebar (pinned or hovered) — collapses cleanly
   - in the slim icon-rail — no orphan icons from groups you haven't opened
   Group headers stay visible so you can still open a group from the rail. */
.rzl-group.pm-collapsed li:not(.rzl-section) {
	display: none;
}

/* when a panel is open, tint its header a touch so it reads as "active group" */
body.rzl-pinned .rzl-group:not(.pm-collapsed) .rzl-section,
.rzl-sidebar:hover .rzl-group:not(.pm-collapsed) .rzl-section {
	color: var(--rzl-primary, #2563eb);
}