/* Dual Dashboard Navigation Enhancements */

/* Responsive spacing for multiple dashboard buttons */
@media (max-width: 1199px) {
  .header .control-list .control-item + .control-item {
    margin-left: 0.75rem;
  }
}

@media (max-width: 767px) {
  .header .control-list .control-item + .control-item {
    margin-left: 0.5rem;
  }

  /* Stack buttons vertically on very small screens */
  .header .control-list {
    flex-direction: column;
    gap: 0.5rem;
  }

  .header .control-list .control-item + .control-item {
    margin-left: 0;
  }
}

/* Ensure dashboard buttons have consistent styling */
.header .control-list .control-item .btn {
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}

/* Different colors for different dashboard types */
.header .control-list .control-item .btn[href*="participant-dashboard"],
.header .control-list .control-item .btn.main-blue-gradient {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
  border-color: #0d6efd;
}

.header .control-list .control-item .btn[href*="participant-dashboard"]:hover,
.header .control-list .control-item .btn.main-blue-gradient:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
  border-color: #0b5ed7;
}

.header .control-list .control-item .btn[href*="claimant-dashboard"],
.header .control-list .control-item .btn.main-green-gradient {
  background: linear-gradient(135deg, #198754 0%, #157347 100%);
  border-color: #198754;
}

.header .control-list .control-item .btn[href*="claimant-dashboard"]:hover,
.header .control-list .control-item .btn.main-green-gradient:hover {
  background: linear-gradient(135deg, #157347 0%, #146c43 100%);
  border-color: #157347;
}

.header .control-list .control-item .btn[href*="admin/dashboard"],
.header .control-list .control-item .btn.main-red-gradient {
  background: linear-gradient(135deg, #240ec2 0%, #4b0db4 100%);
  border-color: #240ec2;
  color: #fff;
}

.header .control-list .control-item .btn[href*="admin/dashboard"]:hover,
.header .control-list .control-item .btn.main-red-gradient:hover {
  background: linear-gradient(-135deg, #240ec2 0%, #4b0db4 100%);
  border-color: #240ec2;
  color: #fff;
}

/* Icon styling for dashboard buttons */
.header .control-list .control-item .btn i {
  font-size: 1rem;
  margin-left: 0.5rem;
}

/* Active state for current dashboard */
.header .control-list .control-item .btn.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* Smooth transitions */
.header .control-list .control-item .btn {
  transition: all 0.2s ease-in-out;
}