/**
 * Grievance Hub PWA – UI Styles
 * Covers: install banner, offline notice, update banner, notification badge
 */

/* ── Install Banner ──────────────────────────────────────────────────────── */
#gh-install-banner {
    animation: gh-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gh-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#gh-install-banner:hover {
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4) !important;
}

/* ── Offline Toast ───────────────────────────────────────────────────────── */
#gh-offline-notice {
    animation: gh-slide-down 0.3s ease;
}

@keyframes gh-slide-down {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Update Banner ───────────────────────────────────────────────────────── */
#gh-update-banner {
    animation: gh-fade-in 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

@keyframes gh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Messages badge on dashboard card ───────────────────────────────────── */
.g-card[data-unread]::after {
    content: attr(data-unread);
    position: absolute;
    top: 8px; right: 8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px; height: 20px;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}

.g-card { position: relative; }

/* ── PWA standalone mode overrides ──────────────────────────────────────── */
@media all and (display-mode: standalone) {
    /* Hide browser-like elements when running as installed PWA */
    .site-header,
    .site-footer,
    .navigation,
    .widget-area,
    #colophon,
    #masthead > .header-top,
    .wp-block-navigation {
        display: none !important;
    }

    /* Add top safe area padding for notch/Dynamic Island */
    body {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Give main content room to breathe */
    .gh-container,
    .g-dash {
        margin-top: 0 !important;
        border-radius: 0 !important;
    }

    /* Custom PWA title bar area */
    .gh-header,
    .g-welcome {
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* ── Splash screen shimmer (while SW caches) ─────────────────────────────── */
.gh-pwa-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    flex-direction: column;
    gap: 20px;
    color: #64748b;
    font-family: 'Segoe UI', sans-serif;
}

.gh-pwa-spinner {
    width: 48px; height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #2c3e50;
    border-radius: 50%;
    animation: gh-spin 0.8s linear infinite;
}

@keyframes gh-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive PWA adjustments ──────────────────────────────────────────── */
@media (max-width: 480px) {
    #gh-install-banner span {
        font-size: 13px;
    }
    #gh-install-banner {
        padding: 10px 18px !important;
        bottom: 80px !important; /* avoid bottom nav bars on iOS */
    }
}

/* ── iOS safe-area padding for iframes ──────────────────────────────────── */
.gh-iframe-mode {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}