/* ===========================================================
   Warnoes OS — PWA Install UI
   Button style matches existing topbar pills (system-status-pill /
   division-context-pill): same height, radius, border, backdrop blur.
   Colors reuse brand red/dark/yellow — no new palette introduced.
   =========================================================== */

.pwa-install-button {
    appearance: none;
    border: none;
    cursor: pointer;
    min-height: 38px;
    padding: 0 16px 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(145deg, var(--red, #ff0000), var(--red-deep, #c21e24));
    box-shadow: 0 8px 20px rgba(194, 30, 36, .28);
    transition: transform .14s ease, box-shadow .14s ease;
}
.pwa-install-button:hover { box-shadow: 0 10px 24px rgba(194, 30, 36, .36); }
.pwa-install-button:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(194, 30, 36, .3); }
.pwa-install-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.pwa-install-button span { white-space: nowrap; }

/* On very small screens, collapse to icon-only to avoid crowding the topbar */
@media (max-width: 480px) {
    .pwa-install-button {
        min-width: 38px;
        padding: 0;
        justify-content: center;
    }
    .pwa-install-button span { display: none; }
}

/* ---- Manual install instructions sheet (iOS / fallback) ---- */
.pwa-manual-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pwa-manual-sheet[hidden] { display: none; }

.pwa-manual-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 7, .6);
    backdrop-filter: blur(3px);
}

.pwa-manual-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto 0;
    background: #17120f;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .06);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    padding: 10px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .5);
    max-height: 86vh;
    overflow-y: auto;
    animation: pwaSheetIn .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pwaSheetIn {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 640px) {
    .pwa-manual-sheet { align-items: center; }
    .pwa-manual-card { border-radius: 22px; border-bottom: 1px solid rgba(255, 255, 255, .06); margin-bottom: 0; }
}

/* Drag handle — signals "this is a sheet", matches native bottom-sheet pattern */
.pwa-manual-grabber {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    margin: 10px auto 14px;
}
@media (min-width: 640px) { .pwa-manual-grabber { display: none; } }

.pwa-manual-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.pwa-manual-head-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2a211b, #0f0d0c);
    border: 1px solid rgba(242, 182, 61, .18);
    color: var(--yellow, #f2b63d);
}
.pwa-manual-head-icon svg { width: 20px; height: 20px; }
.pwa-manual-head h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 800; }
.pwa-manual-head p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.56); line-height: 1.48; }

.pwa-manual-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    color: #fff;
    transition: background .15s ease;
}
.pwa-manual-close:hover { background: rgba(255,255,255,.12); }
.pwa-manual-close svg { width: 14px; height: 14px; }

