/* ══════════════════════════════════════════════════════════════
   SICANA — Modal Alert & Toast (Design System v3.3)
   Diekstrak dari desain "SICANA - Alert Modals". Semua kelas diberi
   prefix .sc- dan tombol memakai .sc-btn agar TIDAK bentrok dengan
   Bootstrap/Velzon. Variabel warna di-scope ke .sc-overlay/.sc-toasts.
   ══════════════════════════════════════════════════════════════ */
.sc-overlay, .sc-toasts {
  --sc-brand:#1E6E47; --sc-brand-dark:#155233; --sc-brand-mid:#2A8A5A;
  --sc-brand-50:#E6F2EC; --sc-brand-100:#C8E2D3;
  --sc-border:#E2E6E4; --sc-hover:#F6F8F7;
  --sc-text:#0E1A14; --sc-text-muted:#5A6B62; --sc-text-faint:#8B978F;
  --sc-success:#16A06B; --sc-success-50:#E4F5EE; --sc-success-100:#BFE7D5;
  --sc-warning:#D89B16; --sc-warning-50:#FBF1DA; --sc-warning-100:#F1DDA6;
  --sc-danger:#D9304B;  --sc-danger-50:#FBE7EA;  --sc-danger-100:#F3C2CB;
  --sc-info:#2C6BC4;    --sc-info-50:#E7F0FB;    --sc-info-100:#C4D9F3;
  --sc-radius-xl:18px;
  --sc-shadow-pop:0 24px 60px rgba(15,42,31,.24),0 4px 12px rgba(15,42,31,.12);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── Buttons (scoped) ── */
.sc-overlay .sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--sc-border);background:#fff;color:var(--sc-text);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,filter .12s,transform .08s;text-decoration:none;line-height:1;}
.sc-overlay .sc-btn:hover{background:var(--sc-hover);}
.sc-overlay .sc-btn:active{transform:scale(.98);}
.sc-overlay .sc-btn svg{width:15px;height:15px;}
.sc-overlay .sc-btn.sc-primary{background:linear-gradient(180deg,#1F6E47,#155235);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(15,42,31,.18);}
.sc-overlay .sc-btn.sc-primary:hover{filter:brightness(1.07);}
.sc-overlay .sc-btn.sc-gold{background:linear-gradient(135deg,#E5B945,#D6A52E);color:#3D2B00;border-color:transparent;}
.sc-overlay .sc-btn.sc-gold:hover{filter:brightness(1.05);}
.sc-overlay .sc-btn.sc-danger{background:var(--sc-danger);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(217,48,75,.22);}
.sc-overlay .sc-btn.sc-danger:hover{filter:brightness(1.06);}
.sc-overlay .sc-btn.sc-ghost{border-color:transparent;background:transparent;color:var(--sc-text-muted);}
.sc-overlay .sc-btn.sc-ghost:hover{background:var(--sc-hover);color:var(--sc-text);}
.sc-overlay .sc-btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ── Overlay + modal ── */
.sc-overlay{position:fixed;inset:0;z-index:100060;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(11,26,19,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;}
.sc-overlay.show{opacity:1;visibility:visible;}
/* PENTING: overlay ini selalu ada di DOM dan menutupi seluruh layar. Properti
   `visibility` beranimasi secara diskrit — saat modal ditutup elemennya masih
   ikut menerima klik selama ~220ms transisi (kelas .closing), sehingga klik
   pertama sesudah modal ditutup tertelan dan tombol di bawahnya baru bereaksi
   pada klik kedua. pointer-events:none menutup celah itu. */
.sc-overlay:not(.show){pointer-events:none;}
.sc-overlay .sc-modal{position:relative;width:100%;max-width:420px;background:#fff;border-radius:var(--sc-radius-xl);box-shadow:var(--sc-shadow-pop);
  overflow:hidden;transform:translateY(14px) scale(.96);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1.1),opacity .2s;text-align:left;}
.sc-overlay.show .sc-modal{transform:none;opacity:1;}
.sc-overlay.closing .sc-modal{transform:translateY(8px) scale(.98);opacity:0;transition:transform .16s ease,opacity .16s ease;}

.sc-overlay .sc-accent{height:5px;width:100%;}
.sc-overlay .sc-modal[data-type=success] .sc-accent{background:linear-gradient(90deg,var(--sc-success),#3FBF8C);}
.sc-overlay .sc-modal[data-type=error] .sc-accent{background:linear-gradient(90deg,var(--sc-danger),#F0576F);}
.sc-overlay .sc-modal[data-type=warning] .sc-accent{background:linear-gradient(90deg,var(--sc-warning),#EBB84A);}
.sc-overlay .sc-modal[data-type=info] .sc-accent{background:linear-gradient(90deg,var(--sc-info),#5A93DE);}
.sc-overlay .sc-modal[data-type=confirm] .sc-accent{background:linear-gradient(90deg,var(--sc-brand),var(--sc-brand-mid));}
.sc-overlay .sc-modal[data-type=loading] .sc-accent{background:linear-gradient(90deg,var(--sc-info),#5A93DE);}

.sc-overlay .sc-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--sc-text-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.sc-overlay .sc-close:hover{background:var(--sc-hover);color:var(--sc-text);}
.sc-overlay .sc-close svg{width:16px;height:16px;}

.sc-overlay .sc-body{padding:30px 28px 8px;text-align:center;position:relative;}
.sc-overlay .sc-body::before{content:"";position:absolute;left:50%;top:-40px;width:280px;height:200px;transform:translateX(-50%);border-radius:50%;filter:blur(10px);opacity:.5;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 40%, var(--sc-glow,transparent) 0%, transparent 68%);}
.sc-overlay .sc-modal[data-type=success]{--sc-glow:rgba(22,160,107,.20);}
.sc-overlay .sc-modal[data-type=error]{--sc-glow:rgba(217,48,75,.20);}
.sc-overlay .sc-modal[data-type=warning]{--sc-glow:rgba(216,155,22,.22);}
.sc-overlay .sc-modal[data-type=info]{--sc-glow:rgba(44,107,196,.20);}
.sc-overlay .sc-modal[data-type=confirm]{--sc-glow:rgba(30,110,71,.18);}
.sc-overlay .sc-modal[data-type=loading]{--sc-glow:rgba(44,107,196,.18);}
.sc-overlay .sc-body>*{position:relative;z-index:1;}

.sc-overlay .sc-icon{width:78px;height:78px;border-radius:50%;margin:2px auto 20px;display:flex;align-items:center;justify-content:center;position:relative;
  transform:scale(.4);opacity:0;animation:scPop .5s .05s cubic-bezier(.34,1.56,.5,1) forwards;}
.sc-overlay .sc-icon svg{width:40px;height:40px;position:relative;z-index:2;}
.sc-overlay .sc-modal[data-type=success] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-success-50) 100%);color:var(--sc-success);}
.sc-overlay .sc-modal[data-type=error] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-danger-50) 100%);color:var(--sc-danger);}
.sc-overlay .sc-modal[data-type=warning] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-warning-50) 100%);color:var(--sc-warning);}
.sc-overlay .sc-modal[data-type=info] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-info-50) 100%);color:var(--sc-info);}
.sc-overlay .sc-modal[data-type=confirm] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-brand-50) 100%);color:var(--sc-brand);}
.sc-overlay .sc-modal[data-type=loading] .sc-icon{background:radial-gradient(circle at 50% 35%,#fff 0%,var(--sc-info-50) 100%);color:var(--sc-info);}
@keyframes scPop{to{transform:none;opacity:1;}}
.sc-overlay .sc-icon::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid currentColor;opacity:.16;}
.sc-overlay .sc-icon::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 currentColor;opacity:.26;animation:scHalo 2s .5s ease-out infinite;z-index:0;}
.sc-overlay .sc-modal[data-type=loading] .sc-icon::before{animation:none;}
.sc-overlay .sc-modal[data-type=loading] .sc-icon{animation:none;transform:none;opacity:1;}
@keyframes scHalo{0%{box-shadow:0 0 0 0 currentColor;opacity:.26;}70%{box-shadow:0 0 0 18px currentColor;opacity:0;}100%{opacity:0;}}

