/* ============================================================================
   Zenfora ERP - PWA Styles (offline banner, safe areas, install UX)
   Design system: tokens.css (--erp-*), Bulma. Tidak mengubah layout existing.
   ========================================================================== */

/* --- Safety net: body never wider than viewport (spec #11) --- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Install UX
   ========================================================================== */

/* Topbar install button (hidden until JS decides it is needed) */
.pwa-topbar-install-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--erp-color-border, #E3E0D8);
    border-radius: 50%;
    background: var(--erp-color-surface, #FFFEFB);
    color: var(--erp-color-text-secondary, #706D66);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}
.pwa-topbar-install-btn:hover {
    border-color: var(--erp-color-primary, #1F1F1D);
    color: var(--erp-color-primary, #1F1F1D);
    background: var(--erp-color-surface-secondary, #F1F0EC);
}
.pwa-topbar-install-btn.is-visible {
    display: inline-flex;
}

/* ==========================================================================
   Toast banners (connection status + update available)
   ========================================================================== */

.pwa-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: auto;
    max-width: min(92vw, 520px);
    box-shadow: 0 10px 28px -12px rgba(35, 33, 28, 0.35);
}
.pwa-toast .notification {
    margin: 0;
    border-radius: 10px;
    font-size: 0.875rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.pwa-toast .notification .pwa-toast-msg {
    min-width: 0;
}
.pwa-toast.is-hidden {
    display: none;
}

/* ==========================================================================
   Safe area support (iPhone notch / Dynamic Island / home indicator)
   Hanya diterapkan saat PWA berjalan dalam mode standalone (display-mode).
   ========================================================================== */

@media (display-mode: standalone) {
    @supports (padding: env(safe-area-inset-top)) {
        /* Topbar sticky: perpanjang tinggi agar konten tidak tertutup notch */
        .top-nav-header {
            height: calc(var(--erp-topbar-height, 64px) + env(safe-area-inset-top));
            padding-top: env(safe-area-inset-top);
        }

        /* Ruang scroll ekstra di bawah agar konten tidak tertutup home indicator */
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Sidebar (drawer mobile + desktop) tidak menutup area bawah layar */
        .app-sidebar-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Login page */
        .login-wrapper {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            box-sizing: border-box;
            min-height: 100vh;
        }
    }
}

/* ==========================================================================
   iOS "Add to Home Screen" instructions modal
   ========================================================================== */

.pwa-ios-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(17, 17, 16, 0.55);
    backdrop-filter: blur(2px);
}
.pwa-ios-modal.is-open {
    display: flex;
}
.pwa-ios-modal-card {
    background: var(--erp-color-surface, #FFFEFB);
    border: 1px solid var(--erp-color-border-strong, #CAC6BC);
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(35, 33, 28, 0.4);
    width: min(92vw, 400px);
    padding: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
}
.pwa-ios-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.pwa-ios-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--erp-color-text-primary, #1B1B19);
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin: 0;
}
.pwa-ios-modal-close {
    border: none;
    background: var(--erp-color-surface-secondary, #F1F0EC);
    color: var(--erp-color-text-secondary, #706D66);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
}
.pwa-ios-modal-close:hover {
    color: var(--erp-color-text-primary, #1B1B19);
}
.pwa-ios-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.pwa-ios-steps li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--erp-color-text-secondary, #706D66);
}
.pwa-ios-steps li::before {
    content: counter(step);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--erp-color-primary, #1F1F1D);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.pwa-ios-modal-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--erp-color-border, #E3E0D8);
}
.pwa-ios-modal-note {
    font-size: 0.75rem;
    color: var(--erp-color-text-muted, #9A968D);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}
.pwa-ios-modal-behavior {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--erp-color-primary, #1F1F1D);
    text-align: center;
    margin: 0;
}