:root {
  /* Palette brand SAGA (22/08/2026, v4 — spec SaaS bianco/grigio/marrone):
     superfici bianche/grigio chiarissimo, testo quasi-nero, UN solo accento
     (bordeaux) usato ovunque per link/stati-attivi/icone/contorni — MAI per
     lo sfondo dei bottoni primari o per i titoli, che restano --text (vedi
     .btn-primary e le regole "h2/h3" più sotto, cambiate apposta). --accent e
     --accent-2 sono deliberatamente identici: la spec chiede un solo accento
     usato con coerenza, non due tonalità diverse. --bad/--warn lasciati alla
     scelta precedente (non specificati in questa spec, restano leggibili sul
     nuovo sfondo chiaro). --good ora è il verde badge della spec (testo), con
     --good-bg il verde tenue di sfondo — vedi .pill.good più sotto.
     22/08/2026 (v5, poi annullato su feedback utente — "voglio il contrario,
     esattamente come nella dashboard aziende"): il tentativo di scurire
     --bg/--panel cambiava anche l'aspetto della scheda azienda, che l'utente
     aveva già definito "perfetta" così com'era. Tornati ai valori v4. La
     regola corretta non è "scurire lo sfondo pagina", ma: i box devono usare
     --card (bianco) esattamente come già fa la scheda azienda (.section),
     non --panel (riservato a stati selezionati/righe evidenziate dentro un
     box bianco). Vedi le regole di Notes/Progetti più sotto nel file. */
  --bg: #f5f5f6;
  --panel: #f2f2f2;
  --card: #ffffff;
  --card-hover: #ececec;
  --border: #e9e9e9;
  --disabled: #dadada;
  --text: #18181a;
  --muted: #4e4e50;
  --accent: #800000;
  --accent-2: #800000;
  --accent-rgb: 128, 0, 0;
  --tint-rgb: 110, 20, 35;
  --good: #007a49;
  --good-bg: #e5f5ee;
  --bad: #c0392b;
  --bad-bg: #fbeae8;
  --warn: #b8860b;
  --warn-bg: #fbf3e0;
  --radius-card: 10px;
  --shadow-card: none;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.view { min-height: 100vh; }
.view.center { display: flex; align-items: center; justify-content: center; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); }

/* ---------- LOGIN ---------- */
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 36px;
  width: 360px;
  max-width: 92vw;
  box-shadow: 0 20px 50px rgba(9,8,8,0.16);
}
.logo-brand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}
.logo-brand.small { justify-content: flex-start; }
.logo-brand.small .logo-img { width: 40px; height: 40px; border-radius: 9px; }
.tagline {
  text-align: center;
  color: var(--muted);
  margin: 6px 0 26px;
  font-size: 13px;
}
#auth-form { display: flex; flex-direction: column; gap: 12px; }
input, select, button {
  font-family: inherit;
  font-size: 14px;
}
input, select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
input:disabled, select:disabled, button:disabled {
  background: var(--disabled);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}
.switch { text-align: center; margin-top: 16px; font-size: 13px; }

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 11px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.error { color: var(--bad); font-size: 13px; margin-top: 12px; text-align: center; }

/* ---------- HEADER ---------- */
/* header e .tabs stavano ognuno per conto proprio: solo l'header (logo/utente)
   era sticky, la barra dei tab scorreva via col contenuto (23/08/2026,
   richiesta esplicita: "il menu in alto deve essere fisso"). Ora entrambi
   sono dentro .app-topbar, che e' l'UNICO elemento sticky — cosi' restano
   impilati insieme senza dover indovinare l'altezza esatta dell'header per
   calcolare il top: della barra sotto. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.searchbar {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Finder Classico: pannello filtri a gruppi (31/08/2026) ----------
   erano 9 (poi 10) controlli su un'unica riga che andava a capo in modo
   disordinato — sostituiti da: riga sempre visibile (ricerca + bottone
   "Filtri" + Reimposta + Cerca), poi un pannello a gruppi con etichetta
   (dove/cosa, dimensione, qualita'/proprieta') separati da un filo
   verticale (mockup "Barra Filtri Finder", opzione B scelta dall'utente).
   Il pannello si richiude da solo dopo una ricerca (vedi setFiltersExpanded
   in app.js) per lasciare spazio ai risultati, riespandibile dal bottone
   "Filtri". .filters-b sovrascrive il flex a riga di .searchbar sopra con
   uno stack verticale delle sue 2 sezioni. */
.searchbar.filters-b { display: flex; flex-direction: column; gap: 14px; flex-wrap: nowrap; }
.fb-toprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-toprow #search-input { flex: 1; min-width: 220px; }
.fb-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid rgba(var(--tint-rgb), 0.25); color: var(--text);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
}
.fb-toggle:hover { border-color: var(--accent); }
.fb-toggle .fb-chev { font-size: 10px; color: var(--muted); transition: transform .18s ease; }
.fb-toggle[aria-expanded="true"] .fb-chev { transform: rotate(180deg); }
.fb-toggle-count {
  background: rgba(var(--tint-rgb), 0.14); color: var(--accent);
  border-radius: 20px; padding: 1px 8px; font-size: 11.5px; font-weight: 700;
}
/* griglia a 3 colonne larghe esattamente 1/3 ciascuna (non piu' flex con
   min-width/flex-shrink, che le restringeva e lasciava margini sprecati) —
   le etichette sono il primo figlio di ogni colonna, quindi restano tutte
   sulla riga 1 della griglia per costruzione (mockup "Pannello Filtri
   Corretto", 31/08/2026 — due giri di correzioni precedenti: centrare tutto
   il blocco spostava anche l'etichetta fuori riga; poi space-between sui
   campi allungava un gruppo da 2 fino in fondo alla colonna piu' alta,
   spingendo il secondo campo alla riga 3 invece che alla riga 2). */
.fb-groups {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 14px; border-top: 1px solid rgba(var(--tint-rgb), 0.25);
}
.fb-groups[hidden] { display: none; }
.fb-group { padding: 0 20px; display: flex; flex-direction: column; }
.fb-group:first-child { padding-left: 0; }
.fb-group:last-child { padding-right: 0; }
.fb-group + .fb-group { border-left: 1px solid rgba(var(--tint-rgb), 0.25); }
.fb-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); margin-bottom: 10px; flex: none;
}
/* i campi restano impacchettati subito sotto l'etichetta (align-content:
   start, il default) — riga 2 e' sempre il secondo campo del gruppo, mai
   spinto piu' giu' per inseguire l'altezza di un altro gruppo. */
.fb-group-fields { flex: 1; display: grid; gap: 10px; align-content: start; }
.fb-group-fields.cols2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .fb-groups { grid-template-columns: 1fr; gap: 16px; }
  .fb-group { padding: 0 !important; border-left: none !important; }
  .fb-group + .fb-group { border-top: 1px solid rgba(var(--tint-rgb), 0.25); padding-top: 16px !important; }
}

