/* Aguken minimal UI kit - from the ETL agent dashboard (tools/data_prep_pipelines/etl_agent/static).
   Neutral greys, one accent, hairline borders, no gradients or shadows. Every class is
   prefixed k- so this file can sit beside an existing stylesheet. Rules: ui_kit/README.md. */

:root {
  --k-bg: #0a0a0a;
  --k-surface: #111111;
  --k-hover: #1a1a1a;
  --k-line: #262626;
  --k-text: #ededed;
  --k-muted: #8f8f8f;
  --k-faint: #5c5c5c;
  --k-accent: #3b82f6;
  --k-ok: #22c55e;
  --k-warn: #eab308;
  --k-bad: #ef4444;
  --k-radius: 10px;
  --k-gap: 40px;            /* between stacked boxes; the pipe spans exactly this */
  --k-width: 960px;
  --k-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --k-bg: #ffffff; --k-surface: #fafafa; --k-hover: #f4f4f5; --k-line: #e5e5e5;
    --k-text: #171717; --k-muted: #6b6b6b; --k-faint: #a3a3a3;
    color-scheme: light;
  }
}

/* ── base ─────────────────────────────────────────── */
.k-body {
  margin: 0; background: var(--k-bg); color: var(--k-text);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* :where() gives these zero specificity, so any component class (.k-link, .k-id) beats them */
:where(.k-body) *, :where(.k-body) *::before, :where(.k-body) *::after { box-sizing: border-box; }
.k-body [hidden] { display: none !important; }
:where(.k-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.k-mono { font-family: var(--k-mono); }

/* ── page ─────────────────────────────────────────── */
.k-top, .k-page { max-width: var(--k-width); margin: 0 auto; padding-inline: 24px; }
.k-top { display: flex; align-items: center; justify-content: space-between; padding-block: 28px 20px; }
.k-top h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* minmax(0,1fr): one long unwrapped line must not widen the column past max-width */
.k-page { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
.k-page > * { min-width: 0; }

.k-live { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--k-muted); }
.k-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--k-accent); animation: k-pulse 1.6s infinite; }
@keyframes k-pulse { 50% { opacity: .3; } }

/* ── box: every section is one, so the pipe has edges to join ── */
.k-box { border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 16px 18px 18px; }
.k-box + .k-box { margin-top: var(--k-gap); }

/* ── pipe: joins two stacked boxes; idle rail, flowing while work runs, one pulse on start ── */
.k-pipe {
  position: relative; z-index: 1; width: 8px; height: calc(var(--k-gap) + 2px); margin: -1px auto;
  border-radius: 3px; background: var(--k-line); overflow: hidden;
}
.k-pipe + .k-box, .k-pipe + .k-list { margin-top: 0; }
.k-pipe::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; border-radius: 3px;
  background: linear-gradient(to bottom, transparent, var(--k-accent)); opacity: 0;
}
.k-pipe.is-flowing::after { opacity: 1; animation: k-flow 1.3s linear infinite; }
.k-pipe.is-burst::after { opacity: 1; animation: k-flow .55s cubic-bezier(.5, 0, .9, .5) 1; }
@keyframes k-flow { from { top: -50%; } to { top: 100%; } }

/* ── tabs ─────────────────────────────────────────── */
.k-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--k-line); margin-bottom: 16px; }
.k-tab { border: 0; background: none; padding: 0 0 10px; margin-bottom: -1px; cursor: pointer; color: var(--k-muted); border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.k-tab:hover { color: var(--k-text); }
.k-tab.is-active { color: var(--k-text); border-bottom-color: var(--k-text); }

/* ── drop zones ───────────────────────────────────── */
.k-drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.k-drop {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 84px; padding: 14px 16px;
  border: 1px dashed var(--k-line); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.k-drop:hover, .k-drop:focus-visible { border-color: var(--k-muted); outline: none; }
.k-drop.is-over { border-color: var(--k-accent); background: color-mix(in srgb, var(--k-accent) 6%, transparent); }
.k-drop.has-file { border-style: solid; }
.k-drop.is-wrong { animation: k-shake .35s; border-color: var(--k-bad); }
@keyframes k-shake { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.k-drop-label { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.k-drop-label b { font-weight: 500; }
.k-drop-label small { color: var(--k-faint); font-size: 12px; }
.k-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 13px; }
.k-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-chip-size { color: var(--k-faint); font-size: 12px; }
.k-chip button { border: 0; background: none; cursor: pointer; color: var(--k-faint); padding: 0 2px; }
.k-chip button:hover { color: var(--k-text); }

/* ── inputs and buttons ───────────────────────────── */
.k-input { width: 100%; background: none; border: 1px solid var(--k-line); border-radius: 8px; padding: 9px 12px; outline: none; }
.k-input:focus { border-color: var(--k-muted); }
.k-input::placeholder { color: var(--k-faint); }
.k-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.k-btn { border: 1px solid var(--k-line); background: var(--k-bg); padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, opacity .15s; }
.k-btn:hover:not(:disabled) { background: var(--k-hover); }
.k-btn:disabled { opacity: .35; cursor: not-allowed; }
.k-btn.is-primary { background: var(--k-text); color: var(--k-bg); border-color: var(--k-text); font-weight: 500; }
.k-btn.is-primary:hover:not(:disabled) { opacity: .85; background: var(--k-text); }
.k-btn.is-ghost { border-color: transparent; }
.k-link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--k-muted); font-size: 13px; text-decoration: none; }
.k-link:hover { color: var(--k-text); }
.k-link.is-danger:hover { color: var(--k-bad); }
.k-link.is-strong { color: var(--k-text); }
.k-message { margin: 0 0 0 8px; font-size: 13px; color: var(--k-muted); }
.k-message.is-bad { color: var(--k-bad); }

/* ── list: rows of jobs / runs / items ────────────── */
.k-list { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--k-line); border-radius: var(--k-radius); overflow: hidden; }
.k-box + .k-list { margin-top: var(--k-gap); }
.k-list-head { margin: 0; padding: 10px 16px; font-size: 12.5px; font-weight: 500; color: var(--k-muted); border-bottom: 1px solid var(--k-line); }
.k-list-head span { color: var(--k-faint); }
.k-empty { margin: 0; padding: 28px; text-align: center; color: var(--k-faint); }
.k-item { min-width: 0; border-top: 1px solid var(--k-line); }
.k-list-head + .k-item, .k-empty + .k-item { border-top: 0; }
.k-item.is-new { animation: k-arrive .45s ease-out; }
@keyframes k-arrive { from { background: color-mix(in srgb, var(--k-accent) 10%, transparent); transform: translateY(-6px); opacity: 0; } }

