.workflow-topbar {
    height: 56px;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}

.workflow-container {
    padding: 0;
    display: flex;
}

/* layout */
#workflow-leftStage {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* keep a rule for #workflow-rightBar in case something remains, but hide it */
#workflow-rightBar {
    display: none;
}

/* stage wrap and stage (grid moved to stageWrap) */
#workflow-stageWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    /* grid background now on stageWrap so pan/fit doesn't expose a plain area */
    background-color: #ffffff;
    background-size: 20px 20px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* stage is transformed (no grid) */
#workflow-stage {
    position: relative;
    width: 3000px;
    height: 2000px;
    transform-origin: 0 0;
    background-image: none;
}

/* node - square, image centered, title outside/below border */
.workflow-node {
    width: 110px;
    height: 110px;
    padding: 0;
    background: rgb(4,20,39);
    border-radius: 8px;
    border: 2px solid rgb(255 255 255 / 48%);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.06);
    position: absolute;
    cursor: grab;
    user-select: none;
    overflow: visible; /* allow title to sit outside */
}

    .workflow-node:active {
        cursor: grabbing;
    }

    .workflow-node .workflow-node-body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: transparent;
    }

    /* Platform logosu. Iki sey onemli:
       - contain: logolar farkli en-boy oranlarinda (Amazon genis, Stripe dar);
         `cover` bunlarin kenarlarini kirpiyordu.
       - beyaz "chip": node zemini koyu lacivert, siyah/koyu logolar (Amazon,
         OpenAI) uzerinde kayboluyordu. Sabit kutu ayni zamanda her node'un
         ayni buyuklukte gorunmesini saglar. */
    .workflow-node .workflow-thumb {
        width: 62px;
        height: 62px;
        object-fit: contain;
        display: block;
        background: #ffffff;
        border-radius: 14px;
        padding: 9px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    }

    .workflow-node .workflow-thumb-emoji {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .workflow-node .workflow-thumb-emoji {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        font-size: 30px;
        line-height: 1;
    }

    /* title positioned under the node border */
    .workflow-node .workflow-node-title {
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-size: 13px;
        color: #e9e9e9bd;
    }

    /* subtitle: initial CSS fallback; precise vertical position is adjusted in JS
   to support multi-line wrapping of the title without overlap. */
    .workflow-node .workflow-node-subtitle {
        position: absolute;
        left: 0;
        top: auto; /* JS will compute an appropriate top so subtitle always sits below title */
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 11px;
        color: #6c757d;
        /* Metin JS'te kisaltiliyor (nodeAciklamaKisalt); bu kural son savunma:
           beklenmedik uzun bir metin gelse bile kart dagilmasin. */
        padding: 0 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
        word-break: break-word;
        cursor: help;
    }

.workflow-drag-ghost {
    position: absolute;
    pointer-events: none;
    z-index: 1040;
    width: 140px;
    opacity: 0.9;
    transform: translate(-8px, -8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

/* settings & delete buttons hidden until hover - appear at top-right */
.workflow-node .workflow-btn-settings,
.workflow-node .workflow-btn-delete {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    z-index: 20;
    padding: 4px 6px;
    font-size: 12px;
    border: none;
}

.workflow-node .workflow-btn-delete {
    top: 0px;
    right: 29px;
}

.workflow-node:hover .workflow-btn-settings,
.workflow-node:hover .workflow-btn-delete {
    display: inline-block;
}

/* start node */
.workflow-start-node {
    /*background: #ffffff;*/
    border-radius: 30% 8% 8% 30%;
}

    .workflow-start-node .workflow-thumb {
        object-fit: contain;
    }

.workflow-node.workflow-start-node .workflow-node-left-icon {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* allow clicks to pass through to node */
    z-index: 6;
}

    .workflow-node.workflow-start-node .workflow-node-left-icon .workflow-bolt {
        font-size: 25px;
        color: #ff8a00; /* orange */
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
        line-height: 1;
    }

.workflow-node.workflow-selected {
    outline: 3px solid rgba(13, 110, 253, 0.18);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.08);
    border-color: rgba(13, 110, 253, 0.25);
}

/* connection delete label style (overlay) */
.workflow-conn-delete-label {
    display: inline-block;
    background: #ff4d4d;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%); /* better vertical centering on the connector */
}

/* states */
.workflow-running {
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.35);
    border-color: #f59e0b !important;
}

.workflow-success {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
    border-color: #22c55e !important;
}

.workflow-failed {
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.28);
    border-color: #ef4444 !important;
}

