/*
 * Pusa Coffee — Mobile UI Safety Layer
 * Menjaga modal, tombol aksi, keyboard, safe-area, dan bottom navigation
 * agar tidak saling menutupi pada layar mobile/PWA.
 */
:root {
    --pusa-bottom-nav-space: 0px;
    --pusa-visual-viewport-height: 100dvh;
    --pusa-visual-viewport-top: 0px;
    --pusa-safe-top: env(safe-area-inset-top, 0px);
    --pusa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Password visibility toggle — dipasang otomatis oleh mobile-ui-fix.js. */
.pusa-password-field {
    position: relative;
    width: 100%;
}
.pusa-password-field > input[type="password"],
.pusa-password-field > input[data-pusa-password-input="true"] {
    width: 100%;
    padding-right: 3.45rem !important;
}
.pusa-password-toggle {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: .55rem;
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: .85rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.pusa-password-toggle:hover,
.pusa-password-toggle:focus-visible {
    color: #047857;
    background: #ecfdf5;
    outline: 2px solid transparent;
}
.pusa-password-toggle:active {
    transform: translateY(-50%) scale(.94);
}
.pusa-password-toggle i {
    pointer-events: none;
    font-size: 1rem;
}

/* Elemen diberi class ini oleh JS setelah struktur modal terdeteksi. */
.pusa-modal-root {
    isolation: isolate;
}
.pusa-modal-panel {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.pusa-modal-actions,
.pusa-safe-form-actions {
    isolation: isolate;
}

@media (max-width: 1023px) {
    html,
    body {
        min-height: 100%;
        overscroll-behavior-y: none;
    }

    /* Ruang akhir halaman mengikuti tinggi bottom navigation aktual. */
    #mainContent {
        padding-bottom: max(9rem, calc(var(--pusa-bottom-nav-space) + 2rem)) !important;
    }
    .pusa-page-safe-bottom {
        padding-bottom: max(1.5rem, calc(var(--pusa-bottom-nav-space) + 1.5rem)) !important;
    }

    /* Bottom navigation tidak mengganggu field saat keyboard virtual aktif. */
    .admin-bottom-nav {
        transition: transform .22s ease, opacity .22s ease;
        will-change: transform;
    }
    body.pusa-keyboard-open .admin-bottom-nav {
        transform: translateY(calc(100% + 1.5rem));
        opacity: 0;
        pointer-events: none;
    }

    /* Modal selalu berada di atas app bar dan bottom navigation. */
    .pusa-modal-root {
        position: fixed !important;
        z-index: 90 !important;
        top: var(--pusa-visual-viewport-top) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--pusa-visual-viewport-height) !important;
        min-height: 0 !important;
        padding:
            max(.75rem, var(--pusa-safe-top))
            .75rem
            max(.75rem, var(--pusa-safe-bottom)) !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    .pusa-modal-panel {
        width: min(100%, 38rem) !important;
        max-width: 38rem !important;
        max-height: calc(
            var(--pusa-visual-viewport-height)
            - max(.75rem, var(--pusa-safe-top))
            - max(.75rem, var(--pusa-safe-bottom))
            - .75rem
        ) !important;
        margin: 0 auto !important;
        border-radius: 1.5rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-bottom: 6rem;
        box-shadow: 0 28px 80px rgba(15, 23, 42, .30) !important;
    }

    /* Tombol modal tetap terlihat di dasar panel, bukan di belakang nav. */
    .pusa-modal-actions {
        position: sticky !important;
        z-index: 6;
        bottom: 0 !important;
        margin-right: -.35rem;
        margin-bottom: -.35rem;
        margin-left: -.35rem;
        padding: .85rem .35rem .35rem;
        background: linear-gradient(180deg, rgba(255,255,255,0), #fff 24%, #fff 100%);
    }

    /* Tombol Simpan/Kirim/Konfirmasi pada halaman biasa berada di atas bottom nav. */
    .pusa-safe-form-actions:not(.pusa-modal-actions) {
        position: sticky !important;
        z-index: 24;
        bottom: calc(var(--pusa-bottom-nav-space) + .5rem) !important;
        margin-top: 1.25rem !important;
        padding: .75rem !important;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 1.15rem;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 16px 42px rgba(15, 23, 42, .14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    body.pusa-keyboard-open .pusa-safe-form-actions:not(.pusa-modal-actions) {
        bottom: .5rem !important;
    }
    .pusa-modal-root .pusa-safe-form-actions {
        bottom: 0 !important;
    }

    /* Hindari scroll halaman belakang saat modal terbuka. */
    body.pusa-modal-open {
        overflow: hidden !important;
        touch-action: none;
    }
    body.pusa-modal-open .pusa-modal-panel {
        touch-action: pan-y;
    }

    /* Field mobile minimal 16px agar iOS tidak melakukan auto zoom. */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .pusa-modal-root {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }
    .pusa-modal-panel {
        border-radius: 1.35rem !important;
    }
    .pusa-safe-form-actions:not(.pusa-modal-actions) {
        padding: .65rem !important;
        border-radius: 1rem;
    }
}

@media (max-width: 1023px) {
    [id*="modal" i][class*="fixed"] {
        z-index: 90 !important;
    }
}