/* PWA and Mobile App Styles */

/* Prevent zooming and ensure app-like behavior */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* PWA Close Button - now integrated into header */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pwa-close-btn {
    min-width: 32px !important;
    padding: 6px 8px !important;
    background: #dc3545 !important;
    color: white !important;
    border: 1px solid #dc3545 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin-right: 8px !important;
}

.pwa-close-btn:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Only show close button in PWA mode */
.pwa-close-btn {
    display: none !important;
}

body.pwa-mode .pwa-close-btn {
    display: inline-block !important;
}

/* Hide logout button in PWA mode since close button is available */
body.pwa-mode #logout-btn {
    display: none !important;
}

/* PWA mode styles */
body.pwa-mode {
    /* Remove height constraints that prevent scrolling */
    /* height: 100vh; */
    /* height: 100dvh; */
    /* Allow scrolling for long pages like account */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.pwa-mode #app-container {
    min-height: 100vh;
    min-height: 100dvh;
    /* Allow content to grow beyond viewport and scroll */
}

/* CSS-based orientation enforcement */
@media screen and (orientation: landscape) and (max-width: 768px) {
    body.pwa-mode {
        /* Hide landscape warning or handle gracefully */
        position: relative;
    }
    
    body.pwa-mode::before {
        content: "Please rotate your device to portrait mode";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 20px;
        border-radius: 10px;
        z-index: 9999;
        text-align: center;
        font-size: 18px;
    }
    
    body.pwa-mode #app-container {
        opacity: 0.3;
        pointer-events: none;
    }
}