/* ---- Mini browser mockup: shows exactly where to tap ---- */
.pwa-device-mock {
    margin-bottom: 18px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, #1c1613, #141010);
}
.pwa-device-mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pwa-device-mock-icon {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: rgba(255,255,255,.4);
}
.pwa-device-mock-icon svg { width: 15px; height: 15px; }
.pwa-device-mock-url {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
    border-radius: 7px;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The element the user must actually tap — highlighted with brand yellow + pulse */
.pwa-device-mock-target {
    color: var(--yellow, #f2b63d);
    background: rgba(242, 182, 61, .14);
    border: 1px solid rgba(242, 182, 61, .4);
}
.pwa-pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    border: 1.5px solid var(--yellow, #f2b63d);
    animation: pwaPulse 1.8s ease-out infinite;
}
@keyframes pwaPulse {
    0% { transform: scale(.9); opacity: .9; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}
.pwa-dots { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.pwa-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: block; }

.pwa-device-mock-callout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: rgba(255,255,255,.72);
    background: rgba(242, 182, 61, .06);
}
.pwa-device-mock-callout strong { color: var(--yellow, #f2b63d); font-weight: 700; }
.pwa-device-mock-callout-arrow {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-left: 1.5px solid var(--yellow, #f2b63d);
    border-top: 1.5px solid var(--yellow, #f2b63d);
    transform: rotate(45deg);
    opacity: .7;
}

/* ---- Step timeline: numbered badges connected by a vertical line ---- */
.pwa-manual-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.pwa-manual-steps[hidden] { display: none; }

.pwa-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}
.pwa-step:last-child { padding-bottom: 0; }

/* Connector line between badges */
.pwa-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(242,182,61,.35), rgba(242,182,61,.08));
}

.pwa-step-badge {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 800;
    background: rgba(242, 182, 61, .12);
    border: 1.5px solid rgba(242, 182, 61, .4);
    color: var(--yellow, #f2b63d);
    z-index: 1;
}
.pwa-step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 3px;
}
.pwa-step-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.4);
    margin-top: 1px;
}
.pwa-step-icon svg { width: 16px; height: 16px; }
.pwa-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pwa-step-text strong { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.35; }
.pwa-step-text span { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.4; }

/* Final "success" step — visually rewards completion */
.pwa-step-success .pwa-step-badge {
    background: rgba(74, 222, 128, .14);
    border-color: rgba(74, 222, 128, .5);
    color: #4ade80;
}
.pwa-step-success .pwa-step-badge svg { width: 15px; height: 15px; }
.pwa-step-success .pwa-step-icon { color: #4ade80; }
.pwa-step-success .pwa-step-text strong { color: #4ade80; }

/* ---- Footer CTA ---- */
.pwa-manual-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.pwa-manual-cta {
    width: 100%;
    appearance: none;
    border: none;
    cursor: pointer;
    min-height: 46px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #1f2126;
    background: linear-gradient(145deg, var(--yellow, #f2b63d), #e0a52e);
    box-shadow: 0 8px 20px rgba(242, 182, 61, .22);
    transition: transform .14s ease, box-shadow .14s ease;
}
.pwa-manual-cta:hover { box-shadow: 0 10px 24px rgba(242, 182, 61, .3); }
.pwa-manual-cta:active { transform: translateY(1px); }
.pwa-manual-footer-hint {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,.35);
}

/* Install banner (optional contextual nudge, lives above main content) */
.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(194, 30, 36, .18);
    background: linear-gradient(145deg, rgba(194,30,36,.08), rgba(242,182,61,.06));
}
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2a211b, #0f0d0c);
    color: var(--yellow, #f2b63d);
}
.pwa-install-banner-icon svg { width: 18px; height: 18px; }
.pwa-install-banner-copy { flex: 1; min-width: 0; }
.pwa-install-banner-copy strong { display: block; font-size: 13px; color: #1f2126; }
.pwa-install-banner-copy small { display: block; font-size: 11.5px; color: #6b635b; margin-top: 1px; }

/* Login page placement: fixed corner badge, out of the form's way */
.auth-pwa-install-corner {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
}
@media (max-width: 560px) {
    .auth-pwa-install-corner { top: 12px; right: 12px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .pwa-manual-card { animation: none; }
    .pwa-pulse-ring { animation: none; opacity: .5; }
}
/* ===========================================================
   Warnoes OS — UI Fix v1.0.1 (bugfix deploy PWA 2026-10-01)
   Tiga perbaikan:
   1) [hidden] HARUS selalu menang di atas display custom
      -> tombol install tidak lagi "selalu tampak".
   2) Popup instruksi TIDAK lagi ditempel ke topbar dashboard
      (topbar pakai backdrop-filter yang memecah position:fixed
      pada turunannya). Popup sekarang hidup langsung di <body>,
      aman di semua halaman.
   3) Perbaikan kecil defensif lain (sheet z-index dsb).
   =========================================================== */

/* ---- FIX 1: atribut hidden selalu menang ---- */
.pwa-install-button[hidden],
.pwa-manual-sheet[hidden],
.pwa-install-banner[hidden],
[data-pwa-steps-ios][hidden],
[data-pwa-steps-android][hidden] {
    display: none !important;
}

/* ---- FIX 2: sheet harus full-viewport di SEMUA konteks ----
   Karena partial bisa dirender di dalam topbar (dashboard) maupun
   corner login, kita pindahkan sheet ke <body> via JS. Rule ini
   jadi jaring pengaman jika JS belum jalan / diblokir. */
.pwa-manual-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* jangan terpengaruh stacking context induk saat masih
       berada di dalam topbar: lakukan contain none */
    contain: none;
}

/* ---- Defensif: pastikan sheet & tombol tidak ikut transform
        induk mana pun ---- */
.pwa-install-button,
.pwa-manual-sheet {
    transform: none;
    filter: none;
    backdrop-filter: none;
}

/* ---- Minor: tombol install di topbar mobile jangan sampai
        memaksa baris memanjang; biarkan menyusut ---- */
.topbar-actions .pwa-install-button {
    flex-shrink: 0;
}
@media (max-width: 620px) {
    .topbar-actions .pwa-install-button {
        min-height: 34px;
        padding: 0 10px 0 9px;
        font-size: 11.5px;
    }
    .topbar-actions .pwa-install-button svg { width: 14px; height: 14px; }
}