/**
 * Side Menu — Common base CSS ( loads for every style ).
 *
 * Owns the dashboard-sidebar skeleton: header / brand / collapse toggle, the
 * vertical menu, expandable accordion sub-menus ( with a connector line ) and
 * the collapsed ( icons-only ) mode with a hover tooltip. Per-style files paint
 * the chrome and active state. CSS variables:
 *   --captwiki-sn-accent / --captwiki-sn-accent-2  → active + highlights
 *   --captwiki-sn-width / --captwiki-sn-cwidth     → expanded / collapsed width
 *   --captwiki-sn-connector                        → sub-menu connector colour
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-sidenav {
	--captwiki-sn-accent: #0a0a8c;
	--captwiki-sn-accent-2: #6d5efc;
	--captwiki-sn-width: 280px;
	--captwiki-sn-cwidth: 76px;
	--captwiki-sn-connector: #e3e6ee;
	display: flex;
	flex-direction: column;
	width: var( --captwiki-sn-width );
	max-width: 100%;
	padding: 18px 16px;
	box-sizing: border-box;
	transition: width 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.captwiki-sidenav.is-collapsed {
	width: var( --captwiki-sn-cwidth );
}

.captwiki-sidenav *,
.captwiki-sidenav *::before,
.captwiki-sidenav *::after {
	box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────── */
.captwiki-sidenav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 22px;
	min-height: 40px;
}

.captwiki-sidenav__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	text-decoration: none;
	overflow: hidden;
}

.captwiki-sidenav__logo {
	display: block;
	height: 30px;
	width: auto;
	flex: 0 0 auto;
}

.captwiki-sidenav__brand-text {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.1;
	color: #1b1b3a;
	white-space: nowrap;
}

.captwiki-sidenav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	color: #1b1b3a;
	background: transparent;
	border: 1px solid #e3e6ee;
	border-radius: 9px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.captwiki-sidenav__toggle:hover {
	background: rgba( 0, 0, 0, 0.04 );
}

/* ── Menu ──────────────────────────────────────────────── */
.captwiki-sidenav__menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.captwiki-sidenav__item {
	list-style: none;
	position: relative;
}

.captwiki-sidenav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #44485a;
	text-align: left;
	text-decoration: none;
	background: transparent;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.captwiki-sidenav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	font-size: 18px;
	line-height: 1;
	color: #6b7088;
}

.captwiki-sidenav__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-sidenav__icon i {
	font-style: normal;
}

.captwiki-sidenav__icon--empty {
	width: 22px;
}

/* ── Hover + active ( variable-driven so the Style controls can override ) ── */
.captwiki-sidenav__link:hover {
	background-color: var( --captwiki-sn-hover-bg, rgba( 17, 24, 39, 0.05 ) );
}

.captwiki-sidenav__item.is-active > .captwiki-sidenav__link {
	background-color: var( --captwiki-sn-active-bg, var( --captwiki-sn-accent ) );
	color: var( --captwiki-sn-active-color, #ffffff );
}

.captwiki-sidenav__item.is-active > .captwiki-sidenav__link .captwiki-sidenav__icon {
	color: var( --captwiki-sn-active-color, #ffffff );
}

.captwiki-sidenav__label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.captwiki-sidenav__badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
	background: var( --captwiki-sn-accent-2 );
	border-radius: 999px;
}

/* ── Arrow ─────────────────────────────────────────────── */
.captwiki-sidenav__arrow {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.6;
	transform: rotate( 45deg );
	transition: transform 0.3s ease;
}

.captwiki-sidenav__item--has-sub.is-open > .captwiki-sidenav__link .captwiki-sidenav__arrow {
	transform: rotate( -135deg );
}

/* When a badge is present the arrow shouldn't push via auto-margin twice. */
.captwiki-sidenav__badge + .captwiki-sidenav__arrow {
	margin-left: 8px;
}

/* ── Sub-menu ──────────────────────────────────────────── */
.captwiki-sidenav__sub {
	margin: 2px 0 2px;
	padding: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.3s ease;
}

.captwiki-sidenav__item--has-sub.is-open > .captwiki-sidenav__sub {
	max-height: 720px;
	opacity: 1;
}

.captwiki-sidenav__subitem {
	list-style: none;
	position: relative;
	padding-left: 30px;
}

/* Connector line. */
.captwiki-sidenav__subitem::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var( --captwiki-sn-connector );
}

.captwiki-sidenav__subitem:last-child::before {
	bottom: 50%;
}

.captwiki-sidenav__sublink {
	position: relative;
	display: block;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #5b6075;
	text-decoration: none;
	border-radius: 8px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.captwiki-sidenav__sublink:hover {
	color: var( --captwiki-sn-accent );
}

.captwiki-sidenav__subitem.is-active > .captwiki-sidenav__sublink {
	color: var( --captwiki-sn-accent );
	font-weight: 600;
}

/* ── Collapsed ( icons-only ) mode ─────────────────────── */
.captwiki-sidenav.is-collapsed .captwiki-sidenav__brand-text,
.captwiki-sidenav.is-collapsed .captwiki-sidenav__label,
.captwiki-sidenav.is-collapsed .captwiki-sidenav__badge,
.captwiki-sidenav.is-collapsed .captwiki-sidenav__arrow {
	opacity: 0;
	width: 0;
	margin: 0;
	pointer-events: none;
}

.captwiki-sidenav.is-collapsed .captwiki-sidenav__header {
	justify-content: center;
}

.captwiki-sidenav.is-collapsed .captwiki-sidenav__brand {
	gap: 0;
}

.captwiki-sidenav.is-collapsed .captwiki-sidenav__link {
	justify-content: center;
	gap: 0;
	padding-left: 0;
	padding-right: 0;
}

.captwiki-sidenav.is-collapsed .captwiki-sidenav__sub {
	max-height: 0 !important;
	opacity: 0 !important;
}

/* Tooltip flyout for collapsed items. */
.captwiki-sidenav.is-collapsed .captwiki-sidenav__label {
	position: absolute;
	left: calc( 100% + 12px );
	top: 50%;
	width: auto;
	padding: 6px 10px;
	font-size: 13px;
	color: #ffffff;
	background: #1b1b3a;
	border-radius: 6px;
	opacity: 0;
	transform: translateY( -50% ) scale( 0.96 );
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	z-index: 20;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.captwiki-sidenav.is-collapsed .captwiki-sidenav__link:hover .captwiki-sidenav__label {
	opacity: 1;
	visibility: visible;
	transform: translateY( -50% ) scale( 1 );
}

/* ── Reduced motion ────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.captwiki-sidenav,
	.captwiki-sidenav__sub,
	.captwiki-sidenav__arrow,
	.captwiki-sidenav__label {
		transition-duration: 0.01ms;
	}
}