/* App name shown at the top of the sidebar (backend + frontend). */
.sidebar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.4rem;
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #0A7E78;
}

.sidebar-brand:hover {
    color: #0A7E78;
}

/* Theme switch: no knob/track animation, so it never visibly "slides" while the page loads. */
.theme-toggle .form-check-input {
    transition: none;
}

/* The logo takes the leftover space, so the sun/switch/moon group keeps a fixed
   position instead of sliding when the brand font finishes loading and the
   logo's width changes. */
.sidebar-header .logo {
    flex: 1 1 0;
    min-width: 0;
}

.sidebar-header .theme-toggle {
    flex-shrink: 0;
    margin-left: 1.25rem;
}

/* Always reserve the scrollbar's space: otherwise pages tall enough to scroll
   and pages that aren't differ in width by the scrollbar, and the whole layout
   (sidebar, theme switch, content) shifts a few pixels left/right when navigating. */
html {
    scrollbar-gutter: stable;
}