/* ============================================================================
   KIBO v2 — Job Orchestrator
   Extracted from app.css (monolith split). Token-based, see _tokens.css.
   ============================================================================ */

/* ── Job Orchestrator (Jobs page) ──────────────────────────────────────────── */
.jobs-empty {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    padding: 3rem 1rem; color: var(--text-secondary);
}
.jobs-list { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; padding-bottom: 1rem; }
.jobs-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.jobs-card.expanded { border-color: var(--accent); }
.jobs-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .75rem 1rem; cursor: pointer;
}
.jobs-card-head:hover { background: var(--bg-surface-2); }
.jobs-card-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 6px; object-fit: contain; }
.jobs-card-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.jobs-card-name { font-weight: 600; color: var(--text-primary); }
.jobs-card-sched { font-size: .8rem; color: var(--text-secondary); }
.jobs-card-meta { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.jobs-card-body { padding: .25rem 1rem 1rem; border-top: 1px solid var(--border); }
.jobs-actions { display: flex; align-items: center; gap: .5rem; padding: .75rem 0; }

.jobs-dag-wrap { position: relative; }
.jobs-dag {
    height: 280px; width: 100%;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-surface-2);
}
.jobs-legend {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin: .5rem 0; font-size: .75rem; color: var(--text-secondary);
}
.jobs-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.jobs-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ink-soft); }
/* Status colours — same mapping as the DAG nodes in job_dag.js */
.jobs-legend .dot.done { background: var(--focus); }
.jobs-legend .dot.run  { background: var(--human); }
.jobs-legend .dot.skip { background: var(--amber); }
.jobs-legend .dot.fail { background: var(--alert); }
.jobs-legend .dot.pend { background: var(--ink-soft); }

/* Status pills — soft token style (matches the demo .jstat) */
.jobs-st-completed { background: var(--focus-soft); color: var(--focus-text); }
.jobs-st-running   { background: var(--human-soft); color: var(--human-text); }
.jobs-st-failed    { background: var(--alert-soft); color: var(--alert-text); }
.jobs-st-skipped   { background: var(--amber-soft); color: var(--amber-text); }
.jobs-st-pending   { background: var(--paper);      color: var(--ink-soft); }

.jobs-runs { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.jobs-run-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .4rem .6rem; border: 1px solid transparent; border-radius: 6px;
    background: none; text-align: left; cursor: pointer; color: var(--text-primary);
}
.jobs-run-row:hover { background: var(--bg-surface-2); }
.jobs-run-row.active { border-color: var(--accent); background: var(--bg-surface-2); }
.jobs-run-when { font-size: .8rem; }
.jobs-run-trigger { font-size: .72rem; color: var(--text-secondary); margin-left: auto; }

.jobs-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; z-index: 1050;
}
.jobs-modal {
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 1.25rem; width: min(440px, 92vw); max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,.3));
}
.jobs-modal h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.jobs-field-label { display: block; margin: .75rem 0 .25rem; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.jobs-template-picker { display: flex; gap: .5rem; flex-wrap: wrap; }
.jobs-template-btn {
    flex: 1 1 0; padding: .5rem .75rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-surface-2); color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.jobs-template-icon { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
.jobs-template-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.jobs-template-desc { margin: .5rem 0 0; font-size: .85rem; color: var(--text-secondary); }
.jobs-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* Job editor hosted in the right dock (replaces the modal). Reuses the field/template styles above. */
.job-editor-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }