/* ════════════════════════════════════════════════════════════
   Javne nabavke — Tokovi odobravanja / Workflow registar (PBI #5591)
   Builder tokova odobravanja. Ported verbatim from the redesign mock
   (NabavkeWorkflowRegistar.html). All selectors are .wf-* (safe namespace);
   scoped under .wf-page inside the ProcurementRegistries detail pane.
   V1 "Lista" variant only — the prototype V2/V3 variants are not shipped.
   ════════════════════════════════════════════════════════════ */

/* When the workflow registry is selected, the detail panel must not clip the floating
   add-step menu. Scoped to .is-workflow so the state-registry tables keep overflow:hidden. */
.reg-detail.is-workflow { overflow: visible; }

/* Footer primary button (.nb-btn is page-scoped to .nbp elsewhere; redefine for .wf-page) */
.wf-page .nb-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; text-decoration: none; }
.wf-page .nb-btn i { font-size: 12px; }
.wf-page .nb-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.wf-page .nb-btn--primary:hover:not(:disabled) { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.wf-page .nb-btn--primary:disabled { opacity: .5; cursor: not-allowed; }

/* Tip-boje (avatar/border/pill fill) */
.wf-tip--blue   { --wfc: var(--is-brand-blue-700); --wfb: #cfe4f4; --wfbg: var(--is-brand-blue-100); }
.wf-tip--purple { --wfc: #7b51d8; --wfb: #ddd0f2; --wfbg: #f3eefc; }
.wf-tip--teal   { --wfc: #0f7d86; --wfb: #bfe5e8; --wfbg: #e5f6f7; }
.wf-tip--orange { --wfc: #c2630c; --wfb: #f3d8b6; --wfbg: #fcefdd; }
.wf-tip--green  { --wfc: #1a7a3a; --wfb: #c2e5cd; --wfbg: #e8f6ec; }

.wf-tipicon { display: grid; place-items: center; border-radius: 9px; flex: none; background: var(--wfbg); color: var(--wfc); border: 1px solid var(--wfb); }

/* ── Layout: rail + main ───────────────────────────────────── */
.wf-layout { display: grid; grid-template-columns: 268px 1fr; gap: 18px; align-items: start; }
@media (max-width: 940px) { .wf-layout { grid-template-columns: 1fr; } }

/* ── Rail ──────────────────────────────────────────────────── */
.wf-rail {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 7px;
  background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md);
  box-shadow: var(--is-shadow-1); padding: 13px; margin: 5px;
}
@media (max-width: 940px) { .wf-rail { position: static; } }
.wf-rail__head { display: flex; align-items: center; padding: 2px 4px 6px; }
.wf-rail__head span { display: inline-flex; align-items: center; gap: 7px; font: 700 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); }
.wf-rail__head i { font-size: 11px; color: var(--is-fg-muted); }

.wf-railitem {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 11px; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-sm); background: var(--is-bg-surface);
  transition: background .12s, border-color .12s;
}
.wf-railitem:hover { background: var(--is-bg-surface-2); }
.wf-railitem.is-active { background: var(--is-brand-blue-100); border-color: #cfe4f4; }
.wf-railitem__top { display: flex; align-items: center; gap: 8px; }
.wf-railitem__name { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); flex: 1; min-width: 0; line-height: 1.3; }
.wf-railitem.is-active .wf-railitem__name { color: var(--is-brand-blue-700); }
.wf-railitem__meta { display: flex; gap: 12px; font: 600 11px var(--is-font-mono); color: var(--is-fg-3); }
.wf-railitem__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wf-railitem__meta i { font-size: 10px; color: var(--is-fg-muted); }

/* ── Single-active model: rail groups + status ─────────────── */
.wf-railgrouplbl { display: flex; align-items: center; gap: 7px; padding: 9px 4px 4px; font: 700 9.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--is-fg-3); }
.wf-railgrouplbl:first-of-type { padding-top: 2px; }
.wf-railgrouplbl i { font-size: 10px; color: var(--is-fg-muted); }
.wf-railgrouplbl--arch { color: var(--is-fg-muted); }
.wf-railgrouplbl__count { margin-left: auto; font: 700 9px var(--is-font-mono); color: var(--is-fg-3); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: 999px; padding: 1px 7px; }
.wf-railitem.is-arch { background: var(--is-bg-surface-2); }
.wf-railitem.is-arch .wf-railitem__name { color: var(--is-fg-2); font-weight: 600; }
.wf-railitem.is-arch.is-active { background: var(--is-brand-blue-100); }
.wf-ministatus { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 8.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.wf-ministatus i { font-size: 7px; }
.wf-ministatus--active { background: #e8f6ec; color: #1a7a3a; border: 1px solid #c2e5cd; }
.wf-ministatus--arch { background: var(--is-bg-surface-3); color: var(--is-fg-3); border: 1px solid var(--is-border-2); }

.wf-statuspill { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--is-font-sans); padding: 5px 12px; border-radius: 999px; }
.wf-statuspill i { font-size: 11px; }
.wf-statuspill--active { background: #e8f6ec; color: #1a7a3a; border: 1px solid #c2e5cd; }
.wf-statuspill--arch { background: var(--is-bg-surface-3); color: var(--is-fg-3); border: 1px solid var(--is-border-2); }

/* Active/archived banner above builder */
.wf-actbanner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--is-border-1); }
.wf-actbanner__lead { font-size: 17px; flex: none; }
.wf-actbanner__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wf-actbanner__txt b { font: 700 12.5px var(--is-font-sans); }
.wf-actbanner__txt span { font: 500 11.5px/1.45 var(--is-font-sans); }
.wf-actbanner--active { background: #eef9f1; }
.wf-actbanner--active .wf-actbanner__lead, .wf-actbanner--active .wf-actbanner__txt b { color: #1a7a3a; }
.wf-actbanner--active .wf-actbanner__txt span { color: #2f6f44; }
.wf-actbanner--arch { background: var(--is-bg-surface-2); }
.wf-actbanner--arch .wf-actbanner__lead { color: var(--is-fg-3); }
.wf-actbanner--arch .wf-actbanner__txt b { color: var(--is-fg-1); }
.wf-actbanner--arch .wf-actbanner__txt span { color: var(--is-fg-3); }
.wf-actbanner__txt span b { color: var(--is-fg-1); font-weight: 700; }
.wf-actbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-brand-blue); background: var(--is-brand-blue); color: #fff; font: 700 12.5px var(--is-font-sans); cursor: pointer; transition: background .12s, border-color .12s; }
.wf-actbtn:hover:not(:disabled) { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.wf-actbtn:disabled { opacity: .45; cursor: not-allowed; }

.wf-railnew {
  margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; border: 1px dashed var(--is-border-3); border-radius: var(--is-radius-sm); background: transparent;
  font: 600 12px var(--is-font-sans); color: var(--is-brand-blue-700); cursor: pointer;
}
.wf-railnew:hover { background: var(--is-brand-blue-100); border-color: #cfe4f4; }

.wf-railnote {
  display: flex; gap: 8px; padding: 10px 11px; margin-top: 4px;
  border-radius: var(--is-radius-sm); background: var(--is-bg-surface-2); border: 1px solid var(--is-border-1);
  font: 500 11px/1.5 var(--is-font-sans); color: var(--is-fg-3);
}
.wf-railnote i { color: var(--is-fg-muted); margin-top: 1px; flex: none; font-size: 11px; }
.wf-railnote b { color: var(--is-fg-2); font-weight: 700; }

/* ── Main panel ────────────────────────────────────────────── */
/* overflow:visible so the floating add-step menu can spill past the panel edge.
   The footer gets matching bottom radii so corners stay clean without clipping. */
.wf-main { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); min-width: 0; overflow: visible; margin: 5px; }

.wf-defhead { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--is-border-1); flex-wrap: wrap; }
.wf-defhead__main { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.wf-defhead__name { font: 700 18px var(--is-font-sans); color: var(--is-fg-1); border: 1px solid transparent; border-radius: 7px; padding: 3px 7px; margin: -3px -7px; background: transparent; }
.wf-defhead__name:hover { background: var(--is-bg-surface-2); }
.wf-defhead__name:focus { outline: none; background: #fff; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.wf-defhead__desc { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; margin: -3px -7px; background: transparent; }
.wf-defhead__desc:hover { background: var(--is-bg-surface-2); }
.wf-defhead__desc:focus { outline: none; background: #fff; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); color: var(--is-fg-1); }
.wf-defhead__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wf-defhead__by { font: 500 11px var(--is-font-mono); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 6px; }
.wf-defhead__by i { font-size: 10px; color: var(--is-fg-muted); }

/* Pravila (sažetak) */
.wf-rules { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; background: var(--is-bg-surface-2); border-bottom: 1px solid var(--is-border-1); }
.wf-rule { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); padding: 5px 11px; background: var(--is-bg-surface); border: 1px solid var(--is-border-2); border-radius: 999px; }
.wf-rule i { font-size: 11px; color: var(--is-brand-blue-700); }

.wf-builder { padding: 20px 18px; }

/* ── Switch (shared) ───────────────────────────────────────── */
.wf-switch { width: 38px; height: 22px; border-radius: 999px; border: 0; background: var(--is-border-3); position: relative; cursor: pointer; flex: none; transition: background .14s; }
.wf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .14s; }
.wf-switch.is-on { background: var(--is-success); }
.wf-switch.is-on::after { transform: translateX(16px); }

/* ── Tip picker: pills ─────────────────────────────────────── */
.wf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--is-border-3); background: var(--is-bg-surface);
  font: 600 12px var(--is-font-sans); color: var(--is-fg-2); transition: all .12s;
}
.wf-pill i { font-size: 11px; color: var(--is-fg-3); }
.wf-pill:hover { border-color: var(--wfb, var(--is-border-3)); background: var(--is-bg-surface-2); }
.wf-pill.is-on { background: var(--wfbg); border-color: var(--wfb); color: var(--wfc); }
.wf-pill.is-on i { color: var(--wfc); }

/* ── Field line / select / radio ───────────────────────────── */
.wf-fieldline { display: flex; flex-direction: column; gap: 6px; }
.wf-fieldline__lbl { font: 600 12px var(--is-font-sans); color: var(--is-fg-2); }
.wf-req { color: var(--is-danger); font-weight: 700; }
.wf-select {
  width: 100%; max-width: 460px; height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm);
  background-color: #fff; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.wf-select:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.wf-select.is-error { border-color: var(--is-danger); box-shadow: 0 0 0 3px rgba(217,44,44,.12); }

/* Syncfusion SfDropDownList target pickers — constrained to the form width like .wf-select;
   filtering + clear button are enabled per-component. */
.wf-page .wf-ddl { width: 100%; max-width: 460px; }
.wf-page .wf-ddl.is-error { border-color: var(--is-danger) !important; }
.wf-page .wf-ddl.is-error.e-input-focus { box-shadow: 0 0 0 3px rgba(217,44,44,.12); }

.wf-radiorow { display: flex; gap: 10px; flex-wrap: wrap; }
.wf-radio {
  flex: 1; min-width: 200px; display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: var(--is-bg-surface); transition: all .12s;
}
.wf-radio:hover { background: var(--is-bg-surface-2); }
.wf-radio.is-on { border-color: #cfe4f4; background: var(--is-brand-blue-100); }
.wf-radio input { margin-top: 2px; accent-color: var(--is-brand-blue-700); flex: none; }
.wf-radio span { display: flex; flex-direction: column; gap: 1px; }
.wf-radio b { font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.wf-radio small { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); }

.wf-dynnote {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--is-radius-sm);
  background: #e8f6ec; border: 1px solid #c2e5cd; font: 500 12px/1.5 var(--is-font-sans); color: #1a5c30;
}
.wf-dynnote i { color: #1a7a3a; margin-top: 2px; flex: none; }
.wf-dynnote b { font-weight: 700; }

/* ── Opcije koraka ─────────────────────────────────────────── */
.wf-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .wf-opts { grid-template-columns: 1fr; } }
.wf-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: var(--is-bg-surface-2); }
.wf-opt__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wf-opt__lbl { font: 600 12px var(--is-font-sans); color: var(--is-fg-1); }
.wf-opt__sub { font: 500 10.5px/1.4 var(--is-font-sans); color: var(--is-fg-3); }

/* ── Razrješenje (avatar) ──────────────────────────────────── */
.wf-resolve { display: inline-flex; align-items: center; gap: 8px; }
.wf-resolve__av { width: 26px; height: 26px; border-radius: 999px; background: var(--is-brand-blue-700); color: #fff; display: grid; place-items: center; font: 700 10px var(--is-font-sans); flex: none; }
.wf-resolve__txt { display: flex; flex-direction: column; line-height: 1.2; }
.wf-resolve__txt b { font: 600 12px var(--is-font-sans); color: var(--is-fg-1); }
.wf-resolve__txt small { font: 500 10.5px var(--is-font-sans); color: var(--is-fg-3); }
.wf-resolve--empty { font: 600 11.5px var(--is-font-sans); color: var(--is-fg-muted); gap: 5px; }
.wf-resolve--empty i { font-size: 12px; }

/* ── Step controls ─────────────────────────────────────────── */
.wf-stepctrls { display: inline-flex; gap: 2px; flex: none; }
.wf-stepctrls button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--is-border-2); background: var(--is-bg-surface); color: var(--is-fg-2); cursor: pointer; display: grid; place-items: center; font-size: 11px; }
.wf-stepctrls button:hover:not(:disabled) { background: var(--is-bg-surface-2); color: var(--is-fg-1); }
.wf-stepctrls button:disabled { opacity: .35; cursor: not-allowed; }
.wf-stepctrls__del:hover:not(:disabled) { background: var(--is-danger-bg, #fdeaea) !important; color: var(--is-danger) !important; border-color: #f3c6c6 !important; }

/* ── Add step menu ─────────────────────────────────────────── */
.wf-addwrap { position: relative; display: inline-block; }
.wf-addbtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border: 1px dashed var(--is-brand-blue-700); border-radius: var(--is-radius-sm);
  background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font: 700 12.5px var(--is-font-sans);
}
.wf-addbtn:hover { background: #d8ebf8; }
/* Floating overlay (does not push content). The add button sits low in the panel and the
   app shell (#main-content / .main in site.css) clips anything that spills below the content
   viewport, so the menu opens UPWARD into the space above the button — always fully visible. */
.wf-addmenu {
  position: absolute; bottom: calc(100% + 6px); top: auto; left: 0; z-index: 30; min-width: 280px; max-width: 360px;
  background: var(--is-bg-surface); border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md);
  box-shadow: 0 14px 40px rgba(12,17,28,.22); padding: 6px; animation: wf-pop .12s ease;
}
@keyframes wf-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.wf-addmenu__head { font: 700 10px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); padding: 7px 9px 5px; }
.wf-addmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 8px 9px; border: 0; border-radius: var(--is-radius-sm); background: transparent; }
.wf-addmenu__item:hover { background: var(--is-bg-surface-2); }
.wf-addmenu__lbl { display: flex; flex-direction: column; gap: 1px; font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.wf-addmenu__lbl small { font: 500 10.5px var(--is-font-sans); color: var(--is-fg-3); }

/* ════════════════════════════════════════════════════════════
   VARIJANTA 1 — vertikalna lista
   ════════════════════════════════════════════════════════════ */
.wf-v1 { display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.wf-anchor { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.wf-anchor__dot { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--is-bg-surface-3); color: var(--is-fg-2); font-size: 14px; border: 1px solid var(--is-border-2); }
.wf-anchor__dot--ok { background: #e8f6ec; color: #1a7a3a; border-color: #c2e5cd; }
.wf-anchor__txt { display: flex; flex-direction: column; }
.wf-anchor__txt b { font: 700 13px var(--is-font-sans); color: var(--is-fg-1); }
.wf-anchor__txt small { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); }
.wf-anchor--start .wf-anchor__dot { margin-left: 3px; }
.wf-anchor--end .wf-anchor__dot { margin-left: 3px; }

.wf-card { display: flex; gap: 0; position: relative; }
.wf-card__rail { width: 36px; display: flex; flex-direction: column; align-items: center; flex: none; position: relative; }
.wf-card__rail::before, .wf-card__rail::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: var(--is-border-2); }
.wf-card__rail::before { top: 0; height: 18px; }
.wf-card__rail::after { bottom: 0; top: 52px; }
.wf-stepnum { width: 30px; height: 30px; margin-top: 18px; border-radius: 999px; display: grid; place-items: center; flex: none; z-index: 1; font: 700 13px var(--is-font-mono); background: var(--wfbg); color: var(--wfc); border: 1.5px solid var(--wfc); }

.wf-card__body { flex: 1; min-width: 0; margin: 10px 0 10px 14px; padding: 14px 16px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); display: flex; flex-direction: column; gap: 13px; box-shadow: var(--is-shadow-1); }
.wf-card__top { display: flex; align-items: center; gap: 11px; }
.wf-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wf-card__title > b { font: 700 13.5px var(--is-font-sans); color: var(--is-fg-1); }

