/*  */
.manusidebar{
    position: fixed;
    left: 0;
    top: 0;
    width: 60px;
    height: 100%;
    background-color: rgb(28, 37, 54);
    color: #f3f3f7;

    text-align: center;
}

.manusidebar ul{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.manusidebar ul li{
    position: relative;
    float: left;
    width: 100%;
    margin: 20px 0px;

    display: flex;
    justify-content: center;
}

.manusidebar ul li a{
    color: #e6e8eb;
    cursor: pointer;
}

.manusidebar ul li a:hover{
    color: #0665f5;
    cursor: pointer;
}

.manusidebar ul li.footer{
    position: absolute;
    bottom: 0px;
}

/* COR ESCURA PADRÃO FOTO 02 - BARRA LATERAL DO MAPA */
.manusidebar {
    background-color: #0e111b !important;
    background: linear-gradient(90deg, #12141f 0%, #0e111b 45%, #0b0e18 100%) !important;
}

/* PADRÃO VISUAL DO PROJETO - MENU LATERAL DO MAPA */
.manusidebar {
    background: #0f1726 !important;
    background-color: #0f1726 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.manusidebar ul,
.manusidebar li {
    background: #0f1726 !important;
}

.manusidebar a,
.manusidebar svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.manusidebar a:hover {
    background: rgba(59, 130, 246, 0.20) !important;
    border-radius: 10px !important;
}

/* MENU LATERAL DO MAPA - ÍCONES COLORIDOS MODERNOS */

.manusidebar {
    background: linear-gradient(180deg, #081223 0%, #0B1730 45%, #091426 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 6px 0 22px rgba(2, 12, 27, 0.22);
}

.manusidebar ul li {
    margin: 18px 0 !important;
}

.manusidebar ul li a {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}

.manusidebar ul li a::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: 14px;
    transition: opacity 0.22s ease;
}

.manusidebar ul li a:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.manusidebar ul li a:hover::before {
    opacity: 1;
}

.manusidebar ul li a svg {
    font-size: 24px !important;
    position: relative;
    z-index: 2;
    transition: all 0.22s ease;
}

/* Mapa / Lista */
.manusidebar ul li:nth-child(1) a {
    background: rgba(59, 130, 246, 0.12) !important;
}

.manusidebar ul li:nth-child(1) a::before {
    background: rgba(59, 130, 246, 0.22);
}

.manusidebar ul li:nth-child(1) a svg {
    color: #60A5FA !important;
    fill: #60A5FA !important;
}

/* Perfil */
.manusidebar ul li:nth-child(2) a {
    background: rgba(168, 85, 247, 0.12) !important;
}

.manusidebar ul li:nth-child(2) a::before {
    background: rgba(168, 85, 247, 0.22);
}

.manusidebar ul li:nth-child(2) a svg {
    color: #C084FC !important;
    fill: #C084FC !important;
}

/* Veículos */
.manusidebar ul li:nth-child(3) a {
    background: rgba(34, 197, 94, 0.12) !important;
}

.manusidebar ul li:nth-child(3) a::before {
    background: rgba(34, 197, 94, 0.22);
}

.manusidebar ul li:nth-child(3) a svg {
    color: #4ADE80 !important;
    fill: #4ADE80 !important;
}

/* Relatórios */
.manusidebar ul li:nth-child(4) a {
    background: rgba(245, 158, 11, 0.12) !important;
}

.manusidebar ul li:nth-child(4) a::before {
    background: rgba(245, 158, 11, 0.22);
}

.manusidebar ul li:nth-child(4) a svg {
    color: #FBBF24 !important;
    fill: #FBBF24 !important;
}

/* Configurações */
.manusidebar ul li:nth-child(5) a {
    background: rgba(20, 184, 166, 0.12) !important;
}

.manusidebar ul li:nth-child(5) a::before {
    background: rgba(20, 184, 166, 0.22);
}

.manusidebar ul li:nth-child(5) a svg {
    color: #2DD4BF !important;
    fill: #2DD4BF !important;
}

/* Sair */
.manusidebar ul li.footer a {
    background: rgba(239, 68, 68, 0.12) !important;
}

.manusidebar ul li.footer a::before {
    background: rgba(239, 68, 68, 0.22);
}

.manusidebar ul li.footer a svg {
    color: #F87171 !important;
    fill: #F87171 !important;
}

/* Efeito geral no hover */
.manusidebar ul li a:hover svg {
    filter: drop-shadow(0 0 8px currentColor);
}

/* DASHBOARD - ÍCONE PERSONALIZADO NO MENU LATERAL DO MAPA */
.manusidebar ul li.menu-dashboard-map a,
.manusidebar ul li.menu-dashboard-map a:visited {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(59, 130, 246, 0.18) 100%) !important;
    border: 1px solid rgba(129, 140, 248, 0.35) !important;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.20) !important;
}

.manusidebar ul li.menu-dashboard-map a svg {
    color: #A5B4FC !important;
    fill: #A5B4FC !important;
    filter: drop-shadow(0 0 5px rgba(165, 180, 252, 0.65)) !important;
}

.manusidebar ul li.menu-dashboard-map a:hover {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.38) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.35) !important;
}

.manusidebar ul li.menu-dashboard-map a:hover svg {
    color: #C7D2FE !important;
    fill: #C7D2FE !important;
    filter: drop-shadow(0 0 10px rgba(199, 210, 254, 0.95)) !important;
}

/* FORÇAR CORES DOS ÍCONES DO MENU DE CONFIGURAÇÕES */
.MuiDrawer-paper .MuiListItemIcon-root.gprrs-colored-menu-icon {
    background: var(--gprrs-menu-icon-bg) !important;
    color: var(--gprrs-menu-icon-color) !important;
    fill: var(--gprrs-menu-icon-color) !important;
    box-shadow: 0 0 14px var(--gprrs-menu-icon-shadow) !important;
    border: 1px solid var(--gprrs-menu-icon-shadow) !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root.gprrs-colored-menu-icon {
    box-shadow: 0 0 22px var(--gprrs-menu-icon-shadow), 0 0 38px var(--gprrs-menu-icon-shadow) !important;
}

.MuiDrawer-paper .MuiListItemIcon-root.gprrs-colored-menu-icon svg,
.MuiDrawer-paper .MuiListItemIcon-root.gprrs-colored-menu-icon .MuiSvgIcon-root,
.MuiDrawer-paper .MuiSvgIcon-root.gprrs-colored-menu-svg {
    color: var(--gprrs-menu-icon-color) !important;
    fill: var(--gprrs-menu-icon-color) !important;
}

.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root.gprrs-colored-menu-icon {
    transform: scale(1.06) !important;
}