:root {
  --sidebar-width: 220px;
  --sidebar-bg: #1e293b;
  --topbar-h: 58px;
}

/* ── Layout ──────────────────────────────────────────────────────── */
#wrapper { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  color: #cbd5e1;
}

.sidebar-brand {
  font-size: .95rem;
  font-weight: 600;
  color: #f8fafc;
  border-bottom: 1px solid #334155;
}

.sidebar-link {
  color: #94a3b8;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .875rem;
  transition: background .12s, color .12s;
}
.sidebar-link:hover  { background: #334155; color: #f1f5f9; }
.sidebar-link.active { background: #3b82f6; color: #fff; }

.sidebar-footer { border-top: 1px solid #334155; }
.sidebar-footer a:hover { color: #f1f5f9 !important; }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Content ─────────────────────────────────────────────────────── */
#content { background: #f8fafc; min-height: 100vh; }
.page-section { padding-top: 1.5rem; }

/* ── Table ───────────────────────────────────────────────────────── */
.table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  font-weight: 600;
}
.table td { vertical-align: middle; font-size: .875rem; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }

/* ── State badges ────────────────────────────────────────────────── */
.badge-pending { background: #94a3b8; }
.badge-running { background: #22c55e; }
.badge-done    { background: #3b82f6; }
.badge-failed  { background: #ef4444; }
.badge-stopped { background: #f59e0b; color: #000 !important; }

/* ── Progress ────────────────────────────────────────────────────── */
.progress-xs { height: 4px; border-radius: 2px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
  padding: 4rem 2rem;
  text-align: center;
  color: #94a3b8;
}
.empty-state i { font-size: 2.8rem; display: block; margin-bottom: 1rem; color: #cbd5e1; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { border-radius: 10px; }

/* ── Metric stat icon ────────────────────────────────────────────── */
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ── Social icons ────────────────────────────────────────────────── */
.social-icon { font-size: 1rem; text-decoration: none; }
.social-icon:hover { opacity: .75; }