.wf-addrow { padding: 8px 0 8px 50px; }
.wf-emptyhint { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 10px 50px; padding: 12px 14px; border: 1px dashed var(--is-border-3); border-radius: var(--is-radius-sm); background: var(--is-bg-surface-2); font: 500 12px/1.5 var(--is-font-sans); color: var(--is-fg-3); }
.wf-emptyhint i { color: var(--is-fg-muted); margin-top: 1px; flex: none; font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   Builder view switch (Lista / Dijagram / Vođeno) — styled to fit the registry
   ════════════════════════════════════════════════════════════ */
.wf-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 5px 5px 0; flex-wrap: wrap; }
.wf-seglabel { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); }
.wf-seglabel i { font-size: 11px; color: var(--is-fg-muted); }
.wf-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--is-bg-surface-2); border: 1px solid var(--is-border-2); border-radius: 999px; }
.wf-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 0; background: transparent; border-radius: 999px; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; transition: background .12s, color .12s; }
.wf-seg button i { font-size: 11px; }
.wf-seg button:hover:not(.is-on) { color: var(--is-fg-1); background: var(--is-bg-surface-3); }
.wf-seg button.is-on { background: var(--is-brand-blue); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* ── Tip picker: cards (Vođeno) ────────────────────────────── */
.wf-typecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.wf-typecard { position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 7px; padding: 13px; border: 1.5px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); transition: all .12s; }
.wf-typecard:hover { border-color: var(--wfb); background: var(--is-bg-surface-2); }
.wf-typecard.is-on { border-color: var(--wfc); background: var(--wfbg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfc) 12%, transparent); }
.wf-typecard__lbl { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.wf-typecard.is-on .wf-typecard__lbl { color: var(--wfc); }
.wf-typecard__desc { font: 500 11px/1.45 var(--is-font-sans); color: var(--is-fg-3); }
.wf-typecard__check { position: absolute; top: 10px; right: 10px; color: var(--wfc); font-size: 15px; }

/* ════════════════════════════════════════════════════════════
   VARIJANTA 2 — horizontalni stepper + inspektor
   ════════════════════════════════════════════════════════════ */
.wf-v2 { display: flex; flex-direction: column; gap: 18px; }
.wf-flowwrap { border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface-2); padding: 18px 16px; }
.wf-flow { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.wf-node { flex: none; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; cursor: pointer; padding: 13px 10px; border: 1.5px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); transition: all .12s; position: relative; }
.wf-node:hover { border-color: var(--wfb, var(--is-border-3)); box-shadow: var(--is-shadow-1); }
.wf-node.is-sel { border-color: var(--wfc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfc) 16%, transparent); }
.wf-node.is-bad { border-color: #f0c14b; }
.wf-node--anchor { cursor: default; background: transparent; border-style: dashed; }
.wf-node--anchor:hover { box-shadow: none; }
.wf-node__icon { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; }
.wf-node--start { background: var(--is-bg-surface-3); color: var(--is-fg-2); border: 1px solid var(--is-border-2); }
.wf-node--ok { background: #e8f6ec; color: #1a7a3a; border: 1px solid #c2e5cd; }
.wf-node__name { font: 700 12px var(--is-font-sans); color: var(--is-fg-1); line-height: 1.25; }
.wf-node__role { font: 500 10.5px/1.3 var(--is-font-sans); color: var(--is-fg-3); }
.wf-node__warn { position: absolute; top: 8px; right: 8px; color: #c2630c; font-size: 12px; }
.wf-conn { display: flex; align-items: center; color: var(--is-fg-muted); flex: none; font-size: 13px; align-self: center; }
.wf-flowadd { margin-top: 14px; position: relative; }
.wf-inspector { border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); }
.wf-inspector__head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface-2); border-top-left-radius: var(--is-radius-md); border-top-right-radius: var(--is-radius-md); }
.wf-inspector__htxt { flex: 1; display: flex; flex-direction: column; }
.wf-inspector__htxt b { font: 700 13px var(--is-font-sans); color: var(--is-fg-1); }
.wf-inspector__htxt small { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); }
.wf-inspector__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.wf-inspector__seclbl { font: 700 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); margin-top: 2px; }
.wf-inspector--empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--is-fg-3); font: 500 13px var(--is-font-sans); }
.wf-inspector--empty i { font-size: 16px; color: var(--is-fg-muted); }

