/* Mobile Responsive CSS for Leie Platform */

/* Base mobile styles */
@media (max-width: 768px) {
    /* General layout adjustments */
    .main-content {
        margin-left: 0 !important;
        padding: 15px !important;
    }
    
    .container {
        padding: 15px !important;
    }
    
    /* Header adjustments */
    .header {
        padding: 20px 0 !important;
    }
    
    .page-title {
        font-size: 24px !important;
    }
    
    .page-subtitle {
        font-size: 16px !important;
    }
    
    /* Navigation adjustments */
    .nav-menu {
        display: none !important;
    }
    
    .auth-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .auth-buttons .btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    /* Form adjustments */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .form-group {
        margin-bottom: 20px !important;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    .submit-btn {
        padding: 15px 30px !important;
        font-size: 16px !important;
    }
    
    /* Grid adjustments */
    .properties-grid,
    .users-grid,
    .favorites-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Card adjustments */
    .property-card,
    .user-card,
    .favorite-card,
    .dashboard-card {
        padding: 15px !important;
    }
    
    .property-title,
    .user-name,
    .favorite-title {
        font-size: 16px !important;
    }
    
    .property-price,
    .favorite-price {
        font-size: 18px !important;
    }
    
    .property-location,
    .user-age,
    .favorite-location {
        font-size: 14px !important;
    }
    
    .property-details,
    .user-nationality,
    .favorite-details {
        font-size: 12px !important;
    }
    
    /* Button adjustments */
    .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .action-btn {
        padding: 12px 24px !important;
        font-size: 16px !important;
    }
    
    /* Filter adjustments */
    .filters-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
    
    .filter-input,
    .filter-select {
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Profile adjustments */
    .profile-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .profile-avatar {
        width: 120px !important;
        height: 120px !important;
        font-size: 48px !important;
    }
    
    .profile-info {
        text-align: center !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .info-item {
        padding: 15px !important;
    }
    
    /* Modal adjustments */
    .modal-content {
        max-width: 95% !important;
        max-height: 95% !important;
    }
    
    .modal-image {
        max-height: 80vh !important;
    }
    
    .modal-close {
        top: 15px !important;
        right: 20px !important;
        font-size: 35px !important;
    }
    
    /* Tab adjustments */
    .favorites-tabs {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .tab-btn {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Settings adjustments */
    .settings-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .settings-nav {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 10px 0 !important;
    }
    
    .nav-item {
        flex-shrink: 0 !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    .settings-content {
        width: 100% !important;
        padding: 20px !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .main-content {
        padding: 10px !important;
    }
    
    .container {
        padding: 10px !important;
    }
    
    .page-title {
        font-size: 20px !important;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .submit-btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .property-card,
    .user-card,
    .favorite-card,
    .dashboard-card {
        padding: 12px !important;
    }
    
    .property-title,
    .user-name,
    .favorite-title {
        font-size: 14px !important;
    }
    
    .property-price,
    .favorite-price {
        font-size: 16px !important;
    }
    
    .property-location,
    .user-age,
    .favorite-location {
        font-size: 12px !important;
    }
    
    .property-details,
    .user-nationality,
    .favorite-details {
        font-size: 11px !important;
    }
    
    .action-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    .filters-container {
        padding: 15px !important;
    }
    
    .filter-input,
    .filter-select {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .profile-avatar {
        width: 100px !important;
        height: 100px !important;
        font-size: 40px !important;
    }
    
    .info-item {
        padding: 12px !important;
    }
    
    .info-label {
        font-size: 12px !important;
    }
    
    .info-value {
        font-size: 14px !important;
    }
    
    .tab-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    .nav-item {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .settings-content {
        padding: 15px !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .main-content {
        padding: 10px !important;
    }
    
    .header {
        padding: 15px 0 !important;
    }
    
    .page-title {
        font-size: 20px !important;
    }
    
    .page-subtitle {
        font-size: 14px !important;
    }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
    /* Increase touch targets */
    .btn,
    .action-btn,
    .submit-btn,
    .filter-input,
    .form-input,
    .form-select {
        min-height: 44px !important;
    }
    
    /* Improve spacing for touch */
    .property-card,
    .user-card,
    .favorite-card {
        margin-bottom: 15px !important;
    }
    
    /* Better button spacing */
    .action-buttons {
        gap: 12px !important;
    }
    
    /* Improved form spacing */
    .form-group {
        margin-bottom: 20px !important;
    }
    
    /* Better modal touch targets */
    .modal-close {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .property-card,
    .user-card,
    .favorite-card {
        border-radius: 8px !important;
    }
    
    .btn,
    .action-btn {
        border-radius: 6px !important;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .nav-menu,
    .action-buttons,
    .filters-container {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    .property-card,
    .user-card,
    .favorite-card {
        break-inside: avoid !important;
        margin-bottom: 20px !important;
    }
}