.workflow-pending {
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.35);
    border-color: #0b0cf5 !important;
}

/* spinner overlay centered inside node */
.workflow-node .workflow-node-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-top-color: #ff8a00;
    box-sizing: border-box;
    z-index: 60;
    pointer-events: none;
    animation: node-spin 900ms linear infinite;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

@keyframes node-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Run button active visual */
#workflow-btnRun.workflow-active-running {
    /*    background-color: #fff7ed;
    border-color: #ff8a00;
    color: #000;
    box-shadow: 0 4px 18px rgba(255, 138, 0, 0.12);*/
    --vz-btn-bg: var(--vz-danger);
    --vz-btn-border-color: var(--vz-danger);
    --vz-btn-hover-bg: var(--vz-danger-text-emphasis);
    --vz-btn-hover-border-color: var(--vz-danger-text-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-danger-rgb);
    --vz-btn-active-bg: var(--vz-danger-text-emphasis);
    --vz-btn-active-border-color: var(--vz-danger-text-emphasis);
}

/* locked Edit Mode button indicator */
.workflow-toolbar-btn.locked::after {
    content: " 🔒";
}

/* ─── Node Card (sidebar / offcanvas) ────────────────────────────────────── */
.workflow-sidebar-item.wf-node-card {
    display: block;
    padding: 0;
    border: 1px solid var(--vz-border-color);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: grab;
    background: var(--vz-card-bg);
    transition: box-shadow .15s, border-color .15s, transform .12s;
    user-select: none;
    overflow: hidden;
}

.workflow-sidebar-item.wf-node-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.10);
    border-color: var(--vz-primary);
    transform: translateY(-1px);
}

.workflow-sidebar-item.wf-node-card:active {
    cursor: grabbing;
    transform: translateY(0);
}

.wf-node-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 10px;
}

.wf-node-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wf-node-avatar-emoji {
    font-size: 20px;
    line-height: 1;
}

.wf-node-avatar-letter {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.wf-node-avatar-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* Logo tasiyan avatar: renkli marka isareti, tipin subtle zemini yerine notr
   beyaz uzerinde durur -- yoksa her platform farkli bir renk kutusunda gorunuyor. */
.wf-node-avatar.wf-node-avatar-logo {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10);
}

/* Node detay panelindeki (offcanvas) simge. */
.wf-panel-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    padding: 4px;
}

.wf-panel-icon-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 0;
}

.wf-node-info {
    flex: 1;
    min-width: 0;
}

.wf-node-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.wf-node-desc {
    font-size: 11.5px;
    color: var(--vz-text-muted);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.wf-node-ports {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.wf-port-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.4;
}

.wf-port-in {
    background: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

.wf-port-out {
    background: var(--vz-success-bg-subtle);
    color: var(--vz-success);
}

.wf-node-usage-hint {
    font-size: 10.5px;
    color: var(--vz-text-muted);
    padding: 5px 14px 7px;
    border-top: 1px solid var(--vz-border-color);
    background: var(--vz-light);
    opacity: 0;
    transition: opacity .15s;
}

.workflow-sidebar-item.wf-node-card:hover .wf-node-usage-hint {
    opacity: 1;
}

.workflow-sidebar-item.wf-node-card:active {
    cursor: grabbing;
}

/* timeline */
#workflow-timeline {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 320px;
    max-height: 280px;
    background: rgb(4 20 39);
    border: 1px solid #303d4c;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
    padding: 10px;
    overflow: auto;
    font-size: 13px;
    z-index: 1;
    transition: max-height 220ms ease, opacity 180ms ease;
}

    /* collapsed state: minimize vertically, keep button visible */
    #workflow-timeline.collapsed {
        max-height: 40px;
        overflow: hidden;
        padding-top: 8px;
        padding-bottom: 8px;
    }