.userbox { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* ---------- TABS ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab:hover { color: var(--text); }

/* ---------- MAIN ---------- */
main { padding: 22px; max-width: 1200px; margin: 0 auto; }
.results-meta { margin-bottom: 12px; font-size: 13px; }

/* ---------- Finder: box "Risposta AI" ---------- */
.ai-summary-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ai-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
}
.ai-summary-actions { display: flex; align-items: center; gap: 8px; }
#ai-summary-group-select { width: auto; padding: 7px 10px; font-size: 13px; }
.ai-summary-body { min-height: 40px; }
/* stato attivo del bottone Hold — stessa scala bordeaux-tenue di Osservazioni/
   Finder (vedi .note-section e .finder-btn.active piu' sopra/sotto). */
#ai-summary-hold-btn.active {
  background: rgba(var(--tint-rgb), 0.18);
  color: var(--accent);
  border-color: rgba(var(--tint-rgb), 0.4);
}

/* ---------- FINDER (selettori COSA/COME) ---------- */
/* 23/08/2026: box "selezione" (COSA/COME + filtri) rifatti piu' visibili su
   richiesta esplicita ("c'e' molto molto grigio simile al background e si
   perde molto") — bordo piu' marcato invece del grigissimo --panel/--border
   quasi identici a --bg, e il bottone attivo ora e' bordeaux pieno invece di
   un bianco su grigio che si notava a malapena.
   23/08/2026 (v2, su feedback utente — "non mi piacciono i colori, quelli di
   Osservazioni sono belli"): sostituito il grigio (--muted) e il bordeaux
   pieno con la stessa palette bordeaux-tenue di .note-section/.note-textarea/
   .company-note-card (rgba(var(--tint-rgb), .04-.25) — vedi quei blocchi piu' sopra
   per la stessa scala di trasparenze), cosi' i widget di selezione del Finder
   sono coerenti con la scheda azienda invece di grigio neutro + blocco pieno. */
