:root {
    --sidebar-min-width: 47px;
    --sidebar-max-width: 300px;
    --page-title-height: 2.5rem;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    font-family: 'Poppins', sans-serif;
}

#general-container {
    display: flex;
    min-height: 100dvh;
}

#sidebar {
    position: fixed;
    height: 100%;
    width: calc(var(--sidebar-min-width) + var(--scrollbar-width, 0px));
    background-color: #2c3e50;
    color: white;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    text-wrap: nowrap;

    transition: width 0.3s ease;
    /* Para garantir que a sidebar fique sobre o conteúdo */
    z-index: 1000;


    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
}

#sidebar:hover {
    width: var(--sidebar-max-width);
}





#content-area {
    display: flex;
    flex-direction: column;
    width: 100%;

    margin-left: calc(var(--sidebar-min-width) + var(--scrollbar-width, 0px));

    transition: margin-left 0.3s ease;
}



#sidebar:hover~#content-area {
    /*margin-left: 300px;*/
    /* Ajusta o conteúdo para a largura expandida da sidebar */
}

/*#header {
    position: sticky;
    top: 0;
    z-index: 1;
}*/

#page-title {
    position: fixed;
    top: 0;
    width: calc(100% - var(--sidebar-min-width) - var(--scrollbar-width));
    height: var(--page-title-height);
    z-index: 999;
    transition: width 0.3s ease;
}

#page-filter {
    position: relative;
    top: var(--page-title-height);
}




main {
    position: relative;
    top: var(--page-title-height);
    padding-bottom: var(--page-title-height);
}

#main-content {
    flex: 1;

}

#footer {
    z-index: 999;
    /*garantir que os botões sejam clicáveis*/
    bottom: 0;
}

.fixed-header {
    width: 100%;
    border-collapse: collapse;
}

.fixed-header thead {
    position: sticky;
    top: var(--page-title-height);
    /*z-index: 1000;*/
    background-color: #fff;
    /* Fundo branco para o cabeçalho */
}

.fixed-header tbody {
    display: block;
    height: auto;
    /* Ajuste a altura da tabela */
    overflow-y: auto;
}

.fixed-header tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    /* Necessário para largura das colunas */
}

/*
.fixed-header th,
.fixed-header td {
    width: 25%;

}*/




/* bootstrap menor que md */
/*@media (max-width:767px) {*/
/*@media (hover: none) and (pointer: coarse) {*/
.touch-device #content-area {
    margin-left: 0;
}

.touch-device #page-title {
    margin-left: 0;
    width: 100%;
}

#btnMenu {
    display: none;

}

.touch-device #btnMenu {
    display: inline;

}

/*
#menuTituloFechar {
    display: none;
}

.touch-device #menuTituloFechar {
    display: flex;
}*/

#btnMenuFechar {
    display: none;
}

.touch-device #btnMenuFechar {
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

@media (min-width:769px) {
    #footer {
        padding-top: 0;
        position: sticky;
        bottom: 0;

    }

    table.primeira-coluna-padding th:first-child,
    table.primeira-coluna-padding td:first-child {
        padding-left: 1rem;

    }

    .sticky-band {
        position: sticky;
        top: var(--page-title-height);
        background-color: antiquewhite;
        z-index: 2;
    }
}

/*responsive table.tabela-card*/
@media(max-width: 767px) {
    table.tabela-card>thead {
        display: none;
        border: none;
    }

    table.tabela-card,
    table.tabela-card>tbody,
    table.tabela-card>tbody>tr,
    table.tabela-card>tbody>tr>td {
        /*border: none !important;*/
        display: block;
        width: 100%;
    }

    table.tabela-card>tbody>tr {
        border: 1px solid lightgray;
        border-radius: 10px;
        box-shadow: 2px 2px 10px lightgray;
        margin-bottom: 2rem;
    }

    table.tabela-card>tbody>tr>td:first-child {
        border-top: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    table.tabela-card>tbody>tr>td:last-child {
        border-bottom: 1px solid gray;

        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }



    table.tabela-card>tbody>tr>td {
        display: flex;
        flex-grow: 1;
        text-align: right !important;
        font-weight: bold;
        white-space: normal;
        overflow-wrap: break-word;
        /*border-bottom: 1px solid lightgray !important;*/
    }

    table.tabela-card>tbody>tr>td::before {
        content: attr(data-label);
        display: flex;
        flex-grow: 1;
        font-weight: normal;
        text-align: left;
        
        
    }




}


/*mimetizar bootstrap*/
@media (min-width:768px) {
    .w-md-25 {
        width: 25% !important;
    }

    .w-md-1ch {
        width: 1ch !important;
    }

    .w-md-2ch {
        width: 2ch !important;
    }

    .w-md-3ch {
        width: 3ch !important;
    }

    .w-md-4ch {
        width: 4ch !important;
    }

    .w-md-5ch {
        width: 5ch !important;
    }

    .w-md-6ch {
        width: 6ch !important;
    }

    .w-md-7ch {
        width: 7ch !important;
    }

    .w-md-8ch {
        width: 8ch !important;
    }

    .w-md-9ch {
        width: 9ch !important;
    }

    .w-md-10ch {
        width: 10ch !important;
    }

    .w-md-11ch {
        width: 11ch !important;
    }

    .w-md-12ch {
        width: 12ch !important;
    }

    .w-md-13ch {
        width: 13ch !important;
    }

    .w-md-14ch {
        width: 14ch !important;
    }

    .w-md-15ch {
        width: 15ch !important;
    }

    .w-md-16ch {
        width: 16ch !important;
    }

    .w-md-17ch {
        width: 17ch !important;
    }

    .w-md-18ch {
        width: 18ch !important;
    }

    .w-md-19ch {
        width: 19ch !important;
    }

    .w-md-20ch {
        width: 20ch !important;
    }
}