/* Job Status page (templates/jobs.html and partials/jobs_table.html). */

/* Lifetime totals */
.stat-strip { display: grid; gap: 0.75rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stat { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); min-width: 0; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem;
  border-radius: 0.75rem; background: var(--brand-tint); color: var(--brand-ink); font-size: 22px; }
.stat-label { margin: 0; font-size: 0.78rem; font-weight: 650; color: var(--muted); }
.stat-value { display: flex; align-items: center; gap: 0.45rem; margin: 0.1rem 0 0; font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.stat-sub { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.stat-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0; }
.task-chip { padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.task-ppi { color: #1a5fa5; background: #dceeff; }
.task-dtpi { color: #2a7d6f; background: #d6f5f0; }
.task-rpi { color: #7a3e9d; background: #efe3fb; }
.live-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #1a6bbf; box-shadow: 0 0 0 0 rgba(26, 107, 191, 0.5); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(26, 107, 191, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(26, 107, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 107, 191, 0); } }
.retention-note { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--muted); max-width: 80ch; }
.retention-note .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 0.05rem; }

/* Filters */
.filter-bar { display: grid; gap: 0.75rem; margin-top: 1.25rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.search-field { position: relative; flex: 1 1 14rem; min-width: 12rem; }
.search-field .material-symbols-outlined { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--faint); }
.search-field input { width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: 0.45rem 0.7rem 0.45rem 2.2rem; border: 1px solid var(--line-strong);
  border-radius: 0.6rem; font-size: 0.9rem; background: var(--surface); }
.search-field input:focus { outline: 2px solid #93c5fd; border-color: #93c5fd; }
.segmented { display: inline-flex; padding: 0.2rem; gap: 0.15rem; border-radius: 0.7rem; background: var(--surface-3); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 0.55rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.segmented input:focus-visible + span { outline: 2px solid #93c5fd; }
.compact-select { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.compact-select .select { width: auto; min-width: 5.5rem; }
.status-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.status-chip { position: relative; }
.status-chip input { position: absolute; opacity: 0; pointer-events: none; }
.status-chip span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-2); background: var(--surface); cursor: pointer; }
.status-chip i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--dot); }
.status-queued { --dot: #b07d12; } .status-running { --dot: #1a6bbf; } .status-completed { --dot: #1a9e6a; }
.status-failed { --dot: #c0392b; } .status-cancelled { --dot: #888888; }
.status-chip input:checked + span { border-color: var(--dot); background: color-mix(in srgb, var(--dot) 10%, var(--surface)); color: var(--ink); }
.status-chip input:focus-visible + span { outline: 2px solid #93c5fd; }

/* Table */
.jobs-card { margin-top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.jobs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.jobs-toolbar p { margin: 0; }
.jobs-grid { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 0.88rem; }
.jobs-grid th { padding: 0.6rem 0.75rem; text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.jobs-grid td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
.jobs-grid tbody tr:hover { background: var(--surface-2); }
.jobs-grid tbody tr:last-child td { border-bottom: 0; }
.jobs-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.compare-box { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }
/* Comparisons need one task type: once a box is ticked, boxes of other tasks in the same form are locked.
   Pure CSS (:has); /compare and /compare-inference refuse mixed tasks anyway. */
.jobs-grid:has(.compare-box[form="compare-train"][data-task="ppi"]:checked) .compare-box[form="compare-train"]:not([data-task="ppi"]),
.jobs-grid:has(.compare-box[form="compare-train"][data-task="dtpi"]:checked) .compare-box[form="compare-train"]:not([data-task="dtpi"]),
.jobs-grid:has(.compare-box[form="compare-train"][data-task="rpi"]:checked) .compare-box[form="compare-train"]:not([data-task="rpi"]),
.jobs-grid:has(.compare-box[form="compare-train"][data-task="pdi"]:checked) .compare-box[form="compare-train"]:not([data-task="pdi"]),
.jobs-grid:has(.compare-box[form="compare-infer"][data-task="ppi"]:checked) .compare-box[form="compare-infer"]:not([data-task="ppi"]),
.jobs-grid:has(.compare-box[form="compare-infer"][data-task="dtpi"]:checked) .compare-box[form="compare-infer"]:not([data-task="dtpi"]),
.jobs-grid:has(.compare-box[form="compare-infer"][data-task="rpi"]:checked) .compare-box[form="compare-infer"]:not([data-task="rpi"]),
.jobs-grid:has(.compare-box[form="compare-infer"][data-task="pdi"]:checked) .compare-box[form="compare-infer"]:not([data-task="pdi"]) {
  opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.cell-muted { color: #cbd5e1; font-size: 18px; }
.run-cell { display: flex; align-items: center; gap: 0.35rem; }
.vis-icon { font-size: 17px; color: var(--muted); }
.vis-public { color: #1a6bbf; }
.run-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.icon-btn-sm { width: 1.6rem; height: 1.6rem; }
.icon-btn-sm .material-symbols-outlined { font-size: 15px; }
.run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.kind-badge { padding: 0.02rem 0.45rem; border-radius: 0.35rem; font-size: 0.7rem; font-weight: 700; }
.kind-train { color: #0f766e; background: #f0fdf9; }
.kind-infer { color: #2563eb; background: #eff6ff; }
.source-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 650;
  color: var(--s); background: color-mix(in srgb, var(--s) 10%, var(--surface)); }
.status-pill i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--s); }
.status-pill i.pulse { animation: pulse 1.6s infinite; }
.row-actions { display: flex; justify-content: flex-end; gap: 0.35rem; }
.jobs-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 2.5rem 1rem; color: var(--muted); text-align: center; }
.empty-state .material-symbols-outlined { font-size: 36px; color: #cbd5e1; }
.empty-state p { margin: 0; }
.details-section { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .live-dot, .status-pill i.pulse { animation: none; } }