/*
 * Dashboard Prototype v2 — DEMO.
 * Riferimento visivo: Ploy (via Mobbin) per gerarchia, spazio e qualità dei
 * grafici. Nessun brand, asset o testo Ploy: solo i principi — prima il
 * numero, un grafico principale forte, moduli secondari diversi fra loro,
 * molto spazio, pochi colori per volta.
 */

/* ---- token ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #f6f7f4; --panel: #fff; --ink: #15201f; --muted: #66716f; --line: #e1e6e2; --soft: #f0f3f0;
  --accent: #d64545; --blue: #2a78d6; --green: #168c60; --gold: #a87a0c;
  --shadow: 0 1px 2px rgb(28 43 39 / 4%), 0 8px 24px rgb(28 43 39 / 4%);
  /* Grafici. Ordine categoriale validato (CVD/contrasto) sulla superficie
     reale: blu, arancio, acqua, giallo; "altre fonti" in grigio neutro. */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s-other: #a6adaa;
  --good: #0ca30c; --critical: #d03b3b;
  --viz-grid: #edf0ed; --viz-base: #cfd6d2; --viz-compare: #b4bcb8; --viz-axis: #7d8885; --viz-band: #f2f5f2;
  --sidebar: 264px;
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Il tema scuro ha i propri step (stessi toni, luminosità per lo sfondo
   scuro), non un'inversione automatica. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101514; --panel: #171e1c; --ink: #f3f6f2; --muted: #a5b0ac; --line: #26322e; --soft: #1f2825;
  --accent: #ef6360; --blue: #3987e5; --green: #58cd99; --gold: #e6b849; --shadow: none;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s-other: #66706c;
  --good: #0ca30c; --critical: #e05252;
  --viz-grid: #222c29; --viz-base: #34413c; --viz-compare: #56625e; --viz-axis: #8d9894; --viz-band: #1d2623;
}

/* ---- base e shell ---------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: -5rem; left: 1rem; background: var(--ink); color: var(--panel); padding: .7rem; z-index: 99; }
.skip-link:focus-visible { top: 1rem; }
.demo-strip { height: 33px; display: flex; gap: .7rem; align-items: center; justify-content: center; background: #312a15; color: #fff7d5; font-size: .76rem; letter-spacing: .015em; padding: 0 1rem; }
.demo-strip strong { color: #f4cf54; }
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - 33px); }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); position: fixed; inset: 33px auto 0 0; width: var(--sidebar); padding: 25px 14px; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; gap: 10px; align-items: center; font-size: .86rem; line-height: 1.12; padding: 0 11px 28px; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; background: var(--ink); color: var(--panel); font-size: .71rem; font-weight: 800; border-radius: 9px; }
.workspace { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 7px; margin-bottom: 13px; }
.workspace > span, .eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin: 0; }
.workspace-button { width: 100%; border: 0; background: none; color: var(--ink); padding: 5px 0 0; text-align: left; font-weight: 700; display: flex; justify-content: space-between; }
.nav { display: grid; gap: 2px; overflow: auto; padding-right: 2px; }
.nav-item { color: var(--muted); background: transparent; border: 0; border-radius: 8px; text-align: left; padding: 8px; display: grid; grid-template-columns: 25px 1fr; gap: 6px; align-items: center; }
.nav-item b { font-size: .84rem; display: block; }
.nav-item small { display: block; font-size: .67rem; color: inherit; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-icon { text-align: center; font-size: 1rem; }
.nav-item:hover, .nav-item:focus-visible { background: var(--soft); color: var(--ink); }
.nav-item.is-active { color: var(--ink); background: var(--soft); font-weight: 700; box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 9px 0; font-size: .72rem; color: var(--muted); }
.sidebar-bottom p { margin: .45rem 0 0; }
.demo-label { font-size: .66rem; letter-spacing: .1em; color: var(--gold); font-weight: 800; }
.mobile-bar { display: none; }
main { grid-column: 2; padding: 36px clamp(24px, 4vw, 64px) 80px; max-width: 1480px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.topbar h1 { font-size: 2.2rem; letter-spacing: -.055em; margin: .18rem 0 .25rem; }
.subhead { color: var(--muted); margin: 0; }
.badge { display: inline-flex; border: 1px solid #d6aa39; color: #9b710b; border-radius: 99px; padding: 1px 7px; margin-left: 7px; font-size: .6rem; vertical-align: middle; letter-spacing: .09em; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.segmented { padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); display: flex; }
.segmented button, .theme-button, .period-pills button, .tab-strip button { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; border-radius: 6px; font-weight: 650; font-size: .78rem; }
.segmented .is-active, .period-pills .is-active { background: var(--soft); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.theme-button { border: 1px solid var(--line); background: var(--panel); padding: 8px 10px; color: var(--ink); }
.filters { display: flex; justify-content: space-between; align-items: center; margin: 34px 0 26px; gap: 14px; }
.period-pills { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.compare { font-size: .72rem; color: var(--muted); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.comparison-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--viz-compare); }
#freshness { border-left: 1px solid var(--line); padding-left: 10px; margin-left: 4px; }
/* Gerarchia verticale: le sezioni respirano (rif. Ploy), i moduli non si toccano. */
.content, .stack { display: grid; gap: 28px; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 4px; }
.section-intro h2 { font-size: 1.35rem; letter-spacing: -.035em; margin: .2rem 0; }
.section-intro p { margin: 0; color: var(--muted); max-width: 680px; }

