/* 
 * Correções do Sidebar - Ajustes para empurrar/esticar conteúdo
 * Este arquivo corrige o comportamento do sidebar para que o conteúdo
 * seja empurrado quando aberto e se estique quando recolhido
 */

/* ESTADO PADRÃO - Sidebar Aberto (250px) */
.sidebar-wrapper {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header - Ajuste para sidebar aberto */
.topbar {
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    width: calc(100% - 250px);
    height: 60px;
    z-index: 10;
    transition: all 0.3s ease;
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
}

/* Conteúdo principal - Empurrado pela sidebar */
.page-wrapper {
    margin-left: 250px;
    margin-top: 60px;
    margin-bottom: 30px;
    width: calc(100% - 250px);
    min-height: calc(100vh - 90px);
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

/* Footer - Ajustado para sidebar */
.page-footer {
    position: fixed;
    bottom: 0;
    left: 250px;
    right: 0;
    width: calc(100% - 250px);
    background: #fff;
    border-top: 1px solid #e4e4e4;
    padding: 7px;
    text-align: center;
    z-index: 3;
    transition: all 0.3s ease;
}

/* ESTADO RECOLHIDO - Sidebar Minimizado (70px) */
.wrapper.toggled .sidebar-wrapper {
    width: 70px !important;
}

.wrapper.toggled .topbar {
    left: 70px !important;
    width: calc(100% - 70px) !important;
}

.wrapper.toggled .page-wrapper {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
    max-width: calc(100% - 70px) !important;
}

.wrapper.toggled .page-footer {
    left: 70px !important;
    width: calc(100% - 70px) !important;
}

/* Conteúdo das páginas - garante que ocupe todo espaço disponível */
.page-wrapper .row {
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.page-wrapper .container-fluid {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
}

/* Força o conteúdo a ocupar todo espaço quando sidebar está recolhido */
.wrapper.toggled .page-wrapper .container-fluid,
.wrapper.toggled .page-wrapper .row,
.wrapper.toggled .page-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cards e conteúdo responsivo */
.card {
    width: 100%;
    margin-bottom: 1.5rem;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
    /* Em mobile, sidebar fica sobreposto */
    .sidebar-wrapper {
        transform: translateX(-100%);
        z-index: 999;
    }
    
    .wrapper.toggled .sidebar-wrapper {
        transform: translateX(0);
        width: 250px;
    }
    
    /* Conteúdo ocupa tela toda em mobile */
    .topbar {
        left: 0;
        width: 100%;
    }
    
    .page-wrapper {
        margin-left: 0;
        width: 100%;
    }
    
    .page-footer {
        left: 0;
        width: 100%;
    }
    
    /* Overlay para fechar sidebar em mobile */
    .wrapper.toggled::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }
}

@media (max-width: 576px) {
    .page-wrapper .container-fluid {
        padding: 1rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
}

/* ANIMAÇÕES SUAVES */
* {
    box-sizing: border-box;
}

.sidebar-wrapper,
.topbar,
.page-wrapper,
.page-footer {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Garante que elementos não quebrem o layout */
.page-wrapper * {
    max-width: 100%;
}

/* Correção específica para tabelas muito largas */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table {
    margin-bottom: 0;
}

/* Botão toggle do sidebar */
.mobile-toggle-menu {
    display: none;
}

@media (max-width: 768px) {
    .mobile-toggle-menu {
        display: block;
    }
}

/* Estados de transição */
.wrapper.sidebar-transition .sidebar-wrapper,
.wrapper.sidebar-transition .topbar,
.wrapper.sidebar-transition .page-wrapper,
.wrapper.sidebar-transition .page-footer {
    transition: all 0.3s ease-in-out;
}

/* ESTADO HOVER quando sidebar recolhido */
.wrapper.toggled.sidebar-hovered .sidebar-wrapper {
    width: 250px !important;
    box-shadow: 2px 0 15px rgba(0,0,0,0.2);
    z-index: 999;
}

.wrapper.toggled.sidebar-hovered .sidebar-wrapper .menu-title {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0.1s;
}

/* Ocultar textos quando recolhido */
.wrapper.toggled .sidebar-wrapper .menu-title {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* MOBILE SPECIFIC */
@media (max-width: 768px) {
    /* Sidebar overlay em mobile */
    .wrapper.mobile-view .sidebar-wrapper {
        position: fixed;
        transform: translateX(-100%);
        z-index: 999;
        width: 250px;
        height: 100vh;
        transition: transform 0.3s ease;
    }
    
    .wrapper.mobile-view.sidebar-open .sidebar-wrapper {
        transform: translateX(0);
    }
    
    /* Overlay escuro */
    .wrapper.mobile-view.sidebar-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
        animation: fadeInOverlay 0.3s ease;
    }
    
    @keyframes fadeInOverlay {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Conteúdo em mobile */
    .wrapper.mobile-view .topbar,
    .wrapper.mobile-view .page-wrapper,
    .wrapper.mobile-view .page-footer {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Impedir scroll do body quando sidebar aberto */
    body.sidebar-overlay-active {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Loading state durante transições */
.wrapper.sidebar-transition {
    pointer-events: none;
}

.wrapper.sidebar-transition * {
    pointer-events: none;
}

/* Restaurar pointer events após transição */
.wrapper:not(.sidebar-transition) {
    pointer-events: auto;
}

.wrapper:not(.sidebar-transition) * {
    pointer-events: auto;
}