/* Advanced Color Harmony & Consistency System */

/* Status Color Variations */
:root {
  /* Success Variations */
  --success-bg-subtle: var(--brand-success-50);
  --success-bg-muted: var(--brand-success-100);
  --success-bg: var(--brand-success-500);
  --success-bg-emphasis: var(--brand-success-600);
  --success-border-subtle: var(--brand-success-200);
  --success-border: var(--brand-success-300);
  --success-border-emphasis: var(--brand-success-400);
  --success-text-subtle: var(--brand-success-600);
  --success-text: var(--brand-success-700);
  --success-text-emphasis: var(--brand-success-800);
  
  /* Warning Variations */
  --warning-bg-subtle: var(--brand-warning-50);
  --warning-bg-muted: var(--brand-warning-100);
  --warning-bg: var(--brand-warning-500);
  --warning-bg-emphasis: var(--brand-warning-600);
  --warning-border-subtle: var(--brand-warning-200);
  --warning-border: var(--brand-warning-300);
  --warning-border-emphasis: var(--brand-warning-400);
  --warning-text-subtle: var(--brand-warning-600);
  --warning-text: var(--brand-warning-700);
  --warning-text-emphasis: var(--brand-warning-800);
  
  /* Danger Variations */
  --danger-bg-subtle: var(--brand-danger-50);
  --danger-bg-muted: var(--brand-danger-100);
  --danger-bg: var(--brand-danger-500);
  --danger-bg-emphasis: var(--brand-danger-600);
  --danger-border-subtle: var(--brand-danger-200);
  --danger-border: var(--brand-danger-300);
  --danger-border-emphasis: var(--brand-danger-400);
  --danger-text-subtle: var(--brand-danger-600);
  --danger-text: var(--brand-danger-700);
  --danger-text-emphasis: var(--brand-danger-800);
  
  /* Info Variations */
  --info-bg-subtle: var(--brand-info-50);
  --info-bg-muted: var(--brand-info-100);
  --info-bg: var(--brand-info-500);
  --info-bg-emphasis: var(--brand-info-600);
  --info-border-subtle: var(--brand-info-200);
  --info-border: var(--brand-info-300);
  --info-border-emphasis: var(--brand-info-400);
  --info-text-subtle: var(--brand-info-600);
  --info-text: var(--brand-info-700);
  --info-text-emphasis: var(--brand-info-800);
  
  /* Primary Variations */
  --primary-bg-subtle: var(--brand-primary-50);
  --primary-bg-muted: var(--brand-primary-100);
  --primary-bg: var(--brand-primary-500);
  --primary-bg-emphasis: var(--brand-primary-600);
  --primary-border-subtle: var(--brand-primary-200);
  --primary-border: var(--brand-primary-300);
  --primary-border-emphasis: var(--brand-primary-400);
  --primary-text-subtle: var(--brand-primary-600);
  --primary-text: var(--brand-primary-700);
  --primary-text-emphasis: var(--brand-primary-800);
  
  /* Accent Variations */
  --accent-bg-subtle: var(--brand-accent-50);
  --accent-bg-muted: var(--brand-accent-100);
  --accent-bg: var(--brand-accent-500);
  --accent-bg-emphasis: var(--brand-accent-600);
  --accent-border-subtle: var(--brand-accent-200);
  --accent-border: var(--brand-accent-300);
  --accent-border-emphasis: var(--brand-accent-400);
  --accent-text-subtle: var(--brand-accent-600);
  --accent-text: var(--brand-accent-700);
  --accent-text-emphasis: var(--brand-accent-800);
}

