/* ── Sidebar base: force column layout at all breakpoints ───────────────────
   Bootstrap's .navbar defaults to flex-row/align-center. Tabler only overrides
   this inside @media (min-width:992px). On mobile the container stays a row and
   the nav menu ends up misplaced. These two rules fix it globally.            */
#sidebar {
    flex-direction: column !important;
    align-items: stretch !important;
}

#sidebar .container-fluid {
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
}

/* ── Mobile sidebar: fixed overlay drawer ───────────────────────────────── */
@media (max-width: 991.98px) {
    /* Pull sidebar off-screen to the left */
    #sidebar {
        position: fixed !important;
        top: 0;
        left: -290px;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1050;
        transition: left 0.25s ease;
        overflow-y: auto;
    }

    /* Slide in when open */
    #sidebar.mobile-open {
        left: 0;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.4);
    }

    /* Hide nav menu by default; show when drawer is open */
    #sidebar #sidebar-menu {
        display: none;
    }

    #sidebar.mobile-open #sidebar-menu {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* Semi-transparent backdrop behind the open drawer */
    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
    }

    #sidebar-backdrop.show {
        display: block;
    }

    /* No left margin on mobile — sidebar is a floating overlay */
    .page-wrapper {
        margin-left: 0 !important;
    }
}

/* ── Desktop sidebar collapse (icons only) ──────────────────────────────── */
@media (min-width: 992px) {
    /* Ensure menu grows to fill sidebar height so mt-auto works */
    #sidebar #sidebar-menu {
        flex-direction: column;
        flex: 1 1 auto;
    }

    body.sidebar-collapsed #sidebar {
        width: 3.5rem;
        overflow: hidden;
    }

    /* Adjust page-wrapper left margin to match the collapsed sidebar width */
    body.sidebar-collapsed .page-wrapper {
        margin-left: 3.5rem !important;
    }

    body.sidebar-collapsed #sidebar .sidebar-brand-text,
    body.sidebar-collapsed #sidebar .nav-link-title,
    body.sidebar-collapsed #sidebar .sidebar-user {
        display: none !important;
    }

    body.sidebar-collapsed #sidebar .navbar-brand {
        display: none !important;
    }

    body.sidebar-collapsed #sidebar .sidebar-header {
        justify-content: center;
    }

    body.sidebar-collapsed #sidebar .nav-link {
        justify-content: center;
        padding-inline: 0;
    }

    body.sidebar-collapsed #sidebar .nav-link-icon {
        display: inline-block !important;
        margin-inline-end: 0;
    }
}

/* ── Theme toggle icons ─────────────────────────────────────────────────── */
[data-bs-theme="light"] .theme-icon-light { display: none !important; }
[data-bs-theme="dark"]  .theme-icon-dark  { display: none !important; }