/* ============================================================ */
/* PPID ALERT — Custom Alert Library                            */
/* Versi  : 1.0.0                                              */
/* Tema   : #0072c6 (Blue PPID) / #003d80                     */
/*                                                             */
/* Cara Pakai:                                                  */
/*   <link rel="stylesheet" href="ppid-alert.css">             */
/*   <script src="ppid-alert.js"></script>                     */
/*                                                             */
/* API:                                                         */
/*   PA.toast({ type, title, message, duration, position })    */
/*   PA.alert({ type, title, message, closable }, target)      */
/*   PA.dialog({ type, title, message, confirm, cancel })      */
/*     .then(result => { if(result) { ... } })                  */
/*   PA.loading({ title, message, dots })                      */
/*   PA.notify({ type, title, message, duration })             */
/*   PA.close()  /  PA.closeAll()                              */
/* ============================================================ */

:root {
  --pa-blue       : #0072c6;
  --pa-blue-dk    : #003d80;
  --pa-blue-soft  : #e8f2fb;
  --pa-green      : #10b964;
  --pa-green-dk   : #0a8547;
  --pa-green-soft : #e6faf2;
  --pa-red        : #e03549;
  --pa-red-dk     : #b5253a;
  --pa-red-soft   : #fde8eb;
  --pa-amber      : #f59e0b;
  --pa-amber-dk   : #b07309;
  --pa-amber-soft : #fef5e4;
  --pa-purple     : #7c3aed;
  --pa-purple-soft: #f0ebff;
  --pa-slate      : #64748b;
  --pa-slate-soft : #f1f5f9;
  --pa-white      : #ffffff;
  --pa-text       : #0d1f35;
  --pa-text-sub   : #5a7089;
  --pa-border     : rgba(0,40,100,0.1);
  --pa-font       : 'Poppins','Segoe UI',system-ui,sans-serif;
  --pa-radius     : 16px;
  --pa-radius-sm  : 10px;
  --pa-ease       : cubic-bezier(0.22,1,0.36,1);
  --pa-ease-in    : cubic-bezier(0.55,0,1,0.45);
  --pa-shadow-md  : 0 8px 32px rgba(0,30,80,0.15);
  --pa-shadow-xl  : 0 28px 72px rgba(0,20,60,0.24);
}

/* ── Backdrop ── */
.pa-backdrop {
  position:fixed; inset:0;
  background:rgba(4,16,40,0.52);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  z-index:9100; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.pa-backdrop.pa-show { opacity:1; pointer-events:all; }

/* ── Icon Ring ── */
.pa-icon-ring {
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; flex-shrink:0; margin:0 auto 1.1rem; position:relative;
}
.pa-icon-ring::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  opacity:0; animation:pa-ring-pulse 2.2s ease-in-out infinite;
}
.pa-t-success  .pa-icon-ring { background:var(--pa-green-soft);  color:var(--pa-green);  }
.pa-t-success  .pa-icon-ring::before { background:var(--pa-green);  }
.pa-t-danger   .pa-icon-ring { background:var(--pa-red-soft);    color:var(--pa-red);    }
.pa-t-danger   .pa-icon-ring::before { background:var(--pa-red);    }
.pa-t-warning  .pa-icon-ring { background:var(--pa-amber-soft);  color:var(--pa-amber);  }
.pa-t-warning  .pa-icon-ring::before { background:var(--pa-amber);  }
.pa-t-info     .pa-icon-ring { background:var(--pa-blue-soft);   color:var(--pa-blue);   }
.pa-t-info     .pa-icon-ring::before { background:var(--pa-blue);   }
.pa-t-question .pa-icon-ring { background:var(--pa-purple-soft); color:var(--pa-purple); }
.pa-t-question .pa-icon-ring::before { background:var(--pa-purple); }

