/* ==========================================================================
   Stetho application shell + sidebar
   Loaded after the vendored theme. Only the shell/sidebar are styled here.
   ========================================================================== */

:root {
	--stetho-sidebar-width: 17rem;
	--stetho-sidebar-rail: 4.75rem;
	--stetho-sidebar-bg: #ffffff;
	--stetho-sidebar-border: #eef0f5;
	--stetho-nav-text: #5a6478;
	--stetho-nav-muted: #98a0b3;
	--stetho-nav-hover: #f5f6fb;
	--stetho-nav-active-bg: rgba(var(--primary-rgb), 0.1);
	--stetho-nav-active-text: var(--primary-color);
}

[data-theme-mode="dark"] {
	--stetho-sidebar-bg: #1a1c1e;
	--stetho-sidebar-border: rgba(255, 255, 255, 0.08);
	--stetho-nav-text: rgba(255, 255, 255, 0.65);
	--stetho-nav-muted: rgba(255, 255, 255, 0.4);
	--stetho-nav-hover: rgba(255, 255, 255, 0.06);
	--stetho-nav-active-bg: rgba(var(--primary-rgb), 0.18);
}

/* --------------------------------------------------------------------------
   Shell layout: header and content follow the sidebar width.
   -------------------------------------------------------------------------- */

.stetho-shell.is-sidebar-collapsed {
	--stetho-sidebar-width: var(--stetho-sidebar-rail);
}

.stetho-shell .app-content {
	margin-block-start: 0;
	padding-block-start: calc(3.75rem + 0.5rem);
	min-height: 100vh;
	transition: margin-inline-start 0.22s ease;
}

@media (min-width: 992px) {
	.stetho-shell .app-header {
		padding-inline-start: var(--stetho-sidebar-width);
		transition: padding-inline-start 0.22s ease;
	}

	.stetho-shell .app-content {
		margin-inline-start: var(--stetho-sidebar-width);
	}
}

/* Header toggle buttons */
.stetho-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0.625rem;
	background: transparent;
	color: var(--header-prime-color, #536485);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stetho-icon-btn:hover {
	background: var(--stetho-nav-hover);
	color: var(--stetho-nav-active-text);
}

.stetho-icon-btn:focus-visible {
	outline: 2px solid var(--stetho-nav-active-text);
	outline-offset: 2px;
}

.stetho-shell .app-header .header-content-left {
	gap: 0.25rem;
	padding-inline-start: 0.5rem;
}

/* --------------------------------------------------------------------------
   Desktop sidebar
   -------------------------------------------------------------------------- */

.stetho-sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 103;
	display: flex;
	flex-direction: column;
	width: var(--stetho-sidebar-width);
	background: var(--stetho-sidebar-bg);
	border-inline-end: 1px solid var(--stetho-sidebar-border);
	overflow: hidden;
	transition: width 0.22s ease;
}

.stetho-sidebar__brand {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 3.75rem;
	padding: 0 1.25rem;
	border-block-end: 1px solid var(--stetho-sidebar-border);
	overflow: hidden;
}

.stetho-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	text-decoration: none;
}

.stetho-brand:hover {
	text-decoration: none;
}

.stetho-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 1.75rem;
	object-fit: contain;
}

.stetho-brand__logo--mini {
	display: none;
}

.stetho-sidebar__scroll {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0.875rem 0.75rem 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--stetho-sidebar-border) transparent;
}

.stetho-sidebar__scroll::-webkit-scrollbar {
	width: 0.375rem;
}

.stetho-sidebar__scroll::-webkit-scrollbar-thumb {
	background: var(--stetho-sidebar-border);
	border-radius: 1rem;
}

