/* === Sidebar Painel === */
#sidebar {
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), width .3s ease, min-width .3s ease;
}
#sidebar.collapsed { width: 4rem; min-width: 4rem; }
#sidebar.collapsed .sidebar-label { opacity: 0; width: 0; overflow: hidden; display: none; }
#sidebar.collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
#sidebar.collapsed ~ .flex-1 { max-width: calc(100vw - 4rem); }
@media (min-width: 768px) {
    #sidebar.collapsed .menu-grupo-btn span,
    #sidebar.collapsed nav a span,
    #sidebar.collapsed nav a i ~ span,
    #sidebar.collapsed .menu-grupo-seta { display: none; }
    #sidebar.collapsed nav a { justify-content: center; padding: 0.75rem 0; }
    #sidebar.collapsed .menu-grupo-itens { display: none !important; }
    #sidebar.collapsed .flex.items-center.gap-3 { justify-content: center; }
    #sidebar.collapsed ~ .flex-1 .painel-content-area {
        max-width: calc(100vw - 4rem);
    }
}

/* === Sidebar Mobile === */
@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 100;
        transform: translateX(-100%);
        will-change: transform;
        overscroll-behavior: contain;
    }
    #sidebar.open { transform: translateX(0); }
    #sidebarOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    #sidebarOverlay.open { display: block; opacity: 1; }
    .painel-content-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* === Swipe zone — área invisível para capturar gesture de swipe na borda esquerda === */
.swipe-zone {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 100%;
    z-index: 50;
}

/* === Master Sidebar === */
#masterSidebar { transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }

@media (max-width: 767px) {
    #masterSidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 100;
        transform: translateX(-100%);
        will-change: transform;
    }
    #masterSidebar.open { transform: translateX(0); }
    #masterSidebarOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    #masterSidebarOverlay.open { display: block; opacity: 1; }
}

/* === Page Transitions (App-Like) === */
@keyframes page-enter-from-right {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes page-exit-to-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-30%); opacity: 0; }
}

.page-transition-enter {
    animation: page-enter-from-right 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.page-transition-exit {
    animation: page-exit-to-left 0.25s ease forwards;
}

/* === Slide-up (modais, sheets, toasts) === */
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up { animation: slide-up 0.3s ease-out; }

/* === Slide-down (dropdowns, alerts) === */
@keyframes slide-down {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-down { animation: slide-down 0.2s ease; }

#masterSidebar { transition: transform .3s ease; }

@media (max-width: 767px) {
    #masterSidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
    }
    #masterSidebar.open { transform: translateX(0); }
    #masterSidebarOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 99;
    }
    #masterSidebarOverlay.open { display: block; }
}

/* Impedir rolagem dupla e interna no checkout */
main.resp-content.checkout-main {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 140px !important;
}
@media (min-width: 640px) {
    main.resp-content.checkout-main {
        padding-bottom: 24px !important;
    }
}