core/src/css/workflow.css

/* ==========================================
 * Armature — Workflow Components CSS
 * ========================================== */

/* ── Stage list (admin builder) ────────── */

.wf-stage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
    background: var(--bg-surface);
    cursor: grab;
    transition: background 0.15s;
}
.wf-stage-row:hover { background: var(--bg-raised); }
.wf-stage-grip { color: var(--text-3); font-size: 14px; cursor: grab; }
.wf-stage-ord {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent-dim);
    font-size: 11px; font-weight: 600; color: var(--accent);
    flex-shrink: 0;
}
.wf-stage-name { flex: 1; font-size: 13px; font-weight: 500; }
.wf-stage-row .badge { font-size: 10px; }
.wf-stage-row .sw-btn--sm { opacity: 0; transition: opacity 0.15s; }
.wf-stage-row:hover .sw-btn--sm { opacity: 1; }

/* ── Queue sidebar ───────────────────── */

.sb-queue-badge {
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}
.sb-queue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
}
.sb-queue-item:hover { background: var(--bg-raised); }
.sb-queue-item.active { background: var(--accent-dim); color: var(--accent); }
.sb-queue-icon { font-size: 14px; }
.sb-queue-label { flex: 1; }
.sb-queue-item .sw-btn--sm {
    opacity: 0; padding: 2px 6px; font-size: 11px;
    transition: opacity 0.15s;
}
.sb-queue-item:hover .sw-btn--sm { opacity: 1; }

/* Collapsed sidebar — show icon only */
.sidebar.collapsed .sb-queue-item { justify-content: center; padding: 5px 0; margin: 0 6px; gap: 0; }
.sidebar.collapsed .sb-queue-label { display: none; }
.sidebar.collapsed .sb-queue-item .sw-btn--sm { display: none; }
.sidebar.collapsed .sb-queue-badge { display: none !important; }

/* Unpin button */
.sb-queue-unpin {
    opacity: 0; background: none; border: none; color: var(--text-3);
    cursor: pointer; font-size: 14px; padding: 0 4px; transition: opacity 0.15s;
}
.sb-queue-item:hover .sb-queue-unpin { opacity: 1; }
.sb-queue-unpin:hover { color: var(--text); }
.sidebar.collapsed .sb-queue-unpin { display: none; }

/* Browse workflows button */
.sb-queue-browse {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer; border-radius: 6px;
    font-size: 12px; color: var(--text-3); transition: background 0.15s;
}
.sb-queue-browse:hover { background: var(--bg-raised); color: var(--text-2); }
.sidebar.collapsed .sb-queue-browse .sb-queue-label { display: none; }
.sidebar.collapsed .sb-queue-browse { justify-content: center; padding: 5px 0; margin: 0 6px; gap: 0; }

/* Browse dialog */
.wf-browse-dialog { max-height: 300px; overflow-y: auto; }
.wf-browse-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; border-radius: 6px;
    font-size: 13px; transition: background 0.15s;
}
.wf-browse-row:hover { background: var(--bg-raised); }

/* ── Team queue panel ────────────────── */

.wf-queue-panel { padding: 4px 0; }
.wf-queue-panel h4 { margin: 0 0 12px; font-size: 16px; }
.wf-queue-panel h5 {
    margin: 12px 0 6px;
    font-size: 13px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Admin badges ────────────────────── */

.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-raised); color: var(--text-2); }
.badge-ok { background: rgba(46, 160, 67, 0.15); color: #2ea043; }
.badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; }

/* ── v0.27.0: Workflow stage indicator bar ── */

.workflow-stage-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    font-size: 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    flex-shrink: 0;
}
.wf-bar-steps {
    display: flex;
    gap: 4px;
    align-items: center;
}
.wf-bar-step {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s;
}
.wf-bar-step.completed { background: var(--success); }
.wf-bar-step.current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.wf-bar-stage-name { font-weight: 600; color: var(--text); }
.wf-bar-status {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
}
.wf-bar-status.active { background: var(--accent-dim); color: var(--accent); }
.wf-bar-status.completed { background: var(--success-dim); color: var(--success-light); }
.wf-bar-status.stale { background: var(--warning-dim); color: var(--warning-light); }
.wf-bar-spacer { flex: 1; }
.wf-bar-actions { display: flex; gap: 6px; }
.wf-bar-actions .sw-btn--sm { font-size: 11px; padding: 3px 10px; }

/* DnD stage reorder feedback */
.wf-stage-row.dragging { opacity: 0.4; }
.wf-stage-row.drag-over { border-top: 2px solid var(--accent); }

/* ── v0.29.3: Form builder (admin) ──── */

.wf-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
    background: var(--bg-surface);
    flex-wrap: wrap;
}
.wf-field-row:hover { background: var(--bg-raised); }
.wf-field-row.dragging { opacity: 0.4; }
.wf-field-row.drag-over { border-top: 2px solid var(--accent); }
.wf-field-row input[type="text"],
.wf-field-row select {
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
}
.wf-field-row .wf-fb-del { opacity: 0; transition: opacity 0.15s; }
.wf-field-row:hover .wf-fb-del { opacity: 1; }
.badge-accent { background: var(--accent-dim); color: var(--accent); }