.finder-toolbar { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.finder-selector {
  display: flex;
  background: rgba(var(--tint-rgb), 0.07);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.finder-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.finder-btn:hover { color: var(--text); background: rgba(var(--tint-rgb), 0.05); }
.finder-btn.active { background: rgba(var(--tint-rgb), 0.22); color: var(--accent); }

/* selettore Elenco/Cluster del blocco Azionisti (02/09/2026) — riga a parte
   sotto il selettore Tutti/Aziende/Azionisti, visibile SOLO quando il
   blocco Azionisti e' in vista (vedi updateAzionistiModeUi in app.js):
   niente da raggruppare mentre si guarda solo "Aziende". */
.view-mode-row { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; }
.view-mode-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.finder-selector.compact { padding: 2px; }
.finder-selector.compact .finder-btn { padding: 6px 11px; font-size: 12.5px; }

.semantic-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(var(--tint-rgb), 0.07);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  border-radius: 10px;
}
.semantic-searchbar input {
  flex: 1;
  background: var(--bg);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.semantic-searchbar input:focus { outline: none; border-color: var(--accent); }
.semantic-searchbar button { white-space: nowrap; }

/* riquadro "selezione" per i filtri classici (searchbar) e la mappa
   (map-filters) — prima erano flottanti direttamente sullo sfondo pagina
   senza alcun contenitore, quasi invisibili. */
.searchbar, .map-filters {
  background: rgba(var(--tint-rgb), 0.07);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  border-radius: 10px;
  padding: 10px;
}
.searchbar { margin-bottom: 16px; }
.searchbar input, .searchbar select, .map-filters input, .map-filters select {
  border: 1px solid rgba(var(--tint-rgb), 0.25);
}

.list { display: flex; flex-direction: column; gap: 10px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.card:hover { background: var(--card-hover); }
.card .title { font-size: 16px; font-weight: 700; }
.card .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card .row { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; }
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.pill.strong { color: var(--accent); border-color: var(--accent); }
.pill.good { color: var(--good); background: var(--good-bg); border-color: var(--good-bg); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.bad { color: var(--bad); border-color: var(--bad); }
.pill.family { color: var(--accent); background: rgba(var(--tint-rgb), 0.1); border-color: transparent; font-weight: 600; }

/* ---------- card Aziende "split identita'/numeri" (31/08/2026) ----------
   scelta tra 3 mockup del Finder classico: pannello numerico separato a
   destra (sfondo --panel) cosi' fatturato/EBITDA/leva pesano quanto il nome
   invece di annegare in una riga di pill. Riusa var(--radius-card)/
   var(--shadow-card) (gia' seguiti da .own-cluster/.own-node) cosi' il tema
   Console (bordi piu' arrotondati + ombra) si applica automaticamente qui
   senza bisogno di duplicare le regole. */
.card.card-fin {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto; /* pannello numeri largo quanto il suo contenuto, mai schiacciato a una larghezza fissa */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-fin-id { padding: 15px 18px; min-width: 0; }
.card-fin .breadcrumb { color: var(--muted); font-size: 13px; margin-top: 4px; }
.card-fin .breadcrumb .sep { color: var(--muted); opacity: .55; margin: 0 4px; }
.card-fin-id-bottom { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.card-fin-id-bottom .prov { font-size: 12.5px; color: var(--muted); }
.card-fin-nums {
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 13px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.card-fin-nums .fy { font-size: 10.5px; font-family: var(--font-mono); color: var(--muted); opacity: .8; margin-bottom: 1px; white-space: nowrap; }
.card-fin-nums .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; white-space: nowrap; }
.card-fin-nums .stat-row .k { font-size: 12px; color: var(--muted); }
.card-fin-nums .stat-row .v { font-size: 13.5px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.card-fin-nums .stat-row .v.good { color: var(--good); }
.card-fin-nums .stat-row .v.warn { color: var(--warn); }
.card-fin-nums .stat-row .v.bad { color: var(--bad); }
@media (max-width: 640px) {
  .card.card-fin { grid-template-columns: 1fr; }
  .card-fin-nums { border-left: none; border-top: 1px solid var(--border); }
}

/* ---------- FINDER in 3 blocchi: card gruppo (accordion) ----------
   28/08/2026: Aziende/Gruppi/Azionisti in tre blocchi separati (vedi app.js
   renderUnified/blockHtml), ordine deciso da Runa in AI o fisso in Classico.
   Un gruppo (2+ aziende) e' un <details class="group"> che si apre sulle sue
   aziende socie (.grp-member); stessi token (--card/--border/--muted/
   --accent/--tint-rgb) delle .card gia' esistenti cosi' da restare coerente
   anche sotto [data-theme="console"]. */
.finder-block { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Watchlist: bottone "Aggiungi"/"Rimuovi" sopra ogni card
   (31/08/2026) ----------
   Una barretta sopra la card invece di un bottone dentro companyCardHtml/
   groupCardHtml/azionistaCardHtml: cosi' i risultati del Finder e la
   Watchlist mostrano ESATTAMENTE la stessa card (stesso layout impostato
   nel Finder, richiesta esplicita) e il bottone non deve mai gestire il
   click-toggle dell'accordion Gruppi (e' un fratello di <details>, non un
   figlio dentro <summary>). */
.result-item-bar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.watch-star, .watch-remove-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.watch-star:hover { color: var(--accent); border-color: var(--accent); }
.watch-star.added { color: var(--accent); border-color: var(--accent); cursor: default; }
.watch-remove-btn:hover { color: var(--bad); border-color: var(--bad); }

.finder-block-head {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 700; margin: 4px 2px 0;
}
.finder-block-head .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
details.group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
details.group summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
details.group summary::-webkit-details-marker { display: none; }
.grp-badge {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tint-rgb), 0.12);
  color: var(--accent);
  font-size: 15px;
}
.grp-main { flex: 1; min-width: 0; }
.grp-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-weight: 700; margin-bottom: 2px; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.title-row .title { font-size: 16px; font-weight: 700; }
.grp-chev { flex: none; color: var(--muted); font-size: 12px; transition: transform .15s ease; }
details.group[open] .grp-chev { transform: rotate(90deg); }
.grp-members {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 6px 18px 14px;
}
.grp-member {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px 10px 22px;
  border-bottom: 1px solid var(--border);
  position: relative;
  border-radius: 6px;
}
.grp-member:last-child { border-bottom: none; }
.grp-member::before {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 8px; height: 1px; background: var(--border);
}
.grp-member[data-nif] { cursor: pointer; }
.grp-member[data-nif]:hover { background: var(--card-hover); }
.grp-member .mname { font-size: 13.5px; font-weight: 600; }
.grp-member .msub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.grp-member .mrev { font-family: var(--font-mono); font-size: 13px; font-weight: 700; flex: none; }
.grp-more { padding: 8px 4px 4px 22px; font-size: 12px; color: var(--muted); }
.grp-members button { margin: 10px 4px 0; }

/* ---------- Scheda azienda: "Controllo e azionisti" come albero
   ricorsivo espandibile ---------- 29/08/2026: sostituisce il tab Corporate
   tree separato — stesso "espandi" per un'azienda (mostra i suoi azionisti)
   o per un azionista (mostra le SUE altre aziende), a qualunque profondita',
   cresce dentro questa sezione invece che altrove. */
.own-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.own-section-head h2 { margin-bottom: 0; }
.own-section-actions { display: flex; align-items: center; gap: 8px; }
.own-fullscreen-btn {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--card);
  color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.own-fullscreen-btn:hover { color: var(--text); border-color: var(--muted); }
/* overlay CSS, non la Fullscreen API del browser (bloccata in iframe/anteprime
   come il tunnel cloudflared usato per le demo) — copre la pagina e scrolla
   sia in verticale che in orizzontale, utile per alberi societari profondi.
   La sezione viene anche spostata dentro <body> mentre e' attiva (vedi il
   pulsante schermo intero): senza, restava dentro alla griglia a due
   colonne della scheda azienda (.profile-two-col), che la limitava alla
   sola colonna principale invece di coprire tutta la pagina. */
#ownership-section.own-fullscreen {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100vw; height: 100vh; max-width: 100vw;
  z-index: 500; margin: 0; border-radius: 0; box-sizing: border-box;
  padding: 24px;
  /* colonna verticale: titolo/switch in alto (altezza naturale), il
     diagramma nel mezzo che si prende tutto lo spazio restante e scorre AL
     SUO INTERNO se piu' alto/largo dello schermo, la leggenda sempre
     ancorata in fondo — prima la leggenda seguiva il contenuto nel flusso
     normale, quindi con un diagramma corto restava appiccicata subito sotto
     le caselle invece che in fondo allo schermo. */
  display: flex; flex-direction: column; overflow: hidden;
}
#ownership-section.own-fullscreen .own-section-head { flex: none; }
#ownership-section.own-fullscreen #own-tree-root {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#ownership-section.own-fullscreen .own-back { flex: none; }
#ownership-section.own-fullscreen .own-canvas-wrap { flex: 1; min-height: 0; overflow: auto; }
#ownership-section.own-fullscreen .own-legend { flex: none; }
#ownership-section.own-fullscreen #own-drill { flex: none; overflow-y: auto; max-height: 30vh; }
.own-row-main {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.own-row-company { cursor: pointer; }
.own-row-company:hover { background: var(--card-hover); }
.own-toggle {
  flex: none; width: 20px; height: 20px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 11px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.own-toggle:hover { background: var(--panel); color: var(--text); }
.own-toggle:disabled { cursor: default; }
.own-toggle-empty { width: 20px; flex: none; }
.own-name { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-meta { font-size: 12px; color: var(--muted); flex: none; }
.own-cycle { font-size: 11px; font-style: italic; flex: none; }
.own-children { padding-left: 24px; border-left: 1px solid var(--border); margin-left: 9px; }
.own-empty { padding: 8px 4px 8px 24px; font-size: 12.5px; color: var(--muted); }

/* ---------- Organigramma / Mappa a gruppi (29/08/2026, v2): il tree chart
   visivo che sostituisce l'accordion piatto qui sopra come vista di default
   — l'accordion resta, riusato per il drill-down oltre i due livelli fissi
   (vedi commento su ownOpenDrill in app.js) e per le righe della Mappa a
   gruppi. Tutto qui sotto usa solo le custom property gia' definite in
   :root (--accent/--border/--radius-card/--font-mono/ecc), quindi si
   ricolora da solo con il tema Console senza bisogno di regole apposta. */
.own-switch { display: flex; background: var(--panel); border-radius: 8px; padding: 3px; gap: 2px; }
.own-switch button {
  border: none; background: transparent; color: var(--muted); font: inherit;
  padding: 7px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.own-switch button.active { background: rgba(var(--accent-rgb), .12); color: var(--accent); }

.own-canvas-wrap { overflow-x: auto; }
.own-canvas { position: relative; margin: 0 auto; }
.own-node {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 8px 12px;
}
.own-canvas .own-node { position: absolute; }
.own-node-standalone { max-width: 340px; margin: 0 auto 14px; }
.own-node-target { border-color: var(--accent); border-width: 2px; padding: 12px 16px; }
.own-node-target .own-node-title { font-size: 14.5px; }
.own-node-chip { background: var(--panel); border-style: dashed; box-shadow: none; }
.own-node[data-focus] { cursor: pointer; }
.own-node[data-focus]:hover { background: var(--card-hover); border-color: var(--muted); }
.own-node-head { display: flex; align-items: flex-start; gap: 6px; }
.own-node-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-node-title[data-nif] { cursor: pointer; }
.own-node-title[data-nif]:hover { color: var(--accent); text-decoration: underline; }
.own-node-meta { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-node-fin { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
/* toggle per aprire/chiudere le sotto-controllate di una casella-azienda
   nell'albero ricorsivo (vedi ownToggleSubtree) — gesto diverso e separato
   dal clic sul nome (che apre la scheda, sopra), cosi' i due non si
   confondono nonostante siano entrambi dentro la stessa casella. */
.own-node-drill {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: 11px; font-weight: 700; text-align: center; color: var(--accent); cursor: pointer;
}
.own-node-drill:hover { text-decoration: underline; }
.own-node-drill.muted { color: var(--muted); cursor: default; font-weight: 500; }
.own-node-drill.muted:hover { text-decoration: none; }
/* piu' grande e sempre visibile (non solo in hover): il feedback e' che la
   versione precedente, sottile e trasparente, era troppo piccola per essere
   notata come un controllo cliccabile. */
.own-expand-btn {
  flex: none; width: 24px; height: 24px; padding: 0; margin: -3px -3px 0 0;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  cursor: pointer; font-size: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.own-expand-btn:hover { background: var(--panel); color: var(--text); border-color: var(--muted); }
/* a schermo intero le caselle azienda sono gia' espanse di default (vedi
   app.js, ownFullscreen) — il pulsante diventerebbe un controllo che non fa
   piu' niente di visibile, meglio toglierlo che lasciarlo li' inerte. */
#ownership-section.own-fullscreen .own-expand-btn { display: none; }
.own-back {
  display: inline-block; background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-family: inherit; cursor: pointer; margin-bottom: 12px;
}
.own-back:hover { color: var(--text); border-color: var(--muted); }
/* casella "aperta": il testo va a capo invece di troncare, la larghezza e
   l'altezza seguono il contenuto (own-node-title/-meta perdono nowrap qui
   sotto), e sta sopra alle vicine — puo' coprirle un po', va bene: e' una
   lettura temporanea, non un nuovo stato permanente del diagramma. */
.own-node.expanded { box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.own-node.expanded .own-node-title,
.own-node.expanded .own-node-meta { white-space: normal; overflow: visible; text-overflow: unset; }
.own-line-pill {
  position: absolute; transform: translate(-50%, -50%); display: inline-block;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-family: var(--font-mono);
  border: 1px solid var(--border); background: var(--card); color: var(--text); white-space: nowrap;
}
.own-line-pill.muted { color: var(--muted); }
.own-dot {
  position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--card); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600;
  font-family: var(--font-mono); cursor: pointer;
}
.own-dot:hover { color: var(--text); border-color: var(--muted); }
.own-legend { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }

.own-cluster { border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 14px; overflow: hidden; }
.own-cluster-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.own-cluster-head-title { font-size: 13.5px; font-weight: 700; }
.own-cluster .own-row-main { padding: 8px 14px; }
.own-subhead { padding: 6px 14px; background: var(--panel); font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border); }

.own-drill { border: 1px dashed var(--border); border-radius: var(--radius-card); padding: 12px 14px; margin-top: 14px; }
.own-drill-head { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }

/* ---------- DETAIL ---------- */
.detail-head { margin-bottom: 18px; }
.back {
  background: transparent; border: none; color: var(--accent-2);
  cursor: pointer; padding: 0; margin-bottom: 12px; font-size: 14px;
}
.back:hover { text-decoration: underline; }
.detail-head h1 { font-size: 24px; margin-bottom: 4px; }
.detail-head .sub { color: var(--muted); }

.kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 130px;
}
.kpi .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 20px; font-weight: 800; margin-top: 3px; }

.section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.section h2 { font-size: 15px; margin-bottom: 12px; color: var(--text); }

.desc-doc { display: flex; flex-direction: column; }
.desc-doc .desc-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.desc-doc .desc-block:last-child { border-bottom: none; padding-bottom: 0; }
.desc-doc .desc-block:first-child { padding-top: 0; }
.desc-block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.desc-block p { font-size: 13px; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }

.category-labels { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cat-pill { color: var(--accent-2); border-color: var(--accent-2); }

.profile-two-col { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.profile-main, .profile-sidebar { display: flex; flex-direction: column; gap: 16px; }
.profile-main .section, .profile-sidebar .section { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; min-height: 0; }
.profile-sidebar .section { overflow-y: auto; }
.profile-main .desc-doc { flex: 1; overflow-y: auto; }
.profile-sidebar table.simple { display: block; overflow-x: auto; white-space: nowrap; }
.profile-sidebar .note-textarea { flex: 1; min-height: 0; }
.profile-sidebar .mini-map { flex: 1; height: auto; min-height: 180px; }
@media (max-width: 900px) {
  .profile-two-col { grid-template-columns: 1fr; }
  .profile-sidebar .section { max-height: 400px; }
}

.profile-two-square { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px) {
  .profile-two-square { grid-template-columns: 1fr; }
}

.fin-chart { width: 100%; height: 260px; margin-bottom: 16px; }
.mini-map { width: 100%; height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.news-results-scroll { max-height: 280px; overflow-y: auto; }
.similar-list-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

.note-section {
  background: rgba(var(--tint-rgb), 0.07);
  border-color: rgba(var(--tint-rgb), 0.25);
  flex: 2 !important;
}
.notes-linked-divider {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.25);
}
.note-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--text);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
  border-radius: 8px;
  padding: 10px 12px;
}
.note-textarea:focus { outline: none; border-color: var(--accent-2); }
.note-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.company-note-edit-textarea { min-height: 220px !important; flex: none !important; font-size: 14px; }

.company-note-card {
  background: rgba(var(--tint-rgb), 0.05);
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.company-note-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin-bottom: 6px; }
.company-note-card .company-note-edit-btn { margin-top: 6px; }

.news-filters { display: flex; gap: 10px; margin-bottom: 14px; }
.news-filters select { width: auto; min-width: 160px; }
.news-card .title a { color: var(--text); }
.news-card .title a:hover { color: var(--accent-2); }
.news-notice { margin-bottom: 8px; font-size: 13px; }

table.fin { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fin th, table.fin td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--border); }
table.fin th:first-child, table.fin td:first-child { text-align: left; }
table.fin th { color: var(--muted); font-weight: 600; }

table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th, table.simple td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
table.simple th { color: var(--muted); font-weight: 600; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

.detail-actions { display: flex; gap: 10px; margin-top: 14px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ---------- PROGETTI ---------- */
/* la scheda azienda ha UNA sola sezione per colonna, quindi align-items:stretch
   + flex:1 (righe 346/348 sopra) e' innocuo li'. Qui .profile-main impila 3
   sezioni (descrizione/parti/team) di lunghezza molto variabile: stretch le
   forzava a dividersi l'altezza in parti UGUALI qualunque fosse il loro
   contenuto reale, quindi "Parti coinvolte" (che puo' avere tante card) veniva
   schiacciata e il suo contenuto sconfinava fuori dal box, disallineando anche
   "Team" sotto — bug osservato dal vivo aggiungendo un'azienda o aprendo/
   chiudendo note. Con align-items:start ogni colonna prende la propria altezza
   naturale, senza dipendenze incrociate; .project-note-col ha comunque il suo
   tetto+scroll (vedi sotto) per non crescere all'infinito con tante note. */
#projects-view .profile-two-col { align-items: start; }
#projects-view .profile-main .section, #projects-view .profile-sidebar .section { flex: none; }
/* 23/08/2026: redesign "dashboard deal" — riusa .detail-head/.kpis/.pill/
   .profile-two-col/.section gia' definiti sopra per la scheda azienda, cosi'
   il progetto sembra la stessa famiglia di dashboard invece di un layout a
   parte. Le regole sotto coprono solo cio' che e' specifico dei progetti. */
.projects-topbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.projects-topbar .back { margin-bottom: 0; }
.spacer { flex: 1; }

/* descrizione del progetto al posto della casella Stage (23/08/2026, richiesta
   esplicita) — piu' larga e con flex-grow maggiore delle altre KPI numeriche,
   cosi' la riga riempie tutta la larghezza invece di lasciare spazio vuoto.
   Un div cliccabile (non un <button>, che su alcuni browser non eredita il
   font e stonava con il resto della riga) invece del solito grande numero
   in grassetto delle altre KPI: qui il "valore" e' un breve paragrafo, con
   un'icona matita che appare in hover a segnalare che si puo' modificare. */
/* stesso rosso tenue di .note-section (Osservazioni/Note) invece del bianco
   piatto — coerente con lo stesso linguaggio visivo usato altrove per i
   widget di testo libero/modificabile. */
.kpi-desc { flex: 2 1 260px; padding: 0; overflow: hidden; background: rgba(var(--tint-rgb), 0.07); border-color: rgba(var(--tint-rgb), 0.25); }
.kpi-desc-inner {
  width: 100%; height: 100%; cursor: pointer;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 5px;
}
.kpi-desc-inner:hover { background: rgba(var(--tint-rgb), 0.12); }
.kpi-desc-inner .label { display: flex; align-items: center; font-weight: 800; }
.kpi-desc-edit-hint { opacity: 0; margin-left: 6px; font-size: 11px; transition: opacity .15s; }
.kpi-desc-inner:hover .kpi-desc-edit-hint { opacity: .8; }
.kpi-desc-text {
  font-size: 13.5px; color: var(--text); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kpi-desc-text.placeholder { color: var(--muted); font-style: italic; }
.kpi-desc-textarea {
  width: 100%; min-height: 70px; font-family: inherit; font-size: 13.5px; padding: 10px 18px;
  border: none; background: transparent; resize: vertical;
}
.kpi-desc-textarea:focus { outline: none; }
.kpi-desc-actions { display: flex; gap: 8px; padding: 0 18px 12px; }

/* ---------- to-do rapida ---------- */
.quick-todo { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.quick-todo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.quick-todo-head h2 { font-size: 15px; }
.quick-todo-head .count { font-size: 12px; color: var(--muted); margin-left: auto; }
.todo-add-toggle {
  border: 1px dashed var(--border); background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer;
}
.todo-add-toggle:hover { border-color: var(--accent); color: var(--accent); }
.todo-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
/* stile "nota" (23/08/2026): bordo proprio come .project-group-note-item.
   Titolo (in grassetto, riconoscibile come tale) e le etichette (codice del
   processo/scadenza/persone) stanno tutte sullo stesso banner grigio, prima
   della X per eliminare — su richiesta esplicita erano finite nella fascia
   bianca sotto e non ci stavano bene. */
.todo-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.todo-title-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.todo-title-row:hover .todo-remove { visibility: visible; }
.todo-check { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); flex-shrink: 0; cursor: pointer; position: relative; }
.todo-check.done { background: var(--good); border-color: var(--good); }
.todo-check.done::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.todo-title-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; text-align: left; padding: 0;
}
.todo-chev { color: var(--accent); font-size: 11px; flex-shrink: 0; width: 9px; }
.todo-text { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item.done .todo-text { color: var(--muted); text-decoration: line-through; }
.todo-remove { visibility: hidden; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; flex-shrink: 0; line-height: 1; }
.todo-remove:hover { color: var(--bad); }
.todo-due { font-size: 11.5px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.todo-due.urgent { color: var(--bad); font-weight: 700; }
.todo-item-body { padding: 10px 12px 12px 35px; background: var(--card); }
.todo-body-text { font-size: 13px; line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }
.todo-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.todo-add-row input[type="text"] { flex: 1; min-width: 160px; }
.todo-add-row input[type="date"] { color: var(--muted); }
.todo-add-row select { max-width: 200px; }
/* codice corto (es. "T3") al posto del nome per esteso del processo — piu'
   compatto, e cliccabile per accendere la riga corrispondente nel Gantt.
   Stile condiviso con .task-code-badge (23/08/2026, richiesta esplicita:
   "i label dei task devono essere uniformi ovunque" — stesso aspetto qui,
   nel Gantt e in Parti coinvolte). */
.todo-task-code { border: none; cursor: pointer; flex-shrink: 0; }
.todo-task-code:hover { background: rgba(var(--accent-rgb), 0.16); }
.todo-people { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.todo-add-actions { display: flex; gap: 8px; margin-left: auto; }

.person-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--panel); color: var(--text); flex-shrink: 0;
}

/* gruppo di "chip" checkbox per assegnare piu' persone a un task/to-do
   (23/08/2026, richiesta esplicita: "voglio che piu' persone possano avere un
   task solo") — checkbox nascosto, la label fa da chip cliccabile. */
.people-toggle-group { display: flex; gap: 6px; flex-wrap: wrap; }
.people-toggle-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 10px 3px 4px; border-radius: 999px; border: 1.5px solid var(--border);
  color: var(--muted); cursor: pointer; user-select: none;
}
.people-toggle-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.people-toggle-chip .avatar { opacity: .45; }
.people-toggle-chip:has(input:checked) {
  border-color: var(--chip-color); color: var(--text); background: color-mix(in srgb, var(--chip-color) 12%, var(--card));
}
.people-toggle-chip:has(input:checked) .avatar { opacity: 1; }
.avatar {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* ---------- kpi: barra avanzamento (in aggiunta a .kpi gia' definito sopra) ---------- */
.kpi .kpi-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi .bar { height: 5px; border-radius: 3px; background: var(--panel); margin-top: 8px; overflow: hidden; }
.kpi .bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }

.section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }

/* ---------- parti coinvolte ---------- */
.party-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.party-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; display: flex; gap: 10px; position: relative; }
.party-mark {
  width: 34px; height: 34px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.08); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.party-body { min-width: 0; flex: 1; }
/* bollini automatici (23/08/2026): uno per ogni citazione (task/to-do/nota) —
   in basso invece che un unico bollino d'angolo, cosi' se sono piu' di uno
   si affiancano invece di nascondersi a vicenda — vedi _scan_mentions in
   routers/projects.py. */
.party-mentions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.party-mention-tag {
  font-size: 9.5px; font-weight: 800; color: #fff;
  border-radius: 999px; padding: 1px 7px;
}
/* colore per tipo di fonte (23/08/2026, richiesta esplicita: note e task
   devono distinguersi a colpo d'occhio) — qui in Parti coinvolte il task
   torna a sfondo pieno/testo bianco come le altre due (preferito su quello
   tenue di .task-code-badge, che resta invece lo stile del codice T{n} nel
   Gantt e nei to-do). */
.party-mention-tag.task { background: var(--accent); }
.party-mention-tag.todo { background: var(--warn); }
.party-mention-tag.note { background: var(--good); }
/* stile unico del codice di un task (T1, T2...) nel Gantt e nei to-do
   (23/08/2026, richiesta esplicita: "i label dei task devono essere
   uniformi ovunque" — tranne qui in Parti coinvolte, vedi sopra). */
.task-code-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08); border-radius: 999px; padding: 2px 8px;
}
.party-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.party-name:hover { color: var(--accent); text-decoration: underline; }
.party-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.party-stats { display: flex; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.party-stats b { color: var(--text); }
.party-role-select {
  width: 100%; margin-top: 6px; border: none; border-bottom: 1px dashed var(--border); background: transparent;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent);
  padding: 3px 0; cursor: pointer;
}
.party-role-select:invalid, .party-role-select option[value=""] { color: var(--muted); text-transform: none; font-weight: 600; }
.party-remove {
  position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--muted);
  font-size: 15px; cursor: pointer; line-height: 1;
}
.party-remove:hover { color: var(--bad); }
.add-party, .add-party-search {
  border: 1px dashed var(--border); border-radius: 10px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 12.5px; cursor: pointer; min-height: 62px; padding: 8px;
}
.add-party:hover { border-color: var(--accent); color: var(--accent); }
.add-party-search { flex-direction: column; align-items: stretch; cursor: default; position: relative; gap: 6px; }
.add-party-search input { width: 100%; }
.add-party-results { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; }
.add-party-result { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.add-party-result:hover { background: var(--panel); }
.add-party-result .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- team: banner compatto in fondo al widget To-do (23/08/2026,
   sostituisce la card intera "Team" di prima, giudicata superflua) ---------- */
.team-banner {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.team-chip { display: inline-flex; align-items: center; gap: 6px; }
.team-chip .avatar { width: 20px; height: 20px; font-size: 9.5px; }
.team-chip b { color: var(--text); font-variant-numeric: tabular-nums; }

/* NIENTE tetto di altezza qui (tolto 23/08/2026: un primo tentativo di
   correggere lo sfasamento di Team via max-height+scroll interno lasciava le
   note "tagliate" quando espanse — feedback esplicito). La causa vera dello
   sfasamento era altrove (align-items:start su #projects-view .profile-two-col,
   vedi sopra): con quella corretta, questa colonna puo' semplicemente crescere
   quanto le serve, come le altre. */
.project-note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.project-note-head h3 { font-size: 14px; color: var(--text); }
.project-note-col .notes-editor-wrap { min-height: 320px; }
.project-note-col .notes-body-textarea { min-height: 320px; background: var(--card); }

.project-gantt-col { flex: 1; min-width: 0; }
.project-canvas-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.project-canvas-hint { font-size: 12px; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
.view-toggle span { padding: 5px 11px; font-size: 12px; color: var(--muted); cursor: pointer; }
.view-toggle span.active { background: var(--text); color: #fff; }
/* in alto a destra nell'intestazione della sezione (23/08/2026, richiesta
   esplicita — prima stava in fondo al grafico) — .section-head e' gia' un
   flex row, margin-left:auto la spinge a destra senza serve altro. */
.gantt-legend { display: flex; gap: 16px; margin-left: auto; font-size: 11.5px; color: var(--muted); }
.gantt-legend .legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- elenco task a tendine sotto il Gantt ---------- */
.gantt-task-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.gantt-task-list-toggle {
  display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 0;
}
.gantt-task-list-toggle:hover { color: var(--text); }
.gantt-task-list-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.gantt-task-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.gantt-task-item-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: none; padding: 8px 10px; cursor: pointer; text-align: left;
}
.gantt-task-item-header:hover { background: var(--card-hover); }
.chev { color: var(--accent); font-size: 11px; flex-shrink: 0; width: 9px; }
.gantt-task-item-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-task-item-body { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--card); }

/* ---------- piano progetto: griglia custom (23/08/2026, sostituisce Frappe
   Gantt su richiesta esplicita — "il gantt e' bruttissimo"). Due colonne: nomi
   fissi a sinistra, caselle colorate scrollabili orizzontalmente a destra;
   lo scroll verticale e' su tutto #project-gantt-wrap (le due colonne restano
   sincronizzate perche' scrollano insieme, non serve sync via JS). ---------- */
.gantt2 { display: flex; align-items: flex-start; }
.gantt2-names { flex: 0 0 220px; min-width: 0; border-right: 1px solid var(--border); }
/* 44px = 16 (riga anni) + 28 (riga giorni/settimane/mesi) — deve combaciare
   esattamente con .gantt2-header sotto, altrimenti le righe si sfasano. */
.gantt2-corner { height: 44px; }
.gantt-row-name {
  height: 36px; display: flex; align-items: center; gap: 7px; padding-right: 8px;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.gantt-row-code { flex-shrink: 0; }
.gantt-row-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* clic sull'etichetta T{n} di una to-do -> questa riga si accende un istante
   (23/08/2026, richiesta esplicita: "cliccando sulla label, evidenzia la
   riga corrispondente nel gantt chart") */
.gantt-row-highlight { background: rgba(var(--accent-rgb), 0.12); transition: background 0.3s; }
.gantt2-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.gantt2-tracks { position: relative; }
.gantt2-header { height: 44px; position: relative; border-bottom: 1px solid var(--border); background: var(--card); }
.gantt2-year-row { height: 16px; position: relative; border-bottom: 1px solid var(--border); }
.gantt2-year {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 4px;
  font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.gantt2-tick-row { height: 28px; position: relative; }
.gantt2-tick {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 4px;
  font-size: 10.5px; color: var(--muted); border-left: 1px solid var(--border); white-space: nowrap;
}
.gantt2-year-line { position: absolute; top: 44px; bottom: 0; width: 1px; background: var(--border); z-index: 1; }
.gantt2-today-line { position: absolute; top: 44px; bottom: 0; width: 1px; background: var(--accent); z-index: 2; }
.gantt2-row { height: 36px; position: relative; border-bottom: 1px solid var(--border); }
/* semaforo (23/08/2026, richiesta esplicita): rosso finche' non parte,
   giallo appena in corso, verde solo a completamento — .gantt-block da solo
   (nessun modificatore) E' gia' lo stato "da iniziare" (rosso). */
.gantt-block {
  position: absolute; top: 7px; height: 22px; border-radius: 6px; cursor: pointer; overflow: hidden;
  background: var(--bad-bg); border: 1.5px solid var(--bad);
}
.gantt-block:hover { filter: brightness(0.97); }
.gantt-block-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bad); }
.gantt-block.gantt-progress { background: var(--warn-bg); border-color: var(--warn); }
.gantt-block.gantt-progress .gantt-block-fill { background: var(--warn); }
.gantt-block.gantt-done { background: var(--good-bg); border-color: var(--good); }
.gantt-block.gantt-done .gantt-block-fill { background: var(--good); }

.project-gantt-wrap-outer { position: relative; }
.project-floating-panel {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  width: 360px;
  max-width: calc(100% - 16px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(9,8,8,0.2);
  overflow: hidden;
}

/* ---------- pannello di modifica task (redesign 23/08/2026 — il precedente
   era un form generico ammassato, "terribile visivamente" per feedback
   esplicito: qui c'e' una testata separata, campi raggruppati con etichette
   sopra, un cursore per l'avanzamento invece di un numero nudo, e le azioni
   distinte per gerarchia (Elimina discreto a sinistra, Salva pieno a destra). */
.task-panel { display: flex; flex-direction: column; max-height: 70vh; }
.task-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.task-panel-head h3 { font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-panel-close {
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; flex-shrink: 0; padding: 2px 4px;
}
.task-panel-close:hover { color: var(--text); }
.task-panel-body { display: flex; flex-direction: column; gap: 16px; padding: 14px; overflow-y: auto; }
.task-panel-field { display: flex; flex-direction: column; gap: 6px; }
.task-panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.task-panel-label b { color: var(--accent); font-size: 12px; text-transform: none; letter-spacing: 0; }
.task-panel-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.task-panel-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--panel);
}
.task-panel-delete {
  background: none; border: none; color: var(--bad); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 4px 0;
}
.task-panel-delete:hover { text-decoration: underline; }

/* elenco collassabile delle note di un gruppo, nel pannello "Nota progetto"
   di un progetto legato a un gruppo (notes_group) — vedi renderProjectGroupNotesPanel */
.project-group-notes-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.project-group-note-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.project-group-note-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: none; padding: 8px 10px; cursor: pointer;
  font-size: 13px; color: var(--text); text-align: left;
}
.project-group-note-header:hover { background: var(--card-hover); }
.project-group-note-header .chev { color: var(--accent); flex-shrink: 0; width: 10px; }
.project-group-note-header .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.project-group-note-header .date { font-size: 11px; flex-shrink: 0; }
.project-group-note-body { padding: 10px 12px; border-top: 1px solid var(--border); }
/* niente tetto d'altezza (tolto 23/08/2026, stesso motivo del blocco sopra):
   testo intero visibile, non un'anteprima tagliata con mini-scroll interno. */
.project-group-note-text { font-size: 13px; line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }

/* ---------- MAPPA ---------- */
.map-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.map-filters select, .map-filters input { width: auto; min-width: 140px; }
.map-search-wrap { position: relative; flex: 1; min-width: 200px; }
.map-search-wrap input { width: 100%; }
.map-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(9,8,8,0.18);
}
.map-search-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.map-search-item:last-child { border-bottom: none; }
.map-search-item:hover { background: var(--card-hover); }
.maplibre-container {
  position: relative;
  width: 100%;
  height: 70vh;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.maplibregl-popup-content {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (max-width: 700px) {
  header { gap: 10px; }
  .userbox #user-email { display: none; }
}

/* ---------- NOTES WORKSPACE ---------- */
.notes-layout {
  display: grid;
  grid-template-columns: 200px 260px 1fr;
  gap: 14px;
  height: calc(100vh - 180px);
  min-height: 500px;
}
.notes-sidebar, .notes-list-col, .notes-editor-col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notes-sidebar-head, .notes-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.notes-list-head h2 { font-size: 14px; color: var(--text); }
.notes-group-list, .notes-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.notes-intel-search { flex-shrink: 0; margin-bottom: 6px; }
.notes-intel-results { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.notes-group-item, .notes-list-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.notes-group-item:hover, .notes-list-item:hover { background: var(--card-hover); }
.notes-group-item.active, .notes-list-item.active { background: var(--panel); border: 1px solid var(--accent); }
.notes-list-item .title { font-weight: 600; }
.notes-group-intel { font-weight: 700; color: var(--accent); }
.notes-group-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.notes-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-group-rename-btn, .notes-group-delete-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.notes-group-rename-btn { font-size: 13px; }
.notes-group-rename-btn:hover { color: var(--accent); }
.notes-group-delete-btn:hover { color: var(--bad); }
.notes-list-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 10px 10px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

.notes-editor-col { position: relative; overflow-y: auto; }
.notes-mini-head { margin-bottom: 16px; }
.notes-mini-head h2 { font-size: 20px; margin-bottom: 4px; }
.notes-mini-desc { font-size: 13px; line-height: 1.6; margin: 16px 0; }
.notes-mini-mentions-label { font-size: 12px; margin-bottom: 8px; }
.notes-mini-mentions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.notes-mini-mention-pill { cursor: pointer; }
.notes-mini-mention-pill:hover { border-color: var(--accent); color: var(--text); }
#notes-company-mini .kpis { margin-bottom: 8px; }
.notes-title-input {
  font-size: 18px;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 4px 0 10px;
  margin-bottom: 10px;
  width: 100%;
}
.notes-title-input:focus { outline: none; border-color: var(--accent); }
.notes-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.notes-editor-wrap { position: relative; flex: 1; display: flex; }
.notes-body-textarea {
  width: 100%;
  flex: 1;
  font-family: inherit;
  background: rgba(var(--tint-rgb), 0.04);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  line-height: 1.7;
  font-size: 14px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.notes-body-textarea:focus { outline: none; border-color: var(--accent-2); }
.notes-body-locked { cursor: default; background: rgba(9,8,8,0.03); border-style: dashed; }
.notes-body-textarea:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.notes-autocomplete {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(9,8,8,0.18);
  z-index: 20;
}
.note-chip {
  cursor: pointer;
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
}
.note-chip:hover { text-decoration: underline; }
.note-link-chip, .note-group-chip { color: var(--accent-2); }

/* pannello "Note collegate qui" (backlink stile Obsidian) sotto l'editor */
.notes-backlinks { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.notes-backlinks-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.notes-backlinks-list { display: flex; flex-wrap: wrap; gap: 8px; }
.notes-backlink-item {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; background: var(--card);
}
.notes-backlink-item:hover { border-color: var(--accent); color: var(--text); }

@media (max-width: 900px) {
  .notes-layout { grid-template-columns: 1fr; height: auto; }
  .notes-sidebar, .notes-list-col, .notes-editor-col { min-height: 260px; }
}

/* ---------- RUNA AI ---------- */
.runa-layout {
  display: flex;
  gap: 14px;
  height: calc(100vh - 180px);
  min-height: 500px;
}
.runa-sidebar {
  flex: 0 0 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.runa-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.runa-conv-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.runa-conv-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.runa-conv-item:hover { background: var(--card-hover); }
.runa-conv-item.active { background: var(--panel); border: 1px solid var(--accent); }
.runa-conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runa-conv-delete-btn {
  background: transparent; border: none; color: var(--muted); font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0;
}
.runa-conv-delete-btn:hover { color: var(--bad); }

.runa-chat-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.runa-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 12px;
}
.runa-msg { max-width: 70%; }
.runa-msg-author { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.runa-msg-body {
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.runa-msg-user { align-self: flex-end; }
.runa-msg-user .runa-msg-author { text-align: right; }
.runa-msg-user .runa-msg-body { background: rgba(var(--tint-rgb), 0.08); }
.runa-msg-assistant { align-self: flex-start; }
.runa-typing .runa-msg-body { color: var(--muted); font-style: italic; }
.runa-msg-body.error { color: var(--bad); background: transparent; padding: 0; }
.runa-input-row { display: flex; gap: 8px; align-items: flex-end; }
.runa-input-wrap { position: relative; flex: 1; }
.runa-input-editable {
  width: 100%;
  min-height: 40px;
  max-height: 160px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.runa-input-editable:focus { outline: none; border-color: var(--accent); }
.runa-input-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
/* il dropdown @menzione delle Notes e' pensato per apparire in basso dentro
   un'area di testo grande; qui l'input e' in fondo alla pagina, quindi va
   fatto comparire SOPRA invece che sovrapposto alla casella stessa. */
.runa-input-wrap .notes-autocomplete { bottom: 100%; top: auto; margin-bottom: 4px; }

@media (max-width: 900px) {
  .runa-layout { flex-direction: column; height: auto; }
  .runa-sidebar { max-height: 200px; }
  .runa-chat-col { min-height: 400px; }
}
@media (max-width: 700px) {
  .runa-msg { max-width: 90%; }
}

/* ---------- WIZARD "Nota -> Progetto" (modal) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 8, 8, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  width: 560px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(9, 8, 8, 0.3);
}
/* ---------- Ricerca rapida (Ctrl/Cmd+K, "Vai a...") ---------- */
/* stesso overlay del wizard ma allineata in alto (stile "command palette",
   non un dialogo centrato) e senza il padding di .modal-card: l'input deve
   occupare tutta la larghezza fin sopra, i risultati subito sotto. */
.quickswitch-overlay { align-items: flex-start; padding-top: 12vh; }
.quickswitch-card { width: 560px; padding: 0; overflow: hidden; }
#quick-switch-input {
  width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border);
  padding: 16px 18px; font-size: 15px; background: transparent; color: var(--text); font-family: inherit;
}
#quick-switch-input:focus { outline: none; }
.quickswitch-results { max-height: 50vh; overflow-y: auto; }
.quickswitch-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; }
.quickswitch-item.active, .quickswitch-item:hover { background: var(--panel); }
.quickswitch-item .qs-icon { flex: none; }
.quickswitch-item .qs-label { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quickswitch-item .qs-meta { font-size: 11.5px; color: var(--muted); flex: none; }
.quickswitch-empty { padding: 20px 18px; color: var(--muted); font-size: 13px; text-align: center; }

.wizard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wizard-head h2 { font-size: 17px; }
.wizard-close-btn { background: transparent; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.wizard-close-btn:hover { color: var(--text); }
.wizard-history { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 220px; overflow-y: auto; }
.wizard-history-item { font-size: 12.5px; padding: 7px 10px; border-radius: 8px; line-height: 1.4; }
.wizard-history-item.q { color: var(--muted); }
.wizard-history-item.a { background: var(--panel); }
.wizard-question {
  background: rgba(var(--tint-rgb), 0.06);
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.wizard-answer-row { display: flex; gap: 8px; }
.wizard-answer-row textarea {
  flex: 1; min-height: 60px; resize: vertical; font-family: inherit; font-size: 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.wizard-status { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 16px; }
.wizard-plan-summary { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.wizard-task-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 300px; overflow-y: auto; }
.wizard-task-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 8px 10px; background: var(--panel); border-radius: 8px; }
.wizard-task-row .phase { color: var(--accent); font-weight: 600; min-width: 100px; flex-shrink: 0; }
.wizard-task-row .name { flex: 1; }
.wizard-task-row .dates { color: var(--muted); white-space: nowrap; }
.wizard-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Piano progetto (griglia custom) ---------- */
/* niente piu' bordo/sfondo proprio (23/08/2026): ora vive dentro un .section
   come il resto della dashboard progetto — un secondo bordo qui dentro
   sarebbe una card-in-card ridondante. Tetto di altezza + scroll verticale
   quando i task sono tanti (le due colonne di .gantt2 scrollano insieme
   perche' condividono questo stesso contenitore). */
#project-gantt-wrap {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}
.project-gantt-empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- pannello di modifica task (click su una casella del Gantt) ---------- */
.task-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-edit-grid label {
  display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.task-edit-done { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.task-edit-done input { width: auto; accent-color: var(--accent); }
/* completo = 100% e basta (23/08/2026, richiesta esplicita: non ha senso poter
   scegliere una percentuale diversa su un task gia' segnato fatto). */
.task-progress-locked { opacity: 0.5; }
.task-progress-locked input[type="range"] { cursor: not-allowed; }

/* ============================================================
   TEMA "Console" (23/08/2026) — variante di linguaggio grafico
   selezionabile dall'utente in alternativa al tema di default, senza
   sostituirlo: attivata mettendo data-theme="console" su <html> (vedi
   il selettore tema in app.js, salvato in localStorage). Il resto del
   file usa gia' solo le custom property qui sotto (--bg/--accent/ecc,
   piu' --tint-rgb/--accent-rgb per le tinte rgba()), quindi ridefinirle
   qui basta a ricolorare l'intero sito; questo blocco aggiunge in piu'
   solo cio' che il tema di default non parametrizza ancora (raggio e
   ombra delle card, forma delle tab). Il logo resta quello caricato
   dall'utente (/logo.png), non viene toccato. */
[data-theme="console"] {
  --bg: #ffffff;
  --panel: #f6f7fb;
  --card: #ffffff;
  --card-hover: #eef0f6;
  --border: #e7e9f2;
  --disabled: #d7dae4;
  --text: #12141c;
  --muted: #5b6072;
  --accent: #2451e0;
  --accent-2: #2451e0;
  --accent-rgb: 36, 81, 224;
  --tint-rgb: 36, 81, 224;
  --good: #1f9d55;
  --good-bg: #e8f7ee;
  --bad: #d64545;
  --bad-bg: #fdeceb;
  --warn: #c9862a;
  --warn-bg: #fdf1e0;
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(18, 20, 28, .05), 0 1px 8px rgba(18, 20, 28, .03);
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: 'Sora', var(--font-ui);
  --font-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", monospace;
}
[data-theme="console"] h1, [data-theme="console"] h2, [data-theme="console"] h3 { font-weight: 700; }
[data-theme="console"] header,
[data-theme="console"] .tabs { background: var(--bg); }
[data-theme="console"] .tabs { padding: 8px 22px 10px; gap: 2px; }
[data-theme="console"] .tab {
  border-radius: 8px; border-bottom: none; padding: 8px 14px; font-size: 13px;
}
[data-theme="console"] .tab.active {
  background: rgba(var(--accent-rgb), .1); color: var(--accent);
}
[data-theme="console"] .card,
[data-theme="console"] .section,
[data-theme="console"] .note-section,
[data-theme="console"] .company-note-card,
[data-theme="console"] .kpi,
[data-theme="console"] .kpi-desc,
[data-theme="console"] .party-card,
[data-theme="console"] .todo-item,
[data-theme="console"] .gantt-task-item,
[data-theme="console"] .ai-summary-box,
[data-theme="console"] .quick-todo,
[data-theme="console"] .login-card,
[data-theme="console"] .modal-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
[data-theme="console"] .btn-primary { border-radius: 8px; }
[data-theme="console"] .pill { border-radius: 999px; }
[data-theme="console"] .task-code-badge,
[data-theme="console"] .party-mention-tag,
[data-theme="console"] .todo-task-code {
  font-family: var(--font-mono);
}