/* The navigation column of the seller administration and the MA-Admin
   (templates/navigation/sideNavigation.html.twig). A white column over the full height of the page with a
   fine line to the content, Lucide line icons in dark blue, one entry per row. The current page is
   marked three ways - tint, bar at the left edge, bold label - so it does not rely on colour alone. */

/* The legacy layout table gives the column a grey background (bgcolor) and some padding; with the
   navigation inside, the cell itself becomes the white column. The buyer menu keeps its old cell. */
#usermenuLayout td.navCol:has(.sideNavigation) {
	/* a wide list beside it (all shops, all orders) must not squeeze the column */
	min-width:305px;
	padding:0;
	background:#ffffff;
	border-right:1px solid #e4e8ee;
}

.sideNavigation {
	--navInk:#1f2933;
	--navMuted:#5c6878;
	--navAccent:#1d4a8c;
	--navLine:#e4e8ee;
	--navHover:#f1f4f8;
	--navActiveBg:#e7eef9;
	--navBadge:#c8102e;

	box-sizing:border-box;
	width:100%;
	margin:0;
	padding:6px 0 10px;
	background:#ffffff;
	color:var(--navInk);
	font-size:14px;
	line-height:1.35;
	text-align:left;
}
.sideNavigation *,
.sideNavigation *::before {
	box-sizing:border-box;
}
/* The column stays in view while a long page (shop settings, order list) scrolls. When the menu
   is taller than the window, it scrolls by itself. Sticky moves within its parent, so it is set on
   the element directly in the cell: the menu itself, or the div the settings pages wrap it in. */
.navCol > .sideNavigation.isSticky,
.navCol > div:has(> .sideNavigation.isSticky) {
	position:sticky;
	top:0;
}
.sideNavigation.isSticky {
	max-height:100vh;
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:thin;
}

.sideNavigation svg {
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	flex:none;
}
/* the legacy pages colour every link in #usermenuLayout blue */
#usermenuLayout .sideNavigation a,
#usermenuLayout .sideNavigation a:visited,
#usermenuLayout .sideNavigation a:hover,
#usermenuLayout .sideNavigation a:active {
	color:inherit;
	text-decoration:none;
}

/* head: the shop, linking to the admin start page */
#usermenuLayout .sideNavigation a.sideNavigationHead {
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 8px 4px;
	padding:10px 8px 14px;
	border-bottom:1px solid var(--navLine);
}
.sideNavigationHeadIcon {
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:9px;
	background:var(--navActiveBg);
	color:var(--navAccent);
	flex:none;
}
.sideNavigationHeadIcon svg {
	width:22px;
	height:22px;
}
#usermenuLayout .sideNavigation a.sideNavigationHead.isActive .sideNavigationSubtitle {
	color:var(--navAccent);
	font-weight:bold;
}
.sideNavigationHeadText {
	display:flex;
	flex-direction:column;
	min-width:0;
}
.sideNavigationTitle {
	font-size:16px;
	font-weight:bold;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.sideNavigationSubtitle {
	color:var(--navMuted);
	font-size:13px;
}

/* the way back out of the buyer's account, below the head: quieter than an entry */
#usermenuLayout .sideNavigation a.sideNavigationBack {
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 8px;
	padding:8px;
	border-radius:7px;
	color:var(--navMuted);
	font-size:13px;
}
.sideNavigationBack svg {
	width:16px;
	height:16px;
}
@media (hover:hover) {
	#usermenuLayout .sideNavigation a.sideNavigationBack:hover {
		background:var(--navHover);
		color:var(--navInk);
	}
}

/* groups */
.sideNavigationGroup {
	margin:0 8px;
	padding:10px 0 4px;
}
.sideNavigationGroup + .sideNavigationGroup {
	border-top:1px solid var(--navLine);
}
/* within a section: the orders, requests and price offers above, the items of the shop below */
.sideNavigationEntry.hasSeparatorAbove {
	margin:6px 0 0 34px;
	padding-top:6px;
	border-top:1px solid var(--navLine);
}
.sideNavigationEntry.hasSeparatorAbove > .sideNavigationRow {
	margin-left:-34px;
}
.sideNavigation h2.sideNavigationGroupTitle {
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:2px 8px 6px;
	color:var(--navMuted);
	font-size:13px;
	font-weight:bold;
	line-height:1.3;
	background:none;
	border:0;
	text-align:left;
}
.sideNavigationGroupTitle svg {
	width:15px;
	height:15px;
}
.sideNavigation ul {
	list-style:none;
	margin:0;
	padding:0;
}