/* toggle button (handle) */
.workflow-timeline-toggle {
    position: absolute;
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
    width: 28px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    z-index: 1; /* above timeline, below modals */
    padding: 0;
    line-height: 1;
    color: rgba(0, 0, 0, 60%);
}

/* small helpers inside timeline */
#workflow-timeline .workflow-entry {
    margin-bottom: 6px;
    color: #fff;
}

#workflow-timeline .workflow-time {
    color: #6c757d;
    font-size: 12px;
    margin-right: 6px;
}

/* controls panel moved bottom-left */
.workflow-controls-panel {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgb(4 20 39);
    padding: 6px;
    border-radius: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    z-index: 1;
    /*box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);*/
}

.workflow-ctrl-btn {
    /*background: #fff;*/
    /*border: 1px solid #e6e9ee;*/
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

/*  .workflow-ctrl-btn:hover {
        background: #f5f7fb;
    }*/

/* miniView top-right - improved style and pointer */
#workflow-miniView {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 220px;
    height: 140px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid rgba(230, 235, 245, 0.9);
    border-radius: 8px;
    /*box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);*/
    z-index: 1;
    cursor: pointer;
    display: block;
    /* removed padding to avoid layout/size feedback when resizing canvas */
    padding: 0;
    box-sizing: border-box;
}

.workflow-start-node-add-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.workflow-node-add-btn {
    position: absolute;
    top: 65px;
    right: 20px;
}

/* small helpers */
.workflow-small-muted {
    font-size: 12px;
    color: #6c757d;
}

.workflow-toolbar-btn {
    margin-right: 8px;
}

/* make stageWrap show grab cursor for panning */
#workflow-stageWrap {
    cursor: grab;
}

    #workflow-stageWrap:active {
        cursor: grabbing;
    }

/* Offcanvas custom width and floating toggle button */
.offcanvas.offcanvas-end {
    /* use Bootstrap variable to control width */
    --bs-offcanvas-width: 360px;
}

/* Floating toggle button on the right edge */
.workflow-offcanvas-toggle {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1080;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.18);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .workflow-offcanvas-toggle:hover {
        transform: translateY(-50%) scale(1.03);
    }

/* small responsive tweak so offcanvas toggle doesn't overlap timeline on narrow screens */
@media (max-width: 700px) {
    .workflow-offcanvas-toggle {
        right: 8px;
    }
}

/* Port label styling: small, semi-transparent like the node title, non-interactive */
.workflow-port-label {
    position: absolute;
    font-size: 0.8rem;
    /* Okunabilirlik: gri/soluk yerine koyu metin ve tam opaklik. Etiket zaten
       beyaz bir zemin uzerinde duruyordu, gri metin kontrasti dusuruyordu. */
    color: #1f2d3d;
    font-weight: 500;
    opacity: 1;
    pointer-events: none;
    white-space: nowrap;
    /* Baglanti oklarinin USTUNDE dursun. Onceki deger 1'di ve yetmiyordu:
       jsPlumb connector'lari z-index 8 ile ciziliyor, yani ok etiketin uzerine
       biniyor ve giris/cikis metni okunmuyordu (tarayicida olculdu: etiket
       z=1 / konnektor z=8, kutular ust uste).
       12 secildi: konnektorun (8) ustunde, node'un ayar/sil dugmelerinin (20)
       altinda - dugmeler etiketin arkasinda kalmasin. */
    z-index: 12;
    /* move the label upward so it sits above the connection line */
    transform: translateY(-50%);
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06);
    width: max-content;
}

    /* left side labels appear to the left of the node */
    .workflow-port-label.left {
        right: 8rem; /* positioned outside the node to the left; adjust if needed */
        text-align: right;
    }

    /* right side labels appear to the right of the node */
    .workflow-port-label.right {
        left: 8rem; /* positioned outside the node to the right; adjust if needed */
        text-align: left;
    }

/* When jsPlumb renders label overlays we want a similar visual */
.jsplumb .workflow-port-label {
    /* keep background so label still covers the line overlay */
    background: rgba(255, 255, 255, 0.95);
}

/* Small responsive tweak if nodes get narrow */
@media (max-width: 800px) {
    .workflow-port-label.left,
    .workflow-port-label.right {
        left: -6rem;
        right: -6rem;
        font-size: 0.75rem;
    }
}

