/* Global Mobile Responsiveness Pass */
@media (max-width: 768px) {
    /* Main Area padding reduction */
    #main-area, .container {
        padding: 20px !important;
    }

    /* Top text scaling */
    h1 {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
    }
    .header-top {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
        margin-top: 20px !important;
        margin-bottom: 25px !important;
    }
    
    /* Convert 3-col and 4-col grids to 1-col */
    .grid-3, .stats-grid, .form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .grid-3 > div {
        grid-column: span 1 !important;
    }

    /* Global Nav becomes a bottom bar */
    body {
        flex-direction: column;
    }
    .global-nav {
        width: 100% !important;
        height: 70px !important;
        flex-direction: row !important;
        padding: 0 10px !important;
        justify-content: space-around;
        align-items: center !important;
        border-right: none !important;
        border-top: 1px solid rgba(255,255,255,0.05);
        order: 999; /* Push to bottom */
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9999;
    }
    .global-nav:hover {
        width: 100% !important;
        box-shadow: none !important;
    }
    .global-nav a {
        width: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }
    .global-nav a svg {
        margin: 0 !important;
    }
    .global-nav .nav-label, .global-nav .logo-icon, .global-nav > div {
        display: none !important; /* Hide text and spacers on mobile */
    }

    /* Index/Login Page specific */
    .login-box {
        width: 90% !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        margin: 20px auto !important;
    }
    .login-left, .login-right {
        padding: 30px !important;
    }

    /* Tables */
    .table-wrap {
        overflow-x: auto;
    }
    table {
        min-width: 600px; /* Force scroll */
    }

    /* Admin top nav specific */
    .top-nav {
        padding: 15px 20px !important;
        flex-direction: column;
        gap: 15px;
    }
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .nav-links a {
        margin: 0 !important;
        font-size: 0.9rem;
    }

    /* Split Screen & Viewer Specific */
    #split-container {
        flex-direction: column !important;
    }
    #viewer1, #viewer2 {
        width: 100% !important;
        height: 50vh !important;
        border-right: none !important;
        border-bottom: 2px solid var(--light-blue);
    }
    .compare-bar {
        bottom: 80px !important; /* Above bottom nav */
        width: 90% !important;
        left: 5% !important;
        transform: none !important;
        border-radius: 12px !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Property Sidebar (Viewer) */
    #property-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        height: calc(100vh - 70px);
        z-index: 5000;
        transition: 0.3s;
    }
    #property-sidebar.active-mobile {
        left: 0;
        box-shadow: 10px 0 30px rgba(0,0,0,0.8);
    }
    
    /* Ensure main area scroll doesn't get blocked by bottom nav */
    #main-area, .container {
        padding-bottom: 100px !important;
    }
}