/* ══════════════════════════════════════════════════════════
   sidebar-base.css — the site sidebar (#sb), items and overlay.
   Extracted from style.css without changing declarations.
   ══════════════════════════════════════════════════════════ */

/* ══====================================================================== SIDEBAR ── */

#sb {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sw2);
	/* background: var(--surface-full); */
	/* border-right: 2px solid var(--border); */
	/* border-right: 2px solid color-mix(in srgb, var(--border) 40% transparent); */

	/* backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px); */

	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--sb) + 8px);
	backface-visibility: hidden;
	/* box-shadow: 0 0 15px color-mix(in srgb, var(--border) 40%, transparent); */
	box-shadow:
		0 0 15px color-mix(in srgb, var(--border) 100%, transparent),
		inset -5px 0 15px -5px color-mix(in srgb, var(--border) 50%, transparent);
	transition: all 0.3s ease-out;
	/* display: none; */
}

/* #sb:hover {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	} */

.ss-wrapper,
.cbody,
.ec {
	contain: layout style;
}
/* AFTER */
/* #sb {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sw);
	background: rgba(12, 12, 12, 0.65);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-right: 1px solid var(--border);
	z-index: 400;
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--sb) + 8px);
} */

/* Creates a subtle green glow behind the sidebar for the glass to blur */
/* body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sw);
	height: 100vh;
	background: linear-gradient(to bottom, rgba(100, 118, 97, 0.2), transparent);
	z-index: -1;
	pointer-events: none;
} */
#sb-hdr {
	padding: 10px 14px 7px;
	/* font-size: clamp(13.5px, 0.8vw, 30px); */
	font-size: clamp(13.5px, 0.8vw, 24px);
	font-weight: 800;
	letter-spacing: 0.1em;
	/* color: var(--g); */
	/* color: var(--sb-active); */
	/* color: var(--border); */
	/* color: color-mix(in srgb, var(--dimtitle) 50%, transparent); */
	color: var(--border);
	/* border-bottom: 1px solid var(--border); */
	text-transform: uppercase;
}
#sb-prog {
	height: 1px;
	/* background: var(--border); */
	position: relative;
	flex-shrink: 0;
	/* box-shadow: 0 0 5px 3px color-mix(in srgb, var(--border) 50%, transparent); */
	box-shadow: 0 0 0px 1px color-mix(in srgb, var(--border) 50%, transparent);
}
#sb-fill {
	height: 3px;
	/* background: var(--g); */
	background: var(--sb-active);
	width: 0%;
	position: absolute;
	left: 0;
	top: -1px;
	transition: width 0.18s linear;
	box-shadow: 0 0 5px 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
#sb-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 0;
}

/* #### main sidebar items */
.sbn {
	display: flex;
	align-items: center;
	gap: 8px;
	/* padding: 8px 14px; */
	padding: 4px 14px;
	/* Replaced background transition with transform for smooth sliding */
	transition: transform 0.2s ease-out;
	text-decoration: none;
}
.sbn:hover {
	/* Slides the entire item slightly to the right, matching .sbn-sub */
	transform: translateX(2px);
}
/* main sidebar item text on reg */
.sblbl {
	/* font-size: clamp(11.5px, 0.6vw, 25px); */
	/* font-size: clamp(10px, 0.6vw, 15px); */
	/* font-size: clamp(10px, 0.5vw, 14px); */
	font-size: clamp(12px, 0.5vw, 14px);
	font-weight: 500;
	letter-spacing: 0.07em;
	/* color: var(--sb-text); */
	color: var(--light-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s;
	text-transform: uppercase;
	font-weight: var(--sb-font-weight);
}
/* main sidebar item dot on reg */
.sbdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	/* border: 1.5px solid var(--sb-text); */
	border: 2px solid var(--light-grey);
	background: transparent;
	flex-shrink: 0;
	transition: all 0.2s;
}
/* main sidebar item text on hover */
.sbn:hover .sblbl {
	/* Shifts the text color to the sleek green */
	/* color: var(--g); */
	color: var(--sb-hover);
	font-weight: var(--sb-font-weight-hover);
}
/* main sidebar item dot on hover */
.sbn:hover .sbdot {
	/* Optionally lights up the hollow dot to match the text */
	/* border-color: var(--g); */
	border-color: var(--sb-hover);
	background: var(--sb-hover);
}
/* main sidebar item dot on selected */
.sbn.active .sbdot {
	/* background: var(--accent); */
	background: var(--sb-active);
	/* border-color: var(--accent); */
	border-color: var(--sb-active);
}
/* main sidebar item text on selected */
.sbn.active .sblbl {
	/* color: var(--accent); */
	color: var(--sb-active);
	font-weight: var(--sb-font-weight-active);
}

/* ######## Sidebar Sub-Nav */
.sb-group {
	display: flex;
	flex-direction: column;
	margin-top: 0px;
}
.sb-subnav {
	display: flex;
	flex-direction: column;
	padding-left: 29px;
	gap: 4px;
	margin-top: 2px;
	margin-bottom: 8px;
}

/* sub sidebar item text on reg */
.sbn-sub {
	/* font-size: clamp(10.5px, 0.5vw, 25px); */
	/* font-size: clamp(10.5px, 0.5vw, 15px); */
	/* font-size: clamp(10.5px, 0.4vw, 14px); */
	font-size: clamp(10px, 0.4vw, 12px);
	font-weight: 500;
	color: var(--sb-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition:
		color 0.2s,
		transform 0.2s;
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1.25;
	padding: 0;
	width: calc(100% - 40px);
	min-width: 0;
	margin-left: 20px;
	font-weight: var(--sb-font-weight);
}
/* sub sidebar item dot on reg */
.sbn-sub::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	border: 1.5px solid var(--sb-text);
	background: transparent;
	opacity: 0.8;
	transition:
		opacity 0.2s,
		border-color 0.2s,
		background 0.2s;
}
/* sub sidebar item text on hover */
.sbn-sub:hover {
	color: var(--sb-hover);
	transform: translateX(2px) translateZ(0); /* GPU Accel */
	font-weight: var(--sb-font-weight-hover);
}
/* sub sidebar item dot on hover */
.sbn-sub:hover::before {
	border-color: var(--sb-active-hover);
	background: var(--sb-active-hover);
	opacity: 1;
}
/* sub sidebar item text on selected */
.sbn-sub.active {
	color: var(--sb-active);
	font-weight: var(--sb-font-weight-active);
}
/* sub sidebar item dot on selected */
.sbn-sub.active::before {
	border-color: var(--sb-active);
	background: var(--sb-active);
	opacity: 1;
}

/* #### */

#sb-overlay {
	position: fixed;
	inset: 0;
	/* background: rgba(0, 0, 0, 0.75); */
	background: color-mix(in srgb, var(--bg) 50%, transparent 0%) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 399;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	will-change: opacity;
}
#sb-overlay.show {
	opacity: 1;
	pointer-events: all;
}