/* entries: the link, and for an entry with filters the button that opens them beside it */
.sideNavigationRow {
	position:relative;
	display:flex;
	align-items:stretch;
	border-radius:7px;
}
#usermenuLayout .sideNavigation a.sideNavigationLink {
	display:flex;
	flex:1;
	align-items:center;
	gap:10px;
	min-width:0;
	min-height:38px;
	padding:7px 8px;
	border-radius:7px;
}
.sideNavigation button.sideNavigationToggle {
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	margin:0;
	padding:0;
	border:0;
	border-radius:7px;
	background:none;
	color:inherit;
	cursor:pointer;
	flex:none;
}
.sideNavigationIcon {
	width:19px;
	height:19px;
	color:var(--navAccent);
	stroke-width:1.75!important;
}
.sideNavigationLabel {
	flex:1;
	min-width:0;
}
.sideNavigationChevron {
	width:16px;
	height:16px;
	color:#9aa5b4;
	transition:transform .15s ease-out;
}
.sideNavigationToggle[aria-expanded="true"] .sideNavigationChevron {
	transform:scaleY(-1);
}
.sideNavigation a:focus-visible,
.sideNavigation button:focus-visible {
	outline:2px solid var(--navAccent);
	outline-offset:-2px;
}
/* only with a mouse: on a touch screen the hover colour would stay on the entry tapped last */
@media (hover:hover) {
	#usermenuLayout .sideNavigation a.sideNavigationLink:hover,
	.sideNavigation button.sideNavigationToggle:hover {
		background:var(--navHover);
	}
}

/* the current page */
.sideNavigationEntry.isActive > .sideNavigationRow {
	background:var(--navActiveBg);
}
#usermenuLayout .sideNavigationEntry.isActive a.sideNavigationLink {
	color:var(--navAccent);
	font-weight:bold;
}
.sideNavigationEntry.isActive > .sideNavigationRow::before {
	content:"";
	position:absolute;
	left:0;
	top:7px;
	bottom:7px;
	width:3px;
	border-radius:2px;
	background:var(--navAccent);
}
.sideNavigationEntry.isActive .sideNavigationChevron {
	color:var(--navAccent);
}

/* filters below an entry ("all", "new", "unpaid", ...), on a guide line under its icon */
.sideNavigation ul.sideNavigationFilters {
	margin:2px 0 6px 17px;
	padding-left:12px;
	border-left:2px solid var(--navLine);
}
.sideNavigation ul.sideNavigationFilters[hidden] {
	display:none;
}
#usermenuLayout .sideNavigationFilters a {
	display:block;
	padding:5px 8px;
	border-radius:6px;
	color:var(--navMuted);
	font-size:13px;
}
@media (hover:hover) {
	#usermenuLayout .sideNavigationFilters a:hover {
		background:var(--navHover);
		color:var(--navInk);
	}
}
#usermenuLayout .sideNavigationFilters a.isActive {
	color:var(--navAccent);
	font-weight:bold;
}

/* new orders, requests and price offers since the last visit: a red count that pulses a few
   times after the page has loaded to be noticed, then stays still so it does not distract */
.sideNavigationBadge {
	min-width:22px;
	padding:2px 7px;
	border-radius:11px;
	background:var(--navBadge);
	color:#ffffff;
	font-size:12px;
	font-weight:bold;
	line-height:16px;
	text-align:center;
	animation:sideNavigationPulse 1.6s ease-out 3;
}
@keyframes sideNavigationPulse {
	0% { box-shadow:0 0 0 0 rgba(200, 16, 46, .55); }
	70% { box-shadow:0 0 0 8px rgba(200, 16, 46, 0); }
	100% { box-shadow:0 0 0 0 rgba(200, 16, 46, 0); }
}
@media (prefers-reduced-motion:reduce) {
	.sideNavigationBadge {
		animation:none;
	}
}

/* narrow screen: the column folds away behind the menu button (usermenu.css) and, once opened,
   spans the width - rows a little taller for a finger */
@media only screen and (max-width:835px),
       only screen and (orientation:portrait) and (max-width:1024px) {
	/* opened by the menu button the column stands above the content, not beside it */
	#usermenuLayout td.navCol:has(.sideNavigation) {
		min-width:0;
		border-right:0;
		border-bottom:1px solid #e4e8ee;
	}
	/* folded behind the menu button the column is part of the page, it neither sticks nor scrolls */
	.navCol > .sideNavigation,
	.navCol > div:has(> .sideNavigation) {
		position:static;
	}
	.sideNavigation {
		max-height:none;
		overflow-y:visible;
		font-size:16px;
	}
	#usermenuLayout .sideNavigation a.sideNavigationLink {
		min-height:46px;
	}
	.sideNavigation button.sideNavigationToggle {
		width:46px;
	}
	#usermenuLayout .sideNavigationFilters a {
		padding:9px 8px;
		font-size:15px;
	}
}