/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */

.sidebar {
	grid-area: sidebar;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: auto 1fr;
}

/* Desktop: collapsed state hides sidebar content (only after JS initializes) */
@media (min-width: 769px) {
	body.sidebar-collapsed .sidebar-header,
	body.sidebar-collapsed .sidebar-nav {
		display: none;
	}
}

/* ==========================================================================
   Sidebar Header (Search + Actions)
   ========================================================================== */

.sidebar-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	height: var(--header-height);
	background: var(--color-bg-secondary);
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.search-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-bg);
	color: var(--color-text);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;

	&::placeholder {
		color: var(--color-text-muted);
	}

	&:focus {
		outline: none;
		border-color: var(--color-accent);
		box-shadow: 0 0 0 3px var(--color-accent-bg);
	}
}

/* Scroll to Active Button */
.scroll-to-active {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 16px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
	transition: all 0.15s ease;
}

.scroll-to-active:hover {
	background: var(--color-accent-bg);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.scroll-to-active[hidden] {
	display: none;
}

/* ==========================================================================
   Navigation List
   ========================================================================== */

.sidebar-nav {
	overflow: hidden scroll;
	background: var(--color-bg-secondary);
	border-right: 1px solid var(--color-border);
}

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

.nav-list[hidden] {
	display: none;
}

/* ==========================================================================
   Navigation Items
   ========================================================================== */

.nav-item {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.nav-item.hidden {
	display: none;
}

.property-link {
	display: block;
	padding: 10px 16px;
	color: var(--color-text);
	text-decoration: none;
	font-size: 13px;
	font-family: var(--font-mono);
	transition:
		background-color 0.15s,
		color 0.15s;
}

.property-link:hover {
	background: var(--color-accent-bg);
	color: var(--color-accent);
}

/* Active State */
.nav-item.active {
	background: var(--color-accent-bg);
	border-left: 3px solid var(--color-accent);
}

.nav-item.active .property-link {
	padding-left: 13px; /* Compensate for border */
	color: var(--color-accent);
	font-weight: 600;
}

/* Highlight State (from search) */
.nav-item.highlight {
	background: var(--color-highlight-bg);
	animation: highlight-pulse 0.3s ease-in-out;
}

.nav-item.highlight .property-link {
	color: var(--color-accent);
	font-weight: 600;
}

@keyframes highlight-pulse {
	0%,
	100% {
		background-color: var(--color-highlight-pulse-start);
	}
	50% {
		background-color: var(--color-highlight-pulse-mid);
	}
}

@media (prefers-color-scheme: dark) {
	.nav-item.highlight {
		background: var(--color-highlight-bg);
	}

	@keyframes highlight-pulse {
		0%,
		100% {
			background-color: var(--color-highlight-pulse-start);
		}
		50% {
			background-color: var(--color-highlight-pulse-mid);
		}
	}
}

/* ==========================================================================
   Home Page Content Styles
   ========================================================================== */

.home-content {
	max-width: 100%;
}

.home-content h1 {
	margin-top: 0;
	font-size: 2.25rem;
}

.intro {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	margin-bottom: 40px;
}

.property-group {
	margin-bottom: 48px;
}

.property-group h2 {
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

.property-group p {
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.property-group-list {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.property-group-link {
	display: block;
	padding: 8px 12px;
	color: var(--color-accent);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 13px;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	transition: all 0.15s;
}

.property-group-link:hover {
	background: var(--color-accent-bg);
	border-color: var(--color-accent);
	transform: translateX(4px);
}

/* ==========================================================================
   Responsive - Mobile Layout
   ========================================================================== */

@media (max-width: 768px) {
	.sidebar {
		display: none;
	}

	.sidebar[popover]:popover-open {
		/* Layout */
		display: flex;
		flex-direction: column;

		/* Position & Size */
		position: fixed;
		inset: 0 auto 0 0;
		width: 85vw;
		max-width: 320px;
		height: 100dvh;
		margin: 0;
		padding: 0;

		/* Appearance */
		background: var(--color-bg);
		border: none;
		border-right: 1px solid var(--color-border);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);

		/* Reset grid */
		grid-area: unset;
		grid-template-columns: unset;
	}

	.sidebar[popover]::backdrop {
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(2px);
	}

	/* Ensure content is visible inside the popover */
	.sidebar[popover] .sidebar-header {
		display: flex;
		flex-shrink: 0;
		border-right: none;
	}

	.sidebar[popover] .sidebar-nav {
		display: block;
		flex-grow: 1;
		border-right: none;
		overflow-y: auto;
	}

	.property-link {
		padding: 12px 16px;
	}

	.property-group-list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

@media (max-width: 480px) {
	.property-group-list {
		grid-template-columns: 1fr;
	}

	.home-content h1 {
		font-size: 1.75rem;
	}
}

/* Status Styles */
.property-group-link.status-experimental {
	border-color: var(--color-status-experimental-border);
	background-color: var(--color-status-experimental-bg);
}

.property-group-link.status-draft {
	border-style: dashed;
	background-color: var(--color-status-draft-bg);
	border-color: var(--color-status-draft-border);
}

.property-group-link.status-deprecated {
	opacity: 0.7;
	background-color: var(--color-status-deprecated-bg);
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.property-group-link.status-deprecated:hover {
	opacity: 1;
	text-decoration: none;
}