/* Mobile fixes — only apply on screens < 768px (iPhone, small tablets) */
@media (max-width: 767px) {
    
    /* Hide the left sidebar entirely on mobile */
    .left.side-menu {
        display: none !important;
    }
    
    /* Reclaim the full width for content (sidebar normally takes 240px) */
    .content-page {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Make sure topbar spans full width too */
    .topbar {
        left: 0 !important;
        width: 100% !important;
    }
    
    /* Tables: allow horizontal scroll if they overflow */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Reduce padding around cards/content on mobile */
    .content {
        padding: 10px !important;
    }
    
    /* Prevent forms from overflowing */
    .form-group, .form-control {
        max-width: 100%;
    }
    
    /* Fix any element that has fixed width pushing layout */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Force hide Lat/Lng columns and date column on small screens */
@media (max-width: 767px) {
    #datatable th:nth-child(3),
    #datatable td:nth-child(3),
    #datatable th:nth-child(4),
    #datatable td:nth-child(4) {
        display: none !important;
    }
    
    #datatable th:nth-child(2),
    #datatable td:nth-child(2) {
        max-width: 200px;
        white-space: normal;
        word-wrap: break-word;
        font-size: 12px;
    }
    
    #datatable th:nth-child(5),
    #datatable td:nth-child(5) {
        font-size: 11px;
        white-space: nowrap;
    }
    
    #datatable th, #datatable td {
        padding: 8px 4px !important;
    }
    
    #datatable.nowrap {
        white-space: normal !important;
    }
}