/* VEORA ONE 29.4.0 — popup, toast, dan alert gaya Flowbite (perilaku seperti Bootstrap).
   Sebelumnya gaya ini (veora-ds-v26.css) hanya dimuat untuk halaman sebelum login, sehingga di dalam aplikasi
   dialog VeoraUI tampil tanpa gaya (tombol polos bawaan browser). Berkas ini dimuat paling akhir di semua halaman
   aplikasi, memakai token --fb-* (ikut mode gelap lewat body[data-tailadmin-theme="dark"]), dan memuat:
   - dialog   : .veora-modal-layer.v-modal  (VeoraUI.modal / confirm / prompt / form / success / error / warning / info)
   - toast    : .veora-toast-stack.v-toasts (VeoraUI.toast)
   - alert    : .v-alert                    (VeoraUI.alert di dalam halaman)
   Token cadangan disediakan agar tampil benar walau token --fb-* belum dimuat. */

/* ---------- token cadangan ---------- */
html body{
  --pp-surface:var(--fb-surface,#fff);--pp-surface-2:var(--fb-surface-2,#f9fafb);--pp-hover:var(--fb-hover,#f3f4f6);
  --pp-border:var(--fb-border,#e5e7eb);--pp-border-2:var(--fb-border-2,#d1d5db);
  --pp-text:var(--fb-text,#111827);--pp-text-2:var(--fb-text-2,#6b7280);--pp-text-3:var(--fb-text-3,#374151);
  --pp-primary:var(--fb-primary,#1d4ed8);--pp-primary-hover:var(--fb-primary-hover,#1e40af);--pp-ring:var(--fb-ring,#bfdbfe);
  --pp-ok-bg:var(--fb-ok-bg,#def7ec);--pp-ok-fg:var(--fb-ok-fg,#03543f);
  --pp-err-bg:var(--fb-err-bg,#fde8e8);--pp-err-fg:var(--fb-err-fg,#9b1c1c);
  --pp-warn-bg:var(--fb-warn-bg,#fdf6b2);--pp-warn-fg:var(--fb-warn-fg,#723b13);
  --pp-info-bg:var(--fb-info-bg,#e1effe);--pp-info-fg:var(--fb-info-fg,#1e429f);
  --pp-danger:#c81e1e;--pp-danger-hover:#9b1c1c;
  --pp-font:var(--fb-font,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  --pp-mono:var(--fb-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
}
body[data-tailadmin-theme="dark"]{--pp-danger:#e02424;--pp-danger-hover:#c81e1e}

/* kunci scroll saat dialog terbuka (seperti .modal-open pada Bootstrap) */
html body.veora-dialog-open{overflow:hidden}

/* =====================================================================
   DIALOG
   ===================================================================== */
html body .veora-modal-layer.v-modal{
  position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;
  padding:1rem;margin:0;background:rgba(17,24,39,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  overflow-y:auto;opacity:0;transition:opacity .15s ease-out;
}
html body .veora-modal-layer.v-modal.is-open{opacity:1}
html body .veora-modal-layer.v-modal.is-leaving{opacity:0;pointer-events:none}

html body .v-modal__card{
  position:relative;box-sizing:border-box;width:min(28rem,100%);max-height:calc(100dvh - 2rem);overflow:auto;margin:auto;
  background:var(--pp-surface);color:var(--pp-text);border:1px solid var(--pp-border);border-radius:.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.35);padding:1.25rem 1.5rem 1.25rem;font-family:var(--pp-font);
  transform:translateY(-14px) scale(.97);opacity:0;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease-out;outline:none;
}
html body .v-modal__card--wide{width:min(34rem,100%)}
html body .veora-modal-layer.v-modal.is-open .v-modal__card{transform:none;opacity:1}
html body .veora-modal-layer.v-modal.is-leaving .v-modal__card{transform:translateY(-8px) scale(.98);opacity:0}

/* kepala: ikon nada + judul + tombol tutup, seperti .modal-header */
html body .v-modal__head{display:flex;align-items:center;gap:.75rem;padding:0 0 1rem;margin:0 0 1rem;border-bottom:1px solid var(--pp-border)}
html body .v-modal__mark{
  flex:none;width:2.5rem;height:2.5rem;border-radius:999px;display:grid;place-items:center;
  background:var(--pp-info-bg);color:var(--pp-info-fg);margin:0;
}
html body .v-modal__mark svg{width:1.5rem;height:1.5rem;display:block}
html body .v-modal__card[data-tone="success"] .v-modal__mark{background:var(--pp-ok-bg);color:var(--pp-ok-fg)}
html body .v-modal__card[data-tone="danger"] .v-modal__mark{background:var(--pp-err-bg);color:var(--pp-err-fg)}
html body .v-modal__card[data-tone="warning"] .v-modal__mark{background:var(--pp-warn-bg);color:var(--pp-warn-fg)}
html body .v-modal__card[data-tone="pending"] .v-modal__mark{background:var(--pp-info-bg);color:var(--pp-info-fg)}
html body .v-modal__head h2{
  flex:1 1 auto;min-width:0;margin:0;padding:0;font:600 1.125rem/1.35 var(--pp-font);letter-spacing:-.005em;color:var(--pp-text);
  font-stretch:normal;text-transform:none;overflow-wrap:anywhere;
}
html body .v-modal__x{
  flex:none;width:2rem;height:2rem;border:0;border-radius:.5rem;background:transparent;color:var(--pp-text-2);
  font:400 1.5rem/1 var(--pp-font);cursor:pointer;display:grid;place-items:center;padding:0;margin:0 -.25rem 0 0;transition:background-color .12s,color .12s;
}
html body .v-modal__x:hover{background:var(--pp-hover);color:var(--pp-text)}
html body .v-modal__x svg{width:1.125rem;height:1.125rem;display:block}

/* isi */
html body .v-modal__body{font:400 .9375rem/1.6 var(--pp-font);color:var(--pp-text-3)}
html body .v-modal__body>p{margin:0 0 .75rem;color:var(--pp-text-3)}
html body .v-modal__body>p:last-child{margin-bottom:0}
html body .v-modal__body:empty{display:none}
html body .v-modal__detail{
  margin-top:.75rem;padding:.625rem .75rem;background:var(--pp-surface-2);border:1px solid var(--pp-border);border-radius:.5rem;
  font:500 .875rem/1.5 var(--pp-font);font-variant-numeric:tabular-nums;color:var(--pp-text-2);overflow-wrap:anywhere;
}

/* kolom isian (VeoraUI.prompt / VeoraUI.form) */
html body .v-modal__form{display:grid;gap:.875rem;margin:0}
html body .v-modal__field{display:grid;gap:.375rem;margin:0}
html body .v-modal__field label{font:500 .875rem/1.4 var(--pp-font);color:var(--pp-text-3)}
html body .v-modal__opt{font-weight:400;color:var(--pp-text-2)}
html body .v-modal__field input,html body .v-modal__field textarea,html body .v-modal__field select{
  box-sizing:border-box;width:100%;min-height:2.625rem;padding:.625rem .75rem;border:1px solid var(--pp-border-2);border-radius:.5rem;
  background:var(--pp-surface-2);color:var(--pp-text);font:400 .9375rem/1.4 var(--pp-font);transition:border-color .12s,box-shadow .12s;
}
html body .v-modal__field textarea{resize:vertical;min-height:5rem}
html body .v-modal__field input::placeholder,html body .v-modal__field textarea::placeholder{color:var(--fb-gray-400,#9ca3af)}
html body .v-modal__field input:focus,html body .v-modal__field textarea:focus,html body .v-modal__field select:focus{
  outline:none;border-color:var(--pp-primary);box-shadow:0 0 0 4px var(--pp-ring);
}
html body .v-modal__field [aria-invalid="true"]{border-color:var(--pp-danger)}
html body .v-modal__field [aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--pp-err-bg)}
html body .v-modal__hint{font:400 .8125rem/1.4 var(--pp-font);color:var(--pp-text-2)}
html body .v-modal__error{font:500 .8125rem/1.4 var(--pp-font);color:var(--pp-err-fg)}
html body .v-modal__error[hidden]{display:none}

/* kaki: tombol, seperti .modal-footer */
html body .v-modal__actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0;padding:1rem 0 0;border-top:1px solid var(--pp-border)}
html body .v-modal__actions button{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;min-height:2.5rem;padding:.5rem 1.125rem;border-radius:.5rem;
  border:1px solid var(--pp-border-2);background:var(--pp-surface);color:var(--pp-text-3);
  font:600 .875rem/1.25 var(--pp-font);cursor:pointer;transition:background-color .12s,border-color .12s,box-shadow .12s;
}
html body .v-modal__actions button:hover{background:var(--pp-hover);color:var(--pp-text)}
html body .v-modal__actions button:focus-visible,html body .v-modal__x:focus-visible{outline:none;box-shadow:0 0 0 4px var(--pp-ring)}
html body .v-modal__actions button.is-primary{background:var(--pp-primary);border-color:var(--pp-primary);color:#fff}
html body .v-modal__actions button.is-primary:hover{background:var(--pp-primary-hover);border-color:var(--pp-primary-hover);color:#fff}
html body .v-modal__actions button.is-danger{background:var(--pp-danger);border-color:var(--pp-danger);color:#fff}
html body .v-modal__actions button.is-danger:hover{background:var(--pp-danger-hover);border-color:var(--pp-danger-hover);color:#fff}
html body .v-modal__actions button.is-danger:focus-visible{box-shadow:0 0 0 4px var(--pp-err-bg)}
html body .v-modal__actions button:disabled{opacity:.6;cursor:not-allowed}

/* ponsel: bottom sheet, tombol selebar layar dengan aksi utama di atas */
@media (max-width:600px){
  html body .veora-modal-layer.v-modal{align-items:flex-end;padding:0}
  html body .v-modal__card::before{content:"";display:block;width:2.5rem;height:.3125rem;margin:0 auto .875rem;border-radius:999px;background:var(--pp-border-2)}
  html body .v-modal__card,html body .v-modal__card--wide{
    width:100%;max-height:calc(100dvh - 1rem);border-radius:1rem 1rem 0 0;border-bottom:0;margin:0;
    padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateY(24px);
  }
  html body .v-modal__actions{flex-direction:column-reverse}
  html body .v-modal__actions button{width:100%;min-height:2.75rem}
  html body .v-modal__field input,html body .v-modal__field textarea,html body .v-modal__field select{font-size:1rem} /* cegah zoom otomatis iOS */
}

/* =====================================================================
   TOAST
   ===================================================================== */
html body .veora-toast-stack.v-toasts{
  position:fixed;top:1rem;right:1rem;left:auto;bottom:auto;z-index:9500;display:flex;flex-direction:column;gap:.5rem;
  width:min(24rem,calc(100vw - 2rem));margin:0;padding:0;pointer-events:none;
}
html body .veora-toast.v-toast{
  pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.75rem;
  box-sizing:border-box;width:100%;padding:.875rem 1rem;margin:0;background:var(--pp-surface);color:var(--pp-text);
  border:1px solid var(--pp-border);border-left-width:4px;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.18),0 4px 6px -4px rgba(0,0,0,.18);
  font-family:var(--pp-font);opacity:1;transform:none;animation:vpp-toast-in .22s cubic-bezier(.2,.8,.2,1);
}
html body .veora-toast.v-toast[data-tone="success"]{border-left-color:#0e9f6e}
html body .veora-toast.v-toast[data-tone="danger"]{border-left-color:var(--pp-danger)}
html body .veora-toast.v-toast[data-tone="warning"]{border-left-color:#c27803}
html body .veora-toast.v-toast[data-tone="info"],html body .veora-toast.v-toast[data-tone="pending"]{border-left-color:var(--pp-primary)}
html body .veora-toast.v-toast.is-leaving{opacity:0;transform:translateX(16px);transition:opacity .2s,transform .2s}
/* selector ditulis lebih spesifik agar mengalahkan aturan lama di veora-ds-v26.css (warna ikon info sebelumnya tertimpa) */
html body .veora-toast.v-toast .v-toast__mark{width:1.875rem;height:1.875rem;border-radius:999px;display:grid;place-items:center;margin:0;background:var(--pp-info-bg);color:var(--pp-info-fg)}
html body .veora-toast.v-toast .v-toast__mark svg{width:1.125rem;height:1.125rem;display:block}
html body .veora-toast.v-toast .v-toast__mark .v-spin{width:.9375rem;height:.9375rem}
html body .veora-toast.v-toast[data-tone="success"] .v-toast__mark{background:var(--pp-ok-bg);color:var(--pp-ok-fg)}
html body .veora-toast.v-toast[data-tone="danger"] .v-toast__mark{background:var(--pp-err-bg);color:var(--pp-err-fg)}
html body .veora-toast.v-toast[data-tone="warning"] .v-toast__mark{background:var(--pp-warn-bg);color:var(--pp-warn-fg)}
html body .veora-toast.v-toast strong{display:block;font:600 .9375rem/1.35 var(--pp-font);color:var(--pp-text)}
html body .veora-toast.v-toast p{margin:.125rem 0 0;font:400 .875rem/1.45 var(--pp-font);color:var(--pp-text-2);overflow-wrap:anywhere}
html body .veora-toast.v-toast button.v-toast__close{
  width:1.75rem;height:1.75rem;min-height:0;margin:-.25rem -.375rem 0 0;padding:0;border:0;border-radius:.375rem;background:transparent;
  color:var(--pp-text-2);font:400 1.25rem/1 var(--pp-font);cursor:pointer;display:grid;place-items:center;
}
html body .veora-toast.v-toast button.v-toast__close:hover{background:var(--pp-hover);color:var(--pp-text)}
html body .veora-toast.v-toast button.v-toast__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pp-ring)}
html body .veora-toast.v-toast button.v-toast__close svg{width:1rem;height:1rem;display:block}
@keyframes vpp-toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  html body .veora-toast-stack.v-toasts{top:max(.75rem,env(safe-area-inset-top,0px));left:.75rem;right:.75rem;width:auto}
}

/* =====================================================================
   ALERT di dalam halaman (VeoraUI.alert) — seperti .alert .alert-dismissible
   ===================================================================== */
html body .v-alert{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.75rem;box-sizing:border-box;margin:0 0 1rem;padding:.875rem 1rem;
  border:1px solid var(--pp-info-fg);border-color:color-mix(in srgb,var(--pp-info-fg) 28%,transparent);border-radius:.5rem;
  background:var(--pp-info-bg);color:var(--pp-info-fg);font:400 .875rem/1.5 var(--pp-font);
}
html body .v-alert:has(.v-alert__close){grid-template-columns:auto 1fr auto}
html body .v-alert[hidden]{display:none}
html body .v-alert[data-enter]{animation:vpp-alert-in .2s ease-out}
html body .v-alert[data-tone="success"]{background:var(--pp-ok-bg);color:var(--pp-ok-fg);border-color:color-mix(in srgb,var(--pp-ok-fg) 28%,transparent)}
html body .v-alert[data-tone="danger"]{background:var(--pp-err-bg);color:var(--pp-err-fg);border-color:color-mix(in srgb,var(--pp-err-fg) 28%,transparent)}
html body .v-alert[data-tone="warning"]{background:var(--pp-warn-bg);color:var(--pp-warn-fg);border-color:color-mix(in srgb,var(--pp-warn-fg) 28%,transparent)}
html body .v-alert__mark{width:1.25rem;height:1.25rem;display:grid;place-items:center;color:inherit;margin-top:.125rem}
html body .v-alert__mark svg{width:1.25rem;height:1.25rem;display:block}
html body .v-alert__mark .v-spin{width:1rem;height:1rem}
html body .v-alert__body>strong{display:block;font-weight:600;color:inherit}
html body .v-alert__body p{margin:.125rem 0 0;color:inherit;opacity:.92}
html body .v-alert__body a{color:inherit;font-weight:600;text-decoration:underline}
html body .v-alert__close{
  width:1.75rem;height:1.75rem;margin:-.25rem -.375rem 0 0;padding:0;border:0;border-radius:.375rem;background:transparent;
  color:inherit;opacity:.7;font:400 1.25rem/1 var(--pp-font);cursor:pointer;display:grid;place-items:center;
}
html body .v-alert__close:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
html body .v-alert__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pp-ring)}
html body .v-alert__close svg{width:1rem;height:1rem;display:block}
@keyframes vpp-alert-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ikon proses (VeoraUI.toast(..., 'pending') dan tampilan memproses) */
html body .v-spin{display:inline-block;width:1.125rem;height:1.125rem;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:vpp-spin .75s linear infinite}
@keyframes vpp-spin{to{transform:rotate(360deg)}}

/* hormati preferensi kurangi gerak (sistem dan pengaturan aplikasi) */
@media (prefers-reduced-motion:reduce){
  html body .veora-modal-layer.v-modal,html body .v-modal__card,html body .veora-toast.v-toast,html body .v-alert[data-enter],html body .v-spin{transition:none;animation:none}
}
html body[data-reduced-motion="true"] .veora-modal-layer.v-modal,html body[data-reduced-motion="true"] .v-modal__card,
html body[data-reduced-motion="true"] .veora-toast.v-toast,html body[data-reduced-motion="true"] .v-alert[data-enter]{transition:none;animation:none}