.sc-overlay .sc-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--sc-text);}
.sc-overlay .sc-msg{font-size:13.5px;color:var(--sc-text-muted);line-height:1.55;margin:0 auto;max-width:330px;}
.sc-overlay .sc-msg b{color:var(--sc-text);font-weight:600;}
.sc-overlay .sc-detail{margin:16px auto 0;max-width:340px;text-align:left;background:var(--sc-hover);border:1px solid var(--sc-border);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--sc-text-muted);display:flex;gap:9px;align-items:flex-start;}
.sc-overlay .sc-detail svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--sc-text-faint);}
.sc-overlay .sc-detail code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--sc-danger);}

.sc-overlay .sc-foot{padding:22px 28px 26px;display:flex;gap:10px;}
.sc-overlay .sc-foot .sc-btn{flex:1;height:44px;font-size:13.5px;border-radius:11px;}
.sc-overlay .sc-foot.single{justify-content:center;}
.sc-overlay .sc-foot.single .sc-btn{flex:0 1 220px;}

/* Loading ring + progress */
.sc-overlay .sc-spinner{width:44px;height:44px;}
.sc-overlay .sc-spinner svg{width:44px;height:44px;animation:scSpin 1s linear infinite;}
.sc-overlay .sc-spinner circle{fill:none;stroke-width:5;stroke-linecap:round;}
.sc-overlay .sc-spinner .track{stroke:var(--sc-info-100);}
.sc-overlay .sc-spinner .head{stroke:var(--sc-info);stroke-dasharray:90;stroke-dashoffset:60;}
@keyframes scSpin{to{transform:rotate(360deg);}}
.sc-overlay .sc-progress{height:6px;border-radius:99px;background:var(--sc-info-50);margin:20px auto 2px;max-width:320px;overflow:hidden;}
.sc-overlay .sc-progress i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--sc-info),#5A93DE);animation:scBar 1.3s ease-in-out infinite;}
@keyframes scBar{0%{transform:translateX(-120%);}100%{transform:translateX(320%);}}

/* Animated draw for check/cross/bang */
.sc-overlay .dr{stroke-dasharray:60;stroke-dashoffset:60;animation:scDraw .5s .12s cubic-bezier(.6,.2,.2,1) forwards;}
.sc-overlay .dr2{animation-delay:.32s;}
@keyframes scDraw{to{stroke-dashoffset:0;}}

/* Success confetti */
.sc-overlay .sc-confetti{position:absolute;left:50%;top:52px;width:0;height:0;z-index:3;pointer-events:none;}
.sc-overlay .sc-confetti i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:scConf 1s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes scConf{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:0;}15%{opacity:1;}100%{transform:translate(var(--cx),var(--cy)) scale(1) rotate(var(--cr));opacity:0;}}

@media (prefers-reduced-motion:reduce){
  .sc-overlay .dr,.sc-overlay .dr2{animation:none;stroke-dashoffset:0;}
  .sc-overlay .sc-icon,.sc-overlay .sc-icon::before{animation:none;transform:none;opacity:1;}
  .sc-overlay .sc-confetti{display:none;}
}

/* ── Loader sederhana (spinner, LATAR TRANSPARAN — bukan hijau) ──
   Tampil saat proses simpan/edit, hilang otomatis begitu modal alert muncul. */
.sc-loader{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;background:transparent;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;}
.sc-loader.show{opacity:1;visibility:visible;}
.sc-loader:not(.show){pointer-events:none;}
.sc-loader-spin{width:52px;height:52px;border-radius:50%;background:#fff;border:4px solid rgba(15,42,31,.12);border-top-color:#E5B945;box-shadow:0 8px 24px rgba(15,42,31,.16);animation:scLoaderSpin .8s linear infinite;}
@keyframes scLoaderSpin{to{transform:rotate(360deg);}}

/* ── Toasts ── */
.sc-toasts{position:fixed;top:16px;right:16px;z-index:100070;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 32px);pointer-events:none;}
.sc-toasts .sc-toast{pointer-events:auto;background:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(15,42,31,.16),0 0 0 1px var(--sc-border);
  display:flex;gap:12px;padding:13px 14px;align-items:flex-start;position:relative;overflow:hidden;
  transform:translateX(120%);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.25,1),opacity .3s;}
.sc-toasts .sc-toast.show{transform:none;opacity:1;}
.sc-toasts .sc-toast.hide{transform:translateX(120%);opacity:0;}
.sc-toasts .sc-toast .t-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-toasts .sc-toast .t-ic svg{width:18px;height:18px;stroke-width:2.2;}
.sc-toasts .sc-toast .t-body{flex:1;min-width:0;padding-top:1px;}
.sc-toasts .sc-toast .t-title{font-size:13px;font-weight:700;color:var(--sc-text);letter-spacing:-.01em;}
.sc-toasts .sc-toast .t-msg{font-size:12px;color:var(--sc-text-muted);margin-top:2px;line-height:1.45;}
.sc-toasts .sc-toast .t-x{width:24px;height:24px;border:none;background:transparent;color:var(--sc-text-faint);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-toasts .sc-toast .t-x:hover{background:var(--sc-hover);color:var(--sc-text);}
.sc-toasts .sc-toast .t-x svg{width:14px;height:14px;}
.sc-toasts .sc-toast .t-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;}
.sc-toasts .sc-toast[data-type=success] .t-ic{background:var(--sc-success-50);color:var(--sc-success);}
.sc-toasts .sc-toast[data-type=success] .t-bar{background:var(--sc-success);}
.sc-toasts .sc-toast[data-type=error] .t-ic{background:var(--sc-danger-50);color:var(--sc-danger);}
.sc-toasts .sc-toast[data-type=error] .t-bar{background:var(--sc-danger);}
.sc-toasts .sc-toast[data-type=warning] .t-ic{background:var(--sc-warning-50);color:var(--sc-warning);}
.sc-toasts .sc-toast[data-type=warning] .t-bar{background:var(--sc-warning);}
.sc-toasts .sc-toast[data-type=info] .t-ic{background:var(--sc-info-50);color:var(--sc-info);}
.sc-toasts .sc-toast[data-type=info] .t-bar{background:var(--sc-info);}

@media (max-width:560px){
  .sc-toasts{left:16px;right:16px;width:auto;}
  .sc-overlay .sc-foot{flex-direction:column;}
}