/* =========================
   Pipeline Builder
========================= */


.pipeline-config {

    width:100%;

}



/*
 Main horizontal timeline
*/

.pipeline-timeline {

    display:flex;

    height:calc(100vh - 250px);

    padding-top:60px;

    gap:30px;

    width:100%;

    overflow-x:auto;

    padding:40px 20px;

    box-sizing:border-box;

    scroll-padding-left:20px;

    scroll-padding-right:20px;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:auto;

}



.timeline-scroll-top {

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:thin;

}

.timeline-scroll-top::-webkit-scrollbar {

    height:14px;

}

.timeline-scroll-top::-webkit-scrollbar-track {

    background:#f1f1f1;

}

.timeline-scroll-top::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:10px;

}

#timeline-scroll-top-inner {

    height:1px;

}

.pipeline-timeline::-webkit-scrollbar-track {

    background:#f1f1f1;

}


.pipeline-timeline::-webkit-scrollbar-thumb {

    background:#999;

    border-radius:10px;

}

/*
 Each stage + plus button
*/

.timeline-stage-wrapper {

    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;

    position:relative;

}



/*
 Blue connector line running behind each panel + button,
 and bridging the gap to the next stage
*/

.timeline-stage-wrapper::before {

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:4px;

    background:#2563eb;

    transform:translateY(-50%);

    z-index:0;

}



.timeline-stage-wrapper:not(:last-child)::after {

    content:"";

    position:absolute;

    top:50%;

    left:100%;

    width:30px;

    height:4px;

    background:#2563eb;

    transform:translateY(-50%);

    z-index:0;

}



.timeline-stage-wrapper > .stage-container {

    position:relative;

    z-index:1;

}



/*
 Fixed stage panel
*/

.stage-panel {

    width:320px;

    height:180px;

    display:flex;

    flex-direction:column;

    background:white;

    border-radius:15px;

    border:1px solid #ddd;

    overflow:hidden;

}



.stage-panel.expanded {

    height:70vh;

}



.stage-slot {

    display:none;

    min-height:0;

    overflow-y:auto;

    padding:16px;

}



.stage-panel.expanded .stage-slot {

    display:block;

}

.stage-panel:not(.expanded) .stage-slot {
    display:none;
}
.stage-panel:not(.expanded) .stage-middle {
    flex:1;
}
.required-fields {

    flex:2;

    background:#f8f8f8;

}



.stage-middle {

    flex:0 0 70px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#fafafa;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

}



.on-enter {

    flex:2;

    background:white;

}

.stage-panel:not(.expanded) {

    height:180px;

}




.on-exit {

    background:white;

}


.after-exit {

    background:#f5f5f5;

}

.slot-title {

    font-size: 13px;

    font-weight: 700;

    color: #555;

    margin-bottom: 12px;

    padding-bottom: 6px;

    border-bottom: 1px solid #eee;

}



.stage-name {

    font-weight:bold;

    font-size:18px;

}



.stage-dot {

    width:14px;

    height:14px;

    border-radius:50%;

}



/*
 Insert stage button
*/

.insert-stage {

    width:35px;

    height:35px;

    border-radius:50%;

    border:none;

    background:#2563eb;

    color:white;

    font-size:22px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    position:relative;

    z-index:1;

    flex-shrink:0;

}



.insert-stage:hover {

    background:#1d4ed8;

}



/*
 Automation cards
*/

.automation-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    margin-bottom: 8px;

    border: 1px solid #eee;

    border-radius: 8px;

    background: white;

}



.automation-card:hover {

    background:#f2f2f2;

}



.add-automation-btn {

    width:100%;

}


.empty-automation {

    color:#888;

    font-size:14px;

}



/* .hidden lives in css/auth.css */

.expand-stage {

    border:none;

    background:none;

    cursor:pointer;

    font-size:16px;

}

.pipeline-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}


.pipeline-controls {

    display:flex;

    gap:10px;

}

.automation-list {

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

    gap:8px;

    overflow-y:auto;

}


.automation-slot-inner {

    height:100%;

    display:flex;

    flex-direction:column;

}