/* Light mode: make theme combo box text dark for readability */
/* Force theme toggle and dropdown to match navbar dark style */
.theme-toggle,
.dropdown-toggle,
.dropdown-menu,
.dropdown-item {
	background: var(--inplab-bg) !important;
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.06) !important;
}
.dropdown-menu {
	box-shadow: 0 6px 18px rgba(3,10,15,0.35) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
	background: rgba(255,255,255,0.06) !important;
	color: #ffffff !important;
}
/* =============================
	 InpLab Color System (shared)
	 ============================= */
:root {
	/* Brand palette */
	--inplab-bg: #0b2a3b;          /* deep blue */
	--inplab-bg-2: #124b5d;        /* gradient end */
	--inplab-accent: #2fb6a9;      /* teal */
	--inplab-accent-2: #ffd166;    /* warm yellow */

	/* Base (light) text + panels */
	--body-text: #0b2a3b;
	--muted-text: #566b76;
	--panel-bg: rgba(0,0,0,0.03);
	--panel-border: rgba(0,0,0,0.08);
	--hover-bg: rgba(0,0,0,0.06);

	/* Legacy vars used elsewhere */
	--inplab-text: var(--body-text);
	--inplab-muted: var(--muted-text);
	--inplab-border: rgba(0,0,0,0.25);
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
	:root {
		--body-text: #ffffff;
		--muted-text: #d3dee1;
		--panel-bg: rgba(255,255,255,0.05);
		--panel-border: rgba(255,255,255,0.08);
		--hover-bg: rgba(255,255,255,0.06);
		--inplab-text: var(--body-text);
		--inplab-muted: var(--muted-text);
	}
}

html[data-bs-theme="dark"] :root {
	--body-text: #ffffff;
	--muted-text: #d3dee1;
	--panel-bg: rgba(255,255,255,0.05);
	--panel-border: rgba(255,255,255,0.08);
	--hover-bg: rgba(255,255,255,0.06);
	--inplab-text: var(--body-text);
	--inplab-muted: var(--muted-text);
}

/* Ensure core content uses white in dark theme */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .content,
html[data-bs-theme="dark"] .article,
html[data-bs-theme="dark"] main,
html[data-bs-theme="dark"] .main-content,
html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] .quick-links a,
html[data-bs-theme="dark"] p,
html[data-bs-theme="dark"] li,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
	color: #ffffff !important;
}

/* =============================
	 Navbar Styling
	 ============================= */
.navbar {
	background: var(--inplab-bg) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(3,10,15,0.35);
	min-height: 56px;
	padding-left: 4px !important;
	padding-right: 16px !important;
}

header.bg-body .navbar {
	min-height: 56px;
	background: var(--inplab-bg);
	color: #ffffff;
	border-bottom: 1px solid var(--inplab-border);
}

/* Ensure dark mode keeps the solid brand color */
html[data-bs-theme="dark"] header.bg-body .navbar {
	background: var(--inplab-bg) !important;
	color: var(--inplab-text) !important;
	border-bottom: 1px solid var(--inplab-border) !important;
}

@media (prefers-color-scheme: dark) {
	header.bg-body .navbar {
		background: var(--inplab-bg) !important;
		color: var(--inplab-text) !important;
		border-bottom: 1px solid var(--inplab-border) !important;
	}
}

/* =============================
	 Logo Styling
	 ============================= */
/* Ensure inline logo image is visible and fits navbar height */
header.bg-body .navbar .navbar-brand #logo {
	display: inline-block !important;
	height: calc(100% - 16px);
	width: auto;
	max-height: 42px; /* smaller logo */
	vertical-align: middle;
}

header.bg-body .navbar .navbar-brand img#logo {
	height: 100%;
	width: auto;
	object-fit: contain;
	display: inline-block;
}

header.bg-body .navbar .navbar-brand {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0;
	margin-right: 8px;
	color: var(--inplab-text);
	font-weight: 600;
	font-size: 0;
}

/* Use logo from DocFX root - compact */
header.bg-body .navbar .navbar-brand::before {
	content: "";
	display: inline-block;
	height: 100%;
	aspect-ratio: 1/1;
	min-width: 40px; /* remove left decorative block */
	max-width: 48px;
	background-image: none;
	background-repeat: no-repeat;
	background-color: transparent;
}

/* Docusaurus logo styling */
.navbar__brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.navbar__logo {
	width: 48px;
	height: 48px;
}

.navbar__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.navbar__brand img,
.navbar__brand svg {
	height: 48px;
	width: auto;
	object-fit: contain;
}

/* =============================
	 Navbar Links
	 ============================= */
/* Force navbar link text to white */
header.bg-body .navbar a,
header.bg-body .navbar .nav-link,
.navbar a,
.navbar__brand,
.navbar__items a {
	color: #ffffff !important;
}

html:not([data-bs-theme="dark"]) header.bg-body .navbar a,
html:not([data-bs-theme="dark"]) header.bg-body .navbar .nav-link,
html:not([data-bs-theme="dark"]) .navbar a,
html:not([data-bs-theme="dark"]) .navbar__brand,
html:not([data-bs-theme="dark"]) .navbar__items a {
	color: #ffffff !important;
}

html[data-bs-theme="dark"] header.bg-body .navbar a,
html[data-bs-theme="dark"] header.bg-body .navbar .nav-link,
html[data-bs-theme="dark"] .navbar a,
html[data-bs-theme="dark"] .navbar__brand,
html[data-bs-theme="dark"] .navbar__items a {
	color: #ffffff !important;
}