/* Dark Mode Status Colors */
:root[data-theme="dark"] {
  --success-bg-subtle: rgba(16, 185, 129, 0.1);
  --success-bg-muted: rgba(16, 185, 129, 0.2);
  --success-bg: var(--brand-success);
  --success-bg-emphasis: #059669;
  --success-border-subtle: rgba(16, 185, 129, 0.3);
  --success-border: rgba(16, 185, 129, 0.5);
  --success-border-emphasis: var(--brand-success);
  --success-text-subtle: #6ee7b7;
  --success-text: #34d399;
  --success-text-emphasis: #10b981;
  
  --warning-bg-subtle: rgba(245, 158, 11, 0.1);
  --warning-bg-muted: rgba(245, 158, 11, 0.2);
  --warning-bg: var(--brand-warning);
  --warning-bg-emphasis: #d97706;
  --warning-border-subtle: rgba(245, 158, 11, 0.3);
  --warning-border: rgba(245, 158, 11, 0.5);
  --warning-border-emphasis: var(--brand-warning);
  --warning-text-subtle: #fcd34d;
  --warning-text: #fbbf24;
  --warning-text-emphasis: #f59e0b;
  
  --danger-bg-subtle: rgba(239, 68, 68, 0.1);
  --danger-bg-muted: rgba(239, 68, 68, 0.2);
  --danger-bg: var(--brand-danger);
  --danger-bg-emphasis: #dc2626;
  --danger-border-subtle: rgba(239, 68, 68, 0.3);
  --danger-border: rgba(239, 68, 68, 0.5);
  --danger-border-emphasis: var(--brand-danger);
  --danger-text-subtle: #fca5a5;
  --danger-text: #f87171;
  --danger-text-emphasis: #ef4444;
  
  --info-bg-subtle: rgba(6, 182, 212, 0.1);
  --info-bg-muted: rgba(6, 182, 212, 0.2);
  --info-bg: var(--brand-info);
  --info-bg-emphasis: #0891b2;
  --info-border-subtle: rgba(6, 182, 212, 0.3);
  --info-border: rgba(6, 182, 212, 0.5);
  --info-border-emphasis: var(--brand-info);
  --info-text-subtle: #67e8f9;
  --info-text: #22d3ee;
  --info-text-emphasis: #06b6d4;
  
  --primary-bg-subtle: rgba(59, 130, 246, 0.1);
  --primary-bg-muted: rgba(59, 130, 246, 0.2);
  --primary-bg: var(--brand-primary);
  --primary-bg-emphasis: #2563eb;
  --primary-border-subtle: rgba(59, 130, 246, 0.3);
  --primary-border: rgba(59, 130, 246, 0.5);
  --primary-border-emphasis: var(--brand-primary);
  --primary-text-subtle: #93c5fd;
  --primary-text: #60a5fa;
  --primary-text-emphasis: #3b82f6;
  
  --accent-bg-subtle: rgba(245, 158, 11, 0.1);
  --accent-bg-muted: rgba(245, 158, 11, 0.2);
  --accent-bg: var(--brand-accent);
  --accent-bg-emphasis: #d97706;
  --accent-border-subtle: rgba(245, 158, 11, 0.3);
  --accent-border: rgba(245, 158, 11, 0.5);
  --accent-border-emphasis: var(--brand-accent);
  --accent-text-subtle: #fcd34d;
  --accent-text: #fbbf24;
  --accent-text-emphasis: #f59e0b;
}

/* Enhanced Alert Components */
.alert-primary {
  background-color: var(--primary-bg-subtle);
  border: 1px solid var(--primary-border-subtle);
  color: var(--primary-text-emphasis);
  border-radius: var(--radius);
}

.alert-success {
  background-color: var(--success-bg-subtle);
  border: 1px solid var(--success-border-subtle);
  color: var(--success-text-emphasis);
  border-radius: var(--radius);
}

.alert-warning {
  background-color: var(--warning-bg-subtle);
  border: 1px solid var(--warning-border-subtle);
  color: var(--warning-text-emphasis);
  border-radius: var(--radius);
}

.alert-danger {
  background-color: var(--danger-bg-subtle);
  border: 1px solid var(--danger-border-subtle);
  color: var(--danger-text-emphasis);
  border-radius: var(--radius);
}

.alert-info {
  background-color: var(--info-bg-subtle);
  border: 1px solid var(--info-border-subtle);
  color: var(--info-text-emphasis);
  border-radius: var(--radius);
}

/* Enhanced Badge System */
.badge-primary-subtle {
  background-color: var(--primary-bg-subtle);
  color: var(--primary-text-emphasis);
  border: 1px solid var(--primary-border-subtle);
}

.badge-success-subtle {
  background-color: var(--success-bg-subtle);
  color: var(--success-text-emphasis);
  border: 1px solid var(--success-border-subtle);
}

