/*------------------------------------------------------------------
[Nav]
Project:	Jampack
-------------------------------------------------------------------*/
/*Navbar*/
.navbar {

	.navbar-toggler-menu,
	.navbar-toggler {
		border: none;
		padding: 0;
	}

	.navbar-toggler-menu {
		align-self: center;
		margin-right: .625rem;
	}

	.navbar-brand {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
	}

	// DARK NAVBAR (Always dark, regardless of theme mode)
	&.navbar-dark {
		background: var(--bs-black); // or var(--bs-dark)

		.badge {
			&.badge-indicator {
				border-color: var(--bs-black);
			}
		}

		.form-control {
			border-color: var(--bs-white);
			color: var(--bs-white);
		}

		.input-affix-wrapper.affix-border {

			.input-prefix,
			.input-suffix {
				border-color: var(--bs-white);
				color: var(--bs-white);
			}
		}

		.btn.btn-icon[class*="btn-flush-"] {
			&.btn-flush-dark {
				color: var(--bs-white);

				&.flush-soft-hover {
					&:before {
						// Use CSS variable transparency
						background-color: rgba(var(--bs-white-rgb), 0.05);
					}

					&:not(:disabled):not(.disabled).active,
					&:not(:disabled):not(.disabled):active,
					&:hover,
					&:focus {
						.icon {
							color: var(--bs-white);
						}
					}
				}

				&.disabled,
				&:disabled {
					opacity: 0.4;
					color: var(--bs-white);
				}
			}
		}
	}

	// LIGHT NAVBAR (Adapts to theme)
	&.navbar-light {
		background: var(--hk-bg-primary); // Dynamic background

		.badge {
			&.badge-indicator {
				border-color: var(--hk-bg-primary);
			}
		}
	}
}

/*Nav*/
.nav-link {
	color: var(--bs-primary);

	&:hover,
	&:focus {
		color: var(--bs-link-hover-color);
	}
}

