$ci-success: #28a745;
$ci-failure: #cb2431;
$ci-running: #dbab09;
$ci-pending: #6a737d;
$ci-cancelled: #959da5;
$gray: #dfdfdf;
$gray-light: #f3f3f3;

.ci-error {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #ffeef0;
    border: 1px solid #fdaeb7;
    border-radius: 5px;
    color: $ci-failure;
    font-size: 14px;
}

.ci-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6a737d;

    code {
        background: $gray-light;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 13px;
    }
}

// Status badges
.ci-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;

    &.ci-success { background: $ci-success; }
    &.ci-failure { background: $ci-failure; }
    &.ci-running { background: $ci-running; color: #24292e; }
    &.ci-pending { background: $ci-pending; }
    &.ci-cancelled { background: $ci-cancelled; }
}

// Small inline badge for tree view
.ci-badge-inline {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;

    &.ci-success { background: $ci-success; }
    &.ci-failure { background: $ci-failure; }
    &.ci-running { background: $ci-running; }
    &.ci-pending { background: $ci-pending; }
    &.ci-cancelled { background: $ci-cancelled; }
}

// CI runs list
.ci-runs {
    border: 1px solid $gray;
    border-radius: 5px;
    overflow: hidden;
}

.ci-runs-header {
    display: flex;
    padding: 10px 15px;
    background: $gray-light;
    border-bottom: 1px solid $gray;
    font-weight: 600;
    font-size: 13px;
    color: #586069;
}

.ci-run-row {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid $gray;
    text-decoration: none;
    color: inherit;
    align-items: center;

    &:last-child { border-bottom: none; }
    &:hover { background: $gray-light; }
}

.ci-col-status { flex: 0 0 120px; }
.ci-col-branch { flex: 0 0 150px; }
.ci-col-commit { flex: 0 0 120px; }
.ci-col-time { flex: 1; text-align: right; color: #586069; font-size: 13px; }

// CI run detail page
.ci-run-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;

    h1 { margin: 0; }
}

// Restart button
.ci-restart-form {
    margin-left: auto;
}

.ci-restart-btn {
    padding: 5px 14px;
    background: #fff;
    color: #24292e;
    border: 1px solid $gray;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    &:hover {
        background: $gray-light;
        border-color: #c6cbd1;
    }
}

.ci-run-info {
    display: flex;
    gap: 20px;
    padding: 12px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid $gray;
    font-size: 13px;
    color: #586069;

    b { color: #24292e; }
    code {
        background: $gray-light;
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 12px;
    }
}

// CI job block
.ci-job {
    border: 1px solid $gray;
    border-radius: 5px;
    margin-bottom: 16px;
    overflow: hidden;
}

.ci-job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: $gray-light;
    border-bottom: 1px solid $gray;

    &.ci-success { border-left: 3px solid $ci-success; }
    &.ci-failure { border-left: 3px solid $ci-failure; }
    &.ci-running { border-left: 3px solid $ci-running; }
    &.ci-pending { border-left: 3px solid $ci-pending; }
}

// CI steps
.ci-steps {
    padding: 0;
}

.ci-step {
    border-bottom: 1px solid $gray;

    &:last-child { border-bottom: none; }
}

.ci-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    font-size: 13px;

    &.ci-success .ci-step-icon { color: $ci-success; }
    &.ci-failure .ci-step-icon { color: $ci-failure; }
    &.ci-running .ci-step-icon { color: $ci-running; }
    &.ci-pending .ci-step-icon { color: $ci-pending; }
}

.ci-step-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.ci-step-cmd {
    background: $gray-light;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #586069;
    margin-left: auto;
}

.ci-step-output {
    background: #1b1f23;
    color: #e1e4e8;
    padding: 12px 15px;
    margin: 0;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

// Create CI file button
.ci-create-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    background: #28a745;
    color: #fff !important;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    &:hover {
        background: #22863a;
    }
}

// Create file form
.create-file-form {
    margin-top: 15px;
}

.create-file-path {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 4px;

    input {
        flex: 1;
        font-size: 14px;
        padding: 6px 10px;
    }
}

.create-file-prefix {
    color: #586069;
    font-size: 14px;
    white-space: nowrap;
}

.create-file-editor {
    width: 100%;
    box-sizing: border-box;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid $gray;
    border-radius: 5px;
    resize: vertical;
    tab-size: 2;
}

.create-file-commit {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;

    input[type="text"] {
        flex: 1;
        padding: 6px 10px;
    }

    input[type="submit"] {
        padding: 6px 20px;
        background: #28a745;
        color: #fff;
        border: 1px solid #28a745;
        width: auto !important;

        &:hover {
            background: #22863a;
            border-color: #22863a;
        }
    }
}