.badge-warning-subtle {
  background-color: var(--warning-bg-subtle);
  color: var(--warning-text-emphasis);
  border: 1px solid var(--warning-border-subtle);
}

.badge-danger-subtle {
  background-color: var(--danger-bg-subtle);
  color: var(--danger-text-emphasis);
  border: 1px solid var(--danger-border-subtle);
}

.badge-info-subtle {
  background-color: var(--info-bg-subtle);
  color: var(--info-text-emphasis);
  border: 1px solid var(--info-border-subtle);
}

/* Status Indicator Dots */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status-dot-success { background-color: var(--success-bg); }
.status-dot-warning { background-color: var(--warning-bg); }
.status-dot-danger { background-color: var(--danger-bg); }
.status-dot-info { background-color: var(--info-bg); }
.status-dot-primary { background-color: var(--primary-bg); }

/* Enhanced Background Utilities */
.bg-primary-subtle { background-color: var(--primary-bg-subtle) !important; }
.bg-primary-muted { background-color: var(--primary-bg-muted) !important; }
.bg-success-subtle { background-color: var(--success-bg-subtle) !important; }
.bg-success-muted { background-color: var(--success-bg-muted) !important; }
.bg-warning-subtle { background-color: var(--warning-bg-subtle) !important; }
.bg-warning-muted { background-color: var(--warning-bg-muted) !important; }
.bg-danger-subtle { background-color: var(--danger-bg-subtle) !important; }
.bg-danger-muted { background-color: var(--danger-bg-muted) !important; }
.bg-info-subtle { background-color: var(--info-bg-subtle) !important; }
.bg-info-muted { background-color: var(--info-bg-muted) !important; }

/* Enhanced Text Utilities */
.text-primary-emphasis { color: var(--primary-text-emphasis) !important; }
.text-success-emphasis { color: var(--success-text-emphasis) !important; }
.text-warning-emphasis { color: var(--warning-text-emphasis) !important; }
.text-danger-emphasis { color: var(--danger-text-emphasis) !important; }
.text-info-emphasis { color: var(--info-text-emphasis) !important; }

/* Enhanced Border Utilities */
.border-primary-subtle { border-color: var(--primary-border-subtle) !important; }
.border-success-subtle { border-color: var(--success-border-subtle) !important; }
.border-warning-subtle { border-color: var(--warning-border-subtle) !important; }
.border-danger-subtle { border-color: var(--danger-border-subtle) !important; }
.border-info-subtle { border-color: var(--info-border-subtle) !important; }

/* Color Harmony for Cards */
.card-success {
  background: linear-gradient(135deg, var(--success-bg-subtle) 0%, var(--success-bg-muted) 100%);
  border: 1px solid var(--success-border-subtle);
  color: var(--success-text-emphasis);
}

.card-warning {
  background: linear-gradient(135deg, var(--warning-bg-subtle) 0%, var(--warning-bg-muted) 100%);
  border: 1px solid var(--warning-border-subtle);
  color: var(--warning-text-emphasis);
}

.card-danger {
  background: linear-gradient(135deg, var(--danger-bg-subtle) 0%, var(--danger-bg-muted) 100%);
  border: 1px solid var(--danger-border-subtle);
  color: var(--danger-text-emphasis);
}

.card-info {
  background: linear-gradient(135deg, var(--info-bg-subtle) 0%, var(--info-bg-muted) 100%);
  border: 1px solid var(--info-border-subtle);
  color: var(--info-text-emphasis);
}

.card-primary {
  background: linear-gradient(135deg, var(--primary-bg-subtle) 0%, var(--primary-bg-muted) 100%);
  border: 1px solid var(--primary-border-subtle);
  color: var(--primary-text-emphasis);
}

/* Enhanced Table Row States */
.table-row-success {
  background-color: var(--success-bg-subtle);
  border-left: 4px solid var(--success-bg);
}

.table-row-warning {
  background-color: var(--warning-bg-subtle);
  border-left: 4px solid var(--warning-bg);
}

.table-row-danger {
  background-color: var(--danger-bg-subtle);
  border-left: 4px solid var(--danger-bg);
}

.table-row-info {
  background-color: var(--info-bg-subtle);
  border-left: 4px solid var(--info-bg);
}