.nav {
	.nav-item {
		position: relative;

		.nav-link {
			&.no-arrow {
				padding-right: .75rem !important;

				&:after {
					display: none;
				}
			}

			&.link-with-arrow {
				padding-right: 1.8rem !important;
				position: relative;

				&:after {
					content: '\f2f9';
					font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
					font-size: 1rem;
					text-rendering: auto;
					margin-left: auto;
					position: absolute;
					right: 1rem;
					top: calc(50% - 8px);
					transform: rotate(0deg);
					transition: all 0.4s ease;
				}
			}
		}
	}

	&.nav-icon {
		>.nav-item .nav-link {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			-webkit-justify-content: center;

			>.nav-icon-wrap {
				margin-right: .875rem;
				font-size: 1.25rem;
				line-height: 0;
				position: relative;
			}
		}

		&.nav-icon-top {
			>.nav-item {
				>.nav-link {
					text-align: center;
					display: block;

					>.nav-icon-wrap {
						margin-right: 0;
						margin-bottom: .5rem;
						display: block;
					}
				}
			}
		}
	}

	&.nav-pills {
		>.nav-item {
			>.nav-link {
				border-radius: 0.5rem;
				margin-left: .25rem;
				margin-right: .25rem;

				&.active {
					background-color: var(--bs-primary) !important;
					color: var(--bs-white);

					&.link-with-arrow {
						&:after {
							color: rgba(var(--bs-white-rgb), 0.6);
						}
					}

					&:after {
						color: rgba(var(--bs-white-rgb), 0.6);
					}
				}
			}
		}

		.show>.nav-link {
			background-color: transparent;
		}

		&.nav-pills-square {
			>.nav-item>.nav-link {
				border-radius: 0;
			}
		}

		&.nav-pills-rounded {
			>.nav-item>.nav-link {
				border-radius: 50rem;
			}
		}

		&.nav-pills-soft {
			>.nav-item>.nav-link {
				&.active {
					// Use your "Soft" variables here
					background-color: var(--bs-soft-primary) !important;
					color: var(--bs-primary) !important;

					&.link-with-arrow {
						&:after {
							color: inherit;
						}
					}

					&:after {
						color: inherit;
					}
				}
			}
		}

		&.nav-icon {
			&.nav-icon-top {
				>.nav-item {
					>.nav-link {
						padding-top: .95rem;
						padding-bottom: .95rem;
					}
				}
			}
		}
	}

	&.nav-line {
		>.nav-item {
			>.nav-link {
				border-bottom: 1px solid transparent;
				transition: .2s ease-in-out;

				&.active {
					border-color: var(--bs-primary) !important;
				}
			}
		}
	}

	&.nav-vertical {
		-ms-flex-direction: column !important;
		flex-direction: column !important;

		.nav-item .nav-link {
			justify-content: flex-start;
			-webkit-justify-content: flex-start;
			position: relative;

			&[data-toggle="collapse"] {
				&::after {
					content: '\f2f9';
					font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
					font-size: 1rem;
					text-rendering: auto;
					margin-left: auto;
					transform: rotate(0deg);
					transition: all 0.4s ease;
				}

				&[aria-expanded="true"] {
					&::after {
						transform: rotate(-180deg);
					}
				}
			}
		}

		&.nav-pills {
			>.nav-item {
				>.nav-link {
					margin: .25rem 0;
				}
			}
		}

		&.nav-line {
			>.nav-item {
				>.nav-link {
					border-bottom: none;
					border-left: 1px solid transparent;
				}
			}
		}

		&.nav-separator {
			>.nav-item {
				>.nav-link {
					padding: .75rem 1.5rem;
				}

				&::after {
					content: "";
					position: absolute;
					width: 100%;
					left: 0;
					top: auto;
					bottom: 0;
					height: 1px;
					margin: 0;
					background-color: var(--bs-border-color);
				}
			}
		}

	}

	// NAV DARK (Forces dark mode look even in light mode)
	&.nav-dark {
		.nav-link {
			color: var(--bs-white);

			&:hover,
			&:focus {
				color: rgba(var(--bs-white-rgb), 0.8);
			}

			&.disabled {
				color: rgba(var(--bs-white-rgb), 0.3);
			}

			&.active {
				color: var(--bs-primary);
			}

			&:after {
				color: rgba(var(--bs-white-rgb), 0.3);
			}

			&.link-with-arrow {
				&:after {
					color: rgba(var(--bs-white-rgb), 0.3);
				}
			}
		}

		.nav-item.show .nav-link {
			color: var(--bs-white);
		}

		&.nav-pills {
			>.nav-item {
				>.nav-link.active {
					color: var(--bs-white);

					&:hover,
					&:focus {
						color: var(--bs-white);
					}
				}

				>.nav-link {
					color: var(--bs-white);

					&:hover,
					&:focus {
						background-color: rgba(var(--bs-white-rgb), 0.1);
					}

					&.disabled {
						color: rgba(var(--bs-white-rgb), 0.3);
					}
				}
			}
		}

		&.nav-vertical {
			.nav-item .nav-link {
				&[data-toggle="collapse"] {
					&::after {
						color: rgba(var(--bs-white-rgb), 0.3);
					}
				}
			}
		}

		&.nav-line {
			.nav-item.show .nav-link {
				color: var(--bs-white);
			}
		}
	}

	// NAV LIGHT (Forces light mode look)
	&.nav-light {
		.nav-link {
			// 1. Light Mode (Default): Dark text
			color: var(--bs-black);

			&:hover,
			&:focus {
				color: rgba(var(--bs-black-rgb), 0.8);
				background-color: rgba(var(--bs-black-rgb), 0.05); // Add subtle hover bg
			}

			&.disabled {
				color: rgba(var(--bs-black-rgb), 0.3);
			}

			&.active {
				color: var(--bs-primary);
			}

			&:after {
				color: rgba(var(--bs-black-rgb), 0.3);
			}

			&.link-with-arrow {
				&:after {
					color: rgba(var(--bs-black-rgb), 0.3);
				}
			}
		}

		.nav-item.show .nav-link {
			color: var(--bs-black);
		}

		// 2. Dark Mode Override (The Fix)
		// When the theme is dark, force .nav-light to use WHITE text so it is visible
		@at-root [data-bs-theme="dark"] & {
			.nav-link {
				color: var(--bs-white); // Switch to white

				&:hover,
				&:focus {
					color: var(--bs-white);
					background-color: rgba(var(--bs-white-rgb), 0.1);
				}

				&.disabled {
					color: rgba(var(--bs-white-rgb), 0.3);
				}

				&.active {
					color: var(--bs-primary);
				}
			}

			.nav-item.show .nav-link {
				color: var(--bs-white);
			}
		}

		// 3. Vertical Nav specifics
		&.nav-vertical {
			.nav-item .nav-link {
				&[data-toggle="collapse"] {
					&::after {
						color: rgba(var(--bs-black-rgb), 0.3);
					}
				}
			}

			// Dark mode for vertical arrows
			@at-root [data-bs-theme="dark"] & {
				.nav-item .nav-link[data-toggle="collapse"]::after {
					color: rgba(var(--bs-white-rgb), 0.3);
				}
			}
		}

		// 4. Pills specifics
		&.nav-pills {
			>.nav-item {
				>.nav-link.active {
					color: var(--bs-white); // Active pill is always white text
				}

				>.nav-link {
					// In light mode:
					color: var(--bs-black);

					&:hover,
					&:focus {
						background-color: rgba(var(--bs-black-rgb), 0.08);
					}

					&.disabled {
						color: rgba(var(--bs-black-rgb), 0.3);
					}
				}
			}

			// Dark mode for pills
			@at-root [data-bs-theme="dark"] & {
				>.nav-item>.nav-link {
					color: var(--bs-white);

					&:hover,
					&:focus {
						background-color: rgba(var(--bs-white-rgb), 0.1);
					}
				}
			}
		}
	}

	&.nav-sm {
		>.nav-item .nav-link>.nav-icon-wrap {
			margin-right: .875rem;
			font-size: 1rem;
		}

		.nav-link {
			padding: .25rem 0.75rem;
			font-size: 0.875rem;
		}
	}
}

