/* ============================================================================
   Repark UI Kit — ONE global (desktop + mobile) set of primitives every module
   can adopt: buttons, status pills, toasts, a styled confirm dialog, skeletons,
   empty states and a polished table. Namespaced `ui-` to avoid colliding with the
   existing mobile-only rk-* kit or any per-module classes. Additive + opt-in.
   JS helpers (uiToast / uiConfirm / uiStatusPill / uiEmpty) live in js/ui-kit.js.
   ========================================================================== */
:root{
  --ui-ink:#0f172a; --ui-muted:#64748b; --ui-line:#e2e8f0; --ui-surface:#fff;
  --ui-teal:#075985; --ui-sky:#0ea5e9;
  --ui-ok:#16a34a; --ui-ok-bg:#ecfdf5; --ui-warn:#b45309; --ui-warn-bg:#fffbeb;
  --ui-bad:#dc2626; --ui-bad-bg:#fef2f2; --ui-info:#2563eb; --ui-info-bg:#eff6ff;
  --ui-violet:#7c3aed; --ui-violet-bg:#f5f3ff; --ui-slate:#475569; --ui-slate-bg:#f1f5f9;
}

/* ── Buttons — Primary / Secondary / Ghost / Danger ──────────────────────── */
.ui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:11px; font-family:inherit; font-weight:800; font-size:13px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s,box-shadow .15s,transform .04s; }
.ui-btn:active{ transform:translateY(1px); }
.ui-btn:focus-visible{ outline:2px solid var(--ui-sky); outline-offset:2px; }
.ui-btn--primary{ background:linear-gradient(135deg,var(--ui-sky),var(--ui-teal)); color:#fff; box-shadow:0 8px 18px rgba(7,89,133,.22); }
.ui-btn--primary:hover{ filter:brightness(1.05); }
.ui-btn--secondary{ background:#fff; border-color:var(--ui-line); color:var(--ui-ink); }
.ui-btn--secondary:hover{ background:#f8fafc; border-color:#cbd5e1; }
.ui-btn--ghost{ background:transparent; color:var(--ui-teal); }
.ui-btn--ghost:hover{ background:#eff6ff; }
.ui-btn--danger{ background:var(--ui-bad-bg); color:var(--ui-bad); border-color:#fbcfcf; }
.ui-btn--danger:hover{ background:#fee2e2; }
.ui-btn--sm{ height:32px; padding:0 12px; font-size:12px; border-radius:9px; }

/* ── Status pills — one semantic set ─────────────────────────────────────── */
.ui-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; text-transform:capitalize; }
.ui-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ui-pill--warn{ background:var(--ui-warn-bg); color:var(--ui-warn); }
.ui-pill--info{ background:var(--ui-info-bg); color:var(--ui-info); }
.ui-pill--ok{ background:var(--ui-ok-bg); color:var(--ui-ok); }
.ui-pill--bad{ background:var(--ui-bad-bg); color:var(--ui-bad); }
.ui-pill--teal{ background:#e0f2fe; color:var(--ui-teal); }
.ui-pill--violet{ background:var(--ui-violet-bg); color:var(--ui-violet); }
.ui-pill--slate{ background:var(--ui-slate-bg); color:var(--ui-slate); }
.ui-pill--slate::before{ opacity:.5; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.ui-toasts{ position:fixed; right:20px; bottom:20px; z-index:4000; display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 32px)); }
.ui-toast{ display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid var(--ui-line); border-left-width:4px; border-radius:12px; padding:12px 14px; box-shadow:0 14px 34px rgba(15,37,64,.14);
  --rise:8px; animation:rms-rise var(--t-base) var(--e-out); }
.ui-toast.is-leaving{ animation:ui-toast-out var(--t-base) var(--e-out) forwards; }
@keyframes ui-toast-out{ to{ transform:translateX(12px); opacity:0 } }
.ui-toast.ok{ border-left-color:var(--ui-ok); } .ui-toast.bad{ border-left-color:var(--ui-bad); }
.ui-toast.info{ border-left-color:var(--ui-info); } .ui-toast.warn{ border-left-color:var(--ui-warn); }
.ui-toast-ic{ flex:0 0 auto; margin-top:1px; }
.ui-toast-main{ flex:1; min-width:0; }
.ui-toast-title{ font-weight:800; font-size:13.5px; color:var(--ui-ink); }
.ui-toast-msg{ font-size:12.5px; color:var(--ui-muted); margin-top:1px; word-wrap:break-word; }
.ui-toast-act{ background:none; border:0; padding:0; margin-top:4px; font-size:12.5px; font-weight:800; color:var(--ui-teal); cursor:pointer; font-family:inherit; }
.ui-toast-x{ flex:0 0 auto; background:none; border:0; cursor:pointer; color:#94a3b8; font-size:15px; font-weight:800; line-height:1; padding:0 2px; }
@media (max-width:560px){ .ui-toasts{ right:12px; left:12px; bottom:12px; max-width:none; } }

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.ui-modal-ov{ position:fixed; inset:0; z-index:4100; display:flex; align-items:center; justify-content:center; padding:20px; }
.ui-modal-ov[hidden]{ display:none; }
.ui-modal-bd{ position:absolute; inset:0; background:rgba(8,20,35,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.ui-modal{ position:relative; width:100%; max-width:400px; background:#fff; border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.4); padding:22px; --rise:8px; animation:rms-rise var(--t-base) var(--e-out); }
.ui-modal-h{ font-size:17px; font-weight:850; color:var(--ui-ink); }
.ui-modal-b{ font-size:13.5px; color:var(--ui-muted); margin-top:8px; line-height:1.55; }
.ui-modal-f{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
/* uiPrompt fields. style.css sets a global `input{min-width:170px}`, which overflows
   a 400px modal — min-width:0 + width:100% is what keeps these inside it. */
.ui-prompt-f{ display:block; margin:0 0 12px; }
.ui-prompt-f>span{ display:block; font-size:12.5px; font-weight:700; color:var(--ui-ink); margin-bottom:5px; }
.ui-prompt-f>input{ display:block; width:100%; min-width:0; box-sizing:border-box; padding:9px 11px; font-size:14px; font-family:inherit; color:var(--ui-ink); background:#fff; border:1px solid #cbd5e1; border-radius:9px; }
.ui-prompt-f>input:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ui-prompt-err{ font-size:12.5px; font-weight:650; color:#b91c1c; margin-top:2px; }

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.ui-skeleton{ background:var(--rms-skel-fill); background-size:400% 100%; animation:rms-shimmer var(--t-shimmer) var(--e-in-out) infinite; border-radius:7px; color:transparent!important; }
.ui-skel-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; background:#fff; border:1px solid var(--ui-line); border-radius:11px; margin-bottom:9px; }
.ui-skel-av{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ui-empty{ text-align:center; padding:34px 20px; }
.ui-empty-ic{ width:50px; height:50px; border-radius:14px; background:#e0f2fe; color:var(--ui-teal); display:inline-flex; align-items:center; justify-content:center; }
.ui-empty-title{ font-size:15.5px; font-weight:850; color:var(--ui-ink); margin-top:13px; }
.ui-empty-sub{ font-size:13px; color:var(--ui-muted); margin-top:5px; max-width:42ch; margin-left:auto; margin-right:auto; }
.ui-empty-act{ margin-top:16px; }

/* ── Table polish (opt-in) ───────────────────────────────────────────────── */
.ui-table-wrap{ overflow-x:auto; border:1px solid var(--ui-line); border-radius:12px; background:#fff; }
table.ui-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.ui-table thead th{ position:sticky; top:0; z-index:1; background:#f4f9fd; text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ui-muted); padding:11px 14px; border-bottom:1px solid var(--ui-line); }
table.ui-table th.num, table.ui-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.ui-table tbody td{ padding:12px 14px; border-bottom:1px solid #eef3f9; }
table.ui-table tbody tr:nth-child(even){ background:#fbfdff; }
table.ui-table tbody tr:hover{ background:#e0f2fe; }
table.ui-table tbody tr:last-child td{ border-bottom:0; }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
html[data-theme="dark"]{ --ui-ink:#e2e8f0; --ui-muted:#8aa0c0; --ui-line:rgba(255,255,255,.1); --ui-surface:#0f1e2e; }
html[data-theme="dark"] .ui-btn--secondary{ background:rgba(255,255,255,.06); color:#e2e8f0; }
html[data-theme="dark"] .ui-toast, html[data-theme="dark"] .ui-modal{ background:#0f1e2e; border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .ui-toast-title, html[data-theme="dark"] .ui-modal-h{ color:#e2e8f0; }
html[data-theme="dark"] .ui-prompt-f>span{ color:#e2e8f0; }
html[data-theme="dark"] .ui-prompt-f>input{ background:#132437; border-color:rgba(255,255,255,.16); color:#e2e8f0; }
html[data-theme="dark"] .ui-prompt-err{ color:#fca5a5; }
html[data-theme="dark"] .ui-table-wrap, html[data-theme="dark"] table.ui-table thead th{ background:#0f1e2e; }
html[data-theme="dark"] table.ui-table tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
html[data-theme="dark"] table.ui-table tbody tr:hover{ background:rgba(14,165,233,.12); }
html[data-theme="dark"] .ui-empty-ic{ background:rgba(14,165,233,.18); }

@media (prefers-reduced-motion:reduce){ .ui-skeleton,.ui-toast,.ui-modal{ animation:none!important; } }

/* one-time secret reveal (uiReveal) — monospace, selectable, scrollable */
.ui-codes{ margin:10px 0 0; padding:12px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.75; color:#0f172a;
  white-space:pre-wrap; word-break:break-word; -webkit-user-select:all; user-select:all; max-height:240px; overflow:auto; }
html[data-theme="dark"] .ui-codes{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#e2e8f0; }

/* ── Auto empty-state injected for any ui-table that renders with no rows ──── */
.ui-table-empty{ border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
html[data-theme="dark"] .ui-table-empty{ background:#0f1e2e; border-color:rgba(255,255,255,.1); }

/* ── Row stagger: the eye follows a list in instead of it snapping into place.
      Deliberately small + short, and delays cap at 9 rows, so a 60s auto-refresh
      reads as a settle rather than a re-animation. Off entirely for reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  table.ui-table tbody tr{ --rise:3px; animation:rms-rise var(--t-base) var(--e-out) backwards; }
  table.ui-table tbody tr:nth-child(1){ animation-delay:.01s }
  table.ui-table tbody tr:nth-child(2){ animation-delay:.03s }
  table.ui-table tbody tr:nth-child(3){ animation-delay:.05s }
  table.ui-table tbody tr:nth-child(4){ animation-delay:.07s }
  table.ui-table tbody tr:nth-child(5){ animation-delay:.09s }
  table.ui-table tbody tr:nth-child(6){ animation-delay:.11s }
  table.ui-table tbody tr:nth-child(7){ animation-delay:.13s }
  table.ui-table tbody tr:nth-child(n+8){ animation-delay:.15s }
}