/* Mobile-specific styles */
@media (max-width: 400px) {
    .mobile-container {
        height: 100vh;
        border-radius: 0;
    }
    
    .status-bar {
        padding: 10px;
    }
    
    .app-header {
        padding: 10px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .hero-section {
        padding: 30px 15px;
        margin: -15px -15px 15px -15px;
    }
    
    .hero-content h2 {
        font-size: 20px;
    }
    
    .hero-content p {
        font-size: 12px;
    }
    
    .features-grid {
        gap: 8px;
    }
    
    .feature-card {
        padding: 10px;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .feature-card h4 {
        font-size: 12px;
    }
    
    .feature-card p {
        font-size: 10px;
    }
    
    .apartment-card {
        min-width: 240px;
    }
    
    .steps {
        gap: 10px;
    }
    
    .step {
        padding: 10px;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .step h4 {
        font-size: 12px;
    }
    
    .step p {
        font-size: 10px;
    }
    
    .bottom-nav {
        padding: 8px;
    }
    
    .nav-item i {
        font-size: 18px;
    }
    
    .nav-item span {
        font-size: 10px;
    }
    
    /* Auth Forms */
    .auth-container {
        padding: 15px;
    }
    
    .auth-logo {
        width: 60px;
        height: 60px;
    }
    
    .auth-header h2 {
        font-size: 18px;
    }
    
    .auth-header p {
        font-size: 12px;
    }
    
    .form-group label {
        font-size: 12px;
    }
    
    .form-control {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .btn-login, .btn-register, .btn-verify {
        padding: 10px;
        font-size: 14px;
    }
    
    .social-login button {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    /* OTP */
    .otp-input {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    /* Sidebar */
    .sidebar {
        width: 280px;
    }
    
    .sidebar-header {
        padding: 15px;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
    }
    
    .user-details h5 {
        font-size: 14px;
    }
    
    .sidebar-nav a {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .sidebar-nav i {
        font-size: 16px;
    }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-container {
        height: 100vh;
    }
    
    .status-bar {
        display: none;
    }
    
    .app-header {
        padding: 5px 10px;
    }
    
    .hero-section {
        padding: 20px;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bottom-nav {
        padding: 5px;
    }
}

/* Tablet styles */
@media (min-width: 401px) and (max-width: 768px) {
    .mobile-container {
        max-width: 450px;
    }
    
    .hero-content h2 {
        font-size: 26px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .apartment-card {
        min-width: 300px;
    }
    
    .step {
        padding: 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    .step h4 {
        font-size: 16px;
    }
    
    .step p {
        font-size: 14px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    }
    
    .mobile-container {
        background: #1a1a1a;
    }
    
    .main-content {
        background: #1a1a1a;
    }
    
    .feature-card,
    .apartment-card,
    .step,
    .auth-container {
        background: #2d2d2d;
        color: #f0f0f0;
    }
    
    .card-content h4,
    .step h4,
    .auth-header h2,
    .form-group label {
        color: #f0f0f0;
    }
    
    .card-content .location,
    .step p,
    .auth-header p,
    .form-options {
        color: #b0b0b0;
    }
    
    .form-control {
        background: #3d3d3d;
        border-color: #4d4d4d;
        color: #f0f0f0;
    }
    
    .form-control:focus {
        background: #3d3d3d;
    }
    
    .auth-divider::before,
    .auth-divider::after {
        background: #4d4d4d;
    }
    
    .auth-divider span {
        background: #2d2d2d;
        color: #b0b0b0;
    }
    
    .sidebar {
        background: #2d2d2d;
    }
    
    .sidebar-nav a {
        color: #f0f0f0;
    }
    
    .sidebar-nav li.active {
        background: rgba(0,123,255,0.2);
    }
    
    .bottom-nav {
        background: #2d2d2d;
    }
    
    .nav-item {
        color: #b0b0b0;
    }
    
    .nav-item.active {
        color: var(--primary-color);
    }
}