/* =============================================================================
   INUP REPORT — Design System (2026)
   Stile unico per i report di tutti i tool. Deriva dal report hotel_intel.
   Uso: <link rel="stylesheet" href="inup_report.css"> e usa le classi sotto.
   ============================================================================= */

:root {
  /* ---- Brand (identità) ---------------------------------------------------- */
  --inup-violet:      #433A86;   /* Human / primario, header, accenti brand   */
  --inup-green:       #00DD8F;   /* Innovazione / accento pieno               */
  --inup-antracite:   #1F1F20;   /* testo scuro / titoli                      */
  --inup-teal:        #218B8A;   /* tono intermedio del gradiente             */
  --inup-gradient:    linear-gradient(120deg,#1F1F20 0%,#433A86 38%,#218B8A 70%,#00DD8F 100%);

  /* ---- Data-viz (neutro, soft) -------------------------------------------- */
  --chart:            #6F97BD;   /* barre / linee (azzurro tenue)             */
  --chart-fill:       #EAF1F8;   /* area sotto la linea                       */
  --chart-prev:       #B9C0C7;   /* serie "precedente" nei confronti         */
  --bar-track:        #E8E8EE;   /* fondo barra                               */
  --fader-knob:       #EFA55C;   /* manopola arancio soft a fine corsa       */

  /* ---- Semantica soft (note / stati) -------------------------------------- */
  --soft-green:       #4FA97B;   /* positivo (tenue)                          */
  --soft-green-ink:   #3E9C6E;   /* testo/freccia positiva                    */
  --soft-red:         #C4726F;   /* negativo / attenzione (sfumato)           */
  --grey-teal:        #8FA9AE;   /* supporto neutro                           */

  --note-info-bg:     #EEF4FA;   --note-info-accent:  #4A82B4;  /* azzurro=info      */
  --note-pos-bg:      #EDF7F0;   --note-pos-accent:   #4FA97B;  /* verde=positivo    */
  --note-neg-bg:      #FBEFEF;   --note-neg-accent:   #C4726F;  /* rosso=negativo    */

  /* ---- Neutri / superfici -------------------------------------------------- */
  --surface:          #FFFFFF;
  --surface-2:        #F6F6F8;   /* card leggere / stat                       */
  --beige:            #F5F4F8;   /* tint header mini                          */
  --table-head-bg:    #F1F1F5;
  --text:             #1F1F20;
  --text-secondary:   #6B7280;
  --text-muted:       #8A887F;
  --border:           #E4E7EC;

  /* ---- Raggi (come hai_generator) ----------------------------------------- */
  --r-card:           6px;       /* schede / callout                          */
  --r-chart:          4px;       /* barre / grafici                           */

  /* ---- Tipografia ---------------------------------------------------------- */
  --font-sans:  "Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-serif: Georgia,"Times New Roman",serif;

  /* ---- Spaziatura ---------------------------------------------------------- */
  --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px; --sp-5: 34px;
}

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */
.inup-report {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  line-height: 1.5;
  font-size: 14px;
}
.inup-report h1,.inup-report h2,.inup-report h3 { color: var(--text); margin: 0; }
.inup-report .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--inup-violet);
}
.inup-report .muted     { color: var(--text-muted); }
.inup-report .secondary { color: var(--text-secondary); }
.inup-report .tnum      { font-variant-numeric: tabular-nums; }

