/* ═══════════════════════════════════════════════════════════════
   OmniaCoin · Tables + Tabs v3.0 — DEFINITIVO
   Font: --fd / --fb / --fm  ·  Row ~48px  ·  Logo 26px
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 3a ── TABS ═══ */
.tabs {
  display: flex; gap: 0.2rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 0; scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-b {
  font-family: var(--fd); font-size: 0.90rem; font-weight: 600;
  color: var(--muted); background: none; border: none;
  padding: 0.65rem 1.1rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.25s; white-space: nowrap; letter-spacing: 0.3px;
}
.tab-b:hover { color: var(--text); }
.tab-b.act { color: var(--a); border-bottom-color: var(--a); }
.tab-c { display: none; }
.tab-c.act { display: block; animation: fi 0.3s ease; }

/* ═══ 3b ── WRAPPER ═══ */
.tbl-w {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius2);
  overflow: hidden; margin-bottom: 1.5rem;
}
.tbl-s { overflow-x: auto; overflow-y: auto; max-height: 650px; }
table { width: 100%; border-collapse: collapse; min-width: 580px; }

/* ── Thead ── */
thead {
  position: sticky; top: 0; z-index: 10;
  background: rgba(6,10,16,0.97);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
th {
  text-align: left; padding: 0.6rem 0.75rem;
  font-family: var(--fd); font-size: 0.72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px;
  border-bottom: 1px solid var(--line2);
  user-select: none; white-space: nowrap; vertical-align: middle;
}
th.r { text-align: right; }
th.trend-th { text-align: center; }
td.trend-td { text-align: center; }

/* ── Sort arrows ── */
th.sortable { cursor: pointer; transition: color 0.2s; }
th.sortable:hover { color: var(--text); }
th.sortable .sort-arr {
  display: inline-flex !important; align-items: center;
  margin-left: 3px; font-size: 0.58rem; gap: 1px; vertical-align: middle;
}
th.sortable .sort-arr-u,
th.sortable .sort-arr-d { opacity: 0.30; transition: opacity 0.2s; line-height: 1; }
th.sortable.asc  .sort-arr-u,
th.sortable.desc .sort-arr-d { opacity: 1; color: var(--a); }
th.sortable.asc  .sort-arr-d,
th.sortable.desc .sort-arr-u { opacity: 0.12; }

/* ── Celle compatte ── */
td {
  padding: 0.42rem 0.72rem;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  font-size: 0.84rem; font-family: var(--fb);
  color: var(--text); vertical-align: middle;
}
tr:hover td { background: rgba(0,220,160,0.025); cursor: pointer; }
tr:last-child td { border-bottom: none; }
td.r { text-align: right; }

/* Rank column */
td:first-child {
  font-size: 0.70rem; color: var(--muted);
  font-family: var(--fm); padding-left: 0.85rem;
  width: 32px; min-width: 32px;
}

/* ── Asset cell: NOME SYM inline ── */
.ac { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.al { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.alp {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.76rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--b), var(--p));
}
.stk-logo-wrap img { width: 26px; height: 26px; object-fit: contain; }
.ai { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; flex-wrap: nowrap; }
.an {
  font-family: var(--fb); font-weight: 600; font-size: 0.84rem;
  color: var(--text); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 130px; line-height: 1.3;
}
/* Simbolo sotto il nome — riga separata */
.as-sym {
  font-family: var(--fm); font-size: 0.68rem;
  color: var(--muted); font-weight: 400; flex-shrink: 0;
  white-space: nowrap; line-height: 1.2; margin-top: 1px; margin-left: 3px;
}
/* Legacy .as – non più usato inline ma mantenuto per compat */
.as { display: none; }

/* ── Stella preferiti ── */
.fs { cursor: pointer; font-size: 0.88rem; opacity: 0.2; transition: all 0.25s; margin-left: auto; flex-shrink: 0; }
.fs.act { opacity: 1; color: var(--warn); }
.fs:hover { opacity: 0.65; transform: scale(1.2); }

/* ── Live dot ── */
.live-dot { color: var(--a); font-size: 0.48rem; vertical-align: middle; margin-left: 2px; animation: pulse 2s infinite; }

/* ── Prezzo ── */
.pr { font-family: var(--fm); font-weight: 700; font-size: 0.80rem; color: var(--text); }
.pr, .tkr-p { transition: color 0.4s ease-out; display: inline-block; }
.pr.trend-up { color: var(--a); }
.pr.trend-dn { color: var(--r); }

/* ── Badge % pill ── */
.ch {
  font-family: var(--fm); font-weight: 700; font-size: 0.74rem;
  padding: 0.16rem 0.40rem; border-radius: 4px;
  display: inline-block; white-space: nowrap; line-height: 1.4;
}
.ch.up { color: var(--a); background: var(--gd); }
.ch.dn { color: var(--r); background: var(--rd); }

/* ── Categoria + Chain: centrate ── */
td:nth-child(9), td:nth-child(10) { text-align: center; }

/* ── Trend pill ── */
.tv-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  font-family: var(--fm); font-weight: 700; font-size: 0.74rem; line-height: 1;
}
.tv-pill.up { background: var(--gd); color: var(--a); border: 1px solid rgba(0,220,160,0.18); }
.tv-pill.dn { background: var(--rd); color: var(--r); border: 1px solid rgba(255,69,96,0.18); }
.tv-pill.ne { background: rgba(139,149,165,0.07); color: var(--muted); border: 1px solid rgba(139,149,165,0.13); }
.tv-arrow { font-size: 0.54rem; flex-shrink: 0; }
.tv-pct   { font-size: 0.74rem; letter-spacing: -0.2px; }
.tv { display: inline-flex; align-items: center; border-radius: 4px; }
.tv.bu { background: var(--gd); border: 1px solid rgba(0,220,160,0.18); }
.tv.be { background: var(--rd); border: 1px solid rgba(255,69,96,0.18); }
.tv.ne { background: rgba(139,149,165,0.07); border: 1px solid rgba(139,149,165,0.13); }
.ta { font-size: 0.88rem; font-weight: 700; }
.ta.up { color: var(--a); }
.ta.dn { color: var(--r); }
.ta.si { color: var(--muted); }

