/* Sidebar base */
.sidebar-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 100vh;
	overflow-x: visible;
	transition: width 0.3s ease;
	display: flex;
	flex-direction: column;
	z-index: 1030;
}
@media (min-width: 768px) {
	.sidebar-container {
		width: 250px;
	}
}

.sidebar-toggle-btn {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateX(50%);
	min-width: 1.5rem !important;
	width: 1.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background-color: #007bff;
	color: #fff;
	border: none;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: transform 0.3s ease, background-color 0.2s ease;
}


/* Icon flip */
.sidebar-toggle-btn i {
  transition: transform 0.3s ease;
}

.sidebar-toggle-btn i.flipped {
  transform: rotate(180deg);
}

/* Collapsed state */
.sidebar-container.sidebar-closed {
  width: 72px;
  /* icons-only width */
}

.sidebar-container.sidebar-closed ul {
  align-items: center;
  /* for your flex-column list */
}

.sidebar-container.sidebar-closed div {
  align-items: center;
  /* for your flex-column list */
}

.sidebar-container.sidebar-closed .nav-text {
  display: none;
  /* hide text */
}

.sidebar-container.sidebar-closed .logo-brand-long {
	display: none;
}
.sidebar-container:not(.sidebar-closed) .logo-brand-short {
	display: none;
}

.sidebar-container a {
    display: flex;
    gap: 0.3rem;
    justify-items: center;
    align-items: center;
    padding: .5rem 1rem;
}

.sidebar-container.sidebar-closed .nav-link {
  justify-content: center !important;
  text-align:center;
}

/* One weight for every row and section header of the menu, set here rather than inherited (the selected row is told apart by its tint and bar, never by a bolder text). Spans only: the chevron of a header is an icon of the solid font, which needs its own weight. */
.sidebar-container .nav-link,
.sidebar-container .nav-section-toggle,
.sidebar-container .nav-section-toggle span.nav-text {
	font-weight: 400;
}

/* A folded section of the menu (the system screens): a toggle that looks like a link, and its screens a step in. */
.nav-section-toggle {
	align-items: center;
	background: none;
	border: 0;
	display: flex;
	gap: 0.3rem;
	padding: .5rem 1rem;
	position: relative;
	text-align: left;
	width: 100%;
}

/* site.css (loaded after this file) gives .nav-item width: fit-content: one more class to win over it. */
.nav-item.nav-section {
	width: 100%;
}

.nav-section-toggle:focus {
	box-shadow: none;
	outline: 0;
}

.nav-section-toggle:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(var(--theme-navbar-text-rgb), 0.3);
}

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

.nav-section-list .nav-link {
	padding-left: 1.75rem;
}

/* The chevron is pinned to the right edge (not placed by the flow of the row) and changes glyph instead of turning, so nothing moves when the section opens or closes. */
.nav-section-toggle .nav-section-chevron {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
}

.nav-section.is-open .nav-section-chevron::before {
	content: "\f077";
}

.nav-section.is-open .nav-section-indicator {
	display: none;
}

.sidebar-container.sidebar-closed .nav-section-toggle {
	justify-content: center;
}

.sidebar-container.sidebar-closed .nav-section-list .nav-link {
	padding-left: 1rem;
}

/* The selected screen: a tinted row (a veil of the menu's own text colour, so it suits both themes) with a bar on its left edge (an inset shadow, so nothing shifts), the text keeping its weight so the row never changes width. The hovered row
   has the same look, lighter. More classes than the .nav-link.active and the .nav-item of site.css, which loads after this file (it gives .nav-item width: fit-content: the rows
   are made full width here so the tint and the bar span the whole menu). A folded section holding the selected screen gets the selected look too (.has-active). */
.sidebar-container .nav-item {
	width: 100%;
}

.sidebar-container .nav-link:hover:not(.logo-brand-container):not(.nav-link-locked) {
	background-color: rgba(var(--theme-navbar-text-rgb), 0.05);
	box-shadow: inset 4px 0 0 rgba(var(--theme-navbar-text-rgb), 0.3);
}

.sidebar-container .nav-link.active,
.sidebar-container .nav-link.active:hover,
.sidebar-container .nav-section.has-active:not(.is-open) > .nav-section-toggle,
.sidebar-container .nav-section.has-active:not(.is-open) > .nav-section-toggle:hover {
	background-color: rgba(var(--theme-navbar-text-rgb), 0.1);
	box-shadow: inset 4px 0 0 var(--theme-navbar-text);
	color: var(--theme-navbar-text) !important;
	font-weight: 400;
}

/* The count badges sit on the top right corner of the row's icon (vertically from the middle of the row, which is taller when the label is shown), so a long label is never covered (the label keeps the whole row). */
.sidebar-container .nav-item .navbar-indicator {
	font-size: 0.68rem;
	left: 2.1rem;
	padding: 1px 5px;
	right: auto;
	top: calc(50% - 1.2rem);
	transform: none;
}

/* The screens of a folded section are a step in (see .nav-section-list .nav-link): their badge follows their icon. */
.sidebar-container:not(.sidebar-closed) .nav-section-list .nav-item .navbar-indicator {
	left: calc(2.1rem + 0.75rem);
}

/* The icon moves to the middle of the narrow menu (72px): the badge follows it by the same distance, (72px - icon width) / 2 - the left padding of the row. */
.sidebar-container.sidebar-closed .nav-item .navbar-indicator {
	left: calc(2.1rem + 36px - 2rem);
}