/* ════════════════════════════════════════════════════════════════
   HANZO — Design system "premium fintech" (palette B/N)
   Titoli serif editoriali + pannelli scuri raffinati + tabelle eleganti.
   Ispirato a layout tipo DeepTree, in monocromatico.
   ════════════════════════════════════════════════════════════════ */
/* ★ Font UNICO in tutta l'app: la variabile "serif" ora punta a Poppins,
   così titoli, pannelli e numeri usano lo stesso font del resto dell'interfaccia. */
:root { --font-serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }

/* ── Uplift globale: i titoli di pagina diventano serif eleganti ── */
body.has-shell h1,
.page-header h1,
.nbz-hero-head h1,
.rd-header-left h1,
.bz-header-l h1,
.sm-head h1,
.dt-title {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    letter-spacing: -.5px !important;
}

/* Etichetta maiuscola sopra il titolo (eyebrow) */
.dt-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .64rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #9a9a95;
}

/* ── Hero premium ── */
.dt-hero { margin-bottom: 20px; }
.dt-hero h1 {
    font-family: var(--font-serif); font-weight: 500; font-size: 2.1rem;
    letter-spacing: -.6px; color: #0a0a0a; margin: 7px 0 0; line-height: 1.08;
}
.dt-hero p { color: #71717a; font-size: .88rem; margin: 7px 0 0; max-width: 640px; }
html[data-theme="dark"] .dt-hero h1 { color: #fafafa; }

/* ── Pannello dati scuro (protagonista, stile DeepTree) ── */
.dt-panel {
    background: linear-gradient(180deg, #0b0b0d 0%, #141417 100%);
    border: 1px solid #1f1f23; border-radius: 20px; padding: 22px 24px; color: #e9e9e6;
    position: relative; overflow: hidden;
}
.dt-panel-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.dt-panel-eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7a7a74; }
.dt-panel h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.65rem; letter-spacing: -.5px; color: #fafafa; margin: 4px 0 0; line-height: 1.1; }
.dt-live { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; color: #9a9a92; white-space: nowrap; }
.dt-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* Riga KPI: etichetta piccola + valore serif (come invested/MOIC/IRR) */
.dt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: 1px solid #1f1f23; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.012); }
.dt-kpi { padding: 15px 18px; border-right: 1px solid #1f1f23; min-width: 0; }
.dt-kpi:last-child { border-right: none; }
.dt-kpi-l { font-size: .58rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #6f6f69; margin-bottom: 6px; }
.dt-kpi-v { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -.4px; color: #fafafa; font-variant-numeric: tabular-nums; line-height: 1; }
.dt-kpi-v.pos { color: #86efac; } .dt-kpi-v.neg { color: #fca5a5; }
.dt-kpi-sub { font-size: .66rem; color: #6f6f69; margin-top: 4px; }
@media (max-width: 640px) { .dt-kpi { border-right: none; border-bottom: 1px solid #1f1f23; } }

/* ── Card scura (item di portfolio/azienda) ── */
.dt-card { background: #0e0e10; border: 1px solid #1f1f23; border-radius: 14px; padding: 16px 18px; transition: border-color .15s, transform .15s; }
.dt-card:hover { border-color: #34343a; transform: translateY(-2px); }
.dt-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.dt-card-ico { width: 34px; height: 34px; border-radius: 9px; background: #1a1a1e; color: #cfcfca; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.dt-card-title { font-size: .92rem; font-weight: 600; color: #fafafa; }
.dt-card-sub { font-size: .68rem; color: #6f6f69; }
.dt-badge-score { margin-left: auto; background: #16213a; color: #9ec1ff; border: 1px solid #24365c; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.dt-badge-alert { margin-left: auto; background: #2a1714; color: #fca5a5; border: 1px solid #4a2420; font-size: .62rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; letter-spacing: 1px; }

/* ── Tabella elegante (separatori sottili, look filtrato) ── */
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th { font-size: .6rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #9a9a95; text-align: left; padding: 9px 10px; border-bottom: 1px solid #1f1f23; }
.dt-table td { padding: 12px 10px; border-bottom: 1px solid #161619; font-size: .86rem; color: #e9e9e6; }
.dt-table tr:last-child td { border-bottom: none; }
.dt-table .pos { color: #86efac; } .dt-table .neg { color: #fca5a5; }
.dt-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Barra ricerca premium (stile DeepTree) ── */
.dt-searchbar { display: flex; align-items: center; gap: 11px; background: #161619; border: 1px solid #25252a; border-radius: 12px; padding: 13px 16px; }
.dt-searchbar i { color: #6f6f69; font-size: 1rem; }
.dt-searchbar input { flex: 1; background: transparent; border: none; outline: none; color: #e9e9e6; font-size: .9rem; font-family: inherit; }
.dt-searchbar input::placeholder { color: #6f6f69; }
.dt-searchbar .dt-search-kbd { font-size: .58rem; font-weight: 700; letter-spacing: 1px; color: #6f6f69; text-transform: uppercase; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dt-chip { display: inline-flex; align-items: center; gap: 6px; background: #16213a; color: #9ec1ff; border: 1px solid #24365c; border-radius: 20px; padding: 5px 12px; font-size: .72rem; font-weight: 600; }
.dt-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.dt-chip--plain { background: #1a1a1e; color: #9a9a95; border-color: #2a2a30; }
.dt-chip--plain::before { display: none; }

/* Pill (badge "score"/ruolo/stato) su sfondo scuro */
.dt-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; border: 1px solid; }
.dt-pill--score { background: #10261a; color: #86efac; border-color: #1f4a32; }
.dt-pill--neutral { background: #1a1a1e; color: #cfcfca; border-color: #2a2a30; }
.dt-pill--ok { background: #10261a; color: #86efac; border-color: #1f4a32; }
.dt-pill--warn { background: #2a2410; color: #fcd34d; border-color: #4a3f1f; }
.dt-pill--off { background: #2a1714; color: #fca5a5; border-color: #4a2420; }
.dt-pill--blue { background: #16213a; color: #9ec1ff; border-color: #24365c; }

/* Righe tabella cliccabili / hover */
.dt-table tbody tr.dt-row:hover td { background: rgba(255,255,255,.025); }
.dt-table .dt-idx { color: #5a5a55; font-variant-numeric: tabular-nums; width: 34px; }
.dt-cell-name b { color: #fafafa; font-weight: 600; }
.dt-cell-name small { display: block; color: #6f6f69; font-size: .68rem; }

/* Barre verticali (mini bar chart KPI, stile DeepTree) */
.dt-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.dt-bars .dt-bar { flex: 1; background: #2a2a30; border-radius: 3px 3px 0 0; min-height: 4px; }
.dt-bars .dt-bar.is-last { background: #9ec1ff; }
.dt-bars .dt-bar.is-last-green { background: #86efac; }
.dt-mini-l { font-size: .58rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #6f6f69; }