/* ════════════════════════════════════════════════════════════
   VARIJANTA 3 — vođene tip-kartice (timeline + editor)
   ════════════════════════════════════════════════════════════ */
.wf-v3 { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .wf-v3 { grid-template-columns: 1fr; } }
.wf-timeline { display: flex; flex-direction: column; gap: 0; }
.wf-tlrow { display: flex; gap: 12px; align-items: stretch; position: relative; cursor: pointer; }
.wf-tlrow::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--is-border-2); }
.wf-tlrow:first-child::before { top: 18px; }
.wf-tlrow:last-child::before { bottom: calc(100% - 18px); }
.wf-tldot { width: 36px; height: 36px; margin: 9px 0; border-radius: 999px; display: grid; place-items: center; flex: none; z-index: 1; font: 700 13px var(--is-font-mono); background: var(--wfbg, var(--is-bg-surface-3)); color: var(--wfc, var(--is-fg-2)); border: 1.5px solid var(--wfc, var(--is-border-2)); }
.wf-tldot--start { background: var(--is-bg-surface-3); color: var(--is-fg-2); border-color: var(--is-border-2); font-size: 13px; }
.wf-tldot--ok { background: #e8f6ec; color: #1a7a3a; border-color: #c2e5cd; font-size: 14px; }
.wf-tldot--add { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border-color: #cfe4f4; border-style: dashed; }
.wf-tlrow--anchor, .wf-tlrow--add { cursor: default; }
.wf-tltxt { display: flex; flex-direction: column; justify-content: center; }
.wf-tltxt b { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.wf-tltxt small { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); }
.wf-tlcard { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; margin: 6px 0; padding: 11px 13px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); transition: all .12s; }
.wf-tlrow:hover .wf-tlcard { border-color: var(--is-border-3); background: var(--is-bg-surface-2); }
.wf-tlrow.is-sel .wf-tlcard { border-color: var(--is-brand-blue-700); box-shadow: 0 0 0 3px rgba(42,111,219,.14); background: var(--is-bg-surface); }
.wf-tlcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wf-tlcard__txt > b { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.wf-tlcard__cilj { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); }
.wf-tlcard__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.wf-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 9.5px var(--is-font-sans); color: var(--is-fg-2); padding: 2px 7px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-2); }
.wf-chip i { font-size: 8px; }
.wf-chip--warn { color: #8a5a00; background: var(--is-warning-bg); border-color: #f0d77a; }
.wf-tlcard__go { color: var(--is-fg-muted); font-size: 12px; flex: none; }
.wf-editor { border: 1px solid var(--is-border-2); border-radius: var(--is-radius-md); background: var(--is-bg-surface); padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.wf-editor__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wf-editor__head b { font: 700 14px var(--is-font-sans); color: var(--is-fg-1); }
.wf-editor__seclbl { font: 700 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.wf-editor__empty { display: flex; align-items: center; gap: 10px; padding: 30px 16px; color: var(--is-fg-3); font: 500 13px var(--is-font-sans); }
.wf-editor__empty i { color: var(--is-fg-muted); }

/* ── Footer ────────────────────────────────────────────────── */
.wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface-2); flex-wrap: wrap; border-bottom-left-radius: var(--is-radius-md); border-bottom-right-radius: var(--is-radius-md); }
.wf-foot__status { font: 600 12.5px var(--is-font-sans); display: inline-flex; align-items: center; gap: 7px; }
.wf-foot__ok { color: #1a7a3a; display: inline-flex; align-items: center; gap: 7px; }
.wf-foot__warn { color: #8a5a00; display: inline-flex; align-items: center; gap: 7px; }
.wf-foot__act { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.wf-cancel { background: transparent; border: 0; cursor: pointer; font: 600 13px var(--is-font-sans); color: var(--is-fg-3); padding: 8px 10px; }
.wf-cancel:hover:not(:disabled) { color: var(--is-fg-1); text-decoration: underline; }
.wf-cancel:disabled { opacity: .4; cursor: not-allowed; }