:root {
  --brand-dark: #0a1628;
  --brand-accent: #4da6ff;
  --up: #198754;
  --down: #dc3545;
  --neu: #6c757d;

  --bs-primary: #0a1628;
  --bs-primary-rgb: 10, 22, 40;
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-link-color: #0a58ca;
  --bs-link-hover-color: #084298;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0b1220;
  --bs-body-color: #e5edf8;
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-primary: #8ab8ff;
  --bs-primary-rgb: 138, 184, 255;
  --bs-link-color: #9fc4ff;
  --bs-link-hover-color: #c4daff;
}

/* Transitional helpers retained from the pre-Metronic dashboards. */
.target-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.1);
  overflow: hidden;
}

.target-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4da6ff 0%, #0a58ca 100%);
  transition: width .2s ease;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(10, 22, 40, 0.08);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  animation: skeleton-shimmer 1.2s infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}