/**
 * PWA-Specific Styles
 * These styles only apply when the app is running in PWA mode (standalone)
 * They make the app look more native and app-like on mobile devices
 * Regular browser users won't see these changes
 */

/* ============================================
   PWA Mode Base Styles
   ============================================ */

/* Only apply these styles when running as PWA */
body.pwa-mode {
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior-y: contain;
    
    /* Ensure full viewport usage */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* ============================================
   Navigation Enhancements for PWA
   ============================================ */

/* Make navbar more compact and app-like in PWA mode */
body.pwa-mode .navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Enhance navbar brand in PWA */
body.pwa-mode .navbar-brand-img {
    max-height: 32px;
    transition: all 0.3s ease;
}

/* ============================================
   Touch-Optimized Interactions
   ============================================ */

/* Larger touch targets for buttons in PWA */
body.pwa-mode .btn {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
}

/* Enhanced touch targets for navigation items */
body.pwa-mode .nav-link {
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Better spacing for dropdown items */
body.pwa-mode .dropdown-item {
    padding: 0.75rem 1.5rem;
    min-height: 44px;
}

/* ============================================
   Content Area Optimization
   ============================================ */

/* Add safe area padding for notched devices */
body.pwa-mode {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Adjust container padding for better mobile experience */
body.pwa-mode .container,
body.pwa-mode .container-fluid {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
}

/* ============================================
   Footer Optimization
   ============================================ */

/* Make footer more compact in PWA mode */
body.pwa-mode .footer {
    padding: 1rem 0;
    font-size: 0.875rem;
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Add bottom padding to footer for safe area */
body.pwa-mode .footer .container {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* ============================================
   Scroll Behavior
   ============================================ */

/* Smooth scrolling in PWA mode */
body.pwa-mode {
    scroll-behavior: smooth;
}

/* Hide scroll-to-top button in PWA mode as it's more app-like without it */
body.pwa-mode .btn-scroll-top {
    display: none !important;
}

/* ============================================
   Enhanced Visual Hierarchy
   ============================================ */

/* Cards look more elevated in PWA mode */
body.pwa-mode .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    border: none;
}

/* Enhance hover states for better feedback */
body.pwa-mode .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* ============================================
   Mobile-Specific Portal Styles
   ============================================ */



body.pwa-mode.landlord-portal .navbar .navbar-brand-img {
    filter: brightness(0) invert(1);
}



body.pwa-mode.tenant-portal .navbar .navbar-brand-img {
    filter: brightness(0) invert(1);
}

/* ============================================
   Bottom Navigation Bar for PWA
   ============================================ */

/* Add bottom navigation for authenticated users in PWA mode */
body.pwa-mode.landlord-portal .pwa-bottom-nav,
body.pwa-mode.tenant-portal .pwa-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    z-index: 1020;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.pwa-mode.landlord-portal .pwa-bottom-nav a,
body.pwa-mode.tenant-portal .pwa-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    min-width: 60px;
    text-decoration: none;
    color: #6c757d;
    transition: all 0.2s ease;
}

body.pwa-mode.landlord-portal .pwa-bottom-nav a.active,
body.pwa-mode.tenant-portal .pwa-bottom-nav a.active {
    color: #667eea;
}

body.pwa-mode.tenant-portal .pwa-bottom-nav a.active {
    color: #f5576c;
}

body.pwa-mode.landlord-portal .pwa-bottom-nav a i,
body.pwa-mode.tenant-portal .pwa-bottom-nav a i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

body.pwa-mode.landlord-portal .pwa-bottom-nav a span,
body.pwa-mode.tenant-portal .pwa-bottom-nav a span {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Add padding to main content when bottom nav is present */
body.pwa-mode.landlord-portal .main-content,
body.pwa-mode.tenant-portal .main-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ============================================
   Hide Desktop Elements in PWA
   ============================================ */

/* Hide certain desktop-only elements in PWA mode */
body.pwa-mode .d-md-block.btn-outline-primary,
body.pwa-mode .d-md-block.btn-primary {
    display: none !important;
}



/* ============================================
   Form Enhancements for PWA
   ============================================ */

/* Better form controls in PWA mode */
body.pwa-mode .form-control,
body.pwa-mode .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 8px;
}

body.pwa-mode .form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ============================================
   Loading States
   ============================================ */

/* Add subtle loading animation for PWA */
body.pwa-mode .loading-spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 3px solid #667eea;
    width: 40px;
    height: 40px;
    animation: pwa-spin 1s linear infinite;
}

@keyframes pwa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Only apply bottom nav on mobile screens */
@media (min-width: 768px) {
    body.pwa-mode.landlord-portal .pwa-bottom-nav,
    body.pwa-mode.tenant-portal .pwa-bottom-nav {
        display: none;
    }
    
    body.pwa-mode.landlord-portal .main-content,
    body.pwa-mode.tenant-portal .main-content {
        padding-bottom: 1rem;
    }
}

/* ============================================
   Dark Mode Support (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
    body.pwa-mode {
        /* Dark mode styles can be added here in the future */
    }
}

/* ============================================
   Performance Optimizations
   ============================================ */

/* Use GPU acceleration for animations */
body.pwa-mode .card,
body.pwa-mode .btn,
body.pwa-mode .navbar {
    will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    body.pwa-mode * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}