/* ════════════════════════════════════════════════════════════════
   INTRA SWEETALERT2 — menyelaraskan Swal2 dengan template

   Swal2 datang dengan warnanya sendiri: tombol setuju ungu #7066e0,
   tolak merah #dc3741, batal abu #6e7881. Tidak satu pun berasal dari
   template, jadi setiap kotak dialog terlihat seperti tamu.

   Berkas ini menyeragamkannya lewat CSS saja, tanpa menyentuh 158
   pemanggilan Swal.fire di seluruh aplikasi. Tiga keadaan tombol yang
   semuanya harus tertangani:

     1. buttonsStyling bawaan (true)  -> .swal2-styled ada, kita warnai
     2. buttonsStyling:false + kelas  -> .btn Bootstrap, biarkan apa adanya
     3. buttonsStyling:false, tanpa kelas -> tombol telanjang, kita bentuk

   Keadaan ketiga itu yang paling parah: tombolnya kehilangan seluruh
   gaya dan tampil sebagai tombol bawaan peramban.

   Dimuat setelah pdsi.css dan sebelum a11y.css, jadi opsi aksesibilitas
   tetap bisa menimpanya.
   ════════════════════════════════════════════════════════════════ */

.swal2-container {
    /* Di atas modal Bootstrap (1055) dan bilah tetap (1100), sesuai peta
       z-index proyek, supaya dialog konfirmasi tidak pernah tertutup. */
    z-index: 1200;
    padding: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   Latar gelap
   ───────────────────────────────────────────────────────────── */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(76, 78, 100, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

html.dark-style .swal2-container.swal2-backdrop-show,
html.dark-style .swal2-container.swal2-noanimation {
    background: rgba(3, 6, 17, 0.66);
}

/* ─────────────────────────────────────────────────────────────
   Bidang dialog: sekeluarga dengan .modal-content
   ───────────────────────────────────────────────────────────── */
.swal2-popup {
    padding: 1.75rem 1.5rem 1.25rem;
    border: 1px solid var(--intra-border, var(--bs-border-color-translucent));
    border-radius: 0.625rem;
    background: var(--intra-surface, var(--bs-body-bg));
    color: var(--intra-text, var(--bs-body-color));
    box-shadow: 0 0 1.25rem 0 rgba(76, 78, 100, 0.28);
    font-family: var(--bs-body-font-family, system-ui, sans-serif);
}

html.dark-style .swal2-popup {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.swal2-title {
    margin: 0 0 0.35rem;
    padding: 0;
    color: var(--intra-text, var(--bs-body-color));
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.swal2-html-container {
    margin: 0.35rem 0 0;
    padding: 0;
    color: var(--intra-text-muted, var(--bs-secondary-color));
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.62;
}

.swal2-html-container strong,
.swal2-html-container b {
    color: var(--intra-text, var(--bs-body-color));
    font-weight: 600;
}

/* Tombol tutup di pojok. */
.swal2-close {
    width: 2rem;
    height: 2rem;
    margin: 0.35rem 0.35rem 0 0;
    border-radius: 0.5rem;
    color: var(--intra-text-muted, var(--bs-secondary-color));
    font-size: 1.9rem;
    transition: background 0.16s ease, color 0.16s ease;
}

.swal2-close:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.swal2-close:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.28);
    outline: none;
}

/* ─────────────────────────────────────────────────────────────
   Ikon status: warna semantik template, bukan warna bawaan Swal2
   ───────────────────────────────────────────────────────────── */
.swal2-icon {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0.25rem auto 1.15rem;
    border-width: 3px;
}

.swal2-icon .swal2-icon-content {
    font-size: 2.6rem;
}

.swal2-icon.swal2-success {
    border-color: rgba(var(--bs-success-rgb), 0.32);
    color: var(--bs-success);
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--bs-success);
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-success-rgb), 0.28);
}

/* Dua potongan putih ini menutupi cincin saat animasi berjalan; kalau
   warnanya tidak ikut bidang dialog, di mode gelap terlihat sebagai
   dua irisan putih yang mencolok. */
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--intra-surface, var(--bs-body-bg));
}

.swal2-icon.swal2-error {
    border-color: rgba(var(--bs-danger-rgb), 0.32);
    color: var(--bs-danger);
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--bs-danger);
}

.swal2-icon.swal2-warning {
    border-color: rgba(var(--bs-warning-rgb), 0.36);
    color: var(--bs-warning);
}

.swal2-icon.swal2-info {
    border-color: rgba(var(--bs-info-rgb), 0.34);
    color: var(--bs-info);
}

.swal2-icon.swal2-question {
    border-color: rgba(var(--bs-primary-rgb), 0.32);
    color: var(--bs-primary);
}

