/* project-root/public/system/assets/css/pwa.css */
/* PWA UI: Install-Hinweis, Offline-Status, Update-Info */

:root {
    --vp-pwa-z: 3100;
    --vp-pwa-bg: #0b1320;
    --vp-pwa-fg: #ffffff;
    --vp-pwa-muted: rgba(255,255,255,.72);
    --vp-pwa-border: rgba(255,255,255,.16);
}

.vp-pwa-offline-bar {
    position: fixed;
    left: 50%;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--vp-pwa-z);
    max-width: min(92vw, 720px);
    border-radius: 999px;
    background: var(--vp-pwa-bg);
    color: var(--vp-pwa-fg);
    border: 1px solid var(--vp-pwa-border);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.22);
    padding: .65rem .9rem;
    display: none;
    align-items: center;
    gap: .65rem;
    font-size: .9rem;
    line-height: 1.25;
}

html.vp-pwa-offline .vp-pwa-offline-bar {
    display: inline-flex;
}

.vp-pwa-offline-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: #ffc107;
    flex: 0 0 auto;
    box-shadow: 0 0 0 .25rem rgba(255,193,7,.15);
}

.vp-pwa-install-btn {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: var(--vp-pwa-z);
    border: 0;
    border-radius: 999px;
    background: var(--vp-pwa-bg);
    color: var(--vp-pwa-fg);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.24);
    min-height: 2.75rem;
    padding: .65rem 1rem;
    display: none;
    align-items: center;
    gap: .5rem;
    font-weight: 650;
    cursor: pointer;
}

.vp-pwa-install-btn:hover {
    filter: brightness(1.08);
}

.vp-pwa-install-btn:active {
    transform: translateY(1px);
}

html.vp-pwa-can-install:not(.vp-pwa-installed) .vp-pwa-install-btn {
    display: inline-flex;
}

html.vp-pwa-update-available .vp-pwa-install-btn {
    display: none !important;
}

.vp-pwa-update-card {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: calc(var(--vp-pwa-z) + 1);
    width: min(92vw, 360px);
    background: #ffffff;
    color: #0b1320;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,.22);
    padding: 1rem;
    display: none;
}

.vp-pwa-update-card.is-visible {
    display: block;
}

.vp-pwa-update-title {
    font-weight: 700;
    margin-bottom: .25rem;
}

.vp-pwa-update-text {
    color: rgba(11,19,32,.66);
    font-size: .92rem;
    line-height: 1.45;
    margin-bottom: .85rem;
}

.vp-pwa-update-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.vp-pwa-btn {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .75rem;
    padding: .55rem .8rem;
    background: #ffffff;
    color: #0b1320;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.vp-pwa-btn:hover {
    filter: brightness(.98);
}

.vp-pwa-btn:disabled {
    opacity: .72;
    cursor: wait;
}

.vp-pwa-btn-primary {
    background: #0b1320;
    color: #ffffff;
    border-color: #0b1320;
}

.vp-pwa-btn-primary:hover {
    filter: brightness(1.08);
}

@media (max-width: 575.98px) {
    .vp-pwa-install-btn {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .vp-pwa-install-btn:active {
        transform: translateX(-50%) translateY(1px);
    }

    .vp-pwa-update-card {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}