/* ============================================================
   Marchio · Fenice by Ottobix
   Collega le variabili storiche del CRM (--ink, --accent, --gold…) ai token
   di Fenice (--fe-*, in fenice/tokens.css). Si carica DOPO style.css:
   così ogni schermata prende colori, font, raggi e ombre nuovi senza
   riscrivere le viste. Tema scuro: i --fe-* cambiano da soli con data-theme.
   ============================================================ */
:root, [data-theme="light"], [data-theme="dark"] {
  --font: var(--fe-font);

  /* Testo: inchiostro caldo e le sue attenuazioni */
  --ink: var(--fe-ink);
  --ink-75: var(--fe-graphite);
  --ink-60: var(--fe-secondary);
  --ink-50: color-mix(in srgb, var(--fe-ink) 50%, transparent);
  --ink-45: color-mix(in srgb, var(--fe-ink) 45%, transparent);
  --ink-35: var(--fe-tertiary);
  --ink-15: color-mix(in srgb, var(--fe-ink) 15%, transparent);
  --ink-12: color-mix(in srgb, var(--fe-ink) 12%, transparent);
  --ink-10: var(--fe-separator);
  --ink-08: var(--fe-separator);
  --ink-06: var(--fe-separator-soft);
  --ink-04: var(--fe-group);

  /* Fondi */
  --bg: var(--fe-surface);
  --surface: var(--fe-paper);
  --surface-2: var(--fe-group);

  /* Corallo: azione principale, selezione, dato principale */
  --accent: var(--fe-primary);
  --accent-hover: color-mix(in srgb, var(--fe-primary) 88%, black);
  --accent-a07: color-mix(in srgb, var(--fe-primary) 7%, transparent);
  --accent-a09: color-mix(in srgb, var(--fe-primary) 9%, transparent);
  --accent-a12: color-mix(in srgb, var(--fe-primary) 12%, transparent);
  --accent-a14: var(--fe-primary-soft);
  --accent-a35: color-mix(in srgb, var(--fe-primary) 35%, transparent);

  /* Stati */
  --green: var(--fe-success);
  --green-a09: color-mix(in srgb, var(--fe-success) 9%, transparent);
  --green-a14: var(--fe-success-soft);
  --green-a40: color-mix(in srgb, var(--fe-success) 40%, transparent);

  --gold: var(--fe-accent-text);          /* ambra: attesa, tappe, «solo admin» */
  --gold-a09: var(--fe-accent-soft);
  --gold-a14: var(--fe-accent-soft);
  --gold-a40: color-mix(in srgb, var(--fe-accent) 55%, transparent);

  --red: var(--fe-error);
  --red-a09: var(--fe-error-soft);
  --red-a14: color-mix(in srgb, var(--fe-error) 16%, transparent);
  --red-a40: color-mix(in srgb, var(--fe-error) 40%, transparent);
  --pj-rosso: var(--fe-error);            /* «tocca a noi» */
  --pj-rosso-a: var(--fe-error-soft);

  --purple: var(--fe-tile-todo);
  --purple-a09: color-mix(in srgb, var(--fe-tile-todo) 9%, transparent);
  --purple-a14: color-mix(in srgb, var(--fe-tile-todo) 14%, transparent);
  --purple-a40: color-mix(in srgb, var(--fe-tile-todo) 40%, transparent);

  --orange: var(--fe-brace);
  --orange-a14: color-mix(in srgb, var(--fe-brace) 14%, transparent);
  --orange-a16: color-mix(in srgb, var(--fe-brace) 16%, transparent);

  /* Geometria e ombre */
  --r-card: var(--fe-r-card);
  --r-inner: var(--fe-r-box);
  --r-sm: var(--fe-r-field);
  --r-frame: var(--fe-r-card);
  --r-pill: var(--fe-r-pill);
  --shadow-rest: var(--fe-shadow-card);
  --shadow-lift: var(--fe-shadow-pop);
  --shadow-card: var(--fe-shadow-flat);
  --shadow-cta: 0 6px 16px -6px color-mix(in srgb, var(--fe-primary) 60%, transparent);
}

