/*
 * REPLIXA_PROJECT_PROGRESS_UI_V1
 */

.replixa-live-status {
    margin-top: 10px;
    width: 100%;
    max-width: 760px;
    font-size: 13px;
}

.replixa-live-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.replixa-live-status-label {
    font-weight: 700;
    text-transform: capitalize;
}

.replixa-live-status-stage {
    opacity: .72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.replixa-progress-track {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background:
        rgba(120,130,160,.16);
    box-shadow:
        inset 0 0 0 1px
        rgba(120,130,160,.12);
}

.replixa-progress-fill {
    position: relative;
    height: 100%;
    min-width: 0;
    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #68d8ff 0%,
            #63b8ff 27%,
            #7d8cff 52%,
            #9a72ff 76%,
            #c367ff 100%
        );

    background-size:
        220% 100%;

    box-shadow:
        0 0 14px
        rgba(116,130,255,.38);

    transition:
        width .65s cubic-bezier(.2,.8,.2,1);

    animation:
        replixaProgressFlow
        2.2s linear infinite;
}

.replixa-live-status[data-status="completed"]
.replixa-progress-fill {
    background:
        linear-gradient(
            90deg,
            #56d8ff,
            #8f7bff,
            #b96cff
        );
}

.replixa-live-status[data-status="failed"]
.replixa-progress-fill {
    background:
        linear-gradient(
            90deg,
            #ff8d9b,
            #d95779
        );

    animation: none;
}

.replixa-live-status[data-status="cancelled"]
.replixa-progress-fill {
    background:
        #9096a7;

    animation: none;
}

.replixa-live-status-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    opacity: .76;
}

.replixa-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: #70bfff;
}

.replixa-live-status[data-status="completed"]
.replixa-status-dot {
    background: #65d6b0;
}

.replixa-live-status[data-status="failed"]
.replixa-status-dot {
    background: #f0647b;
}

.replixa-live-status[data-status="queued"]
.replixa-status-dot {
    background: #b5b9c7;
}

.replixa-build-audit {
    margin-top: 24px;
    padding: 20px;
    border-radius: 16px;
    border:
        1px solid
        rgba(130,140,180,.18);
    background:
        rgba(115,125,170,.055);
}

.replixa-build-audit h2 {
    margin: 0 0 16px;
}

.replixa-build-audit-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );
    gap: 12px;
}

.replixa-build-audit-card {
    padding: 12px;
    border-radius: 10px;
    background:
        rgba(120,130,170,.07);
}

.replixa-build-audit pre {
    max-height: 380px;
    overflow: auto;
    padding: 12px;
    border-radius: 10px;
    background:
        rgba(0,0,0,.18);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
}

@keyframes replixaProgressFlow {
    0% {
        background-position:
            0% 50%;
    }

    100% {
        background-position:
            220% 50%;
    }
}