/**
 * Icon Styling - Ensures SVG icons have proper colors
 */

/* Base icon styling - inherit current color */
img[src*="/icons/"] {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}

/* Status-based icon colors */
.balanced img[src*="/icons/"],
.success img[src*="/icons/"],
.positive img[src*="/icons/"],
.status-icon[alt="Healthy"],
.status-icon[alt="Success"] {
  color: var(--color-success-600);
  filter: brightness(0) saturate(100%) invert(47%) sepia(58%) saturate(1134%) hue-rotate(95deg) brightness(91%) contrast(93%);
}

.unbalanced img[src*="/icons/"],
.warning img[src*="/icons/"],
.status-icon[alt="At Risk"],
.status-icon[alt="Warning"] {
  color: var(--color-warning-600);
  filter: brightness(0) saturate(100%) invert(59%) sepia(75%) saturate(1000%) hue-rotate(1deg) brightness(102%) contrast(103%);
}

.error img[src*="/icons/"],
.danger img[src*="/icons/"],
.negative img[src*="/icons/"],
.status-icon[alt="Critical"],
.status-icon[alt="Danger"] {
  color: var(--color-danger-600);
  filter: brightness(0) saturate(100%) invert(29%) sepia(95%) saturate(3071%) hue-rotate(343deg) brightness(99%) contrast(107%);
}

.info img[src*="/icons/"],
.information img[src*="/icons/"],
.status-icon[alt="Monitor"],
.status-icon[alt="Info"] {
  color: var(--color-information-600);
  filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(3845%) hue-rotate(211deg) brightness(96%) contrast(107%);
}

/* Status Icon Sizing */
.status-icon {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  margin-right: 4px;
}

.metric-icon img {
  width: 24px;
  height: 24px;
}

.alert-icon img {
  width: 24px;
  height: 24px;
}

.inline-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Navigation icons - use text color */
.nav-btn img[src*="/icons/"],
.header-nav img[src*="/icons/"] {
  filter: none;
  opacity: 0.8;
}

.nav-btn.active img[src*="/icons/"],
.nav-btn:hover img[src*="/icons/"] {
  filter: none;
  opacity: 1;
}

/* Button icons - inherit button color */
.btn-primary img[src*="/icons/"],
.btn-secondary img[src*="/icons/"],
.btn-success img[src*="/icons/"],
.btn-danger img[src*="/icons/"],
.btn-outline img[src*="/icons/"],
.btn-ghost img[src*="/icons/"] {
  filter: none;
}

/* Ensure proper sizing */
.btn-icon {
  width: 16px;
  height: 16px;
}

.nav-icon {
  width: 20px;
  height: 20px;
}

.stat-icon img {
  width: 24px;
  height: 24px;
}