/* ── category-badge / chain-badge centrati ── */
.category-badge {
  display: inline-flex; align-items: center; gap: 0.22rem;
  padding: 0.16rem 0.50rem; border-radius: 4px;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap;
}
.chain-badge {
  display: inline-flex; align-items: center; gap: 0.22rem;
  padding: 0.16rem 0.48rem; border-radius: 4px;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* ═══ 3c ── CATEGORY TAGS ═══ */
.cat-tag {
  display: inline-block; padding: 0.14rem 0.48rem; border-radius: 4px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; font-family: var(--fb); white-space: nowrap;
}
.cat-crypto      { background: rgba(245,158,11,0.13); color: #f59e0b; }
.cat-meme        { background: rgba(236,72,153,0.13); color: #ec4899; }
.cat-forex       { background: rgba(59,130,246,0.13); color: #3b82f6; }
.cat-indices     { background: rgba(34,197,94,0.13);  color: #22c55e; }
.cat-commodities { background: rgba(168,85,247,0.13); color: #a855f7; }
.cat-stocks      { background: rgba(6,182,212,0.13);  color: #06b6d4; }
.cat-topflop     { background: rgba(255,71,87,0.13);  color: #ff4757; }

/* ═══ 3d ── FILTRI ═══ */
.stk-filters {
  background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius2);
  padding: 1rem; margin-bottom: 1rem;
}
.stk-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.7rem; }
.stk-row:last-child { margin-bottom: 0; }
.stk-label { font-family: var(--fd); font-size: 0.76rem; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; min-width: 60px; }
.stk-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.stk-pill {
  padding: 0.28rem 0.68rem; border-radius: 6px; font-size: 0.76rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: transparent;
  color: var(--muted); transition: all 0.2s; font-family: var(--fb);
}
.stk-pill:hover { border-color: var(--line2); color: var(--text); }
.stk-pill.act { background: var(--gd); border-color: rgba(0,220,160,0.3); color: var(--a); }
.cat-filter.active { background: var(--cy) !important; color: #000 !important; font-weight: 600; }

/* Cat/Chain popup multi-select */
.cat-popup-item,
.chain-popup-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.42rem 0.82rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: var(--fb); font-size: 0.80rem;
  font-weight: 500; text-align: left; transition: background 0.15s;
  border-radius: 5px;
}
.cat-popup-item:hover, .chain-popup-item:hover { background: rgba(255,255,255,0.06); }
.cat-popup-item.act, .chain-popup-item.act { background: rgba(0,220,160,0.1); color: var(--a); }
.cat-popup-item-dot, .chain-popup-item-dot {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 900; color: #000;
}
.cat-popup-item-name, .chain-popup-item-name { flex: 1; }
.cat-popup-item-count, .chain-popup-item-count {
  font-family: var(--fm); font-size: 0.70rem; color: var(--muted); font-weight: 400;
}

.stk-range { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 180px; }
.stk-range input[type="range"] { flex: 1; -webkit-appearance: none; height: 5px; background: linear-gradient(90deg, var(--a), var(--b)); border-radius: 999px; outline: none; }
.stk-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 2px solid var(--a); cursor: pointer; box-shadow: 0 0 6px rgba(0,220,160,0.35); }
.stk-range-val { font-family: var(--fm); font-size: 0.82rem; font-weight: 700; color: var(--a); min-width: 60px; }
.stk-search { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 180px; }
.stk-search input { flex: 1; padding: 0.42rem 0.72rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--text); font-family: var(--fb); font-size: 0.84rem; outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
.stk-search input:focus { border-color: var(--a); box-shadow: 0 0 0 2px rgba(0,220,160,0.1); }

/* ═══ 3e ── MEME CHAIN PILLS ═══ */
.meme-header-left { display: flex; align-items: center; gap: 0.5rem; }
.meme-chain-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; align-items: center; }
.meme-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.26rem 0.72rem; border-radius: 20px;
  font-size: 0.76rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  color: var(--muted); transition: all 0.22s ease; font-family: var(--fb); white-space: nowrap;
}
.meme-pill:hover { border-color: var(--cy); color: var(--text); background: rgba(0,255,255,0.05); }
.meme-pill.active { background: linear-gradient(135deg,rgba(0,255,255,0.13),rgba(0,200,255,0.08)); border-color: rgba(0,255,255,0.38); color: var(--cy); }
.pill-count { font-family: var(--fm); font-size: 0.70rem; font-weight: 700; opacity: 0.65; margin-left: 0.1rem; }
.meme-pill.active .pill-count { opacity: 1; }

/* ═══ 3f ── RESPONSIVE ═══ */
@media (max-width: 900px) {
  th  { padding: 0.52rem 0.58rem; font-size: 0.66rem; }
  td  { padding: 0.40rem 0.58rem; font-size: 0.80rem; }
  .an { font-size: 0.80rem; max-width: 110px; }
  .as-sym { font-size: 0.64rem; }
  .pr { font-size: 0.78rem; }
  .ch { font-size: 0.70rem; padding: 0.13rem 0.36rem; }
}
@media (max-width: 600px) {
  table { min-width: 380px; }
  th  { padding: 0.40rem 0.36rem; font-size: 0.58rem; letter-spacing: 0.2px; }
  td  { padding: 0.34rem 0.36rem; font-size: 0.75rem; }
  td:first-child { padding-left: 0.42rem; width: 24px; min-width: 24px; font-size: 0.64rem; }
  .al, .alp, .stk-logo-wrap img { width: 22px !important; height: 22px !important; }
  .an { font-size: 0.74rem; max-width: 88px; }
  .as-sym { font-size: 0.62rem; }
  .pr { font-size: 0.76rem; }
  .ch { font-size: 0.66rem; padding: 0.10rem 0.28rem; }
  .tv-pill { padding: 2px 5px; font-size: 0.66rem; }
  .tbl-s { max-height: 460px; }
  .tab-c th:nth-child(4), .tab-c td:nth-child(4),
  .tab-c th:nth-child(7), .tab-c td:nth-child(7),
  .tab-c th:nth-child(9), .tab-c td:nth-child(9),
  .tab-c th:nth-child(10), .tab-c td:nth-child(10) { display: none !important; }
  .stk-row { flex-direction: column; align-items: stretch; }
  .stk-label, .stk-range, .stk-search { min-width: auto; }
}
@media (max-width: 380px) {
  table { min-width: 320px; }
  th, td { padding: 0.28rem 0.26rem; }
  .ac { gap: 0.28rem; }
  .al, .alp { width: 18px !important; height: 18px !important; }
  .an { max-width: 70px; }
}


/* ═══════════════════════════════════════════════════════════════
   OmniaCoin Market Data — UI Polish Patch v4
   Applied: 2026-03-16
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. THEAD: bianco, right-align numeri ─────────────────────── */
table thead th {
  color: #E9F2F2 !important;
  text-align: right !important;
}
table thead th:nth-child(1),
table thead th:nth-child(2) { text-align: left !important; }
table thead th:nth-child(9),
table thead th:nth-child(10),
table thead th:nth-child(11),
table thead th:nth-child(12) { text-align: center !important; }

/* ── 2. TD valori numerici: JetBrains Mono uniforme ──────────── */
table tbody td:nth-child(3),
table tbody td:nth-child(4),
table tbody td:nth-child(5),
table tbody td:nth-child(6),
table tbody td:nth-child(7),
table tbody td:nth-child(8) {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.80rem !important;
  text-align: right !important;
}

/* ── 3. CATEGORY badge: Outfit, 0.62rem, UPPERCASE ───────────── */
.category-badge,
span[class^="cat-"], span[class*=" cat-"],
.cat-layer1, .cat-layer2, .cat-defi, .cat-stable,
.cat-exchange, .cat-meme, .cat-ai, .cat-infra,
.cat-privacy, .cat-rwa {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 2px 6px !important;
}

/* ── 4. CHAIN badge in td: stesso stile category ─────────────── */
td span[style*="border-radius"] {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* ── 5. FILTRI: CAT + CHAIN + GUIDA stessa font ──────────────── */
.cat-popup-btn, #catPopupBtn, #catPopupBtn span:first-child,
.chain-popup-btn, #chainPopupBtn, #chainPopupBtn span:first-child,
.filter-guide-unified-btn {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
}
.chain-popup-caret, .cat-popup-caret {
  font-family: 'Outfit', sans-serif !important;
}

/* ── 6. Guida: accanto a CAT/CHAIN (no margin-left auto) ──────── */
.filter-guide-unified-btn {
  margin-left: 0 !important;
  order: 3 !important;
}

/* ── 7. ACCORDION frecce sinistra: nascondi ─────────────────── */
.tab-acc-chevron { display: none !important; }

/* ── 8. IND-ICON: nascondi ───────────────────────────────────── */
.ind-icon { display: none !important; }

/* ── 9. IND-STATUS dots puri CSS ─────────────────────────────── */
.ind-status.s-success::before {
  content: '' !important; display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #00dca0 !important;
  margin-right: 5px !important; box-shadow: 0 0 6px #00dca088 !important;
  vertical-align: middle !important;
}
.ind-status.s-warning::before {
  content: '' !important; display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #f7c948 !important;
  margin-right: 5px !important; box-shadow: 0 0 6px #f7c94888 !important;
  vertical-align: middle !important;
}
.ind-status.s-danger::before {
  content: '' !important; display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #ff4560 !important;
  margin-right: 5px !important; box-shadow: 0 0 6px #ff456088 !important;
  vertical-align: middle !important;
}

/* ── 10. ORARI: macro e borse stessa dimensione ──────────────── */
#macroUpdTime, .macro-global-upd strong {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #00dca0 !important;
}
.exchange-tl-clock, #exchangeClockCET {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #00dca0 !important;
}
.macro-global-upd {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  color: var(--muted) !important;
}
.macro-upd-label {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.68rem !important;
  opacity: 0.7 !important;
}

/* ── 11. Borse legend: nascondi orario duplicato ─────────────── */
.exchange-legend-item:last-child { display: none !important; }

/* ── 12. TAB bar font ─────────────────────────────────────────── */
.tab-b { font-family: 'Outfit', sans-serif !important; font-size: 0.82rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.stk-pill, .chain-pill { font-family: 'Outfit', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; text-transform: none !important; }

/* ── 13. FILTRI label: nascondi ──────────────────────────────── */
.comb-filter-label { display: none !important; }

/* ── 14. BANDIERE ECO CALENDARIO: 22×14px ────────────────────── */
.fx-flag, img.fx-flag { width: 22px !important; height: 14px !important; object-fit: cover !important; }
.eco-flag-img { width: 22px !important; height: 14px !important; border-radius: 2px !important; object-fit: cover !important; }
.fx-flags { gap: 2px !important; }

/* ── 15. BREAKING FLAG: compatto ─────────────────────────────── */
.eco-flag-btn.breaking-flag::after {
  content: "⚡" !important; font-size: 9px !important; line-height: 1 !important;
  flex-shrink: 0 !important; display: inline-block !important; animation: none !important;
}
.eco-flag-btn.breaking-flag, button.eco-flag-btn {
  min-height: unset !important; height: auto !important;
  padding: 2px 3px 2px 2px !important; gap: 2px !important;
}

/* ── CHAIN span dinamici (meme/dex): strip emoji via CSS impossibile, ──
   ma assicura font uniforme anche se il JS non è stato ancora run ── */
td span[style*="border-radius"]:not(.chain-badge) {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}



/* ── BADGE UNIFORME: identici in dimensione e font ── */
.category-badge,
span[class^="cat-"], span[class*=" cat-"],
.cat-layer1,.cat-layer2,.cat-defi,.cat-stable,
.cat-exchange,.cat-meme,.cat-ai,.cat-infra,
.cat-privacy,.cat-rwa {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 0.16rem 0.5rem !important;
  gap: 0.22rem !important;
  white-space: nowrap !important;
}

.chain-badge {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 0.16rem 0.5rem !important;
  gap: 0.22rem !important;
  white-space: nowrap !important;
}

/* Colonne CATEGORIA (9) e CHAIN (10): centrate */
table tbody td:nth-child(9),
table tbody td:nth-child(10) {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Colonne TREND (11) e QN (12): centrate */
table tbody td:nth-child(11),
table tbody td:nth-child(12) {
  text-align: center !important;
  vertical-align: middle !important;
}

table thead th:nth-child(11),
table thead th:nth-child(12) {
  text-align: center !important;
}