/* Gaya perangkat UX global (toast, pencarian cepat Ctrl+K, keadaan kosong, skeleton). Pasangan dari js/ux-kit.js */
/* ── Toast ── */
.ux-toasts { position: fixed; top: 16px; right: 16px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ux-toast { --c: #6366f1; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px 15px; border-radius: 14px; pointer-events: auto; cursor: pointer; overflow: hidden;
  background: var(--bg2, var(--ca-card, #fff)); color: var(--text, var(--ca-text, #1f2937)); border: 1px solid var(--border, var(--ca-line, #e5e9f2)); border-left: 4px solid var(--c);
  box-shadow: 0 16px 38px -14px rgba(15,23,42,.45), 0 2px 6px rgba(15,23,42,.08); font-size: 13.5px; font-weight: 600; line-height: 1.4;
  animation: uxIn .38s cubic-bezier(.22,1,.36,1) backwards; transition: opacity .25s ease, transform .25s ease; }
.ux-toast.out { opacity: 0; transform: translateX(24px) scale(.97); }
.ux-toast > i { color: var(--c); font-size: 19px; line-height: 1.1; flex: none; }
.ux-toast-msg { white-space: pre-line; word-break: break-word; min-width: 0; }
.ux-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: .55; transform-origin: left; animation: uxBar linear forwards; }
.ux-ok { --c: #10b981; } .ux-err { --c: #ef4444; } .ux-warn { --c: #f59e0b; } .ux-info { --c: #6366f1; }
@keyframes uxIn { from { opacity: 0; transform: translateX(36px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes uxBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 576px) { .ux-toasts { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); right: 16px; left: 16px; width: auto; } }

/* ── Pencarian cepat ── */
.ux-pal { position: fixed; inset: 0; z-index: 99990; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ux-pal.show { display: flex; animation: moFade .18s ease backwards; }
.ux-pal-card { width: 100%; max-width: 560px; background: var(--bg2, var(--ca-card, #fff)); color: var(--text, var(--ca-text, #1f2937)); border: 1px solid rgba(99,102,241,.25); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -18px rgba(15,23,42,.6); animation: moPop .3s cubic-bezier(.22,1,.36,1) backwards; }
.ux-pal-in { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; padding: 18px 20px; border-bottom: 1px solid var(--border, var(--ca-line, #e5e9f2)); }
.ux-pal-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.ux-pal-it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; }
.ux-pal-it i { width: 22px; text-align: center; color: var(--primary, #6366f1); font-size: 16px; }
.ux-pal-it .l { flex: 1; min-width: 0; }
.ux-pal-it .g { font-size: 11.5px; font-weight: 600; color: var(--muted, var(--ca-muted, #6b7280)); }
.ux-pal-it.on { background: linear-gradient(90deg, rgba(99,102,241,.16), rgba(99,102,241,.05)); box-shadow: inset 3px 0 0 #6366f1; }
.ux-pal-none { padding: 26px; text-align: center; color: var(--muted, var(--ca-muted, #6b7280)); font-weight: 600; }
.ux-pal-ft { padding: 9px 16px; font-size: 11.5px; font-weight: 600; color: var(--muted, var(--ca-muted, #6b7280)); border-top: 1px solid var(--border, var(--ca-line, #e5e9f2)); background: rgba(99,102,241,.04); }
.sb-search { position: relative; }
.ux-kbd { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; cursor: pointer; color: var(--muted, var(--ca-muted, #6b7280)); border: 1px solid var(--border, var(--ca-line, #e5e9f2)); background: var(--bg3, #f1f4f9); }
@media (max-width: 900px), (pointer: coarse) { .ux-kbd { display: none; } }

/* ── Keadaan kosong ── */
td.ux-empty { text-align: center; padding: 34px 16px !important; color: var(--muted, var(--ca-muted, #6b7280)); font-weight: 600; }
.ux-empty-ic { display: block; width: 62px; height: 62px; line-height: 62px; margin: 0 auto 10px; border-radius: 50%; font-size: 28px; color: var(--primary, #6366f1);
  background: radial-gradient(circle at 30% 25%, rgba(99,102,241,.22), rgba(99,102,241,.07)); animation: uxFloat 3.2s ease-in-out infinite; }
@keyframes uxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Skeleton berkilau ── */
td.ux-loading { padding: 16px !important; }
.ux-skel-rows { display: grid; gap: 10px; }
.ux-skel { height: 16px; border-radius: 8px; background: linear-gradient(90deg, rgba(148,163,184,.16) 25%, rgba(148,163,184,.34) 37%, rgba(148,163,184,.16) 63%); background-size: 400% 100%; animation: uxShim 1.3s ease infinite; }
.ux-skel:nth-child(2) { width: 86%; } .ux-skel:nth-child(3) { width: 64%; }
td.ux-loading { font-size: 0; }
td.ux-loading .ux-skel-rows { font-size: 13px; }
@keyframes uxShim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) { .ux-toast, .ux-pal.show, .ux-pal-card, .ux-empty-ic, .ux-skel { animation: none !important; } .ux-toast-bar { display: none; } }

/* ── Dialog konfirmasi / isian ── */
.ux-dlg { position: fixed; inset: 0; z-index: 99995; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ux-dlg.show { display: flex; animation: moFade .18s ease backwards; }
.ux-dlg-card { --c: #6366f1; width: 100%; max-width: 400px; text-align: center; padding: 26px 24px 20px; border-radius: 20px; background: var(--bg2, var(--ca-card, #fff)); color: var(--text, var(--ca-text, #1f2937));
  border: 1px solid rgba(99,102,241,.22); box-shadow: 0 30px 70px -18px rgba(15,23,42,.6); animation: moPop .34s cubic-bezier(.22,1,.36,1) backwards; position: relative; overflow: hidden; }
.ux-dlg-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #0ea5e9); }
.ux-dlg-card.danger { --c: #ef4444; border-color: rgba(239,68,68,.28); }
.ux-dlg-card.danger::before { background: linear-gradient(90deg, #f97316, #ef4444); }
.ux-dlg-ic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); }
.ux-dlg-msg { font-size: 15px; font-weight: 600; line-height: 1.5; white-space: pre-line; word-break: break-word; margin-bottom: 18px; }
.ux-dlg-in { width: 100%; margin: -6px 0 18px; padding: 11px 14px; border-radius: 11px; font: inherit; font-weight: 500; color: inherit; background: var(--bg3, #f1f4f9); border: 1px solid var(--border, var(--ca-line, #e5e9f2)); outline: 0; }
.ux-dlg-in:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.ux-dlg-btns { display: flex; gap: 10px; }
.ux-dlg-btns button { flex: 1; padding: 11px 14px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
@media (hover: hover) { .ux-dlg-btns button:hover { transform: translateY(-1px); filter: brightness(1.05); } }
.ux-dlg-btns button:active { transform: scale(.97); }
.ux-dlg-no { background: var(--bg3, #f1f4f9); color: var(--text, var(--ca-text, #1f2937)); border-color: var(--border, var(--ca-line, #e5e9f2)) !important; }
.ux-dlg-ok { color: #fff; background-image: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 8px 18px -8px rgba(79,70,229,.7); }
.ux-dlg-card.danger .ux-dlg-ok { background-image: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 8px 18px -8px rgba(220,38,38,.7); }
@media (max-width: 576px) { .ux-dlg { align-items: flex-end; } .ux-dlg-card { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .ux-dlg.show, .ux-dlg-card { animation: none !important; } }

/* portal pelanggan: bilah menu bawah menutupi pojok bawah, jadi toast di HP tampil di atas */
@media (max-width: 576px) { body:has(.ca-bnav) .ux-toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top)); } }

/* toast bawaan halaman yang sudah dipindah ke toast modern */
.ux-hidden { display: none !important; }

/* ── Filter / ringkasan / keterangan yang bisa dilipat (hanya di HP) ── */
.ux-fold-btn { display: none; }
@media (max-width: 768px) {
  .ux-fold-btn { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; grid-column: 1 / -1; width: 100%; margin: 0; padding: 10px 14px; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; color: var(--text, var(--ca-text, #1f2937)); background: linear-gradient(180deg, rgba(99,102,241,.1), rgba(99,102,241,.04));
    border: 1px solid rgba(99,102,241,.25); transition: background .2s ease, transform .15s ease; }
  .ux-fold-btn:active { transform: scale(.985); }
  .ux-fold-btn > i:first-child { color: var(--primary, #6366f1); font-size: 16px; }
  .ux-fold-lb { flex: 1; }
  .ux-fold-bd { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); }
  .ux-fold-ch { transition: transform .25s ease; font-size: 13px; color: var(--muted, var(--ca-muted, #6b7280)); }
  .ux-fold-closed > .ux-fold-ch, .ux-fold-closed > .ux-fold-btn .ux-fold-ch { transform: rotate(-90deg); }
  .ux-fold-closed > :not(.ux-fold-btn) { display: none !important; }
  .ux-fold-closed { min-height: 0 !important; gap: 0 !important; }
  .ux-fold:not(.ux-fold-closed) > .ux-fold-btn { margin-bottom: 6px; }
}