/* Mobile-first responsive design */

/* General Mobile Styles */
@media screen and (max-width: 768px) {
    /* Navigation */
    .navbar {
        padding: 0.5rem;
    }
    
    .navbar .container {
        padding: 0 10px;
    }
    
    .navbar-brand {
        font-size: 16px;
        margin-right: 8px;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
        font-size: 14px;
    }
    
    /* Map View */
    .map-container {
        height: calc(100vh - 120px);
        width: 100%;
        overflow: hidden;
    }
    
    .map-wrapper {
        -webkit-overflow-scrolling: touch;
    }
    
    .map-controls {
        position: fixed;
        bottom: 20px;
        right: 10px;
        z-index: 1000;
    }
    
    .map-controls button {
        width: 40px;
        height: 40px;
        margin: 5px;
        font-size: 18px;
        opacity: 0.8;
    }
    
    /* Sidebar */
    .sidebar {
        position: fixed;
        top: 56px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 56px);
        z-index: 1030;
        transition: left 0.3s ease;
        background: white;
        overflow-y: auto;
    }
    
    .sidebar.show {
        left: 0;
    }
    
    /* Building List */
    .building-item {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .building-item h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    /* Search */
    .search-container {
        padding: 10px;
    }
    
    .search-container input {
        font-size: 14px;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-body {
        padding: 15px;
        font-size: 14px;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 14px;
    }
    
    .table td, .table th {
        padding: 0.5rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 14px;
        padding: 0.375rem 0.75rem;
    }
    
    /* Admin Dashboard */
    .admin-content {
        padding: 10px;
    }
    
    /* Profile */
    .profile-section {
        text-align: center;
    }
    
    .profile-image {
        width: 120px;
        height: 120px;
        margin: 0 auto 15px;
    }
    
    /* Touch-specific */
    @media (hover: none) {
        .btn:hover {
            transform: none;
        }
        
        .map-controls button {
            padding: 12px;
        }
        
        .building-item {
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        }
    }
}

/* Tablet Styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 15px;
    }
    
    .sidebar {
        width: 300px;
    }
    
    .map-container {
        height: calc(100vh - 150px);
    }
}

/* Utility Classes for Mobile */
.d-mobile-none {
    display: none !important;
}

.d-mobile-block {
    display: block !important;
}

.mobile-menu-toggle {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
}