/* Progress Bar Enhancements */
.progress-primary .progress-bar {
  background: var(--brand-primary-gradient);
}

.progress-success .progress-bar {
  background: var(--brand-success-gradient);
}

.progress-warning .progress-bar {
  background: var(--brand-warning-gradient);
}

.progress-danger .progress-bar {
  background: var(--brand-danger-gradient);
}

.progress-info .progress-bar {
  background: var(--brand-info-gradient);
}

/* Enhanced Form Validation States */
.form-control.is-valid {
  border-color: var(--success-border);
  box-shadow: 0 0 0 0.25rem var(--success-bg-subtle);
}

.form-control.is-invalid {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 0.25rem var(--danger-bg-subtle);
}

.form-control:focus.is-valid {
  border-color: var(--success-border-emphasis);
  box-shadow: var(--focus-success);
}

.form-control:focus.is-invalid {
  border-color: var(--danger-border-emphasis);
  box-shadow: var(--focus-danger);
}

/* Color-coded Navigation States */
.nav-link.active {
  color: var(--primary-text-emphasis) !important;
  background-color: var(--primary-bg-subtle);
  border-radius: var(--radius-sm);
}

.nav-link:hover {
  color: var(--primary-text) !important;
  background-color: var(--primary-bg-subtle);
  border-radius: var(--radius-sm);
}

/* Enhanced List Group Items */
.list-group-item-primary {
  background-color: var(--primary-bg-subtle);
  border-color: var(--primary-border-subtle);
  color: var(--primary-text-emphasis);
}

.list-group-item-success {
  background-color: var(--success-bg-subtle);
  border-color: var(--success-border-subtle);
  color: var(--success-text-emphasis);
}

.list-group-item-warning {
  background-color: var(--warning-bg-subtle);
  border-color: var(--warning-border-subtle);
  color: var(--warning-text-emphasis);
}

.list-group-item-danger {
  background-color: var(--danger-bg-subtle);
  border-color: var(--danger-border-subtle);
  color: var(--danger-text-emphasis);
}

.list-group-item-info {
  background-color: var(--info-bg-subtle);
  border-color: var(--info-border-subtle);
  color: var(--info-text-emphasis);
}

/* Color Accessibility Enhancements */
@media (prefers-contrast: high) {
  :root {
    --success-text-emphasis: var(--brand-success-800);
    --warning-text-emphasis: var(--brand-warning-800);
    --danger-text-emphasis: var(--brand-danger-800);
    --info-text-emphasis: var(--brand-info-800);
    --primary-text-emphasis: var(--brand-primary-800);
  }
  
  :root[data-theme="dark"] {
    --success-text-emphasis: var(--brand-success-200);
    --warning-text-emphasis: var(--brand-warning-200);
    --danger-text-emphasis: var(--brand-danger-200);
    --info-text-emphasis: var(--brand-info-200);
    --primary-text-emphasis: var(--brand-primary-200);
  }
}

/* Color Harmony Animations */
@keyframes colorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.color-pulse-success { animation: colorPulse 2s infinite; color: var(--success-bg); }
.color-pulse-warning { animation: colorPulse 2s infinite; color: var(--warning-bg); }
.color-pulse-danger { animation: colorPulse 2s infinite; color: var(--danger-bg); }
.color-pulse-info { animation: colorPulse 2s infinite; color: var(--info-bg); }
.color-pulse-primary { animation: colorPulse 2s infinite; color: var(--primary-bg); }

/* Enhanced Dropdown Menu Colors */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-bg-subtle);
  color: var(--primary-text-emphasis);
}

.dropdown-item.active {
  background-color: var(--primary-bg);
  color: white;
}

/* Color-coded Tooltips */
.tooltip-primary .tooltip-inner {
  background-color: var(--primary-bg);
  color: white;
}

.tooltip-success .tooltip-inner {
  background-color: var(--success-bg);
  color: white;
}

.tooltip-warning .tooltip-inner {
  background-color: var(--warning-bg);
  color: var(--warning-text-emphasis);
}

.tooltip-danger .tooltip-inner {
  background-color: var(--danger-bg);
  color: white;
}

.tooltip-info .tooltip-inner {
  background-color: var(--info-bg);
  color: white;
}