:root {
  --cdd-blue-900: #173c69;
  --cdd-blue-700: #215487;
  --cdd-blue-500: #2f76bf;
  --cdd-coral-700: #bf241d;
  --cdd-coral-500: #d64038;
  --cdd-sand-100: #fdf7f6;
}

.dashboard-hero {
  background: linear-gradient(130deg, var(--cdd-blue-900) 0%, var(--cdd-blue-700) 55%, var(--cdd-coral-700) 100%);
  border-radius: 0.7rem;
  color: #fff;
}

.dashboard-hero-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.dashboard-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

.dashboard-card {
  border-width: 0;
  color: #fff;
}

.dashboard-card .material-symbols-outlined {
  color: rgba(255, 255, 255, 0.26) !important;
}

.dashboard-card p {
  color: #fff !important;
}

.dashboard-card--ocean {
  background: linear-gradient(135deg, #173c69 0%, #215487 100%);
}

.dashboard-card--reef {
  background: linear-gradient(135deg, #1f5f9f 0%, #2f76bf 100%);
}

.dashboard-card--coral {
  background: linear-gradient(135deg, #bf241d 0%, #d64038 100%);
}

.dashboard-panel {
  border-width: 0;
  box-shadow: 0 10px 24px rgba(23, 60, 105, 0.08);
}

.dashboard-panel--ocean {
  background: linear-gradient(180deg, rgba(23, 60, 105, 0.08) 0%, rgba(255, 255, 255, 1) 26%);
}

.dashboard-panel--coral {
  background: linear-gradient(180deg, rgba(191, 36, 29, 0.08) 0%, rgba(255, 255, 255, 1) 26%);
}

.dark .dashboard-panel--ocean {
  background: linear-gradient(180deg, rgba(33, 84, 135, 0.36) 0%, rgba(15, 23, 42, 0.96) 26%);
}

.dark .dashboard-panel--coral {
  background: linear-gradient(180deg, rgba(191, 36, 29, 0.32) 0%, rgba(15, 23, 42, 0.96) 26%);
}

.dashboard-cta .inline-flex {
  justify-content: flex-start;
  width: 100%;
}

.dashboard-cta .inline-flex:hover {
  transform: translateY(-1px);
}

#nav-sidebar-apps a.active {
  background: linear-gradient(90deg, rgba(23, 60, 105, 0.14) 0%, rgba(191, 36, 29, 0.08) 100%) !important;
  box-shadow: inset 3px 0 0 var(--cdd-coral-700);
  color: var(--cdd-blue-900) !important;
}

#nav-sidebar-apps a.active .material-symbols-outlined {
  color: var(--cdd-blue-700);
}

.dark #nav-sidebar-apps a.active {
  background: linear-gradient(90deg, rgba(23, 60, 105, 0.72) 0%, rgba(47, 93, 155, 0.58) 65%, rgba(191, 36, 29, 0.32) 100%) !important;
  box-shadow: inset 3px 0 0 #f16f68;
  color: #eef5ff !important;
}

.dark #nav-sidebar-apps a.active .material-symbols-outlined {
  color: #d5e8ff !important;
}