/* ════════════════════════════════════════════════════════════
   GLOBAL COMMERCE DASHBOARD — FINAL POLISHED MOBILE OPTIMIZATION
   ════════════════════════════════════════════════════════════ */

/* Global Reset for Mobile Stability */
html, body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

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

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

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

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

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

    /* Dashboard Shell (GDC) Refinement */
    .gdc-body { 
        grid-template-columns: 1fr !important; 
        padding: 16px !important;
        gap: 20px !important;
    }
    .gdc-chart { display: none !important; }

    /* UI Shell & Tables - Handle Overflow Gracefully */
    .ui-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        width: 100% !important;
    }

    /* Ensure tables have enough space to be readable when scrolling */
    .ord-head, .ord-row, .ship-item, .inv-bar, .mkt-item, .comp-row {
        min-width: 540px !important;
    }

    /* Feature Grid */
    .feat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

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

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

    .container {
        padding: 0 20px !important;
        width: 100% !important;
    }

    /* Typography Scaling */
    .s-h2 { font-size: 1.9rem !important; line-height: 1.1 !important; margin-bottom: 12px !important; }
    .s-body { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 24px !important; max-width: 100% !important; }
    .stat-num { font-size: 2rem !important; }
    .gdc-m-val { font-size: 1.3rem !important; }

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

    /* Dashboard Card (GDC) Optimization */
    .gdc-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .gdc-metric { padding: 14px 12px !important; }

    /* Component Spacing */
    .mkt-item, .ship-item, .inv-bar, .comp-row, .feat-card {
        padding: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Feature Grid */
    .feat-grid {
        grid-template-columns: 1fr !important;
        margin-top: 28px !important;
        gap: 16px !important;
    }

    /* Footer */
    .s-footer { padding-top: 50px !important; }
    .s-footer-top {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding-bottom: 40px !important;
    }
    .s-footer-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 16px !important;
    }
    .s-footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 24px 0 !important;
    }

    /* Specific element adjustments */
    div[style*="margin-top:28px"] { 
        margin-top: 20px !important; 
        padding: 14px 16px !important; 
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ── SMALL MOBILE (max-width: 360px) ── */
@media (max-width: 360px) {
    .container {
        padding: 0 16px !important;
    }
    .s-h2 { font-size: 1.7rem !important; }
    .gdc-m-val { font-size: 1.2rem !important; }
    .s-footer-cols { grid-template-columns: 1fr !important; }
}