.k-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; }
.k-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k-faint); }
.k-item[data-status="running"] .k-dot { background: var(--k-accent); animation: k-pulse 1.6s infinite; }
.k-item[data-status="paused"] .k-dot, .k-item[data-status="warning"] .k-dot { background: var(--k-warn); }
.k-item[data-status="done"] .k-dot { background: var(--k-ok); }
.k-item[data-status="failed"] .k-dot { background: var(--k-bad); }

.k-row-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.k-line1 { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.k-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tag { font-size: 12px; color: var(--k-faint); white-space: nowrap; }
.k-tag + .k-tag::before { content: "· "; }
.k-line2 { display: flex; gap: 10px; min-width: 0; font-size: 12.5px; color: var(--k-muted); }
.k-line2 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-line2 > :empty { display: none; }
.k-faint { color: var(--k-faint); }
.k-item[data-status="failed"] .k-line2 .k-summary { color: var(--k-bad); }

/* fixed columns so id, time and actions line up from row to row */
.k-row-side { flex: none; display: grid; grid-template-columns: 76px 64px 190px; align-items: center; gap: 12px; }
.k-id { border: 0; background: none; padding: 0; cursor: pointer; font: 12px var(--k-mono); color: var(--k-faint); text-align: left; }
.k-id:hover { color: var(--k-text); }
.k-id.is-copied { color: var(--k-ok); }
.k-time { font: 12.5px var(--k-mono); color: var(--k-muted); font-variant-numeric: tabular-nums; text-align: right; }
.k-acts { display: flex; justify-content: flex-end; gap: 14px; }
@media (max-width: 720px) { .k-row { flex-wrap: wrap; } .k-row-side { width: 100%; padding-left: 20px; grid-template-columns: auto auto 1fr; } }

/* running: one thin moving line under the row */
.k-progress { display: none; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--k-accent) 15%, transparent); }
.k-item[data-status="running"] .k-progress, .k-item[data-status="paused"] .k-progress { display: block; }
.k-progress::after { content: ""; display: block; width: 30%; height: 100%; background: var(--k-accent); animation: k-slide 1.4s ease-in-out infinite; }
.k-item[data-status="paused"] .k-progress::after { animation-play-state: paused; background: var(--k-warn); }
@keyframes k-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* details: hidden until the row's Details link opens it */
.k-details { display: none; padding: 4px 16px 16px 36px; }
.k-item.is-open .k-details { display: grid; gap: 14px; }
.k-details h4 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--k-muted); }
.k-details ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--k-muted); }
.k-details li { margin-bottom: 3px; overflow-wrap: anywhere; }
.k-details pre, .k-pre { margin: 0; max-height: 300px; overflow: auto; white-space: pre-wrap; font: 12px/1.55 var(--k-mono); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 6px; padding: 10px 12px; }

/* ── dialog + table ───────────────────────────────── */
.k-dialog { width: min(1100px, 94vw); max-height: 86vh; padding: 0; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-bg); color: var(--k-text); }
.k-dialog[open] { display: flex; flex-direction: column; }
.k-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.k-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--k-line); }
.k-dialog-head h3 { margin: 0; font-size: 13px; font-weight: 500; }
.k-table-wrap { overflow: auto; }
.k-table { border-collapse: collapse; font-size: 12.5px; }
.k-table th, .k-table td { padding: 7px 12px; border-bottom: 1px solid var(--k-line); text-align: left; vertical-align: top; max-width: 380px; white-space: pre-wrap; }
.k-table th { position: sticky; top: 0; background: var(--k-surface); font-weight: 500; color: var(--k-muted); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .k-body *, .k-body *::before, .k-body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}