/* Remove yellow underline for active nav links */
header.bg-body .navbar .nav-link.active,
header.bg-body .navbar .nav-link.active::after,
header.bg-body .navbar .nav-link[aria-current],
.navbar__items .navbar__link--active,
.navbar__items .navbar__link--active::after,
.navbar__items .navbar__link--active[aria-current] {
	border-bottom: none !important;
	box-shadow: none !important;
	padding-bottom: 0 !important;
	outline: none !important;
}

/* Nav link styling */
header.bg-body .navbar .nav-link,
.navbar__items .navbar__link {
	color: var(--body-text) !important;
	padding: 8px 10px !important;
	border-radius: 6px;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

header.bg-body .navbar .nav-link:hover,
header.bg-body .navbar .nav-link:focus,
.navbar__items .navbar__link:hover,
.navbar__items .navbar__link:focus {
	background: rgba(255,255,255,0.03);
	color: var(--inplab-accent) !important;
	transform: translateY(-1px);
}

header.bg-body .navbar .nav-link.active {
	color: var(--inplab-accent-2);
}

.navbar__items .navbar__link--active {
	color: var(--inplab-accent-2) !important;
}

/* Special styling for the API nav item */
header.bg-body .navbar .nav-link.api,
.navbar__items .navbar__link.api {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.06);
	color: var(--body-text) !important;
	padding: 6px 12px !important;
	border-radius: 999px;
	font-weight: 600;
}

header.bg-body .navbar .nav-link.api:hover,
.navbar__items .navbar__link.api:hover {
	background: linear-gradient(90deg, rgba(47,182,169,0.12), rgba(255,209,102,0.06));
	color: var(--inplab-bg) !important;
}

/* =============================
	 Navbar Search & Controls
	 ============================= */
header.bg-body .navbar .search .form-control {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--inplab-text);
}

header.bg-body .navbar .search .form-control::placeholder {
	color: var(--muted-text);
}

header.bg-body .navbar .btn,
header.bg-body .navbar .btn i {
	color: var(--inplab-text);
}

.navbar__inner {
	min-height: 52px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* =============================
	 Theme Toggle & Dropdown
	 ============================= */
.theme-toggle,
.dropdown-toggle,
.dropdown-menu,
.dropdown-item {
	background: var(--inplab-bg) !important;
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.06) !important;
}

.dropdown-menu {
	box-shadow: 0 6px 18px rgba(3,10,15,0.35) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: rgba(255,255,255,0.06) !important;
	color: #ffffff !important;
}

.theme-toggle i,
.theme-toggle svg,
.dropdown-toggle i,
.dropdown-toggle svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* =============================
	 Homepage Layout
	 ============================= */
.home-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
}

.sidebar {
	position: sticky;
	top: 88px;
	align-self: start;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 12px;
	padding: 16px 16px 10px 16px;
}

.sidebar-title {
	margin: 0 0 8px 0;
	font-size: 1.1rem;
	color: var(--body-text) !important;
	font-weight: 700;
}

.sidebar,
.sidebar * {
	color: var(--body-text) !important;
}

.quick-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.quick-links li {
	margin: 6px 0;
}

.quick-links a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--body-text) !important;
	text-decoration: none;
	background: transparent;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	font-weight: 600;
}

.quick-links a:link,
.quick-links a:visited {
	color: var(--body-text) !important;
}

.quick-links a:hover,
.quick-links a:focus-visible {
	background: var(--hover-bg);
	color: var(--inplab-accent);
	transform: translateX(2px);
	outline: 2px solid transparent;
}

.quick-links a.active {
	background: linear-gradient(90deg, rgba(47,182,169,0.09), rgba(255,209,102,0.04));
	border: 1px solid var(--panel-border);
}

/* =============================
	 Main Content & Features
	 ============================= */
.main-content .intro .subtitle {
	color: var(--muted-text);
	margin-top: 0.25rem;
}

.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 16px;
}

.feature {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: center;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 12px;
	padding: 12px;
}

.feature-img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.feature h3 {
	margin: 0 0 4px 0;
}

.feature p {
	margin: 0;
	color: var(--muted-text);
}

/* Dark-mode flair: gradient title text */
@media (prefers-color-scheme: dark) {
	.intro h2 {
		background: linear-gradient(90deg, #e6f2f1, #2fb6a9);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
	}
}

html[data-bs-theme="dark"] .intro h2 {
	background: linear-gradient(90deg, #e6f2f1, #2fb6a9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

/* =============================
	 Responsive Design
	 ============================= */
@media (max-width: 1100px) {
	.features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.navbar {
		min-height: 52px;
	}
	
	header.bg-body .navbar {
		min-height: 52px;
	}
	
	header.bg-body .navbar .navbar-brand {
		height: 100%;
	}
	
	header.bg-body .navbar .navbar-brand::before {
		height: 100%;
		min-width: 36px;
		max-width: 48px;
	}
	
	.navbar__logo {
		width: 48px;
		height: 48px;
	}
	
	.navbar__inner {
		min-height: 52px !important;
	}
	
	.navbar__brand img {
		height: 36px;
	}
	
	.home-grid {
		grid-template-columns: 1fr;
	}
	
	.sidebar {
		position: static;
	}
	
	.features {
		grid-template-columns: 1fr;
	}
}

/* =============================
	 Utility
	 ============================= */
.icon {
	background-image: url('../img/icon.ico');
	width: 16px;
	height: 16px;
}