// TABS
.nav-tabs {
	border-bottom: 1px solid var(--bs-border-color); // Dynamic border

	.nav-item.show .nav-link,
	>.nav-item>.nav-link {

		&:hover,
		&:focus {
			border-color: transparent;
		}

		&.active {
			background-color: transparent;
			// Use translucent variable for border
			border-color: var(--bs-border-color-translucent) var(--bs-border-color-translucent) var(--bs-body-bg);
			color: var(--bs-primary);
		}
	}

	&.nav-sm {

		.nav-item.show .nav-link,
		>.nav-item>.nav-link {
			padding: .4rem 0.75rem;
		}
	}

	.nav-item.show .nav-link {
		border-color: var(--bs-border-color-translucent) var(--bs-border-color-translucent) var(--bs-body-bg);
	}

	&.nav-pills {
		border-bottom: 0;

		>.nav-item {
			margin-bottom: 0;

			>.nav-link {
				border: none !important;
			}
		}
	}

	&.nav-light {
		>.nav-item>.nav-link {
			&.active {
				background: transparent;
				border-color: var(--bs-border-color) var(--bs-border-color) var(--hk-bg-primary);
				color:var(--bs-primary);
			}
		}

		.nav-item.show .nav-link {
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) var(--bs-white);
		}
	}

	// &.nav-light {
	// 	>.nav-item>.nav-link {
	// 		&.active {
	// 			background: var(--bs-white);
	// 			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) var(--bs-white);
	// 		}
	// 	}

	// 	.nav-item.show .nav-link {
	// 		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) var(--bs-white);
	// 	}

	// 	// Fix for Dark Mode Tabs
	// 	@at-root [data-bs-theme="dark"] & {
	// 		>.nav-item>.nav-link {
	// 			color: var(--bs-white); // Visible tab text

	// 			&.active {
	// 				background: var(--bs-dark); // or transparent
	// 				color: var(--bs-white);
	// 				border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
	// 			}
	// 		}
	// 	}
	// }

	&.nav-dark {
		border-color: rgba(var(--bs-white-rgb), 0.1);

		>.nav-item>.nav-link {
			&.active {
				background: var(--bs-white);
				border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) var(--bs-white);
			}
		}

		.nav-item.show .nav-link {
			border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) var(--bs-white);
		}
	}

	&.nav-line {
		border-bottom: 0;

		>.nav-item {
			margin-bottom: 0;

			>.nav-link {
				background: transparent;
				border-left: 0;
				border-top: 0;
				border-right: 0;

				&.active {
					background: transparent;
				}
			}
		}
	}
}

.tab-content {
	margin-top: 1rem;
}

