/* public/assets/css/s27-pwa.css
   KHMER HRMS — Mobile PWA Polish (Season S27)
   Zero CDN (Rule #10). CSS variables only (Rule: Day/Night everywhere) —
   reuses the exact --bg/--surface/--text/--border/--primary variables
   already defined in themes.css, so this file never hardcodes a color
   that would break Day/Night mode.
   Premium UI (Master List §4): soft double-layer shadow, 12-16px
   radius, 8px spacing scale, eased motion — matches every other card/
   toast already in the app rather than introducing a new visual
   language just for PWA UI. */

/* ── Install / Update banners ─────────────────────────────────── */
.pwa-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.16);
    animation: pwaBannerIn .28s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="dark"] .pwa-banner {
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.5);
}
.pwa-banner-leaving {
    animation: pwaBannerOut .18s ease both;
}
@keyframes pwaBannerIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pwaBannerOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
}

/* Safe-area clearance so the banner never sits under the bottom nav
   bar or an iPhone home indicator (Master Reference §6.5's PWA
   safe-area rule, extended to this new fixed element). */
body.is-authenticated .pwa-banner {
    bottom: calc(70px + 16px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
    body.is-authenticated .pwa-banner { bottom: 16px; }
}

.pwa-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .12);
    color: var(--primary, #2563EB);
}
.pwa-banner-brand .pwa-banner-icon,
.pwa-banner-info .pwa-banner-icon {
    background: rgba(37, 99, 235, .12);
    color: var(--primary, #2563EB);
}

.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.pwa-banner-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #6B7280);
}

.pwa-banner-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pwa-banner-btn-primary {
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary, #2563EB), var(--primary-dark, #1E3A5F));
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pwa-banner-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37,99,235,.35); }
.pwa-banner-btn-primary:active { transform: translateY(0); }

.pwa-banner-btn-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted, #6B7280);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.pwa-banner-btn-close:hover {
    background: rgba(107,114,128,.12);
    color: var(--text);
}

@media (max-width: 480px) {
    .pwa-banner { flex-wrap: wrap; }
    .pwa-banner-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }
}

/* ── Offline status indicator ─────────────────────────────────── */
/* A slim, non-blocking strip at the very top of the viewport while
   offline — the sa.toast() call already tells the user once; this
   persistent strip is the "still true right now" reminder, styled to
   sit above the top bar without pushing layout around (position:
   fixed, not static). */
body.is-offline::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg, #DC2626 0, #DC2626 10px, transparent 10px, transparent 20px
    );
    z-index: 2100;
    animation: pwaOfflineStripe 1.2s linear infinite;
}
@keyframes pwaOfflineStripe {
    from { background-position-x: 0; }
    to   { background-position-x: 20px; }
}

/* ── Standalone (installed) mode touches ──────────────────────── */
/* When launched from the home screen, there is no browser chrome to
   pull-to-refresh against — allow the OS's own overscroll behavior
   but prevent the page itself from rubber-banding oddly on iOS. */
html.pwa-standalone body {
    overscroll-behavior-y: contain;
}