/* ==========================================================================
   Revalior — Tema "premium" (caricato per ultimo)
   Angoli morbidi, ombre leggere, profondità sullo sfondo e la V grande e sfumata
   come nelle copertine del brand book (slide 2, 11, 13). Colori solo dai token.
   ========================================================================== */

:root {
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 1px 2px rgba(6, 46, 40, .04), 0 10px 28px -14px rgba(6, 46, 40, .16);
  --shadow-hover: 0 2px 4px rgba(6, 46, 40, .06), 0 22px 44px -18px rgba(6, 46, 40, .28);
  --line-soft: rgba(6, 46, 40, .07);
}

/* ---------- Sfondo con la V ------------------------------------------- */

body {
  background:
    radial-gradient(1100px 620px at 100% -10%, rgba(231, 239, 235, .95), transparent 70%),
    radial-gradient(900px 520px at -10% 110%, rgba(231, 239, 235, .7), transparent 70%),
    var(--rv-nebbia);
  background-attachment: fixed;
}

.bg-mark {
  position: fixed;
  right: -6vw;
  bottom: -14vh;
  z-index: 0;
  width: min(72vw, 1140px);
  opacity: .13;
  pointer-events: none;
  /* la V si dissolve verso l'alto a sinistra: presenza discreta, mai un adesivo */
  -webkit-mask-image: linear-gradient(135deg, transparent 18%, #000 72%);
  mask-image: linear-gradient(135deg, transparent 18%, #000 72%);
}
.bg-mark .rv-deco { width: 100%; height: auto; }
.main { position: relative; }
.page, .app-footer { position: relative; z-index: 1; }   /* la topbar resta sticky (z-index 10) */

/* ---------- Barra laterale --------------------------------------------- */

.sidebar {
  overflow-x: hidden;
  background: linear-gradient(180deg, #08423A 0%, var(--rv-profondo) 42%, #04211C 100%);
  box-shadow: inset -1px 0 0 rgba(245, 248, 246, .06);
}
.sidebar__brand, .sidebar nav, .sidebar__foot { position: relative; z-index: 1; }
.sidebar__mark {
  position: absolute;
  left: -70px;
  bottom: -40px;
  z-index: 0;
  width: 360px;
  opacity: .22;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(20deg, #000 30%, transparent 85%);
  mask-image: linear-gradient(20deg, #000 30%, transparent 85%);
}
.sidebar__mark .rv-deco { width: 100%; height: auto; }
.nav-link { border-radius: 10px; }
.nav-link[aria-current="page"] { background: linear-gradient(90deg, rgba(60, 201, 160, .18), rgba(60, 201, 160, .04)); }
.sidebar__promo { border-radius: var(--radius-md); background: rgba(245, 248, 246, .05); backdrop-filter: blur(4px); }

/* ---------- Barra in alto ---------------------------------------------- */

.topbar { background: rgba(245, 248, 246, .72); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line-soft); }
.avatar { box-shadow: 0 0 0 3px rgba(8, 122, 104, .12); }

/* ---------- Superfici -------------------------------------------------- */

.card, .stat, .tile, .filters, .table-wrap, .tab-panel, .mail-preview, .device, .psteps, .pres-area, .pres-stats div {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card, .stat, .tile, .filters { background: rgba(252, 253, 252, .94); }
.card--dark { background: linear-gradient(135deg, #0A4A40 0%, var(--rv-profondo) 55%, #04211C 100%); border-color: transparent; }
.card--salvia { background: rgba(231, 239, 235, .9); }
.card--accent { border-top: 3px solid var(--rv-verde); }
.card--warning { border-top: 3px solid var(--rv-ambra); }
.stat { position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--rv-verde), transparent 70%); opacity: .5; }
.stat__value { font-size: 1.875rem; letter-spacing: -.025em; }

.tile { border-top-width: 1px; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--rv-salvia); }
.tile:hover { box-shadow: var(--shadow-hover); border-color: rgba(8, 122, 104, .22); }
.tile:hover::before { background: var(--rv-verde); }
.tile--human::before { background: #EAD9B8; }
.tile--attn::before, .tile--human:hover::before { background: var(--rv-ambra); }
.tile__icon { border-radius: 12px; }

/* ---------- Tabelle ------------------------------------------------------ */

.table-wrap { overflow: auto; background: var(--color-surface); }
.table th { background: var(--rv-profondo); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.table td { border-top-color: var(--line-soft); }
.table tbody tr { transition: background-color .12s var(--ease); }
.table tbody tr:hover td { background: #EEF5F1; }

/* ---------- Controlli ---------------------------------------------------- */

.btn { border-radius: 10px; }
.btn--primary { background: linear-gradient(180deg, #0A8C77 0%, var(--rv-verde) 100%); box-shadow: 0 1px 2px rgba(6, 46, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn--primary:hover { background: var(--rv-profondo); }
.btn--ghost { background: rgba(252, 253, 252, .8); }
.input, .select, .chip, .seg3 button, .day, .agent-tab, .choice { border-radius: 10px; }
.tabs { gap: 6px; }
.tab { border-radius: 10px 10px 0 0; }
.dialog { border-radius: var(--radius-md); }
.toast { border-radius: 12px; }

/* ---------- Testate ------------------------------------------------------ */

.page-header h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.025em; }
.page-header .eyebrow::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 8px; background: var(--rv-verde); }

/* ---------- Home: banner ------------------------------------------------- */

.home-hero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 48px); margin-bottom: 28px; color: var(--color-on-dark-muted); }
.home-hero .rv-deco { position: absolute; right: -4%; top: -30%; width: auto; height: 170%; opacity: .9; pointer-events: none; }
.home-hero__body { position: relative; z-index: 1; max-width: 760px; }
.home-hero h1 { margin-top: 10px; color: var(--color-on-dark); font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -.025em; }
.home-hero__lead { margin-top: 10px; font-size: var(--fs-lg); }
.home-hero__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.home-hero__kpi div { padding: 14px 16px; border: 1px solid rgba(245, 248, 246, .12); border-radius: 12px; background: rgba(245, 248, 246, .05); backdrop-filter: blur(4px); }
.home-hero__kpi b { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--rv-menta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.home-hero__kpi span { font-size: var(--fs-xs); }

@media (max-width: 960px) {
  .bg-mark { width: 110vw; right: -30vw; }
  .home-hero__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }