/*
 * PWA Visibility System
 *
 * This CSS file handles PWA-specific styling that activates when
 * the app is running in standalone mode (installed as PWA).
 *
 * Loaded separately from Tailwind to ensure proper cascade behavior.
 */

/* Default state: PWA elements hidden in browser mode */
.pwa-show {
    display: none !important;
}

.pwa-hide {
    display: block;
}

.pwa-header {
    padding-top: 0;
}

.pwa-bottom-nav {
    padding-bottom: 0;
}

.pwa-main-content {
    padding-bottom: 0;
}

/* PWA standalone mode - activated when app is installed */
@media all and (display-mode: standalone) {
    /* Show PWA-specific elements */
    .pwa-show {
        display: flex !important;
    }

    /* PWA page header needs display block not flex */
    .pwa-page-header.pwa-show {
        display: block !important;
    }

    /* Hide browser-specific elements */
    .pwa-hide {
        display: none !important;
    }

    /* PWA header extends under status bar */
    .pwa-header {
        padding-top: env(safe-area-inset-top);
    }

    /* PWA bottom nav respects home indicator */
    .pwa-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Main content - reset negative margin, add bottom padding for nav */
    .pwa-main-content {
        margin-top: 0 !important;
        padding-top: 0;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    /* Hide footer in PWA mode */
    footer {
        display: none !important;
    }

    /* Adjust breadcrumbs for PWA - hide them as we have bottom nav */
    nav[aria-label="Breadcrumb"] {
        display: none !important;
    }

    /* Remove the drop-shadow container in PWA mode */
    .pwa-content-card {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin: 0 !important;
    }
}

/* PWA View Transitions - simple cross-fade */
@media all and (display-mode: standalone) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 200ms;
        animation-timing-function: ease-out;
    }
}

/* Safe area utilities for PWA */
.pt-safe {
    padding-top: env(safe-area-inset-top);
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

.pl-safe {
    padding-left: env(safe-area-inset-left);
}

.pr-safe {
    padding-right: env(safe-area-inset-right);
}