.stetho-sidebar__footer,
.stetho-drawer__footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-block-start: 1px solid var(--stetho-sidebar-border);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.stetho-nav {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.stetho-nav__section {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stetho-nav__category {
	padding: 0 0.75rem 0.375rem;
	color: var(--stetho-nav-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stetho-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stetho-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0.625rem;
	background: transparent;
	color: var(--stetho-nav-text);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: start;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stetho-nav__link:hover,
.stetho-nav__link:focus-visible {
	background: var(--stetho-nav-hover);
	color: var(--stetho-nav-active-text);
	text-decoration: none;
}

.stetho-nav__link:focus-visible {
	outline: 2px solid var(--stetho-nav-active-text);
	outline-offset: -2px;
}

.stetho-nav__link.is-active {
	background: var(--stetho-nav-active-bg);
	color: var(--stetho-nav-active-text);
	font-weight: 600;
}

.stetho-nav__link.is-active::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.25rem;
	top: 50%;
	width: 0.1875rem;
	height: 1.25rem;
	border-radius: 0.25rem;
	background: currentColor;
	transform: translateY(-50%);
}

.stetho-nav__link.has-active {
	color: var(--stetho-nav-active-text);
}

.stetho-nav__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--stetho-nav-muted);
	font-size: 1.1875rem;
	transition: color 0.15s ease;
}

.stetho-nav__link:hover .stetho-nav__icon,
.stetho-nav__link.is-active .stetho-nav__icon,
.stetho-nav__link.has-active .stetho-nav__icon {
	color: currentColor;
}

.stetho-nav__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stetho-nav__chevron {
	flex: 0 0 auto;
	color: var(--stetho-nav-muted);
	font-size: 1rem;
	transition: transform 0.2s ease, color 0.15s ease;
}

.stetho-nav__details[open] > summary .stetho-nav__chevron {
	transform: rotate(90deg);
}

.stetho-nav__list--sub {
	position: relative;
	margin: 0.125rem 0 0.25rem;
	padding-inline-start: 1.25rem;
}

.stetho-nav__list--sub::before {
	content: "";
	position: absolute;
	inset-block: 0.375rem;
	inset-inline-start: 0.625rem;
	width: 1px;
	background: var(--stetho-sidebar-border);
}

.stetho-nav__category--inline {
	padding: 0.75rem 0.75rem 0.25rem;
}

/* Submenu expansion uses native <details>, so groups can be opened before the Blazor
   circuit connects (e.g. while the dashboard is still loading). */
.stetho-nav__details > summary {
	list-style: none;
	cursor: pointer;
}

.stetho-nav__details > summary::-webkit-details-marker {
	display: none;
}

/* --------------------------------------------------------------------------
   Account footer
   -------------------------------------------------------------------------- */

.stetho-user {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	padding: 0.375rem;
	border-radius: 0.625rem;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.stetho-user:hover {
	background: var(--stetho-nav-hover);
	text-decoration: none;
}

.stetho-user__avatar {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.stetho-user__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.stetho-user__name {
	color: var(--default-text-color);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stetho-user__role {
	color: var(--stetho-nav-muted);
	font-size: 0.6875rem;
}

.stetho-user__logout {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	color: var(--stetho-nav-muted);
	font-size: 1.125rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stetho-user__logout:hover {
	background: rgba(var(--danger-rgb), 0.1);
	color: rgb(var(--danger-rgb));
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Collapsed rail (desktop only)
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.stetho-sidebar.is-collapsed .stetho-sidebar__brand {
		justify-content: center;
		padding: 0 0.75rem;
	}

	.stetho-sidebar.is-collapsed .stetho-brand__logo--full {
		display: none;
	}

	.stetho-sidebar.is-collapsed .stetho-brand__logo--mini {
		display: block;
		max-height: 1.625rem;
	}

	.stetho-sidebar.is-collapsed .stetho-nav__category {
		height: 1px;
		margin: 0.5rem 0.25rem;
		padding: 0;
		background: var(--stetho-sidebar-border);
		font-size: 0;
	}

	.stetho-sidebar.is-collapsed .stetho-nav__category span {
		display: none;
	}

	.stetho-sidebar.is-collapsed .stetho-nav__label,
	.stetho-sidebar.is-collapsed .stetho-nav__chevron,
	.stetho-sidebar.is-collapsed .stetho-collapse {
		display: none;
	}

	.stetho-sidebar.is-collapsed .stetho-nav__link {
		justify-content: center;
		gap: 0;
		padding-inline: 0;
	}

	.stetho-sidebar.is-collapsed .stetho-nav__link.is-active::before {
		inset-inline-start: 0;
	}

	.stetho-sidebar.is-collapsed .stetho-sidebar__footer {
		flex-direction: column;
		padding: 0.625rem 0.5rem;
	}

	.stetho-sidebar.is-collapsed .stetho-user {
		justify-content: center;
		padding: 0.25rem;
	}

	.stetho-sidebar.is-collapsed .stetho-user__meta {
		display: none;
	}

	.stetho-sidebar.is-collapsed .stetho-user__logout {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Mobile drawer (Bootstrap offcanvas)
   -------------------------------------------------------------------------- */

.offcanvas.stetho-drawer {
	--bs-offcanvas-width: 17.5rem;
	background: var(--stetho-sidebar-bg);
	border-inline-end: 1px solid var(--stetho-sidebar-border);
}

.stetho-drawer__header {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	height: 3.75rem;
	padding: 0 1rem 0 1.25rem;
	border-block-end: 1px solid var(--stetho-sidebar-border);
}

.stetho-drawer__body {
	flex: 1 1 auto;
	padding: 0.875rem 0.75rem 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.stetho-drawer__footer {
	border-block-start: 1px solid var(--stetho-sidebar-border);
}

[data-theme-mode="dark"] .stetho-drawer .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.stetho-sidebar,
	.stetho-shell .app-header,
	.stetho-shell .app-content,
	.stetho-nav__chevron {
		transition: none;
	}
}