/* ═══════════════════════════════════════════════════════════════
   IIO Icon System CSS
   Lädt icons.svg inline und stellt Icon-Utility-Klassen bereit
   Version: 1.0 — 2026-05-22
   ═══════════════════════════════════════════════════════════════ */

/* ── Base Icon ──────────────────────────────────────────────── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .2s, opacity .2s;
}

/* ── Sizes ──────────────────────────────────────────────────── */
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 40px; height: 40px; }
.icon-3xl { width: 48px; height: 48px; }

/* ── Colors ─────────────────────────────────────────────────── */
.icon-org { color: var(--org); }
.icon-grn { color: var(--grn); }
.icon-blu { color: var(--blu); }
.icon-vio { color: var(--vio); }
.icon-red { color: var(--red); }
.icon-cyn { color: var(--cyn); }
.icon-dim { color: var(--t4); }
.icon-muted { color: var(--t3); }

/* ── Icon Container (für farbige Hintergründe) ──────────────── */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r3);
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: box-shadow .25s;
}

/* Sizes für icon-box */
.icon-box-sm  { width: 32px; height: 32px; }
.icon-box-md  { width: 40px; height: 40px; }
.icon-box-lg  { width: 48px; height: 48px; }
.icon-box-xl  { width: 56px; height: 56px; }

/* Farb-Varianten */
.icon-box-org { background: var(--g-org); border-color: rgba(243,146,0,.18); color: var(--org); }
.icon-box-grn { background: var(--g-grn); border-color: rgba(31,209,106,.18); color: var(--grn); }
.icon-box-blu { background: var(--g-blu); border-color: rgba(91,156,246,.18); color: var(--blu); }
.icon-box-vio { background: var(--g-vio); border-color: rgba(155,109,255,.18); color: var(--vio); }
.icon-box-red { background: var(--g-red); border-color: rgba(255,77,94,.18);  color: var(--red); }
.icon-box-cyn { background: var(--g-cyn); border-color: rgba(0,204,245,.18);  color: var(--cyn); }

/* Hover Glow-Effekt auf Icon-Boxes */
.icon-box-org:hover { box-shadow: 0 0 20px rgba(243,146,0,.2); }
.icon-box-grn:hover { box-shadow: 0 0 20px rgba(31,209,106,.2); }
.icon-box-blu:hover { box-shadow: 0 0 20px rgba(91,156,246,.2); }
.icon-box-vio:hover { box-shadow: 0 0 20px rgba(155,109,255,.2); }
.icon-box-cyn:hover { box-shadow: 0 0 20px rgba(0,204,245,.2); }

/* ── Status Indikatoren ─────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .2rem .6rem;
  border-radius: var(--r1);
  font-family: var(--m);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px solid;
}

.status-go      { background: var(--g-grn); color: var(--grn); border-color: rgba(31,209,106,.25); }
.status-block   { background: var(--g-red); color: var(--red); border-color: rgba(255,77,94,.25); }
.status-pending { background: var(--g-org); color: var(--org); border-color: rgba(243,146,0,.25); }
.status-auto    { background: var(--g-blu); color: var(--blu); border-color: rgba(91,156,246,.25); }
.status-hitl    { background: var(--g-vio); color: var(--vio); border-color: rgba(155,109,255,.25); }

/* ── Animated Icons ─────────────────────────────────────────── */
@keyframes iconSpin {
  to { transform: rotate(360deg); }
}
@keyframes iconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.9); }
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

.icon-spin   { animation: iconSpin 1.2s linear infinite; }
.icon-pulse  { animation: iconPulse 2s ease-in-out infinite; }
.icon-float  { animation: iconFloat 3s ease-in-out infinite; }

/* ── Utility: Icon mit Text inline ─────────────────────────── */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .icon-box-xl { width: 44px; height: 44px; }
  .icon-box-lg { width: 38px; height: 38px; }
}