/* ============================================
           MOBILE
           ============================================ */
        @media (max-width: 1024px) {
            .stats-row { grid-template-columns: repeat(2, 1fr); }
            .charts-row { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            /* ── Top nav bar ── */
            .sidebar {
                width: 100%;
                height: auto;
                flex-direction: row;
                align-items: center;
                top: 0;
                left: 0;
                overflow: visible;
                z-index: 200;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }

            /* Hide logo header on mobile */
            .sidebar-header-wrap { display: none; }

            /* Nav items laid out horizontally */
            .sidebar-nav {
                flex-direction: row;
                flex: 1;
                padding: 0;
                gap: 0;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .sidebar-nav::-webkit-scrollbar { display: none; }

            .sidebar-nav-item {
                flex-direction: column;
                gap: 0.2rem;
                padding: 0.55rem 0.5rem;
                flex: 1;
                min-width: 60px;
                justify-content: center;
                align-items: center;
                text-align: center;
                white-space: normal;
                border-radius: 0;
            }

            /* Show labels again, smaller */
            .sidebar .sidebar-nav-label {
                opacity: 1 !important;
                width: auto !important;
                overflow: visible !important;
                font-size: 0.62rem;
                line-height: 1.2;
                text-align: center;
            }

            /* Footer: hide email/language label, keep logout in the nav row */
            .sidebar-footer {
                border-top: none;
                padding: 0;
                display: flex;
                align-items: center;
            }
            .sidebar-user-email { display: none !important; }
            .language-switch { display: none; }

            /* Dashboard body fills full width below the top bar */
            .dashboard-body {
                margin-left: 0;
                margin-top: 56px;   /* matches top nav height */
                width: 100%;
                max-width: 100vw;
            }

            .main-content { padding: 1rem; }
            .stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
            .stat-card { padding: 1rem; }
            .stat-card .number { font-size: 1.6rem; }
            .leads-toolbar { flex-direction: column; align-items: stretch; }
            .leads-search-wrap { min-width: 100%; }
            .leads-section > div:last-of-type { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            table { min-width: 900px; font-size: 0.85rem; }
            th, td { padding: 0.75rem 0.5rem; }
            .modal-content { margin: 0.5rem; max-width: 100%; }
            .modal-header { padding: 1rem; }
            .modal-body { padding: 1rem; max-height: 65vh; }
            .detail-grid { grid-template-columns: 1fr; }
            button, .btn-primary { min-height: 44px; font-size: 1rem; }
            input, select { min-height: 44px; font-size: 16px; }

            /* Stats center mobile overrides */
            #statistiquesSection {
                padding: 1rem !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

            #statistiquesSection > div:nth-of-type(2) {
                grid-template-columns: 1fr 1fr !important;
                gap: 0.75rem !important;
            }

            #statistiquesSection > div:nth-of-type(3) {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }

            #statistiquesSection > div:nth-of-type(4) > div,
            #statistiquesSection > div:nth-of-type(5) > div {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }

            #statistiquesSection h2 { font-size: 1.45rem !important; }
            #statistiquesSection h3 { font-size: 1.05rem !important; }
            #statistiquesSection canvas { max-width: 100% !important; }
        }

        @media (max-width: 480px) {
            .stats-row { grid-template-columns: 1fr; }

            .sidebar-nav-item { min-width: 50px; padding: 0.5rem 0.35rem; }
            .sidebar .sidebar-nav-label { font-size: 0.58rem; }

            #statistiquesSection > div:nth-of-type(2) {
                grid-template-columns: 1fr !important;
            }
        }