/* MacWP EOY Challenge - Icon System */

/* Base Icon Classes */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-sm {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.icon-lg {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* Icon Types - ALLE verwenden placeholder.svg bis du sie ersetzt */
.icon-home { background-image: url('../images/icons/placeholder.svg'); }
.icon-users { background-image: url('../images/icons/placeholder.svg'); }
.icon-document { background-image: url('../images/icons/placeholder.svg'); }
.icon-gift { background-image: url('../images/icons/placeholder.svg'); }
.icon-gamepad { background-image: url('../images/icons/placeholder.svg'); }
.icon-chart { background-image: url('../images/icons/placeholder.svg'); }
.icon-logout { background-image: url('../images/icons/placeholder.svg'); }
.icon-settings { background-image: url('../images/icons/placeholder.svg'); }
.icon-plus { background-image: url('../images/icons/placeholder.svg'); }
.icon-check { background-image: url('../images/icons/placeholder.svg'); }
.icon-close { background-image: url('../images/icons/placeholder.svg'); }
.icon-warning { background-image: url('../images/icons/placeholder.svg'); }
.icon-info { background-image: url('../images/icons/placeholder.svg'); }
.icon-edit { background-image: url('../images/icons/placeholder.svg'); }
.icon-trash { background-image: url('../images/icons/placeholder.svg'); }
.icon-calendar { background-image: url('../images/icons/placeholder.svg'); }
.icon-bell { background-image: url('../images/icons/placeholder.svg'); }
.icon-star { background-image: url('../images/icons/placeholder.svg'); }
.icon-heart { background-image: url('../images/icons/placeholder.svg'); }
.icon-search { background-image: url('../images/icons/placeholder.svg'); }
.icon-tree { background-image: url('../images/icons/placeholder.svg'); }
.icon-snowflake { background-image: url('../images/icons/placeholder.svg'); }
.icon-prize { background-image: url('../images/icons/placeholder.svg'); }
.icon-crown { background-image: url('../images/icons/placeholder.svg'); }

/* Small Icon Variants - ALLE verwenden placeholder.svg bis du sie ersetzt */
.icon-sm.icon-home { background-image: url('../images/icons/placeholder.svg'); }
.icon-sm.icon-users { background-image: url('../images/icons/placeholder.svg'); }
.icon-sm.icon-logout { background-image: url('../images/icons/placeholder.svg'); }
.icon-sm.icon-check { background-image: url('../images/icons/placeholder.svg'); }
.icon-sm.icon-close { background-image: url('../images/icons/placeholder.svg'); }

/* Large Icon Variants - ALLE verwenden placeholder.svg bis du sie ersetzt */
.icon-lg.icon-gift { background-image: url('../images/icons/placeholder.svg'); }
.icon-lg.icon-prize { background-image: url('../images/icons/placeholder.svg'); }

/* Special: Inline Icons for Text (z.B. in Checklisten) */
.icon-inline {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-left: 0;
  vertical-align: text-bottom;
}

/* Fallback für fehlende Icons - zeigt Placeholder */
.icon:not([class*="icon-"]):not(.icon-sm):not(.icon-lg):not(.icon-inline),
.icon-placeholder {
  background-image: url('../images/icons/placeholder.svg');
  opacity: 0.5;
}

/* Icon in verschiedenen Kontexten */
.btn .icon {
  margin-left: -4px;
}

.card-title .icon {
  margin-right: 10px;
}

.tab-btn .icon {
  margin-right: 6px;
}

.checklist-status {
  /* Für Checkmarks/X verwenden wir weiterhin Unicode als Fallback */
  font-size: 18px;
  width: 24px;
  text-align: center;
  display: inline-block;
}

/* Icons für Checkmarks */
.checklist-status.status-done {
  font-size: 0 !important;
  background-image: url('../images/icons/placeholder.svg') !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
}

.checklist-status.status-pending {
  font-size: 0 !important;
  background-image: url('../images/icons/placeholder.svg') !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  opacity: 0.5 !important;
}