/* BASF RCP Color Scheme */
:root {
  /* Primary Colors */
  --rcp-primary: #005EB8;
  --rcp-primary-hover: #004A90;
  
  /* Secondary Colors */
  --rcp-secondary: #6B7280;
  --rcp-secondary-hover: #4B5563;
  
  /* Success Colors */
  --rcp-success: #22A06B;
  --rcp-success-hover: #1A8156;
  
  /* Warning Colors */
  --rcp-warning: #F59E0B;
  --rcp-warning-hover: #D97706;
  
  /* Danger Colors */
  --rcp-danger: #D32F2F;
  --rcp-danger-hover: #B71C1C;
  
  /* Info Colors */
  --rcp-info: #0891B2;
  --rcp-info-hover: #0E7490;
  
  /* Neutral Colors */
  --rcp-neutral-100: #F3F4F6;
  --rcp-neutral-200: #E5E7EB;
  --rcp-neutral-300: #D1D5DB;
  --rcp-neutral-400: #9CA3AF;
  --rcp-neutral-500: #6B7280;
  --rcp-neutral-600: #4B5563;
  --rcp-neutral-700: #374151;
  --rcp-neutral-800: #1F2937;
  --rcp-neutral-900: #111827;
  
  /* Text Colors */
  --rcp-text: #111827;
  --rcp-text-light: #6B7280;
}

/* Button Styles */
.btn-primary {
  background-color: var(--rcp-primary) !important;
  border-color: var(--rcp-primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--rcp-primary-hover) !important;
  border-color: var(--rcp-primary-hover) !important;
}

.btn-secondary {
  background-color: var(--rcp-secondary) !important;
  border-color: var(--rcp-secondary) !important;
  color: white !important;
}

.btn-secondary:hover {
  background-color: var(--rcp-secondary-hover) !important;
  border-color: var(--rcp-secondary-hover) !important;
}

.btn-outline-secondary {
  color: var(--rcp-secondary) !important;
  border-color: var(--rcp-neutral-300) !important;
  background: white !important;
}

.btn-outline-secondary:hover {
  background-color: var(--rcp-neutral-100) !important;
  border-color: var(--rcp-neutral-300) !important;
  color: var(--rcp-secondary) !important;
}

.btn-success {
  background-color: var(--rcp-success) !important;
  border-color: var(--rcp-success) !important;
  color: white !important;
}

.btn-success:hover {
  background-color: var(--rcp-success-hover) !important;
  border-color: var(--rcp-success-hover) !important;
}

.btn-outline-success {
  color: var(--rcp-success) !important;
  border-color: var(--rcp-success) !important;
  background: white !important;
}

.btn-outline-success:hover {
  background-color: var(--rcp-success) !important;
  border-color: var(--rcp-success) !important;
  color: white !important;
}

.btn-info {
  background-color: var(--rcp-info) !important;
  border-color: var(--rcp-info) !important;
  color: white !important;
}

.btn-info:hover {
  background-color: var(--rcp-info-hover) !important;
  border-color: var(--rcp-info-hover) !important;
}

.btn-warning {
  background-color: var(--rcp-warning) !important;
  border-color: var(--rcp-warning) !important;
  color: white !important;
}

.btn-warning:hover {
  background-color: var(--rcp-warning-hover) !important;
  border-color: var(--rcp-warning-hover) !important;
}

.btn-danger {
  background-color: var(--rcp-danger) !important;
  border-color: var(--rcp-danger) !important;
  color: white !important;
}

.btn-danger:hover {
  background-color: var(--rcp-danger-hover) !important;
  border-color: var(--rcp-danger-hover) !important;
}

/* Tag Styles */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rcp-neutral-300);
  border-radius: 9999px;
  background: #EEF2F7;
  color: #1F2937;
  font-weight: 500;
  font-size: 0.875rem;
}

.tag--selected {
  background: var(--rcp-primary);
  color: white;
  border-color: var(--rcp-primary);
}

/* Icon Styles */
.icon-plus {
  color: var(--rcp-primary);
  transition: color 0.3s ease;
}

.icon-plus:hover {
  color: var(--rcp-primary-hover);
}

/* Reason Tags */
.reason-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  background: #EEF2F7;
  color: #1F2937;
  border: 1px solid var(--rcp-neutral-300);
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reason-tag:hover {
  background: var(--rcp-neutral-100);
  border-color: var(--rcp-neutral-400);
}

.reason-tag.selected {
  background: var(--rcp-primary);
  color: white;
  border-color: var(--rcp-primary);
}

/* Car Panel Marker Styles */
.panel-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 94, 184, 0.4) !important;
  border: 3px solid var(--rcp-primary) !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
  z-index: 100 !important;
}

.panel-marker:hover {
  background: var(--rcp-warning) !important;
  border-color: var(--rcp-warning-hover) !important;
  transform: scale(1.25);
  box-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
}

.panel-marker.selected {
  background: var(--rcp-danger) !important;
  border-color: var(--rcp-danger-hover) !important;
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.6) !important;
}

.panel-marker.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

@media (max-width: 768px) {
  .panel-marker {
    width: 24px !important;
    height: 24px !important;
  }
  
  .panel-marker.selected::after {
    font-size: 14px;
  }
}