/* ── Shared Button ── */
.pa-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.65rem 1.2rem; border-radius:var(--pa-radius-sm); font-family:var(--pa-font);
  font-size:.84rem; font-weight:700; cursor:pointer; border:none;
  transition:transform .18s, filter .18s, box-shadow .18s;
  white-space:nowrap; line-height:1; text-decoration:none;
}
.pa-btn:hover  { transform:translateY(-1px); filter:brightness(1.07); }
.pa-btn:active { transform:translateY(0);    filter:brightness(0.95); }
.pa-btn-cancel {
  background:var(--pa-slate-soft); color:var(--pa-text-sub);
  border:1px solid var(--pa-border);
}
.pa-btn-cancel:hover { background:#e2e8f0; }
.pa-btn-success  { background:linear-gradient(135deg,var(--pa-green), var(--pa-green-dk));  color:#fff; box-shadow:0 4px 16px rgba(16,185,100,.30); }
.pa-btn-danger   { background:linear-gradient(135deg,var(--pa-red),   var(--pa-red-dk));    color:#fff; box-shadow:0 4px 16px rgba(224,53,73,.30);  }
.pa-btn-warning  { background:linear-gradient(135deg,var(--pa-amber), var(--pa-amber-dk));  color:#fff; box-shadow:0 4px 16px rgba(245,158,11,.30); }
.pa-btn-info     { background:linear-gradient(135deg,var(--pa-blue),  var(--pa-blue-dk));   color:#fff; box-shadow:0 4px 16px rgba(0,114,198,.30);  }
.pa-btn-question { background:linear-gradient(135deg,var(--pa-purple),#5b21b6);             color:#fff; box-shadow:0 4px 16px rgba(124,58,237,.30); }

/* ══════════════════════════
   1. DIALOG
══════════════════════════ */
.pa-dialog {
  background:var(--pa-white); border-radius:var(--pa-radius);
  width:100%; max-width:420px; box-shadow:var(--pa-shadow-xl);
  overflow:hidden; font-family:var(--pa-font);
  transform:scale(.86) translateY(32px); opacity:0;
  transition:transform .38s var(--pa-ease), opacity .28s ease;
}
.pa-backdrop.pa-show .pa-dialog { transform:scale(1) translateY(0); opacity:1; }

.pa-dialog-bar { height:4px; }
.pa-t-success  .pa-dialog-bar { background:linear-gradient(90deg,var(--pa-green), #34d399); }
.pa-t-danger   .pa-dialog-bar { background:linear-gradient(90deg,var(--pa-red),   #f87171); }
.pa-t-warning  .pa-dialog-bar { background:linear-gradient(90deg,var(--pa-amber), #fbbf24); }
.pa-t-info     .pa-dialog-bar { background:linear-gradient(90deg,var(--pa-blue),  #38bdf8); }
.pa-t-question .pa-dialog-bar { background:linear-gradient(90deg,var(--pa-purple),#a78bfa); }

.pa-dialog-body   { padding:2.1rem 2rem 1.6rem; text-align:center; }
.pa-dialog-title  { font-size:1.05rem; font-weight:800; color:var(--pa-text); margin-bottom:.45rem; line-height:1.4; }
.pa-dialog-msg    { font-size:.84rem; color:var(--pa-text-sub); line-height:1.75; }
.pa-dialog-footer { display:flex; gap:.6rem; padding:0 2rem 1.8rem; }
.pa-dialog-footer .pa-btn { flex:1; }

/* ══════════════════════════
   2. TOAST
══════════════════════════ */
.pa-toast-wrap {
  position:fixed; z-index:9300;
  display:flex; flex-direction:column; gap:.55rem;
  pointer-events:none; width:340px; max-width:calc(100vw - 2rem);
}
.pa-tw-top-right     { top:1.2rem;    right:1.2rem; align-items:flex-end; }
.pa-tw-top-left      { top:1.2rem;    left:1.2rem;  align-items:flex-start; }
.pa-tw-top-center    { top:1.2rem;    left:50%; transform:translateX(-50%); align-items:center; }
.pa-tw-bottom-right  { bottom:1.2rem; right:1.2rem; flex-direction:column-reverse; align-items:flex-end; }
.pa-tw-bottom-left   { bottom:1.2rem; left:1.2rem;  flex-direction:column-reverse; align-items:flex-start; }
.pa-tw-bottom-center { bottom:1.2rem; left:50%; transform:translateX(-50%); flex-direction:column-reverse; align-items:center; }

.pa-toast {
  display:flex; align-items:flex-start; gap:.7rem;
  background:var(--pa-white); border-radius:var(--pa-radius-sm);
  padding:.9rem 1rem .85rem .9rem; box-shadow:var(--pa-shadow-md);
  pointer-events:all; font-family:var(--pa-font); border-left:4px solid;
  position:relative; overflow:hidden; animation:pa-toast-in .4s var(--pa-ease) both;
  min-width:260px;
}
.pa-toast.pa-toast-out { animation:pa-toast-out .32s var(--pa-ease-in) both; }
.pa-toast-success { border-left-color:var(--pa-green); }
.pa-toast-danger  { border-left-color:var(--pa-red);   }
.pa-toast-warning { border-left-color:var(--pa-amber); }
.pa-toast-info    { border-left-color:var(--pa-blue);  }

.pa-toast-ico {
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; margin-top:1px;
}
.pa-toast-success .pa-toast-ico { background:var(--pa-green-soft);  color:var(--pa-green); }
.pa-toast-danger  .pa-toast-ico { background:var(--pa-red-soft);    color:var(--pa-red);   }
.pa-toast-warning .pa-toast-ico { background:var(--pa-amber-soft);  color:var(--pa-amber); }
.pa-toast-info    .pa-toast-ico { background:var(--pa-blue-soft);   color:var(--pa-blue);  }

.pa-toast-body  { flex:1; min-width:0; }
.pa-toast-title { font-size:.82rem; font-weight:800; color:var(--pa-text);     line-height:1.3; }
.pa-toast-msg   { font-size:.77rem; color:var(--pa-text-sub); line-height:1.55; margin-top:.14rem; }
.pa-toast-x {
  background:none; border:none; cursor:pointer; color:var(--pa-text-sub);
  font-size:.7rem; padding:3px 5px; border-radius:5px; flex-shrink:0;
  margin-top:2px; line-height:1; transition:all .15s;
}
.pa-toast-x:hover { background:var(--pa-slate-soft); color:var(--pa-text); }
.pa-toast-prog {
  position:absolute; bottom:0; left:0; height:3px;
  transform-origin:left; border-radius:0 2px 2px 0;
  animation:pa-prog-shrink linear both;
}
.pa-toast-success .pa-toast-prog { background:var(--pa-green); }
.pa-toast-danger  .pa-toast-prog { background:var(--pa-red);   }
.pa-toast-warning .pa-toast-prog { background:var(--pa-amber); }
.pa-toast-info    .pa-toast-prog { background:var(--pa-blue);  }

/* ══════════════════════════
   3. INLINE ALERT
══════════════════════════ */
.pa-alert {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.88rem 1rem; border-radius:var(--pa-radius-sm); border:1px solid;
  font-family:var(--pa-font); animation:pa-fade-up .3s var(--pa-ease) both;
  margin-bottom:.65rem; position:relative;
}
.pa-alert-success { background:var(--pa-green-soft);  border-color:rgba(16,185,100,.22); }
.pa-alert-danger  { background:var(--pa-red-soft);    border-color:rgba(224,53,73,.22);  }
.pa-alert-warning { background:var(--pa-amber-soft);  border-color:rgba(245,158,11,.22); }
.pa-alert-info    { background:var(--pa-blue-soft);   border-color:rgba(0,114,198,.22);  }

.pa-alert-ico  { font-size:1rem; margin-top:2px; flex-shrink:0; }
.pa-alert-success .pa-alert-ico { color:var(--pa-green); }
.pa-alert-danger  .pa-alert-ico { color:var(--pa-red);   }
.pa-alert-warning .pa-alert-ico { color:var(--pa-amber); }
.pa-alert-info    .pa-alert-ico { color:var(--pa-blue);  }

.pa-alert-body  { flex:1; min-width:0; }
.pa-alert-title { font-size:.83rem; font-weight:800; color:var(--pa-text);     margin-bottom:.12rem; }
.pa-alert-msg   { font-size:.79rem; color:var(--pa-text-sub); line-height:1.65; }
.pa-alert-x {
  background:none; border:none; cursor:pointer; color:var(--pa-text-sub);
  font-size:.72rem; padding:2px 4px; border-radius:4px; flex-shrink:0;
  line-height:1; transition:all .15s;
}
.pa-alert-x:hover { color:var(--pa-text); }
.pa-alert.pa-alert-out { animation:pa-fade-out .26s var(--pa-ease-in) both; }

/* ══════════════════════════
   4. NOTIFY (panel samping)
══════════════════════════ */
.pa-notify {
  position:fixed; top:1.2rem; right:1.2rem;
  width:340px; max-width:calc(100vw - 2.4rem);
  background:var(--pa-white); border-radius:var(--pa-radius);
  box-shadow:var(--pa-shadow-xl); z-index:9200; font-family:var(--pa-font);
  overflow:hidden; transform:translateX(calc(100% + 2rem)); opacity:0;
  transition:transform .44s var(--pa-ease), opacity .32s ease;
}
.pa-notify.pa-notify-show { transform:translateX(0); opacity:1; }
.pa-notify.pa-notify-out  { transform:translateX(calc(100% + 2rem)); opacity:0; }
.pa-notify::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.pa-notify-success::before { background:linear-gradient(180deg,var(--pa-green),#34d399); }
.pa-notify-danger::before  { background:linear-gradient(180deg,var(--pa-red),  #f87171); }
.pa-notify-warning::before { background:linear-gradient(180deg,var(--pa-amber),#fbbf24); }
.pa-notify-info::before    { background:linear-gradient(180deg,var(--pa-blue), #38bdf8); }

.pa-notify-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem .85rem; border-bottom:1px solid var(--pa-border); }
.pa-notify-badge {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.pa-notify-success .pa-notify-badge { background:var(--pa-green-soft);  color:var(--pa-green); }
.pa-notify-danger  .pa-notify-badge { background:var(--pa-red-soft);    color:var(--pa-red);   }
.pa-notify-warning .pa-notify-badge { background:var(--pa-amber-soft);  color:var(--pa-amber); }
.pa-notify-info    .pa-notify-badge { background:var(--pa-blue-soft);   color:var(--pa-blue);  }

.pa-notify-meta  { flex:1; min-width:0; }
.pa-notify-title { font-size:.88rem; font-weight:800; color:var(--pa-text); line-height:1.3; }
.pa-notify-time  { font-size:.68rem; color:var(--pa-text-sub); margin-top:.1rem; }
.pa-notify-x {
  background:none; border:none; cursor:pointer; color:var(--pa-text-sub);
  font-size:.78rem; padding:4px; border-radius:6px; line-height:1; flex-shrink:0; transition:all .15s;
}
.pa-notify-x:hover { background:var(--pa-slate-soft); color:var(--pa-text); }
.pa-notify-body { padding:.9rem 1.2rem 1rem; }
.pa-notify-msg  { font-size:.82rem; color:var(--pa-text-sub); line-height:1.72; }
.pa-notify-prog {
  height:3px; transform-origin:left; animation:pa-prog-shrink linear both;
}
.pa-notify-success .pa-notify-prog { background:linear-gradient(90deg,var(--pa-green),#34d399); }
.pa-notify-danger  .pa-notify-prog { background:linear-gradient(90deg,var(--pa-red),  #f87171); }
.pa-notify-warning .pa-notify-prog { background:linear-gradient(90deg,var(--pa-amber),#fbbf24); }
.pa-notify-info    .pa-notify-prog { background:linear-gradient(90deg,var(--pa-blue), #38bdf8); }

/* ══════════════════════════
   5. LOADING
══════════════════════════ */
.pa-loading-box {
  background:var(--pa-white); border-radius:var(--pa-radius);
  padding:2.4rem 2.4rem 2rem; text-align:center;
  max-width:300px; width:100%; box-shadow:var(--pa-shadow-xl);
  transform:scale(.88) translateY(24px); opacity:0;
  transition:transform .38s var(--pa-ease), opacity .28s ease;
  font-family:var(--pa-font);
}
.pa-backdrop.pa-show .pa-loading-box { transform:scale(1) translateY(0); opacity:1; }

.pa-spinner { width:52px; height:52px; margin:0 auto 1.2rem; position:relative; }
.pa-spinner::before,.pa-spinner::after {
  content:''; position:absolute; inset:0; border-radius:50%; border:4px solid transparent;
}
.pa-spinner::before {
  border-top-color:var(--pa-blue); border-right-color:rgba(0,114,198,.3);
  animation:pa-spin .85s linear infinite;
}
.pa-spinner::after {
  border-bottom-color:rgba(0,114,198,.12); border-left-color:rgba(0,114,198,.06);
  animation:pa-spin .85s linear infinite reverse; inset:8px;
}

.pa-dots { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 1.2rem; }
.pa-dot {
  width:11px; height:11px; border-radius:50%; background:var(--pa-blue);
  animation:pa-dot-pulse 1.3s ease-in-out infinite;
}
.pa-dot:nth-child(2) { animation-delay:.18s; background:rgba(0,114,198,.7); }
.pa-dot:nth-child(3) { animation-delay:.36s; background:rgba(0,114,198,.4); }

.pa-loading-title { font-size:.95rem; font-weight:800; color:var(--pa-text);     margin-bottom:.35rem; }
.pa-loading-msg   { font-size:.79rem; color:var(--pa-text-sub); line-height:1.65; }
.pa-loading-brand {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--pa-border);
}
.pa-loading-brand-dot  { width:6px; height:6px; border-radius:50%; background:var(--pa-blue); opacity:.45; }
.pa-loading-brand-text { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pa-text-sub); }

/* ── Keyframes ── */
@keyframes pa-ring-pulse {
  0%,100% { transform:scale(1);    opacity:.35; }
  50%     { transform:scale(1.18); opacity:.08; }
}
@keyframes pa-toast-in {
  from { opacity:0; transform:translateX(28px) scale(.94); }
  to   { opacity:1; transform:translateX(0)    scale(1);   }
}
@keyframes pa-toast-out {
  from { opacity:1; transform:translateX(0)    scale(1);    max-height:200px; margin-bottom:.55rem; }
  to   { opacity:0; transform:translateX(28px) scale(.88);  max-height:0;     margin-bottom:0; padding:0; }
}
@keyframes pa-prog-shrink {
  from { transform:scaleX(1); }
  to   { transform:scaleX(0); }
}
@keyframes pa-fade-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes pa-fade-out {
  from { opacity:1; transform:scaleY(1);   max-height:200px; margin-bottom:.65rem; }
  to   { opacity:0; transform:scaleY(.9);  max-height:0;     margin-bottom:0; padding:0; }
}
@keyframes pa-spin {
  to { transform:rotate(360deg); }
}
@keyframes pa-dot-pulse {
  0%,80%,100% { transform:scale(.6); opacity:.35; }
  40%         { transform:scale(1.1); opacity:1;  }
}

/* ── Responsive ── */
@media (max-width:480px) {
  .pa-dialog { max-width:100%; }
  .pa-dialog-body   { padding:1.7rem 1.5rem 1.3rem; }
  .pa-dialog-footer { padding:0 1.5rem 1.5rem; flex-direction:column; }
  .pa-dialog-footer .pa-btn { flex:none; width:100%; }
  .pa-loading-box   { padding:2rem 1.6rem 1.6rem; }
  .pa-notify, .pa-toast-wrap { width:calc(100vw - 2rem); }
}