@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9;
}

#sidebar {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.sidebar-link.active {
    background-color: #374151; /* gray-700 */
    font-weight: 600;
}
.chart-container {
    position: relative;
    height: 320px;
}

/* Botão de toggle do gráfico */
.chart-toggle-btn {
    color: #64748b; /* slate-500 */
    transition: all 0.2s ease-in-out;
}
.chart-toggle-btn.active {
    background-color: white;
    font-weight: 600;
    color: #334155; /* slate-700 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Desktop and larger screens */
@media (min-width: 640px) {
    #page-container {
        transition: margin-left 0.3s ease-in-out;
    }

    #sidebar:not(.collapsed) {
        width: 16rem; /* 256px, equivalent to w-64 */
    }
    
    #sidebar.collapsed {
        width: 5rem; /* 80px, equivalent to w-20 */
    }

    #sidebar.collapsed .sidebar-text {
        display: none;
    }

    #sidebar.collapsed .sidebar-link {
        justify-content: center;
    }

    #sidebar.collapsed #sidebar-toggle-arrow {
        transform: rotate(180deg);
    }
}

/* Estilos do Submenu */
.submenu-container.open > .submenu-toggle .submenu-arrow {
    transform: rotate(180deg);
}

#sidebar.collapsed .submenu {
    display: none !important;
}