/* Header di sezione: accento corto + titolo scuro + hairline ------------------ */
.section-head {
  margin: var(--sp-4) 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.section-head::before {
  content: ""; display: block; width: 20px; height: 3px; border-radius: 2px;
  background: var(--inup-violet); margin-bottom: 8px;
}
.section-head h2 {
  font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Card & Note (callout)
   ----------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
}

.note {
  border-radius: var(--r-card);
  padding: 12px 14px;
  border-left: 3px solid var(--note-info-accent);
  background: var(--note-info-bg);
  font-size: 13.5px; color: var(--text-secondary);
}
.note b, .note strong { color: var(--text); }
.note--info     { background: var(--note-info-bg); border-left-color: var(--note-info-accent); }
.note--positive { background: var(--note-pos-bg);  border-left-color: var(--note-pos-accent);  }
.note--negative { background: var(--note-neg-bg);  border-left-color: var(--note-neg-accent);  }
.note__title { display:block; font-weight:700; color:var(--text); margin-bottom:2px; }

/* Stat / delta card ----------------------------------------------------------- */
.stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chart);
  border-radius: var(--r-card);
  padding: 9px 12px;
}
.stat-card .lab   { font-size: 11px; text-transform: uppercase; letter-spacing:.06em; color: var(--text-muted); font-weight:700; }
.stat-card .val   { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.delta            { font-weight: 700; font-size: 12px; }
.delta--up   { color: var(--soft-green-ink); }   /* ▲ */
.delta--down { color: var(--soft-red); }          /* ▼ */
.delta--flat { color: var(--text-muted); }        /* ■ */

/* Mini-header (forza/debolezza): tint chiaro + accento + testo colorato -------- */
.mini-header {
  background: var(--beige);
  border-top: 2px solid currentColor;
  padding: 6px 10px; font-weight: 700; font-size: 12px;
}
.mini-header--good { color: var(--soft-green-ink); }
.mini-header--bad  { color: var(--soft-red); }

/* -----------------------------------------------------------------------------
   Barre / grafici  (raggio 4, opzionale manopola arancio "fader")
   ----------------------------------------------------------------------------- */
.bar { display:flex; align-items:center; gap:10px; margin:6px 0; }
.bar__label { flex:0 0 auto; color: var(--text-secondary); font-size:12.5px; }
.bar__track {
  position: relative; flex:1 1 auto; height: 10px;
  background: var(--bar-track); border-radius: var(--r-chart);
}
.bar__fill {
  position:absolute; left:0; top:0; height:100%;
  background: var(--chart); border-radius: var(--r-chart);
}
.bar__fill--good { background: var(--soft-green); }
.bar__fill--bad  { background: var(--soft-red); }     /* voci deboli evidenziate */
.bar__value { flex:0 0 auto; font-weight:700; font-variant-numeric: tabular-nums; }

/* Fader (barra spessa "valore percepito") con manopola arancio ---------------- */
.fader .bar__track { height: 16px; }
.fader .bar__fill  { display:flex; align-items:center; justify-content:flex-end; }
.bar__knob {
  position:absolute; top:50%; transform:translate(50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background: var(--fader-knob);
  box-shadow: inset 0 0 0 4px var(--surface);   /* centro bianco = "donut"     */
}
/* posiziona il knob a fine fill: left:<pct>%  (via style inline)               */

/* Serie a confronto (corrente vs precedente) ---------------------------------- */
.bar__fill--current  { background: var(--chart); }
.bar__fill--previous { background: var(--chart-prev); }

/* -----------------------------------------------------------------------------
   Tabelle (intestazione chiara + riga d'accento + separatori orizzontali)
   ----------------------------------------------------------------------------- */
.inup-report table { width:100%; border-collapse: collapse; font-size: 13.5px; }
.inup-report thead th {
  background: var(--table-head-bg);
  color: var(--text-secondary);
  text-align: left; font-weight: 700; padding: 9px 10px;
  border-top: 2px solid var(--inup-violet);
}
.inup-report tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.inup-report tbody tr:nth-child(even) td { background: #FBFBFC; }

/* -----------------------------------------------------------------------------
   Badge di stato / livelli
   ----------------------------------------------------------------------------- */
.badge { display:inline-block; padding:2px 9px; border-radius: 100px; font-size:11px; font-weight:700; }
.badge--ok   { background: var(--note-pos-bg);  color: var(--soft-green-ink); }
.badge--warn { background: #FBF3E9;             color: #B87A33; }
.badge--bad  { background: var(--note-neg-bg);  color: var(--soft-red); }

/* -----------------------------------------------------------------------------
   Palette categorica per grafici (usa in ordine, non ciclare)
   ----------------------------------------------------------------------------- */
.series-1 { color: var(--chart);      }
.series-2 { color: var(--soft-green); }
.series-3 { color: var(--grey-teal);  }
.series-4 { color: var(--inup-violet);}

/* -----------------------------------------------------------------------------
   Copertina (placeholder — sostituire con lo stile finale quando pronto)
   ----------------------------------------------------------------------------- */
.cover { background: var(--inup-gradient); color:#fff; min-height: 100vh;
         display:flex; flex-direction:column; justify-content:center; padding: 8vw; }
.cover .eyebrow { color: rgba(255,255,255,.85); }
.cover h1 { font-family: var(--font-serif); font-size: clamp(32px,5vw,56px); line-height:1.05; }