/**
 * PWA Styles — M-Board Design System
 * Dark-first · Amber accent · No external deps · CSP-safe
 * ============================================================ */

:root {
    --pw-bg:    #080d18;
    --pw-surf:  #0d1526;
    --pw-surf2: #111d30;
    --pw-bd:    #1a2a44;
    --pw-tx:    #c8d6ec;
    --pw-hi:    #f0f6ff;
    --pw-sub:   #6b82a6;
    --pw-acc:   #f59e0b;
    --pw-acc2:  #e8650a;
    --pw-blue:  #3b82f6;
    --pw-green: #22c55e;
    --pw-red:   #ef4444;
    --pw-r:     12px;
    --pw-rsm:   8px;
    --pw-ease:  cubic-bezier(.4,0,.2,1);
    --pw-sh:    0 8px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    --pw-sh-up: 0 -6px 28px rgba(0,0,0,.5);

    --pw-on-bg:  rgba(34,197,94,.1);
    --pw-on-fg:  #4ade80;
    --pw-on-bd:  rgba(34,197,94,.28);
    --pw-off-bg: rgba(239,68,68,.1);
    --pw-off-fg: #f87171;
    --pw-off-bd: rgba(239,68,68,.28);
}

@media (prefers-color-scheme: light) {
    :root {
        --pw-bg:    #f4f6fb;
        --pw-surf:  #ffffff;
        --pw-surf2: #f0f4fb;
        --pw-bd:    #dce3f0;
        --pw-tx:    #2d3a52;
        --pw-hi:    #0f1626;
        --pw-sub:   #6b7a96;
        --pw-sh:    0 8px 28px rgba(15,25,55,.1), 0 2px 6px rgba(15,25,55,.06);
        --pw-sh-up: 0 -4px 24px rgba(15,25,55,.1);

        --pw-on-bg:  rgba(34,197,94,.08);
        --pw-on-fg:  #16a34a;
        --pw-on-bd:  rgba(34,197,94,.3);
        --pw-off-bg: rgba(239,68,68,.08);
        --pw-off-fg: #dc2626;
        --pw-off-bd: rgba(239,68,68,.3);
    }
}

/* ══════════════════════════════════════════
   INSTALL BANNER
══════════════════════════════════════════ */
.pwa-install-banner {
    position: fixed;
    bottom: -140px;
    left: 0; right: 0;
    z-index: 9998;
    padding: 0 clamp(10px, 2.5vw, 20px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: bottom .32s var(--pw-ease);
    pointer-events: none;
}
.pwa-install-banner.show {
    bottom: 0;
    pointer-events: auto;
}

.pwa-banner-shell {
    max-width: 800px;
    margin: 0 auto 14px;
    background: var(--pw-surf);
    border: 1px solid var(--pw-bd);
    border-radius: var(--pw-r);
    box-shadow: var(--pw-sh);
    position: relative;
    overflow: hidden;
}
.pwa-banner-shell::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pw-acc), var(--pw-acc2));
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
}

.pwa-banner-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--pw-acc);
}

.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-text strong {
    display: block;
    font-size: .84rem; font-weight: 700;
    color: var(--pw-hi);
    margin-bottom: 2px; line-height: 1.3;
}
.pwa-banner-text p {
    margin: 0;
    font-size: .72rem;
    color: var(--pw-sub);
    line-height: 1.4;
}

.pwa-banner-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.pwa-btn-install {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--pw-rsm);
    background: linear-gradient(135deg, var(--pw-acc), var(--pw-acc2));
    color: #fff; border: none;
    font-size: .78rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(245,158,11,.32);
    transition: transform .18s var(--pw-ease), box-shadow .18s var(--pw-ease);
}
.pwa-btn-install:hover  { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(245,158,11,.44); }
.pwa-btn-install:active { transform: scale(.97); }

.pwa-btn-dismiss {
    width: 30px; height: 30px;
    background: var(--pw-surf2);
    border: 1px solid var(--pw-bd);
    border-radius: 50%;
    color: var(--pw-sub);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: border-color .18s, color .18s, background .18s;
}
.pwa-btn-dismiss:hover {
    border-color: rgba(245,158,11,.5);
    color: var(--pw-hi);
    background: rgba(245,158,11,.08);
}

@media (max-width: 560px) {
    .pwa-banner-content { flex-wrap: wrap; gap: 10px; }
    .pwa-banner-text    { flex: 1 1 calc(100% - 54px); }
    .pwa-banner-actions { width: 100%; justify-content: space-between; }
    .pwa-btn-install    { flex: 1; justify-content: center; padding: 9px; }
}

/* ══════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════ */
.pwa-notification {
    position: fixed;
    top: 14px; right: 14px;
    width: clamp(255px, 85vw, 335px);
    background: var(--pw-surf);
    border: 1px solid var(--pw-bd);
    border-radius: var(--pw-r);
    box-shadow: var(--pw-sh);
    padding: 13px 12px 13px 0;
    display: flex; align-items: flex-start;
    z-index: 10000;
    animation: pwSlideIn .25s var(--pw-ease) both;
    overflow: hidden;
}
.pwa-notification.fade-out {
    animation: pwSlideOut .22s var(--pw-ease) forwards;
}

