/* NG SUB dashboard brand rollout layer.
   Kept separate from business components so the visual migration is reversible. */

/* Replace legacy dashboard logo usage without touching component logic. */
img[alt="Sakaafah Space Logo"] {
  content: url("/brand/ng-sub-mark.svg");
  object-fit: contain;
  border-radius: 0 !important;
  border-color: rgba(13, 33, 75, 0.12) !important;
}

/* Normalize the dashboard wordmark copy while preserving its existing layout. */
img[alt="Sakaafah Space Logo"] + div > h1 {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Brand active navigation states: navy/blue foundation with restrained gold accent. */
[class~="from-emerald-50"][class~="to-emerald-50\/30"] {
  background-image: linear-gradient(to right, rgba(13, 33, 75, 0.08), rgba(13, 33, 75, 0.02)) !important;
  border-color: rgba(13, 33, 75, 0.12) !important;
}

[class~="from-emerald-500"][class~="to-emerald-600"] {
  background-image: linear-gradient(135deg, #0D214B, #0B1736) !important;
  box-shadow: 0 4px 12px rgba(11, 23, 54, 0.22) !important;
}

[class~="text-emerald-800"][class~="dark:text-emerald-400"] {
  color: #0B1736 !important;
}

.dark [class~="text-emerald-800"][class~="dark:text-emerald-400"] {
  color: #C7A24A !important;
}

[class~="bg-emerald-50"][class~="text-emerald-700"] {
  background-color: rgba(199, 162, 74, 0.10) !important;
  color: #0B1736 !important;
  border-color: rgba(199, 162, 74, 0.24) !important;
}

.dark [class~="bg-emerald-50"][class~="text-emerald-700"] {
  background-color: rgba(199, 162, 74, 0.12) !important;
  color: #C7A24A !important;
  border-color: rgba(199, 162, 74, 0.24) !important;
}

/* Active navigation indicator uses the official gold accent. */
[class~="bg-emerald-500"][class~="shrink-0"] {
  background-color: #C7A24A !important;
}

/* Wallet/profile emphasis follows the official brand palette. */
[class~="bg-emerald-600"][class~="text-white"] {
  background-color: #0D214B !important;
}

[class~="text-emerald-700"][class~="dark:text-emerald-400"] {
  color: #0B1736 !important;
}

.dark [class~="text-emerald-700"][class~="dark:text-emerald-400"] {
  color: #C7A24A !important;
}

/* Keep success/status semantics available elsewhere; this file only overrides
   compound brand-navigation patterns rather than globally redefining green. */