/* Kapasivo UX layer: skeletons, toasts, offline banner, draft notice. */
:root{--kx-sk:#e9ecf2;--kx-sk-hi:#f5f7fa;--kx-ink:#111827;--kx-ok:#12663f;--kx-bad:#b42318;--kx-warn:#a15c00}

/* Skeleton blocks */
.kx-sk{position:relative;overflow:hidden;background:var(--kx-sk);border-radius:8px}
.kx-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--kx-sk-hi),transparent);animation:kx-shimmer 1.3s infinite}
@keyframes kx-shimmer{100%{transform:translateX(100%)}}
.kx-sk-line{height:12px;margin:10px 0}
.kx-sk-title{height:18px;width:55%;margin:4px 0 12px}
.kx-sk-card{background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:18px 20px;margin:0 0 14px}
.kx-sk-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.kx-sk-pill{height:26px;width:64px;border-radius:999px}
.kx-sk-bar{height:8px;border-radius:999px;margin-top:14px}

/* Page-level skeleton shown while the next page loads */
.kx-page-loading > :not(.topbar):not(.kx-page-skeleton){display:none!important}
.kx-page-skeleton{display:none}
.kx-page-loading .kx-page-skeleton{display:block}
.kx-slow{margin:6px 0 14px;color:#6b7280;font-size:14px}

/* Busy buttons */
.kx-busy{opacity:.75;cursor:progress!important;pointer-events:none}
.kx-busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kx-spin .7s linear infinite}
@keyframes kx-spin{to{transform:rotate(360deg)}}

/* Optimistic state on a card/section */
.kx-pending{opacity:.55;transition:opacity .2s}
.kx-done-flash{animation:kx-flash 1.2s ease}
@keyframes kx-flash{0%{box-shadow:0 0 0 3px rgba(18,102,63,.35)}100%{box-shadow:0 0 0 0 rgba(18,102,63,0)}}

/* Toasts */
#kx-toasts{position:fixed;right:16px;bottom:16px;z-index:10050;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px))}
.kx-toast{background:#111827;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.22);font-size:14px;line-height:1.4;display:flex;gap:12px;align-items:flex-start;animation:kx-in .18s ease-out}
.kx-toast.ok{background:var(--kx-ok)}
.kx-toast.bad{background:var(--kx-bad)}
.kx-toast.warn{background:var(--kx-warn)}
.kx-toast button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:5px 10px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.kx-toast .kx-x{background:transparent;padding:0 2px;margin-left:auto;font-size:18px;line-height:1;opacity:.8}
@keyframes kx-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* Offline banner */
#kx-offline{display:none;position:fixed;left:0;right:0;top:0;z-index:10040;background:var(--kx-warn);color:#fff;text-align:center;padding:8px 16px;font-size:14px;font-weight:600}
body.kx-is-offline #kx-offline{display:block}

/* Restored-draft notice inside a form */
.kx-draft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#eef4ff;border:1px solid #c8d7ff;color:#1e3a8a;border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:14px}
.kx-draft button{background:transparent;border:0;color:#1d4ed8;font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.kx-saved-hint{font-size:12px;color:#6b7280;margin-left:8px}

/* Friendly field error */
.kx-field-error{color:var(--kx-bad);font-size:13px;margin-top:4px}

@media (prefers-reduced-motion:reduce){.kx-sk::after,.kx-busy::before,.kx-toast,.kx-done-flash{animation:none}}

/* Upload drop zone and progress (Documents page) */
.kx-drop{border:2px dashed #cfd4de;border-radius:14px;padding:22px;text-align:center;background:#fafbfc;cursor:pointer;transition:border-color .15s,background .15s}
.kx-drop.over{border-color:#6657e8;background:#f3f1ff}
.kx-drop strong{display:block;margin-bottom:4px}
.kx-drop .kx-file{margin-top:8px;font-weight:700;color:#381173;word-break:break-all}
.kx-progress{height:8px;border-radius:999px;background:#e9ecf2;overflow:hidden;margin-top:10px}
.kx-progress span{display:block;height:100%;width:0;background:#6657e8;transition:width .2s}
.kx-upload-status{margin-top:8px;font-size:14px;color:#374151}
/* Login helpers */
.kx-pw{position:relative}
.kx-pw input{padding-right:64px}
.kx-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#5b5bd6;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 8px;width:auto}
.kx-caps{display:none;color:#a15c00;font-size:13px;font-weight:600}
.kx-caps.on{display:block}
/* Highlight fields the server said were missing */
.kx-missing,.kx-missing input,.kx-missing textarea{border-color:#b42318!important;box-shadow:0 0 0 3px rgba(180,35,24,.12)!important}