/* Tahap 136K — Reusable confirm modal E-LOK. External CSS agar cacheable dan layout lebih ringan. */
.elok-confirm-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1.25rem}.elok-confirm-modal.hidden{display:none!important}.elok-confirm-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.70)}.elok-confirm-dialog{position:relative;width:min(520px,100%);overflow:hidden;border-radius:2rem;border:1px solid rgba(125,211,252,.22);background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(2,6,23,.94));box-shadow:0 20px 58px rgba(2,6,23,.42),inset 0 1px 0 rgba(255,255,255,.08);animation:elokConfirmIn .16s ease-out}.elok-confirm-glow{position:absolute;inset:-10rem -10rem auto auto;width:18rem;height:18rem;border-radius:999px;background:rgba(56,189,248,.12);pointer-events:none}.elok-confirm-content{position:relative;display:flex;gap:1rem;padding:1.35rem 1.35rem 1rem}.elok-confirm-icon{display:grid;height:3.1rem;width:3.1rem;flex:0 0 auto;place-items:center;border-radius:1.15rem;background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff;font-size:1.35rem;font-weight:1000}.elok-confirm-icon[data-tone="success"]{background:linear-gradient(135deg,#34d399,#059669)}.elok-confirm-icon[data-tone="danger"]{background:linear-gradient(135deg,#fb7185,#be123c)}.elok-confirm-eyebrow{margin:0 0 .35rem;color:#7dd3fc;font-size:.72rem;font-weight:1000;letter-spacing:.22em;text-transform:uppercase}.elok-confirm-title{margin:0;color:#fff;font-size:1.38rem;line-height:1.12;font-weight:1000;letter-spacing:-.04em}.elok-confirm-message{margin:.65rem 0 0;color:#cbd5e1;font-size:.92rem;line-height:1.7;font-weight:650}.elok-confirm-note-wrap{position:relative;margin:0 1.35rem 1rem;padding:0 0 .1rem}.elok-confirm-note-label{display:block;margin:0 0 .45rem;color:#bae6fd;font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.elok-confirm-note{min-height:7rem;width:100%;resize:vertical;border-radius:1.2rem;border:1px solid rgba(125,211,252,.18);background:rgba(2,6,23,.58);padding:.9rem 1rem;color:#e2e8f0;outline:none;font-size:.9rem;line-height:1.55;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.elok-confirm-note:focus{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 3px rgba(56,189,248,.12)}.elok-confirm-footer{position:relative;display:flex;justify-content:flex-end;gap:.75rem;border-top:1px solid rgba(255,255,255,.08);padding:1rem 1.35rem 1.25rem;background:rgba(15,23,42,.42)}.elok-confirm-cancel,.elok-confirm-submit{min-height:2.75rem;border:0;border-radius:999px;padding:.75rem 1.15rem;font-size:.86rem;font-weight:1000;cursor:pointer;transition:filter .14s ease}.elok-confirm-cancel{background:rgba(255,255,255,.07);color:#e0f2fe;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.elok-confirm-submit{background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff}.elok-confirm-submit[data-tone="success"]{background:linear-gradient(135deg,#34d399,#059669)}.elok-confirm-submit[data-tone="danger"]{background:linear-gradient(135deg,#fb7185,#be123c)}.elok-confirm-submit:disabled{opacity:.68;cursor:wait!important}.elok-confirm-cancel:hover,.elok-confirm-submit:hover{filter:brightness(1.05)}@keyframes elokConfirmIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}html[data-theme="light"] .elok-confirm-backdrop{background:rgba(15,23,42,.45)}html[data-theme="light"] .elok-confirm-dialog{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,249,255,.96));border-color:rgba(14,165,233,.18);box-shadow:0 20px 58px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.9)}html[data-theme="light"] .elok-confirm-title{color:#0f172a!important}html[data-theme="light"] .elok-confirm-message{color:#334155!important}html[data-theme="light"] .elok-confirm-eyebrow{color:#0369a1!important}html[data-theme="light"] .elok-confirm-footer{background:rgba(248,250,252,.82);border-color:rgba(15,23,42,.08)}html[data-theme="light"] .elok-confirm-cancel{background:#fff;color:#0f172a;box-shadow:inset 0 0 0 1px rgba(15,23,42,.10)}html[data-theme="light"] .elok-confirm-note{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.12)}html[data-theme="light"] .elok-confirm-note-label{color:#0369a1!important}.elok-confirm-details-wrap{position:relative;margin:0 1.35rem 1rem}.elok-confirm-details{white-space:pre-line;border-radius:1.25rem;border:1px solid rgba(251,191,36,.24);background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(14,165,233,.055));padding:1rem;color:#fde68a;font-size:.82rem;line-height:1.65;font-weight:800}html[data-theme="light"] .elok-confirm-details{background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(240,249,255,.84));border-color:rgba(217,119,6,.20);color:#78350f!important}.elok-alert-toast{position:fixed;right:1rem;bottom:1rem;z-index:9998;max-width:min(420px,calc(100vw - 2rem));border-radius:1.25rem;border:1px solid rgba(125,211,252,.18);background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(2,6,23,.92));padding:1rem 1.1rem;color:#e2e8f0;box-shadow:0 16px 42px rgba(2,6,23,.32);animation:elokConfirmIn .16s ease-out}.elok-alert-toast strong{display:block;color:#fff;font-weight:1000}.elok-alert-toast p{margin:.25rem 0 0;font-size:.86rem;line-height:1.55;font-weight:650;color:#cbd5e1}html[data-theme="light"] .elok-alert-toast{background:#fff;color:#0f172a;border-color:rgba(14,165,233,.18);box-shadow:0 16px 42px rgba(15,23,42,.14)}html[data-theme="light"] .elok-alert-toast strong{color:#0f172a}html[data-theme="light"] .elok-alert-toast p{color:#334155}@media(max-width:640px){.elok-confirm-modal{padding:.85rem}.elok-confirm-content{padding:1.05rem 1.05rem .85rem}.elok-confirm-footer{padding:.85rem 1.05rem 1.05rem;flex-direction:column-reverse}.elok-confirm-cancel,.elok-confirm-submit{width:100%}.elok-confirm-glow{display:none}}@media(prefers-reduced-motion:reduce){.elok-confirm-dialog,.elok-alert-toast{animation:none!important}.elok-confirm-cancel,.elok-confirm-submit{transition:none!important}}

/* Tahap 136K3 — fix scrollbar horizontal pada popup konfirmasi.
   Penyebab 136K2: width:100vw + padding membuat overlay melebar melebihi viewport. */
html.elok-confirm-lock,
body.elok-confirm-lock {
    overflow: hidden !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal],
body > .elok-confirm-modal[data-elok-confirm-modal] * {
    box-sizing: border-box !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal] {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(.75rem, 2.4vw, 1.25rem) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain !important;
    isolation: isolate !important;
}

body > .elok-confirm-modal.hidden[data-elok-confirm-modal] {
    display: none !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-dialog {
    margin: 0 !important;
    width: min(520px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-content,
body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-footer,
body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-details-wrap,
body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-note-wrap {
    max-width: 100% !important;
}

body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-details,
body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-message,
body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-title {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

@media (max-width: 640px) {
    body > .elok-confirm-modal[data-elok-confirm-modal] {
        align-items: center !important;
        padding: .85rem !important;
    }

    body > .elok-confirm-modal[data-elok-confirm-modal] .elok-confirm-dialog {
        width: calc(100vw - 1.7rem) !important;
        max-width: calc(100vw - 1.7rem) !important;
        max-height: calc(100dvh - 1.7rem) !important;
    }
}