/* ─────────────────────────────────────────────────────────────
   TOMBOL

   Bentuknya diambil dari .btn template: sudut 16px, tinggi dan bobot
   huruf yang sama, jadi tombol Swal2 dan tombol halaman terbaca satu
   keluarga. Warnanya memakai token, bukan angka, supaya ikut berubah
   kalau warna merek diganti.
   ───────────────────────────────────────────────────────────── */
.swal2-actions {
    gap: 0.5rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
}

/* Satu bentuk untuk tombol berkelas Swal2 maupun tombol telanjang.
   Yang sudah memakai .btn Bootstrap sengaja dilewati: kelas itu sudah
   membawa gaya template yang benar. */
.swal2-actions .swal2-styled:not(.btn),
.swal2-actions button.swal2-confirm:not(.btn),
.swal2-actions button.swal2-deny:not(.btn),
.swal2-actions button.swal2-cancel:not(.btn) {
    margin: 0;
    padding: 0.62rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.47;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Setuju: tindakan utama, sama seperti .btn-primary. */
.swal2-actions .swal2-confirm:not(.btn) {
    border-color: var(--bs-primary);
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--bs-primary) 100%, #fff 8%) 0%,
            var(--bs-primary) 50%,
            color-mix(in srgb, var(--bs-primary) 100%, #000 10%) 100%);
    color: #fff;
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--bs-primary) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.swal2-actions .swal2-confirm:not(.btn):hover {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--bs-primary) 100%, #fff 5%) 0%,
            color-mix(in srgb, var(--bs-primary) 95%, #000) 50%,
            color-mix(in srgb, var(--bs-primary) 90%, #000) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bs-primary) 32%, transparent);
}

.swal2-actions .swal2-confirm:not(.btn):focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.4);
    outline: none;
}

/* Tolak: pilihan lain yang bermuatan, sama seperti .btn-label-danger. */
.swal2-actions .swal2-deny:not(.btn) {
    background: rgba(var(--bs-danger-rgb), 0.16);
    color: var(--bs-danger);
    box-shadow: none;
}

.swal2-actions .swal2-deny:not(.btn):hover {
    background: rgba(var(--bs-danger-rgb), 0.24);
    color: var(--bs-danger);
}

.swal2-actions .swal2-deny:not(.btn):focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.35);
    outline: none;
}

/* Batal: sekadar keluar, jadi paling tenang. Warna teksnya sengaja
   memakai warna badan, bukan abu pucat, supaya kontrasnya tetap lolos
   di kedua tema. */
.swal2-actions .swal2-cancel:not(.btn) {
    background: var(--intra-surface-alt, var(--bs-secondary-bg));
    color: var(--intra-text, var(--bs-body-color));
    box-shadow: inset 0 0 0 1px var(--intra-border, var(--bs-border-color));
}

.swal2-actions .swal2-cancel:not(.btn):hover {
    background: color-mix(in srgb, var(--intra-surface-alt, var(--bs-secondary-bg)) 88%, var(--bs-body-color));
    color: var(--intra-text, var(--bs-body-color));
}

.swal2-actions .swal2-cancel:not(.btn):focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), 0.32);
    outline: none;
}

.swal2-actions .swal2-styled:not(.btn):active {
    transform: translateY(1px);
}

.swal2-actions button[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Tombol yang sudah memakai .btn cuma perlu dilepas dari margin dan
   lebar bawaan Swal2; gayanya sudah benar dari template. */
.swal2-actions .btn {
    margin: 0;
}

/* Peramban yang belum mengenal color-mix tetap harus dapat tombol yang
   terbaca, bukan tombol tanpa latar. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {

    .swal2-actions .swal2-confirm:not(.btn),
    .swal2-actions .swal2-confirm:not(.btn):hover {
        background: var(--bs-primary);
        box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.25);
    }

    .swal2-actions .swal2-cancel:not(.btn):hover {
        background: var(--intra-surface-alt, var(--bs-secondary-bg));
    }
}

/* Di layar sempit tombolnya menumpuk dan melebar penuh, jadi tetap
   nyaman dijangkau jempol.

   Urutannya ditetapkan lewat order, bukan lewat column-reverse. Tiga
   pemanggilan di aplikasi ini memakai reverseButtons, yang membalik
   urutan DOM-nya; kalau susunannya ikut urutan DOM, layar sempit akan
   punya dua susunan yang berbeda. Tindakan utama selalu paling bawah,
   paling dekat dengan jempol. */
@media (max-width: 575.98px) {
    .swal2-actions {
        flex-direction: column;
    }

    .swal2-actions .swal2-cancel {
        order: 1;
    }

    .swal2-actions .swal2-deny {
        order: 2;
    }

    .swal2-actions .swal2-confirm {
        order: 3;
    }

    .swal2-actions .swal2-styled,
    .swal2-actions .btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   Masukan
   ───────────────────────────────────────────────────────────── */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    box-sizing: border-box;
    width: 100%;
    margin: 1rem 0 0;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--intra-border, var(--bs-border-color));
    border-radius: 0.5rem;
    background: var(--intra-surface, var(--bs-body-bg));
    color: var(--intra-text, var(--bs-body-color));
    font-size: 0.9rem;
    box-shadow: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16);
    outline: none;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: var(--intra-text-subtle, var(--bs-secondary-color));
}

