/* Tooku UI - Dialog SweetAlert 2
 * Dimuat oleh layout shell (index.php, index_mobile.php) dan layout auth
 * (auth.php) supaya popup tampil sama di seluruh aplikasi, termasuk halaman
 * yang tidak memuat tooku-ui.css.
 *
 * Setiap var() diberi nilai fallback token tema terang karena halaman auth
 * tidak memuat tooku-ui.css sehingga token `--tk-*` tidak tersedia di sana.
 * Di app shell token dari `html[data-theme="dark"]` (spesifisitas lebih
 * tinggi) tetap menang, jadi mode gelap tidak terpengaruh.
 *
 * SweetAlert menyuntikkan stylesheet-nya ke <head> setelah berkas ini dan
 * merender kartu langsung di bawah <body>, jadi setiap selektor diberi awalan
 * `body` agar menang spesifisitas. Bawaannya memakai judul/teks
 * rgba(0,0,0,.65) yang tidak terbaca di mode gelap, tombol biru muda, ring
 * fokus biru, dan animasi "bounce" yang sudah usang.
 */

/* ---------- Dialog SweetAlert 2 ---------- */

body .swal-overlay {
    background: rgba(2, 6, 23, .5);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

body .swal-modal {
    width: min(440px, calc(100% - 32px));
    background: var(--tk-surface, #ffffff);
    border: 1px solid var(--tk-border, #e6e9f0);
    border-radius: 20px;
    box-shadow: 0 24px 56px -14px rgba(15, 23, 42, .3), 0 6px 18px -8px rgba(15, 23, 42, .18);
    animation: tk-dialog-in 220ms cubic-bezier(.22, 1, .36, 1);
    font-family: var(--tk-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

html[data-theme="dark"] body .swal-modal {
    box-shadow: 0 24px 56px -14px rgba(0, 0, 0, .62), 0 6px 18px -8px rgba(0, 0, 0, .5);
}

/* SweetAlert memakai `.swal-overlay--show-modal .swal-modal` (0,2,0) untuk
   animasi "bounce"-nya, jadi animasi penggantinya perlu spesifisitas di atasnya. */
body .swal-overlay--show-modal .swal-modal {
    animation: tk-dialog-in 220ms cubic-bezier(.22, 1, .36, 1);
    will-change: auto;
}

@keyframes tk-dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ikon memakai geometri bawaannya (88px) supaya posisi tanda seru/centang
   tetap presisi; yang diubah hanya warna dan margin. */
body .swal-icon {
    margin: 28px auto 18px;
    animation: none;
}

body .swal-icon:first-child { margin-top: 28px; }

body .swal-icon--warning { border-color: var(--tk-warn, #d97706); }

body .swal-icon--warning__body,
body .swal-icon--warning__dot { background-color: var(--tk-warn, #d97706); }

body .swal-icon--success { border-color: var(--tk-up, #059669); }

body .swal-icon--success__line { background-color: var(--tk-up, #059669); }

body .swal-icon--success__ring { border-color: transparent; }

/* SweetAlert memotong lingkarannya dengan bidang berwarna latar modal —
   harus ikut token, kalau tidak muncul di mode gelap. */
body .swal-icon--success:before,
body .swal-icon--success:after,
body .swal-icon--success__hide-corners { background: var(--tk-surface, #ffffff); }

body .swal-icon--success:after { animation: none; }

body .swal-icon--error { border-color: var(--tk-down, #dc2626); }

body .swal-icon--error__line { background-color: var(--tk-down, #dc2626); }

body .swal-icon--info { border-color: var(--tk-info, #2563eb); }

body .swal-icon--info:before,
body .swal-icon--info:after { background-color: var(--tk-info, #2563eb); }

body .swal-title {
    margin: 0 0 8px;
    padding: 0 24px;
    color: var(--tk-text, #0f172a);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.02em;
}

/* .swal-title:first-child / :not(:last-child) bawaan SweetAlert juga (0,2,0). */
body .swal-title:first-child { margin-top: 28px; }

body .swal-title:not(:last-child) { margin-bottom: 8px; }

body .swal-text {
    display: block;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 24px;
    color: var(--tk-text-muted, #64748b);
    font-size: 13.5px;
    line-height: 1.65;
}

body .swal-text:first-child { margin-top: 28px; }

body .swal-text:last-child { margin-bottom: 4px; }

body .swal-content {
    padding: 0 24px;
    color: var(--tk-text, #0f172a);
}

body .swal-content__input,
body .swal-content__textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--tk-surface-2, #f8fafc);
    border: 1px solid var(--tk-border-strong, #d5dae6);
    border-radius: var(--tk-radius-sm, 8px);
    color: var(--tk-text, #0f172a);
    font-family: var(--tk-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13.5px;
}

body .swal-content__input:focus,
body .swal-content__textarea:focus {
    border-color: var(--tk-accent, #1e40ff);
    box-shadow: 0 0 0 3px var(--tk-accent-soft, #eaefff);
    outline: none;
}

body .swal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
    /* dist/build/*.css memaksa `.swal-footer { margin-bottom: 30px !important }`. */
    margin-bottom: 0 !important;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--tk-border, #e6e9f0);
}

body .swal-footer .swal-button-container {
    display: block;
    margin: 0;
}

body .swal-button {
    box-sizing: border-box;
    min-width: 104px;
    height: 40px;
    padding: 0 20px;
    background: var(--tk-gradient, linear-gradient(135deg, #3b5fff 0%, #1535cc 100%));
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-family: var(--tk-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    text-shadow: none;
    transition: filter var(--tk-transition, 160ms cubic-bezier(.4, 0, .2, 1)), background-color var(--tk-transition, 160ms cubic-bezier(.4, 0, .2, 1)),
        border-color var(--tk-transition, 160ms cubic-bezier(.4, 0, .2, 1)), transform var(--tk-transition, 160ms cubic-bezier(.4, 0, .2, 1));
}

body .swal-button:not([disabled]):hover {
    background: var(--tk-gradient, linear-gradient(135deg, #3b5fff 0%, #1535cc 100%));
    filter: brightness(1.08);
}

body .swal-button:not([disabled]):active { transform: translateY(1px); }

/* SweetAlert masih memakai ring fokus biru + putih dari tema lamanya dan
   selektornya (:not([disabled]):focus) lebih spesifik dari `.swal-button`. */
body .swal-button:not([disabled]):focus,
body .swal-button:not([disabled]):active {
    background: var(--tk-gradient, linear-gradient(135deg, #3b5fff 0%, #1535cc 100%));
    box-shadow: 0 0 0 3px var(--tk-accent-soft, #eaefff);
    outline: none;
}

body .swal-button--cancel {
    background: var(--tk-surface, #ffffff);
    border-color: var(--tk-border-strong, #d5dae6);
    color: var(--tk-text, #0f172a);
}

body .swal-button--cancel:not([disabled]):hover {
    background: var(--tk-surface-2, #f8fafc);
    border-color: var(--tk-accent, #1e40ff);
    color: var(--tk-text, #0f172a);
    filter: none;
}

body .swal-button--cancel:not([disabled]):focus,
body .swal-button--cancel:not([disabled]):active {
    background: var(--tk-surface-2, #f8fafc);
    box-shadow: 0 0 0 3px var(--tk-accent-soft, #eaefff);
    color: var(--tk-text, #0f172a);
}

body .swal-button--danger { background: var(--tk-down, #dc2626); }

body .swal-button--danger:not([disabled]):hover {
    background: var(--tk-down, #dc2626);
    filter: brightness(1.06);
}

body .swal-button--danger:not([disabled]):focus,
body .swal-button--danger:not([disabled]):active {
    background: var(--tk-down, #dc2626);
    box-shadow: 0 0 0 3px var(--tk-down-soft, #fef2f2);
}

body .swal-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    body .swal-modal,
    body .swal-overlay--show-modal .swal-modal { animation: none; }

    body .swal-button { transition: none; }
}