/* Mobile Responsiveness Improvements */

/* Tablet and Mobile Breakpoints */
@media screen and (max-width: 1024px) {
    :root {
        --sidebar-width: 0px; /* Collapse sidebar space */
    }

    .dashboard-container {
        flex-direction: column;
    }

    /* Sidebar - Transform into a top navigation or stack it */
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid rgba(255, 140, 0, 0.4);
    }
    
    .sidebar .brand {
        margin-bottom: 10px;
        width: 100%;
        justify-content: center;
    }

    .side-nav {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 5px;
    }

    .nav-item {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .filter-panel {
        display: none; /* Hide filters on mobile to save space, or make them foldable eventually. For now, hiding complex filters on very small screens might be safer, or we stack them. Let's stack them but collapsed if possible. But CSS only... let's keep them but full width */
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
    }
    
    /* If we want to show filters, we can just let them stack */
    .filter-panel {
        display: block; 
    }
    
    .filter-panel select {
         margin-bottom: 10px;
    }

    /* Main Content */
    .main-content {
        margin-left: 0;
        padding: 15px;
        width: 100%;
    }

    /* Top Bar */
    .top-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .user-profile {
        justify-content: center;
    }

    /* KPI Grid */
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Larger min-width for mobile readability */
        gap: 15px;
    }

    /* Charts */
    .charts-grid-sales, 
    .charts-grid-cust, 
    .charts-grid-perf,
    .charts-grid-fb,
    .upper-charts-grid,
    .tables-grid,
    .right-charts,
    .bottom-charts-grid {
        display: flex; /* Use flex column for simple stacking */
        flex-direction: column;
        grid-template-columns: 1fr; /* Override grid */
    }

    .chart-card {
        grid-column: span 1 !important; /* Force single column */
        width: 100%;
    }

    /* Home Page */
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-nav-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .glass-nav {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }
    
    .glass-nav .nav-links {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    /* Further adjustments for phones */
    
    /* Make sidebar items smaller or icons only if needed, but wrapping is fine */
    .nav-item span {
        /* display: none; */ /* Could hide text, but let's keep it for now */
    }
    
    .kpi-grid {
        grid-template-columns: 1fr; /* Full width cards */
    }
    
    .hero-content {
        padding: 0 20px;
    }
    
    /* Typography adjustments */
    h2 {
        font-size: 1.5rem;
    }
}