/* ============================================================================
   rz-panelmenu-polish.css  —  visual polish only.
   Keeps all sections (Workspace · Self-Service · Management ·
   Administration · Settings), keeps your accordion behaviour, keeps the icon
   rail. Just refines spacing, type, icons, dividers, and the active state so
   the menu reads cleaner and more professional.

   Load AFTER rz-panelmenu.css:
       <link rel="stylesheet" href="~/css/rz-panelmenu-polish.css" asp-append-version="true" />
   ============================================================================ */

/* ── Section headers ───────────────────────────────────────────────────────
   Smaller, slightly stronger letter-spacing, a touch more breathing room,
   and a hairline divider above each (except the first) so groups feel like
   real panels — not a flat list. */
.rzl-sidebar .rzl-section {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rzl-text-muted, #69748a);
	padding: 12px 12px 6px;
	margin: 4px 4px 0;
	border-radius: 6px;
	position: relative;
}
.rzl-sidebar .rzl-group + .rzl-group .rzl-section::before {
	content: "";
	position: absolute;
	top: 0; left: 8px; right: 8px;
	border-top: 1px solid var(--rzl-border, #e6e8ec);
	opacity: .9;
}

/* the chevron sits a hair smaller and lower-contrast so it doesn't shout */
.rzl-sidebar .rzl-section .pm-chev { font-size: 9.5px; opacity: .55; }

/* ── Group items ───────────────────────────────────────────────────────────
   Tighter vertical rhythm, consistent icon column, softer hover. */
.rzl-sidebar .rzl-group li:not(.rzl-section) { margin: 1px 4px; }

.rzl-sidebar .rzl-link {
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rzl-text, #1c2230);
	display: flex;
	align-items: center;
	gap: 11px;
	transition: background .12s, color .12s;
}
.rzl-sidebar .rzl-link > i {
	width: 18px;
	text-align: center;
	font-size: 13.5px;
	color: var(--rzl-text-muted, #69748a);
	flex: none;
}
.rzl-sidebar .rzl-link:hover {
	background: var(--rzl-hover, #f3f4f6);
	color: var(--rzl-text, #1c2230);
}

/* ── Active item — slimmer, more "Radzen" ──────────────────────────────────
   A 3px primary left bar instead of a full coloured pill. Reads as the
   current page without overwhelming the rest of the list. */
.rzl-sidebar .rzl-link.active {
	background: var(--rzl-primary-ring, rgba(37,99,235,.09));
	color: var(--rzl-primary, #2563eb);
	font-weight: 600;
	position: relative;
}
.rzl-sidebar .rzl-link.active > i { color: var(--rzl-primary, #2563eb); }
.rzl-sidebar .rzl-link.active::before {
	content: "";
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--rzl-primary, #2563eb);
}

/* ── Foot / Pin button — quieter so it doesn't compete with the nav ───── */
.rzl-sidebar .rzl-foot { padding: 8px 12px; border-top: 1px solid var(--rzl-border, #e6e8ec); }
.rzl-sidebar .rzl-pin {
	font-size: 11.5px;
	color: var(--rzl-text-muted, #69748a);
	padding: 6px 8px;
	border-radius: 6px;
	transition: background .12s, color .12s;
}
.rzl-sidebar .rzl-pin:hover { background: var(--rzl-hover, #f3f4f6); color: var(--rzl-text, #1c2230); }

/* ── Slim icon rail (when not pinned) ─────────────────────────────────────
   Make rail icons look intentional: bigger touch target, subtle hover ring. */
body:not(.rzl-pinned) .rzl-sidebar:not(:hover) .rzl-link {
	justify-content: center;
	padding: 9px 0;
	margin: 1px 6px;
}
body:not(.rzl-pinned) .rzl-sidebar:not(:hover) .rzl-link > i {
	width: auto;
	font-size: 15px;
}
body:not(.rzl-pinned) .rzl-sidebar:not(:hover) .rzl-link.active::before { display: none; }
body:not(.rzl-pinned) .rzl-sidebar:not(:hover) .rzl-link.active {
	background: var(--rzl-primary-ring, rgba(37,99,235,.12));
}

/* ── Dark mode: just trust your existing CSS variables, but soften dividers */
[data-theme="dark"] .rzl-sidebar .rzl-group + .rzl-group .rzl-section::before {
	opacity: .35;
}