:root {
  --ca-red: #e31e24;
  --ca-teal: #00a896;
}

body {
  background-color: #f4f6f9;
}

.brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ca-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.sidebar {
  min-height: 100vh;
  background: #1f2937;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  margin-bottom: 4px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.stat-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.login-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.table-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.btn-ca {
  background: var(--ca-teal);
  border-color: var(--ca-teal);
  color: #fff;
}

.btn-ca:hover {
  background: #008f7f;
  border-color: #008f7f;
  color: #fff;
}

.badge-pro {
  background: rgba(0, 168, 150, 0.12);
  color: var(--ca-teal);
}

.avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #374151;
}