// SEGMENTED TABS
.nav-segmented-tabs {
	display: -ms-flexbox;
	display: flex;
	border-bottom: none;

	>.nav-item {
		margin-right: -1px;

		&:first-child {
			.nav-link {
				border-top-left-radius: 0.5rem;
				border-bottom-left-radius: 0.5rem;
			}
		}

		&:last-child {
			.nav-link {
				border-top-right-radius: 0.5rem;
				border-bottom-right-radius: 0.5rem;
			}
		}

		>.nav-link {
			border: 1px solid var(--bs-border-color) !important; // Dynamic border
			border-radius: 0;
			text-align: center;
			background: transparent;
			height: 100%;
			color: var(--bs-body-color);

			&.active {
				color: var(--bs-white) !important;
				background: var(--bs-primary) !important;
				border-color: var(--bs-primary) !important;
			}
		}
	}

	&.segmented-tabs-rounded {
		>.nav-item {
			&:first-child {
				.nav-link {
					border-top-left-radius: 50px;
					border-bottom-left-radius: 50px;
				}
			}

			&:last-child {
				.nav-link {
					border-top-right-radius: 50px;
					border-bottom-right-radius: 50px;
				}
			}
		}
	}

	&.segmented-tabs-square {
		>.nav-item {
			>.nav-link {
				border-radius: 0;
			}
		}
	}

	&.segmented-tabs-filled {
		>.nav-item {
			margin-right: 0;

			.nav-link {
				border: none !important;
				// Use soft secondary/tertiary for filled state
				background: var(--bs-tertiary-bg);
				color: var(--bs-body-color);
			}
		}
	}

	&.nav-dark {
		>.nav-item {
			>.nav-link {
				border-color: rgba(255, 255, 255, .15) !important;
			}

			&.show {
				>.nav-link {
					background: transparent;
					color: var(--bs-white);
				}
			}
		}

		&.segmented-tabs-filled {
			>.nav-item {
				.nav-link {
					background-color: rgba(var(--bs-white-rgb), 0.05);
				}
			}
		}
	}
}

.nav-header-bold {
	padding: 1.5rem 0 .5rem 0;
	width: 240px;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bs-primary);
}

/*Section Nav (Sidebar / TOC)*/
.hk-wrapper {
	&[data-aside="fixed"] {
		.hk-pg-wrapper {
			margin-right: 180px;
		}

		.hk-aside {
			position: fixed;
			top: 65px;
			overflow-y: auto;
			width: 180px;
			right: 0;
			z-index: 1;
			background: var(--hk-bg-primary); // Dynamic background
			border-left: 1px solid var(--bs-border-color); // Dynamic border
			bottom: 0;

			.nicescroll-bar {
				padding: 1.5rem;
			}
		}
	}

	&[data-aside="sticky"] {
		.hk-aside {
			position: sticky;
			top: 70px;
			overflow-y: auto;
			height: calc(100vh - 250px);
			z-index: 1;
			margin-top: 3rem;
		}
	}

	.nav-toc {
		.nav-header {
			font-size: .75rem;
			text-transform: uppercase;
			font-weight: 600;
			color: var(--bs-secondary-color); // Dynamic text color
		}

		.nav {
			margin: 1rem 0;
			font-size: .875rem;
			flex-wrap: nowrap;
			border-left: 1px solid;
			border-color: var(--bs-border-color);

			.nav-item {
				margin-bottom: .25rem;

				&:last-child {
					margin-bottom: 0;
				}

				a.nav-link {
					color: var(--bs-body-color);

					&:hover,
					&:focus {
						color: var(--bs-primary);
					}

					padding: 0 0 0 1rem;
					display: block;
					margin-left: -1px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					border-left: 1px solid transparent;

					&.active {
						color: var(--bs-primary);
						border-color: var(--bs-primary);
					}
				}
			}
		}
	}
}

@media (max-width: 767px) {
	.hk-wrapper[data-aside="fixed"] {
		.hk-pg-wrapper {
			margin-right: 0;
		}

		.hk-aside {
			display: none;
		}
	}
}

.toc-wrapper {
	.nav.nav-vertical {
		.nav-item {
			.nav-link {
				font-size: 0.875rem;
				padding: 0.125rem 0;
			}
		}
	}
}