/* Container principal com 100vh de altura e 100% de largura */
.dashboard-nippify {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow: hidden; /* Remover o scroll da página principal */
}

/* Container superior (barra superior) com 60px de altura e 100% de largura */
.bars-nippify {
height: 60px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Logotipo na barra superior */
.logo-container {
width: 260px;
display: flex;
justify-content: center;
align-items: center;
}

.logo-img {
max-height: 25px;
}

/* Dark Mode Switch + Menu à direita */
.nippify-top-right {
display: flex;
align-items: center;
gap: 20px;
}

/* Dark Mode Switch */
.nippify-switch-bars-container {
display: flex;
align-items: center;
}

.nippify-switch-bars {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}

.nippify-switch-bars input {
opacity: 0;
width: 0;
height: 0;
}

.nippify-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .4s;
border-radius: 20px;
}

.nippify-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
transition: .4s;
border-radius: 50%;
}

input:checked + .nippify-slider {
background-color: #0098F5;
}

input:checked + .nippify-slider:before {
transform: translateX(18px);
}

.nippify-label {
font-family: 'Nunito Sans', sans-serif;
font-size: 14px;
font-weight: 500;
margin-left: 12px;
}

/* Menu superior */
.nippify-menu-superior-dash-wrapper {
font-family: 'Nunito Sans', sans-serif;
font-size: 14px;
font-weight: 500;
}

.nippify-menu-superior-dash-container {
position: relative;
display: inline-block;
}

.nippify-menu-superior-dash-btn {
display: flex;
align-items: center;
cursor: pointer;
height: 60px;
}

.nippify-menu-superior-dash-btn i {
margin-right: 10px;
}

.nippify-menu-superior-dash-btn span {
margin-right: 10px;
}

/* Dropdown */
.nippify-menu-superior-dash-dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 180px;
z-index: 1;
}

.nippify-menu-superior-dash-dropdown-content a {
text-decoration: none;
padding: 12px 16px;
display: flex;
align-items: center;
transition: all 0.3s ease, border-color 0.3s ease;
white-space: nowrap;
position: relative;
}

/* Container inferior, com dois containers: um para a barra lateral e outro para o conteúdo */
.content-nippify {
display: flex;
flex-grow: 1;
width: 100%;
overflow: hidden; /* Garantir que o conteúdo inferior ocupe todo o espaço sem scroll */
}

/* Barra lateral à esquerda com 260px de largura e rolagem */
.slide-nippify {
width: 260px; /* Largura fixa */
min-width: 260px; /* Garante que nunca diminua abaixo de 260px */
max-width: 260px; /* Garante que nunca aumente acima de 260px */
flex-shrink: 0; /* Impede que o elemento diminua */
display: flex;
flex-direction: column;
overflow-y: auto; /* Barra de rolagem vertical */
}

.nippify-img-dashboard-container {
width: 150px;
height: 150px;
margin: 25px auto 15px;
display: flex;
justify-content: center;
align-items: center;
}

.nippify-img-dashboard-container img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background-color: #fff;
}

.profile-name {
margin-top: 10px;
margin-bottom: 25px;
font-size: 14px;
font-weight: 600;
text-align: center;
}

/*alterar depois*/
.menu-container {
    font-size: 14px;
}

li.title-associado {
    font-weight: 500;
    color: grey;
    padding-top: 20px;
}

/* Menu lateral */
.menu-container ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

.menu-container ul li {
position: relative;
transition: all 150ms ease-in-out;
}

.menu-container ul li a {
text-decoration: none;
display: flex;
align-items: center;
padding: 12px;
transition: all 0.3s ease;
width: 100%;
}

.menu-container ul li a i {
margin-right: 10px;
}

.menu-container ul li::before {
position: absolute;
content: "";
height: 0;
width: 4px;
top: 50%;
left: 0;
transition: height 0.3s ease;
transform: translateY(-50%);
}

.menu-container ul li:hover::before {
height: 100%;
}

li.title-associado {
    padding-left: 15px;
}

/* Conteúdo principal à direita */
.nippify-dashboard-content {
flex-grow: 1;
max-width: 100%!important;
padding: 20px;
overflow-y: auto; /* Barra de rolagem para o conteúdo principal */
}

/* Estilizar a barra de rolagem */
.slide-nippify::-webkit-scrollbar,
.nippify-dashboard-content::-webkit-scrollbar {
width: 8px; /* Largura da barra de rolagem */
}

.slide-nippify::-webkit-scrollbar-track,
.nippify-dashboard-content::-webkit-scrollbar-track {
background: #222; /* Cor do fundo da barra */
}

.slide-nippify::-webkit-scrollbar-thumb,
.nippify-dashboard-content::-webkit-scrollbar-thumb {
background-color: #666; /* Cor da parte móvel */
border-radius: 10px; /* Bordas arredondadas */
}

.slide-nippify::-webkit-scrollbar-thumb:hover,
.nippify-dashboard-content::-webkit-scrollbar-thumb:hover {
background-color: #888; /* Cor ao passar o mouse */
}