/* Responsive Scroll Management */

/* HTML and Body full height */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Main content area - scroll vertical e horizontal responsivo */
main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Content wrapper com scroll automático */
.scroll-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Estilo para scrollbar em navegadores WebKit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Responsivo para mobile (md breakpoint = 768px) */
@media (max-width: 768px) {
    main {
        height: calc(100vh - 60px);
        overflow-x: hidden;
    }
    
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    /* Reduz padding em mobile */
    main {
        padding: 1rem;
    }
}

/* Responsivo para tablets e acima */
@media (min-width: 769px) {
    main {
        height: calc(100vh - 80px);
    }
}

/* Responsivo para telas pequenas (sm: 640px) */
@media (max-width: 640px) {
    main {
        height: calc(100vh - 50px);
        padding: 0.5rem;
    }
    
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* Tabelas com scroll horizontal */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modal scroll responsivo */
.modal-content,
[class*="max-h-"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Previne scroll body quando modal está aberto */
body.modal-open {
    overflow: hidden;
}

/* Flex container para distribuição de conteúdo */
.flex-grow {
    flex-grow: 1;
}

/* Sidebar com scroll */
aside nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dropdown lists com scroll */
[id*="Dropdown"] {
    overflow-y: auto;
    max-height: 240px;
}

/* List containers com scroll automático */
.list-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
}

/* Corrige height para calc responsivo */
#app, [role="main"] {
    height: 100%;
    width: 100%;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Container de conteúdo com altura dinâmica */
.content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Sections com scroll interno */
section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
}

/* Ajuste para diferentes resoluções */
@media (min-width: 1024px) {
    main {
        height: calc(100vh - 90px);
    }
    
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
}

/* Ajuste para telas muito grandes */
@media (min-width: 1920px) {
    main {
        height: calc(100vh - 100px);
    }
}