/* ════════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD — FINAL COMPREHENSIVE MOBILE OPTIMIZATION
   ════════════════════════════════════════════════════════════ */

/* ── SMALL DESKTOP / TABLET LANDSCAPE (max-width: 1024px) ── */
@media (max-width: 1024px) {
    .ad-hero { padding: 80px 0 0 !important; }
    .ad-section { padding: 80px 0 !important; }
    
    .ad-hero-inner, .ad-inner, .two-dash-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    .ad-hero-inner { padding-bottom: 40px !important; }

    .container {
        padding: 0 32px !important;
        max-width: 100% !important;
    }

    /* Typography */
    .s-h2 { font-size: 3rem !important; }
}

/* ── TABLET PORTRAIT (max-width: 768px) ── */
@media (max-width: 768px) {
    .ad-hero { padding: 64px 0 0 !important; }
    .ad-section { padding: 60px 0 !important; }

    .ad-hero-inner, .ad-inner, .two-dash-grid {
        gap: 32px !important;
    }

    .ad-hero-inner { padding-bottom: 32px !important; }

    /* Nav Fix */
    nav { padding: 0 20px !important; height: 64px !important; }
    .nav-center, .nav-right { display: none !important; }
    #nav-hamburger-btn { display: flex !important; }

    /* Grid Adjustments */
    .ad-tiles {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Handle Table Overflows */
    .ad-prod-bar, .ui-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ad-prod-head, .ad-prod-row, .pt-head, .pt-row, .trends-head, .trends-row, .inv-head, .inv-row, .ppc-head, .ppc-row, .alert-head, .alert-row {
        min-width: 600px !important;
    }

    /* Footer */
    .s-footer-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* ── MOBILE (max-width: 480px) ── */
@media (max-width: 480px) {
    .ad-hero { padding: 48px 0 0 !important; }
    .ad-section { padding: 32px 0 !important; }

    .ad-hero-inner, .ad-inner, .two-dash-grid {
        gap: 24px !important;
    }

    .ad-hero-inner { padding-bottom: 24px !important; }

    .container {
        padding: 0 16px !important;
    }

    /* Typography */
    .s-h2 { font-size: 1.8rem !important; line-height: 1.1 !important; margin-bottom: 12px !important; }
    .s-body { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 20px !important; }
    .ad-tile-sales-val { font-size: 1.3rem !important; }

    /* Hero Buttons */
    .ad-hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }
    .s-btn-green, .s-btn-outline {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Dash Cards */
    .dash-card {
        padding: 20px 16px !important;
        margin-bottom: 12px !important;
    }

    /* UI Shell Fixes */
    .ui-content { padding: 12px !important; }
    .cb-row { padding: 6px 0 !important; font-size: 0.75rem !important; }

    /* Toolbar / Tabs */
    .ad-dash-toolbar {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
        padding: 10px 14px !important;
    }
    .ad-tabs {
        width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }
    .ad-tab { padding: 4px 10px !important; font-size: 0.7rem !important; }

    /* Specific element adjustments */
    div[style*="margin-top:28px"] { margin-top: 16px !important; padding: 10px 12px !important; }
    
    /* Avoid horizontal scroll on body */
    body, html { overflow-x: hidden !important; width: 100% !important; position: relative !important; }
}

/* ── SMALL MOBILE (max-width: 360px) ── */
@media (max-width: 360px) {
    .container {
        padding: 0 12px !important;
    }
    .s-h2 { font-size: 1.6rem !important; }
}