.swal2-range input,
.swal2-range output {
    color: var(--intra-text, var(--bs-body-color));
}

.swal2-checkbox,
.swal2-radio {
    margin: 1rem 0 0;
    background: transparent;
    color: var(--intra-text, var(--bs-body-color));
    font-size: 0.88rem;
}

.swal2-validation-message {
    margin: 0.85rem 0 0;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    font-size: 0.8rem;
    font-weight: 500;
}

.swal2-validation-message::before {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 0.5rem 0 0;
    background: var(--bs-danger);
    line-height: 1.15rem;
}

/* ─────────────────────────────────────────────────────────────
   Kaki, pemuat, dan langkah
   ───────────────────────────────────────────────────────────── */
.swal2-footer {
    margin: 1.35rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--intra-border, var(--bs-border-color-translucent));
    color: var(--intra-text-muted, var(--bs-secondary-color));
    font-size: 0.8rem;
}

.swal2-loader {
    border-color: var(--bs-primary) transparent var(--bs-primary) transparent;
}

.swal2-timer-progress-bar {
    background: rgba(var(--bs-primary-rgb), 0.55);
}

/* Ujung bilahnya mengikuti sudut dialog. Nilai bawaannya 5px, dan itu
   menyembul di luar sudut 0.625rem. */
.swal2-timer-progress-bar-container {
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
    border-bottom-right-radius: 0.65rem;
    border-bottom-left-radius: 0.65rem;
}

.swal2-progress-steps {
    margin: 0 0 1.25rem;
    padding: 0;
    background: transparent;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Toast: dialog kecil di pojok, bukan di tengah layar
   ───────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast {
    padding: 0.7rem 0.95rem;
    border-radius: 0.65rem;
    box-shadow: 0 6px 22px rgba(76, 78, 100, 0.22);
}

html.dark-style .swal2-popup.swal2-toast {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

.swal2-popup.swal2-toast .swal2-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

.swal2-popup.swal2-toast .swal2-html-container {
    font-size: 0.8rem;
}

.swal2-popup.swal2-toast .swal2-icon {
    width: 1.7rem;
    height: 1.7rem;
    margin: 0 0.6rem 0 0;
    border-width: 2px;
}

.swal2-popup.swal2-toast .swal2-actions {
    margin: 0.5rem 0 0;
}

.swal2-popup.swal2-toast .swal2-styled:not(.btn) {
    padding: 0.34rem 0.8rem;
    border-radius: 10px;
    font-size: 0.78rem;
}

/* ─────────────────────────────────────────────────────────────
   Aksesibilitas
   Tiga pintu keluar: setelan sistem, opsi aplikasi, dan mode kontras
   tinggi. Semua permukaan berkabut wajib punya jalan keluarnya.
   ───────────────────────────────────────────────────────────── */
html.intra-a11y-reduce-transparency .swal2-container.swal2-backdrop-show,
html.intra-a11y-reduce-transparency .swal2-container.swal2-noanimation {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(76, 78, 100, 0.78);
}

html.intra-a11y-reduce-transparency.dark-style .swal2-container.swal2-backdrop-show,
html.intra-a11y-reduce-transparency.dark-style .swal2-container.swal2-noanimation {
    background: rgba(3, 6, 17, 0.88);
}

@media (prefers-reduced-transparency: reduce) {

    .swal2-container.swal2-backdrop-show,
    .swal2-container.swal2-noanimation {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

html.intra-a11y-reduce-motion .swal2-popup,
html.intra-a11y-reduce-motion .swal2-actions .swal2-styled,
html.intra-a11y-reduce-motion .swal2-icon,
html.intra-a11y-reduce-motion .swal2-close {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {

    .swal2-popup,
    .swal2-actions .swal2-styled,
    .swal2-icon,
    .swal2-close {
        animation: none !important;
        transition: none !important;
    }
}

/* Kontras tinggi: tepi dipertegas dan latar dibuat rata, karena
   bayangan halus tidak cukup memisahkan bidang di mode ini. */
html.intra-a11y-high-contrast .swal2-popup {
    border-width: 2px;
    border-color: var(--bs-body-color);
    box-shadow: none;
}

html.intra-a11y-high-contrast .swal2-actions .swal2-confirm:not(.btn) {
    background: var(--bs-primary);
    border-color: var(--bs-body-color);
}

html.intra-a11y-high-contrast .swal2-actions .swal2-cancel:not(.btn),
html.intra-a11y-high-contrast .swal2-actions .swal2-deny:not(.btn) {
    border-color: var(--bs-body-color);
}