.pwa-notification-info    { border-left: 3px solid var(--pw-blue); }
.pwa-notification-success { border-left: 3px solid var(--pw-green); }
.pwa-notification-warning { border-left: 3px solid var(--pw-acc); }
.pwa-notification-error   { border-left: 3px solid var(--pw-red); }

.pwa-notif-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 10px 0 14px;
    align-self: flex-start;
    margin-top: 1px;
}
.pwa-notification-info    .pwa-notif-icon { background: rgba(59,130,246,.1);  color: var(--pw-blue);  border: 1px solid rgba(59,130,246,.22); }
.pwa-notification-success .pwa-notif-icon { background: rgba(34,197,94,.1);   color: var(--pw-green); border: 1px solid rgba(34,197,94,.22);  }
.pwa-notification-warning .pwa-notif-icon { background: rgba(245,158,11,.1);  color: var(--pw-acc);   border: 1px solid rgba(245,158,11,.22); }
.pwa-notification-error   .pwa-notif-icon { background: rgba(239,68,68,.1);   color: var(--pw-red);   border: 1px solid rgba(239,68,68,.22);  }

.pwa-notification-content { flex: 1; min-width: 0; }
.pwa-notification-content strong {
    display: block;
    font-size: .79rem; font-weight: 700;
    color: var(--pw-hi);
    margin-bottom: 2px; line-height: 1.3;
}
.pwa-notification-content p {
    margin: 0;
    font-size: .71rem;
    color: var(--pw-sub); line-height: 1.45;
}

.pwa-notification-close {
    background: transparent; border: none;
    color: var(--pw-sub); cursor: pointer;
    padding: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; flex-shrink: 0;
    align-self: flex-start;
    transition: color .15s, background .15s;
}
.pwa-notification-close:hover {
    color: var(--pw-hi); background: var(--pw-bd);
}

/* Auto-close progress bar */
.pwa-notification::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pw-acc), var(--pw-acc2));
    animation: pwProgress 5s linear forwards;
}
@keyframes pwProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

@media (max-width: 480px) {
    .pwa-notification {
        top: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        right: 10px; left: 10px;
        width: auto;
        animation: pwSlideUp .25s var(--pw-ease) both;
    }
    .pwa-notification.fade-out {
        animation: pwSlideDown .22s var(--pw-ease) forwards;
    }
}

/* ══════════════════════════════════════════
   NETWORK STATUS PILL
══════════════════════════════════════════ */
.status-online,
.status-offline {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px;
    font-size: .67rem; font-weight: 700; letter-spacing: .03em;
    line-height: 1; border: 1px solid;
}
.status-online  { background: var(--pw-on-bg);  color: var(--pw-on-fg);  border-color: var(--pw-on-bd);  }
.status-offline { background: var(--pw-off-bg); color: var(--pw-off-fg); border-color: var(--pw-off-bd); }

/* dot indicator */
.status-online::before,
.status-offline::before {
    content: ''; width: 5px; height: 5px;
    border-radius: 50%; flex-shrink: 0;
}
.status-online::before {
    background: var(--pw-on-fg);
    animation: pw-ping 2s ease-in-out infinite;
}
.status-offline::before { background: var(--pw-off-fg); }

@keyframes pw-ping {
    0%, 100% { box-shadow: 0 0 0 0   rgba(74,222,128,.5); }
    50%       { box-shadow: 0 0 0 4px rgba(74,222,128,0);  }
}

/* ══════════════════════════════════════════
   CAMERA NUDGE (injected by pwa-init.js)
   Layout classes only — tokens applied inline
══════════════════════════════════════════ */
.pwa-camera-nudge-btn-allow,
.pwa-camera-nudge-btn-skip {
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}
.pwa-camera-nudge-btn-allow:hover,
.pwa-camera-nudge-btn-skip:hover { opacity: .82; }

/* ══════════════════════════════════════════
   PWA STANDALONE SAFE-AREA
══════════════════════════════════════════ */
.pwa-mode .header { padding-top:    env(safe-area-inset-top,    0px); }
.pwa-mode .footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes pwSlideIn {
    from { transform: translateX(calc(100% + 16px)); opacity: 0; }
    to   { transform: translateX(0);                  opacity: 1; }
}
@keyframes pwSlideOut {
    from { transform: translateX(0);                  opacity: 1; }
    to   { transform: translateX(calc(100% + 16px)); opacity: 0; }
}
@keyframes pwSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pwSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(60px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner,
    .pwa-notification { transition: none !important; animation: none !important; }
    .pwa-notification::after { animation: none !important; }
    .status-online::before   { animation: none !important; }
}