/* Multi-View Dashboard Extension Styles */

/* View Switcher Buttons */
.view-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  flex-wrap: wrap;
}

.btn-view {
  background: white;
  border: 1px solid #dee2e6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s;
  color: #495057;
}

.btn-view:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

.btn-view.active {
  background: #007bff !important;
  color: white !important;
  border-color: #007bff !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* Cancelled Case Styling */
.case-bubble.is-cancelled {
  background: repeating-linear-gradient(45deg,
      #ffffff,
      #ffffff 10px,
      #e0e0e0 10px,
      #e0e0e0 20px) !important;
  border: 2px solid #999 !important;
  opacity: 0.75;
  color: #666 !important;
}

.case-bubble.is-cancelled:hover {
  opacity: 0.9;
}

/* Override green styling for cancelled cases */
.case-bubble.is-cancelled.is-current {
  background: repeating-linear-gradient(45deg,
      #ffffff,
      #ffffff 10px,
      #e0e0e0 10px,
      #e0e0e0 20px) !important;
  border: 2px solid #999 !important;
  color: #666 !important;
}