/* ============================================================
   Sidebar — Mobile-Optimized Styles
   Breakpoint: max-width 768px
   The sidebar becomes a slide-in drawer triggered by
   body.sidebar-mobile-open (toggled via the topnav hamburger).
   ============================================================ */

/* ---- Backdrop overlay shown when the drawer is open ---- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 5;
}

/* ---- Hamburger button (only visible on mobile) ---- */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    font-size: 20px;
    line-height: 1;
    color: #1F2937;
    cursor: pointer;
    align-items: center;
}

/* ============================================================
   Media query: activate drawer layout at ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

    /* Sidebar: always full-width but hidden off-screen */
    .navigation.sidebar,
    .navigation.sidebar.collapsed {
        width: 250px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 6;
    }

    /* Slide in when the body carries the open class */
    body.sidebar-mobile-open .navigation.sidebar {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Show backdrop */
    body.sidebar-mobile-open .sidebar-backdrop {
        display: block;
    }

    /* Restore the full-width sidebar look even when the desktop
       "collapsed" class is present (icon-rail mode doesn't apply on mobile) */
    .navigation.sidebar.collapsed a {
        font-size: 14px;
        gap: 12px;
        padding: 12px 16px;
        justify-content: flex-start;
    }
    .navigation.sidebar.collapsed .arrow       { display: block; }
    .navigation.sidebar.collapsed .logo        { display: block; }
    .navigation.sidebar.collapsed .logo-holder { justify-content: space-between; }
    .navigation.sidebar.collapsed .link-main::after { content: none; }
    .navigation.sidebar.collapsed .drp {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: 0;
        padding: 0;
    }
    .navigation.sidebar.collapsed .drp ul li a { color: #fff; }

    /* Hide the desktop collapse toggle on mobile */
    .togglesidebar { display: none; }

    /* Content area takes full width (sidebar is out of flow as drawer) */
    .main-panel,
    .sidebar.collapsed ~ .main-panel {
        padding-left: 0;
    }

    header {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Show the hamburger button */
    .mobile-menu-btn {
        display: inline-flex;
    }

    /* Breadcrumbs — allow wrapping and truncate the active (current) item */
    .bread {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .bread .bread-item {
        white-space: nowrap;
    }

    .bread .bread-item.active {
        max-width: 55vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Page title row — prevent overflow */
    .page-title {
        overflow: hidden;
    }
}