/* Application shell: sidebar width, collapse state and active item.
   The Tailwind browser build injects its utilities after this sheet, so the
   rules that must beat a utility are scoped under html[data-sidebar]. */

.app-sidebar {
	width: 16rem;
	transition: width 150ms ease;
}

.sidebar-item.active {
	box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Collapse applies only where the sidebar is persistent (lg and up, the same
   breakpoint as lg:drawer-open); the mobile drawer is always full width. */
@media (min-width: 64rem) {
	html[data-sidebar="collapsed"] .app-sidebar {
		width: 4.25rem;
	}
	html[data-sidebar="collapsed"] .sidebar-label {
		display: none;
	}
	html[data-sidebar="collapsed"] .sidebar-brand,
	html[data-sidebar="collapsed"] .sidebar-item {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}
	html[data-sidebar="collapsed"] .sidebar-collapse-icon {
		transform: rotate(180deg);
	}
}

/* Leaflet stacks its panes and controls at z-index 400-1000. Isolating the
   map container keeps those inside the map, beneath the sticky top bar and
   the mobile navigation drawer. */
.leaflet-container {
	isolation: isolate;
}