body { font-feature-settings: "tnum"; }

/* ---------- Marchio nel menu laterale: icona Leggenda + Fenice / by Ottobix ---------- */
.logo { gap: 11px; padding: 2px 6px 20px; }
.logo-icona { width: 40px; height: 40px; border-radius: var(--fe-r-tile); flex: none; box-shadow: var(--fe-shadow-flat); }
.logo-testo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-testo b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fe-ink); }
.logo-testo small { font-size: 12px; color: var(--fe-secondary); }
.logo-crm { display: none; }
.sidebar.collapsed .logo-icona, .sidebar.collapsed .logo-testo { display: none; }
.topbar .logo-icona { width: 30px; height: 30px; }
.topbar .logo-testo small { display: none; }

/* ---------- Moduli: tile a superellisse, glifo sempre bianco ---------- */
.nav-item { gap: 12px; padding: 6px 10px; font-size: 14px; color: var(--fe-graphite); }
.nav-item svg {
  width: 28px; height: 28px; padding: 6px; box-sizing: border-box;
  border-radius: var(--fe-r-tile); background: var(--tile, var(--fe-tile-impostazioni));
  color: #fff; stroke-width: 1.8;
}
.nav-item:hover svg, .nav-item.active svg { color: #fff; }
.nav-item.active { background: var(--fe-primary-soft); color: var(--fe-ink); }
.sidebar.collapsed .nav-item svg { width: 30px; height: 30px; }
.nav-label { color: var(--fe-tertiary); }
.tab-item.active { color: var(--fe-primary-text); }

/* ---------- Accesso ---------- */
.login-wrap { background: radial-gradient(1200px 600px at 50% -10%, var(--fe-primary-soft), transparent 70%), var(--fe-paper); }
.login-icona { width: 72px; height: 72px; border-radius: var(--fe-r-tile); display: block; margin: 0 auto 18px; box-shadow: var(--fe-shadow-card); }
.login-title { font-weight: 600; }
.login-sub { letter-spacing: 0.04em; text-transform: none; font-size: 13px; font-weight: 500; color: var(--fe-secondary); }

/* ---------- Stati dei lead (come nel design: da contattare grigio, contattato blu,
   trattativa ambra, meeting corallo, vinto verde, perso grafite) ---------- */
.st-blue { background: var(--fe-group); color: var(--fe-secondary); }
.st-teal { background: var(--fe-info-soft); color: var(--fe-info-text); }
.st-purple { background: var(--fe-accent-soft); color: var(--fe-accent-text); }
.st-gold { background: var(--fe-primary-soft); color: var(--fe-primary-text); }
.st-slate { background: var(--fe-group); color: var(--fe-tertiary); }
.st-red-solid { background: var(--fe-graphite); color: var(--fe-surface); }
/* punteggio: ambra se alto, corallo se medio */
.sc-green { background: var(--fe-accent-soft); color: var(--fe-accent-text); }
.sc-gold { background: var(--fe-primary-soft); color: var(--fe-primary-text); }
.sc-orange, .sc-red { background: var(--fe-group); color: var(--fe-secondary); }

/* ---------- Riquadri «inchiostro» (valore del progetto, avvisi): nel tema scuro
   l'inchiostro diventa chiaro, quindi lì usano il gruppo scuro ---------- */
[data-theme="dark"] .pj-ink, [data-theme="dark"] .pj-ink2 { background: var(--fe-group); box-shadow: var(--fe-shadow-card); }
[data-theme="dark"] .toast { background: var(--fe-group); color: var(--fe-ink); }
/* su telefono nella barra in alto basta l'icona: il titolo è la vista */
.topbar .logo-testo { display: none; }