/* --- START: Optional visual classes for port highlights --- */
/* These classes can be used by alternative highlight approaches if you prefer class toggling. */
.workflow-port-allowed {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12) !important;
    outline: 2px solid rgba(34, 197, 94, 0.18) !important;
}

.workflow-port-denied {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.10) !important;
    outline: 2px solid rgba(239, 68, 68, 0.14) !important;
}
/* --- END --- */


#workflow-startNodeList .workflow-sidebar-item.wf-node-card.selected {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb, 64,122,219), .15);
}

#workflow-startNodeList .workflow-sidebar-item.wf-node-card.selected .wf-node-usage-hint {
    opacity: 1;
}




.workflow-node .workflow-node-result {
    position: absolute; /* positioned relative to the node (node remains position:absolute) */
    right: 6px;
    bottom: 6px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    z-index: 90;
    pointer-events: auto; /* allow hover for failed tooltip */
    transform: translateZ(0); /* avoid paint/layout shifts */
}

    /* success badge (green check) */
    .workflow-node .workflow-node-result.success {
        background: linear-gradient(180deg,#34d399,#10b981);
        border: 1px solid rgba(16,185,129,0.12);
    }

    /* failed badge (red exclamation) */
    .workflow-node .workflow-node-result.failed {
        background: linear-gradient(180deg,#fb7185,#ef4444);
        border: 1px solid rgba(239,68,68,0.12);
        cursor: default;
    }

        /* show inline exclamation/check characters reliably */
        .workflow-node .workflow-node-result.success::after,
        .workflow-node .workflow-node-result.failed::after {
            content: attr(data-char);
            display: inline-block;
        }

    /* If JS doesn't set `data-char` we fallback to characters */
    .workflow-node .workflow-node-result.success::after {
        content: "✓";
    }

    .workflow-node .workflow-node-result.failed::after {
        content: "!";
    }

    /* Hover tooltip for failures uses the badge's `data-error` attribute (the JS sets this on the badge).
   Tooltip rendered from a pseudo-element so it doesn't affect layout. */
    .workflow-node .workflow-node-result.failed:hover::before {
        content: attr(data-error);
        position: absolute;
        right: calc(100% + 10px);
        bottom: 50%;
        transform: translateY(50%);
        white-space: nowrap;
        background: rgba(17,17,17,0.92);
        color: #fff;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 12px;
        z-index: 200;
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
        pointer-events: none;
    }

/* small responsive tweak */
@media (max-width: 600px) {
    .workflow-node .workflow-node-result {
        right: 4px;
        bottom: 4px;
        min-width: 18px;
        height: 18px;
        font-size: 11px;
    }

        .workflow-node .workflow-node-result.failed:hover::before {
            font-size: 11px;
        }
}

#workflowHistoryDetailOffcanvas {
    width: 22vw;
}

@media (max-width: 768px) {
    #workflowHistoryDetailOffcanvas {
        width: 100vw;
    }
}

#workflow-history-sideOffcanvas {
    width: 22vw;
}

@media (max-width: 768px) {
    #workflow-history-sideOffcanvas {
        width: 100vw;
    }
}

#nodeActivityList > .list-group-item.active {
    background-color: unset;
    border-color: var(--vz-list-group-active-border-color);
    border-left-width: 5px;
    border-bottom: var(--vz-list-group-border-width) solid var(--vz-list-group-border-color);
    border-top: var(--vz-list-group-border-width) solid var(--vz-list-group-border-color);
}

/* ─── Workflow Run Result Banner ─────────────────────────────────────────────*/
.wf-result-banner {
    border-bottom: 1px solid transparent;
    animation: wf-banner-in .2s ease;
}

.wf-result-banner--success {
    background-color: var(--vz-success-bg-subtle);
    border-color: var(--vz-success-border-subtle);
    color: var(--vz-body-color);
}

.wf-result-banner--danger {
    background-color: var(--vz-danger-bg-subtle);
    border-color: var(--vz-danger-border-subtle);
    color: var(--vz-body-color);
}

@keyframes wf-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Workflow Index Cards ───────────────────────────────────────────────────*/
.wf-index-card {
    transition: box-shadow .2s, transform .15s;
    cursor: pointer;
}

.wf-index-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

