.comparison-container { padding: 16px; }

.selector-panel {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.node-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.node-select-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;

    &:hover { border-color: #1976d2; background: #f3f8ff; }
    &.selected { border-color: #1976d2; background: #e3f2fd; }
    &.stale { border-color: #f44336; opacity: 0.7; }

    .node-check {
        width: 20px;
        height: 20px;
        border: 2px solid #1976d2;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        .check-icon { color: #1976d2; font-size: 13px; font-weight: 700; }
    }

    .node-info { flex: 1; min-width: 0; }
    .node-instance { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .node-state {
        font-size: 11px; font-weight: 600;
        &.active { color: #2e7d32; }
        &.stale  { color: #c62828; }
    }

    .jobs-badge { font-size: 11px; background: #e3f2fd; color: #1565c0; padding: 2px 6px; border-radius: 10px; }
}

.compare-action { display: flex; justify-content: flex-end; }

.results-panel { }

.kpi-comparison-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.node-kpi-column {
    flex: 1;
    min-width: 160px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;

    .node-kpi-header {
        background: #f5f5f5;
        padding: 10px 14px;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kpi-item {
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f0;
        &:last-child { border-bottom: none; }
        &.kpi-warn .kpi-value { color: #c62828; }
    }
    .kpi-value { font-size: 22px; font-weight: 700; color: #333; }
    .kpi-label { font-size: 11px; color: #888; margin-top: 2px; }
}

.failing-jobs-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.failing-column {
    flex: 1;
    min-width: 200px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;

    .failing-header {
        background: #fafafa;
        padding: 8px 12px;
        font-weight: 600;
        font-size: 12px;
        border-bottom: 1px solid #e0e0e0;
    }
}

.failing-table {
    width: 100%; border-collapse: collapse;
    th { padding: 7px 12px; font-size: 11px; color: #666; text-align: left; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
    td { padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #f5f5f5; }
}

.fail-badge { background: #ffebee; color: #c62828; padding: 2px 6px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.no-fails { padding: 16px; text-align: center; color: #9e9e9e; font-size: 12px; }

.empty-state { text-align: center; color: #9e9e9e; padding: 48px; font-size: 14px; }
.access-denied {
    text-align: center; padding: 64px; color: #9e9e9e;
    mat-icon { font-size: 48px; width: 48px; height: 48px; }
    p { font-size: 14px; margin-top: 8px; }
}