/*!
 * sweetalert-brite.css
 * Override SweetAlert2 default styles agar selaras dengan tema Bootswatch Brite v5.3.8
 * Sertakan file ini SETELAH CDN SweetAlert2 di setiap halaman:
 *   <link rel="stylesheet" href="sweetalert-brite.css">
 *
 * Warna referensi Brite:
 *   --bs-primary  : #a2e436  (hijau lime)
 *   --bs-danger   : #f56565  (merah coral)
 *   --bs-success  : #68d391  (hijau mint)
 *   --bs-warning  : #ffc700  (kuning amber)
 *   --bs-info     : #22d2ed  (biru cyan)
 *   --bs-body-bg  : #fff
 *   --bs-body-color: #212529
 */

/* ─────────────────────────────────────────
   POPUP CONTAINER
───────────────────────────────────────── */
.swal2-popup {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #212529;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    padding: 1.75rem 1.75rem 1.5rem;
}

/* ─────────────────────────────────────────
   TITLE
───────────────────────────────────────── */
.swal2-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    padding: 0;
    margin-bottom: 0.4rem;
}

/* ─────────────────────────────────────────
   CONTENT / TEXT
───────────────────────────────────────── */
.swal2-html-container,
.swal2-content {
    font-size: 0.85rem;
    color: #495057;
    margin: 0.25rem 0 0;
}

/* ─────────────────────────────────────────
   ICON — ukuran & warna per tipe
───────────────────────────────────────── */
.swal2-icon {
    width: 4rem;
    height: 4rem;
    margin: 0.75rem auto 1rem;
    border-width: 2px;
}

/* success — hijau mint */
.swal2-icon.swal2-success {
    border-color: #68d391 !important;
    color: #68d391 !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(104, 211, 145, 0.3) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #68d391 !important;
}

/* error / danger — merah coral */
.swal2-icon.swal2-error {
    border-color: #f56565 !important;
    color: #f56565 !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #f56565 !important;
}

/* warning — kuning amber */
.swal2-icon.swal2-warning {
    border-color: #ffc700 !important;
    color: #ffc700 !important;
}

/* info — cyan */
.swal2-icon.swal2-info {
    border-color: #22d2ed !important;
    color: #22d2ed !important;
}

/* question — primary lime */
.swal2-icon.swal2-question {
    border-color: #a2e436 !important;
    color: #a2e436 !important;
}

/* ─────────────────────────────────────────
   ACTIONS (wrapper tombol)
   Perlu padding ekstra agar shadow tidak
   terpotong oleh overflow popup
───────────────────────────────────────── */
.swal2-actions {
    margin-top: 1.25rem;
    gap: 0.6rem;
    padding-bottom: 4px;
    padding-right: 4px;
    overflow: visible !important;
}

/* ─────────────────────────────────────────
   BASE TOMBOL — gaya neobrutalist Brite
   Sumber asli _bootswatch.scss:
     box-shadow: 3px 3px 0 0 #000
     transform: translate(-3px, -3px)
   Hover: shadow hilang, tombol kembali ke (0,0)
───────────────────────────────────────── */
.swal2-confirm,
.swal2-deny,
.swal2-cancel {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1.1rem;
    border-radius: 0.375rem;
    border: 2px solid #000 !important;
    /* shadow neobrutalist: offset kanan-bawah solid hitam */
    box-shadow: 3px 3px 0 0 #000 !important;
    transform: translate(-3px, -3px);
    transition: box-shadow 0.15s, transform 0.15s, background-color 0.15s !important;
}

/* Hover: tombol "turun" ke posisi asli, shadow hilang */
.swal2-confirm:hover,
.swal2-deny:hover,
.swal2-cancel:hover {
    box-shadow: none !important;
    transform: translate(0, 0);
}

/* Active / ditekan: sama dengan hover */
.swal2-confirm:active,
.swal2-deny:active,
.swal2-cancel:active {
    box-shadow: none !important;
    transform: translate(0, 0);
}

/* Focus: tambah ring tipis di luar border hitam */
.swal2-confirm:focus,
.swal2-deny:focus,
.swal2-cancel:focus {
    outline: none;
}

/* ─────────────────────────────────────────
   CONFIRM BUTTON — primary (lime)
───────────────────────────────────────── */
.swal2-confirm {
    background-color: #a2e436 !important;
    color: #000 !important;
}
.swal2-confirm:hover {
    background-color: #8fcc2a !important;
}

/* ─────────────────────────────────────────
   DENY BUTTON — danger (coral)
───────────────────────────────────────── */
.swal2-deny {
    background-color: #f56565 !important;
    color: #fff !important;
}
.swal2-deny:hover {
    background-color: #e04040 !important;
}

/* ─────────────────────────────────────────
   CANCEL BUTTON — secondary (abu netral)
───────────────────────────────────────── */
.swal2-cancel {
    background-color: #e9ecef !important;
    color: #495057 !important;
    font-weight: 500;
}
.swal2-cancel:hover {
    background-color: #d3d8de !important;
}

/* ─────────────────────────────────────────
   CLOSE BUTTON (×)
───────────────────────────────────────── */
.swal2-close {
    color: #868e96;
    font-size: 1.25rem;
    top: 0.75rem;
    right: 0.75rem;
}
.swal2-close:hover {
    color: #212529;
}

/* ─────────────────────────────────────────
   INPUT (untuk inputValue / textarea)
───────────────────────────────────────── */
.swal2-input,
.swal2-textarea,
.swal2-select {
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    color: #212529;
    background: #fff;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #a2e436;
    box-shadow: 0 0 0 3px rgba(162, 228, 54, 0.25);
    outline: none;
}

/* ─────────────────────────────────────────
   VALIDATION MESSAGE
───────────────────────────────────────── */
.swal2-validation-message {
    font-size: 0.78rem;
    background: #fde0e0;
    color: #622828;
    border-radius: 0.25rem;
    padding: 0.35rem 0.75rem;
}
.swal2-validation-message::before {
    background-color: #f56565;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.swal2-footer {
    font-size: 0.78rem;
    color: #868e96;
    border-top: 1px solid #dee2e6;
    margin-top: 1rem;
    padding-top: 0.75rem;
}

/* ─────────────────────────────────────────
   PROGRESS STEPS
───────────────────────────────────────── */
.swal2-progress-steps .swal2-progress-step {
    background: #a2e436;
    color: #000;
}
.swal2-progress-steps .swal2-progress-step-line {
    background: #a2e436;
}
.swal2-progress-steps .swal2-active-progress-step {
    background: #6faa10;
}

/* ─────────────────────────────────────────
   BACKDROP / OVERLAY
───────────────────────────────────────── */
.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* ─────────────────────────────────────────
   TOAST MODE (posisi pojok)
───────────────────────────────────────── */
.swal2-toast {
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    padding: 0.6rem 1rem;
}
.swal2-toast .swal2-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}
.swal2-toast .swal2-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.5rem 0 0;
    border-width: 1.5px;
}
.swal2-toast .swal2-icon::before {
    font-size: 0.75rem;
}

/* Timer progress bar di toast — warna primary */
.swal2-toast .swal2-timer-progress-bar {
    background: rgba(162, 228, 54, 0.7);
}