/* ═══════════════════════════════════════════════════════════════
   diaspora.ro — SVG Icon System v1.0
   Folosire: <svg class="ic ic-home ic-md"><use href="#ic-home"/></svg>
   ─────────────────────────────────────────────────────────────── */

/* ── SIZE SCALE ── */
.ic { display:inline-block; flex-shrink:0; vertical-align:middle; fill:none; stroke:currentColor; }
.ic-xs  { width:14px; height:14px; }
.ic-sm  { width:16px; height:16px; }
.ic-md  { width:20px; height:20px; }
.ic-lg  { width:24px; height:24px; }
.ic-xl  { width:28px; height:28px; }
.ic-2xl { width:32px; height:32px; }
.ic-3xl { width:40px; height:40px; }

/* ── FILL-ONLY ICONS (logo, solid) ── */
.ic-fill { fill:currentColor; stroke:none; }

/* ── COLORS ── */
.ic-brand   { color: var(--brand,  #7c3aed); }
.ic-blue    { color: var(--blue,   #1877f2); }
.ic-green   { color: var(--green,  #42b72a); }
.ic-red     { color: var(--red,    #e41e3f); }
.ic-amber   { color: var(--amber,  #d97706); }
.ic-muted   { color: var(--muted,  #8a8d91); }
.ic-white   { color: #ffffff; }
.ic-ink     { color: var(--ink,    #050505); }

/* ── TOUCH TARGET WRAPPER ── */
.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  padding: 0;
}
.ic-btn:hover  { background: rgba(0,0,0,0.06); }
.ic-btn:active { transform: scale(0.92); background: rgba(0,0,0,0.1); }
.ic-btn.square { border-radius: 10px; }

/* Dark mode touch target */
[data-theme="dark"] .ic-btn:hover  { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ic-btn:active { background: rgba(255,255,255,0.14); }

/* ── ACTIVE / FILLED STATE ── */
.ic-btn.active .ic         { color: var(--brand, #7c3aed); }
.ic-btn.active .ic-outline { display: none; }
.ic-btn.active .ic-filled  { display: inline-block; }
.ic-btn .ic-filled         { display: none; }

/* ── NAV BAR ITEM ── */
.nav-ic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 44px;
  padding: 6px 4px;
  color: var(--ink2, #65676b);
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.nav-ic-item:hover  { color: var(--ink, #050505); }
.nav-ic-item.active { color: var(--brand, #7c3aed); border-bottom-color: var(--brand, #7c3aed); }
.nav-ic-item.active .ic-outline { display: none; }
.nav-ic-item.active .ic-filled  { display: inline-block; }
.nav-ic-item .ic-filled         { display: none; }

/* ── BADGE ── */
.ic-badge-wrap { position: relative; display: inline-flex; }
.ic-badge {
  position: absolute;
  top: -2px; right: -6px;
  background: var(--red, #e41e3f);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card, #fff);
  padding: 0 3px;
  line-height: 1;
}
.ic-badge:empty,
.ic-badge[data-count="0"] { display: none; }

/* ── SPIN ANIMATION (loading) ── */
.ic-spin { animation: ic-spin 0.9s linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* ── PULSE (live/online dot) ── */
.ic-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green, #42b72a);
  box-shadow: 0 0 0 0 rgba(66, 183, 42, 0.4);
  animation: ic-pulse 2s infinite;
}
@keyframes ic-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(66, 183, 42, 0.5); }
  70%  { box-shadow: 0 0 0 8px  rgba(66, 183, 42, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(66, 183, 42, 0);   }
}