/* ---- superfici ------------------------------------------------------------- */
.kpi, .panel, .report-hero, .narrative-card, .integration-card, .health-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel { padding: 24px; min-width: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.panel-note { color: var(--muted); font-size: .76rem; margin: 16px 0 0; }
.source-note { font-size: .65rem; color: var(--muted); border: 1px solid var(--line); padding: 4px 8px; border-radius: 99px; white-space: nowrap; }
.text-button, .row-link, .event-name { border: 0; background: transparent; color: var(--blue); font-weight: 700; padding: 0; text-align: left; font-size: .78rem; }

/* ---- KPI ------------------------------------------------------------------- */
/* Prima il numero, poi pochissimo contesto. La sparkline ha una riga sua in
   fondo alla card: nessun posizionamento assoluto, quindi nessun overlap. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { padding: 18px 18px 14px; display: grid; grid-template-rows: auto auto auto 1fr; min-width: 0; }
.kpi-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.kpi-label { font-size: .78rem; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-source { font-size: .56rem; letter-spacing: .06em; color: var(--gold); white-space: nowrap; flex: none; }
.kpi-value { font-size: 1.85rem; line-height: 1.1; letter-spacing: -.045em; font-weight: 700; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin-top: 8px; font-size: .68rem; color: var(--muted); }
.kpi-spark { display: block; width: 100%; height: 28px; margin-top: 14px; align-self: end; }
.kpi-spark-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.kpi-spark-area { opacity: .08; }
.kpi.is-static { grid-template-rows: auto auto auto; }
.delta { display: inline-flex; gap: 3px; align-items: center; font-weight: 700; font-size: .7rem; padding: 2px 6px; border-radius: 99px; white-space: nowrap; }
.delta.good { color: #0b6b3a; background: #e3f4ea; }
.delta.bad { color: #a42a2a; background: #fbe8e6; }
.delta.flat { color: var(--muted); background: var(--soft); }
:root[data-theme="dark"] .delta.good { color: #7fe0aa; background: #163626; }
:root[data-theme="dark"] .delta.bad { color: #ff9b97; background: #3e1d1c; }

/* ---- master grafico -------------------------------------------------------- */
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.chart-titles { min-width: 0; }
.chart-head h3 { margin: .25rem 0 0; font-size: 1.06rem; letter-spacing: -.025em; }
.chart-sub { color: var(--muted); font-size: .78rem; margin: .3rem 0 0; max-width: 60ch; }
.chart-card.is-primary, .panel.is-primary { padding: 26px 28px 22px; }
.chart-card.is-primary h3 { font-size: 1.2rem; }
.chart-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -4px 0 18px; }
.chart-figure { font-size: 2.1rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.chart-figure-note { font-size: .72rem; color: var(--muted); }
.seg { display: flex; flex: none; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: var(--panel); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 6px 11px; border-radius: 6px; font-weight: 650; font-size: .76rem; white-space: nowrap; transition: background-color .12s ease, color .12s ease; }
.seg button:hover { color: var(--ink); }
.seg button.is-active { background: var(--soft); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); }
.viz { position: relative; min-height: var(--viz-h, 260px); outline-offset: 4px; border-radius: 6px; touch-action: pan-y; }
.viz-svg { display: block; overflow: visible; }
.viz-grid line { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-grid line.viz-base { stroke: var(--viz-base); }
.viz-grid text, .viz-xaxis text { fill: var(--viz-axis); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.is-comparison { stroke-width: 1.5; }
.viz-area { opacity: .1; }
.viz-dot { stroke: var(--panel); stroke-width: 2; }
.viz-cross { stroke: var(--viz-base); stroke-width: 1; }
.viz-band { fill: var(--viz-band); }
.viz-tip { position: absolute; top: 0; left: 0; z-index: 3; min-width: 150px; max-width: 240px; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / 12%); padding: 9px 11px; font-size: .74rem; }
.viz-tip-head { color: var(--muted); font-size: .68rem; margin-bottom: 6px; }
.viz-tip-row { display: grid; grid-template-columns: 12px auto 1fr; gap: 7px; align-items: center; padding: 2px 0; }
.viz-tip-row i { width: 12px; height: 3px; border-radius: 2px; }
.viz-tip-row b { font-variant-numeric: tabular-nums; }
.viz-tip-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-tip-row.is-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.chart-meta { font-size: .66rem; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .74rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; }
.legend .is-line { width: 14px; height: 3px; border-radius: 2px; }
.legend .is-comparison { width: 14px; height: 2px; border-radius: 2px; }
.legend .is-rect { width: 10px; height: 10px; border-radius: 3px; }
.viz-data { margin-top: 10px; font-size: .72rem; }
.viz-data summary { cursor: pointer; color: var(--muted); width: max-content; }
.viz-data summary:hover { color: var(--ink); }
.viz-data .table-wrap { margin-top: 10px; max-height: 280px; }
.viz-data table { min-width: 0; }

/* ---- classifiche (rif. "By industry" di Ploy) ------------------------------- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ranking li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "i name val" ". bar bar"; column-gap: 8px; row-gap: 6px; align-items: baseline; font-size: .8rem; }
.rank-i { grid-area: i; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.rank-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { color: var(--muted); font-size: .68rem; margin-left: 7px; }
.rank-val { grid-area: val; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-val small { color: var(--muted); margin-left: 7px; font-size: .7rem; }
.rank-track { grid-area: bar; height: 6px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.rank-track i { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.src-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* ---- funnel ---------------------------------------------------------------- */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.funnel-row { display: grid; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 56px 50px 50px; gap: 10px; align-items: center; font-size: .76rem; }
.funnel-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-track { height: 10px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.funnel-track i { display: block; height: 100%; background: var(--s1); border-radius: 99px; min-width: 3px; }
.funnel-value { text-align: right; font-variant-numeric: tabular-nums; }
.funnel-rate { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.funnel-drop { text-align: right; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.funnel-legend { display: flex; justify-content: flex-end; gap: 22px; font-size: .62rem; color: var(--muted); margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* ---- tabelle --------------------------------------------------------------- */
/* relative: gli elementi sr-only assoluti restano dentro lo scroll della tabella. */
.table-wrap { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 590px; font-size: .76rem; }
th { text-align: left; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; background: var(--soft); white-space: nowrap; font-weight: 700; }
tbody th { text-transform: none; letter-spacing: 0; font-size: .74rem; background: transparent; color: var(--ink); font-weight: 500; }
td, th { padding: 11px 12px; border-bottom: 1px solid var(--line); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--soft) 60%, transparent); }
td small { display: block; color: var(--muted); font-size: .66rem; margin-top: 2px; }
td.empty { text-align: center; color: var(--muted); padding: 22px; }
.compact-table td, .compact-table th { padding: 9px 10px; }
.status { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; font-size: .68rem; font-weight: 700; }
.status i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.status.ok { color: var(--green); }
.status.warn { color: var(--gold); }
.status.error { color: var(--accent); }
.status.info { color: var(--blue); }
.status.muted { color: var(--muted); }

/* ---- moduli di sezione ------------------------------------------------------ */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insight-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 10px; }
.insight-grid p { margin: .55rem 0; font-size: .82rem; }
.insight-grid small { font-size: .7rem; color: var(--muted); }
.insight-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 800; }
.insight-icon.down { background: #fbe9e7; color: #b13232; }
.insight-icon.up { background: #e7f5ee; color: #0b6b3a; }
.insight-icon.warn { background: #fbf1db; color: #8a6409; }
:root[data-theme="dark"] .insight-icon.down { background: #3e1d1c; color: #ff9b97; }
:root[data-theme="dark"] .insight-icon.up { background: #163626; color: #7fe0aa; }
:root[data-theme="dark"] .insight-icon.warn { background: #3a3014; color: #f2cd6b; }
.hero-stat { font-size: 2.8rem; font-weight: 700; letter-spacing: -.06em; margin: 4px 0 6px; line-height: 1; }
.mini-stat-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; color: var(--muted); font-size: .76rem; }
.mini-stat-row b { display: block; color: var(--ink); font-size: 1rem; }
.truth-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 17px; font-size: .8rem; }
.truth { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.truth.yes { background: var(--green); }
.truth.no { background: var(--accent); }
.tab-strip { display: flex; gap: 3px; border-bottom: 1px solid var(--line); width: max-content; max-width: 100%; overflow: auto; }
.tab-strip button { border-radius: 7px 7px 0 0; white-space: nowrap; padding: 9px 14px; }
.tab-strip .is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.is-hidden { display: none !important; }
.territory-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: start; }
.demo-map { height: 340px; border-radius: 10px; background: linear-gradient(135deg, #e3ebe5, #cddbd1); position: relative; overflow: hidden; isolation: isolate; }
:root[data-theme="dark"] .demo-map { background: linear-gradient(135deg, #1f2a26, #1a2420); }
.river { position: absolute; width: 34px; height: 460px; top: -60px; left: 52%; transform: rotate(28deg); background: #9cc6dc; border-radius: 50%; opacity: .55; z-index: -1; }
.map-node { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); }
.map-node > i { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; background: color-mix(in srgb, var(--s1) 22%, transparent); border: 2px solid var(--s1); }
.map-node .map-label { position: absolute; left: calc(50% + var(--r) + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--panel); border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; font-size: .64rem; }
.map-label b { display: block; font-size: .74rem; font-variant-numeric: tabular-nums; }
.map-node.nord { top: 17%; left: 40%; }
.map-node.ovest { top: 50%; left: 13%; }
.map-node.centro { top: 50%; left: 44%; }
.map-node.est { top: 34%; left: 72%; }
.map-node.sud { top: 83%; left: 38%; }
.map-node.a55 { top: 72%; left: 70%; }
.map-node.a55 > i { border-style: dashed; }
.google-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.integration-card { padding: 16px; }
.integration-card > span { font-size: .68rem; color: var(--muted); }
.integration-card b { display: block; font-size: 1rem; margin-top: 7px; }
.integration-card p { margin: .4rem 0; font-size: .74rem; }
.integration-card small { font-size: .65rem; color: var(--muted); }
.plain-steps { padding-left: 21px; margin: 0; display: grid; gap: 11px; font-size: .8rem; }
.plain-steps b { float: right; font-variant-numeric: tabular-nums; }
.health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.health-card { padding: 15px; }
.health-card > div { display: flex; justify-content: space-between; font-size: .63rem; color: var(--muted); }
.health-card h3 { font-size: .79rem; margin: 17px 0 5px; }
.health-card > b { font-size: .9rem; }
.health-checks { display: flex; gap: 9px; flex-wrap: wrap; }
.health-checks span { padding: 7px 9px; background: var(--soft); border-radius: 6px; font-size: .72rem; }
.explorer-toolbar { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }
.explorer-toolbar label { display: grid; gap: 4px; font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.explorer-toolbar input, .explorer-toolbar select { color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; min-width: 130px; }
.explorer-toolbar input { min-width: 220px; }
.event-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.detail-dialog { width: min(680px, calc(100vw - 30px)); border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 25%); padding: 28px; }
.detail-dialog::backdrop { background: rgb(10 15 13 / 55%); }
.dialog-close { position: absolute; right: 12px; top: 9px; border: 0; background: var(--soft); color: var(--ink); width: 29px; height: 29px; border-radius: 50%; font-size: 1.3rem; }
.detail-dialog h2 { margin: .15rem 0 20px; letter-spacing: -.04em; }
.detail-grid, .event-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.detail-grid span, .event-detail div { padding: 10px; background: var(--soft); border-radius: 7px; font-size: .73rem; color: var(--muted); }
.detail-grid b, .event-detail dd { display: block; margin: .2rem 0 0; color: var(--ink); font-weight: 700; }
.event-detail { margin: 0; }
.event-detail dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; }
.event-detail dd { word-break: break-word; }
.detail-dialog pre { background: var(--soft); padding: 12px; border-radius: 7px; overflow: auto; font-size: .7rem; }
.dialog-note { font-size: .72rem; color: var(--muted); }
.report-hero { padding: 30px; display: flex; justify-content: space-between; gap: 25px; background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--blue) 7%, var(--panel))); }
.report-hero p { color: var(--muted); max-width: 570px; }
.report-hero h2 { font-size: 2rem; letter-spacing: -.06em; max-width: 510px; margin: .3rem 0; }
.report-score { min-width: 215px; border-left: 1px solid var(--line); padding-left: 25px; align-self: center; }
.report-score b { font-size: 1.75rem; letter-spacing: -.05em; display: block; }
.report-score span { display: block; color: var(--muted); font-size: .7rem; margin: .2rem 0 .5rem; }
.narrative-card { padding: 18px; border-top: 3px solid var(--blue); }
.narrative-card.positive { border-top-color: var(--green); }
.narrative-card.negative { border-top-color: var(--accent); }
.narrative-card p { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
.narrative-card h3 { margin: .5rem 0; font-size: .95rem; }
.narrative-card span { font-size: .74rem; color: var(--muted); }
.actions { padding: 0; margin: 0; list-style: none; display: grid; gap: 13px; }
.actions li { display: grid; grid-template-columns: 220px 1fr; gap: 13px; border-bottom: 1px solid var(--line); padding-bottom: 13px; font-size: .8rem; }
.actions li:last-child { border-bottom: 0; padding: 0; }
.actions span { color: var(--muted); }
.outline-button { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--panel); color: var(--ink); font-size: .75rem; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.settings-grid .panel { min-height: 185px; }
.settings-grid h3 { margin: .4rem 0; }
.settings-grid p { font-size: .78rem; color: var(--muted); }
.settings-grid code { font-size: .67rem; color: var(--blue); }
.paths { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.paths li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .76rem; padding: 10px; background: var(--soft); border-radius: 7px; }
.paths span { color: var(--muted); }
.paths em { font-style: normal; color: var(--green); font-weight: 700; }
.paths small { margin-left: auto; color: var(--muted); }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .google-cards { grid-template-columns: repeat(2, 1fr); }
  .health-grid { grid-template-columns: repeat(3, 1fr); }
  .territory-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  :root { --sidebar: 240px; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 40px rgb(0 0 0 / 12%); }
  .mobile-bar { position: sticky; top: 0; height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 9; }
  .icon-button { border: 0; background: transparent; color: var(--ink); font-size: 1.25rem; }
  .mobile-brand { font-size: .8rem; letter-spacing: .01em; }
  .app-shell { display: block; min-height: 0; }
  main { padding-top: 27px; }
  .topbar { gap: 14px; }
  .insight-grid, .three-col, .settings-grid { grid-template-columns: 1fr; }
  .report-hero { display: block; }
  .report-score { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin-top: 18px; }
  .health-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .chart-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .seg { align-self: flex-start; }
}
@media (max-width: 620px) {
  main { padding: 22px 16px 64px; }
  .demo-strip { height: auto; min-height: 33px; font-size: .65rem; line-height: 1.25; padding: 6px 11px; text-align: center; }
  .demo-strip span { display: none; }
  .topbar { display: block; }
  .top-actions { margin-top: 14px; justify-content: space-between; }
  .theme-button span { display: none; }
  .filters { display: block; margin: 22px 0 18px; }
  .period-pills { overflow: auto; }
  .period-pills button { white-space: nowrap; }
  .compare { margin-top: 10px; }
  .comparison-dot { display: none; }
  #freshness { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
  .content, .stack { gap: 20px; }
  .section-intro { display: block; }
  .section-intro > span, .section-intro > button { margin-top: 10px; display: inline-flex; }
  .kpi-grid { gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  /* Su telefono l'etichetta va a capo invece di troncarsi: la fonte scende sotto. */
  .kpi-top { flex-wrap: wrap; gap: 2px 8px; }
  .kpi-label { white-space: normal; }
  .kpi-value { font-size: 1.45rem; }
  .kpi-spark { height: 22px; margin-top: 10px; }
  .panel, .chart-card.is-primary, .panel.is-primary { padding: 18px 16px; }
  .chart-figure { font-size: 1.75rem; }
  .funnel-row { grid-template-columns: 86px minmax(0, 1fr) 46px 44px; gap: 8px; }
  .funnel-drop, .funnel-legend span:last-child { display: none; }
  .google-cards { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .explorer-toolbar label { width: 100%; }
  .explorer-toolbar input, .explorer-toolbar select { width: 100%; }
  .detail-grid, .event-detail { grid-template-columns: 1fr; }
  .actions li { grid-template-columns: 1fr; gap: 3px; }
  .report-hero h2 { font-size: 1.65rem; }
  .paths li small { width: 100%; margin-left: 0; }
  .demo-map { height: 280px; }
}
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---- selettore workspace/cliente ------------------------------------------- */
/* Vive nella riga "workspace" già prevista nella sidebar: stesso peso visivo,
   nessun elemento nuovo nel layout. Il menu si apre sotto, sopra la nav. */
.workspace { position: relative; }
.workspace-button { align-items: center; gap: 8px; border-radius: 6px; }
.workspace-button:hover { color: var(--ink); background: var(--soft); }
.workspace-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.workspace-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-env { flex: none; font-size: .56rem; letter-spacing: .08em; font-weight: 800; color: #9b710b; border: 1px solid #d6aa39; border-radius: 99px; padding: 1px 6px; }
:root[data-theme="dark"] .workspace-env { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.workspace-menu { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / 14%); padding: 6px; }
.workspace-menu-title, .workspace-menu-note { margin: 4px 8px; font-size: .62rem; color: var(--muted); }
.workspace-menu-title { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.workspace-option { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border-radius: 7px; text-decoration: none; font-size: .8rem; }
.workspace-option b { display: block; }
.workspace-option small { display: block; color: var(--muted); font-size: .66rem; }
.workspace-option:hover, .workspace-option[aria-current="true"] { background: var(--soft); }

/* ---- V3 DEMO: Contatti, Operazioni, Integrations ---------------------------- */
/* Solo classi nuove: nessuna regola della V2 viene modificata. */
.seg-count { font-variant-numeric: tabular-nums; color: var(--muted); margin-left: 3px; font-weight: 500; }
.crm-search { display: block; margin-bottom: 14px; }
.crm-search input { width: min(100%, 360px); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.crm-table table, .int-table table { min-width: 1180px; }
.crm-channels { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); font-size: .66rem; font-weight: 500; }
.crm-flag { font-size: .68rem; color: var(--muted); }
.crm-flag.is-on { color: var(--ink); font-weight: 650; }
.crm-h { font-size: .9rem; margin: 22px 0 10px; }
.crm-lead { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.crm-lead header { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .78rem; }
.crm-lead header .muted { font-size: .7rem; }
.crm-int { font-size: .74rem; margin: 8px 0; }
.crm-svc { min-width: 0; font-size: .72rem; }
.crm-svc td, .crm-svc th { padding: 7px 8px; }
.crm-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .74rem; color: var(--muted); }
.crm-notes p { margin: 2px 0 0; color: var(--ink); }
/* Lead Operations: pannelli additivi, stessi token della Dashboard V2. */
.lop-table table { min-width: 980px; }
.lop-table td small { display: block; color: var(--muted); font-size: .66rem; margin-top: 3px; }
.lop-filters { margin-top: 8px; }
.lop-kpi.error { border-top: 3px solid var(--critical); }
.lop-kpi.warn { border-top: 3px solid var(--gold); }
.lop-kpi.info { border-top: 3px solid var(--blue); }
.lop-funnel, .lop-workload, .lop-qualification { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lop-funnel li { display: grid; grid-template-columns: 112px 28px minmax(30px,1fr) 40px; gap: 9px; align-items: center; font-size: .75rem; }
.lop-funnel i { height: 8px; display: block; border-radius: 99px; background: var(--blue); }
.lop-funnel small, .lop-workload span, .lop-qualification small { color: var(--muted); font-size: .67rem; }
.lop-workload li, .lop-qualification li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 10px; border-radius: 8px; background: var(--soft); font-size: .75rem; }
.lop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.lop-detail-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.lop-detail-section h3 { font-size: .84rem; margin: 0 0 9px; }
.lop-handoff { display: grid; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--green) 8%, var(--panel)); border-radius: 8px; font-size: .78rem; }
@media (max-width: 620px) { .lop-funnel li { grid-template-columns: 88px 24px minmax(24px,1fr) 32px; gap: 6px; } .lop-actions .outline-button { min-height: 44px; } }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { display: grid; grid-template-columns: 18px 1fr; gap: 8px; position: relative; padding-bottom: 12px; }
.tl-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; background: var(--panel); border: 2px solid var(--muted); }
.tl-item.is-obs .tl-dot, .tl-item.is-be .tl-dot { border-color: var(--s1); background: var(--s1); }
.tl-item.is-op .tl-dot { border-color: var(--green); background: var(--green); }
.tl-item.is-gg .tl-dot { border-color: var(--gold); background: var(--gold); }
.tl-item.is-pend .tl-dot { border-style: dashed; }
.tl-item p { margin: 0; font-size: .76rem; }
.tl-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.tl-head b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }
.tl-kind, .tl-src { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; }
.tl-head time { margin-left: auto; color: var(--muted); font-size: .66rem; }
.tl-item code { font-size: .64rem; color: var(--muted); }
.op-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.op-group { display: grid; gap: 6px; align-content: start; }
.op-group .eyebrow { margin-bottom: 4px; }
.op-action { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 10px 12px; font-size: .8rem; font-weight: 600; }
.op-action:hover { background: var(--soft); }
.op-form { display: grid; gap: 12px; }
.op-form label, .op-form legend { display: grid; gap: 5px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.op-form input, .op-form select, .op-form textarea { font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; }
.op-services { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.op-services label { display: flex; gap: 7px; align-items: center; text-transform: none; letter-spacing: 0; font-size: .76rem; color: var(--ink); }
.op-effect { background: var(--soft); border-radius: 9px; padding: 10px 12px; font-size: .76rem; }
.op-effect p { margin: 4px 0 0; color: var(--muted); }
.op-submit { justify-self: start; border: 1px solid var(--line); background: var(--ink); color: var(--panel); border-radius: 8px; padding: 9px 14px; font-weight: 650; }
.op-result { margin: 0; font-size: .76rem; color: #8a6409; background: #fbf1db; border-radius: 8px; padding: 9px 11px; }
:root[data-theme="dark"] .op-result { color: #f2cd6b; background: #3a3014; }
.int-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; font-size: .78rem; }
.int-summary > span { display: inline-flex; gap: 8px; align-items: center; }
.src-badge { display: inline-block; font-size: .58rem; font-weight: 750; letter-spacing: .06em; border: 1px solid var(--line); border-radius: 99px; padding: 2px 7px; color: var(--muted); white-space: nowrap; }
.src-badge.is-real, .src-badge.is-operator { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.src-badge.is-provider, .src-badge.is-firstparty { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.src-badge.is-google, .src-badge.is-delayed { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
@media (max-width: 620px) {
  .tl-head time { margin-left: 0; width: 100%; }
  .op-grid { grid-template-columns: 1fr; }
}
/* Le etichette di stato V3 sono frasi ("Non configurato"), non parole singole. */
.crm-table .status, .int-table .status, .int-summary .status, .op-queue .status, .crm-lead .status { text-transform: none; }

/* ---- ricerca globale, lingua, gancio guida (aggiunte UX 01/10/2026) -------- */
/* Stesso linguaggio dei controlli esistenti (theme-button, seg): bordo sottile,
   superficie panel, testo muted. Nessuna animazione: il pannello compare e
   basta, l'evidenziazione del punto d'arrivo è un contorno statico di 2 s. */
.search-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 7px 10px; border-radius: 6px; font-weight: 650; font-size: .78rem; }
.search-button:hover { color: var(--ink); }
.search-kbd { font: inherit; font-size: .64rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.lang-select select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 7px 8px; border-radius: 6px; font: inherit; font-weight: 650; font-size: .76rem; letter-spacing: .04em; cursor: pointer; }
.mobile-actions { display: flex; align-items: center; gap: 2px; }
.guide-link { color: var(--blue); font-weight: 700; }
#guideSlot { margin: 8px 0 0; }

.search-panel { position: fixed; z-index: 40; top: 118px; right: clamp(16px, 4vw, 64px); width: min(540px, calc(100vw - 32px)); max-height: min(72vh, 560px); display: flex; flex-direction: column; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 50px rgb(0 0 0 / 16%); }
.search-panel[hidden] { display: none; }
.search-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
.search-scopes { display: flex; gap: 4px; margin-bottom: 8px; }
.search-scope { border: 0; background: transparent; color: var(--muted); padding: 4px 8px; border-radius: 6px; font-weight: 650; font-size: .72rem; }
.search-scope.is-active { background: var(--soft); color: var(--ink); }
.search-scope:disabled { cursor: not-allowed; opacity: .75; }
.search-scope small { font-size: .62rem; font-weight: 600; }
.search-input { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: .9rem; }
.search-results { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
.search-option { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border-radius: 8px; cursor: pointer; }
.search-option[aria-selected="true"] { background: var(--soft); box-shadow: inset 2px 0 0 var(--blue); }
.search-kind { font-size: .6rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-main { min-width: 0; display: flex; flex-direction: column; }
.search-main b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-main small { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-dest { font-size: .7rem; color: var(--muted); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.search-option.is-planned { cursor: default; }
.search-option.is-planned b { color: var(--muted); }
.search-empty { padding: 14px 10px; color: var(--muted); font-size: .8rem; }
.search-foot { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: .66rem; color: var(--muted); }
.is-search-target { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 980px) {
  .search-button { display: none; }
  .search-panel { top: 98px; left: 16px; right: 16px; width: auto; }
}
@media (max-width: 620px) {
  .top-actions { flex-wrap: wrap; gap: 8px; }
  .search-option { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .search-dest { max-width: none; }
}

/* ---- Campagne / Comunicazioni (DEMO, campaigns.js) ----------------------------- */
/* Riusa panel, table, seg, tab-strip, op-form, timeline e detail-grid. Il canale
   ha sempre un'etichetta di testo: il colore non è mai l'unica informazione. */
.camp-demo { margin: 0; font-size: .74rem; color: #8a6409; background: #fbf1db; border-radius: 8px; padding: 8px 11px; }
:root[data-theme="dark"] .camp-demo { color: #f2cd6b; background: #3a3014; }
.camp-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.camp-toolbar .op-submit { margin-bottom: 4px; }
.camp-modebar { display: flex; justify-content: flex-end; }
.camp-ch { display: inline-block; font-size: .62rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap; }
.camp-ch.is-email { color: var(--s1); } .camp-ch.is-sms { color: var(--s3); } .camp-ch.is-whatsapp { color: var(--green); }
.camp-status { text-transform: none; white-space: nowrap; }
.camp-table td small, .camp-table td small { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.camp-table .camp-content { min-width: 240px; max-width: 420px; white-space: normal; font-size: .72rem; color: var(--muted); }
.src-badge.is-estimated { color: var(--s2); border-color: color-mix(in srgb, var(--s2) 45%, transparent); }
.src-badge.is-notavailable { color: var(--muted); border-style: dashed; }
.src-badge.is-derived { color: var(--ink); }
.camp-avail td { white-space: nowrap; }
.camp-queue .camp-review { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; }
.camp-review header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.camp-more summary { cursor: pointer; color: var(--blue); font-size: .76rem; font-weight: 650; }
.camp-message { background: var(--soft); border-radius: 9px; padding: 10px 12px; font-size: .78rem; overflow-wrap: anywhere; }
.camp-message p { margin: 4px 0 0; white-space: pre-wrap; }
.camp-reasons { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: .74rem; }
.camp-reasons li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.camp-warnings, .camp-errors { margin: 0; padding: 8px 12px 8px 26px; border-radius: 8px; font-size: .74rem; }
.camp-warnings { color: #8a6409; background: #fbf1db; }
.camp-errors { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
:root[data-theme="dark"] .camp-warnings { color: #f2cd6b; background: #3a3014; }
.camp-note-field { display: grid; gap: 5px; font-size: .7rem; color: var(--muted); }
.camp-note-field textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; }
.camp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.camp-actions .op-submit[disabled] { opacity: .45; cursor: not-allowed; }
.camp-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.camp-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; min-width: 0; }
.camp-form fieldset > legend { padding: 0 6px; font-weight: 750; color: var(--ink); }
.camp-radios { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.camp-legend { width: 100%; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.op-form .camp-radio { display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink); }
.camp-radio small { color: var(--muted); font-size: .7rem; }
.camp-help, .camp-counter { text-transform: none; letter-spacing: 0; font-size: .68rem; color: var(--muted); }
.camp-inline { font-size: .76rem; color: var(--muted); }
.camp-inline b { color: var(--ink); }
.camp-when { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 10px; }
.camp-preview { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel); display: grid; gap: 8px; }
.camp-preview h4, .camp-agenda-title { margin: 6px 0 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.camp-preview-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.camp-preview-nums span { background: var(--soft); border-radius: 8px; padding: 8px; font-size: .66rem; color: var(--muted); display: grid; }
.camp-preview-nums b { font-size: 1.2rem; color: var(--ink); }
.camp-pick-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.camp-pick-head .crm-search { margin: 0; flex: 1 1 200px; }
.camp-pick-count { font-size: .74rem; font-weight: 700; }
.camp-pick { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
.camp-pick li + li { border-top: 1px solid var(--line); }
.op-form .camp-pick label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink); }
.camp-pick small { display: block; color: var(--muted); font-size: .68rem; }
.camp-pick-reason, .camp-pick-ok { font-style: normal; font-size: .64rem; text-align: right; max-width: 150px; }
.camp-pick-reason { color: var(--accent); } .camp-pick-ok { color: var(--green); }
.camp-warn-box { margin: 0 0 12px; font-size: .76rem; color: #8a6409; background: #fbf1db; border-radius: 8px; padding: 9px 11px; }
:root[data-theme="dark"] .camp-warn-box { color: #f2cd6b; background: #3a3014; }
.camp-frozen { font-size: .74rem; margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--green); background: var(--soft); border-radius: 6px; }
.camp-frozen.is-live { border-left-color: var(--gold); }
.camp-detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -10px 0 10px; }
.camp-calnav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.camp-calnav b { margin-left: 6px; text-transform: capitalize; }
.camp-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.camp-dow { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 4px; }
.camp-day { min-height: 86px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.camp-day.is-out { opacity: .45; }
.camp-day.is-today { box-shadow: inset 0 0 0 2px var(--blue); }
.camp-daynum { font-size: .7rem; color: var(--muted); }
.camp-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--s1); background: var(--soft); color: var(--ink); border-radius: 5px; padding: 3px 5px; font-size: .64rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.camp-chip small { display: block; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.camp-chip.is-sms { border-left-color: var(--s3); } .camp-chip.is-whatsapp { border-left-color: var(--green); }
.camp-chip.is-unapproved { border-left-style: dashed; }
.camp-chip-time { font-variant-numeric: tabular-nums; }
.camp-dot-count { display: none; }
.camp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.camp-week .camp-day { min-height: 160px; }
.camp-none { font-size: .7rem; }
.camp-agenda { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.camp-agenda li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .72rem; color: var(--muted); }
.camp-agenda .camp-chip { font-size: .74rem; white-space: normal; }
@media (max-width: 1100px) { .camp-editor { grid-template-columns: 1fr; } .camp-preview { position: static; } }
@media (max-width: 720px) {
  .camp-week { grid-template-columns: 1fr; }
  .camp-week .camp-day { min-height: 0; }
}
@media (max-width: 620px) {
  .camp-month .camp-chip { display: none; }
  .camp-day { min-height: 44px; }
  .camp-dot-count { display: block; position: absolute; right: 4px; bottom: 4px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--blue); color: #fff; font-size: .6rem; text-align: center; line-height: 16px; }
  .camp-agenda li { grid-template-columns: 1fr; gap: 2px; }
  .camp-when { grid-template-columns: 1fr 1fr; }
  .camp-preview-nums b { font-size: 1rem; }
}
/* La barra schede delle campagne si comprime (scorre al suo interno) invece di
   allargare la colonna: a 390 px la pagina non deve scorrere in orizzontale. */
.camp-toolbar { min-width: 0; }
.camp-toolbar .tab-strip { flex: 1 1 0; min-width: 0; width: auto; }
.detail-dialog p.muted { font-size: .78rem; }

/* ---- identità del workspace in Vista cliente ---------------------------------- */
/* Stessa riga e stesso peso del selettore di agenzia, ma statica: niente
   chevron, niente menu, niente hover. */
.workspace-static { padding: 5px 0 0; font-weight: 700; color: var(--ink); min-width: 0; }
.workspace-static small { display: block; font-weight: 500; font-size: .66rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: var(--panel); }
.workspace-button[hidden], .workspace-static[hidden] { display: none; }
.workspace-static .workspace-name { align-items: flex-start; }
.workspace-static .workspace-name > span:first-child { white-space: normal; overflow: visible; }

/* ---- moduli additivi: GBP, Contenuti, Advertising, Accesso (modules.js) ------ */
/* Solo componenti esistenti (panel, table, tab-strip, kpi, status, timeline,
   op-form, camp-*). Le aggiunte qui sono minime: badge piattaforma, tessere
   asset senza immagini (niente stock), anteprima per piattaforma, schermata 403. */
.mod-tabs { margin-bottom: 4px; }
.mod-prov { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; color: var(--ink); white-space: nowrap; background: var(--soft); }
.mod-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mod-asset { border: 1px dashed var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 6px; min-height: 110px; align-content: start; background: var(--soft); }
.mod-asset b { font-size: .8rem; }
.mod-asset-kind { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.mod-preview { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; margin-bottom: 8px; }
.mod-preview p { margin: 0; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-preview small { color: var(--muted); font-size: .68rem; }
.mod-ok { color: var(--green); } .mod-ko { color: var(--gold); }
.mod-403 { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--soft); margin-bottom: 12px; }
.mod-403 h4 { margin: 4px 0; font-size: 1.1rem; }
.mod-403 p { margin: 0; color: var(--muted); font-size: .8rem; }
.mod-403-panel { max-width: 640px; }
.mod-chip { border-left-color: var(--s2); }
/* Barre schede lunghe (GBP, Advertising): scorrono al proprio interno invece di
   allargare la colonna (`width: max-content` della tab-strip qui non va bene). */
.tab-strip.mod-tabs { width: auto; min-width: 0; }
.filters[hidden] { display: none; }

/* ---- Preview & Creative System (§30, DEMO) ----------------------------------
 * Anteprime generate dai campi strutturati (preview.js). Solo token esistenti:
 * chiaro/scuro seguono i token. Nessuna immagine: i media sono segnaposto con
 * le proporzioni del formato. Volutamente sobrie: non imitano pixel per pixel
 * le interfacce ufficiali. */
.pv-title { margin-top: 10px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 8px 0; }
.camp-preview .pv-grid { grid-template-columns: 1fr; }
.pv-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pv-var { background: color-mix(in srgb, var(--gold) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.pv-media { display: grid; place-items: center; background: var(--soft); border: 1px dashed var(--viz-base); border-radius: 8px; color: var(--muted); font-size: .72rem; text-align: center; padding: 8px; position: relative; overflow: hidden; }
.pv-media.is-empty { opacity: .8; }
.pv-dots { position: absolute; bottom: 6px; font-style: normal; letter-spacing: 2px; font-size: .6rem; }
.pv-disclaimer, .pv-meta { margin: 6px 0 0; font-size: .68rem; color: var(--muted); }
.pv-warn { margin: 6px 0 0; font-size: .72rem; color: var(--gold); }
.pv-cta { display: inline-block; justify-self: start; margin-top: 8px; padding: 6px 12px; border-radius: 6px; background: var(--blue); color: #fff; font-size: .78rem; font-weight: 700; }
.pv-url { display: block; margin-top: 2px; font-size: .66rem; color: var(--muted); overflow-wrap: anywhere; }
/* email */
.pv-email { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; min-width: 0; }
.pv-inbox { display: grid; gap: 2px; padding: 8px 10px; background: var(--soft); border-bottom: 1px solid var(--line); font-size: .76rem; }
.pv-inbox small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-mail { display: grid; gap: 8px; padding: 12px; font-size: .82rem; }
.pv-mail-from { margin: 0; font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
.pv-body { line-height: 1.5; overflow-wrap: anywhere; }
.pv-foot { border-top: 1px solid var(--line); padding-top: 8px; font-size: .66rem; color: var(--muted); }
.pv-email.is-mobile { max-width: 300px; }
.pv-email.is-mobile .pv-mail { font-size: .78rem; padding: 10px; }
/* SMS / WhatsApp */
.pv-phone { border: 1px solid var(--line); border-radius: 16px; background: var(--soft); padding: 12px; display: grid; gap: 6px; max-width: 320px; min-width: 0; }
.pv-sender { margin: 0; font-size: .76rem; font-weight: 700; }
.pv-sender small { display: block; font-weight: 400; color: var(--muted); }
.pv-bubble { padding: 8px 10px; border-radius: 12px; font-size: .8rem; line-height: 1.45; background: var(--panel); border: 1px solid var(--line); overflow-wrap: anywhere; }
.pv-bubble.is-out { background: color-mix(in srgb, var(--green) 14%, var(--panel)); }
.pv-wa-btn { display: block; text-align: center; padding: 6px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--blue); font-size: .76rem; font-weight: 600; }
/* social / GBP / ads */
.pv-social { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pv-head { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pv-head > span:last-child { display: grid; min-width: 0; font-size: .78rem; }
.pv-head small { color: var(--muted); font-size: .68rem; }
.pv-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); font-size: .66rem; font-weight: 700; }
.pv-caption { margin: 0; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.pv-ad-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--soft); border-radius: 8px; padding: 8px; }
.pv-ad-foot > span:first-child { display: grid; min-width: 0; font-size: .78rem; overflow-wrap: anywhere; }
.pv-ad-foot small { color: var(--muted); font-size: .66rem; }
.pv-ad-foot .pv-cta { margin: 0; flex: 0 0 auto; }
.pv-thumb { width: 72px; height: 44px; margin-bottom: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font-size: .5rem; line-height: 1.2; color: var(--muted); overflow: hidden; }
.pv-modes, .pv-kinds { margin: 4px 0 8px; flex-wrap: wrap; }
.mod-chip.is-crm_campaign { border-left-color: var(--s1); } .mod-chip.is-gbp_post { border-left-color: var(--s3); } .mod-chip.is-ad_creative { border-left-color: var(--s4); }
@media (max-width: 760px) { .pv-pair { grid-template-columns: 1fr; } .pv-email.is-mobile, .pv-phone { max-width: none; } }
/* La coda ora contiene anteprime e confronto versioni: la colonna non deve
 * allargarsi sul contenuto (le tabelle scorrono nel proprio contenitore). */
.camp-queue .camp-review { grid-template-columns: minmax(0, 1fr); }

/* ---- Operations Layer (§31, DEMO): Messaggi, Task, Settings ------------------
 * Solo token e componenti esistenti. Il contatore vive solo sulla voce
 * Messaggi: le voci del core non cambiano. */
.nav-item:has(.nav-badge) { grid-template-columns: 25px minmax(0, 1fr) auto; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; display: inline-grid; place-items: center; }
.ops-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ops-unread { color: var(--accent); }
.ops-overdue { color: var(--critical); font-weight: 700; }
.camp-table tr.is-selected td { background: var(--soft); }
.ops-settings { margin-top: 24px; display: grid; gap: 12px; }
.ops-h2 { margin: 0; font-size: 1.05rem; }
.ops-settings > .muted { margin: 0; font-size: .8rem; }
/* ---- Advertising: Ad Library e Crea campagna -------------------------------- */
.adl-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 10px; }
.adl-filter, .adl-search { display: grid; gap: 4px; font-size: .72rem; color: var(--muted); min-width: 0; }
.adl-filter select, .adl-search input { font: inherit; font-size: .8rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
.adl-search { flex: 1 1 220px; }
.adl-search input { width: 100%; box-sizing: border-box; }
.adl-active { align-self: center; }
.adl-count { margin: 0 0 8px; font-size: .74rem; }
.adl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.adl-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; background: var(--panel); min-width: 0; }
.adl-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.adl-card .pv-ad { border: 0; padding: 0; }
.adl-meta { margin: 0; display: grid; gap: 4px; font-size: .72rem; }
.adl-meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px; }
.adl-meta dt { color: var(--muted); }
.adl-meta dd { margin: 0; overflow-wrap: anywhere; }
.adl-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.adl-mini span { background: var(--soft); border-radius: 6px; padding: 6px; display: grid; font-size: .62rem; color: var(--muted); min-width: 0; }
.adl-mini b { color: var(--ink); font-size: .78rem; overflow-wrap: anywhere; }
.adl-detail { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ads-wf { font-size: .74rem; color: var(--muted); line-height: 1.6; }
.camp-form label.is-na { opacity: .7; }
@media (max-width: 1100px) { .ops-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .adl-detail { grid-template-columns: 1fr; } .adl-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- Moduli bloccati (§32): lucchetto sulla sola voce del modulo LOCKED ---- */
.nav-item:has(.nav-lock) { grid-template-columns: 25px minmax(0, 1fr) auto; }
.nav-lock { font-size: .72rem; opacity: .8; }

/* Fix responsive autorizzato (§37), SOLO ≤ 620px: lingua e tema formano un
 * piccolo cluster a destra ("Vista cliente / Vista amministratore   [IT][◐]") invece
 * di IT al centro e tema all'estremo. Desktop e tablet invariati; l'altezza
 * della topbar non cambia. */
@media (max-width: 620px) {
  .top-actions .lang-select { margin-left: auto; }
}

/* ---- safe area: notch, Dynamic Island, barra di stato, home indicator ------
   La pagina usa viewport-fit=cover (index.html), quindi su iPhone arriva sotto
   le zone di sistema: qui la si riporta dentro, in UN punto per tutta la
   Dashboard. Su desktop, Android e Safari verticale env() vale 0 → nessun
   cambiamento (gate Core V2 invariato). La pillola dell'indirizzo di Safari è
   del browser: non si disegna nulla attorno a lei. */
body { padding-top: env(safe-area-inset-top); }
.sidebar { top: calc(33px + env(safe-area-inset-top)); }
@media (max-width: 980px) {
  /* Copertura fissa della zona di stato: scorrendo, il contenuto non passa
     sotto notch/orologio; la barra resta incollata subito sotto. */
  body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: env(safe-area-inset-top); background: var(--panel); z-index: 11; pointer-events: none; }
  .mobile-bar { top: env(safe-area-inset-top); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .sidebar { padding-left: max(14px, env(safe-area-inset-left)); padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
/* LIVE: ritorno alla shell dello spazio (access.js). */
.back-to-shell { display: inline-block; margin-bottom: 10px; }

/* Identità della piattaforma Scale in 90 Days (file ufficiali in assets/brand/, mai ridisegnati).
   Logotipo nero sul tema chiaro, bianco sul tema scuro; il simbolo dorato è identico nei due file.
   Dimensioni SOLO qui: la CSP (style-src 'self') non ammette attributi style. Non tocca l'identità
   del cliente (.brand-mark con iniziali o logo del workspace). */
.platform-logo { display: block; height: 30px; width: auto; max-width: 100%; }
.platform-logo-on-dark { display: none; }
:root[data-theme="dark"] .platform-logo-on-light { display: none; }
:root[data-theme="dark"] .platform-logo-on-dark { display: block; }
.platform-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; color: var(--muted); font-size: .7rem; }
.platform-sign .platform-logo-sm { height: 18px; }

/* LIVE: dati reali, non DEMO (app.js applyAccess). */
.demo-label.is-live { color: var(--muted); }