/* ------ Sidebar ------ */

/* This creates a skinny side bar fixed to the left of the page */
.sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    width: 5rem;
    padding: 2rem 1rem;
    background-color: #f8f9fa;
    z-index: 1050;
    transition: width 0.1s ease-in-out;

    img {
        width: 2rem;
    }
}

/* Logo container styling */
.logo-container {
    margin-bottom: 1rem;
}

/* Default state - show only icon */
.logo-container .logo-icon {
    display: block !important;
    width: 3rem;
    transition: all 0.1s ease-in-out;
}

.logo-container .logo-full {
    display: none !important;
    width: 13rem;
    transition: all 0.1s ease-in-out;
}

/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
    width: 17rem;

    img {
        width: 13rem;
    }
    
    /* Switch logos on hover */
    .logo-container .logo-icon {
        display: none !important;
    }
    
    .logo-container .logo-full {
        display: block !important;
    }
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* fix the width of the icons */
.sidebar .nav-link i {
    width: 1rem;
}

/* hide the navlink labels by default */
.sidebar .nav-link span {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.sidebar .multi-language {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.sidebar .logout-icon {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    /* background-color: #f8f9fa; */
}

.sidebar:hover .logout-icon {
    visibility: visible;
    opacity: 1;
}


/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span {
    visibility: visible;
    opacity: 1;
}

.sidebar:hover .multi-language {
    visibility: visible;
    opacity: 1;
}

/* container for the sidebar header. make sure the contents don't wrap when
* the sidebar is collapsed.
*/
.sidebar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

/* position the header relative to the logo and hide by default */
.sidebar-header h2 {
    opacity: 0;
    margin-left: 1rem;
    margin-bottom: 0;
    transition: opacity 0.1s ease-in-out;
}

/* reveal the header when the sidebar is toggled */
.sidebar:hover .sidebar-header h2 {
    opacity: 1;
}

/* position the content relative to the collapsed sidebar */
.content {
    margin-left: 7rem;
    margin-right: 2rem;
    padding: 2rem 1rem;
}

.show-hide {
    position: relative;
    width: fit-content;
    padding: 5px 0px;
    background-color: #198754;
    color: transparent;
    border-radius: 5px;
    border-color: 1px solid #198754;
    margin-bottom: 10px;
}

.show-hide::before {
    background: inherit;
    color: #fff;
    content: "Add Colunas";
    position: absolute;
    left: 5px;
    right: 5px;
}

.dash-spreadsheet-menu {
    /* display: flex;
    flex-direction: row; */
    justify-content: flex-end;
}

/* Estilo para os itens do submenu */
.sidebar .nav-link {
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.sidebar .nav-link:hover {
    background-color: #e9ecef;
    color: #333;
}

.sidebar .nav-link.active {
    background-color: var(--secondary-color);
    color: white;
}

/* Estilo específico para o submenu */
#submenu-1-collapse .nav-link {
    padding-left: 2rem;
    font-size: 0.9rem;
    background-color: transparent;
    color: #333;
}

#submenu-1-collapse .nav-link:hover {
    background-color: #e9ecef;
    color: #333;
}

#submenu-1-collapse .nav-link.active {
    background-color: #0d6efd;
    color: white;
}