.myjobs-container {
  padding: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

// ── Connection bar ────────────────────────────────────────────────────────
.conn-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;

  &.conn-ok  { background: #e8f5e9; color: #2e7d32; }
  &.conn-off { background: #fce4ec; color: #c62828; }
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

// ── KPI cards ─────────────────────────────────────────────────────────────
.kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.kpi-card {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f5f5f5;
  border-left: 4px solid #9e9e9e;

  &.running   { border-color: #1976d2; background: #e3f2fd; }
  &.completed { border-color: #388e3c; background: #e8f5e9; }
  &.failed    { border-color: #d32f2f; background: #fce4ec; }
}

.kpi-value { font-size: 24px; font-weight: 600; }
.kpi-label { font-size: 12px; color: #666; }

@media (prefers-color-scheme: dark) {
  .kpi-card           { background: #303030; border-color: #616161; }
  .kpi-card.running   { background: #1a237e22; border-color: #42a5f5; }
  .kpi-card.completed { background: #1b5e2022; border-color: #66bb6a; }
  .kpi-card.failed    { background: #b71c1c22; border-color: #ef5350; }
  .kpi-label          { color: #aaa; }
}

// ── Filter bar ────────────────────────────────────────────────────────────
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-field { min-width: 140px; }
.search-field { flex: 1 1 200px; }

// ── Loading ───────────────────────────────────────────────────────────────
.loading-row {
  display: flex;
  justify-content: center;
  padding: 32px;
}

// ── Empty state ───────────────────────────────────────────────────────────
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px;
  color: #9e9e9e;
  mat-icon { font-size: 48px; width: 48px; height: 48px; }
}

// ── Job card ──────────────────────────────────────────────────────────────
.job-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s;

  &:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}

.job-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.job-identity {
  display: flex;
  flex-direction: column;
  flex: 1 1 160px;
}

.job-type { font-weight: 500; font-size: 14px; }
.job-id   { font-size: 11px; color: #9e9e9e; }

.shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  color: #6a1b9a;

  mat-icon {
    font-size: 13px;
    width: 13px;
    height: 13px;
  }
}

.job-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.job-time {
  font-size: 11px;
  color: #9e9e9e;
  margin-right: 6px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .job-card      { border-color: #424242; }
  .job-id        { color: #757575; }
  .job-time      { color: #757575; }
  .shared-badge  { color: #ce93d8; }
}

// ── Status badge ──────────────────────────────────────────────────────────
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;

  &.sm { padding: 2px 7px; font-size: 10px; }

  &.status-pending   { background: #fff3e0; color: #e65100; }
  &.status-running   { background: #e3f2fd; color: #1565c0; }
  &.status-completed { background: #e8f5e9; color: #2e7d32; }
  &.status-failed    { background: #fce4ec; color: #b71c1c; }
  &.status-cancelled { background: #f5f5f5; color: #616161; }
  &.status-retrying  { background: #ede7f6; color: #4527a0; }
}

@media (prefers-color-scheme: dark) {
  .status-badge {
    &.status-pending   { background: #3e2000; color: #ffb74d; }
    &.status-running   { background: #0d2040; color: #64b5f6; }
    &.status-completed { background: #0d2e0d; color: #81c784; }
    &.status-failed    { background: #3b0000; color: #ef9a9a; }
    &.status-cancelled { background: #2a2a2a; color: #bdbdbd; }
    &.status-retrying  { background: #1a0e35; color: #ce93d8; }
  }
}

// ── Run history ───────────────────────────────────────────────────────────
.run-history {
  padding: 0 14px 12px;
  background: #fafafa;
  border-top: 1px solid #e0e0e0;
}

.runs-loading {
  display: flex;
  justify-content: center;
  padding: 12px;
}

.runs-empty {
  color: #9e9e9e;
  font-size: 13px;
  padding: 8px 0;
}

.runs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;

  th, td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
  }

  th { font-weight: 600; color: #616161; }
}

.error-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

@media (prefers-color-scheme: dark) {
  .run-history { background: #1e1e1e; border-color: #424242; }
  .runs-table th { color: #9e9e9e; }
  .runs-table th, .runs-table td { border-color: #424242; }
}

// ── Pagination ────────────────────────────────────────────────────────────
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  color: #616161;
}