/* 
Mobile Base Utilities
General mobile element visibility, accessibility, performance, and base utilities
*/

/* 
Mobile UX Improvements for House Hunter 2
Responsive design fixes for mobile devices
*/

/* DESKTOP: Hide all mobile elements completely */
@media (min-width: 769px) {
    .mobile-menu-overlay,
    .mobile-menu,
    .hamburger-menu-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* MOBILE: Show mobile elements only on small screens */
@media (max-width: 768px) {
    .mobile-menu-overlay,
    .hamburger-menu-trigger {
        display: block !important;
    }
}


/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Improve focus indicators on mobile */
    button:focus,
    input:focus,
    select:focus,
    a:focus {
        outline: 3px solid #007bff;
        outline-offset: 2px;
    }
    
    /* Better spacing for touch */
    .nav-link:not(:last-child) {
        margin-right: 8px;
    }
    
    /* Prevent text selection on buttons */
    button,
    .button,
    .btn {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* GPU acceleration for smooth scrolling */
    .dataTables_wrapper,
    .chart-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: scroll-position;
    }
    
    /* Reduce animations on mobile for performance */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Optimize for touch scrolling */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ===== HORIZONTAL SCROLL PREVENTION ===== */
@media (max-width: 768px) {
    /* Prevent any horizontal overflow */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Specific fixes for common overflow elements */
    .container,
    .navbar-container,
    .form-container,
    .progress-dashboard {
        max-width: 100%;
        overflow-x: visible;
    }
    
    /* Table containers must handle overflow properly */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
    }
}