/* swal-theme.css — SweetAlert2 ngikut design-system kita. Pakai CSS var (--surface, --text, dst) yang cascade dari , jadi popup auto-adapt dark/light tanpa JS tambahan. !important perlu karena Swal v11 inject style-nya sendiri ke belakangan. */ /* Stacking fix: payment/reinstall/extend modals pakai .modal-overlay z-index:9999. Swal default cuma 1060, jadi kalau Swal fire SAAT modal kebuka, popup-nya ketiban di belakang modal. Angkat container Swal di atas modal. */ .swal2-container { z-index: 10050 !important; } .swal2-popup { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); border-radius: 1rem !important; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .25) !important; } .swal2-title { color: var(--text) !important; font-weight: 650; } .swal2-html-container { color: var(--text-muted) !important; } .swal2-html-container code { background: var(--surface-3); color: var(--text); padding: .125rem .375rem; border-radius: .25rem; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; word-break: break-all; } /* inputs */ .swal2-input, .swal2-textarea, .swal2-select { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: .5rem !important; box-shadow: none !important; } .swal2-input::placeholder, .swal2-textarea::placeholder { color: var(--text-subtle) !important; } .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: #1963e3 !important; box-shadow: 0 0 0 3px rgba(25, 99, 227, .2) !important; } /* buttons — samain look-nya sama .btn-primary / .btn-secondary */ .swal2-actions { gap: .5rem; } .swal2-styled.swal2-confirm { background: #1963e3 !important; color: #fff !important; border: 0 !important; border-radius: .5rem !important; box-shadow: none !important; font-weight: 500; } .swal2-styled.swal2-confirm:hover { background: #1450c4 !important; } .swal2-styled.swal2-cancel { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: .5rem !important; box-shadow: none !important; font-weight: 500; } .swal2-styled.swal2-cancel:hover { background: var(--surface-2) !important; } .swal2-styled.swal2-deny { border-radius: .5rem !important; } .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(25, 99, 227, .3) !important; } /* misc */ .swal2-validation-message { background: var(--surface-2) !important; color: var(--text-muted) !important; } .swal2-close { color: var(--text-subtle) !important; } .swal2-close:hover { color: var(--text) !important; } .swal2-footer { border-top-color: var(--border) !important; color: var(--text-muted) !important; } .swal2-timer-progress-bar { background: rgba(25, 99, 227, .4) !important; } /* toast (top-end) ikut tema juga */ .swal2-toast { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .3) !important; }