/* =========================================================
   WONDER APP - VENDOR APPLICATION
   File: /vendor_app/assets/css/sidebar.css
   Purpose: Vendor application sidebar navigation styling
   ========================================================= */


/* =========================================================
   1. SIDEBAR ROOT
   ========================================================= */

.app-sidebar,
.sidebar,
.vendor-sidebar {
    position:fixed;
    top:0;
    left:0;
    bottom:0;

    width:var(--sidebar-width, 260px);
    height:100vh;
    height:100dvh;

    display:flex;
    flex-direction:column;

    background:var(--sidebar-bg, var(--color-surface, #ffffff));
    color:var(--sidebar-text, var(--color-text, #1f2937));

    border-right:1px solid var(--sidebar-border, var(--color-border, #e5e7eb));

    z-index:var(--z-sidebar, 1000);

    overflow:hidden;

    transition:
        width .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   2. SIDEBAR INNER
   ========================================================= */

.sidebar-inner,
.app-sidebar-inner,
.vendor-sidebar-inner {
    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;
    min-height:0;

    overflow:hidden;
}


/* =========================================================
   3. SIDEBAR HEADER
   ========================================================= */

.sidebar-header,
.app-sidebar-header,
.vendor-sidebar-header {
    display:flex;
    align-items:center;

    width:100%;
    min-height:var(--sidebar-header-height, 72px);

    padding:
        var(--space-4, 16px)
        var(--space-4, 16px);

    border-bottom:1px solid
        var(--sidebar-border, var(--color-border, #e5e7eb));

    flex:0 0 auto;
}


/* =========================================================
   4. SIDEBAR BRAND
   ========================================================= */

.sidebar-brand,
.app-sidebar-brand,
.vendor-sidebar-brand {
    display:flex;
    align-items:center;

    min-width:0;
    width:100%;

    gap:var(--space-3, 12px);

    text-decoration:none;
    color:inherit;
}


.sidebar-brand-logo,
.sidebar-logo,
.vendor-sidebar-logo {
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    flex:0 0 40px;

    border-radius:var(--radius-md, 10px);

    overflow:hidden;
}


.sidebar-brand-logo img,
.sidebar-logo img,
.vendor-sidebar-logo img {
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


.sidebar-brand-text,
.sidebar-brand-name,
.vendor-sidebar-brand-text {
    min-width:0;

    font-size:var(--font-size-lg, 18px);
    font-weight:var(--font-weight-bold, 700);

    line-height:1.2;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   5. SIDEBAR BODY
   ========================================================= */

.sidebar-body,
.app-sidebar-body,
.vendor-sidebar-body {
    flex:1 1 auto;

    min-height:0;
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    scrollbar-width:thin;
    scrollbar-color:
        var(--sidebar-scrollbar-thumb, #cbd5e1)
        transparent;
}


/* WebKit Scrollbar */

.sidebar-body::-webkit-scrollbar,
.app-sidebar-body::-webkit-scrollbar,
.vendor-sidebar-body::-webkit-scrollbar {
    width:6px;
}


.sidebar-body::-webkit-scrollbar-track,
.app-sidebar-body::-webkit-scrollbar-track,
.vendor-sidebar-body::-webkit-scrollbar-track {
    background:transparent;
}


.sidebar-body::-webkit-scrollbar-thumb,
.app-sidebar-body::-webkit-scrollbar-thumb,
.vendor-sidebar-body::-webkit-scrollbar-thumb {
    background:var(--sidebar-scrollbar-thumb, #cbd5e1);
    border-radius:999px;
}


/* =========================================================
   6. SIDEBAR NAVIGATION
   ========================================================= */

.sidebar-nav,
.app-sidebar-nav,
.vendor-sidebar-nav {
    width:100%;

    padding:
        var(--space-3, 12px)
        var(--space-3, 12px)
        var(--space-5, 20px);
}


/* =========================================================
   7. NAVIGATION SECTION
   ========================================================= */

.sidebar-section,
.sidebar-nav-section,
.vendor-nav-section {
    width:100%;

    margin-bottom:var(--space-5, 20px);
}


.sidebar-section:last-child,
.sidebar-nav-section:last-child,
.vendor-nav-section:last-child {
    margin-bottom:0;
}


/* =========================================================
   8. SECTION TITLE
   ========================================================= */

.sidebar-section-title,
.sidebar-nav-title,
.vendor-nav-title {
    display:flex;
    align-items:center;

    min-height:28px;

    padding:
        var(--space-1, 4px)
        var(--space-3, 12px);

    margin-bottom:var(--space-2, 8px);

    color:var(--sidebar-section-text, #64748b);

    font-size:var(--font-size-xs, 12px);
    font-weight:var(--font-weight-semibold, 600);

    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.06em;
}


/* =========================================================
   9. NAVIGATION LIST
   ========================================================= */

.sidebar-menu,
.sidebar-nav-list,
.vendor-nav-list {
    list-style:none;

    width:100%;

    padding:0;
    margin:0;
}


.sidebar-menu-item,
.sidebar-nav-item,
.vendor-nav-item {
    position:relative;

    width:100%;

    padding:0;
    margin:0 0 var(--space-1, 4px);
}


.sidebar-menu-item:last-child,
.sidebar-nav-item:last-child,
.vendor-nav-item:last-child {
    margin-bottom:0;
}


/* =========================================================
   10. NAVIGATION LINK
   ========================================================= */

.sidebar-link,
.sidebar-nav-link,
.vendor-nav-link {
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    min-height:44px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-3, 12px);

    border:1px solid transparent;
    border-radius:var(--radius-md, 10px);

    color:var(--sidebar-link-text, #475569);

    background:transparent;

    text-decoration:none;

    font-size:var(--font-size-sm, 14px);
    font-weight:var(--font-weight-medium, 500);

    line-height:1.4;

    cursor:pointer;

    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.sidebar-link:hover,
.sidebar-nav-link:hover,
.vendor-nav-link:hover {
    color:var(--sidebar-link-hover-text, #111827);

    background:
        var(--sidebar-link-hover-bg, #f1f5f9);
}


.sidebar-link:focus-visible,
.sidebar-nav-link:focus-visible,
.vendor-nav-link:focus-visible {
    outline:2px solid
        var(--color-primary, #2563eb);

    outline-offset:2px;
}


/* =========================================================
   11. ACTIVE NAVIGATION
   ========================================================= */

.sidebar-link.active,
.sidebar-nav-link.active,
.vendor-nav-link.active,

.sidebar-menu-item.active > .sidebar-link,
.sidebar-nav-item.active > .sidebar-nav-link,
.vendor-nav-item.active > .vendor-nav-link,

.sidebar-link[aria-current="page"],
.sidebar-nav-link[aria-current="page"],
.vendor-nav-link[aria-current="page"] {
    color:var(--sidebar-active-text, #2563eb);

    background:
        var(--sidebar-active-bg, #eff6ff);

    border-color:
        var(--sidebar-active-border, #dbeafe);

    font-weight:var(--font-weight-semibold, 600);
}


/* Active left indicator */

.sidebar-link.active::before,
.sidebar-nav-link.active::before,
.vendor-nav-link.active::before,

.sidebar-menu-item.active > .sidebar-link::before,
.sidebar-nav-item.active > .sidebar-nav-link::before,
.vendor-nav-item.active > .vendor-nav-link::before {
    content:"";

    position:absolute;

    top:7px;
    left:-1px;
    bottom:7px;

    width:3px;

    border-radius:0 4px 4px 0;

    background:
        var(--sidebar-active-indicator, var(--color-primary, #2563eb));
}


/* =========================================================
   12. NAVIGATION ICON
   ========================================================= */

.sidebar-link-icon,
.sidebar-nav-icon,
.vendor-nav-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    flex:0 0 22px;

    color:currentColor;

    font-size:18px;
    line-height:1;
}


.sidebar-link-icon svg,
.sidebar-nav-icon svg,
.vendor-nav-icon svg {
    display:block;

    width:20px;
    height:20px;

    max-width:100%;
    max-height:100%;

    fill:none;

    stroke:currentColor;
}


/* =========================================================
   13. NAVIGATION LABEL
   ========================================================= */

.sidebar-link-label,
.sidebar-nav-label,
.vendor-nav-label {
    min-width:0;

    flex:1 1 auto;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   14. NAVIGATION BADGE
   ========================================================= */

.sidebar-link-badge,
.sidebar-nav-badge,
.vendor-nav-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;

    padding:
        0
        var(--space-2, 8px);

    margin-left:auto;

    border-radius:999px;

    color:
        var(--sidebar-badge-text, #ffffff);

    background:
        var(--sidebar-badge-bg, #ef4444);

    font-size:var(--font-size-xs, 12px);
    font-weight:var(--font-weight-semibold, 600);

    line-height:1;
}


/* =========================================================
   15. PRIMARY / SPECIAL LINK
   ========================================================= */

.sidebar-link-primary,
.sidebar-nav-link-primary,
.vendor-nav-link-primary {
    color:#ffffff;

    background:
        var(--color-primary, #2563eb);

    border-color:
        var(--color-primary, #2563eb);
}


.sidebar-link-primary:hover,
.sidebar-nav-link-primary:hover,
.vendor-nav-link-primary:hover {
    color:#ffffff;

    background:
        var(--color-primary-hover, #1d4ed8);

    border-color:
        var(--color-primary-hover, #1d4ed8);
}


/* =========================================================
   16. DISABLED LINK
   ========================================================= */

.sidebar-link.disabled,
.sidebar-nav-link.disabled,
.vendor-nav-link.disabled,

.sidebar-link[aria-disabled="true"],
.sidebar-nav-link[aria-disabled="true"],
.vendor-nav-link[aria-disabled="true"] {
    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;
}


/* =========================================================
   17. SUB NAVIGATION
   ========================================================= */

.sidebar-submenu,
.sidebar-nav-submenu,
.vendor-submenu {
    list-style:none;

    width:100%;

    padding:
        var(--space-1, 4px)
        0
        var(--space-1, 4px)
        34px;

    margin:0;
}


.sidebar-submenu-item,
.sidebar-nav-subitem,
.vendor-submenu-item {
    width:100%;

    margin:0;
}


.sidebar-submenu-link,
.sidebar-nav-sub-link,
.vendor-submenu-link {
    display:flex;
    align-items:center;

    width:100%;
    min-height:38px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border-radius:var(--radius-sm, 8px);

    color:
        var(--sidebar-submenu-text, #64748b);

    text-decoration:none;

    font-size:var(--font-size-sm, 14px);
    font-weight:var(--font-weight-normal, 400);

    transition:
        background-color .18s ease,
        color .18s ease;
}


.sidebar-submenu-link:hover,
.sidebar-nav-sub-link:hover,
.vendor-submenu-link:hover {
    color:
        var(--sidebar-link-hover-text, #111827);

    background:
        var(--sidebar-link-hover-bg, #f1f5f9);
}


.sidebar-submenu-link.active,
.sidebar-nav-sub-link.active,
.vendor-submenu-link.active {
    color:
        var(--sidebar-active-text, #2563eb);

    font-weight:
        var(--font-weight-semibold, 600);

    background:
        var(--sidebar-active-bg, #eff6ff);
}


/* =========================================================
   18. COLLAPSIBLE MENU
   ========================================================= */

.sidebar-collapsible,
.sidebar-nav-collapsible,
.vendor-nav-collapsible {
    width:100%;
}


.sidebar-toggle-link,
.sidebar-collapsible-toggle,
.vendor-nav-toggle {
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
}


/* Arrow */

.sidebar-toggle-arrow,
.sidebar-nav-arrow,
.vendor-nav-arrow {
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    margin-left:auto;

    flex:0 0 20px;

    transition:transform .2s ease;
}


.sidebar-collapsible.is-open
.sidebar-toggle-arrow,

.sidebar-nav-collapsible.is-open
.sidebar-nav-arrow,

.vendor-nav-collapsible.is-open
.vendor-nav-arrow,

[aria-expanded="true"] .sidebar-toggle-arrow,
[aria-expanded="true"] .sidebar-nav-arrow,
[aria-expanded="true"] .vendor-nav-arrow {
    transform:rotate(180deg);
}


/* =========================================================
   19. SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer,
.app-sidebar-footer,
.vendor-sidebar-footer {
    width:100%;

    padding:
        var(--space-3, 12px);

    border-top:1px solid
        var(--sidebar-border, var(--color-border, #e5e7eb));

    flex:0 0 auto;
}


/* =========================================================
   20. VENDOR PROFILE / USER AREA
   ========================================================= */

.sidebar-user,
.sidebar-profile,
.vendor-sidebar-user {
    display:flex;
    align-items:center;

    width:100%;

    gap:var(--space-3, 12px);

    padding:
        var(--space-2, 8px);

    border-radius:var(--radius-md, 10px);

    color:inherit;

    text-decoration:none;

    transition:
        background-color .18s ease;
}


.sidebar-user:hover,
.sidebar-profile:hover,
.vendor-sidebar-user:hover {
    background:
        var(--sidebar-link-hover-bg, #f1f5f9);
}


.sidebar-user-avatar,
.sidebar-profile-avatar,
.vendor-sidebar-avatar {
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    flex:0 0 40px;

    overflow:hidden;

    border-radius:50%;

    background:
        var(--color-primary-light, #dbeafe);

    color:
        var(--color-primary, #2563eb);

    font-weight:
        var(--font-weight-semibold, 600);
}


.sidebar-user-avatar img,
.sidebar-profile-avatar img,
.vendor-sidebar-avatar img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.sidebar-user-info,
.sidebar-profile-info,
.vendor-sidebar-user-info {
    min-width:0;

    flex:1 1 auto;
}


.sidebar-user-name,
.sidebar-profile-name,
.vendor-sidebar-user-name {
    display:block;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    font-size:var(--font-size-sm, 14px);
    font-weight:var(--font-weight-semibold, 600);
}


.sidebar-user-role,
.sidebar-profile-role,
.vendor-sidebar-user-role {
    display:block;

    margin-top:2px;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    color:
        var(--sidebar-muted-text, #64748b);

    font-size:var(--font-size-xs, 12px);
}


/* =========================================================
   21. SIDEBAR ACTION BUTTONS
   ========================================================= */

.sidebar-action,
.sidebar-footer-action,
.vendor-sidebar-action {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:40px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:var(--radius-md, 10px);

    color:
        var(--color-text, #334155);

    background:
        var(--color-surface, #ffffff);

    cursor:pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.sidebar-action:hover,
.sidebar-footer-action:hover,
.vendor-sidebar-action:hover {
    background:
        var(--color-surface-muted, #f8fafc);

    border-color:
        var(--color-border-hover, #cbd5e1);
}


/* =========================================================
   22. SIDEBAR COLLAPSED STATE
   ========================================================= */

.app-shell.sidebar-collapsed .app-sidebar,
.app-shell.sidebar-collapsed .sidebar,
.app-shell.sidebar-collapsed .vendor-sidebar,

.sidebar-collapsed .app-sidebar,
.sidebar-collapsed .sidebar,
.sidebar-collapsed .vendor-sidebar {
    width:var(--sidebar-collapsed-width, 76px);
}


.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-section-title,
.app-shell.sidebar-collapsed .sidebar-link-label,
.app-shell.sidebar-collapsed .sidebar-nav-label,
.app-shell.sidebar-collapsed .vendor-nav-label,
.app-shell.sidebar-collapsed .sidebar-link-badge,
.app-shell.sidebar-collapsed .sidebar-nav-badge,
.app-shell.sidebar-collapsed .vendor-nav-badge,
.app-shell.sidebar-collapsed .sidebar-user-info,
.app-shell.sidebar-collapsed .sidebar-profile-info,
.app-shell.sidebar-collapsed .vendor-sidebar-user-info,

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-section-title,
.sidebar-collapsed .sidebar-link-label,
.sidebar-collapsed .sidebar-nav-label,
.sidebar-collapsed .vendor-nav-label,
.sidebar-collapsed .sidebar-link-badge,
.sidebar-collapsed .sidebar-nav-badge,
.sidebar-collapsed .vendor-nav-badge,
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-profile-info,
.sidebar-collapsed .vendor-sidebar-user-info {
    display:none;
}


.app-shell.sidebar-collapsed .sidebar-link,
.app-shell.sidebar-collapsed .sidebar-nav-link,
.app-shell.sidebar-collapsed .vendor-nav-link,

.sidebar-collapsed .sidebar-link,
.sidebar-collapsed .sidebar-nav-link,
.sidebar-collapsed .vendor-nav-link {
    justify-content:center;

    padding:
        var(--space-2, 8px);
}


.app-shell.sidebar-collapsed .sidebar-link-icon,
.app-shell.sidebar-collapsed .sidebar-nav-icon,
.app-shell.sidebar-collapsed .vendor-nav-icon,

.sidebar-collapsed .sidebar-link-icon,
.sidebar-collapsed .sidebar-nav-icon,
.sidebar-collapsed .vendor-nav-icon {
    margin:0;
}


.app-shell.sidebar-collapsed .sidebar-footer,
.sidebar-collapsed .sidebar-footer {
    padding:
        var(--space-2, 8px);
}


.app-shell.sidebar-collapsed .sidebar-user,
.sidebar-collapsed .sidebar-user {
    justify-content:center;
}


/* =========================================================
   23. SIDEBAR MOBILE OVERLAY
   ========================================================= */

.sidebar-overlay {
    position:fixed;

    inset:0;

    z-index:
        calc(var(--z-sidebar, 1000) - 1);

    background:
        var(--sidebar-overlay-bg, rgba(15, 23, 42, .45));

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.sidebar-overlay.is-active,
.sidebar-overlay.active,
.sidebar-open .sidebar-overlay {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* =========================================================
   24. MOBILE SIDEBAR
   ========================================================= */

@media (max-width:992px) {

    .app-sidebar,
    .sidebar,
    .vendor-sidebar {
        width:var(--sidebar-width, 280px);

        transform:translateX(-100%);

        box-shadow:
            0 20px 50px rgba(15, 23, 42, .18);
    }


    .app-sidebar.is-open,
    .app-sidebar.open,
    .sidebar.is-open,
    .sidebar.open,
    .vendor-sidebar.is-open,
    .vendor-sidebar.open,

    .sidebar-open .app-sidebar,
    .sidebar-open .sidebar,
    .sidebar-open .vendor-sidebar {
        transform:translateX(0);
    }


    /* Disable desktop collapsed width on mobile */

    .app-shell.sidebar-collapsed .app-sidebar,
    .app-shell.sidebar-collapsed .sidebar,
    .app-shell.sidebar-collapsed .vendor-sidebar,

    .sidebar-collapsed .app-sidebar,
    .sidebar-collapsed .sidebar,
    .sidebar-collapsed .vendor-sidebar {
        width:var(--sidebar-width, 280px);
    }


    .app-shell.sidebar-collapsed .sidebar-brand-text,
    .app-shell.sidebar-collapsed .sidebar-section-title,
    .app-shell.sidebar-collapsed .sidebar-link-label,
    .app-shell.sidebar-collapsed .sidebar-nav-label,
    .app-shell.sidebar-collapsed .vendor-nav-label,
    .app-shell.sidebar-collapsed .sidebar-link-badge,
    .app-shell.sidebar-collapsed .sidebar-nav-badge,
    .app-shell.sidebar-collapsed .vendor-nav-badge,

    .sidebar-collapsed .sidebar-brand-text,
    .sidebar-collapsed .sidebar-section-title,
    .sidebar-collapsed .sidebar-link-label,
    .sidebar-collapsed .sidebar-nav-label,
    .sidebar-collapsed .vendor-nav-label,
    .sidebar-collapsed .sidebar-link-badge,
    .sidebar-collapsed .sidebar-nav-badge,
    .sidebar-collapsed .vendor-nav-badge {
        display:block;
    }


    .app-shell.sidebar-collapsed .sidebar-link,
    .app-shell.sidebar-collapsed .sidebar-nav-link,
    .app-shell.sidebar-collapsed .vendor-nav-link,

    .sidebar-collapsed .sidebar-link,
    .sidebar-collapsed .sidebar-nav-link,
    .sidebar-collapsed .vendor-nav-link {
        justify-content:flex-start;

        padding:
            var(--space-2, 8px)
            var(--space-3, 12px);
    }
}


/* =========================================================
   25. SMALL MOBILE
   ========================================================= */

@media (max-width:768px) {

    .app-sidebar,
    .sidebar,
    .vendor-sidebar {
        width:min(88vw, 320px);
    }


    .sidebar-header,
    .app-sidebar-header,
    .vendor-sidebar-header {
        min-height:64px;

        padding:
            var(--space-3, 12px);
    }


    .sidebar-nav,
    .app-sidebar-nav,
    .vendor-sidebar-nav {
        padding:
            var(--space-2, 8px)
            var(--space-2, 8px)
            var(--space-4, 16px);
    }


    .sidebar-link,
    .sidebar-nav-link,
    .vendor-nav-link {
        min-height:46px;
    }


    .sidebar-footer,
    .app-sidebar-footer,
    .vendor-sidebar-footer {
        padding:
            var(--space-2, 8px);
    }
}


/* =========================================================
   26. VERY SMALL MOBILE
   ========================================================= */

@media (max-width:480px) {

    .app-sidebar,
    .sidebar,
    .vendor-sidebar {
        width:90vw;
        max-width:320px;
    }


    .sidebar-link,
    .sidebar-nav-link,
    .vendor-nav-link {
        min-height:44px;

        padding:
            var(--space-2, 8px)
            var(--space-3, 12px);
    }


    .sidebar-brand-logo,
    .sidebar-logo,
    .vendor-sidebar-logo {
        width:36px;
        height:36px;

        flex-basis:36px;
    }
}


/* =========================================================
   27. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .app-sidebar,
    .sidebar,
    .vendor-sidebar,
    .sidebar-link,
    .sidebar-nav-link,
    .vendor-nav-link,
    .sidebar-overlay,
    .sidebar-toggle-arrow,
    .sidebar-nav-arrow,
    .vendor-nav-arrow {
        transition:none;
    }
}


/* =========================================================
   28. PRINT
   ========================================================= */

@media print {

    .app-sidebar,
    .sidebar,
    .vendor-sidebar,
    .sidebar-overlay {
        display:none !important;
    }
}