/* ================================================================
   OmniaCoin(tm) -- Icon System CSS v2.0
   Glassmorphism Web3 Icons
   Colori accent per categoria:
   --oi-cy  : #00dca0  (cyan/verde  — mercati, nav primario)
   --oi-go  : #f7c948  (gold        — finanza, revenue, premium)
   --oi-pu  : #a855f7  (purple      — AI, neural, quantum)
   --oi-co  : #ff6b6b  (coral       — alert, rischio, trending)
   --oi-bl  : #3b9eff  (blue        — info, dati, analytics)
   ================================================================ */

:root {
  --oi-cy: #00dca0;
  --oi-go: #f7c948;
  --oi-pu: #a855f7;
  --oi-co: #ff6b6b;
  --oi-bl: #3b9eff;
}

/* ── INLINE ICON (nei bottoni/label, 14–20px) ──────────────────── */
.oi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}
.oi svg { display: block; }

/* colori preset inline */
.oi-cy svg  { stroke: var(--oi-cy); filter: drop-shadow(0 0 4px rgba(0,220,160,.35)); }
.oi-go svg  { stroke: var(--oi-go); filter: drop-shadow(0 0 4px rgba(247,201,72,.35)); }
.oi-pu svg  { stroke: var(--oi-pu); filter: drop-shadow(0 0 4px rgba(168,85,247,.35)); }
.oi-co svg  { stroke: var(--oi-co); filter: drop-shadow(0 0 4px rgba(255,107,107,.35)); }
.oi-bl svg  { stroke: var(--oi-bl); filter: drop-shadow(0 0 4px rgba(59,158,255,.35)); }

/* ── GLASS ICON (featured, section header, card icon) ──────────── */
/* Usage: <span class="oi-glass oi-glass--cy"> + svg </span> */
.oi-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: all .25s ease;
}
.oi-glass--cy {
  background: rgba(0,220,160,.1);
  border: 1px solid rgba(0,220,160,.2);
  box-shadow: 0 0 12px rgba(0,220,160,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.oi-glass--cy svg { stroke: var(--oi-cy); filter: drop-shadow(0 0 6px rgba(0,220,160,.55)); }
.oi-glass--cy:hover { background: rgba(0,220,160,.16); box-shadow: 0 0 20px rgba(0,220,160,.18); }

.oi-glass--go {
  background: rgba(247,201,72,.1);
  border: 1px solid rgba(247,201,72,.2);
  box-shadow: 0 0 12px rgba(247,201,72,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.oi-glass--go svg { stroke: var(--oi-go); filter: drop-shadow(0 0 6px rgba(247,201,72,.55)); }
.oi-glass--go:hover { background: rgba(247,201,72,.16); box-shadow: 0 0 20px rgba(247,201,72,.18); }

.oi-glass--pu {
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.2);
  box-shadow: 0 0 12px rgba(168,85,247,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.oi-glass--pu svg { stroke: var(--oi-pu); filter: drop-shadow(0 0 6px rgba(168,85,247,.55)); }
.oi-glass--pu:hover { background: rgba(168,85,247,.16); box-shadow: 0 0 20px rgba(168,85,247,.18); }

.oi-glass--co {
  background: rgba(255,107,107,.1);
  border: 1px solid rgba(255,107,107,.2);
  box-shadow: 0 0 12px rgba(255,107,107,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.oi-glass--co svg { stroke: var(--oi-co); filter: drop-shadow(0 0 6px rgba(255,107,107,.55)); }
.oi-glass--co:hover { background: rgba(255,107,107,.16); box-shadow: 0 0 20px rgba(255,107,107,.18); }

.oi-glass--bl {
  background: rgba(59,158,255,.1);
  border: 1px solid rgba(59,158,255,.2);
  box-shadow: 0 0 12px rgba(59,158,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.oi-glass--bl svg { stroke: var(--oi-bl); filter: drop-shadow(0 0 6px rgba(59,158,255,.55)); }
.oi-glass--bl:hover { background: rgba(59,158,255,.16); box-shadow: 0 0 20px rgba(59,158,255,.18); }

/* size modifiers */
.oi-glass--sm  { width: 28px; height: 28px; border-radius: 8px; }
.oi-glass--md  { width: 36px; height: 36px; border-radius: 10px; }
.oi-glass--lg  { width: 48px; height: 48px; border-radius: 12px; }
.oi-glass--xl  { width: 64px; height: 64px; border-radius: 14px; }
.oi-glass--2xl { width: 80px; height: 80px; border-radius: 18px; }

/* ── SECTION LABEL ICON (inline in titoli sezione) ─────────────── */
.oi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.oi-label svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── TAB BUTTON ICON ────────────────────────────────────────────── */
.tab-b svg, .stk-pill svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ── SORT ARROWS (tabella) ──────────────────────────────────────── */
.sort-arr-u svg, .sort-arr-d svg {
  width: 8px; height: 8px;
  display: inline-block;
  vertical-align: middle;
}

/* ── ADMIN SIDEBAR NAV ICON ─────────────────────────────────────── */
.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}
.admin-nav-icon svg { stroke: rgba(255,255,255,.45); transition: stroke .2s; }
.admin-nav-item:hover .admin-nav-icon svg,
.admin-nav-item.active .admin-nav-icon svg {
  stroke: var(--oi-cy);
  filter: drop-shadow(0 0 5px rgba(0,220,160,.4));
}

/* ── ADMIN KPI ICON OVERRIDE ────────────────────────────────────── */
.admin-kpi-icon { transition: box-shadow .2s; }
.admin-kpi-icon.green svg { stroke: var(--oi-cy); filter: drop-shadow(0 0 6px rgba(0,220,160,.5)); }
.admin-kpi-icon.blue  svg { stroke: var(--oi-bl); filter: drop-shadow(0 0 6px rgba(59,158,255,.5)); }
.admin-kpi-icon.purple svg { stroke: var(--oi-pu); filter: drop-shadow(0 0 6px rgba(168,85,247,.5)); }
.admin-kpi-icon.orange svg { stroke: var(--oi-go); filter: drop-shadow(0 0 6px rgba(247,201,72,.5)); }
.admin-kpi-icon.cyan  svg { stroke: var(--oi-cy); filter: drop-shadow(0 0 6px rgba(0,220,160,.5)); }
.admin-kpi-icon.red   svg { stroke: var(--oi-co); filter: drop-shadow(0 0 6px rgba(255,107,107,.5)); }

/* ── MACRO/ACADEMY CATEGORY ICON ───────────────────────────────── */
.ac-macro-icon svg {
  filter: drop-shadow(0 0 16px var(--col, rgba(0,220,160,.5)));
  transition: filter .3s, transform .3s;
}
.ac-macro:hover .ac-macro-icon svg {
  filter: drop-shadow(0 0 28px var(--col, rgba(0,220,160,.7)));
}