/* Global/* Add your custom styles here */

/* --- Recent Matches Table Alignment & Palette --- */
.recent-matches-table, .recent-matches-table th, .recent-matches-table td,
.status-table, .status-table th, .status-table td {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.95rem;
}
.recent-matches-table th, .recent-matches-table td,
.status-table th, .status-table td {
  padding: 12px 16px;
  vertical-align: middle;
  text-align: left;
}
.recent-matches-table th,
.status-table th {
  background: var(--cc-bg-mid, #2c3446);
  color: var(--cc-text, #e5f6ff);
  font-weight: 600;
}
.recent-matches-table tr,
.status-table tr {
  border-bottom: 1px solid var(--cc-bg-light, #b4d7e3);
}
.recent-matches-table td:last-child, .recent-matches-table th:last-child,
.status-table td:last-child, .status-table th:last-child {
  text-align: center;
}
.recent-matches-table a, .status-table a {
  color: var(--cc-accent, #60a7b9);
  text-decoration: underline;
  font-weight: 500;
}

/* For ClearerChorded palette background */
.recent-matches-table, .status-table {
  background: var(--cc-bg-dark, #1a2233);
  color: var(--cc-text, #e5f6ff);
  border-radius: 8px;
}

/* Responsive table container */
.table-container {
  width: 100%;
  overflow-x: auto;
  background: transparent;
}

/* --- End Recent Matches Table Styles --- */

/* Global status badge styles */
.status-badge {
  display: inline-block;
  min-width: 90px;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  background: #6b7280;
  color: #fff;
}

.status-badge[data-status="running"] {
  background: #22c55e;
  color: #1a2e05;
}
.status-badge[data-status="stopped"] {
  background: #ef4444;
  color: #fff;
}
.status-badge[data-status="not-running"] {
  background: #6b7280;
  color: #fff;
}
.status-badge[data-status="error"] {
  background: #f59e42;
  color: #fff;
}
.status-badge:empty {
  background: #6b7280;
  color: #fff;
}