/* Impact Score Visualization Styles */

/* Impact Level Badge Colors */
.impact-negligible { background-color: var(--v2-text-dim); color: var(--v2-surface); }
.impact-low { background-color: var(--v2-info); color: var(--v2-surface); }
.impact-moderate { background-color: var(--v2-success); color: var(--v2-surface); }
.impact-high { background-color: var(--v2-accent); color: var(--v2-surface); }
.impact-veryhigh { background-color: var(--v2-purple); color: var(--v2-surface); }
.impact-exceptional { background-color: var(--v2-warning); color: var(--v2-surface); }

/* Impact Score Card */
.impact-score-card {
    border-left: 4px solid var(--v2-accent);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Axis Visualization */
.impact-axis-item {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--v2-surface-2);
}

.axis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.axis-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.axis-score {
    font-weight: 700;
    color: var(--v2-accent);
}

.axis-bar {
    height: 6px;
    background: var(--v2-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.axis-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--v2-info), var(--v2-accent));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.axis-explanation {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Change Signature */
.change-signature {
    padding: 12px;
    background: var(--v2-accent-bg);
    border-radius: 8px;
    border-left: 3px solid var(--v2-accent);
}

.signature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Explanations */
.explanation-list {
    padding-left: 20px;
    margin: 0;
}

.explanation-list li {
    font-size: 0.85rem;
    color: var(--v2-text-dim);
    margin-bottom: 4px;
}

/* Impact Score Tab Styles */
.impact-score-overview {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.impact-overview-card {
    flex: 1;
    min-width: 200px;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--v2-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.impact-score-big {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--v2-accent);
    line-height: 1;
}

.impact-distribution-bar {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--v2-border);
    margin-bottom: 6px;
}

.impact-distribution-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.impact-commit-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--v2-border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.impact-commit-row:hover {
    background: var(--v2-surface-2);
}

.impact-commit-row.expanded {
    background: var(--v2-accent-bg);
}

.impact-commit-details {
    padding: 16px;
    background: var(--v2-accent-bg);
    border-bottom: 1px solid var(--v2-border);
    animation: fadeInDown 0.3s ease;
}

.commit-info-row {
    border-top: 1px solid var(--v2-border);
    padding-top: 8px;
}

.commit-title {
    font-weight: 500;
    color: var(--v2-text-bright);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
