.stats-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.bg-primary-light {
  background-color: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.bg-success-light {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.bg-warning-light {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
.bg-danger-light {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.bg-info-light {
  background-color: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}
.bg-purple-light {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.bg-orange-light {
  background-color: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}

/* Login modal */
#loginModal .modal-content {
  border: none;
  border-radius: 12px;
}

#loginModal .modal-header {
  padding-bottom: 0.25rem;
}

.project-card {
  border-left: 4px solid #0d6efd;
  transition: all 0.3s ease;
}

.project-card:hover {
  border-left-color: #0b5ed7;
}

.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.status-healthy {
  background-color: #d1e7dd;
  color: #0f5132;
}
.status-warning {
  background-color: #fff3cd;
  color: #664d03;
}
.status-critical {
  background-color: #f8d7da;
  color: #842029;
}
.status-unknown {
  background-color: #e2e3e5;
  color: #41464b;
}

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

footer {
  border-top: 1px solid #dee2e6;
}

.tech-badge {
  background-color: #f8f9fa;
  color: #6c757d;
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  display: inline-block;
}

/* Cards shared with stats-card look */
.data-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.data-card .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding: 0.75rem 1rem;
}

/* Compact data tables used on the login page */
.public-table {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.public-table thead th {
  background-color: var(--bs-table-bg, var(--bs-body-bg));
  background-image: linear-gradient(rgba(13, 110, 253, 0.05), rgba(13, 110, 253, 0.05));
  color: #495057;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(13, 110, 253, 0.12);
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
}

.public-table tbody td {
  padding: 0.45rem 0.75rem;
  vertical-align: middle;
  color: #343a40;
  border-bottom: 1px solid #f0f0f0;
}

.public-table tbody tr:last-child td {
  border-bottom: none;
}

.public-table tbody tr:hover td {
  background-image: linear-gradient(rgba(13, 110, 253, 0.03), rgba(13, 110, 253, 0.03));
}

/* Queue message count pill */
.queue-count {
  display: inline-block;
  min-width: 2.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background-color: #e9ecef;
  color: #6c757d;
}

.queue-count.has-messages {
  background-color: rgba(255, 193, 7, 0.2);
  color: #856404;
}

/* Processing state numeric cells */
.state-count {
  color: #adb5bd;
  font-size: 0.8rem;
}

.state-count.non-zero {
  color: #0d6efd;
  font-weight: 600;
}

/* Idle Pull Requests title cell — keep long titles on one line */
.public-table .pr-title {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recent Activity list */
.activity-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background-color: rgba(13, 110, 253, 0.03);
}

.activity-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #343a40;
  margin-bottom: 0.1rem;
}

.activity-time {
  display: block;
  font-size: 0.75rem;
  color: #adb5bd;
}

.activity-empty {
  padding: 1.5rem;
  text-align: center;
  color: #adb5bd;
  font-size: 0.875rem;
}

/* System Status rows */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.status-row-label {
  font-size: 0.875rem;
  color: #495057;
}

/* Performance / Resource Usage rows */
.perf-server-group {
  margin-bottom: 1.25rem;
}

.perf-server-group:last-child {
  margin-bottom: 0;
}

.perf-server-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.perf-row {
  margin-bottom: 1rem;
}

.perf-row:last-child {
  margin-bottom: 0;
}

.perf-row-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.perf-label {
  font-size: 0.875rem;
  color: #495057;
}

.perf-value {
  font-size: 0.8rem;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
}

.perf-bar-track {
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Theme toggle button ────────────────────────────────────── */
.theme-toggle-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.5;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #343a40;
}

/* ── Dark mode overrides ────────────────────────────────────── */

/* bg-white used on navbars and card headers */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .navbar {
  border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .data-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .data-card .card-header {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .stats-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}

/* Tables */
[data-bs-theme="dark"] .public-table thead th {
  background-image: linear-gradient(rgba(110, 168, 254, 0.07), rgba(110, 168, 254, 0.07));
  color: var(--bs-secondary-color);
  border-bottom-color: rgba(110, 168, 254, 0.15);
}

[data-bs-theme="dark"] .public-table tbody td {
  color: var(--bs-body-color);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .public-table tbody tr:hover td {
  background-image: linear-gradient(rgba(110, 168, 254, 0.05), rgba(110, 168, 254, 0.05));
}

/* Activity list */
[data-bs-theme="dark"] .activity-item {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .activity-item:hover {
  background-color: rgba(110, 168, 254, 0.05);
}

[data-bs-theme="dark"] .activity-name {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .activity-time {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .activity-empty {
  color: var(--bs-secondary-color);
}

/* System status */
[data-bs-theme="dark"] .status-row {
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .status-row-label {
  color: var(--bs-secondary-color);
}

/* Performance */
[data-bs-theme="dark"] .perf-server-name {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .perf-label {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .perf-value {
  color: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .perf-bar-track {
  background-color: var(--bs-secondary-bg);
}

/* Queue count pill */
[data-bs-theme="dark"] .queue-count {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .queue-count.has-messages {
  background-color: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

/* Processing state */
[data-bs-theme="dark"] .state-count {
  color: var(--bs-tertiary-color);
}

/* Footer */
[data-bs-theme="dark"] footer {
  border-top-color: var(--bs-border-color);
}

/* Theme toggle button in dark mode */
[data-bs-theme="dark"] .theme-toggle-btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--bs-body-color);
}

/* ===========================================
   DARK THEME — MATCHING AUTHENTICATED PAGE
   =========================================== */

body {
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0d1117 0%, #1a1e2e 100%) fixed !important;
  min-height: 100vh;
}

.navbar {
  background: linear-gradient(135deg,
    rgba(13, 17, 23, 0.97) 0%,
    rgba(26, 30, 46, 0.97) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4) !important;
}

.navbar-brand .bi {
  color: #ff6b35;
  -webkit-text-fill-color: #ff6b35;
}

.navbar-brand .fw-bold {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-sign-in {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.btn-sign-in:hover {
  background: linear-gradient(135deg, #ff7849 0%, #fb9d32 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.card.stats-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.card.data-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.card-header.bg-white {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
  border: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #ff7849 0%, #fb9d32 100%) !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

#loginModal .modal-content {
  background: rgba(20, 24, 38, 0.97) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 107, 53, 0.35) !important;
  border-radius: 15px !important;
}

#loginModal .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#loginModal .modal-title i {
  color: #ff6b35 !important;
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

footer a {
  color: rgba(255, 255, 255, 0.45) !important;
}

footer a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ===========================================
   WIDE PUBLIC TABLES ON NARROW SCREENS
   =========================================== */

/* Tables wider than their card (Bot Processing State, Idle Pull Requests)
   pan horizontally inside a .table-responsive wrapper — the card itself
   clips overflow, so without the wrapper the columns past the card edge are
   simply unreachable on a phone. The row-label column is pinned so the
   numbers keep their context while panning. Cells carry Bootstrap's opaque
   table background (the header and hover tints above are overlays on it,
   not translucent fills), so nothing shows through the pinned cells as the
   rest of the row slides under them. */
.public-table .public-table-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Only phones get the separator after the pinned column: wider screens fit
   the whole table, so there is nothing to pan and no edge to mark. */
@media (max-width: 575.98px) {
  .public-table .public-table-sticky-col {
    box-shadow: 1px 0 0 var(--bs-border-color);
  }
}