/* Pasif is akisi: karti listede bir bakista ayirt edilebilir kil.
   Renk, karttaki durum rozetiyle (bg-danger-subtle text-danger) ayni dili
   konusur; isActive karari view'da zaten uretiliyor, burada kopyalanmaz. */
.wf-index-card-passive {
    border: 2px solid var(--bs-danger, #dc3545);
}

.wf-index-card-passive:hover {
    box-shadow: 0 6px 24px rgba(220, 53, 69, .22);
}

.wf-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-sparkline-wrap .apexcharts-canvas {
    margin: 0 auto;
}

.wf-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.wf-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/*
 * Iptal edilen calistirma rozeti.
 * Bootstrap yardimci siniflari bu temada gri VERMIYOR: bg-secondary mavi
 * (#4788ff), bg-dark/bg-light ise koyu lacivert - kart zemininde kayboluyor.
 * Bu yuzden acik bir gri taniminir; deger, grafikteki iptal rengiyle ayni
 * (#6b7280, bkz. Views/Workflow/Index.cshtml statusColors).
 */
.wf-badge-cancelled {
    background-color: #6b7280;
    color: #fff;
}

/*
 * Gecmis satirindaki ikon kutusu sinif adini `${statusInfo.class}-subtle`
 * diye TURETIYOR (workflow.js). Bu eslik eden sinif tanimli olmazsa kutu
 * temanin varsayilanina (turuncu) duser.
 */
.wf-badge-cancelled-subtle {
    background-color: rgba(107, 114, 128, 0.18);
    color: #9aa1ad;
}

/* ==========================================================================
   Baglanti gorunurlugu ve okunabilirligi
   Not: bu dosyada daha once .jtk-* icin TEK BIR kural bile yoktu; cizgiler
   tamamen jsPlumb'in satir ici stiline birakilmisti.
   ========================================================================== */

/* Cizgiler dugumlerin ALTINDA kalir (dugum gorselini kesmesin), ama zeminden
   yukarida durur. Odaklanan/hover edilen cizgi ustte gosterilir. */
.jtk-connector {
    z-index: 8;
}

.jtk-connector path {
    transition: stroke 0.12s ease, stroke-width 0.12s ease, opacity 0.12s ease;
}

.jtk-connector:hover,
.jtk-connector.is-focused {
    z-index: 26;
}

/* Ok ucu cizgiyle ayni rengi alsin.

   Ok ucu bir DOLGU seklidir, cizgi degil. jsPlumb onu
   "M284,35 L273,40.5 L275.2,35 L273,29.5 L284,35" olarak yazar: path `Z` ile
   KAPATILMAZ. Bu yuzden tepe noktasi bir kose birlesimi (miter) degil, ust
   uste binen iki UCTUR -- ok ucuna stroke verilirse `stroke-linecap: butt`
   tam tepede DUZ KESER. Asagidaki durum kurallari cizgiyi kalinlastirdigi
   (3.5 px / calisirken 5 px) ve `path` seciciyle ok ucunu da kapsadigi icin
   bu kesik gozle gorulur hale gelmisti: "oklarin ucu kirik" gorunumu buydu.
   Olculdu: kesik, SVG tuvalinin sag kenarinda degil tam tepe noktasindaydi;
   yani sorun alanin yetmemesi degil, ok ucunun cizgilenmesiydi.

   Bu yuzden ok ucuna HICBIR durumda stroke verilmez; rengini fill tasir.
   Secici nth-child(n+2): bir baglantida birden fazla ok ucu overlay'i
   olabiliyor ve yalniz ilki renklenince digeri gri kaliyordu. */
.jtk-overlay {
    fill: #9fb3c8;
    stroke: #9fb3c8;
}

/* NOT: durum kurallari bilerek `path:first-child` ile YALNIZ cizgiyi hedefler.
   Duz `path` yazilinca belirleyicilik bu kuralla esitleniyor, dosyada sonra
   geldikleri icin kazaniyor ve ok ucuna yine stroke veriyorlardi. */
.jtk-connector path:nth-child(n+2) {
    fill: #9fb3c8;
    stroke: none !important;
    stroke-width: 0 !important;
    stroke-dasharray: none !important;
    animation: none !important;
}

/* Odak: secili/hover edilen dugume bagli cizgiler one cikar */
.jtk-connector.is-focused path:first-child {
    stroke: #4dabf7 !important;
    stroke-width: 5 !important;
}

.jtk-connector.is-focused path:nth-child(n+2) {
    fill: #4dabf7 !important;
}

/* ...digerleri solar. pointer-events kapatilmaz: solmus cizgi hala tiklanabilir. */
.jtk-connector.is-dimmed {
    opacity: 0.2;
}

/* Tanimi katalogda bulunamayan dugum: sessizce normal gorunmesin */
.workflow-node.workflow-node-unknown {
    border-color: #f59f00;
    box-shadow: 0 0 0 2px rgba(245, 159, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.workflow-node-unknown-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59f00;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    z-index: 30;
    cursor: help;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Calisma animasyonu: veri akan baglanti
   Saf CSS (stroke-dasharray + kayan dashoffset); ek kutuphane yok.
   Sinif atamasi workflow.js'teki durum yoklamasinda yapilir.
   ========================================================================== */

@keyframes workflow-akis {
    to {
        stroke-dashoffset: -46; /* (14+9) x 2 -- tam iki tire boyu kayar */
    }
}

/* Hedef dugum calisiyor: veri bu cizgide akiyor.
   Tire/bosluk bilerek buyuk tutuldu -- ince kesik cizgi koyu zeminde
   "akiyor" gibi okunmuyordu. !important gerekli: jsPlumb boyama stilini
   SVG ozniteligi olarak yazar ve bazi kurallarla catisir. */
.jtk-connector.is-running path:first-child {
    stroke: #4dabf7 !important;
    stroke-width: 5 !important;
    stroke-dasharray: 14 9 !important;
    stroke-linecap: round !important;
    animation: workflow-akis 0.5s linear infinite !important;
}

.jtk-connector.is-running {
    z-index: 26;
}

.jtk-connector.is-running path:nth-child(n+2) {
    fill: #4dabf7 !important;
}

/* Tamamlandi */
.jtk-connector.is-done path:first-child {
    stroke: #2f9e44 !important;
    stroke-width: 3.5 !important;
}

.jtk-connector.is-done path:nth-child(n+2) {
    fill: #2f9e44 !important;
}

/* Hata */
.jtk-connector.is-failed path:first-child {
    stroke: #e03131 !important;
    stroke-width: 3.5 !important;
}

.jtk-connector.is-failed path:nth-child(n+2) {
    fill: #e03131 !important;
}

/* Hareket hassasiyeti olan kullanicilar icin: renk kalir, kayma durur. */
@media (prefers-reduced-motion: reduce) {
    .jtk-connector.is-running path:first-child {
        animation: none;
        stroke-dasharray: none;
    }
}

/* --- Baglanti ucu vurgusu: hangi node'dan hangi node'a? ---
   Bir cizginin uzerine gelince kaynak ve hedef node halka ile isaretlenir,
   cizginin ortasinda "Kaynak -> Hedef" etiketi belirir. Kalici etiket yerine
   hover secildi: 7-8 baglantida kalici etiketler canvas'i okunmaz yapiyordu. */
.workflow-node.workflow-node-uc-kaynak {
    box-shadow: 0 0 0 3px #f59f00, 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.workflow-node.workflow-node-uc-hedef {
    box-shadow: 0 0 0 3px #4dabf7, 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.workflow-conn-label {
    background: rgba(4, 20, 39, 0.95);
    color: #e9f2ff;
    border: 1px solid #4dabf7;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 40;
}

.workflow-conn-label .wcl-kaynak {
    color: #ffd43b;
}

.workflow-conn-label .wcl-hedef {
    color: #74c0fc;
}

/* ── Baglama kontrolu (ayar formu) ───────────────────────────────────────── */
.wf-binding {
    margin-top: 6px;
}

.wf-binding-modes .btn {
    font-size: 11px;
    padding: 2px 8px;
}

.wf-binding-sample {
    font-size: 11.5px;
    color: #6c757d;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Baglanmis alanin kendi girdisi pasiflesir: deger artik yukari akistan gelir,
   formdaki metin yaniltici olurdu. */
.wf-binding-bound input,
.wf-binding-bound select,
.wf-binding-bound textarea {
    opacity: .5;
}

/* ── Node girdi/cikti blogu ──────────────────────────────────────────────── */
.wf-io > summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 0;
}

.wf-io-pre {
    max-height: 260px;
    overflow: auto;
    font-size: 11.5px;
    line-height: 1.45;
    background: rgba(0, 0, 0, .25);
    border-radius: 6px;
    padding: 10px;
    margin: 4px 0 0;
}

.wf-io-bos {
    font-size: 12px;
    color: #6c757d;
    padding: 2px 0;
}

/* ── Node ayar modali: uc panel ──────────────────────────────────────────── */
/* Genis ekranda girdi | parametreler | cikti yan yana; dar ekranda alt alta.
   Parametre sutunu digerlerinden genis: asil is orada yapiliyor. */
.wf-node-modal-body {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 12px;
    padding: 12px;
}

@media (max-width: 991.98px) {
    .wf-node-modal-body {
        grid-template-columns: 1fr;
    }
}

.wf-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    overflow: hidden;
}

.wf-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa8bd;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Baslik + altindaki tek satirlik aciklama. Aciklama STATIK: paneli ilk kez
   goren "girdi" ile neyin kastedildigini denemeden anlasin diye var.
   Sagdaki .wf-panel-hint ise CANLI durum yazisi (bkz. workflow.binding.js). */
.wf-panel-baslik {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wf-panel-alt {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #6c7a90;
}

.wf-panel-hint {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #6c7a90;
}

/* Girdi panelinin canli yonergesi. Bos metin verildiginde SATIR TAMAMEN
   kaybolsun diye :empty gizleniyor -- bos bir kutu "bir sey eksik" izlenimi
   veriyordu. */
.wf-panel-yonerge {
    padding: 7px 12px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #a9b6c9;
    background: rgba(90, 143, 214, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wf-panel-yonerge:empty {
    display: none;
}

.wf-panel-body {
    flex: 1;
    min-height: 220px;
    max-height: 62vh;
    overflow: auto;
    padding: 10px 12px;
}

/* ── Cikti agaci ─────────────────────────────────────────────────────────── */
.wf-tree, .wf-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wf-tree ul { padding-left: 14px; }

.wf-tree-node > .wf-tree-satir {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wf-tree-kaynak {
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    color: #c9d6e5;
    cursor: pointer;
}

.wf-tree-ad { color: #8fb7e0; }
.wf-tree-deger { color: #b9c7d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-tree-tip { color: #6c7a90; font-size: 11px; }

/* Yaprak = baglanabilir. Tiklanabilir oldugu GORUNMELI. */
.wf-tree-yaprak > .wf-tree-satir { cursor: pointer; }

.wf-tree-yaprak > .wf-tree-satir:hover {
    background: rgba(13, 110, 253, .18);
    outline: 1px solid rgba(13, 110, 253, .35);
}

/* Ornek degeri olmayan (yalnizca semadan bilinen) alan soluk durur. */
.wf-tree-semadan > .wf-tree-satir { opacity: .62; }

.wf-panel-bos {
    font-size: 12px;
    color: #6c7a90;
    line-height: 1.5;
}

/* Odaktaki parametre: sol panelden tiklanan alan BURAYA baglanir. */
.wf-binding-hedef {
    outline: 2px solid rgba(13, 110, 253, .45);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Tetikleyici govde editoru: anahtar | tip | deger | sil. Satirin dort
   parcasi birlikte okunmali, bu yuzden tek sutuna dusmez. Kaydirma alani
   SADECE .wf-trigger-rows uzerindedir -- modalin kendisi kaymaz. */
.wf-trigger-rows {
    overflow-x: auto;
}

.wf-trigger-row {
    display: grid;
    grid-template-columns: 1fr 120px 1.4fr auto;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
    min-width: 420px;
}

/* Tetikleyici bolumu yukari akis node'larindan once gelir ve onlardan
   ayrilsin diye ince bir cizgi tasir. */
.wf-tree-bolum.wf-tree-tetikleyici {
    border-bottom: 1px dashed rgba(255, 255, 255, .14);
    padding-bottom: 8px;
    margin-bottom: 8px;
}