/* Style layoutu: ładujemy też z base.html.twig (link), żeby produkcja nie polegała wyłącznie na imporcie w app.js. */
.app-layout .app-sidebar {
    --bs-offcanvas-width: min(100vw, 16rem);
}

/* Globalna reguła Bootstrapa: .offcanvas { visibility: hidden; transform … } trzyma panel poza ekranem, dopóki nie ma .show. */
/* Przy .offcanvas-lg — od lg w górę — trzeba to nadpisać, inaczej sidebar jest „niewidoczny” nawet na desktopie. */
@media (min-width: 992px) {
    .app-layout .app-sidebar.offcanvas,
    .app-layout .app-sidebar.offcanvas-start {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        width: var(--bs-offcanvas-width, 16rem) !important;
        flex-shrink: 0;
        max-width: none;
    }

    /* Bootstrap wymusza tło transparent przy .offcanvas-lg — gubi wtedy .text-bg-dark. */
    .app-layout .app-sidebar.text-bg-dark,
    .app-layout .app-sidebar {
        background-color: var(--bs-dark) !important;
    }
}

.app-layout .app-sidebar .app-sidebar-link.nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0.75rem;
}

.app-layout .app-sidebar .app-sidebar-link.nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.app-layout .app-sidebar .app-sidebar-link.nav-link.active {
    color: #212529;
    background-color: #fff;
    font-weight: 600;
}