/* =====================================================================
   Pipeline Commerciale — Design system
   Console operativa: struttura scura, area lavoro chiara, un accent.
   Colori-stato riservati agli stati (segnale, non decorazione).
   ===================================================================== */

:root {
  /* Struttura */
  --ink:        #151E2C;   /* barra superiore, testo forte */
  --ink-soft:   #24303F;
  --workspace:  #F6F7F9;   /* sfondo area di lavoro */
  --surface:    #FFFFFF;   /* card, tabelle */
  --border:     #E4E8EE;
  --border-strong: #D3D9E2;

  /* Testo */
  --text:       #1B2430;
  --text-muted: #64707F;
  --text-faint: #94A0AE;

  /* Accent (azioni) — blu deciso, distinto dai colori-stato */
  --accent:     #2F5BEA;
  --accent-dark:#2447C0;
  --accent-soft:#EAF0FE;

  /* Stati della pipeline */
  --attesa-bg:   #FEF3E2;  --attesa-fg:   #A96A12;
  --attivato-bg: #E7F4EC;  --attivato-fg: #1E7A44;
  --perso-bg:    #FCEBE9;  --perso-fg:    #B0271B;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--workspace);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barra superiore ------------------------------------------------ */
.topbar {
  background: var(--ink);
  color: #E7ECF3;
  border-bottom: 1px solid #0E1622;
}
.topbar__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; }
.brand__mark { color: var(--accent); font-size: 13px; }
.brand__name { font-size: 15px; color: #fff; }
.brand__thin { font-weight: 400; color: #A9B4C2; }

.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav__link {
  color: #AEB9C7;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
}
.nav__link:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.nav__link.is-active { color: #fff; background: rgba(255,255,255,.10); }
.nav__link.is-disabled { color: #5E6B7B; cursor: default; }
.nav__link.is-disabled:hover { background: none; color: #5E6B7B; }

.account { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.account__name { color: #E7ECF3; font-weight: 500; font-size: 14px; }
.account__role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: #9FE6C2; border: 1px solid rgba(159,230,194,.35);
  padding: 1px 6px; border-radius: 20px;
}
.account__logout { color: #AEB9C7; font-size: 13.5px; }
.account__logout:hover { color: #fff; text-decoration: none; }

/* --- Contenitore ---------------------------------------------------- */
.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* --- Intestazione di pagina ---------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-head__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.page-head__sub { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }

/* --- Bottoni -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--text-faint); }
.btn__plus { font-size: 17px; line-height: 0; margin-top: -1px; }

/* --- Card / tabella ------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead th {
  text-align: left; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .045em; color: var(--text-muted);
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: #FBFCFD; white-space: nowrap;
}
table.data tbody td {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #FAFBFD; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }
.muted { color: var(--text-muted); }
.prospect { font-weight: 600; color: var(--text); }
.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); font-weight: 600;
}

/* --- Pill di stato -------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill--attesa   { background: var(--attesa-bg);   color: var(--attesa-fg); }
.pill--attivato { background: var(--attivato-bg); color: var(--attivato-fg); }
.pill--perso    { background: var(--perso-bg);    color: var(--perso-fg); }
.pill-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* --- Stato vuoto ---------------------------------------------------- */
.empty {
  text-align: center; padding: 64px 24px; color: var(--text-muted);
}
.empty__mark { font-size: 26px; color: var(--border-strong); }
.empty__title { margin: 14px 0 6px; font-size: 17px; font-weight: 600; color: var(--text); }
.empty__text { margin: 0 0 22px; font-size: 14px; }

/* --- Footer --------------------------------------------------------- */
.site-footer {
  max-width: 1360px; margin: 0 auto; padding: 22px 24px 40px;
  color: var(--text-faint); font-size: 12.5px;
}

/* =====================================================================
   LOGIN — pagina isolata (nessuna barra di navigazione)
   ===================================================================== */
body.login-page {
  background: var(--ink);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(8,14,24,.45);
  padding: 34px 32px 30px;
}
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.login-brand__mark { color: var(--accent); }
.login-brand__name { font-weight: 700; letter-spacing: -.01em; }
.login-brand__thin { font-weight: 400; color: var(--text-muted); }
.login-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 4px;
}
.login-title { margin: 0 0 22px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
.field input {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-btn {
  width: 100%; margin-top: 6px; justify-content: center;
  padding: 11px; font-size: 15px;
}
.alert {
  background: var(--perso-bg); color: var(--perso-fg);
  border: 1px solid #F3C9C4; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13.5px; margin-bottom: 16px;
}

/* --- Notice generico (setup, messaggi) ----------------------------- */
.notice {
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 14px; margin-bottom: 16px;
}
.notice--ok   { background: var(--attivato-bg); color: var(--attivato-fg); border: 1px solid #BFE4CD; }
.notice--warn { background: var(--attesa-bg);   color: var(--attesa-fg);   border: 1px solid #F3DCB6; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
  .topbar__inner { gap: 14px; padding: 0 14px; }
  .brand__thin { display: none; }
  .nav { display: none; }
  .container { padding: 20px 14px 48px; }
}

/* =====================================================================
   MODULO PREVENTIVO (Tappa 2)
   ===================================================================== */
.form-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; padding: 20px;
}
.fg-field { display: flex; flex-direction: column; }
.fg-field.col-2   { grid-column: span 2; }
.fg-field.col-all { grid-column: 1 / -1; }
.fg-field label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 6px;
}
.fg-field input, .fg-field select, .fg-field textarea {
  font-family: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--text); width: 100%;
}
.fg-field input:focus, .fg-field select:focus, .fg-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.fg-field textarea { min-height: 68px; resize: vertical; }

.canali-head { padding: 16px 20px 4px; }
.canali-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

table.canali { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
table.canali thead th {
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); padding: 10px 8px;
  border-bottom: 1px solid var(--border); background: #FBFCFD; white-space: nowrap;
}
table.canali thead th.num { text-align: right; }
table.canali tbody td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.canali input, table.canali select {
  font-family: inherit; font-size: 13px; padding: 7px 8px;
  border: 1px solid var(--border-strong); border-radius: 6px; width: 100%; background: #fff;
}
table.canali input:focus, table.canali select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.c-canale { min-width: 130px; } .c-desc { min-width: 150px; }
.c-pay { min-width: 90px; } .c-stato { min-width: 110px; }
.c-num input { text-align: right; }
.c-num { min-width: 84px; }
.fee-cell { display: flex; gap: 5px; align-items: center; }
.fee-cell .f-fee { min-width: 60px; }
.fee-cell .f-feetipo { width: 52px; padding: 7px 4px; }
.fee-euro { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; text-align: right; }
.totale-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-top: 14px !important; }
.btn-remove {
  border: none; background: none; color: var(--perso-fg); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 6px 9px; border-radius: 6px;
}
.btn-remove:hover { background: var(--perso-bg); }
.canali-foot td {
  padding: 12px 8px; font-weight: 700; border-top: 2px solid var(--border-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.add-row { padding: 14px 20px; }

.form-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 20px;
}
.btn--danger { background: #fff; color: var(--perso-fg); border: 1px solid #F0C4BF; }
.btn--danger:hover { background: var(--perso-bg); color: var(--perso-fg); }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .fg-field.col-2, .fg-field.col-all { grid-column: auto; }
}

/* =====================================================================
   PIPELINE RAGGRUPPATA (home)
   ===================================================================== */
table.pipeline td { vertical-align: middle; }
table.pipeline tbody tr:hover { background: transparent; }         /* niente hover a righe intere nei gruppi */
table.pipeline tbody tr:hover td:not([rowspan]) { background: #FAFBFD; }
.pipeline .prospect-cell,
.pipeline td[rowspan] {
  vertical-align: top; background: #FCFDFE;
  border-right: 1px solid var(--border);
}
.pipeline .prospect-cell .prospect { margin-bottom: 2px; }
.pipeline tbody tr.grp-first > td {
  border-top: 2px solid var(--border-strong);
}
.pipeline tbody tr:first-child.grp-first > td { border-top: none; }

/* =====================================================================
   MODELLI DI VENDITA (righe-canale dinamiche + tag in lista)
   ===================================================================== */
.c-modello { min-width: 140px; }
.c-dett { min-width: 320px; }
.mblock { display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
.mblock.show { display: flex; }
.mblock .mx { color: var(--text-faint); font-weight: 600; }
.mblock input { min-width: 84px; }
.mblock .f-tipopay { min-width: 78px; }
.mblock .f-feetipo { width: 52px; padding: 7px 4px; }
.mblock .fee-euro { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

.canali-foot--sub td { border-top: none; font-weight: 600; color: var(--text-muted); padding-top: 2px; }

/* Tag modello nella lista */
.mtag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap;
}
.mtag--perf   { background: #E9F0FE; color: #2447C0; }
.mtag--bf     { background: #F0EAFB; color: #6D3BC7; }
.mtag--canone { background: #E5F5F3; color: #0E7C6E; }

/* =====================================================================
   HOME v3 — divisori colonna, riga filtri
   ===================================================================== */
/* Divisori di colonna su tutta la tabella pipeline */
.pipeline thead th, .pipeline tbody td { border-right: 1px solid var(--border); }
.pipeline thead th:last-child, .pipeline tbody td:last-child { border-right: none; }

/* Riga dei filtri */
.filtri th { background: #fff; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.filtri input, .filtri select {
  width: 100%; font-family: inherit; font-size: 12px; padding: 5px 7px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: var(--text);
}
.filtri input:focus, .filtri select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.btn-reset {
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 9px; border-radius: 6px; width: 100%;
}
.btn-reset:hover { background: var(--perso-bg); color: var(--perso-fg); border-color: #F0C4BF; }

/* =====================================================================
   DATA ACCETTAZIONE per canale (compare su "Attivato")
   ===================================================================== */
.c-stato .acc-wrap { display: none; margin-top: 6px; }
.c-stato .acc-wrap.show { display: block; }
.c-stato .f-dataccett {
  font-size: 12px; padding: 6px 7px; border: 1px solid var(--border-strong);
  border-radius: 6px; width: 100%; font-family: inherit;
}
.acc-date {
  display: block; font-size: 11px; color: var(--attivato-fg);
  margin-top: 4px; white-space: nowrap; font-weight: 600;
}

/* =====================================================================
   HOME v4 — larghezze fisse per colonna, prezzo sotto tipo pay
   ===================================================================== */
.pipeline { table-layout: fixed; }
.pipeline th, .pipeline td { overflow: hidden; text-overflow: ellipsis; }
.pipeline .prospect { white-space: normal; word-break: break-word; }

.w-uscita   { width: 88px;  }
.w-prospect { width: 210px; }
.w-comm     { width: 94px;  }
.w-canale   { width: 106px; }
.w-modello  { width: 116px; }
.w-pay      { width: 92px;  }
.w-qta      { width: 62px;  }
.w-budget   { width: 112px; }
.w-fee      { width: 158px; }
.w-totale   { width: 116px; }
.w-stato    { width: 120px; }
.w-perc     { width: 66px;  }
.w-apri     { width: 58px;  }

.sub-eur { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* =====================================================================
   HOME v5 — tabella a tutta larghezza, font ridotto, niente scroll orizz.
   (override dei vincoli fissi della v4)
   ===================================================================== */
/* La card della pipeline sfonda i margini e usa quasi tutto il monitor */
.wide-bleed {
  width: 96vw;
  max-width: 96vw;
  margin-left: calc(50% - 48vw);
  margin-right: calc(50% - 48vw);
}

/* Torno al layout automatico: le colonne si dimensionano sul contenuto */
.pipeline { table-layout: auto; width: 100%; font-size: 12.5px; }
.pipeline th, .pipeline td {
  overflow: visible; text-overflow: clip;
  padding: 9px 10px; white-space: nowrap;
}
.pipeline thead th { padding: 10px 10px; font-size: 10.5px; }
/* Solo il prospect può andare a capo e prendersi lo spazio extra */
.pipeline .prospect-cell, .pipeline .prospect { white-space: normal; word-break: break-word; }
/* I filtri più compatti */
.filtri input, .filtri select { font-size: 11.5px; padding: 4px 6px; }
.sub-eur { white-space: nowrap; }

/* =====================================================================
   v6 — header fisso allo scroll, motivo rifiuto, font ridotto, tooltip
   ===================================================================== */
/* Scroll interno con intestazione bloccata */
.pipeline-scroll { max-height: calc(100vh - 180px); overflow: auto; }
.pipeline thead th { position: sticky; z-index: 2; }
.pipeline thead tr.labels th { top: 0; height: 22px; z-index: 4; }
.pipeline thead tr.filtri  th { top: 21px; z-index: 3; }

/* Font ridotto in proporzione */
.pipeline { font-size: 11px; }
.pipeline th, .pipeline td { padding: 6px 8px; }
.pipeline thead tr.labels th { font-size: 9.5px; padding: 4px 8px; }
.filtri input, .filtri select { font-size: 10.5px; padding: 3px 5px; }
.sub-eur { font-size: 9.5px; }
.acc-date { font-size: 9.5px; }
.pipeline .mtag { font-size: 9.5px; padding: 1px 6px; }
.pipeline .pill { font-size: 10px; padding: 2px 6px; }

/* Tooltip: cursore "aiuto" dove c'è un title */
.has-tip { cursor: help; }
.pipeline .prospect[title] { cursor: help; border-bottom: 1px dotted var(--border-strong); display: inline; }

/* Campo motivo rifiuto nel modulo (compare su "Rifiutato") */
.c-stato .rej-wrap { display: none; margin-top: 6px; }
.c-stato .rej-wrap.show { display: block; }
.c-stato .f-desc {
  font-size: 12px; padding: 6px 7px; border: 1px solid var(--border-strong);
  border-radius: 6px; width: 100%; font-family: inherit;
}

/* =====================================================================
   v7 — logo cliccabile, barra contatori pipeline
   ===================================================================== */
a.brand { text-decoration: none; }
a.brand:hover { text-decoration: none; opacity: .9; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin: 2px 0 20px;
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px;
}
.stat__num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat__label {
  font-size: 11.5px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; margin-top: 3px;
}
.stat--venduti   .stat__num { color: var(--attivato-fg); }
.stat--rifiutati .stat__num { color: var(--perso-fg); }
.stat--attesa    .stat__num { color: var(--attesa-fg); }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   v8 — contatori affiancati, colorati, formato "Titolo: numero"
   (override della v7)
   ===================================================================== */
.stats {
  display: flex; flex-wrap: nowrap; gap: 12px; margin: 2px 0 20px;
}
.stat {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 18px; white-space: nowrap;
}
.stat__label { font-size: 13px; font-weight: 600; }
.stat__num   { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-left: auto; }

.stat--usciti    { background: var(--accent-soft);  border-color: #CBD9FA; }
.stat--usciti   .stat__label, .stat--usciti   .stat__num { color: var(--accent-dark); }
.stat--venduti   { background: var(--attivato-bg); border-color: #BFE4CD; }
.stat--venduti  .stat__label, .stat--venduti  .stat__num { color: var(--attivato-fg); }
.stat--rifiutati { background: var(--perso-bg);    border-color: #F0C4BF; }
.stat--rifiutati .stat__label, .stat--rifiutati .stat__num { color: var(--perso-fg); }
.stat--attesa    { background: var(--attesa-bg);   border-color: #F3DCB6; }
.stat--attesa   .stat__label, .stat--attesa   .stat__num { color: var(--attesa-fg); }

@media (max-width: 720px) {
  .stats { flex-wrap: wrap; }
  .stat { flex: 1 1 40%; }
}

/* =====================================================================
   v9 — contatori più compatti (-25%)
   ===================================================================== */
.stats { gap: 9px; margin: 2px 0 16px; }
.stat { padding: 10px 14px; border-radius: 8px; gap: 6px; }
.stat__label { font-size: 10px; }
.stat__num   { font-size: 18px; }

/* =====================================================================
   v10 — contatori compatti e sempre contenuti nella larghezza pagina
   ===================================================================== */
.stats.wide-bleed {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stat {
  width: auto;
  min-width: 0;
  padding: 8px 12px;
  gap: 6px;
}

.stat__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
}

.stat__num {
  flex: 0 0 auto;
  font-size: 17px;
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    padding: 8px 10px;
  }
}


/* =====================================================================
   v11 — setup visibile nella home senza aggiungere una nuova colonna
   ===================================================================== */
.pipeline .fee-setup-cell { line-height: 1.2; }
.pipeline .fee-main,
.pipeline .sub-setup { display: block; white-space: nowrap; }
.pipeline .sub-setup {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 500;
}

/* =====================================================================
   Report — selettore anno, card riepilogo, tabelle mensili
   ===================================================================== */
.report-anno {
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-anno__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.report-anno select {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .report-grid { grid-template-columns: 1fr; }
}

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.report-card--accent {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow);
}
.report-card__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.report-card__big {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 12px;
}
.report-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.report-card__k {
  font-size: 13px;
  color: var(--text-muted);
}
.report-card__v {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.report-card__v--strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-dark);
}
.report-card__row--budget .report-card__v {
  color: var(--text-muted);
  font-weight: 500;
}
.report-card__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-faint);
}

.report-tabletitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 4px 12px;
}
.report-mesi td,
.report-mesi th {
  padding: 9px 14px;
}
/* Centro sia le intestazioni sia i valori delle colonne numeriche,
   lasciando "Mese" allineato a sinistra. */
.report-mesi th.num,
.report-mesi td.num {
  text-align: center;
}
.report-mesi tr.is-empty td {
  color: var(--text-faint);
}
.report-mesi__tot td {
  border-top: 2px solid var(--border-strong);
  background: var(--workspace);
  font-size: 14px;
}

/* --- Card accettati: percentuale di conversione --- */
.report-card__pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-left: 10px;
  vertical-align: middle;
}
.report-card__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -6px 0 12px;
}

/* --- Tabella totali per canale --- */
.report-tablesub {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 0 4px 12px;
  max-width: 720px;
  line-height: 1.5;
}
.report-canali th,
.report-canali td {
  padding: 9px 14px;
}
.report-canali th.num,
.report-canali td.num {
  text-align: center;
}
.report-canali__grouphead th {
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}
.report-canali__grouphead th[colspan] {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.report-canali__chan { text-align: left; }
.report-canali__conv { min-width: 70px; }
.report-perc {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 12px;
}
.report-canali__tot td {
  border-top: 2px solid var(--border-strong);
  background: var(--workspace);
  font-size: 14px;
}

/* =====================================================================
   v12 — allineamento verticale centrato + alternanza colore per preventivo
   ===================================================================== */

/* 1) Tutte le celle della pipeline centrate verticalmente, comprese
      quelle unite in verticale (rowspan: uscita, prospect, commerciale,
      % successo, Apri). Sostituisce il vertical-align:top della v-precedente. */
.pipeline tbody tr > td,
.pipeline tbody tr > td.prospect-cell,
.pipeline tbody tr > td[rowspan] { vertical-align: middle; }

/* 2) Zebra a livello di PREVENTIVO, non di canale: tutte le righe dello
      stesso preventivo condividono la classe zebra-a / zebra-b, assegnata
      da PHP in fase di render e ricalcolata dal JS quando si filtra.
      Essendo basata sulla posizione (non sull'id), l'alternanza resta
      corretta dopo aggiunte ed eliminazioni di preventivi. */
.pipeline tbody tr.zebra-a > td { background: var(--surface); }
.pipeline tbody tr.zebra-b > td { background: #F2F4F7; }

/* 3) Hover: si evidenzia l'intero preventivo, non la singola riga-canale.
      La seconda riga del selettore serve a superare la regola di hover
      della v-precedente, che aveva specificità più alta. */
.pipeline tbody tr.is-hover > td,
.pipeline tbody tr.is-hover > td:not([rowspan]) { background: #E9EFFB; }

/* 4) Il separatore di gruppo può essere più leggero: ora sono i colori a
      distinguere un preventivo dall'altro. */
.pipeline tbody tr.grp-first > td { border-top: 1px solid var(--border-strong); }
.pipeline tbody tr:first-child.grp-first > td { border-top: none; }

/* =====================================================================
   v13 — Report a doppia logica: coorte di uscita vs fatturato d'anno
   ===================================================================== */

/* Tre card di riepilogo invece di due */
.report-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .report-grid--3 { grid-template-columns: 1fr; } }

/* Card del fatturato: bordo verde, è il numero "soldi incassabili" */
.report-card--fatt {
  border-color: #BFE4CD;
  box-shadow: 0 0 0 1px var(--attivato-bg), var(--shadow);
}
.report-card--fatt .report-card__big { color: var(--attivato-fg); font-size: 30px; }

/* Riga di contatori secondari dentro la card (rifiutati / in attesa) */
.report-card__mini {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 12px; color: var(--text-muted);
}
.report-card__mini b { color: var(--text); font-weight: 700; font-size: 13px; }

.report-card__note--warn { color: var(--attesa-fg); font-weight: 600; }

/* Separatore verticale fra i blocchi di colonne (Usciti | Accettati | Conv.) */
.report-canali th.report-sep,
.report-canali td.report-sep { border-left: 1px solid var(--border-strong); }

/* Percentuale in testo, per affiancare la pill senza raddoppiare il peso visivo */
.report-perc2 { font-weight: 700; color: var(--text); }

/* Riga dei canali attivati senza data: va completata, quindi si vede */
.report-nodate td {
  background: var(--attesa-bg);
  color: var(--attesa-fg);
  font-weight: 600;
}

/* Nota sotto una tabella */
.report-tablefoot {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 12px 4px 2px;
  line-height: 1.5;
  margin: 0;
}

/* Le tabelle di report restano leggibili anche molto larghe */
.report-canali { font-size: 13px; }
.report-canali th, .report-canali td { padding: 8px 12px; }
.report-canali tbody tr.is-empty td { color: var(--text-faint); }

/* =====================================================================
   v14 — Report: tabelle richiudibili + intestazioni fisse allo scroll
   ===================================================================== */

/* --- Barra strumenti della testata ---------------------------------- */
.report-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn--sm { padding: 6px 11px; font-size: 12.5px; }

/* --- Blocco richiudibile (<details>) --------------------------------
   La card diventa il contenitore del blocco; l'intestazione cliccabile è
   il <summary>, che resta leggibile anche a blocco chiuso perché porta
   con sé i numeri chiave.                                             */
.report-block { margin-top: 14px; }
.report-block:first-of-type { margin-top: 0; }

.report-block > summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;                 /* niente marcatore nativo */
  -webkit-user-select: none; user-select: none;
}
.report-block > summary::-webkit-details-marker { display: none; }
.report-block > summary::marker { content: ''; }

/* Freccia disegnata a mano: ruota di 90° all'apertura */
.report-block > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid var(--text-faint);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transform-origin: 40% 50%;
  transition: transform .15s ease;
  align-self: center;
}
.report-block[open] > summary::before {
  transform: rotate(90deg);
  border-left-color: var(--accent);
}
.report-block > summary:hover { background: #FAFBFD; }
.report-block > summary:hover::before { border-left-color: var(--accent); }
.report-block > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

.report-block__ttl { font-size: 15px; font-weight: 700; color: var(--ink); }
.report-block__kpi {
  margin-left: auto; text-align: right;
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.report-block[open] > summary { border-bottom: 1px solid var(--border); }
.report-block__body { padding-bottom: 4px; }

/* I testi esplicativi e le note ora vivono dentro il corpo del blocco,
   quindi si prendono loro il padding orizzontale. */
.report-block__body > .report-tablesub  { padding: 12px 18px 10px; max-width: 860px; }
.report-block__body > .report-tablefoot { padding: 12px 18px 10px; }

/* --- Intestazioni fisse allo scroll ---------------------------------
   Il contenitore scrolla (in verticale solo se la tabella supera
   l'altezza disponibile: con 12-13 righe di norma non accade) e le <th>
   restano agganciate in alto. Su intestazione a due livelli il secondo
   livello si posiziona sotto il primo, che ha un'altezza fissata apposta. */
.report-scroll {
  max-height: calc(100vh - 170px);
  overflow: auto;
}
.report-scroll thead th {
  position: sticky;
  z-index: 2;
  background: #FBFCFD;
  /* con border-collapse il bordo di una cella sticky sparisce: lo rifaccio
     come ombra interna, che viaggia insieme alla cella */
  box-shadow: inset 0 -1px 0 var(--border);
}
.report-scroll thead tr:first-child th { top: 0; }

/* Intestazione a due livelli (Usciti | Accettati | Conversione ecc.) */
.report-scroll .report-canali__grouphead th {
  height: 28px; padding-top: 3px; padding-bottom: 3px;
  z-index: 3;
}
.report-scroll .report-canali__subhead th { top: 28px; }
/* La cella con rowspan attraversa entrambe le righe: resta a filo superiore */
.report-scroll .report-canali__grouphead th[rowspan] { z-index: 4; }

@media (max-width: 720px) {
  .report-block > summary { flex-wrap: wrap; }
  .report-block__kpi { margin-left: 0; width: 100%; text-align: left; }
  .report-scroll { max-height: calc(100vh - 140px); }
}

/* Riga dei totali agganciata in basso: quando la tabella scrolla internamente
   il totale resta sempre a vista, così il confronto riga/totale è immediato.
   Se la tabella non scrolla, la riga resta semplicemente dov'è. */
.report-scroll tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--workspace);
  box-shadow: inset 0 1px 0 var(--border-strong);
}


/* =====================================================================
   v15 — Report: separazione netta fra coorte preventivi e fatturato
   ===================================================================== */

/* Percentuale secondaria accanto ai conteggi (es. 5 (33%)). */
.report-count-pct {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* Le nuove tabelle contengono più colonne: manteniamo intestazioni e totali
   leggibili lasciando che il wrapper gestisca lo scroll orizzontale. */
.report-preventivi-mese {
  min-width: 1320px;
}

.report-fatt-commerciali {
  min-width: 980px;
}

/* Separatore fra i singoli commerciali e il totale mensile. */
.report-fatt-commerciali th.report-sep,
.report-fatt-commerciali td.report-sep {
  border-left: 1px solid var(--border-strong);
}

/* Nella tabella per commerciale gli importi sono compatti ma sempre leggibili. */
.report-fatt-commerciali th.num,
.report-fatt-commerciali td.num {
  min-width: 118px;
}

/* La tabella delle statistiche preventivi ha colonne percentuali più larghe. */
.report-preventivi-mese th.num,
.report-preventivi-mese td.num {
  min-width: 108px;
}

@media (max-width: 720px) {
  .report-preventivi-mese {
    min-width: 1220px;
  }

  .report-fatt-commerciali {
    min-width: 900px;
  }
}

/* =====================================================================
   v16 — Report: volume + ricavo per canale nella coorte
   ===================================================================== */

/* La tabella per canale ora mostra volume, ricavo offerto/attivato,
   Fee e Setup. Il budget piattaforme resta volutamente fuori da questa
   vista, pur continuando a essere sottratto nel calcolo del ricavo. */
.report-coorte-canale {
  min-width: 1360px;
}

.report-coorte-canale th.num,
.report-coorte-canale td.num {
  min-width: 92px;
}

.report-coorte-canale th.report-sep,
.report-coorte-canale td.report-sep {
  min-width: 158px;
}

.report-money-main {
  display: block;
  white-space: nowrap;
}

.report-share {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

/* --- Grafico orizzontale dei preventivi per canale ----------------- */
.report-channel-chart {
  margin: 0 18px 16px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FBFCFD;
}

.report-channel-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.report-channel-chart__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.report-channel-chart__sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.report-channel-chart__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.report-channel-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.report-channel-chart__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.report-channel-chart__dot--off { background: var(--accent); }
.report-channel-chart__dot--att { background: var(--attivato-fg); }

.report-channel-chart__rows {
  display: grid;
  gap: 7px;
}

.report-channel-chart__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.report-channel-chart__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.report-channel-chart__bars {
  display: grid;
  gap: 3px;
}

.report-channel-chart__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  min-height: 8px;
}

.report-channel-chart__track {
  display: block;
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EDF3;
}

.report-channel-chart__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.report-channel-chart__fill--off { background: var(--accent); }
.report-channel-chart__fill--att { background: var(--attivato-fg); }

.report-channel-chart__count {
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .report-coorte-canale {
    min-width: 1260px;
  }

  .report-channel-chart {
    margin-left: 12px;
    margin-right: 12px;
    padding: 12px;
  }

  .report-channel-chart__head {
    flex-direction: column;
    gap: 8px;
  }

  .report-channel-chart__row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
  }
}

/* =====================================================================
   v17 — Totale aggregato per prospect nella pipeline (home)
   Compare sotto il nome, nella cella raggruppata (rowspan), solo quando
   il preventivo ha più di una riga-canale: somma dei "totale_riga" già
   mostrati singolarmente in colonna "Totale", indipendentemente dallo
   stato di ciascuna riga.
   ===================================================================== */
.pipeline .prospect-total {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}

/* =====================================================================
   v18 — Gestione Clienti
   Scheda cliente: intestazione informativa in sola lettura, azioni
   inline (cambio stato Attivo/Perso, elimina attività aggiunta) dentro
   la tabella, nota facoltativa sulle attività aggiunte. Riusa quasi
   tutto il resto (pill, mtag, table.data, table.canali, report-card,
   stats) già definito sopra.
   ===================================================================== */
.info-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; padding: 18px 20px;
}
.info-item { display: flex; flex-direction: column; gap: 4px; }
.info-item .info-k {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em;
  color: var(--text-muted); font-weight: 600;
}
.info-item .info-v { font-size: 15px; font-weight: 600; color: var(--text); }

.riga-azioni { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.riga-azioni form { margin: 0; }
.btn--xs { padding: 5px 10px; font-size: 12px; }

.riga-nota {
  display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint);
}

.c-data { min-width: 130px; }
.c-nota { min-width: 140px; }

@media (max-width: 720px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   v19 — Elenco clienti: barra di riepilogo a 5 box
   .stats resta a 4 colonne per Preventivi e Report; solo clienti.php
   usa .stats--5 per la quinta box (Clienti persi).
   ===================================================================== */
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   v20 — Clienti diretti · Attività finita · Rinnovi e scadenze
   (v21: "Sposta come rinnovo", avvisi di completezza dati nel Report clienti)
   ===================================================================== */
:root {
  --finita-bg: #EEF1F6;  --finita-fg: #4F5E72;
}

/* Stato "Finita" (riga) e "Concluso" (cliente): neutro, non è né un
   successo in corso né una perdita. */
.pill--finita { background: var(--finita-bg); color: var(--finita-fg); }

/* Tipo di riga: Preventivo / Nuova / Rinnovo */
.ttag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 5px; white-space: nowrap; border: 1px solid transparent;
}
.ttag--prev    { color: var(--text-muted); border-color: var(--border-strong); background: #fff; }
.ttag--nuova   { color: var(--accent-dark); background: var(--accent-soft); }
.ttag--rinnovo { color: #0E7C6E; background: #E5F5F3; }

/* Scadenza / fine */
.scad { display: inline-block; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.scad__sub { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; }
.scad--ok      { color: var(--text); font-weight: 500; }
.scad--presto  { color: var(--attesa-fg); }
.scad--scaduta { color: var(--perso-fg); }
.scad--chiusa  { color: var(--text-muted); font-weight: 500; }

/* Etichetta "Diretto" accanto al nome del cliente */
.tag-diretto {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #6D3BC7; background: #F0EAFB; padding: 2px 7px; border-radius: 5px;
}
.page-head__title .tag-diretto { font-size: 11px; }
.pipeline .tag-diretto { font-size: 8.5px; padding: 1px 5px; margin-left: 4px; }

.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Scheda cliente ------------------------------------------------ */
.cliente-stato { font-size: 22px; margin: 8px 0 12px; }
.cliente-stato .pill { font-size: 15px; padding: 5px 14px; }
.cliente-stato .pill::before { width: 8px; height: 8px; }

.anag-block { margin-top: 0; margin-bottom: 4px; }
.form-actions--inner { margin: 0; padding: 4px 20px 16px; }
.form-intro { padding: 4px 20px 8px !important; max-width: 900px; }

table.scheda-attivita { font-size: 13px; }
table.scheda-attivita thead th { padding: 10px 12px; font-size: 10.5px; }
table.scheda-attivita tbody td { padding: 10px 12px; vertical-align: top; }
table.scheda-attivita tbody tr.is-chiusa > td { background: #FAFBFC; }
table.scheda-attivita tbody tr.is-chiusa > td.strong { color: var(--text-muted); }
table.scheda-attivita tbody tr.is-rinnovo-sel > td { background: #E9F6F4; }
table.scheda-attivita tbody tr:target > td { background: #FFF8E6; }

a.riga-nota { color: var(--accent); }
.riga-nota--rinnovo { color: #0E7C6E !important; font-weight: 600; }

.btn--rinnova { color: #0E7C6E; border-color: #B9E2DC; }
.btn--rinnova:hover { border-color: #0E7C6E; }

/* Pannello "Esita / modifica" dentro la riga */
.riga-edit { display: inline-block; }
.riga-edit[open] { flex-basis: 100%; }
.riga-edit > summary { list-style: none; display: inline-flex; }
.riga-edit > summary::-webkit-details-marker { display: none; }
.riga-edit > summary::marker { content: ''; }
.riga-edit[open] > summary { border-color: var(--accent); color: var(--accent-dark); }
.riga-edit__form {
  display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; min-width: 230px; max-width: 280px;
  background: #FBFCFD; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.riga-edit__form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.riga-edit__form label[hidden] { display: none; }
.riga-edit__form select, .riga-edit__form input {
  font-family: inherit; font-size: 13px; padding: 6px 8px; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: var(--text);
  width: 100%; min-width: 0;
}
.riga-edit__form button { justify-self: start; }
.riga-edit__form .re-hint { font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-faint); }

/* Modulo in modalità rinnovo */
.card--rinnovo { border-color: #B9E2DC; box-shadow: 0 0 0 1px #E5F5F3, var(--shadow); }
.card--rinnovo .canali-head h2 { color: #0E7C6E; }
table.canali--attivita { min-width: 1120px; }

/* Avviso nomi simili (nuovo cliente) */
.doppioni ul { margin: 8px 0 10px; padding-left: 20px; }
.doppioni__ok { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }

/* --- Elenco clienti ------------------------------------------------ */
.stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.stat--conclusi { background: var(--finita-bg); border-color: #D8DEE8; }
.stat--conclusi .stat__label, .stat--conclusi .stat__num { color: var(--finita-fg); }

.pipeline .prospect-stato { margin-top: 3px; }
.pipeline .sub-rinnovo { color: #0E7C6E; font-weight: 600; }
.pipeline tbody tr.is-chiusa > td:not([rowspan]) { color: var(--text-muted); }
.pipeline .scad { font-size: 10.5px; }
.pipeline .scad__sub { font-size: 9px; }

/* Box "In scadenza" */
.scadenze { margin-bottom: 0; border-color: #F3DCB6; }
.scadenze > summary .report-block__ttl { color: var(--attesa-fg); }
table.scadenze-tab { font-size: 13px; }
table.scadenze-tab thead th { padding: 9px 14px; font-size: 10.5px; }
table.scadenze-tab tbody td { padding: 8px 14px; }
.riga-azioni--end { justify-content: flex-end; }

/* --- Report clienti ------------------------------------------------ */
.report-clienti-mese { min-width: 1080px; }
.report-canali .rc-muted { color: var(--text-muted); background: #FAFBFC; }
.report-card__big--perso { color: var(--perso-fg); }
.report-card__pct--muted { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.var { font-weight: 700; font-variant-numeric: tabular-nums; }
.var--su   { color: var(--attivato-fg); }
.var--giu  { color: var(--perso-fg); }
.var--pari { color: var(--text-muted); }

/* Elenco clienti: stato + scadenza nella stessa cella, filtri doppi,
   contatori a 6 box larghi quanto la tabella (3 per riga sotto i 1600px) */
.pipeline td.cell-attivazione .eyebrow { white-space: nowrap; word-break: normal; }
.pipeline .stato-cell .scad { display: block; margin-top: 3px; }
.filtri th.filtri-doppio select { display: block; }
.filtri th.filtri-doppio select + select { margin-top: 3px; }
.stats--6.wide-bleed {
  width: 96vw; max-width: 96vw;
  margin-left: calc(50% - 48vw); margin-right: calc(50% - 48vw);
}
@media (max-width: 1600px) { .stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .stats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Sposta come rinnovo": riclassifica una riga del preventivo che era un rinnovo */
.riga-nota--warn { color: var(--attesa-fg); font-weight: 600; cursor: help; }
.riga-edit__form--sposta { background: #F4FAF9; border-color: #B9E2DC; }
.report-block--warn { border-color: #F3DCB6; }
.report-block--warn > summary .report-block__ttl { color: var(--attesa-fg); }