/* ════════════════════════════════════════════════════════════════
STUDIO IRIDE — REFINE LAYER (additivo, caricato dopo system+premium)
1) colore semantico 2) numeri 3) tabelle 4) elevazione
5) motion sobrio 6) sistema icone SVG (mask, eredita currentColor)
════════════════════════════════════════════════════════════════ */
/* ─── 1) COLORE SEMANTICO ────────────────────────────────────── */
:root {
--ok: #34d399; --ok-bg: rgba(52,211,153,.13); --ok-bd: rgba(52,211,153,.40);
--warn: #e0b341; --warn-bg: rgba(224,179,65,.13); --warn-bd: rgba(224,179,65,.40);
--danger: #e24b4a; --danger-bg: rgba(226,75,74,.13); --danger-bd: rgba(226,75,74,.42);
--info: #38bdf8; --info-bg: rgba(56,189,248,.12); --info-bd: rgba(56,189,248,.38);
--neutral: var(--ink-muted);
}
/* Pillola di STATO — uso disciplinato: solo stati, mai decorazione */
.v3-stat {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
background: var(--glass-base); border: 1px solid var(--glass-stroke);
color: var(--ink-text); white-space: nowrap;
}
.v3-stat::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
.v3-stat--ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.v3-stat--warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.v3-stat--danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger); }
.v3-stat--info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.v3-stat--muted { color: var(--ink-muted); }
/* Testo semantico (per importi/etichette) */
.t-ok { color: var(--ok) !important; }
.t-warn { color: var(--warn) !important; }
.t-danger { color: var(--danger) !important; }
.t-info { color: var(--info) !important; }
.t-muted { color: var(--ink-muted) !important; }
/* ─── 2) NUMERI ──────────────────────────────────────────────── */
/* I soldi sono i protagonisti: cifre a larghezza fissa, mono, allineabili */
.v3-money, .num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
td.num, th.num, .num--r { text-align: right; }
/* ─── 3) TABELLE ─────────────────────────────────────────────── */
/* Applica un look "contabile" pulito alle tabelle dentro le card glass
e a qualsiasi table.v3-table. Additivo: stili inline esistenti vincono. */
.v3-glass table, table.v3-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.v3-glass thead th, table.v3-table thead th {
position: sticky; top: 0; z-index: 1;
background: rgba(19,21,26,.94);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
text-align: left;
font-size: 11px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase;
color: var(--ink-muted);
padding: 9px 12px;
border-bottom: 1px solid var(--glass-stroke);
}
.v3-glass tbody td, table.v3-table tbody td {
padding: 9px 12px;
font-size: 13px;
border-top: 1px solid rgba(255,255,255,.05);
}
.v3-glass tbody tr:nth-child(even) td,
table.v3-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.v3-glass tbody tr:hover td,
table.v3-table tbody tr:hover td { background: rgba(194,161,78,.07); }
.v3-glass tfoot td, table.v3-table tfoot td {
padding: 10px 12px;
font-weight: 700;
border-top: 2px solid var(--glass-stroke-strong);
}
/* ─── 4) ELEVAZIONE (3 livelli netti) ────────────────────────── */
/* !important perché premium.css impone l'ombra di .v3-glass con !important */
.v3-elev-1 { box-shadow: 0 1px 3px rgba(0,0,0,.25) !important; } /* rientra (ambientale) */
.v3-elev-2 { box-shadow: 0 6px 18px rgba(0,0,0,.34) !important; } /* default-ish */
.v3-elev-3 {
box-shadow: 0 14px 40px rgba(0,0,0,.46) !important;
border-color: var(--glass-stroke-strong) !important;
}
/* La card "in evidenza" si solleva: bordo oro tenue + ombra profonda (tiene il gradiente) */
.v3-glass--feature {
border-color: rgba(194,161,78,.34) !important;
box-shadow: 0 18px 46px rgba(0,0,0,.50), 0 0 0 1px rgba(194,161,78,.12) !important;
}
/* ─── 5) MOTION SOBRIO ───────────────────────────────────────── */
/* Solo un fade d'ingresso del contenuto: niente sci-fi, niente conflitti
con gli hover-lift (animiamo l'opacità del contenitore, non le card). */
@media (prefers-reduced-motion: no-preference) {
.v3-shell-main { animation: v3FadeIn .42s var(--ease-glide) both; }
@keyframes v3FadeIn { from { opacity: 0; } to { opacity: 1; } }
}
/* ─── 6) SISTEMA ICONE SVG (mask → eredita color, nitide a ogni dpi) ── */
.ico {
display: inline-block;
width: 1em; height: 1em;
vertical-align: -0.14em;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
flex: 0 0 auto;
}
.ico-lg { width: 1.25em; height: 1.25em; }
.ico-muted { color: var(--ink-muted); }
/* spaziatura quando affianca testo in un button/chip */
.v3-btn .ico, .v3-chip .ico, .v3-stat .ico { margin-right: 1px; }
.ico-doc { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-receipt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-mail { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-download { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-send { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-clock { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-alert { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-euro { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-search { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-plus { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-trash { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-edit { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-eye { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* icone aggiuntive (rollout 26 giu) */
.ico-link { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-card { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-refresh { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-eye-off { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-globe { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-sparkles { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-gear { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* icone rollout oggi/home (26 giu) */
.ico-bell { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-user { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-users { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-paperclip{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-chat { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-video { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-star { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-x { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* icone hub/tab (26 giu) */
.ico-clipboard{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-megaphone{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-inbox { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-bag { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-folder { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-shield { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-mic { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-phone { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-calendar { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* icone batch pagine (26 giu) */
.ico-building { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-upload { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-save { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-chart { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico-home { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }